/* Assortiqa Website Styles */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Keeps the page from shifting left when a scrollbar appears. */
  scrollbar-gutter: stable;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
  background: #f8f9fa;
  color: #1e3a5f;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Sticky footer: main grows so the footer sits at the bottom on short pages. */
body > main {
  flex: 1 0 auto;
}

body > .footer {
  flex-shrink: 0;
}

/* Shared app pages: wide for lists, narrow for forms */
/* Shared page chrome — values taken from My requests list headers. */
.page-container,
.app-page {
  width: 100%;
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1.5rem calc(4rem + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

.page-container--narrow,
.app-page--narrow {
  max-width: 760px;
}

.page-header {
  margin: 0 0 1.75rem;
}

.page-back {
  display: inline-block;
  margin: 0 0 0.75rem;
  color: #4a9eff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.3;
}

.page-back:hover {
  text-decoration: underline;
}

.page-title,
.app-page-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1e3a5f;
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

.page-subtitle,
.app-page-subtitle {
  color: #5a6c7d;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  max-width: 60ch;
}

@media (max-width: 640px) {
  .page-title,
  .app-page-title {
    font-size: 1.5rem;
  }
}

body.mobile-nav-open {
  overflow: hidden;
}

img {
  max-width: 100%;
  display: block;
}

/* Navigation */
.navbar {
  background: white;
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 10px 30px rgba(30, 58, 95, 0.06);
  backdrop-filter: blur(18px);
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
}

.logo-text {
  font-size: 24px;
  font-weight: 700;
  color: #2d5f8d;
}

.nav-desktop-shell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  flex: 1;
  min-width: 0;
}

.nav-menu {
  display: flex;
  list-style: none;
  align-items: center;
  gap: 2rem;
  margin: 0;
  min-width: 0;
}

.nav-menu--authenticated {
  gap: 1.1rem;
}

.nav-menu-divider {
  width: 1px;
  height: 20px;
  margin: 0 0.15rem;
  background: #d7e3ef;
  flex-shrink: 0;
  list-style: none;
}

.nav-menu a {
  color: #1e3a5f;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.96rem;
  white-space: nowrap;
  transition: color 0.3s, opacity 0.3s;
}

.nav-menu a:hover {
  color: #2d5f8d;
}

.nav-menu a:focus-visible {
  outline: none;
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.16);
}

.nav-menu a.is-current,
.nav-menu a[aria-current="page"] {
  color: #2d5f8d;
  font-weight: 700;
  box-shadow: inset 0 -2px 0 #4a9eff;
}

.nav-menu a.is-current:focus-visible,
.nav-menu a[aria-current="page"]:focus-visible {
  box-shadow: inset 0 -2px 0 #4a9eff, 0 0 0 4px rgba(74, 158, 255, 0.16);
}

.nav-auth-desktop {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

@media (min-width: 1025px) {
  .nav-container {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
  }

  .nav-desktop-shell {
    display: contents;
  }

  .nav-menu {
    justify-content: center;
  }

  .nav-menu--authenticated {
    gap: 0.95rem;
  }

  .nav-auth-desktop {
    justify-self: end;
  }
}

.nav-auth-links {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.nav-text-link {
  color: #2d5f8d;
  text-decoration: none;
  font-weight: 600;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-text-link:hover {
  background: #eef5ff;
}

.mobile-nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #d7e6fb;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  color: #1e4f85;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mobile-nav-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.mobile-nav-toggle:hover {
  transform: translateY(-1px);
  border-color: #c7dbf7;
  box-shadow: 0 12px 24px rgba(30, 58, 95, 0.08);
}

.mobile-nav-open .mobile-nav-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.mobile-nav-open .mobile-nav-toggle span:nth-child(2) {
  opacity: 0;
}

.mobile-nav-open .mobile-nav-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-nav {
  display: none;
}

.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 51, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.mobile-nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(400px, 100vw);
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.98);
  border-left: 1px solid #e8eef3;
  box-shadow: -20px 0 50px rgba(30, 58, 95, 0.16);
  transform: translateX(100%);
  transition: transform 0.24s ease;
}

.mobile-nav.is-open .mobile-nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav.is-open .mobile-nav-panel {
  transform: translateX(0);
}

.mobile-nav-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1rem 1rem;
  border-bottom: 1px solid #edf2f7;
  color: #1e3a5f;
  font-weight: 700;
}

.mobile-nav-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0.25rem 1rem calc(1.75rem + env(safe-area-inset-bottom, 16px));
}

.mobile-nav-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #d9e3ec;
  border-radius: 14px;
  background: #fff;
  color: #2d5f8d;
  font-size: 1.5rem;
  cursor: pointer;
}

.mobile-nav-section {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem 0;
}

.mobile-nav-section + .mobile-nav-section {
  border-top: 1px solid #edf2f7;
  margin-top: 0.25rem;
}

.mobile-nav-divider {
  height: 1px;
  margin: 0.15rem 0;
  background: #e1ebf6;
  border: 0;
}

.mobile-nav-link,
.mobile-nav-button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 0.95rem 1rem;
  border-radius: 16px;
  text-decoration: none;
  color: #1e3a5f;
  font-weight: 600;
  background: #fff;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mobile-nav-link.is-current,
.mobile-nav-link[aria-current="page"] {
  color: #2d5f8d;
  font-weight: 700;
  background: #eef5ff;
}

.mobile-nav-link:hover,
.mobile-nav-button:hover,
.mobile-nav-link-emphasis {
  background: #f4f8fe;
  border-color: #e1ebf6;
  color: #2d5f8d;
}

.mobile-nav-form {
  margin: 0;
}

