/* ==========================================================================
   Smarttcargo design system
   Token set, type scale and component shapes follow the AlignUI-based system
   used on idme.sankofa.dev: Inter, a 0-950 neutral ramp, 10/16/20px radii and
   layered "custom" shadows. Brand colours are Smarttcargo purple.
   ========================================================================== */

:root {
  /* --- brand ----------------------------------------------------------- */
  /* Primary #9266FF and secondary #2D1F4F are taken from the Smarttcargo
     logo: the loop mark and the wordmark respectively. */
  --primary-base: #9266ff;
  --primary-dark: #7d4df0;
  --primary-darker: #6838d9;
  --primary-alpha-10: #9266ff1a;
  --primary-alpha-16: #9266ff29;

  --secondary-base: #2d1f4f;
  --secondary-dark: #211741;
  --secondary-alpha-10: #2d1f4f1a;

  /* Wordmark ink: deep purple on light, white on dark. */
  --brand-ink: #2d1f4f;

  /* --- neutrals (light) ------------------------------------------------ */
  --bg-white-0: #ffffff;
  --bg-weak-50: #f7f7f7;
  --bg-soft-200: #ebebeb;
  --bg-sub-300: #d1d1d1;
  --bg-surface-800: #262626;
  --bg-strong-950: #171717;

  --text-strong-950: #171717;
  --text-sub-600: #5c5c5c;
  --text-soft-400: #a3a3a3;
  --text-disabled-300: #d1d1d1;
  --text-white-0: #ffffff;

  --stroke-soft-200: #ebebeb;
  --stroke-sub-300: #d1d1d1;
  --stroke-strong-950: #171717;
  --stroke-white-0: #ffffff;

  --icon-strong-950: #171717;
  --icon-sub-600: #5c5c5c;
  --icon-soft-400: #a3a3a3;

  --static-black: #171717;
  --static-white: #ffffff;

  /* --- state colours (light) ------------------------------------------- */
  --success-base: #1fc16b;
  --success-light: #c2f5da;
  --success-lighter: #e3f7ec;
  --success-dark: #0b4627;

  --error-base: #fb3748;
  --error-light: #ffc0c5;
  --error-lighter: #ffebec;
  --error-dark: #681219;

  --warning-base: #f6b51e;
  --warning-light: #ffecc0;
  --warning-lighter: #fffaeb;
  --warning-dark: #624c18;

  --info-base: #335cff;
  --info-light: #c0d5ff;
  --info-lighter: #ebf1ff;
  --info-dark: #122368;

  --faded-base: #7b7b7b;
  --faded-light: #ebebeb;
  --faded-lighter: #f7f7f7;
  --faded-dark: #262626;

  /* --- semantic surfaces ----------------------------------------------- */
  --bg: var(--bg-weak-50);
  --bg-elevated: var(--bg-white-0);
  --bg-inset: var(--bg-weak-50);
  --border: var(--stroke-soft-200);
  --border-strong: var(--stroke-sub-300);
  --bg-hover: color-mix(in srgb, var(--text-strong-950) 4%, transparent);
  --bg-active: color-mix(in srgb, var(--text-strong-950) 7%, transparent);

  /* --- type ------------------------------------------------------------ */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --title-h1-size: 56px;   --title-h1-leading: 64px;  --title-h1-tracking: -0.56px;
  --title-h2-size: 48px;   --title-h2-leading: 56px;  --title-h2-tracking: -0.48px;
  --title-h3-size: 40px;   --title-h3-leading: 48px;  --title-h3-tracking: -0.4px;
  --title-h4-size: 32px;   --title-h4-leading: 40px;  --title-h4-tracking: -0.16px;
  --title-h5-size: 24px;   --title-h5-leading: 32px;  --title-h5-tracking: 0px;
  --title-h6-size: 20px;   --title-h6-leading: 28px;  --title-h6-tracking: 0px;

  /* --- radii ------------------------------------------------------------ */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-full: 999px;

  /* --- elevation -------------------------------------------------------- */
  --shadow-x-small: inset 0 -1px 1px -0.5px #3333330f, 0 0 0 1px #f5f5f5,
    0 1px 2px 0 #3333330a, 0 2px 4px 0 #3333330a, 0 4px 8px -2px #3333330f;
  --shadow-small: 0 1px 3px -1.5px #33333329, 0 5px 5px -2.5px #33333314,
    0 12px 6px -6px #33333305, 0 16px 8px -8px #33333303, 0 0 0 1px #3333330a,
    inset 0 0 0.5px 0 #33333314;
  --shadow-medium: inset 0 -1px 1px -0.5px #3333330f, 0 0 0 1px #f5f5f5,
    0 48px 48px -24px #3333330a, 0 24px 24px -12px #3333330a, 0 12px 12px -6px #3333330a,
    0 6px 6px -3px #3333330a, 0 3px 3px -1.5px #33333305, 0 1px 1px 0.5px #3333330a;
  --shadow-large: 0 96px 96px -32px #3333330f, 0 48px 48px -24px #3333330a,
    0 24px 24px -12px #3333330a, 0 12px 12px -6px #3333330a, 0 6px 6px -3px #3333330a,
    0 3px 3px -1.5px #33333305, 0 1px 1px 0.5px #3333330a, 0 0 0 1px #3333330a,
    inset 0 -1px 1px -0.5px #3333330f;
  --shadow-button: 0 1px 2px 0 #0a0d1408;

  /* --- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration-fast: 0.12s;
  --duration-base: 0.2s;

  /* --- layout ----------------------------------------------------------- */
  --container: 72rem;
  --header-height: 64px;

  color-scheme: light;
}