.mobile-nav-button {
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.mobile-nav-button--signout {
  margin-top: 0.25rem;
  border: 1px solid #e8c4c4;
  background: linear-gradient(180deg, #fff8f8 0%, #fdeeee 100%);
  color: #9b1c1c;
}

.mobile-nav-button--signout:hover {
  background: linear-gradient(180deg, #fff0f0 0%, #fae0e0 100%);
  border-color: #ddb0b0;
  color: #7a1515;
}

.mobile-nav-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 1rem 1.15rem;
  border-radius: 22px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.02rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mobile-nav-action:hover {
  transform: translateY(-1px);
}

.mobile-nav-action-primary {
  background: linear-gradient(135deg, #4a9eff 0%, #2d5f8d 100%);
  color: #fff;
  box-shadow: 0 14px 28px rgba(74, 158, 255, 0.24);
}

.mobile-nav-action-primary:hover {
  box-shadow: 0 16px 30px rgba(74, 158, 255, 0.28);
}

.mobile-nav-action-secondary {
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  border: 1px solid #d7e6fb;
  color: #2d5f8d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.mobile-nav-action-secondary:hover {
  border-color: #c7dbf7;
  background: linear-gradient(180deg, #fbfdff 0%, #f3f8fe 100%);
}

.mobile-account-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  border: 1px solid #d7e6fb;
  color: #1e4f85;
  font-weight: 600;
  word-break: break-word;
}

.mobile-nav-cta {
  width: 100%;
  min-height: 52px;
}

.cta-button {
  background: linear-gradient(135deg, #4a9eff 0%, #2d5f8d 100%);
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 25px;
  font-weight: 600;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(74, 158, 255, 0.3);
}

.navbar .nav-user-wrap {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.navbar .nav-user-wrap > * {
  flex: 0 0 auto;
}

.navbar .nav-user-email {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 240px;
  padding: 0 1rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  border: 1px solid #d7e6fb;
  color: #1e4f85;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.navbar .nav-inline-form {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.account-dropdown {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.account-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.25rem 0.55rem 0.25rem 0.3rem;
  border-radius: 999px;
  border: 1px solid #d7e6fb;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  color: #1e4f85;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s, background 0.2s;
}

.account-dropdown-trigger:hover {
  transform: translateY(-1px);
  border-color: #c7dbf7;
  background: linear-gradient(180deg, #f8fbff 0%, #e8f2ff 100%);
  box-shadow: 0 12px 24px rgba(30, 58, 95, 0.08);
}

.account-dropdown-trigger:focus-visible,
.account-dropdown-item:focus-visible,
.danger-button:focus-visible,
.mobile-nav-toggle:focus-visible,
.mobile-nav-close:focus-visible,
.mobile-nav-link:focus-visible,
.mobile-nav-button:focus-visible,
.mobile-nav-action:focus-visible,
.nav-text-link:focus-visible,
.page-toast__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.16);
}

.account-dropdown-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4a9eff 0%, #2d5f8d 100%);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  flex-shrink: 0;
}

.account-dropdown-trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: #2d5f8d;
  font-size: 0.85rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.account-dropdown.is-open .account-dropdown-trigger-icon {
  transform: rotate(180deg);
}

.account-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.8rem);
  right: 0;
  width: min(260px, calc(100vw - 2rem));
  padding: 0.55rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #e8eef3;
  box-shadow: 0 24px 50px rgba(30, 58, 95, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 1100;
}

.account-dropdown.is-open .account-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.account-dropdown-email {
  margin: 0.15rem 0.35rem 0.45rem;
  padding: 0.35rem 0.65rem;
  color: #7a8998;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-dropdown-divider {
  height: 1px;
  margin: 0.35rem 0.45rem;
  background: #e8eef3;
  border: 0;
}

.account-dropdown-form {
  margin: 0;
}

.account-dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 1rem;
  border-radius: 14px;
  color: #1e3a5f;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  box-sizing: border-box;
  transition: background 0.2s ease, color 0.2s ease;
}

.account-dropdown-item:hover,
.account-dropdown-item:focus-visible {
  background: #f3f8fe;
  color: #2d5f8d;
}

.account-dropdown-item-button {
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.account-dropdown-item--signout,
.account-dropdown-item--signout:hover,
.account-dropdown-item--signout:focus-visible {
  color: #b42318;
  font-weight: 600;
}

.account-dropdown-item--signout:hover,
.account-dropdown-item--signout:focus-visible {
  background: #fff5f4;
}

/* Hero Section */
.hero-section {
  position: relative;
  /* Slightly shorter band so What We Do peeks above the fold on ~1440x900. */
  min-height: clamp(420px, 54vh, 520px);
  background: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%);
  padding: clamp(3.5rem, 6vw, 6rem) 2rem clamp(2.25rem, 4vw, 3.6rem);
  overflow: hidden;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.hero-title {
  font-size: clamp(3rem, 6vw, 4.25rem);
  color: #1e3a5f;
  margin-bottom: 1.5rem;
  font-weight: 300;
  line-height: 1.1;
}

.hero-title .highlight {
  color: #4a9eff;
  font-weight: 400;
}

.hero-subtitle {
  max-width: 640px;
  margin: 0 auto 2.5rem;
  font-size: 1.25rem;
  color: #5a6c7d;
  line-height: 1.6;
}

.hero-cta-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 3;
}

.hero-cta {
  box-sizing: border-box;
  min-height: 54px;
  background: linear-gradient(135deg, #4a9eff 0%, #2d5f8d 100%);
  color: white;
  border: 2px solid transparent;
  padding: 14px 32px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.hero-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(74, 158, 255, 0.4);
}

.hero-cta-secondary {
  background: transparent;
  color: #2d5f8d;
  border-color: #2d5f8d;
  box-shadow: none;
}

.hero-cta-secondary:hover {
  background: rgba(45, 95, 141, 0.08);
  box-shadow: 0 8px 20px rgba(45, 95, 141, 0.18);
}

/* Floating Images — behind copy/CTAs; must not capture clicks (WebKit needs this on imgs too)

   Two diagonal pairs, mirrored. In each pair the upper tile sits at the outer
   edge and the lower one steps in towards the copy by --hero-tile-dx and down
   by --hero-tile-dy, so the two read as separate, offset photos with clear
   space between them. Positions are in px from the top of the hero, not % of
   its height: the hero is only 420-520px tall, and % positions squeezed the
   pairs into each other on shorter screens.

   Partners float half a cycle apart (delays 0s/3s and 1s/4s on a 6s loop), so
   they alternate: one rises while the other settles. Either way the gap
   between them can close by at most the 20px float, so the vertical step is
   tile + --hero-tile-gap + 20px. The photos never touch, at any moment. */
.floating-images {
  --hero-tile: 160px;
  /* Both scale with the viewport so the inner tile keeps ~30px clear of the
     640px subtitle from 1200px up; they settle at 100px / 9rem on wide screens. */
  --hero-tile-dx: clamp(64px, calc(50vw - 520px), 100px);
  --hero-tile-gap: 24px;
  --hero-tile-dy: calc(var(--hero-tile) + var(--hero-tile-gap) + 20px);
  --hero-pair-top: 2.5rem;
  --hero-pair-edge: clamp(0.75rem, calc(50vw - 610px), 9rem);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}

.float-img {
  position: absolute;
  width: var(--hero-tile);
  height: var(--hero-tile);
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  animation: float 6s ease-in-out infinite;
  pointer-events: none;
}

/* Left pair: upper tile outside, lower tile stepped in and drawn on top. */
.float-1 {
  top: var(--hero-pair-top);
  left: var(--hero-pair-edge);
  z-index: 1;
  animation-delay: 0s;
}

.float-3 {
  top: calc(var(--hero-pair-top) + var(--hero-tile-dy));
  left: calc(var(--hero-pair-edge) + var(--hero-tile-dx));
  z-index: 2;
  animation-delay: 3s;
}

/* Right pair: the mirror image, set slightly lower so the two sides do not
   look stamped from one template. */
.float-2 {
  top: calc(var(--hero-pair-top) + 1.5rem);
  right: var(--hero-pair-edge);
  z-index: 1;
  animation-delay: 1s;
}

.float-4 {
  top: calc(var(--hero-pair-top) + 1.5rem + var(--hero-tile-dy));
  right: calc(var(--hero-pair-edge) + var(--hero-tile-dx));
  z-index: 2;
  animation-delay: 4s;
}

/* The staggered pairs need ~430px of height at full size. The hero only grew to
   its 420px minimum on short laptop screens, which clipped the lowest photo, so
   keep a floor that fits them plus 24px of air. Taller screens already exceed it. */
@media (min-width: 1200px) {
  .hero-section {
    min-height: clamp(452px, 54vh, 520px);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* Dark Sections */
.dark-section {
  background: #2d5f8d;
  color: white;
  position: relative;
  padding: 6rem 2rem;
}

.curved-top {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 72px;
  background: #f0f4f8;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

.section-content {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.what-we-do .section-content {
  padding-top: 2rem;
}

.icon-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.section-icon {
  width: 60px;
  height: 60px;
  color: white;
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  font-weight: 300;
}

/* What We Do: one large video, framed by a short lead and the three services. */
.what-we-do .section-title {
  margin-bottom: 1rem;
}

.wwd-lead {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}

.wwd-video.feature-video {
  max-width: 1080px;
  margin: 3rem auto 0;
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 30px 80px rgba(8, 20, 40, 0.35);
}

.wwd-services {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1080px;
  margin: 3.5rem auto 0;
}

.wwd-service {
  padding: 1.75rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.wwd-service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: rgba(255, 193, 7, 0.14);
  color: #ffc107;
}

.wwd-service-icon svg {
  width: 22px;
  height: 22px;
}

.wwd-service h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.wwd-service p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

/* Light Sections */
.light-section {
  background: white;
  padding: 6rem 2rem;
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-heading {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  color: #1e3a5f;
  text-align: center;
  margin-bottom: 1rem;
  font-weight: 300;
}

.section-subheading {
  text-align: center;
  color: #5a6c7d;
  font-size: 1.125rem;
  margin-bottom: 4rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.accent-line {
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, #ffc107 0%, #ff9800 100%);
  margin: 0 auto 3rem;
  border-radius: 2px;
}

/* For Who Section */
.content-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 560px);
  gap: 4rem;
  align-items: start;
  margin-top: 3rem;
}

.promo-card {
  position: relative;
}

.promo-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  /* Matches the video's own background so letterboxing is invisible. */
  background: #14213d;
}

.description-text h3 {
  font-size: 2rem;
  color: #1e3a5f;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.description-text p {
  color: #5a6c7d;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  font-size: 1.0625rem;
}

/* Pricing Section */
/* One number does the selling; the three drivers only justify it, so they stay
   to a single line each. */
.price-hero {
  text-align: center;
  margin-bottom: 3.5rem;
}

.price-hero-from {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a8b9c;
}

.price-hero-figure {
  font-size: clamp(4rem, 9vw, 6rem);
  line-height: 1;
  font-weight: 700;
  color: #1e3a5f;
  margin: 0.5rem 0 0.875rem;
}

.price-hero-currency {
  font-size: 0.42em;
  font-weight: 400;
  color: #4a9eff;
  /* Lifts the symbol towards the cap height of the digits. */
  vertical-align: 0.9em;
  margin-right: 0.1em;
}

.price-hero-note {
  color: #5a6c7d;
  font-size: 1.125rem;
}

.price-drivers {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #e8eef3;
  border-bottom: 1px solid #e8eef3;
}

.price-driver {
  text-align: center;
  padding: 2.25rem 1.75rem;
  border-left: 1px solid #e8eef3;
}

.price-driver:first-child {
  border-left: none;
}

.price-driver-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0f8ff 0%, #e1eefc 100%);
  color: #2d5f8d;
}

.price-driver-icon svg {
  width: 22px;
  height: 22px;
}

.price-driver h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #1e3a5f;
  margin-bottom: 0.4rem;
}

.price-driver p {
  color: #5a6c7d;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.price-trust {
  text-align: center;
  margin-top: 1.5rem;
  color: #7a8b9c;
  font-size: 0.9375rem;
}

.price-contract-line {
  text-align: center;
  margin: 2.5rem 0 0;
  color: #7a8b9c;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* A second mention directly under the contract line, not a new block. */
.price-contract-line--follow {
  margin-top: 0.25rem;
}

.price-contract-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0 -0.35rem;
  padding: 0.25rem 0.35rem;
  color: #2d5f8d;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  vertical-align: baseline;
  word-break: break-word;
}

.price-contract-link:hover,
.price-contract-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  color: #1e3a5f;
}

.price-contract-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.16);
}

.pricing-cta {
  text-align: center;
  margin-top: 2.5rem;
}

.pricing-cta-button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4a9eff 0%, #2d5f8d 100%);
  color: white;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 8px 20px rgba(45, 95, 141, 0.22);
  transition: transform 0.3s, box-shadow 0.3s;
}

.pricing-cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(45, 95, 141, 0.28);
}

/* Another Example Section */
.another-example {
  background: linear-gradient(135deg, #3d7aad 0%, #2d5f8d 100%);
}

.report-content {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3rem;
  align-items: center;
}

.report-text {
  flex: 1;
}

.report-text p {
  font-size: 1.125rem;
  line-height: 1.8;
}

.report-image {
  display: block;
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  background: #fff;
}

.bar:hover {
  opacity: 0.8;
}

/* Who We Are Section
   Avatar is half-out of the card (translateY -50%). Row gap and card top
   padding must clear that overhang so cards never collide. */
.who-we-are .section-heading {
  margin-bottom: 0.35rem;
}

.team-grid {
  --team-avatar: clamp(5.5rem, 22vw, 7.375rem); /* 88–118px */
  display: grid;
  grid-template-columns: 1fr;
  column-gap: clamp(1rem, 3vw, 1.5rem);
  /* Half avatar + 28px breathing room between stacked cards. */
  row-gap: calc(var(--team-avatar) / 2 + 1.75rem);
  /* Room for the first row of overlapping avatars under the heading. */
  margin-top: clamp(0.75rem, 2vw, 1.25rem);
  padding-top: calc(var(--team-avatar) / 2);
}

@media (min-width: 640px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.team-member {
  text-align: center;
  min-width: 0;
}

.member-info {
  position: relative;
  background: #f0f8ff;
  /* Top padding clears the lower half of the overlapping avatar. */
  padding: calc(var(--team-avatar) / 2 + 0.85rem) clamp(0.85rem, 3vw, 1.15rem) 1.35rem;
  border-radius: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.team-member:hover .member-info {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(30, 58, 95, 0.12);
}

.member-avatar {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--team-avatar);
  height: var(--team-avatar);
  background: linear-gradient(135deg, #e8eef3 0%, #d0dae3 100%);
  border-radius: 50%;
  /* Center the circle on the card's top edge (~50% overlap). */
  transform: translate(-50%, -50%);
  border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(30, 58, 95, 0.1);
}

.member-name {
  font-size: clamp(1rem, 2.8vw, 1.125rem);
  font-weight: 700;
  color: #1e3a5f;
  margin: 0 0 0.25rem;
  line-height: 1.3;
}

.member-role {
  margin: 0 0 0.55rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #7a8998;
  line-height: 1.35;
}

.member-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  color: #2d5f8d;
  border-radius: 10px;
  transition: color 0.2s ease, background 0.2s ease;
}

.team-member:hover .member-linkedin,
.member-linkedin:hover {
  color: #4a9eff;
  background: rgba(74, 158, 255, 0.1);
}

.member-linkedin svg {
  width: 1.35rem;
  height: 1.35rem;
  display: block;
}

/* Contact Section */
.contact {
  background: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%);
  /* The generic 6rem bottom left the form floating in empty space once the
     second column went; the section now closes up under it. */
  padding-bottom: 4rem;
}

.contact .section-heading {
  margin-bottom: 0.75rem;
}

.contact-description {
  text-align: center;
  color: #5a6c7d;
  font-size: 0.9375rem;
  max-width: 520px;
  /* Tight enough that the intro reads as the form's caption rather than a
     separate block floating above it. */
  margin: 0 auto 1.25rem;
  line-height: 1.6;
}

.contact-card {
  background: white;
  border: 2px solid #e8eef3;
  border-radius: 16px;
  padding: 1.6rem;
  text-align: center;
  transition: transform 0.3s;
}

.contact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.contact-card h4 {
  font-size: 1.0625rem;
  color: #1e3a5f;
  margin-bottom: 0.75rem;
}

.contact-card p {
  color: #5a6c7d;
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* Contact form ---------------------------------------------------------- */

/*
 * One column, not two. The form is the only thing on this section worth
 * acting on, and the max-width keeps it a composed block rather than a band
 * stretched across a wide monitor.
 */
.contact-layout {
  max-width: 520px;
  margin: 0 auto;
}

.contact-form {
  background: white;
  border: 2px solid #dce5ee;
  border-radius: 14px;
  padding: 1.4rem;
  text-align: left;
}

/*
 * The email route, under the form rather than beside it. Same card language,
 * but lighter padding than a full .contact-card: it carries one line, and
 * matching the form's weight is what made it look like a peer before.
 */
.contact-card-email {
  margin-top: 0.85rem;
  padding: 0.95rem 1.1rem;
  border-color: #dce5ee;
}

.contact-card-email h4 {
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
}

.contact-card-email p {
  margin-bottom: 0;
}

/*
 * Sent confirmation. An overlay rather than a banner because the redirect
 * lands the reader at #contact, far below the page-level message strip, so
 * anything in normal flow at the top of the document is never seen.
 */
.sent-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(30, 58, 95, 0.45);
  animation: sent-fade 0.2s ease-out;
}

.sent-overlay.is-closing {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.sent-dialog {
  background: #ffffff;
  border-radius: 20px;
  padding: 2.5rem 2.75rem;
  text-align: center;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(30, 58, 95, 0.25);
  animation: sent-rise 0.25s ease-out;
}

.sent-tick {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.25rem;
}

.sent-tick svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #2e7d5b;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The circle then the mark, each drawn by paying out its own dash. */
.sent-tick-circle {
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  animation: sent-draw 0.4s ease-out forwards;
}

.sent-tick-mark {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: sent-draw 0.25s 0.35s ease-out forwards;
}

.sent-dialog h3 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1e3a5f;
}

.sent-dialog p {
  margin: 0 0 1.5rem;
  color: #41566f;
  font-size: 1rem;
  line-height: 1.6;
}

.sent-close {
  background: #2d5f8d;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 0.7rem 1.75rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.sent-close:hover {
  background: #24506f;
}

.sent-close:focus-visible {
  outline: 3px solid #2d5f8d;
  outline-offset: 3px;
}

@keyframes sent-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sent-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sent-draw {
  to { stroke-dashoffset: 0; }
}

/* Respect a reduced-motion preference: show it, do not animate it. */
@media (prefers-reduced-motion: reduce) {
  .sent-overlay,
  .sent-dialog,
  .sent-tick-circle,
  .sent-tick-mark {
    animation: none;
  }

  .sent-tick-circle,
  .sent-tick-mark {
    stroke-dashoffset: 0;
  }
}

.contact-legend {
  margin: 0 0 0.8rem;
  font-size: 0.75rem;
  color: #5a6c7d;
}

/* Carries meaning for sighted users only; the required attribute and the
   legend cover everyone else, so the markup marks these aria-hidden. */
.contact-required {
  color: #b3261e;
  font-weight: 700;
}

.contact-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.contact-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.8rem;
  min-width: 0;
}