/* Dark palette. Applied for an explicit choice and for system-dark when the
   viewer has not pinned light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-white-0: #171717;
    --bg-weak-50: #262626;
    --bg-soft-200: #333333;
    --bg-sub-300: #5c5c5c;
    --bg-surface-800: #ebebeb;
    --bg-strong-950: #ffffff;

    --brand-ink: #ffffff;

    --text-strong-950: #ffffff;
    --text-sub-600: #a3a3a3;
    --text-soft-400: #7b7b7b;
    --text-disabled-300: #5c5c5c;
    --text-white-0: #171717;

    --stroke-soft-200: #333333;
    --stroke-sub-300: #5c5c5c;
    --stroke-strong-950: #ffffff;
    --stroke-white-0: #171717;

    --icon-strong-950: #ffffff;
    --icon-sub-600: #a3a3a3;
    --icon-soft-400: #7b7b7b;

    --success-base: #1daf61;
    --success-light: #1fc16b3d;
    --success-lighter: #1fc16b29;
    --success-dark: #3ee089;

    --error-base: #e93544;
    --error-light: #fb37483d;
    --error-lighter: #fb374829;
    --error-dark: #ff6875;

    --warning-base: #e6a819;
    --warning-light: #fbc64b3d;
    --warning-lighter: #fbc64b29;
    --warning-dark: #ffd268;

    --info-base: #335cff;
    --info-light: #476cff3d;
    --info-lighter: #476cff29;
    --info-dark: #6895ff;

    --faded-light: #99a0ae3d;
    --faded-lighter: #99a0ae29;
    --faded-dark: #d1d1d1;

    --shadow-x-small: inset 0 -1px 1px -0.5px #0000004d, 0 0 0 1px #ffffff0f,
      0 1px 2px 0 #00000040;
    --shadow-small: 0 1px 3px -1.5px #00000059, 0 5px 5px -2.5px #00000040,
      0 0 0 1px #ffffff0f;
    --shadow-medium: 0 0 0 1px #ffffff0f, 0 24px 24px -12px #00000059,
      0 12px 12px -6px #00000040, 0 4px 8px -2px #00000040;
    --shadow-large: 0 0 0 1px #ffffff14, 0 48px 48px -24px #00000073,
      0 24px 24px -12px #00000059, 0 12px 12px -6px #00000040;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg-white-0: #171717;
  --bg-weak-50: #262626;
  --bg-soft-200: #333333;
  --bg-sub-300: #5c5c5c;
  --bg-surface-800: #ebebeb;
  --bg-strong-950: #ffffff;

  --brand-ink: #ffffff;

  --text-strong-950: #ffffff;
  --text-sub-600: #a3a3a3;
  --text-soft-400: #7b7b7b;
  --text-disabled-300: #5c5c5c;
  --text-white-0: #171717;

  --stroke-soft-200: #333333;
  --stroke-sub-300: #5c5c5c;
  --stroke-strong-950: #ffffff;
  --stroke-white-0: #171717;

  --icon-strong-950: #ffffff;
  --icon-sub-600: #a3a3a3;
  --icon-soft-400: #7b7b7b;

  --success-base: #1daf61;
  --success-light: #1fc16b3d;
  --success-lighter: #1fc16b29;
  --success-dark: #3ee089;

  --error-base: #e93544;
  --error-light: #fb37483d;
  --error-lighter: #fb374829;
  --error-dark: #ff6875;

  --warning-base: #e6a819;
  --warning-light: #fbc64b3d;
  --warning-lighter: #fbc64b29;
  --warning-dark: #ffd268;

  --info-base: #335cff;
  --info-light: #476cff3d;
  --info-lighter: #476cff29;
  --info-dark: #6895ff;

  --faded-light: #99a0ae3d;
  --faded-lighter: #99a0ae29;
  --faded-dark: #d1d1d1;

  --shadow-x-small: inset 0 -1px 1px -0.5px #0000004d, 0 0 0 1px #ffffff0f,
    0 1px 2px 0 #00000040;
  --shadow-small: 0 1px 3px -1.5px #00000059, 0 5px 5px -2.5px #00000040,
    0 0 0 1px #ffffff0f;
  --shadow-medium: 0 0 0 1px #ffffff0f, 0 24px 24px -12px #00000059,
    0 12px 12px -6px #00000040, 0 4px 8px -2px #00000040;
  --shadow-large: 0 0 0 1px #ffffff14, 0 48px 48px -24px #00000073,
    0 24px 24px -12px #00000059, 0 12px 12px -6px #00000040;

  color-scheme: dark;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Suppress the grey-blue box mobile browsers flash over any tapped element.
     Inherited, so it covers links, buttons and anything with a tap handler.
     Our own :hover and :active styles provide the feedback instead. */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.176px;
  color: var(--text-strong-950);
  background: var(--bg-white-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
hr { border: none; border-top: 1px solid var(--stroke-soft-200); margin: 0; }

/* Dragging or double-clicking a control selects its label, which paints the
   blue selection box over the button. Controls only - shipment details and the
   tracking number stay selectable so customers can copy them. */
.btn,
.nav__link,
.nav-toggle,
.theme-toggle button,
.accordion__trigger {
  -webkit-user-select: none;
  user-select: none;
}

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

::selection { background: var(--primary-alpha-16); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Typography helpers
   ========================================================================== */

.t-h1 { font-size: var(--title-h1-size); line-height: var(--title-h1-leading); letter-spacing: var(--title-h1-tracking); font-weight: 500; }
.t-h2 { font-size: var(--title-h2-size); line-height: var(--title-h2-leading); letter-spacing: var(--title-h2-tracking); font-weight: 500; }
.t-h3 { font-size: var(--title-h3-size); line-height: var(--title-h3-leading); letter-spacing: var(--title-h3-tracking); font-weight: 500; }
.t-h4 { font-size: var(--title-h4-size); line-height: var(--title-h4-leading); letter-spacing: var(--title-h4-tracking); font-weight: 500; }
.t-h5 { font-size: var(--title-h5-size); line-height: var(--title-h5-leading); font-weight: 500; }
.t-h6 { font-size: var(--title-h6-size); line-height: var(--title-h6-leading); font-weight: 500; }

.t-lead { font-size: 18px; line-height: 28px; letter-spacing: -0.27px; color: var(--text-sub-600); }
.t-body { font-size: 16px; line-height: 24px; letter-spacing: -0.176px; color: var(--text-sub-600); }
.t-small { font-size: 14px; line-height: 20px; letter-spacing: -0.084px; color: var(--text-sub-600); }
.t-xs { font-size: 12px; line-height: 16px; color: var(--text-soft-400); }
.t-mono { font-family: var(--font-mono); letter-spacing: 0; }

.t-eyebrow {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.48px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--primary-base);
}

.t-strong { color: var(--text-strong-950); }
.t-sub { color: var(--text-sub-600); }
.t-soft { color: var(--text-soft-400); }
.t-center { text-align: center; }
.t-balance { text-wrap: balance; }

@media (max-width: 900px) {
  .t-h1 { font-size: 40px; line-height: 48px; }
  .t-h2 { font-size: 32px; line-height: 40px; }
  .t-h3 { font-size: 28px; line-height: 36px; }
  .t-h4 { font-size: 24px; line-height: 32px; }
  .t-lead { font-size: 16px; line-height: 26px; }
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding-block: 96px; }
.section--tight { padding-block: 64px; }
.section--weak { background: var(--bg-weak-50); }

.section-head { max-width: 680px; margin-bottom: 48px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head > * + * { margin-top: 12px; }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stack { display: flex; flex-direction: column; }
.stack-8 { gap: 8px; } .stack-12 { gap: 12px; } .stack-16 { gap: 16px; }
.stack-24 { gap: 24px; } .stack-32 { gap: 32px; }

.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .section { padding-block: 64px; }
  .section--tight { padding-block: 48px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .section-head { margin-bottom: 32px; }
}

/* ==========================================================================
   Header / navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg-white-0) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stroke-soft-200);
}

.site-header__inner {
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
}

.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* The logo is the full wordmark. `color` drives the lettering so it flips to
   white in dark mode; the loop keeps its own brand purple. */
.brand__mark {
  width: 100px;
  height: 40px;
  flex-shrink: 0;
  color: var(--brand-ink);
  object-fit: contain;
}

/* The artwork already carries the name, so the adjacent text label would
   repeat it. Kept in the DOM for assistive tech. */
.brand__name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding-inline: 12px;
  border-radius: var(--radius-8);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.084px;
  color: var(--text-sub-600);
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.nav__link:hover { color: var(--text-strong-950); background: var(--bg-hover); }
.nav__link[aria-current="page"] { color: var(--text-strong-950); }

.nav__group { position: relative; }
.nav__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: 320px;
  padding: 8px;
  background: var(--bg-white-0);
  border: 1px solid var(--stroke-soft-200);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-medium);
  opacity: 0;
  visibility: hidden;
  /* visibility is transitioned, so it stays `visible` for the whole fade-out.
     pointer-events flips instantly and keeps the fading panel from swallowing
     clicks meant for the page underneath. */
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility var(--duration-base);
}
/* The panel sits 10px below the trigger. Without something covering that gap
   the group stops being hovered halfway down and the menu closes under the
   pointer, so the click lands on whatever is behind it. */
.nav__panel::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.nav__group:hover .nav__panel,
.nav__group:focus-within .nav__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav__item {
  display: flex;
  gap: 12px;
  padding: 10px;
  border-radius: var(--radius-10);
  transition: background var(--duration-fast) var(--ease-out);
}
.nav__item:hover { background: var(--bg-weak-50); }
.nav__item strong { display: block; font-size: 14px; font-weight: 500; color: var(--text-strong-950); }
.nav__item span { display: block; font-size: 12px; line-height: 16px; color: var(--text-soft-400); margin-top: 2px; }

.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Three-way theme control: light / system / dark. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  gap: 2px;
  background: var(--bg-weak-50);
  border: 1px solid var(--stroke-soft-200);
  border-radius: var(--radius-full);
}
.theme-toggle button {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--text-soft-400);
  font-size: 12px;
  line-height: 1;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.theme-toggle button:hover { color: var(--text-strong-950); }
.theme-toggle button[aria-pressed="true"] {
  background: var(--bg-white-0);
  color: var(--text-strong-950);
  box-shadow: var(--shadow-button);
}

.nav-toggle {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--stroke-soft-200);
  border-radius: var(--radius-8);
  cursor: pointer;
}

@media (max-width: 1000px) {
  .nav {
    position: fixed;
    inset: var(--header-height) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 16px 24px 24px;
    background: var(--bg-white-0);
    border-bottom: 1px solid var(--stroke-soft-200);
    box-shadow: var(--shadow-medium);
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    /* Without this the closed menu still takes taps across the whole width
       below the header while it fades out. */
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility var(--duration-base);
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  .nav__link { height: 44px; font-size: 16px; }
  .nav__panel {
    position: static;
    width: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    padding: 0 0 8px 12px;
    background: transparent;
  }
  .nav-toggle { display: inline-flex; }
  .header-actions .btn--hide-sm { display: none; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding-inline: 16px;
  border-radius: var(--radius-10);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.084px;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn--primary { background: var(--primary-base); color: #fff; box-shadow: var(--shadow-button); }
.btn--primary:hover:not(:disabled) { background: var(--primary-dark); }
.btn--primary:active:not(:disabled) { background: var(--primary-darker); }

.btn--stroke {
  background: var(--bg-white-0);
  color: var(--text-strong-950);
  border-color: var(--stroke-soft-200);
  box-shadow: var(--shadow-button);
}
.btn--stroke:hover:not(:disabled) { background: var(--bg-weak-50); border-color: var(--stroke-sub-300); }

.btn--ghost { background: transparent; color: var(--text-sub-600); }
.btn--ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-strong-950); }

.btn--dark { background: var(--secondary-base); color: #fff; }
.btn--dark:hover:not(:disabled) { background: var(--secondary-dark); }

.btn--danger { background: var(--error-base); color: #fff; }
.btn--danger:hover:not(:disabled) { filter: brightness(0.94); }

.btn--danger-ghost { background: transparent; color: var(--error-base); border-color: var(--stroke-soft-200); }
.btn--danger-ghost:hover:not(:disabled) { background: var(--error-lighter); border-color: var(--error-light); }

.btn--sm { height: 32px; padding-inline: 12px; font-size: 13px; border-radius: var(--radius-8); }
.btn--lg { height: 48px; padding-inline: 22px; font-size: 16px; border-radius: var(--radius-12); }
.btn--block { width: 100%; }

.btn__spinner {
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--primary-base);
}
.link-arrow svg { transition: transform var(--duration-base) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ==========================================================================
   Surfaces
   ========================================================================== */

.card {
  background: var(--bg-white-0);
  border: 1px solid var(--stroke-soft-200);
  border-radius: var(--radius-16);
  padding: 24px;
}
.card--raised { box-shadow: var(--shadow-x-small); }
.card--pad-lg { padding: 32px; }
.card--pad-sm { padding: 16px; }

.feature-card {
  background: var(--bg-white-0);
  border: 1px solid var(--stroke-soft-200);
  border-radius: var(--radius-16);
  padding: 24px;
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.feature-card:hover {
  border-color: var(--stroke-sub-300);
  box-shadow: var(--shadow-small);
  transform: translateY(-2px);
}
.feature-card h3 { font-size: 18px; line-height: 24px; letter-spacing: -0.27px; margin-bottom: 8px; }
.feature-card p { font-size: 14px; line-height: 20px; letter-spacing: -0.084px; color: var(--text-sub-600); }

.feature-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-10);
  background: var(--primary-alpha-10);
  color: var(--primary-base);
  margin-bottom: 16px;
}
.feature-icon--neutral { background: var(--bg-weak-50); color: var(--text-strong-950); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding-inline: 8px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
}
.badge--neutral { background: var(--faded-lighter); color: var(--text-sub-600); }
.badge--info { background: var(--info-lighter); color: var(--info-base); }
.badge--success { background: var(--success-lighter); color: var(--success-base); }
.badge--warning { background: var(--warning-lighter); color: var(--warning-base); }
.badge--error { background: var(--error-lighter); color: var(--error-base); }
.badge--primary { background: var(--primary-alpha-10); color: var(--primary-base); }
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding-inline: 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--stroke-soft-200);
  background: var(--bg-white-0);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-sub-600);
  box-shadow: var(--shadow-button);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 14px; font-weight: 500; letter-spacing: -0.084px; color: var(--text-strong-950); }