.contact-form-row .contact-field {
  margin-bottom: 0;
}

.contact-form-row + .contact-field {
  margin-top: 0.8rem;
}

.contact-field label {
  font-weight: 600;
  color: #1e3a5f;
  margin-bottom: 0.3rem;
  font-size: 0.8125rem;
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  padding: 0.5rem 0.7rem;
  /*
   * #7d8ea0 is 3.36:1 against the white card. The old #e8eef3 was about
   * 1.1:1, which fails WCAG 2.2 SC 1.4.11 (non-text contrast, 3:1) — the
   * boundary that identifies the control has to be perceivable.
   */
  border: 2px solid #7d8ea0;
  border-radius: 8px;
  font-size: 0.875rem;
  font-family: inherit;
  color: #1e3a5f;
  background: #ffffff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-field textarea {
  /* Vertical only: horizontal dragging breaks the card's layout. */
  resize: vertical;
  min-height: 80px;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  /* 4.6:1 on white. Placeholder text is still text. */
  color: #6b7c8d;
}

.contact-field input:focus,
.contact-field textarea:focus {
  /*
   * A real outline rather than a tinted glow: #2d5f8d is 6.7:1 on white, so
   * the focused field is unmistakable at a glance and passes 1.4.11 on its
   * own rather than relying on a low-opacity ring.
   */
  outline: 3px solid #2d5f8d;
  outline-offset: 2px;
  border-color: #2d5f8d;
  box-shadow: none;
}

.contact-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.85rem;
  margin-top: 1.1rem;
}

/*
 * Deliberately not .cta-button. The nav's Sign up pill is the loudest thing
 * on the page and should stay that way; this is the primary action *within*
 * the form, so it takes the flat dark end of the same palette and the 12px
 * radius of the inputs it belongs to, rather than competing as a second
 * bright gradient pill.
 */
.contact-submit {
  background: #2d5f8d;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1.2rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}

.contact-submit:hover {
  background: #24506f;
}

.contact-submit:focus-visible {
  outline: 3px solid #2d5f8d;
  outline-offset: 3px;
}

/* The most valuable sentence on the section, so it sits beside the action at
   body size instead of below it as fine print. */
.contact-promise {
  margin: 0;
  color: #1e3a5f;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
}

.contact-fineprint {
  margin: 1rem 0 0;
  text-align: center;
  color: #5a6c7d;
  font-size: 0.8125rem;
  line-height: 1.6;
}

/*
 * The honeypot. Not display:none and not type=hidden — both are trivially
 * skipped. It stays in the layout and out of sight, and aria-hidden plus
 * tabindex=-1 in the markup keep it away from keyboard and screen-reader users.
 */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Footer */
.footer {
  background: #1e3a5f;
  color: white;
  padding: 3rem 2rem calc(3rem + env(safe-area-inset-bottom, 0px));
  text-align: center;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-logo-text {
  font-size: 24px;
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
}

.footer p {
  color: rgba(255, 255, 255, 0.7);
}

/* Account Settings */
.settings-shell {
  background: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%);
  padding: 4.5rem 1.5rem 5rem;
}

.settings-container {
  max-width: 1080px;
  margin: 0 auto;
}

.settings-page-header {
  max-width: 720px;
  margin-bottom: 2rem;
}

.settings-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: #eef5ff;
  color: #2d5f8d;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.settings-page-header h1 {
  margin: 1rem 0 0.85rem;
  color: #1e3a5f;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 300;
}

.settings-page-header p {
  color: #5a6c7d;
  font-size: 1.05rem;
  line-height: 1.8;
}

.settings-grid {
  display: grid;
  gap: 1.5rem;
}

.settings-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #e8eef3;
  border-radius: 28px;
  padding: 2rem;
  box-shadow: 0 24px 60px rgba(30, 58, 95, 0.08);
}

.settings-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.settings-card-header h2 {
  color: #1e3a5f;
  font-size: 1.45rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.settings-card-header p,
.settings-danger-copy,
.settings-inline-hint {
  color: #5a6c7d;
  line-height: 1.7;
}

.settings-overview {
  display: grid;
  gap: 0.4rem;
  padding: 1.25rem 1.35rem;
  border-radius: 20px;
  background: linear-gradient(180deg, #fbfdff 0%, #f3f8fe 100%);
  border: 1px solid #e1ebf6;
}

.settings-overview-label {
  color: #6b7d90;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.settings-overview-value {
  color: #1e3a5f;
  font-size: 1.15rem;
  font-weight: 600;
  word-break: break-word;
}

.settings-form {
  display: grid;
  gap: 1.2rem;
}

.settings-form label {
  display: block;
  margin-bottom: 0.45rem;
  color: #1e3a5f;
  font-weight: 600;
}

.settings-form input {
  width: 100%;
  border: 1px solid #d9e3ec;
  border-radius: 14px;
  padding: 0.95rem 1rem;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
}

.settings-form input:focus {
  outline: none;
  border-color: #4a9eff;
  box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.16);
}

.settings-form select,
.settings-select {
  width: 100%;
  max-width: 100%;
  border: 1px solid #d9e3ec;
  border-radius: 14px;
  padding: 0.95rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
  color: #1e3a5f;
  cursor: pointer;
}

.settings-form select:focus {
  outline: none;
  border-color: #4a9eff;
  box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.16);
}

.settings-form input[type="file"],
.settings-file-input {
  width: 100%;
  max-width: 100%;
  border: 1px solid #d9e3ec;
  border-radius: 14px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-family: inherit;
  background: #f8fafc;
  color: #1e3a5f;
  cursor: pointer;
}

.settings-form input[type="file"]:focus {
  outline: none;
  border-color: #4a9eff;
  box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.16);
}

.settings-help-text,
.settings-inline-hint {
  margin-top: 0.65rem;
  font-size: 0.94rem;
}

.settings-help-text ul {
  padding-left: 1.2rem;
  margin: 0;
}

.settings-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 0.25rem;
}

.settings-submit {
  width: auto;
  min-width: 210px;
}

/* ── Account settings / request pages: compact scale ──
   The .settings-* components above are shared with terms, privacy,
   withdrawal and payment-offer pages, which are full-page reading surfaces.
   Account settings and client-request pages are short forms / detail views,
   so they opt into a tighter scale matching the auth card instead of the
   marketing pages. Everything below is scoped to .settings-shell--compact
   and overrides the mobile breakpoints by specificity.
   ------------------------------------------------------------------ */

/* Doubled up so the padding also beats the later .settings-shell breakpoint,
   which would otherwise win the tie on source order. */
.settings-shell.settings-shell--compact {
  padding: 2.75rem 0 3.5rem;
}

.settings-shell--compact .page-container,
.settings-shell--compact .app-page {
  margin-top: 0;
  margin-bottom: 0;
}

.settings-shell--compact .page-header,
.settings-shell--compact .settings-page-header {
  margin-bottom: 1.75rem;
}

.settings-shell--compact .settings-grid {
  gap: 0.8rem;
}

.settings-shell--compact .settings-card {
  border-radius: 14px;
  padding: 1.08rem;
  box-shadow: 0 12px 30px rgba(30, 58, 95, 0.06);
}

.settings-shell--compact .settings-card-header {
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.settings-shell--compact .settings-card-header h2 {
  font-size: 1.0625rem;
  margin-bottom: 0.25rem;
}

.settings-shell--compact .settings-card-header p,
.settings-shell--compact .settings-danger-copy,
.settings-shell--compact .settings-inline-hint {
  font-size: 0.8125rem;
  line-height: 1.55;
}

.settings-shell--compact .settings-overview,
.settings-shell--compact .settings-overview-list {
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
}

.settings-shell--compact .settings-overview-label {
  font-size: 0.6875rem;
}

.settings-shell--compact .settings-overview-value {
  font-size: 0.9375rem;
}

.settings-overview-list {
  display: grid;
  gap: 0.9rem;
  padding: 1.1rem 1.2rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdff 0%, #f3f8fe 100%);
  border: 1px solid #e1ebf6;
}

.settings-overview-row {
  display: grid;
  gap: 0.2rem;
}

.settings-actions--overview {
  margin-top: 1rem;
}

.settings-manage-sub {
  min-height: 44px;
  padding: 0.65rem 1.25rem;
  font-size: 1rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
}

.settings-muted-note {
  margin: 0;
  color: #7a8998;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.settings-api-key-reveal {
  margin-bottom: 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid #f0d9a8;
  border-radius: 10px;
  background: #fffbeb;
}

.settings-api-key-warning {
  margin: 0 0 0.65rem;
  color: #8a5a00;
  font-size: 0.875rem;
  font-weight: 600;
}

.settings-api-key-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.settings-api-key-value {
  flex: 1 1 12rem;
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  font-size: 0.8125rem;
  word-break: break-all;
}

.settings-api-key-list {
  margin-top: 1.5rem;
}

.settings-api-list-title {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1a202c;
}

.settings-api-keys {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.settings-api-key-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-top: 1px solid #edf2f7;
}

.settings-api-example {
  margin-top: 1.5rem;
}

.settings-api-curl {
  margin: 0.5rem 0 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.settings-api-curl code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.settings-field {
  display: grid;
  gap: 0.35rem;
}

.settings-password-wrap {
  position: relative;
}

.settings-password-wrap input {
  padding-right: 2.75rem;
}

.settings-password-toggle {
  position: absolute;
  top: 50%;
  right: 0.45rem;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  color: #5a6c7d;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.settings-password-toggle:hover,
.settings-password-toggle:focus-visible {
  color: #1e3a5f;
  background: #eef5ff;
}

.settings-password-toggle:focus-visible {
  outline: 3px solid #4a9eff;
  outline-offset: 1px;
}

.settings-password-toggle__icon {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.settings-password-helper {
  margin: 0.15rem 0 0;
  color: #7a8998;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.settings-password-checklist {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: #7a8998;
}

.settings-password-checklist li {
  position: relative;
  padding-left: 1.15rem;
}

.settings-password-checklist li::before {
  content: "○";
  position: absolute;
  left: 0;
  color: #a0aec0;
}

.settings-password-checklist li.is-met {
  color: #1a7a3a;
}

.settings-password-checklist li.is-met::before {
  content: "✓";
  color: #1a7a3a;
}

.settings-password-checklist li.is-unmet {
  color: #7a8998;
}

.settings-page .settings-submit {
  width: auto;
  min-width: 0;
  min-height: 44px;
  padding: 0.65rem 1.25rem;
  font-size: 1rem;
  border-radius: 999px;
}

.settings-page .settings-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.settings-shell--compact .settings-form {
  gap: 0.8rem;
}

.settings-shell--compact .settings-form label {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
}

.settings-shell--compact .settings-form input {
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  font-size: 0.8125rem;
}

.settings-shell--compact .settings-form input:focus,
.settings-shell--compact .settings-form input:focus-visible {
  outline: none;
  border-color: #4a9eff;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.22);
}

.settings-shell--compact .settings-help-text,
.settings-shell--compact .settings-inline-hint {
  margin-top: 0.4rem;
  font-size: 0.75rem;
}

.settings-shell--compact .settings-help-text ul {
  padding-left: 1rem;
}

.settings-shell--compact .field-errors,
.settings-shell--compact .non-field-errors {
  font-size: 0.75rem;
  margin-top: 0.4rem;
}

.settings-shell--compact .auth-submit {
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  font-size: 0.8125rem;
}

.settings-shell--compact .settings-submit,
.settings-shell--compact .danger-button,
.settings-shell--compact .settings-manage-sub {
  min-width: 150px;
}

.settings-shell--compact .settings-danger-badge {
  padding: 0.3rem 0.65rem;
  font-size: 0.6875rem;
}

.settings-shell--compact .danger-button {
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  font-size: 0.8125rem;
}

.settings-shell--compact .settings-submit:focus-visible,
.settings-shell--compact .settings-manage-sub:focus-visible,
.settings-shell--compact .cta-button:focus-visible,
.settings-shell--compact .settings-delete-cancel:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.28);
}

.settings-shell--compact .danger-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.28);
}