.field__hint { font-size: 12px; line-height: 16px; color: var(--text-soft-400); }
.field__error { font-size: 12px; line-height: 16px; color: var(--error-base); }

.input, .select, .textarea {
  width: 100%;
  height: 40px;
  padding-inline: 12px;
  background: var(--bg-white-0);
  border: 1px solid var(--stroke-soft-200);
  border-radius: var(--radius-10);
  font-size: 14px;
  letter-spacing: -0.084px;
  color: var(--text-strong-950);
  box-shadow: var(--shadow-button);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.textarea { height: auto; min-height: 88px; padding-block: 10px; resize: vertical; line-height: 20px; }

.input::placeholder, .textarea::placeholder { color: var(--text-soft-400); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--stroke-sub-300); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--primary-base);
  box-shadow: 0 0 0 3px var(--primary-alpha-10);
}
.input[aria-invalid="true"] { border-color: var(--error-base); }

.select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.input--lg { height: 52px; font-size: 16px; border-radius: var(--radius-12); padding-inline: 16px; }

/* Hero / page tracking form */
.track-form {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: var(--bg-white-0);
  border: 1px solid var(--stroke-soft-200);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-small);
}
.track-form .input {
  border: none;
  box-shadow: none;
  background: transparent;
  height: 48px;
  font-size: 16px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.track-form .input:focus { box-shadow: none; }
.track-form .input::placeholder { text-transform: none; letter-spacing: -0.176px; }

@media (max-width: 560px) {
  .track-form { flex-direction: column; }
  .track-form .btn { width: 100%; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 88px 64px;
  background: var(--bg-white-0);
}
.hero::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 620px;
  background:
    radial-gradient(60% 60% at 45% 40%, var(--primary-alpha-16), transparent 70%),
    radial-gradient(45% 45% at 85% 15%, var(--secondary-alpha-10), transparent 70%);
  pointer-events: none;
}
.hero__inner { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero__copy > * + * { margin-top: 20px; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__trust { display: flex; gap: 20px; flex-wrap: wrap; padding-top: 8px; }
.hero__trust-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-sub-600); }
.hero__trust-item svg { color: var(--success-base); flex-shrink: 0; }

/* Photograph with a live shipment card floated over its lower-left corner. */
.hero__visual { position: relative; }

/* Kept near-square so the photo column stays level with the copy column
   instead of stretching the hero. */
.hero__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 540px;
  object-fit: cover;
  object-position: 60% center;
  border-radius: var(--radius-24);
  background: var(--bg-weak-50);
  box-shadow: var(--shadow-medium);
}

.hero__float {
  position: absolute;
  left: -28px;
  bottom: 32px;
  width: min(316px, calc(100% - 32px));
  padding: 16px;
  background: var(--bg-white-0);
  border: 1px solid var(--stroke-soft-200);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-large);
}

/* Once the hero stacks, the card sits inside the photo rather than beside it. */
@media (max-width: 1200px) {
  .hero__float { left: 16px; bottom: 16px; }
}

@media (max-width: 1000px) {
  .hero { padding-block: 56px 64px; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* A compact preview of the tracking result, used in the hero. */
.preview-card { background: var(--bg-white-0); border: 1px solid var(--stroke-soft-200); border-radius: var(--radius-16); overflow: hidden; }
.preview-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid var(--stroke-soft-200); }
.preview-card__body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }

.route { display: flex; align-items: center; gap: 12px; }
.route__point { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.route__point span { font-size: 11px; letter-spacing: 0.22px; text-transform: uppercase; color: var(--text-soft-400); }
.route__point strong { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route__line { flex: 1; height: 2px; background: var(--stroke-soft-200); border-radius: var(--radius-full); position: relative; min-width: 32px; }
.route__line::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--progress, 50%); background: var(--primary-base); border-radius: inherit; }

.progress { height: 6px; background: var(--bg-soft-200); border-radius: var(--radius-full); overflow: hidden; }
.progress__bar { height: 100%; width: 0; background: var(--primary-base); border-radius: inherit; transition: width 0.6s var(--ease); }
.progress__bar--success { background: var(--success-base); }
.progress__bar--warning { background: var(--warning-base); }
.progress__bar--error { background: var(--error-base); }