.settings-shell--compact .danger-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.settings-shell--compact .settings-form select,
.settings-shell--compact .settings-select {
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  font-size: 0.8125rem;
}

.settings-shell--compact .settings-form select:focus,
.settings-shell--compact .settings-form select:focus-visible,
.settings-shell--compact .settings-select:focus,
.settings-shell--compact .settings-select:focus-visible {
  outline: none;
  border-color: #4a9eff;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.22);
}

.settings-shell--compact .settings-form textarea {
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  font-size: 0.8125rem;
}

.settings-shell--compact .settings-form textarea:focus,
.settings-shell--compact .settings-form textarea:focus-visible {
  outline: none;
  border-color: #4a9eff;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.22);
}

.settings-shell--compact .req-badge {
  padding: 0.25rem 0.6rem;
  font-size: 0.6875rem;
}

.settings-shell--compact .req-detail-grid {
  gap: 0.8rem;
}

.settings-shell--compact .req-detail-item {
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
}

.settings-shell--compact .req-detail-label {
  font-size: 0.6875rem;
  margin-bottom: 0.25rem;
}

.settings-shell--compact .req-detail-value {
  font-size: 0.875rem;
  line-height: 1.5;
}

.settings-shell--compact .payment-notice {
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  font-size: 0.8125rem;
  line-height: 1.55;
}

@media (max-width: 768px) {
  .settings-shell.settings-shell--compact {
    padding: 2.25rem 1rem 3rem;
  }

  .settings-shell--compact .settings-card {
    padding: 1rem;
    border-radius: 12px;
  }
}

@media (max-width: 640px) {
  .settings-shell.settings-shell--compact {
    padding: 1.75rem 0.75rem 2.5rem;
  }

  .settings-shell--compact .page-container--narrow,
  .settings-shell--compact .app-page--narrow,
  .settings-shell--compact .settings-page,
  .settings-shell--compact .settings-grid,
  .settings-shell--compact .settings-card {
    width: 100%;
    max-width: none;
  }

  .settings-shell--compact .settings-card {
    padding: 0.85rem;
    border-radius: 12px;
  }

  .settings-shell--compact .settings-actions,
  .settings-shell--compact .settings-delete-modal__actions {
    display: grid;
    gap: 0.65rem;
  }

  .settings-shell--compact .settings-submit,
  .settings-shell--compact .danger-button,
  .settings-shell--compact .settings-manage-sub,
  .settings-shell--compact .settings-delete-cancel,
  .settings-shell--compact .cta-button {
    width: 100%;
    min-width: 0;
  }
}

.settings-muted-copy {
  margin-top: 0.35rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #4a5f78;
  font-weight: 400;
}

.settings-card-maintenance .settings-card-header p {
  max-width: 52rem;
}

.settings-fieldset {
  display: grid;
  gap: 0.85rem;
}

.settings-fieldset-label {
  color: #1e3a5f;
  font-weight: 600;
}

.settings-choice-grid {
  display: grid;
  gap: 0.85rem;
}

.settings-choice-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.1rem;
  border: 1px solid #d9e3ec;
  border-radius: 16px;
  background: #fff;
  color: #1e3a5f;
  cursor: pointer;
}

.settings-choice-card input[type="radio"] {
  width: auto;
  margin: 0;
}

.settings-example-toggle {
  align-items: flex-start;
}

.settings-example-toggle-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  font-weight: 600;
  color: #1e3a5f;
  margin: 0;
}

.settings-example-toggle-label input[type="checkbox"] {
  width: auto;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.settings-search-input {
  margin-bottom: 0.75rem;
}

.settings-autocomplete {
  position: relative;
}

.settings-autocomplete .settings-autocomplete-input {
  margin-bottom: 0;
}

.settings-hidden-select {
  display: none;
}

.settings-autocomplete-list {
  position: absolute;
  top: calc(100% - 0.2rem);
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  gap: 0;
  background: #fff;
  border: 1px solid #d9e3ec;
  border-radius: 16px;
  box-shadow: 0 18px 36px rgba(30, 58, 95, 0.12);
  overflow: hidden;
}

/* Author `display: grid` must not override native `[hidden]` or an empty list shows as a line */
.settings-autocomplete-list[hidden] {
  display: none !important;
}

.settings-autocomplete-option,
.settings-autocomplete-empty {
  width: 100%;
  padding: 0.85rem 1rem;
  text-align: left;
  font: inherit;
}

.settings-autocomplete-option {
  border: none;
  background: #fff;
  color: #1e3a5f;
  cursor: pointer;
}

.settings-autocomplete-option:hover,
.settings-autocomplete-option:focus {
  background: #eef5ff;
  outline: none;
}

.settings-autocomplete-empty {
  color: #6b7d90;
  background: #fff;
}

.settings-source-upload-grid {
  display: grid;
  gap: 1.2rem;
}

/* My dashboards */
.my-dashboards-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

.my-dashboards-filter {
  width: 100%;
  margin-left: 0;
}

.my-dashboards-filter-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  align-items: end;
}

.my-dashboards-filter-field {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 0.5rem;
  row-gap: 0.3rem;
  align-items: end;
  width: 100%;
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #5a6c7d;
}

.my-dashboards-filter-label {
  grid-column: 1;
  grid-row: 1;
}

.my-dashboards-field-hint {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #9aa8b5;
  letter-spacing: 0.02em;
}

.my-dashboards-select,
.my-dashboards-date-input {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid #d9e3ec;
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  font-size: 1rem; /* 16px — avoids iOS focus zoom */
  font-family: inherit;
  color: #1e3a5f;
  background: #fff;
  min-height: 44px;
  line-height: 1.25;
  -webkit-appearance: none;
  appearance: none;
}