/* ==========================================================================
   Stats
   ========================================================================== */

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--stroke-soft-200); border: 1px solid var(--stroke-soft-200); border-radius: var(--radius-16); overflow: hidden; }
.stat { background: var(--bg-white-0); padding: 24px; }
.stat__value { font-size: 32px; line-height: 40px; font-weight: 500; letter-spacing: -0.16px; }
.stat__label { font-size: 13px; color: var(--text-sub-600); margin-top: 4px; }

@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   Steps
   ========================================================================== */

/* ==========================================================================
   Showcase tiles
   A row of square brand-purple frames, each holding a photo or a small mock
   interface, with the caption sitting outside and below the frame.
   ========================================================================== */

.showcase { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

.showcase__item { display: flex; flex-direction: column; gap: 14px; }

.showcase__frame {
  position: relative;
  aspect-ratio: 1 / 1.04;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  border-radius: var(--radius-20);
  overflow: hidden;
  background: linear-gradient(158deg, #d7c9ff 0%, #b095ff 48%, #9266ff 100%);
}

/* The faint square grid the tiles sit on. */
.showcase__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, #ffffff1f 1px, transparent 1px),
    linear-gradient(to bottom, #ffffff1f 1px, transparent 1px);
  background-size: 25% 25%;
  pointer-events: none;
}

.showcase__frame--center { justify-content: center; }

.showcase__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

/* Rounded white pill with a brand-coloured icon tile, as on the reference. */
.showcase__chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 7px;
  background: #fff;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-large);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: #171717;
  min-width: 0;
}
.showcase__chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.showcase__chip-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-10);
  background: var(--primary-base);
  color: #fff;
}

/* Small mock interface panel. */
.showcase__card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-12);
  padding: 14px;
  box-shadow: var(--shadow-large);
  color: #171717;
}
.showcase__card .detail__label { color: #a3a3a3; }
.showcase__card .route__point strong { color: #171717; }
.showcase__card .progress { background: #ebebeb; }

/* Panels that run past the frame edge and get clipped, so the tile reads as a
   window onto a larger interface rather than a centred sticker. */
.showcase__bleed { margin-right: -40px; }

.showcase__caption { font-size: 16px; font-weight: 500; letter-spacing: -0.176px; }
.showcase__note { font-size: 14px; line-height: 20px; color: var(--text-sub-600); margin-top: 4px; }

@media (max-width: 1000px) {
  .showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 560px) {
  .showcase { grid-template-columns: minmax(0, 1fr); }
  .showcase__frame { aspect-ratio: 4 / 3; }
}

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
.step { position: relative; padding-top: 52px; }
.step__num {
  position: absolute;
  top: 0; left: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--secondary-base);
  color: #fff;
  font-size: 14px; font-weight: 600;
}
.step h3 { font-size: 18px; line-height: 24px; margin-bottom: 8px; }
.step p { font-size: 14px; line-height: 20px; color: var(--text-sub-600); }

@media (max-width: 800px) { .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* ==========================================================================
   Accordion (FAQ)
   ========================================================================== */

.accordion { border-top: 1px solid var(--stroke-soft-200); }
.accordion__item { border-bottom: 1px solid var(--stroke-soft-200); }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.176px;
  color: var(--text-strong-950);
}
.accordion__icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--radius-6);
  background: var(--bg-weak-50);
  color: var(--text-sub-600);
  transition: transform var(--duration-base) var(--ease-out);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-base) var(--ease); }
.accordion__panel > div { overflow: hidden; }
.accordion__trigger[aria-expanded="true"] + .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel p { padding-bottom: 20px; font-size: 15px; line-height: 24px; color: var(--text-sub-600); max-width: 70ch; }

/* ==========================================================================
   CTA band
   ========================================================================== */

/* Deep-purple brand band. Fixed to the secondary colour in both themes so the
   CTA reads the same as the wordmark. */
.cta {
  background: var(--secondary-base);
  color: #fff;
  border-radius: var(--radius-24);
  padding: 56px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: auto -10% -60% -10%;
  height: 320px;
  background: radial-gradient(50% 60% at 50% 50%, #9266ff4d, transparent 70%);
  /* Decorative only - must not sit in front of the call-to-action buttons.
     Matches .hero::before and .showcase__frame::before. */
  pointer-events: none;
}
.cta > * { position: relative; }
.cta p { color: #ffffffb8; margin-top: 12px; }
.cta .btn--stroke {
  background: transparent;
  color: #fff;
  border-color: #ffffff3d;
  box-shadow: none;
}
.cta .btn--stroke:hover:not(:disabled) { background: #ffffff1a; border-color: #ffffff5c; }
.cta .row { justify-content: center; margin-top: 28px; }

@media (max-width: 700px) { .cta { padding: 40px 24px; } }

/* ==========================================================================
   Tracking result
   ========================================================================== */

.result { display: none; }
.result[data-visible="true"] { display: block; }

.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px 24px; }
.detail__label { font-size: 11px; letter-spacing: 0.22px; text-transform: uppercase; color: var(--text-soft-400); margin-bottom: 4px; }
.detail__value { font-size: 14px; line-height: 20px; color: var(--text-strong-950); word-break: break-word; }

.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 7px; width: 2px; background: var(--stroke-soft-200); }
.timeline__item { position: relative; padding-bottom: 24px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
  position: absolute;
  left: -28px; top: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg-white-0);
  border: 3px solid var(--stroke-sub-300);
}
.timeline__item:first-child .timeline__dot { border-color: var(--primary-base); box-shadow: 0 0 0 4px var(--primary-alpha-10); }
.timeline__title { font-size: 15px; font-weight: 500; }
.timeline__meta { font-size: 13px; color: var(--text-sub-600); margin-top: 2px; }
.timeline__note { font-size: 13px; line-height: 20px; color: var(--text-soft-400); margin-top: 4px; }