.my-dashboards-select {
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #5a6c7d 50%),
    linear-gradient(135deg, #5a6c7d 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) calc(50% - 0.15rem),
    calc(100% - 0.75rem) calc(50% - 0.15rem);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.my-dashboards-date-input {
  color-scheme: light;
}

.my-dashboards-date-input::-webkit-date-and-time-value {
  text-align: left;
  min-height: 1.25em;
}

.my-dashboards-date-range {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  width: 100%;
  min-width: 0;
}

@media (min-width: 360px) {
  .my-dashboards-date-range {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.my-dashboards-select:focus,
.my-dashboards-date-input:focus {
  outline: none;
  border-color: #4a9eff;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.16);
}

.my-dashboards-clear {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #4a6fa5;
  text-decoration: underline;
  white-space: nowrap;
  padding: 0.25rem 0;
}

.my-dashboards-clear:hover {
  color: #1e3a5f;
}

.my-dashboards-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  gap: 0.85rem;
}

.my-dashboards-card {
  border: 1px solid #e8eef3;
  border-radius: 16px;
  padding: 1rem 1.1rem;
  background: #fff;
  box-shadow: 0 8px 24px rgba(30, 58, 95, 0.06);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  min-width: 0;
}

.my-dashboards-card-copy {
  min-width: 0;
}

.my-dashboards-brand {
  font-weight: 700;
  color: #1e3a5f;
  font-size: clamp(1rem, 3.5vw, 1.1rem);
  line-height: 1.3;
  word-break: break-word;
}

.my-dashboards-day {
  margin-top: 0.2rem;
  color: #7a8998;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

.my-dashboards-description {
  margin: 0.55rem 0 0;
  color: #5a6c7d;
  font-size: 0.95rem;
  max-width: 560px;
}

.my-dashboards-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  width: 100%;
}

.my-dashboards-download,
.my-dashboards-view {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  justify-content: center;
}

.my-dashboards-download {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.85rem;
  border-radius: 25px;
  border: 1px solid #c9d8ea;
  background: #fff;
  color: #2d5f8d;
  font-weight: 600;
  font-size: 0.9375rem;
  font-family: inherit;
  text-decoration: none;
  line-height: 1;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.my-dashboards-download-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.my-dashboards-download:hover {
  border-color: #4a9eff;
  background: #f5f9ff;
  color: #1e3a5f;
}

.my-dashboards-view {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 0.85rem;
}

.my-dashboards-empty {
  color: #5a6c7d;
  margin-top: 1.5rem;
}

.my-dashboards-empty a {
  color: #4a9eff;
  font-weight: 600;
}

@media (min-width: 768px) {
  .my-dashboards-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
  }

  .my-dashboards-filter {
    width: auto;
    margin-left: auto;
    max-width: min(100%, 36rem);
  }

  .my-dashboards-filter-row {
    grid-template-columns: minmax(9.5rem, 1fr) minmax(16rem, 1.4fr) auto;
    align-items: end;
    gap: 0.75rem;
  }

  .my-dashboards-date-range {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .my-dashboards-clear {
    justify-self: end;
    align-self: end;
  }

  .my-dashboards-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 1.35rem;
    gap: 1rem;
  }

  .my-dashboards-actions {
    width: auto;
    flex-shrink: 0;
    grid-template-columns: auto auto;
  }

  .my-dashboards-download,
  .my-dashboards-view {
    width: auto;
    min-width: 7.5rem;
  }
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.6rem;
  border: 1px solid #d9e3ec;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e3a5f;
  background: #fff;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.pagination-link:hover {
  background: #f1f6fb;
  border-color: #4a9eff;
  color: #2d5f8d;
}

.pagination-current {
  background: linear-gradient(135deg, #4a9eff 0%, #2d5f8d 100%);
  color: #fff;
  border-color: transparent;
  cursor: default;
}

.pagination-current:hover {
  background: linear-gradient(135deg, #4a9eff 0%, #2d5f8d 100%);
  color: #fff;
  border-color: transparent;
}

.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  color: #7a8998;
  font-size: 1rem;
  user-select: none;
}

.pagination-prev,
.pagination-next {
  font-size: 0.9rem;
  font-weight: 600;
}

.settings-card-danger {
  border: 1px solid #e8b4b0;
  background: linear-gradient(180deg, #ffffff 0%, #fff8f7 100%);
  box-shadow: 0 0 0 1px rgba(180, 35, 24, 0.06);
}

.settings-delete-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(28rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  height: fit-content;
  padding: 0;
  border: 1px solid #e8b4b0;
  border-radius: 14px;
  background: #fff;
  color: inherit;
  box-shadow: 0 24px 48px rgba(30, 58, 95, 0.18);
}

.settings-delete-modal::backdrop {
  background: rgba(20, 32, 48, 0.45);
}

.settings-delete-modal__panel {
  display: grid;
  gap: 0.85rem;
  padding: 1.15rem 1.2rem 1.2rem;
}

.settings-delete-modal__panel h3 {
  margin: 0;
  color: #1e3a5f;
  font-size: 1.0625rem;
  font-weight: 700;
}

.settings-delete-modal__copy {
  margin: 0;
  color: #5a6c7d;
  font-size: 0.875rem;
  line-height: 1.55;
}

.settings-delete-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: flex-end;
  margin-top: 0.25rem;
}

.settings-delete-cancel {
  min-height: 40px;
  min-width: 110px;
}

.settings-danger-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: #fff0ee;
  color: #b42318;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  border: 1px solid #e59b95;
  border-radius: 16px;
  background: linear-gradient(135deg, #d55b4b 0%, #b42318 100%);
  color: #fff;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.danger-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(180, 35, 24, 0.22);
}

/* Small icon-only destructive button (e.g. delete X) */
.danger-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #e59b95;
  border-radius: 999px;
  background: linear-gradient(135deg, #d55b4b 0%, #b42318 100%);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}

.danger-icon-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(180, 35, 24, 0.22);
  filter: brightness(1.02);
}

.danger-icon-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.18);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .navbar {
    padding: 0.85rem 0;
  }

  .nav-desktop-shell {
    display: none;
  }

  .mobile-nav {
    display: block;
  }

  .mobile-nav-toggle {
    display: inline-flex;
  }

  .hero-title {
    font-size: 3rem;
  }

  .hero-section,
  .dark-section,
  .light-section {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Three narrow columns start breaking the one-line driver copy onto two. */
  .price-drivers {
    grid-template-columns: 1fr;
  }

  .price-driver {
    border-left: none;
    border-top: 1px solid #e8eef3;
    padding: 1.75rem;
  }

  .price-driver:first-child {
    border-top: none;
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  .report-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

}

/* Narrow desktop: smaller tiles and a tight stagger to stay clear of the copy. */
@media (max-width: 1199px) {
  .floating-images {
    --hero-tile: 120px;
    --hero-tile-dx: 40px;
    --hero-tile-gap: 20px;
    --hero-pair-top: 2rem;
    --hero-pair-edge: 0.5rem;
  }
}

/* Below 1024px there is under 120px beside the subtitle, so the tiles could
   only sit on the text. Hide them, as phones already do at 768px. */
@media (max-width: 1023px) {
  .floating-images {
    display: none;
  }
}

@media (max-width: 768px) {
  .navbar {
    padding: 0.75rem 0;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .section-heading {
    font-size: 2rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .floating-images {
    display: none;
  }

  .nav-container {
    padding: 0 1rem;
    gap: 0.75rem;
    min-height: 64px;
  }

  .cta-button {
    padding: 0.8rem 1.4rem;
    font-size: 0.95rem;
  }

  .account-dropdown-trigger {
    min-height: 44px;
    padding: 0.25rem 0.5rem 0.25rem 0.3rem;
  }

  .account-dropdown-avatar {
    width: 30px;
    height: 30px;
    font-size: 0.6875rem;
  }

  .account-dropdown-trigger-icon {
    width: 1rem;
    height: 1rem;
  }

  .account-dropdown-menu {
    right: 0;
    width: min(260px, calc(100vw - 2rem));
  }

  .hero-section {
    min-height: auto;
    padding-top: clamp(3.25rem, 8vw, 4.5rem);
    padding-bottom: clamp(2rem, 5vw, 2.75rem);
  }

  .curved-top {
    height: 60px;
  }

  .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-cta,
  .hero-cta-secondary {
    width: 100%;
    justify-content: center;
  }

  .content-grid {
    gap: 2rem;
    margin-top: 2.25rem;
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  .wwd-video.feature-video {
    margin-top: 2rem;
    border-radius: 14px;
  }

  .wwd-services {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 2rem;
  }

  .wwd-service {
    padding: 1.5rem;
  }

  .wwd-lead,
  .report-text p,
  .description-text p {
    font-size: 1rem;
  }

  .contact-card,
  .contact-form {
    padding: 1.2rem;
  }

  .price-hero-note,
  .price-trust {
    font-size: 1rem;
  }

  /* Side-by-side name and email stop fitting well below this. */
  .contact-form-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .contact-submit {
    width: 100%;
  }

  /* Stacked, so the promise sits directly under the button it belongs to. */
  .contact-form-actions {
    align-items: flex-start;
  }

  .settings-shell {
    padding: 3.5rem 1rem 4rem;
  }

  .settings-card {
    padding: 1.5rem;
    border-radius: 22px;
  }

  .settings-card-header {
    flex-direction: column;
  }

  .settings-submit,
  .danger-button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2rem;
  }

  .hero-section {
    padding: 3.25rem 1rem 2.25rem;
  }

  .dark-section,
  .light-section {
    padding: 4rem 1rem;
  }

  .curved-top {
    height: 48px;
  }

  .section-heading,
  .section-title {
    font-size: 1.8rem;
  }

  .logo-text {
    font-size: 1.2rem;
  }

  .mobile-nav-header {
    padding: 1rem 0.9rem 0.85rem;
  }

  .mobile-nav-body {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 20px));
  }

  .hero-cta,
  .pricing-cta-button {
    width: 100%;
  }

  .price-trust {
    /* Reads as three stacked promises rather than one wrapped sentence. */
    max-width: 17rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.9;
  }

  .settings-card {
    border-radius: 18px;
  }

  .contact-card,
  .contact-form {
    border-radius: 12px;
  }
}

/* End of Styles */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 0;
}

.logo-text {
  font-size: 24px;
  font-weight: 700;
  color: #2d5f8d;
}

.navbar .brand .logo {
  height: 54px;
  width: auto;
}

.feature-video {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 15px;
}

.feature-video iframe,
.feature-video .promo-video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #14213d;
}

/* Flash messages as overlay toasts (do not shift page layout) */
.page-toasts {
  position: fixed;
  top: calc(1rem + env(safe-area-inset-top, 0px));
  right: 1rem;
  left: 1rem;
  z-index: 2000;
  display: grid;
  gap: 0.65rem;
  justify-items: end;
  pointer-events: none;
  max-width: 100%;
}

@media (min-width: 640px) {
  .page-toasts {
    left: auto;
    width: min(24rem, calc(100vw - 2rem));
  }
}

.page-toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 0.65rem;
  width: min(24rem, 100%);
  border-radius: 14px;
  padding: 0.85rem 0.9rem;
  font-weight: 500;
  box-shadow: 0 16px 40px rgba(30, 58, 95, 0.16);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.page-toast.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
}

.page-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.page-toast__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.page-toast__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  word-break: break-word;
}

.page-toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: -0.2rem -0.15rem 0 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.page-toast__close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}

.page-toast--success,
.message.success {
  background: #eef8f2;
  color: #1f6b3d;
  border: 1px solid #ccebd8;
}

.page-toast--error,
.message.error {
  background: #fff2f2;
  color: #9b1c1c;
  border: 1px solid #f3c7c7;
}

.page-toast--warning,
.message.warning {
  background: #fff8eb;
  color: #8a5a00;
  border: 1px solid #f0d9a8;
}

.page-toast--info,
.page-toast--debug,
.message.info {
  background: #eef5ff;
  color: #1e4f85;
  border: 1px solid #cfe0fb;
}

/* Legacy inline message class kept for any non-toast use */
.page-messages {
  max-width: 1200px;
  margin: 1.5rem auto 0;
  padding: 0 2rem;
}

.message {
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  font-weight: 500;
  box-shadow: 0 12px 30px rgba(30, 58, 95, 0.08);
}

.auth-shell {
  /* Grow between navbar and footer (body is a column flex), then center the card. */
  flex: 1 0 auto;
  min-height: calc(100vh - 72px - 8rem);
  min-height: calc(100dvh - 72px - 8rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  background: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%);
}

.auth-card {
  width: min(100%, 400px);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #e8eef3;
  border-radius: 16px;
  padding: 2rem 1.4rem 1.5rem;
  box-shadow: 0 18px 44px rgba(30, 58, 95, 0.1);
}

.auth-header {
  text-align: center;
  margin-bottom: 1.1rem;
}

/* logo_03.png is a 1024px off-white square with the mark in roughly the
   middle 41% x 34%. The background is sized and positioned so only the mark
   shows; multiply drops the off-white so no square shows on the card. */
.auth-logo-mark {
  display: block;
  width: 34px;
  height: 28px;
  margin: 0 auto 20px;
  background: url("../images/logo_03.png") no-repeat;
  background-size: 82px 82px;
  background-position: -24px -27px;
  mix-blend-mode: multiply;
}

.auth-header h1 {
  font-size: 1.1875rem;
  color: #1e3a5f;
  margin-bottom: 0.4rem;
  font-weight: 500;
}

.auth-header p {
  color: #5a6c7d;
  line-height: 1.5;
  font-size: 0.8125rem;
}

.auth-form {
  display: grid;
  gap: 0.85rem;
}

.auth-form > label,
.auth-field > label,
.auth-field-label-row label {
  display: block;
  font-weight: 600;
  color: #1e3a5f;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
}

.auth-field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.auth-field-label-row label {
  margin-bottom: 0;
}

.auth-forgot-link {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #2d5f8d;
  text-decoration: none;
  border-radius: 2px;
}

.auth-forgot-link:hover {
  text-decoration: underline;
}

.auth-forgot-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.16);
}

.auth-form input:not([type="checkbox"]) {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d9e3ec;
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  /* ≥16px avoids iOS zooming the page on focus. */
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
}

.auth-form input:not([type="checkbox"]):focus,
.auth-form input:not([type="checkbox"]):focus-visible {
  outline: none;
  border-color: #4a9eff;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.16);
}

.auth-form input.is-invalid,
.auth-form input[aria-invalid="true"] {
  border-color: #b42318;
}

.auth-form input.is-invalid:focus-visible,
.auth-form input[aria-invalid="true"]:focus-visible {
  border-color: #b42318;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.16);
}

.auth-password-wrap {
  position: relative;
}

.auth-password-wrap input {
  padding-right: 2.75rem;
}

.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 0.2rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #5a6c7d;
  cursor: pointer;
}

.auth-password-toggle:hover {
  color: #1e3a5f;
}

.auth-password-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.16);
}

/* Class-based visibility: author `display` must not override [hidden]. */
.auth-password-toggle__icon {
  width: 1.15rem;
  height: 1.15rem;
  display: none;
  flex-shrink: 0;
}

.auth-password-toggle:not(.is-showing) .auth-password-toggle__icon--show,
.auth-password-toggle.is-showing .auth-password-toggle__icon--hide {
  display: block;
}