.empty-state { text-align: center; padding: 48px 24px; }
.empty-state__icon {
  width: 48px; height: 48px;
  margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: var(--radius-12);
  background: var(--bg-weak-50);
  color: var(--text-soft-400);
}

.alert {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-10);
  font-size: 14px;
  line-height: 20px;
}
.alert--error { background: var(--error-lighter); color: var(--error-base); }
.alert--success { background: var(--success-lighter); color: var(--success-base); }
.alert--info { background: var(--info-lighter); color: var(--info-base); }
.alert--warning { background: var(--warning-lighter); color: var(--warning-base); }
.alert svg { flex-shrink: 0; margin-top: 1px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { border-top: 1px solid var(--stroke-soft-200); background: var(--bg-weak-50); padding-block: 64px 32px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.footer-col h4 { font-size: 12px; letter-spacing: 0.48px; text-transform: uppercase; color: var(--text-soft-400); font-weight: 500; margin-bottom: 16px; }
.footer-col li + li { margin-top: 10px; }
.footer-col a { font-size: 14px; color: var(--text-sub-600); transition: color var(--duration-fast) var(--ease-out); }
.footer-col a:hover { color: var(--text-strong-950); }
.footer-about p { font-size: 14px; line-height: 20px; color: var(--text-sub-600); margin-top: 16px; max-width: 38ch; }
.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--stroke-soft-200);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-soft-400);
}

@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Print
   --------------------------------------------------------------------------
   Printing the tracking page should yield a clean record of the shipment, so
   everything except the result card is dropped: nav, footer, the search form
   and the explanatory sections are all noise on paper.
   ========================================================================== */

@media print {
  @page { size: A4; margin: 14mm; }

  html, body { background: #fff; }
  body { color: #000; font-size: 11pt; }

  .site-header, .site-footer, .no-print,
  .hero, .section--weak, .cta { display: none !important; }

  /* The result sits inside a section that otherwise pads it down the page. */
  main > section { padding: 0 !important; }
  .container { max-width: none !important; padding: 0 !important; }

  .card, .card--raised {
    border: 1px solid #d4d4d4 !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .card + .card { margin-top: 12px !important; }

  .badge { border: 1px solid #d4d4d4; }
  .timeline__item, .detail-grid > div { break-inside: avoid; }

  /* Progress bars print as empty boxes, so show the percentage as a filled
     rule rather than losing the information entirely. */
  .progress, .route__line { background: #e5e5e5 !important; }
  .progress__bar, .route__line::after { background: #525252 !important; }

  a[href]::after { content: ""; }

  /* Records when the customer took the copy, without cluttering the screen. */
  #track-result::after {
    content: "Printed " attr(data-printed-on) " · smarttcargo.com/track";
    display: block;
    margin-top: 10px;
    font-size: 9pt;
    color: #525252;
  }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.hide { display: none !important; }

/* Active nav item, driven by data-active on the <nav> (no JS required). */
.nav[data-active="home"] [data-nav="home"],
.nav[data-active="services"] [data-nav="services"],
.nav[data-active="track"] [data-nav="track"],
.nav[data-active="about"] [data-nav="about"],
.nav[data-active="contact"] [data-nav="contact"] {
  color: var(--text-strong-950);
  background: var(--bg-weak-50);
}

/* Contact page: form beside the details column, stacked on small screens. */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

/* Two-column blocks that should collapse together with the rest of the page. */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); gap: 32px; } }