.auth-field__footer {
  margin-top: 0.3rem;
}

/* On sign-up, both password fields reserve the same footer height so the
   helper under Password does not push Confirm further than Confirm→next. */
.auth-form[data-signup-form] .auth-field--password .auth-field__footer {
  min-height: 2.2rem;
}

.auth-helper {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #7a8899;
}

.auth-confirm-error {
  margin: 0;
}

.auth-consent {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.auth-consent__label {
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 0.65rem;
  align-items: start;
  margin: 0;
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #33475f;
  cursor: pointer;
}

/* Beat any inherited input styles; force a custom control. */
.auth-shell input.auth-consent__checkbox[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin: 0;
  /* Align with the first line of 0.8125rem / 1.45 text (~18.9px). */
  margin-top: calc((0.8125rem * 1.45 - 20px) / 2);
  padding: 0;
  border: 1.5px solid #c5d4e3;
  border-radius: 5px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.auth-shell input.auth-consent__checkbox[type="checkbox"]:checked {
  border-color: #2d5f8d;
  background-color: #2d5f8d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}

.auth-shell input.auth-consent__checkbox[type="checkbox"]:focus-visible {
  outline: none;
  border-color: #4a9eff;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.16);
}

.auth-consent__text {
  min-width: 0;
}

.auth-consent__text a {
  color: #2d5f8d;
  font-weight: 600;
  text-decoration: underline;
}

.auth-consent__text a:focus-visible {
  outline: none;
  border-radius: 2px;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.16);
}

.auth-secondary-link {
  margin: 0.55rem 0 0;
  text-align: center;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: #7a8899;
}

.auth-secondary-link a {
  color: #7a8899;
  text-decoration: underline;
  border-radius: 2px;
}

.auth-secondary-link a:hover {
  color: #2d5f8d;
}

.auth-secondary-link a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.16);
}

/* .field-errors is shared with the dashboard and request forms, so the
   smaller auth scale is scoped to the auth pages only. */
.auth-shell .field-errors,
.auth-shell .non-field-errors {
  font-size: 0.75rem;
  margin-top: 0.4rem;
}

.auth-shell .non-field-errors {
  margin: 0 0 0.25rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #f3c1bc;
  border-radius: 8px;
  background: #fff5f4;
}

.field-errors,
.non-field-errors {
  list-style: none;
  color: #b42318;
  font-size: 0.92rem;
  margin-top: 0.5rem;
}

.auth-submit {
  width: 100%;
  background: linear-gradient(135deg, #4a9eff 0%, #2d5f8d 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 0.75rem 1.1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.auth-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(74, 158, 255, 0.28);
}

.auth-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.28);
}

.auth-submit:disabled {
  opacity: 0.72;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* The dashboard and settings pages reuse .auth-submit at the full-page scale,
   so the compact sizing belongs to the auth card only. */
.auth-shell .auth-submit {
  border-radius: 999px;
  min-height: 44px;
  padding: 0.7rem 1.1rem;
  font-size: 0.9375rem;
}

.auth-submit.settings-submit-secondary {
  background: #fff;
  color: #1e3a5f;
  border: 1px solid #c5d4e3;
  box-shadow: none;
}

.auth-submit.settings-submit-secondary:hover {
  background: #f1f6fb;
  border-color: #4a9eff;
  box-shadow: 0 8px 14px rgba(30, 58, 95, 0.06);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.9rem 0 0.8rem;
  color: #7a8998;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.auth-divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(216, 227, 236, 0.15) 0%,
    rgba(216, 227, 236, 0.9) 50%,
    rgba(216, 227, 236, 0.15) 100%
  );
}

.social-auth-form {
  margin: 0;
}

/* Only fires when a second provider is configured, so the Google-only case is
   unchanged. */
.social-auth-form + .social-auth-form {
  margin-top: 0.5rem;
}

.social-auth-button {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border-radius: 8px;
  border: 1px solid #d9e3ec;
  background: #ffffff;
  color: #1e3a5f;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  box-shadow: 0 8px 20px rgba(30, 58, 95, 0.05);
}

.social-auth-button:hover {
  transform: translateY(-1px);
  border-color: #c9d8ea;
  box-shadow: 0 12px 26px rgba(30, 58, 95, 0.09);
}

.social-auth-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.16);
}

.social-auth-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.social-auth-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.auth-links {
  margin-top: 0.95rem;
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  color: #5a6c7d;
  font-size: 0.78125rem;
}

.auth-links a {
  color: #2d5f8d;
  font-weight: 600;
  text-decoration: none;
  border-radius: 2px;
}

.auth-links a:hover {
  text-decoration: underline;
}

.auth-links a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.16);
}

.auth-links span {
  font-weight: 500;
}

.email-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: #eef5ff;
  color: #1e4f85;
  font-weight: 600;
  font-size: 0.8125rem;
  word-break: break-word;
}

@media (max-width: 768px) {
  .page-toasts {
    top: calc(0.75rem + env(safe-area-inset-top, 0px));
    left: 0.75rem;
    right: 0.75rem;
    justify-items: stretch;
  }

  .page-toast {
    width: 100%;
  }

  .page-messages {
    padding: 0 1rem;
  }

  .auth-shell {
    align-items: center;
    padding: 1.5rem 1rem;
    min-height: calc(100vh - 64px - 9rem);
    min-height: calc(100dvh - 64px - 9rem);
  }

  .auth-card {
    padding: 1.75rem 1.1rem 1.25rem;
    border-radius: 14px;
  }

  .auth-header {
    margin-bottom: 1rem;
  }

  .auth-header h1 {
    font-size: 1.125rem;
  }

  .auth-links {
    justify-content: center;
  }

  .social-auth-button {
    min-height: 44px;
    border-radius: 10px;
  }
}

/* ── Client Requests ── */

.settings-form textarea {
  width: 100%;
  border: 1px solid #d9e3ec;
  border-radius: 14px;
  padding: 0.95rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
  color: #1e3a5f;
  resize: vertical;
  /* Plain text fields wrap; without this Safari paints a thick horizontal
     scrollbar across the bottom even when the box is empty. */
  overflow-x: hidden;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.settings-form textarea:focus {
  outline: none;
  border-color: #4a9eff;
  box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.16);
}

/* Dashboard spec JSON is code, so it needs a monospace font and no wrapping. */
.settings-form textarea.settings-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.55;
  white-space: pre;
  overflow: auto;
}

/* Request list */
.request-list-page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
}

.req-detail-empty {
  color: #7a8998;
  font-style: normal;
}

.request-list-page__new {
  text-decoration: none;
  flex-shrink: 0;
  min-height: 44px;
  padding: 0.65rem 1.25rem;
  font-size: 1rem;
  border-radius: 999px;
}

.request-status-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.15rem;
}

.request-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid #d9e3ec;
  background: #fff;
  color: #1e3a5f;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.request-status-chip__count {
  color: #7a8998;
  font-weight: 600;
}

.request-status-chip:hover {
  border-color: #4a9eff;
  background: #f5f9ff;
}

.request-status-chip.is-active {
  background: #eef5ff;
  border-color: #4a9eff;
  color: #1e3a5f;
}

.request-status-chip.is-active .request-status-chip__count {
  color: #2d5f8d;
}

.request-status-chip:focus-visible,
.request-card__btn:focus-visible,
.request-list-page__new:focus-visible,
.request-list-empty__cta:focus-visible,
.request-list-empty__link:focus-visible {
  outline: 3px solid #4a9eff;
  outline-offset: 2px;
}

.request-list-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.85rem;
}

.request-card {
  border: 1px solid #e8eef3;
  border-radius: 14px;
  padding: 1.15rem 1.25rem;
  background: #fff;
  box-shadow: 0 8px 20px rgba(30, 58, 95, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 720px) {
  .request-card {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
  }
}

.request-card__main {
  flex: 1;
  min-width: 0;
}

.request-card__title {
  font-weight: 700;
  color: #1e3a5f;
  font-size: 1.0625rem;
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.request-card__status-row {
  margin-top: 0.45rem;
}

.request-card__hint {
  margin: 0.35rem 0 0;
  color: #5a6c7d;
  font-size: 0.875rem;
  line-height: 1.45;
}

.request-card__meta {
  margin-top: 0.45rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: center;
  font-size: 0.875rem;
  color: #7a8998;
}

.request-card__staff-email {
  color: #4a9eff;
  font-size: 0.8125rem;
  font-weight: 600;
  word-break: break-all;
}

.request-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: stretch;
  width: 100%;
}

@media (min-width: 720px) {
  .request-card__actions {
    width: auto;
    flex-shrink: 0;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
  }
}

.request-card__btn {
  text-decoration: none;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0.65rem 1.15rem;
  font-size: 1rem;
  font-weight: 600;
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  border-radius: 999px;
}

@media (min-width: 720px) {
  .request-card__btn {
    flex: 0 0 auto;
    min-width: 6.5rem;
  }
}

.request-card__btn--secondary {
  background: #fff;
  color: #1e3a5f;
  border: 2px solid #1e3a5f;
  box-shadow: none;
}

.request-card__btn--secondary:hover {
  background: #f4f8fe;
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.08);
}

.request-card__delete-form {
  margin: 0;
  display: flex;
  align-items: stretch;
}

.request-card__actions .danger-icon-button {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
}

.request-card__actions .danger-icon-button.request-card__delete-btn {
  min-width: 44px;
  min-height: 44px;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  border-radius: 999px;
}

.request-list-empty {
  margin-top: 1.75rem;
  color: #5a6c7d;
  line-height: 1.55;
  font-size: 1rem;
}

.request-list-empty p {
  margin: 0 0 1rem;
}

.request-list-empty__link {
  color: #4a9eff;
  font-weight: 600;
  text-decoration: underline;
}

.request-list-empty__cta {
  text-decoration: none;
  min-height: 44px;
  padding: 0.65rem 1.25rem;
  font-size: 1rem;
  border-radius: 999px;
}

.req-badge {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #eef5ff;
  color: #2d5f8d;
}

/* List page uses tone classes; detail page still uses status-value classes. */
.req-badge--tone-pending  { background: #f0f2f5; color: #4a5568; }
.req-badge--tone-action   { background: #fff4e5; color: #b47812; }
.req-badge--tone-approved { background: #e6f9ed; color: #1a7a3a; }
.req-badge--tone-rejected { background: #fde8e8; color: #b12525; }

.req-badge--submitted      { background: #f0f2f5; color: #4a5568; }
.req-badge--under_review   { background: #f0f2f5; color: #4a5568; }
.req-badge--feasible        { background: #e6f9ed; color: #1a7a3a; }
.req-badge--not_feasible    { background: #fde8e8; color: #b12525; }
.req-badge--code_sent       { background: #fff4e5; color: #b47812; }
.req-badge--subscribed      { background: #e6f9ed; color: #1a7a3a; }
.req-badge--paid            { background: #e6f9ed; color: #1a7a3a; }

@media (max-width: 640px) {
  .request-list-page__head {
    flex-direction: column;
    align-items: stretch;
  }

  .request-list-page__new {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  .request-card {
    flex-direction: column;
    align-items: stretch;
  }

  .request-card__actions {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .request-card__btn,
  .request-card__delete-form,
  .request-card__actions .danger-icon-button {
    width: auto;
    flex: 1 1 auto;
  }

  .request-card__delete-form .danger-icon-button {
    width: 44px;
    flex: 0 0 44px;
  }
}

.req-detail-grid {
  display: grid;
  gap: 1.25rem;
}

.req-detail-item {
  padding: 1rem 1.15rem;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfdff 0%, #f3f8fe 100%);
  border: 1px solid #e1ebf6;
}

.req-detail-label {
  color: #6b7d90;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.35rem;
}

.req-detail-value {
  color: #1e3a5f;
  font-size: 1.05rem;
  line-height: 1.6;
  word-break: break-word;
}

/* Payment offers list (staff) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.payments-offers-page {
  max-width: 1080px;
  margin: 2rem auto;
  padding: 0 1.25rem 4rem;
}

.payments-offers-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.payments-offers-toolbar__text {
  flex: 1 1 16rem;
  min-width: 0;
}

.payments-offers-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #eef5ff 0%, #e4eef9 100%);
  color: #2d5f8d;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.payments-offers-title {
  margin: 0.85rem 0 0.5rem;
  font-size: clamp(1.55rem, 3vw, 2rem);
  font-weight: 700;
  color: #1e3a5f;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.payments-offers-lede {
  margin: 0;
  color: #5a6c7d;
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 34rem;
}

.payments-offers-lede a {
  color: #4a9eff;
  font-weight: 600;
  text-decoration: none;
}

.payments-offers-lede a:hover {
  text-decoration: underline;
}

.payments-offers-toolbar__cta {
  flex-shrink: 0;
  align-self: center;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(30, 58, 95, 0.18);
}

@media (max-width: 520px) {
  .payments-offers-toolbar__cta {
    width: 100%;
    text-align: center;
  }
}

.payments-offers-card {
  background: #fff;
  border-radius: 20px;
  border: 1px solid #e1ebf6;
  box-shadow:
    0 1px 2px rgba(30, 58, 95, 0.04),
    0 12px 40px rgba(30, 58, 95, 0.06);
  overflow: hidden;
}

.payments-offers-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.85rem 1.25rem;
  background: linear-gradient(180deg, #fbfdff 0%, #f5f9fc 100%);
  border-bottom: 1px solid #e8eef5;
  font-size: 0.88rem;
  color: #5a6c7d;
}

.payments-offers-count {
  font-weight: 700;
  color: #1e3a5f;
}

.payments-offers-page-indicator {
  font-weight: 600;
  color: #6b7d90;
}

.payments-offers-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.payments-offers-table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
}

.payments-offers-table thead th {
  text-align: left;
  padding: 0.75rem 1.15rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7d90;
  background: #fafcfe;
  border-bottom: 1px solid #e8eef5;
  white-space: nowrap;
}

.payments-offers-table thead th:first-child {
  padding-left: 1.35rem;
}

.payments-offers-table thead th:last-child {
  padding-right: 1.35rem;
}

.payments-offers-row td {
  padding: 1rem 1.15rem;
  vertical-align: middle;
  border-bottom: 1px solid #eef2f7;
  font-size: 0.94rem;
  color: #1e3a5f;
}

.payments-offers-row td:first-child {
  padding-left: 1.35rem;
}

.payments-offers-row td:last-child {
  padding-right: 1.35rem;
}

.payments-offers-row:last-child td {
  border-bottom: none;
}

.payments-offers-row:hover td {
  background: #fbfdff;
}

.payments-offers-table__numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.payments-offers-table__title {
  font-weight: 600;
  max-width: 14rem;
}

.payments-offers-table__email {
  color: #4a6579;
  font-size: 0.9rem;
  max-width: 12rem;
  word-break: break-all;
}

.payments-offers-table__amount {
  font-weight: 700;
  font-size: 1rem;
  color: #1e3a5f;
}

.payments-offers-code {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.65rem;
  border-radius: 10px;
  background: linear-gradient(180deg, #f0f4f8 0%, #e8eef5 100%);
  color: #1e3a5f;
  border: 1px solid #dce4ee;
}

.payments-offers-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.payments-offers-pill--billing {
  background: #f3f0ff;
  color: #5c4d9d;
}

.payments-offers-table__actions {
  width: 1%;
  white-space: nowrap;
}

.payments-offers-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.payments-offers-actions__form {
  margin: 0;
  display: inline;
}

.payments-offers-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 0.95rem;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.payments-offers-btn--primary {
  background: #1e3a5f;
  color: #fff;
  border-color: #1e3a5f;
}

.payments-offers-btn--primary:hover {
  background: #2a5080;
  border-color: #2a5080;
  box-shadow: 0 2px 8px rgba(30, 58, 95, 0.2);
}

.payments-offers-btn--ghost {
  background: #fff;
  color: #1e3a5f;
  border-color: #c5d4e5;
}

.payments-offers-btn--ghost:hover {
  border-color: #1e3a5f;
  background: #fbfdff;
}

.payments-offers-pagination {
  margin-top: 1.75rem;
}

.payments-offers-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  border-radius: 20px;
  background: linear-gradient(180deg, #fbfdff 0%, #f3f8fe 100%);
  border: 1px dashed #c5d4e5;
}

.payments-offers-empty__title {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #1e3a5f;
}

.payments-offers-empty__text {
  margin: 0 0 1.25rem;
  color: #5a6c7d;
  font-size: 0.98rem;
}

.payments-offers-empty .cta-button {
  text-decoration: none;
}

/* Payment offer status badges (align with request badges) */
.req-badge--draft {
  background: #f0f2f5;
  color: #4a5568;
}

.req-badge--ready {
  background: #e6f4ff;
  color: #1a6e9e;
}

.req-badge--checkout_started {
  background: #fff4e5;
  color: #b47812;
}

.req-badge--paid {
  background: #e6f9ed;
  color: #1a7a3a;
}

.req-badge--active {
  background: #e8f5e9;
  color: #2e7d32;
}

.req-badge--canceled {
  background: #fdeaea;
  color: #b12525;
}

.req-badge--processing {
  background: #eef2ff;
  color: #4338ca;
}

.req-badge--past_due {
  background: #fff4e5;
  color: #b45309;
}

/* Cancellation scheduled: still active, but ending — Stripe keeps the raw
   status as 'active', so this state only exists in our own labelling. */
.req-badge--ending {
  background: #fff4e5;
  color: #b45309;
}

.req-badge--refunded {
  background: #f0f2f5;
  color: #4a5568;
}

/* Payment notices — one block per lifecycle state on the request page. */
.payment-notice {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 0.93rem;
  line-height: 1.65;
}

.payment-notice strong {
  display: block;
  margin-bottom: 0.15rem;
}

.payment-notice--pending {
  background: #eef5ff;
  border-color: #cfe0f5;
  color: #2d5f8d;
}

.payment-notice--warning {
  background: #fff8ec;
  border-color: #f5e2c0;
  color: #8a5a00;
}

.payment-notice--danger {
  background: #fdeaea;
  border-color: #f5c6c6;
  color: #b12525;
}

.payment-notice--muted {
  background: #f7f9fb;
  border-color: #e3e9f0;
  color: #5a6c7d;
}

.payments-offers-card--form .payments-offers-form-body {
  padding: 1.25rem 1.35rem 1.75rem;
}

.payments-offers-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.payments-offers-form-actions .settings-submit {
  margin: 0;
}

/* Offer form — two-column row for paired fields */
.offer-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 520px) {
  .offer-form-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Legal documents and purchase consents
   Layered on the existing settings-shell / settings-card components rather
   than reinventing a page frame — these only add what long-form legal text
   needs and the design system did not already have.
   ========================================================================== */

/* Long-form prose reads badly at the 1080px settings width. */
.settings-container--prose {
  max-width: 820px;
}

.legal-meta {
  margin: 0.35rem 0 0;
  color: #5a6c7d;
  font-size: 0.92rem;
}

.legal-card + .legal-card {
  margin-top: 1.5rem;
}

/* Unfilled trader details must be impossible to miss before publishing. */
.legal-warning {
  margin-bottom: 1.5rem;
  padding: 1rem 1.2rem;
  background: #fdeaea;
  border: 1px solid #f5c6c6;
  border-radius: 16px;
  color: #b12525;
  font-size: 0.95rem;
  line-height: 1.65;
}

/* The settings-form textarea has no rule of its own; match its inputs. */
.legal-form textarea {
  width: 100%;
  border: 1px solid #d9e3ec;
  border-radius: 14px;
  padding: 0.95rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  background: #fff;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.legal-form textarea:focus {
  outline: none;
  border-color: #4a9eff;
  box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.16);
}

.legal-warning strong {
  display: block;
  margin-bottom: 0.2rem;
}

.legal-toc ol {
  margin: 0;
  padding-left: 1.2rem;
  columns: 2;
  column-gap: 2.5rem;
}

.legal-toc li {
  margin-bottom: 0.4rem;
  font-size: 0.93rem;
  break-inside: avoid;
}

.legal-toc a {
  color: #2d5f8d;
  text-decoration: none;
}

.legal-toc a:hover {
  text-decoration: underline;
}

.legal-body {
  color: #33475f;
  font-size: 1rem;
  line-height: 1.8;
}

.legal-body > p,
.legal-body > ul,
.legal-body > ol {
  margin: 0 0 1.1rem;
}

.legal-intro {
  font-size: 1.05rem;
  color: #243b5a;
  padding-bottom: 1.4rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #edf2f7;
}

.legal-body h2 {
  margin: 2.4rem 0 0.9rem;
  font-size: 1.22rem;
  font-weight: 700;
  color: #1e3a5f;
  scroll-margin-top: 100px;
}

.legal-body h3 {
  margin: 1.6rem 0 0.6rem;
  font-size: 1.03rem;
  font-weight: 700;
  color: #2d5f8d;
}

.legal-body ul,
.legal-body ol {
  padding-left: 1.4rem;
}

.legal-body li {
  margin-bottom: 0.5rem;
}

.legal-body a {
  color: #2d5f8d;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.1rem 0 1.6rem;
  font-size: 0.95rem;
}

.legal-table th,
.legal-table td {
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid #edf2f7;
  vertical-align: top;
}

.legal-table th {
  width: 38%;
  color: #5a6c7d;
  font-weight: 600;
}

.legal-definitions dt {
  font-weight: 700;
  color: #1e3a5f;
  margin-top: 0.9rem;
}

.legal-definitions dd {
  margin: 0.15rem 0 0;
  color: #4a5f7a;
}

/* Clauses a court would expect to be conspicuous, not buried in the body. */
.legal-emphasis {
  padding: 0.95rem 1.15rem;
  background: #fff8ec;
  border-left: 4px solid #e0a63f;
  border-radius: 0 12px 12px 0;
  font-weight: 600;
  color: #6b4a12;
}

.legal-callout {
  padding: 0.95rem 1.15rem;
  background: #eef5ff;
  border-left: 4px solid #4a9eff;
  border-radius: 0 12px 12px 0;
  color: #2d5f8d;
}

.legal-updated {
  margin-top: 2.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid #edf2f7;
  font-size: 0.88rem;
  color: #7a8899;
}

.legal-form {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid #edf2f7;
}

.legal-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.1rem;
}

.legal-form__cancel {
  font-size: 0.93rem;
  color: #5a6c7d;
}

.legal-form__note {
  margin-top: 0.9rem;
  font-size: 0.86rem;
  color: #7a8899;
}

.cta-button--danger {
  background: #b12525;
  border-color: #b12525;
}

/* Purchase consents. Deliberately plain and legible — a consent hidden in
   small grey text is easy to attack as not transparently presented. */
.consent-box {
  margin: 0 0 1.25rem;
  padding: 1.1rem 1.25rem 1.25rem;
  border: 1px solid #d7e1ec;
  border-radius: 16px;
  background: #fbfdff;
}

.consent-box__legend {
  padding: 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a8899;
}

.consent-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.9rem;
  font-size: 0.93rem;
  line-height: 1.6;
  color: #33475f;
  cursor: pointer;
}

.consent-item:last-child {
  margin-bottom: 0;
}

.consent-item input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  accent-color: #2d5f8d;
  cursor: pointer;
}

.consent-item__hint {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  font-style: normal;
  color: #7a8899;
}

.withdrawal-cta {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed #e3e9f0;
}

.withdrawal-cta__link {
  font-size: 0.9rem;
  color: #8a5a00;
  text-decoration: underline;
}

.withdrawal-cta__note {
  margin: 0.35rem 0 0;
  font-size: 0.84rem;
  color: #7a8899;
}

.footer-legal {
  margin: 0.75rem 0 0.5rem;
  font-size: 0.88rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.footer-legal a {
  color: inherit;
  opacity: 0.85;
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.35rem 0.4rem;
}

.footer-legal a:hover {
  opacity: 1;
}

.footer-legal span {
  opacity: 0.5;
}

@media (max-width: 720px) {
  .legal-toc ol {
    columns: 1;
  }

  .legal-table th {
    width: auto;
  }
}

/* Sign-up consent sits inside the narrow auth card, so it needs less padding
   than the checkout version. */
.consent-box--compact {
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
}

.consent-box--compact .consent-item {
  margin-bottom: 0;
  gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.5;
}

.consent-box--compact .consent-item input[type="checkbox"] {
  margin-top: 0.15rem;
  width: 0.9rem;
  height: 0.9rem;
}

.auth-consent-note {
  margin: 0.6rem 0 0;
  text-align: center;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: #7a8899;
}

.auth-consent-note a {
  color: #2d5f8d;
}

.auth-consent-note a:focus-visible {
  outline: none;
  border-radius: 2px;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.16);
}


/* Staff dashboard tools (/dashboards/staff/)
   ------------------------------------------------------------------
   Scoped one notch smaller than the marketing pages: this is a dense
   working surface, not a landing page. Every size below is relative to
   .dash-admin, so the whole scale moves together.
   ------------------------------------------------------------------ */

.dash-admin {
  font-size: 0.8125rem;
  line-height: 1.6;
  padding: 2.5rem 1.25rem 4rem;
  color: #33475b;
}

.dash-admin-container {
  max-width: 68rem;
  margin: 0 auto;
}

.dash-admin-head {
  margin-bottom: 1.75rem;
}

.dash-eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4a6fa5;
  background: #eef4fc;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  margin-bottom: 0.75rem;
}

.dash-admin-head h1 {
  color: #1e3a5f;
  font-size: 1.75rem;
  font-weight: 500;
  margin: 0 0 0.35rem;
}

.dash-admin-head p {
  color: #5a6c7d;
  max-width: 46rem;
  margin: 0;
}

/* Tabs ------------------------------------------------------------- */

.dash-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid #e1ebf6;
  margin-bottom: 1.5rem;
}

.dash-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.6rem 0.9rem;
  font: inherit;
  font-weight: 600;
  color: #5a6c7d;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.dash-tab:hover {
  color: #1e3a5f;
  background: #f5f9fd;
}

.dash-tab.is-active {
  color: #1e3a5f;
  border-bottom-color: #f2b230;
}

.dash-tab:focus-visible {
  outline: 2px solid #4a6fa5;
  outline-offset: -2px;
}

.dash-tab-count {
  display: inline-block;
  min-width: 1.25rem;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #eef4fc;
  color: #4a6fa5;
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: center;
}

/* Panels ----------------------------------------------------------- */

.dash-panel {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #e8eef3;
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 16px 40px rgba(30, 58, 95, 0.06);
}

.dash-panel-head {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eef2f7;
}

.dash-panel-head h2 {
  color: #1e3a5f;
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0 0 0.3rem;
}

.dash-panel-head p {
  color: #5a6c7d;
  max-width: 52rem;
  margin: 0;
}

/* Forms ------------------------------------------------------------ */

.dash-fieldset + .dash-fieldset {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #eef2f7;
}

.dash-fieldset-title {
  color: #1e3a5f;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 0.25rem;
}

.dash-fieldset-hint,
.dash-field-hint,
.dash-empty {
  color: #5a6c7d;
  font-size: 0.78125rem;
  margin: 0 0 0.85rem;
}

.dash-field-hint {
  margin: 0.35rem 0 0;
}

.dash-empty {
  padding: 1rem 1.1rem;
  border: 1px dashed #dbe6f2;
  border-radius: 12px;
  background: #fbfdff;
  margin-bottom: 1.5rem;
}

/* Two columns once there is room. Long inputs opt out with .dash-grid-wide. */
.dash-grid {
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  align-items: start;
}

.dash-grid-wide {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.dash-admin label {
  display: block;
  color: #1e3a5f;
  font-weight: 600;
  font-size: 0.78125rem;
  margin-bottom: 0.35rem;
}

.dash-admin .danger-button {
  min-width: 0;
}

.dash-admin .settings-input,
.dash-admin .settings-select,
.dash-admin .settings-file-input,
.dash-admin .settings-search-input,
.dash-admin input[type="text"],
.dash-admin input[type="number"],
.dash-admin input[type="time"],
.dash-admin textarea,
.dash-admin select {
  width: 100%;
  font-size: 0.8125rem;
  padding: 0.5rem 0.65rem;
  border-radius: 9px;
}

.dash-admin textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.55;
  /* The widget asks for 12 rows, which swallows the panel. Start smaller and
     let the resize handle do the rest. */
  height: 11rem;
  resize: vertical;
}

/* The first fieldset has no rule above it — the panel header already divides. */
.dash-fieldset:first-of-type {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #eef2f7;
}

.dash-check {
  align-self: end;
  padding: 0.75rem 0.85rem;
  border: 1px solid #e1ebf6;
  border-radius: 12px;
  background: #fbfdff;
}

.dash-check label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.dash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #eef2f7;
}

.dash-admin .dash-submit {
  width: auto;
  /* .danger-button and .auth-submit are sized for a full-width form button. */
  min-width: 0;
  padding: 0.5rem 1.1rem;
  font-size: 0.8125rem;
  border-radius: 9px;
}

/* A per-row destroy is secondary to Run now; only the bulk delete is loud. */
.dash-admin .dash-submit-danger {
  appearance: none;
  background: #fff;
  border: 1px solid #edc9c6;
  color: #9b2226;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.dash-admin .dash-submit-danger:hover {
  background: #fdecec;
  border-color: #e5b0ac;
}

.dash-admin .dash-submit-secondary {
  background: #eef4fc;
  color: #1e3a5f;
  box-shadow: none;
}

.dash-admin .dash-submit-secondary:hover {
  background: #e2ecf8;
}

.dash-form-boxed {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border: 1px solid #e1ebf6;
  border-radius: 14px;
  background: #fbfdff;
}

.dash-admin .field-errors,
.dash-admin .non-field-errors {
  font-size: 0.75rem;
}

.dash-admin code {
  background: #f3f8fe;
  border: 1px solid #e1ebf6;
  border-radius: 5px;
  padding: 0.05rem 0.3rem;
  font-size: 0.9em;
}

/* Schedule list ---------------------------------------------------- */

.schedule-list {
  display: grid;
  gap: 0.85rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.schedule-item {
  display: grid;
  gap: 0.6rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 1px solid #e1ebf6;
  background: linear-gradient(180deg, #fbfdff 0%, #f3f8fe 100%);
}

.schedule-item-paused {
  opacity: 0.65;
}

.schedule-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.schedule-item-head strong {
  color: #1e3a5f;
  font-size: 0.9375rem;
  font-weight: 600;
}

.schedule-status {
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.71875rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}

.schedule-status-ok {
  background: #e7f6ed;
  border-color: #c6e7d3;
  color: #1c6b41;
}

.schedule-status-skipped,
.schedule-status-none {
  background: #eef2f7;
  border-color: #dde5ee;
  color: #5a6c7d;
}

.schedule-status-missing {
  background: #fdf3e2;
  border-color: #f4e0bb;
  color: #8a5b12;
}

.schedule-status-error {
  background: #fdecec;
  border-color: #f5cccc;
  color: #9b2226;
}

.schedule-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.schedule-item-actions form {
  margin: 0;
}

.schedule-item-actions .auth-submit,
.schedule-item-actions .dash-submit-danger {
  width: auto;
  min-width: 0;
}

.schedule-edit summary {
  cursor: pointer;
  color: #4a6fa5;
  font-weight: 600;
  font-size: 0.78125rem;
  padding: 0.2rem 0;
}

.schedule-edit summary:hover {
  color: #1e3a5f;
}

.schedule-edit .dash-form {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid #e1ebf6;
}

@media (max-width: 640px) {
  .dash-admin {
    padding: 1.75rem 1rem 3rem;
  }

  .dash-panel {
    padding: 1.15rem;
    border-radius: 14px;
  }

  .dash-tabs {
    gap: 0;
  }

  .dash-tab {
    flex: 1 1 auto;
    padding: 0.55rem 0.5rem;
    text-align: center;
  }

  .schedule-item-actions .auth-submit,
  .schedule-item-actions .dash-submit-danger {
    width: 100%;
  }
}

/* API add-on on the Settings card. Layout only: every colour comes from the
   existing badge, notice and consent styles. */
.settings-api-plan {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.settings-api-plan .req-badge,
.settings-api-key-item .req-badge {
  margin-left: 0.4rem;
  vertical-align: middle;
}

.settings-api-key-item--inactive .settings-overview-value {
  opacity: 0.7;
}

.settings-api-offer {
  margin-top: 1.25rem;
}

.settings-api-features {
  margin: 0 0 1.25rem;
  padding-left: 1.1rem;
  font-size: 0.93rem;
  line-height: 1.7;
}

.settings-api-offer__note {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

/* Pending payment indicator. Colours are the existing focus/accent blue and
   the consent-box border. */
.settings-api-pending {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.settings-api-spinner {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  border: 2px solid #d7e1ec;
  border-top-color: #2d5f8d;
  border-radius: 50%;
  animation: settings-api-spin 0.9s linear infinite;
}

.settings-api-spinner[hidden] {
  display: none;
}

@keyframes settings-api-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .settings-api-spinner { animation-duration: 2.4s; }
}

.settings-api-notice {
  margin-bottom: 1.25rem;
}

.settings-api-notice__action {
  margin-top: 0.75rem;
}

.settings-api-plan form,
.settings-api-notice__action .cta-button {
  max-width: 100%;
}

/* API card on phones. Same breakpoint as the rest of the Settings page
   (max-width: 640px), scoped to this card so nothing else moves. Only
   spacing and the checkbox row change; no colours, copy or links. */
@media (max-width: 640px) {
  /* Section rhythm: intro, then the offer, then its list, then the consents. */
  #api-keys .settings-api-offer {
    margin-top: 1.75rem;
  }

  #api-keys .settings-api-offer .settings-api-list-title {
    margin-bottom: 1rem;
    font-size: 1.0625rem;
  }

  #api-keys .settings-api-features {
    margin-bottom: 1.75rem;
    line-height: 1.65;
  }

  #api-keys .settings-api-features li + li {
    margin-top: 0.4rem;
  }

  /* The box keeps its own breathing room on every side. */
  #api-keys .consent-box {
    padding: 1.35rem 1.35rem 0.9rem;
  }

  /* Each consent is its own row, at least 44px tall including padding, so the
     whole label is an easy tap target and rows read as separate items. */
  #api-keys .consent-item {
    margin-bottom: 0;
    padding: 0.75rem 0;
    min-height: 44px;
    gap: 0.8rem;
  }

  /* Checkbox centred on the label's first line: (line height 1.6 x 0.93rem
     minus the 1.25rem box) / 2. */
  #api-keys .consent-item input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.12rem;
  }

  #api-keys .consent-item__hint {
    margin-top: 0.35rem;
  }
}