/* ==========================================================================
   GhazTech Design System — Components
   Nav, buttons, cards, forms, footer, badges, star rating input.
   ========================================================================== */

/* ---- Glassmorphic Navigation ---- */
#mainNav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border-bottom: 1px solid var(--glass-border);
  transition: height var(--duration-base) var(--ease-premium),
    box-shadow var(--duration-base) var(--ease-premium);
}
#mainNav.is-scrolled {
  height: var(--nav-height-scrolled);
  box-shadow: var(--glass-shadow);
}

/* The nav is the one band that spans the whole window rather than sitting in
   the 1360px content column: the logo belongs in the top-left corner of the
   screen and Get a Quote in the top-right, with the links centring in the gap
   between them. Inside .container-wide the logo started 390px from the edge on
   a 1920px display, which reads as a floating strip rather than a header. */
.nav-inner {
  width: 100%;
  max-width: none;
  /* Tight to the corner, but never actually touching it. */
  padding-inline: clamp(1.1rem, 2.2vw, 2.25rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--text-heading);
}
/* The mark is the real logo artwork (transparent PNG), so it needs no
   background of its own — just a fixed height and a gentle lift on hover. */
.brand__mark {
  width: auto;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
  transition: transform var(--duration-base) var(--ease-premium);
}
.brand:hover .brand__mark {
  transform: rotate(-6deg) scale(1.06);
}
.brand__word {
  background: linear-gradient(100deg, var(--brand-primary-strong), var(--brand-primary) 55%, #21a7e8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.015em;
}
@supports not (background-clip: text) {
  .brand__word {
    color: var(--brand-primary-strong);
  }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav-links a {
  position: relative;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-body);
  padding-block: var(--space-2xs);
  transition: color var(--duration-fast) var(--ease-premium);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--brand-accent-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-premium);
}
.nav-links a:hover,
.nav-links a.is-active {
  color: var(--brand-primary-strong);
}
.nav-links a:hover::after,
.nav-links a.is-active::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: transparent;
  align-items: center;
  justify-content: center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  width: 18px;
  height: 2px;
  background: var(--text-heading);
  display: block;
  position: relative;
  transition: transform var(--duration-fast) var(--ease-premium), opacity var(--duration-fast);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle span::before {
  top: -6px;
}
.nav-toggle span::after {
  top: 6px;
}
.nav-toggle.is-open span {
  background: transparent;
}
.nav-toggle.is-open span::before {
  transform: rotate(45deg) translate(4px, 4px);
}
.nav-toggle.is-open span::after {
  transform: rotate(-45deg) translate(4px, -4px);
}

/* ---- Buttons ---- */
.btn-brand,
.btn-brand-outline,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.85rem 1.7rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-premium),
    box-shadow var(--duration-base) var(--ease-premium),
    background var(--duration-base) var(--ease-premium),
    color var(--duration-base) var(--ease-premium);
  will-change: transform;
}
.btn-brand {
  background: linear-gradient(135deg, var(--brand-accent), var(--brand-accent-strong));
  color: var(--color-ink-900);
  box-shadow: 0 12px 28px rgba(232, 115, 12, 0.35);
}
.btn-brand:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(232, 115, 12, 0.45);
  color: var(--color-ink-900);
}
.btn-brand:active {
  transform: translateY(-1px);
}
.btn-brand:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  background: var(--color-cream-200);
  color: var(--text-muted);
}

.btn-brand-outline {
  background: transparent;
  border-color: var(--brand-primary);
  color: var(--brand-primary-strong);
}
.btn-brand-outline:hover {
  background: var(--brand-primary);
  color: #fff;
  transform: translateY(-3px);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.5);
  color: var(--text-heading);
  border-color: var(--glass-border);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-3px);
}

.btn-block {
  display: flex;
  width: 100%;
  justify-content: center;
  padding-block: 0.95rem;
  font-size: 0.95rem;
}

/* Keyboard focus ring — visible for keyboard users, not on mouse click. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-blue-400);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Multi-state buttons (download triggers, form submits). The state classes
   are toggled in JS; only one label is ever visible at a time. */
.btn-label-default,
.btn-label-loading,
.btn-label-success {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.btn-label-default {
  display: inline-flex;
}
.is-loading .btn-label-default,
.is-success .btn-label-default {
  display: none;
}
.is-loading .btn-label-loading,
.is-success .btn-label-success {
  display: inline-flex;
}
.spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  opacity: 0.75;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
.check-pop {
  animation: checkPop var(--duration-base) var(--ease-premium);
}

/* ---- Glass / Feature cards ---- */
.feature-card {
  height: 100%;
  padding: var(--space-lg);
  transition: transform var(--duration-base) var(--ease-premium),
    box-shadow var(--duration-base) var(--ease-premium);
}
.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--glass-shadow-lift);
}
.feature-card__icon {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
  color: var(--brand-accent);
  font-size: 1.6rem;
  margin-bottom: var(--space-md);
  transition: transform var(--duration-base) var(--ease-premium);
}
.feature-card:hover .feature-card__icon {
  transform: scale(1.08) rotate(-4deg);
}
.feature-card h3 {
  margin-bottom: var(--space-2xs);
}
.feature-card p {
  color: var(--text-body);
  font-size: 0.92rem;
  margin-bottom: var(--space-sm);
}
.feature-card__list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.feature-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-body);
}
.feature-card__list .icon {
  color: var(--brand-accent-strong);
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.feature-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-sm);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--brand-primary-strong);
}
.feature-card__link .icon {
  transition: transform var(--duration-fast) var(--ease-premium);
}
.feature-card:hover .feature-card__link .icon {
  transform: translateX(4px);
}

/* ---- Portfolio cards ---- */
/* The category pill, shared by the portfolio cards, the case dialog, the
   downloads listing and the account role badge. The rest of the old
   .portfolio-card block was replaced by .pf-card further down. */
.portfolio-card__tag {
  display: inline-block;
  font-size: var(--fs-tiny);
  font-weight: 700;
  color: var(--brand-primary-strong);
  background: var(--color-blue-100);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-2xs);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.filter-chip {
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.5);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-body);
  transition: all var(--duration-fast) var(--ease-premium);
  cursor: pointer;
}
.filter-chip:hover {
  border-color: var(--brand-primary);
}
.filter-chip.is-active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

/* ---- Star rating input (Submit a Review form) ---- */
.star-input {
  display: inline-flex;
  gap: 0.3rem;
}
.star-input button {
  background: none;
  border: none;
  padding: 0.1rem;
  cursor: pointer;
  color: var(--border-soft);
  transition: transform var(--duration-fast) var(--ease-premium), color var(--duration-fast);
}
.star-input button .icon {
  width: 26px;
  height: 26px;
}
.star-input button.is-filled,
.star-input button:hover,
.star-input button:hover ~ button {
  color: var(--brand-accent-strong);
}
.star-input button:hover {
  transform: scale(1.15);
}
.star-input-wrapper.is-invalid .star-input button {
  color: var(--color-danger);
  opacity: 0.4;
}
.star-input-wrapper .form-error {
  margin-top: 0.6rem;
}

.sample-data-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-tiny);
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.5);
  border: 1px dashed var(--border-soft);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
}

/* ---- Forms (floating labels, validation states) ---- */
.form-field {
  position: relative;
  margin-bottom: var(--space-md);
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--field-font);
  line-height: var(--field-line-height);
  color: var(--text-heading);
  background: rgba(255, 255, 255, 0.72);
  border: var(--field-border) solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--field-pad-top) var(--field-pad-inline) var(--field-pad-bottom);
  transition: border-color var(--duration-fast) var(--ease-premium),
    box-shadow var(--duration-fast) var(--ease-premium),
    background var(--duration-fast) var(--ease-premium);
}
/* An exact height (not a minimum) so --field-height is the truth for
   everything positioned against these controls. */
.form-field input,
.form-field select {
  height: var(--field-height);
}
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  /* Room for the chevron drawn below, so long option text never collides. */
  padding-right: 2.75rem;
}
.form-field:has(select)::after {
  content: "";
  position: absolute;
  right: 1.15rem;
  top: calc(var(--field-height) / 2);
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

/* At rest the label sits exactly where the input's own text sits — same
   font, same line height, offset by the input's top padding. Floating it is
   then a single move up into that padding, measured from the input's top
   border rather than from any assumed field height, so it can never land on
   the border however the type scales. */
.form-field label {
  position: absolute;
  left: var(--field-pad-inline);
  top: var(--field-pad-top);
  font-size: var(--field-font);
  line-height: var(--field-line-height);
  color: var(--text-muted);
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--duration-fast) var(--ease-premium),
    color var(--duration-fast) var(--ease-premium);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--brand-primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(22, 58, 153, 0.12);
}

/* Rises from the text line to --field-float-gap below the top border. The
   shrunk line is --field-line * 0.75 tall, which still clears the padding. */
.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label,
.form-field textarea:focus + label,
.form-field textarea:not(:placeholder-shown) + label,
.form-field select:focus + label,
.form-field.has-value label {
  transform: translateY(calc(var(--field-float-gap) - var(--field-pad-top))) scale(0.75);
  color: var(--brand-primary-strong);
}
.form-help {
  display: block;
  font-size: var(--fs-tiny);
  color: var(--text-muted);
  margin-top: 0.4rem;
}
.form-error {
  display: none;
  font-size: var(--fs-tiny);
  color: var(--color-danger);
  margin-top: 0.4rem;
  align-items: center;
  gap: 0.3rem;
}
.form-field.is-invalid input,
.form-field.is-invalid textarea,
.form-field.is-invalid select {
  border-color: var(--color-danger);
  animation: shake 0.4s var(--ease-premium);
}
.form-field.is-invalid .form-error {
  display: flex;
}
.form-field.is-invalid .form-help {
  display: none;
}
.form-field.is-valid input,
.form-field.is-valid textarea,
.form-field.is-valid select {
  border-color: var(--color-success);
}

.form-card {
  padding: var(--space-lg);
}

/* Submit row: button plus the short note explaining what happens next.
   They sit side by side when there's room and stack cleanly when not. */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.1rem;
}
.form-actions__note {
  font-size: 0.8rem;
  color: var(--text-muted);
  max-width: 24rem;
}

/* ---- Auth (login / account) ----
   .auth-page itself is defined with the split layout further down, since
   its sizing is what makes that panel fit one screen. */
.auth-panel__title {
  font-size: 1.55rem;
  margin-bottom: 0.35rem;
}
.auth-panel__sub {
  color: var(--text-body);
  font-size: 0.92rem;
  margin-bottom: var(--space-lg);
}

/* Show/hide control inside a password field */
.password-toggle {
  position: absolute;
  right: 0.6rem;
  /* Centred on the input, not on the whole field — see --field-height. */
  top: calc(var(--field-height) / 2);
  transform: translateY(-50%);
  border: none;
  background: transparent;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-primary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-premium);
}
.password-toggle:hover {
  background: var(--color-blue-100);
}
.form-field:has(.password-toggle) input {
  padding-right: 4.75rem;
}

.auth-switch {
  text-align: center;
  margin-top: var(--space-md);
  font-size: 0.88rem;
  color: var(--text-body);
}
.auth-switch button {
  border: none;
  background: transparent;
  padding: 0.25rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brand-primary-strong);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-note {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: var(--space-md);
  font-size: var(--fs-tiny);
  color: var(--text-muted);
  line-height: 1.6;
}
.auth-note .icon {
  color: var(--brand-primary);
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.form-status.is-error {
  background: rgba(192, 68, 44, 0.1);
  color: var(--color-danger);
}

.form-status {
  display: none;
  align-items: center;
  gap: 0.6rem;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: rgba(75, 127, 82, 0.12);
  color: var(--color-success);
  font-weight: 600;
  font-size: 0.88rem;
  margin-top: var(--space-md);
}
.form-status.is-visible {
  display: flex;
}

/* ---- Download CTA banner ---- */
.download-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding: var(--space-lg);
}
.download-banner__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand-accent), var(--brand-accent-strong));
  color: var(--color-ink-900);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  flex-shrink: 0;
}
.download-banner__meta {
  font-size: var(--fs-tiny);
  color: var(--text-muted);
  margin-top: 0.3rem;
}

/* ---- Developer profile card ---- */
.dev-card {
  padding: var(--space-lg);
  height: 100%;
  transition: transform var(--duration-base) var(--ease-premium),
    box-shadow var(--duration-base) var(--ease-premium);
}
.dev-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--glass-shadow-lift);
}
.dev-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--brand-accent);
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
  margin-bottom: var(--space-md);
}
.dev-card__name {
  margin-bottom: 0.15rem;
}
.dev-card__role {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}
.dev-card__bio {
  font-size: 0.9rem;
  color: var(--text-body);
  margin-bottom: var(--space-md);
}
.dev-card__label {
  font-size: var(--fs-tiny);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.skill-badge-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.skill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand-primary-strong);
  background: var(--color-blue-100);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-pill);
}
.skill-badge .icon {
  width: 14px;
  height: 14px;
}

/* ---- Toast / snackbar ---- */
.toast-stack {
  position: fixed;
  bottom: calc(var(--space-lg) + 64px);
  right: var(--space-lg);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.toast {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.2rem;
  border-radius: var(--radius-md);
  background: var(--color-ink-900);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  box-shadow: var(--glass-shadow-lift);
  transform: translateY(20px);
  opacity: 0;
  transition: transform var(--duration-base) var(--ease-premium),
    opacity var(--duration-base) var(--ease-premium);
}
.toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.toast .icon {
  color: var(--brand-accent);
}

/* ---- Back to top ---- */
.back-to-top {
  position: fixed;
  right: var(--space-lg);
  bottom: var(--space-lg);
  z-index: 400;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--brand-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--glass-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--duration-base) var(--ease-premium),
    transform var(--duration-base) var(--ease-premium),
    visibility var(--duration-base);
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--brand-accent-strong);
}
.back-to-top .icon {
  transform: rotate(-90deg);
}

.footer-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.88rem;
  color: var(--text-body);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-premium), padding-left var(--duration-fast) var(--ease-premium);
}
.footer-link-btn:hover {
  color: var(--brand-primary-strong);
  padding-left: 4px;
}

/* ---- Footer ---- */
.site-footer {
  position: relative;
  padding-block: var(--space-2xl) var(--space-lg);
  background: linear-gradient(180deg, transparent, rgba(22, 58, 153, 0.06));
  border-top: 1px solid var(--border-soft);
}
.footer-brand {
  margin-bottom: var(--space-sm);
}
/* Full horizontal lockup — the footer has the width the tagline needs to
   stay legible, which the compact nav mark does not. */
.footer-logo {
  width: 232px;
  max-width: 78%;
  height: auto;
}
.footer-about {
  font-size: 0.88rem;
  max-width: 320px;
  margin-bottom: var(--space-md);
}
.footer-social {
  display: flex;
  gap: 0.6rem;
}
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-premium);
}
.footer-social a:hover {
  background: var(--brand-primary);
  color: #fff;
  transform: translateY(-3px);
}
.footer-col h5 {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-heading);
  margin-bottom: var(--space-md);
}
.footer-col ul li {
  margin-bottom: 0.7rem;
}
.footer-col ul a {
  font-size: 0.88rem;
  color: var(--text-body);
  transition: color var(--duration-fast) var(--ease-premium),
    padding-left var(--duration-fast) var(--ease-premium);
}
.footer-col ul a:hover {
  color: var(--brand-primary-strong);
  padding-left: 4px;
}
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.88rem;
}
.footer-contact .icon {
  color: var(--brand-accent-strong);
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-lg);
  margin-top: var(--space-lg);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}
.legal-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.legal-badges span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--border-soft);
  font-weight: 600;
}

.site-footer .divider-soft {
  margin: var(--space-lg) 0 0;
}

/* ---- Legal pages (Privacy Policy / Terms & Conditions) ----
   Long-form prose in a single readable column, reachable only from the
   footer — these pages are deliberately kept out of the main navigation. */
.legal-doc {
  padding: var(--space-xl) var(--space-lg);
}
/* Prose still wraps at a readable measure inside the wider panel — a legal
   clause running the full width of a desktop screen is unreadable. */
.legal-doc > * {
  max-width: 72ch;
}

/* Contents rail beside the document. */
.legal-toc__label {
  display: block;
  margin-bottom: 0.7rem;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.legal-toc a {
  position: relative;
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-body);
  transition: color var(--duration-fast) var(--ease-premium),
    background var(--duration-fast) var(--ease-premium);
}
.legal-toc a:hover {
  color: var(--brand-primary-strong);
  background: rgba(22, 58, 153, 0.05);
}
.legal-toc a.is-current {
  color: var(--brand-primary-strong);
  background: rgba(22, 58, 153, 0.08);
}
.legal-toc a.is-current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 3px;
  background: var(--brand-accent-strong);
}
.legal-doc h2 {
  scroll-margin-top: calc(var(--nav-height) + var(--space-md));
}
.legal-doc__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.8rem;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}
.legal-doc__meta .icon {
  width: 13px;
  height: 13px;
  color: var(--brand-accent-strong);
}
.legal-doc h2 {
  font-size: 1.3rem;
  margin-bottom: var(--space-2xs);
}
.legal-doc h2:not(:first-of-type) {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-soft-2);
}
.legal-doc p,
.legal-doc li {
  font-size: 0.93rem;
  color: var(--text-body);
}
.legal-doc ul {
  margin: 0 0 var(--space-sm);
  padding-left: 1.1rem;
  list-style: disc;
}
.legal-doc li {
  margin-bottom: 0.4rem;
}
.legal-doc a {
  color: var(--brand-primary-strong);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-doc p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   SERVICES PAGE
   ========================================================================== */

/* Two-column shell: a sticky index rail beside the service detail rows. */
.svc-layout {
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: var(--space-xl);
  align-items: start;
}

/* min-width:0 on both tracks: a grid item defaults to min-width:auto, which
   means it refuses to shrink below its content. The rail's link list scrolls
   horizontally on small screens, so without this the rail widens to fit every
   entry and pushes the whole layout past the viewport. */
.svc-layout > * {
  min-width: 0;
}

.svc-rail {
  position: sticky;
  top: calc(var(--nav-height-scrolled) + var(--space-md));
  padding: var(--space-sm);
}
.svc-rail__label {
  display: block;
  padding: 0 0.7rem;
  margin-bottom: 0.6rem;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.svc-rail ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.svc-rail a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-body);
  transition: color var(--duration-fast) var(--ease-premium),
    background var(--duration-fast) var(--ease-premium);
}
.svc-rail a .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity var(--duration-fast) var(--ease-premium);
}
.svc-rail a:hover {
  color: var(--brand-primary-strong);
  background: rgba(22, 58, 153, 0.05);
}
/* .is-current is set by js/servicesPage.js as each row scrolls into view. */
.svc-rail a.is-current {
  color: var(--brand-primary-strong);
  background: rgba(22, 58, 153, 0.08);
}
.svc-rail a.is-current .icon {
  opacity: 1;
  color: var(--brand-accent-strong);
}
.svc-rail a.is-current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 3px;
  background: var(--brand-accent-strong);
}

.svc-row {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  /* Offsets the sticky nav when an anchor link jumps here. */
  scroll-margin-top: calc(var(--nav-height) + var(--space-md));
}
.svc-row:last-child {
  margin-bottom: 0;
}
.svc-row__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: var(--space-sm);
}
.svc-num {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-accent-strong);
}
.svc-row h2 {
  font-size: 1.45rem;
  margin: 0;
}
.svc-row__lead {
  font-size: 0.95rem;
  color: var(--text-body);
  margin-bottom: var(--space-sm);
}
.svc-points {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.svc-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.87rem;
  color: var(--text-body);
}
.svc-points .icon {
  width: 14px;
  height: 14px;
  margin-top: 0.25rem;
  flex-shrink: 0;
  color: var(--brand-accent-strong);
}
/* The four channels the Digital Marketing line covers. A plain bullet list
   would bury them; these need to be scannable, because "do you do WhatsApp?"
   is the question the section exists to answer. */
.svc-channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.svc-channel {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  padding: 0.8rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft-2);
  background: rgba(255, 255, 255, 0.5);
}
.svc-channel__icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--color-blue-100);
  color: var(--brand-primary-strong);
}
.svc-channel__icon .icon {
  width: 17px;
  height: 17px;
}
.svc-channel b {
  display: block;
  font-size: 0.9rem;
  color: var(--text-heading);
  margin-bottom: 0.15rem;
}
.svc-channel p {
  font-size: 0.82rem;
  color: var(--text-body);
  margin: 0;
}

.svc-outcome {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--brand-accent);
  background: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
  color: var(--text-body);
}
.svc-outcome b {
  color: var(--text-heading);
}

/* Abstract visual per service — built from CSS, so there are no images to
   load and it recolours with the palette. */
.svc-visual {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(140deg, var(--color-blue-100), var(--color-cream-200) 55%, var(--color-sun-200));
}
.svc-visual::before,
.svc-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.svc-visual::before {
  width: 62%;
  height: 62%;
  top: -14%;
  right: -14%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.75), transparent 68%);
}
.svc-visual::after {
  width: 48%;
  height: 48%;
  bottom: -10%;
  left: -10%;
  background: radial-gradient(circle, rgba(22, 58, 153, 0.2), transparent 70%);
}
.svc-visual .icon {
  position: relative;
  width: 64px;
  height: 64px;
  color: var(--brand-primary-strong);
  filter: drop-shadow(0 10px 22px rgba(22, 58, 153, 0.25));
  transition: transform var(--duration-slow) var(--ease-premium);
}
.svc-row:hover .svc-visual .icon {
  transform: scale(1.1) rotate(-5deg);
}

/* ---- Scope & timeline estimator ---- */
.est {
  padding: var(--space-lg);
}
.est__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}
.est fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.est legend {
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
}
.est__services {
  display: grid;
  gap: 0.5rem;
}
.est-check {
  position: relative;
  display: block;
  cursor: pointer;
}
.est-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.est-check span {
  display: block;
  padding: 0.7rem 0.9rem 0.7rem 2.4rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.55);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-body);
  transition: border-color var(--duration-fast) var(--ease-premium),
    background var(--duration-fast) var(--ease-premium);
}
/* Tick box drawn with pseudo-elements so it follows the palette. */
.est-check span::before {
  content: "";
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1.5px solid var(--border-soft);
  background: #fff;
}
.est-check span::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 50%;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-62%) rotate(45deg) scale(0);
  transition: transform var(--duration-fast) var(--ease-premium);
}
.est-check input:checked + span {
  border-color: var(--brand-primary);
  background: rgba(22, 58, 153, 0.06);
  color: var(--brand-primary-strong);
}
.est-check input:checked + span::before {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
}
.est-check input:checked + span::after {
  transform: translateY(-62%) rotate(45deg) scale(1);
}
.est-check input:focus-visible + span {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.est__label {
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.est__headline {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: linear-gradient(140deg, var(--color-blue-100), var(--color-cream-200));
  margin-bottom: var(--space-md);
}
.est__headline strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--brand-primary-strong);
  margin: 0.2rem 0;
}
.est__headline small {
  font-size: var(--fs-tiny);
  color: var(--text-body);
}

.est__lines {
  list-style: none;
  margin: 0;
  padding: 0;
}
.est__lines li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border-soft-2);
}
.est__lines li:last-child {
  border-bottom: none;
}
.est__lines b {
  font-size: 0.88rem;
  color: var(--text-heading);
}
.est__lines small {
  font-size: var(--fs-tiny);
  color: var(--text-muted);
  white-space: nowrap;
}

.est__scope {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.est__scope li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-body);
}
.est__scope .icon {
  width: 14px;
  height: 14px;
  margin-top: 0.25rem;
  flex-shrink: 0;
  color: var(--brand-accent-strong);
}

.est__note {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: var(--space-md) 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--brand-accent);
  background: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-tiny);
  line-height: 1.6;
  color: var(--text-body);
}
.est__note .icon {
  width: 14px;
  height: 14px;
  margin-top: 0.15rem;
  flex-shrink: 0;
  color: var(--brand-accent-strong);
}

/* ---- Engagement models ---- */
.engagement {
  position: relative;
  height: 100%;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
}
.engagement__tag {
  align-self: flex-start;
  padding: 0.25rem 0.7rem;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: var(--fs-tiny);
  font-weight: 700;
  color: var(--brand-primary-strong);
  background: var(--color-blue-100);
}
.engagement h3 {
  font-size: 1.08rem;
  margin-bottom: var(--space-3xs);
}
.engagement p {
  font-size: 0.87rem;
  color: var(--text-body);
  flex: 1;
}
.engagement__best {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-soft-2);
  font-size: 0.8rem;
  color: var(--text-muted);
}
.engagement__best b {
  color: var(--text-heading);
}

/* ==========================================================================
   PORTFOLIO PAGE
   ========================================================================== */

.pf-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.pf-count {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.pf-count b {
  color: var(--brand-primary-strong);
}
.filter-chip__n {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.32rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  background: rgba(22, 58, 153, 0.1);
  color: var(--brand-primary-strong);
}
.filter-chip.is-active .filter-chip__n {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* The card is an <article> (it contains a heading, which a <button> may not).
   The single button inside it stretches over the whole card via a pseudo
   element, so the entire surface is clickable while only one thing is
   focusable — the standard "stretched link" pattern. */
.pf-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-base) var(--ease-premium),
    box-shadow var(--duration-base) var(--ease-premium);
}
.pf-card:hover,
.pf-card:focus-within {
  transform: translateY(-8px);
  box-shadow: var(--glass-shadow-lift);
}
.pf-card:focus-within {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
}
.pf-card__media {
  position: relative;
  height: 140px;
  margin: var(--space-sm) var(--space-sm) 0;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--brand-primary-strong);
  background: linear-gradient(135deg, var(--color-blue-100), var(--color-sun-200));
}
/* A slow sheen that sweeps the artwork on hover. */
.pf-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 900ms var(--ease-premium);
}
.pf-card:hover .pf-card__media::after {
  transform: translateX(120%);
}
.pf-card__media .icon {
  width: 40px;
  height: 40px;
  transition: transform var(--duration-base) var(--ease-premium);
}
.pf-card:hover .pf-card__media .icon {
  transform: scale(1.12);
}
.pf-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pf-card__body h3 {
  font-size: 1.05rem;
  margin-bottom: var(--space-3xs);
}
.pf-card__body p {
  font-size: 0.86rem;
  color: var(--text-body);
  margin-bottom: var(--space-sm);
  flex: 1;
}
.pf-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-soft-2);
}
.pf-card__result {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand-accent-strong);
}
.pf-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand-primary-strong);
  cursor: pointer;
}
/* Stretches the click target across the whole card. */
.pf-card__more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.pf-card__more:focus-visible {
  outline: none;
}
.pf-card__more .icon {
  width: 13px;
  height: 13px;
  transition: transform var(--duration-fast) var(--ease-premium);
}
.pf-card:hover .pf-card__more .icon {
  transform: translateX(3px);
}

.pf-empty {
  padding: var(--space-xl);
  text-align: center;
}

/* ---- Case study dialog (native <dialog>) ---- */
.case-dialog {
  width: min(620px, calc(100vw - 2rem));
  max-height: min(85vh, 780px);
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--color-cream-50);
  box-shadow: var(--glass-shadow-lift);
  color: var(--text-body);
  overflow: hidden;
}
.case-dialog::backdrop {
  background: rgba(13, 39, 100, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.case-dialog[open] {
  animation: dialogIn var(--duration-base) var(--ease-premium);
}
.case-dialog__head {
  position: relative;
  padding: var(--space-md) var(--space-md) var(--space-sm);
  border-bottom: 1px solid var(--border-soft-2);
}
.case-dialog__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  color: var(--text-heading);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-premium);
}
.case-dialog__close:hover {
  background: var(--color-blue-100);
}
.case-dialog__close .icon {
  width: 14px;
  height: 14px;
}
.case-dialog h2 {
  font-size: 1.25rem;
  margin: 0.5rem 2.5rem 0 0;
}
.case-dialog__body {
  padding: var(--space-md);
  overflow-y: auto;
  max-height: calc(min(85vh, 780px) - 150px);
}
.case-dialog__body h3 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--space-md) 0 var(--space-3xs);
}
.case-dialog__body h3:first-child {
  margin-top: 0;
}
.case-dialog__body p {
  font-size: 0.9rem;
  margin-bottom: 0;
}
.case-dialog__result {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: var(--space-md);
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--brand-accent);
  background: var(--color-cream-100);
  font-size: 0.88rem;
}
.case-dialog__result .icon {
  width: 16px;
  height: 16px;
  margin-top: 0.15rem;
  flex-shrink: 0;
  color: var(--brand-accent-strong);
}

@keyframes dialogIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Absolute placement scattered these three at unrelated offsets. They are a
   left-aligned stack now: each one starts on the same edge, and a small
   indent step gives the staggered look without breaking the alignment. */
/* ==========================================================================
   SPLIT SIGN-IN
   Two halves that trade space. The active one carries the form; the other
   explains what that account type gives you. Only one form exists — it is
   moved between the sides, so nothing typed is lost when they swap.
   ========================================================================== */

/* The page holds one screenful: nav, then the split filling what is left.
   The footer sits below it for anyone who scrolls, but nothing essential
   does. dvh rather than vh so a phone's collapsing address bar does not
   leave the panel taller than the window. */
/* #mainNav is sticky, so it already takes its height out of the flow — this
   box only needs what is left, not the whole viewport. Subtracting the nav
   twice is what pushed the panel below the fold. */
.auth-page {
  display: flex;
  align-items: center;
  /* When the panel is taller than the viewport, plain `center` pushes its top
     edge above the scroll origin where it can never be reached. `safe` falls
     back to start in exactly that case. */
  align-items: safe center;
  min-height: calc(100vh - var(--nav-height));
  min-height: calc(100dvh - var(--nav-height));
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.auth-page > .container-wide {
  width: 100%;
}

.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  /* Narrower than the page container — a sign-in form spread across a wide
     monitor reads as an empty page with a box in it. */
  max-width: 960px;
  margin-inline: auto;
  /* min-height, not height: on a tall screen the panel fills the viewport, and
     on a short one it grows past it and the window's own scrollbar takes over.
     A fixed height would force the form to scroll *inside* the box. */
  min-height: min(620px, calc(100dvh - var(--nav-height) - var(--space-md) * 2));
  /* Deliberately unhurried — this is the slowest transition on the site, and
     it should read as a considered reveal rather than a snap. */
  transition: grid-template-columns 820ms var(--ease-premium);
}

.auth-side {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  /* Not a scroll container — the grid row is sized by this content, so there
     is nothing to scroll. It only clips the drifting glow behind the panel. */
  overflow: hidden;
  transition: background var(--duration-slow) var(--ease-premium);
}
.auth-side + .auth-side {
  border-left: 1px solid var(--border-soft);
}
.auth-side:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -4px;
}

/* Both halves are the same warm paper wash — neither is a dark slab. They
   are told apart by a faint tint and by their accent colour, not by one
   being inverted. */
.auth-side {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.78), rgba(243, 247, 253, 0.55));
}
.auth-side[data-side="developer"] {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.8), rgba(232, 240, 251, 0.6));
}
.auth-side[data-side="customer"] {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.82), rgba(255, 239, 222, 0.42));
}

/* A very slow drifting glow behind each panel — kept faint, because on a
   light surface it only needs to suggest depth, not tint the page. */
.auth-side::before {
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;
  animation: authDrift 24s var(--ease-soft) infinite alternate;
}
.auth-side[data-side="developer"]::before {
  background:
    radial-gradient(40% 32% at 22% 18%, rgba(79, 127, 230, 0.16), transparent 62%),
    radial-gradient(44% 36% at 78% 82%, rgba(22, 58, 153, 0.12), transparent 66%);
}
.auth-side[data-side="customer"]::before {
  background:
    radial-gradient(40% 32% at 78% 18%, rgba(255, 154, 61, 0.16), transparent 62%),
    radial-gradient(44% 36% at 22% 82%, rgba(255, 190, 122, 0.14), transparent 66%);
  animation-direction: alternate-reverse;
}
.auth-side > * {
  position: relative;
}

@keyframes authDrift {
  from {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }
  to {
    transform: translate3d(2%, 2%, 0) scale(1.08);
  }
}
/* The one thing that still separates them: each side owns an accent. */
.auth-side[data-side="developer"] .auth-side__icon {
  background: var(--color-blue-100);
  color: var(--brand-primary-strong);
}
.auth-side[data-side="customer"] .auth-side__icon {
  background: var(--color-sun-200);
  color: var(--brand-accent-strong);
}

/* The active side takes the room; the resting one becomes a narrow rail. */
.auth-split[data-active="developer"] {
  grid-template-columns: 1.55fr 1fr;
}
.auth-split[data-active="customer"] {
  grid-template-columns: 1fr 1.55fr;
}
.auth-split {
  transition: grid-template-columns var(--duration-slow) var(--ease-premium);
}

.auth-side__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
}
.auth-side__icon .icon {
  width: 20px;
  height: 20px;
}
.auth-side__eyebrow {
  display: block;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.auth-side[data-side="developer"] .auth-side__eyebrow {
  color: var(--brand-primary);
}
.auth-side[data-side="customer"] .auth-side__eyebrow {
  color: var(--brand-accent-strong);
}
.auth-side__head h2 {
  font-size: 1.35rem;
  margin-bottom: var(--space-2xs);
}
.auth-side__teaser {
  font-size: 0.88rem;
  color: var(--text-body);
  margin-bottom: var(--space-sm);
}
.auth-side__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-tiny);
  font-weight: 700;
  color: var(--text-muted);
}
.auth-side__cue .icon {
  width: 12px;
  height: 12px;
  transition: transform var(--duration-fast) var(--ease-premium);
}
.auth-side:hover .auth-side__cue .icon {
  transform: translateX(3px);
}

/* The head collapses away on the side holding the form — the form has its
   own heading, and repeating it wastes the space we just gave it. */
.auth-side.is-active .auth-side__head {
  display: none;
}
.auth-side.is-active {
  cursor: default;
}
.auth-side__slot:empty {
  display: none;
}

/* With the head hidden, the form is the only thing in the active side — sit it
   in the middle of the column and cap its measure so it stays a form rather
   than stretching across the whole half. */
.auth-side.is-active {
  justify-content: center;
}
.auth-side.is-active .auth-side__slot {
  width: 100%;
  max-width: 370px;
  margin-inline: auto;
}

/* Tighter than the site default. Login is a short, dense form; the standard
   rhythm pushed it past a 720px-tall window and made the box scroll. */
.auth-stage .auth-panel__sub {
  margin-bottom: var(--space-md);
}
.auth-stage .form-field {
  margin-bottom: var(--space-sm);
}
.auth-stage .auth-divider {
  margin: var(--space-sm) 0;
}
.auth-stage .auth-switch,
.auth-stage .auth-note {
  margin-top: var(--space-sm);
}

/* ---- The explanation shown on the resting side ---- */
.auth-why {
  margin-top: var(--space-md);
}
.auth-why__label {
  display: block;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
}
.auth-why ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.auth-why li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-body);
}
.auth-why .icon {
  width: 14px;
  height: 14px;
  margin-top: 0.2rem;
  flex-shrink: 0;
  color: var(--brand-accent-strong);
}
.auth-side[data-side="developer"] .auth-why .icon {
  color: var(--brand-primary);
}

/* ---- Entrance ----
   Content arrives in sequence rather than all at once. `backwards` holds
   each element at its starting state during its own delay, so nothing
   flashes in place before its turn. */
@keyframes authRise {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.auth-stage > * {
  animation: authRise 640ms var(--ease-premium) backwards;
}
.auth-stage > *:nth-child(1) { animation-delay: 160ms; }
.auth-stage > *:nth-child(2) { animation-delay: 220ms; }
.auth-stage > *:nth-child(3) { animation-delay: 300ms; }
.auth-stage > *:nth-child(4) { animation-delay: 360ms; }
.auth-stage > *:nth-child(5) { animation-delay: 420ms; }
.auth-stage > *:nth-child(6) { animation-delay: 480ms; }
.auth-stage > *:nth-child(7) { animation-delay: 540ms; }

.auth-why__label {
  animation: authRise 600ms var(--ease-premium) 200ms backwards;
}
.auth-why li {
  animation: authRise 600ms var(--ease-premium) backwards;
}
.auth-why li:nth-child(1) { animation-delay: 300ms; }
.auth-why li:nth-child(2) { animation-delay: 380ms; }
.auth-why li:nth-child(3) { animation-delay: 460ms; }
.auth-why li:nth-child(4) { animation-delay: 540ms; }

/* The resting half lifts slightly under the cursor, so it reads as
   something you can open before you commit to opening it. */
.auth-side:not(.is-active) .auth-side__head {
  transition: transform var(--duration-slow) var(--ease-premium);
}
.auth-side:not(.is-active):hover .auth-side__head {
  transform: translateY(-4px);
}
.auth-side__icon {
  transition: transform var(--duration-slow) var(--ease-premium),
    box-shadow var(--duration-slow) var(--ease-premium);
}
.auth-side:not(.is-active):hover .auth-side__icon {
  transform: scale(1.08) rotate(-5deg);
  box-shadow: 0 10px 26px rgba(22, 58, 153, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .auth-split,
  .auth-side,
  .auth-side__head,
  .auth-side__icon {
    transition: none !important;
  }
  .auth-stage > *,
  .auth-why__label,
  .auth-why li,
  .auth-side[data-side="developer"]::before {
    animation: none !important;
  }
}
/* Hidden until loginPage.js has moved it into a side, so it never flashes
   at the bottom of the page on a slow load. */
.auth-stage:not(.is-placed) {
  display: none;
}

/* ---- Google sign-in ---- */
.btn-google {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.8rem 1.2rem;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-heading);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-premium),
    box-shadow var(--duration-fast) var(--ease-premium),
    transform var(--duration-fast) var(--ease-premium);
}
.btn-google:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 6px 18px rgba(22, 58, 153, 0.12);
}
.btn-google:active {
  transform: translateY(1px);
}
.btn-google:disabled {
  opacity: 0.65;
  cursor: default;
}
.btn-google__mark {
  flex-shrink: 0;
}
/* Hidden while the popup is open, so the spinner label stands alone. */
.btn-google.is-loading .btn-google__mark {
  display: none;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: var(--space-md) 0;
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}

/* ==========================================================================
   DOWNLOADS — pre-release status
   A disabled button reads as something broken. A status line reads as work
   in progress, which is what these actually are until the first build ships.
   ========================================================================== */

.release-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-sm);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-primary-strong);
}
.release-status__dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand-accent-strong);
  animation: chipPulse 2.4s var(--ease-soft) infinite;
}

.release-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg);
}
.release-note__text {
  flex: 1;
  min-width: 260px;
}
.release-note h2 {
  font-size: 1.2rem;
  margin-bottom: var(--space-3xs);
}
.release-note p {
  font-size: 0.9rem;
  color: var(--text-body);
  margin-bottom: 0;
}

/* ==========================================================================
   ACCOUNT PAGE
   ========================================================================== */

/* Profile summary in the sticky aside. */
.account-card {
  text-align: center;
}
.account-card h1 {
  font-size: 1.15rem;
  margin: var(--space-sm) 0 0.4rem;
}
.account-card .account-avatar {
  margin-inline: auto;
}
.account-card .portfolio-card__tag {
  margin-bottom: var(--space-md);
}
.account-card .feature-card__link {
  justify-content: center;
  width: 100%;
  margin-top: 0;
}

.account-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.account-facts li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-size: 0.82rem;
  color: var(--text-body);
  word-break: break-word;
}
.account-facts li[hidden] {
  display: none;
}
.account-facts .icon {
  width: 13px;
  height: 13px;
  margin-top: 0.2rem;
  flex-shrink: 0;
  color: var(--brand-primary);
}

.account-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: var(--space-sm) 0 0;
  padding: 0;
}
.account-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  font-size: var(--fs-tiny);
  font-weight: 600;
  color: var(--brand-primary-strong);
  background: rgba(255, 255, 255, 0.5);
}
.account-links a:hover {
  border-color: var(--brand-primary);
}

.account-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: var(--space-sm);
}

.account-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}
.account-avatar {
  position: relative;
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--brand-accent);
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
  box-shadow: 0 0 0 4px var(--surface-page), 0 10px 26px rgba(22, 58, 153, 0.22);
}
.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-head__id {
  flex: 1;
  min-width: 200px;
}
.account-head__id h1 {
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
}
.account-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.account-head__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.account-head__meta .icon {
  width: 13px;
  height: 13px;
  color: var(--brand-primary);
}

/* ---- Metric tiles ---- */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.metric {
  padding: var(--space-md);
  text-align: left;
}
.metric__label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.45rem;
}
.metric__label .icon {
  width: 13px;
  height: 13px;
  color: var(--brand-accent-strong);
}
.metric__value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--brand-primary-strong);
}
/* An em dash where a figure does not exist yet reads as "nothing recorded",
   where a 0 would read as a measured result. */
.metric__value.is-empty {
  color: var(--text-muted);
  opacity: 0.55;
}
.metric__note {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}

/* ---- Activity feed ---- */
.panel {
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.panel__head h2 {
  font-size: 1.15rem;
  margin: 0;
}

.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.activity-item {
  position: relative;
  padding: 0 0 var(--space-md) 2.4rem;
}
.activity-item:last-child {
  padding-bottom: 0;
}
.activity-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 0.72rem;
  top: 1.5rem;
  bottom: 0;
  width: 2px;
  background: var(--border-soft);
}
.activity-item__dot {
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-accent);
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
}
.activity-item__dot .icon {
  width: 12px;
  height: 12px;
}
.activity-item h3 {
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}
.activity-item time {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--fs-tiny);
  font-weight: 600;
  color: var(--brand-accent-strong);
}
.activity-item p {
  font-size: 0.86rem;
  color: var(--text-body);
  margin: 0;
}

.empty-note {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-soft);
  background: rgba(255, 255, 255, 0.4);
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: center;
}

.panel__hint {
  font-size: var(--fs-tiny);
  font-weight: 600;
  color: var(--text-muted);
}

/* ---- Record lists (orders, tasks) ---- */
.record-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.record {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-soft-2);
}
.record:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.record:first-child {
  padding-top: 0;
}
.record__main {
  flex: 1;
  min-width: 220px;
}
.record__main h3 {
  font-size: 1rem;
  margin: 0.3rem 0 0;
}
.record__main p {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--text-body);
}
.record__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.record__meta b {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--brand-primary-strong);
}
.record__meta small {
  font-size: var(--fs-tiny);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Status pill. Colour carries meaning, so each state also has its own
   wording — colour alone would fail anyone who cannot distinguish them. */
.record__status {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--color-blue-100);
  color: var(--brand-primary-strong);
}
.record__status--in_progress,
.record__status--claimed {
  background: var(--color-sun-200);
  color: var(--brand-accent-strong);
}
.record__status--delivered,
.record__status--done {
  background: rgba(47, 143, 91, 0.16);
  color: var(--color-success);
}
.record__status--cancelled {
  background: rgba(192, 68, 44, 0.14);
  color: var(--color-danger);
}
.record__status--available {
  background: rgba(22, 58, 153, 0.1);
  color: var(--brand-primary-strong);
}

.btn-sm {
  padding: 0.45rem 0.9rem;
  font-size: 0.78rem;
  min-height: 0;
}

/* ---- Log out confirmation ---- */
.logout-dialog {
  width: min(420px, calc(100vw - 2rem));
}
.logout-dialog__body {
  padding: var(--space-lg);
  text-align: center;
}
.logout-dialog__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto var(--space-sm);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-accent);
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
}
.logout-dialog__icon .icon {
  width: 22px;
  height: 22px;
}
.logout-dialog h2 {
  font-size: 1.2rem;
  margin-bottom: var(--space-2xs);
}
.logout-dialog p {
  font-size: 0.9rem;
  color: var(--text-body);
  margin-bottom: var(--space-md);
}
.logout-dialog__actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   WORKSPACE LAYOUT
   Shared by the profile setup, the account dashboard and the legal pages:
   a sticky aside beside a main column, across the full container width
   rather than a narrow strip down the middle.
   ========================================================================== */

.workspace {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: var(--space-lg);
  align-items: start;
}
.workspace > * {
  min-width: 0;
}
.workspace__aside {
  position: sticky;
  top: calc(var(--nav-height-scrolled) + var(--space-md));
  padding: var(--space-md);
}

/* Two-column field grid inside a form section. */
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--space-md);
}
.field-grid > .form-field {
  min-width: 0;
}
.field-grid__full {
  grid-column: 1 / -1;
}

.form-section {
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}
.form-section__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-soft-2);
}
.form-section__n {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
}
.form-section__head h2 {
  font-size: 1.1rem;
  margin: 0;
}
.form-section__head p {
  margin: 0.1rem 0 0;
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}

/* ---- Role confirmation banner ----
   The account type was chosen at sign-in; this states which form you are
   filling rather than asking the same question a second time. */
.role-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: rgba(22, 58, 153, 0.05);
}
.role-banner__icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-accent);
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
}
.role-banner__icon .icon {
  width: 16px;
  height: 16px;
}
.role-banner b {
  display: block;
  font-size: 0.9rem;
  color: var(--text-heading);
}
.role-banner small {
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}
.role-banner a {
  margin-left: auto;
  font-size: var(--fs-tiny);
  font-weight: 700;
  color: var(--brand-primary-strong);
  white-space: nowrap;
}

/* ---- File upload field ----
   The native control cannot be styled, so it is visually hidden and the
   label becomes the drop zone. The label still wraps the input, so clicking
   it and tabbing to it both behave exactly as the native control does. */
.file-field {
  margin-bottom: var(--space-md);
}
.file-field__label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-heading);
}
.file-field__label .req {
  color: var(--color-danger);
}
.file-drop {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--border-soft);
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-premium),
    background var(--duration-fast) var(--ease-premium);
}
.file-drop:hover,
.file-drop.is-dragging {
  border-color: var(--brand-primary);
  background: rgba(22, 58, 153, 0.05);
}
.file-drop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.file-drop:focus-within {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
.file-drop__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary-strong);
  background: var(--color-blue-100);
}
.file-drop__icon .icon {
  width: 17px;
  height: 17px;
}
.file-drop__text {
  flex: 1;
  min-width: 0;
}
.file-drop__text b {
  display: block;
  font-size: 0.88rem;
  color: var(--text-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-drop__text small {
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}
.file-field.is-selected .file-drop {
  border-style: solid;
  border-color: rgba(47, 143, 91, 0.5);
  background: rgba(47, 143, 91, 0.06);
}
.file-field.is-selected .file-drop__icon {
  color: var(--color-success);
  background: rgba(47, 143, 91, 0.14);
}
.file-field.is-invalid .file-drop {
  border-color: var(--color-danger);
  border-style: solid;
}
.file-field .form-error {
  display: none;
}
.file-field.is-invalid .form-error {
  display: block;
}

/* Preview thumbnail for an image upload. */
.file-preview {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--glass-border);
}

/* ---- Segmented choice (verification type) ---- */
.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-sm);
}
.choice {
  position: relative;
  flex: 1 1 150px;
}
.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice span {
  display: block;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.55);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-body);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-premium),
    background var(--duration-fast) var(--ease-premium),
    color var(--duration-fast) var(--ease-premium);
}
.choice input:checked + span {
  border-color: var(--brand-primary);
  background: rgba(22, 58, 153, 0.07);
  color: var(--brand-primary-strong);
}
.choice input:focus-visible + span {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* ---- Skill / tag input ---- */
.tag-input {
  padding: 0.6rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.72);
}
.tag-input__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.tag-input__list:empty {
  display: none;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand-primary-strong);
  background: var(--color-blue-100);
}
.tag button {
  border: none;
  background: none;
  padding: 0;
  line-height: 1;
  font-size: 1rem;
  color: var(--brand-primary-strong);
  cursor: pointer;
  opacity: 0.6;
}
.tag button:hover {
  opacity: 1;
}
.tag-input input {
  width: 100%;
  border: none;
  background: none;
  padding: 0.3rem 0.2rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-heading);
}
.tag-input input:focus {
  outline: none;
}
.tag-input__hint {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}

/* ==========================================================================
   PROFILE COMPLETION
   ========================================================================== */

.setup-card {
  padding: var(--space-lg);
}

/* Vertical in the sticky aside, so it reads as a checklist of the sections
   below rather than a cramped horizontal strip. */
.setup-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}
.setup-steps__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}
/* Only the FIRST span is the numbered bubble — the second holds the label,
   which the role controller rewrites, and must stay plain text. */
.setup-steps__item > span:first-child {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--border-soft);
  color: var(--text-muted);
}
.setup-steps__item.is-done > span:first-child,
.setup-steps__item.is-current > span:first-child {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
  color: #fff;
}
.setup-steps__item.is-current {
  color: var(--brand-primary-strong);
}

.setup-password {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-soft);
  background: rgba(255, 255, 255, 0.4);
}
.setup-password__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.setup-password__head b {
  display: block;
  font-size: 0.92rem;
  color: var(--text-heading);
}
.setup-password__head small {
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}

/* ---- Developer photo control ---- */
.photo-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-sm);
}
.photo-editor .form-field {
  flex: 1;
  min-width: 220px;
  margin-bottom: 0;
}
.photo-editor .btn-brand-outline {
  flex-shrink: 0;
  height: var(--field-height);
}

/* ---- Password strength meter ---- */
.strength {
  margin-top: 0.6rem;
}
.strength__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.strength__track i {
  height: 4px;
  border-radius: 3px;
  background: var(--border-soft);
  transition: background var(--duration-base) var(--ease-premium);
}
.strength__label {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--fs-tiny);
  font-weight: 600;
  color: var(--text-muted);
}
.strength[data-score="1"] .strength__track i:nth-child(-n + 1),
.strength[data-score="2"] .strength__track i:nth-child(-n + 2),
.strength[data-score="3"] .strength__track i:nth-child(-n + 3),
.strength[data-score="4"] .strength__track i {
  background: var(--brand-accent-strong);
}
.strength[data-score="3"] .strength__track i:nth-child(-n + 3),
.strength[data-score="4"] .strength__track i {
  background: var(--color-success);
}

/* ---- Caps Lock hint ---- */
.caps-hint {
  display: none;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: var(--fs-tiny);
  font-weight: 600;
  color: var(--brand-accent-strong);
}
.caps-hint.is-visible {
  display: flex;
}
.caps-hint .icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Valid-field tick, shown once a field passes validation. */
.form-field__ok {
  position: absolute;
  top: calc(var(--field-height) / 2);
  right: 1rem;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: none;
  color: var(--color-success);
}
/* checkPop sets `transform: scale()` alone, which would wipe out the
   translateY that centres this tick — so it gets its own keyframes. */
.form-field.is-valid .form-field__ok {
  display: block;
  animation: checkPopCentered var(--duration-base) var(--ease-premium);
}
.form-field.is-valid input {
  border-color: rgba(47, 143, 91, 0.5);
}
/* The password field deliberately has no tick: the Show/Hide button already
   occupies that corner, and the strength meter below says more about the
   password than a checkmark would. */

/* ==========================================================================
   ABOUT PAGE COMPONENTS
   ========================================================================== */

/* ---- Pull quote ---- */
.pull-quote {
  padding: var(--space-md);
  border-left: 3px solid var(--brand-accent-strong);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.pull-quote .icon-fill {
  width: 26px;
  height: 26px;
  color: var(--brand-accent);
}
.pull-quote p {
  margin: 0.6rem 0 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--brand-primary-strong);
}

/* ---- Founder card ---- */
.founder-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.founder-avatar {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand-accent);
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
}
.founder-head h3 {
  margin-bottom: 0.1rem;
}
.founder-head p {
  margin: 0;
  font-size: 0.83rem;
  color: var(--text-muted);
}

.fact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fact-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border-soft-2);
}
.fact-list li:last-child {
  border-bottom: none;
}
.fact-list dt,
.fact-list .fact-key {
  color: var(--text-muted);
}
.fact-list .fact-val {
  font-weight: 600;
  color: var(--text-heading);
  text-align: right;
}
.fact-list .fact-val a {
  color: var(--brand-primary-strong);
}

/* ---- Mission / Vision pair ---- */
.mv-card {
  height: 100%;
  padding: var(--space-md);
}
.mv-card__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
  color: var(--color-white);
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
}
.mv-card__icon .icon {
  width: 22px;
  height: 22px;
}
.mv-card p:last-child {
  margin-bottom: 0;
}

/* ---- Principles ---- */
.principle {
  position: relative;
  height: 100%;
  padding: var(--space-md);
  overflow: hidden;
}
/* Oversized ghost numeral, clipped by the card — gives the grid a rhythm
   without adding another icon to an already icon-heavy page. */
.principle__n {
  position: absolute;
  top: -0.35em;
  right: 0.1em;
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--brand-primary);
  opacity: 0.07;
  pointer-events: none;
}
.principle h3 {
  position: relative;
  font-size: 1.05rem;
  margin-bottom: var(--space-3xs);
}
.principle p {
  position: relative;
  font-size: 0.88rem;
  color: var(--text-body);
  margin-bottom: 0;
}

/* ---- Vertical milestone timeline ---- */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  max-width: 720px;
  margin-inline: auto;
}
.timeline__item {
  position: relative;
  padding: 0 0 var(--space-lg) 3.25rem;
}
.timeline__item:last-child {
  padding-bottom: 0;
}
/* The spine runs from each marker down to the next one, so the last item
   has no trailing stub hanging below it. */
.timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.06rem;
  top: 2.25rem;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-primary), var(--border-soft));
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 700ms var(--ease-premium) 200ms;
}
.timeline__item.is-visible:not(:last-child)::before {
  transform: scaleY(1);
}
.timeline__marker {
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-accent);
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
  box-shadow: 0 0 0 5px var(--surface-page), 0 8px 20px rgba(22, 58, 153, 0.22);
}
.timeline__marker .icon {
  width: 17px;
  height: 17px;
}
.timeline__year {
  display: inline-block;
  margin-bottom: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-accent-strong);
}
.timeline h3 {
  font-size: 1.12rem;
  margin-bottom: var(--space-3xs);
}
.timeline p {
  font-size: 0.9rem;
  color: var(--text-body);
  margin-bottom: 0;
}

/* ==========================================================================
   HOME PAGE COMPONENTS
   Everything below belongs to sections that exist only on index.html, so the
   home page carries its own weight without restating what About, Services,
   Portfolio, Developers, Downloads or Contact already cover.
   ========================================================================== */

/* ---- Hero extras ---- */
.hero-section {
  padding-top: calc(var(--nav-height) + var(--space-xl));
}

.hero-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--space-md) 0 0;
  padding: 0;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-body);
  white-space: nowrap;
}
.hero-chip .icon {
  width: 14px;
  height: 14px;
  color: var(--brand-accent-strong);
  flex-shrink: 0;
}

/* Positioning context for the badges that float over the dashboard mock. */
.mock-stage {
  position: relative;
}
.mock-badge {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.95rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--surface-card-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
  max-width: 190px;
}
.mock-badge .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--brand-accent-strong);
}
.mock-badge span {
  display: flex;
  flex-direction: column;
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--text-body);
}
.mock-badge b {
  font-size: 0.82rem;
  color: var(--text-heading);
}
.mock-badge--tl {
  top: -18px;
  left: -14px;
}
.mock-badge--br {
  bottom: -22px;
  right: -10px;
}

/* ---- Compact service signpost cards ---- */
.feature-card--compact {
  padding: 1.5rem;
}
.feature-card--compact .feature-card__icon {
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
}
.feature-card--compact h3 {
  font-size: 1rem;
  margin-bottom: 0;
}

/* ---- How We Work: four-step track ---- */
.process-track {
  position: relative;
}

.process-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  position: relative;
}
.process-step {
  position: relative;
  text-align: center;
  padding-inline: 0.5rem;
}
/* Each step after the first draws the connector back to the one before it.
   Anchoring to the step's own box rather than to a percentage of the track
   keeps the line landing on the circle centres at every viewport width:
   50% reaches this step's centre, and 50% + one column gap reaches the
   previous one. The segments then draw in sequence as the section reveals. */
.process-step + .process-step::before {
  content: "";
  position: absolute;
  top: 26px;
  right: 50%;
  left: calc(-50% - var(--space-md));
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 620ms var(--ease-premium);
}
.process-track.is-visible .process-step + .process-step::before {
  transform: scaleX(1);
}
.process-track.is-visible .process-step:nth-child(2)::before {
  transition-delay: 340ms;
}
.process-track.is-visible .process-step:nth-child(3)::before {
  transition-delay: 860ms;
}
.process-track.is-visible .process-step:nth-child(4)::before {
  transition-delay: 1380ms;
}
/* Positioned with a z-index so the circle paints ABOVE the connector line.
   Without it the absolutely-positioned ::before connector sits in a later
   paint layer than this static element and strikes straight through the
   number. The white ring then masks the line cleanly at the circle's edge. */
.process-step__num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: var(--space-sm);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
  box-shadow: 0 0 0 6px var(--surface-page), 0 10px 26px rgba(22, 58, 153, 0.24);
  transition: transform var(--duration-base) var(--ease-premium);
}
.process-step:hover .process-step__num {
  transform: translateY(-4px) scale(1.06);
}
.process-step h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-3xs);
}
.process-step p {
  font-size: 0.88rem;
  color: var(--text-body);
  margin-bottom: 0;
}

/* ---- Why GhazTech: value cards ---- */
.value-card {
  height: 100%;
  padding: var(--space-md);
  transition: transform var(--duration-base) var(--ease-premium),
    box-shadow var(--duration-base) var(--ease-premium);
}
.value-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--glass-shadow-lift);
}
.value-card__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  color: var(--brand-primary-strong);
  background: linear-gradient(135deg, var(--color-blue-100), var(--color-cream-200));
  transition: transform var(--duration-base) var(--ease-premium);
}
.value-card:hover .value-card__icon {
  transform: rotate(-6deg) scale(1.08);
}
.value-card__icon .icon {
  width: 20px;
  height: 20px;
}
.value-card h3 {
  font-size: 1.02rem;
  margin-bottom: var(--space-3xs);
}
.value-card p {
  font-size: 0.86rem;
  color: var(--text-body);
  margin-bottom: 0;
}

/* ---- Who We Build For: continuous sector marquee ---- */
.sector-marquee {
  overflow: hidden;
  padding-block: var(--space-sm);
  /* Fade both ends so the loop has no visible seam at the viewport edge. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* Spacing lives on the pills as margin-right rather than as a flex `gap`:
   with `gap` the half-width offset the keyframes use lands half a gap short
   of the second copy and the loop visibly jumps once per cycle. */
.sector-track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.sector-marquee:hover .sector-track {
  animation-play-state: paused;
}
.sector-pill {
  display: inline-flex;
  align-items: center;
  margin-right: 0.75rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: var(--surface-card-strong);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-heading);
  white-space: nowrap;
  transition: border-color var(--duration-fast) var(--ease-soft),
    color var(--duration-fast) var(--ease-soft);
}
.sector-pill:hover {
  border-color: var(--brand-accent);
  color: var(--brand-primary-strong);
}

/* base.css freezes every animation under reduced motion, which would leave
   this track parked at frame zero with most of the sectors clipped off the
   right edge and no way to reach them. So when motion is off it stops being a
   marquee: the pills wrap onto lines, the duplicate copy that exists only to
   make the loop seamless is dropped, and all eight are simply readable. */
@media (prefers-reduced-motion: reduce) {
  .sector-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .sector-track {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.75rem;
  }
  .sector-pill[aria-hidden="true"] {
    display: none;
  }
}

/* ---- Review cards (rendered by js/reviews.js) ---- */
.review-card {
  height: 100%;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
}
.review-card__stars {
  display: flex;
  gap: 0.15rem;
  margin-bottom: 0.75rem;
}
.review-card__stars .icon {
  width: 16px;
  height: 16px;
  color: var(--border-soft);
}
.review-card__stars .icon.is-filled {
  color: var(--brand-accent);
}
.review-card__quote {
  font-size: 0.92rem;
  color: var(--text-body);
  margin-bottom: var(--space-sm);
  flex: 1;
}
.review-card__by {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-soft-2);
}
.review-card__avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
}
.review-card__by b {
  display: block;
  font-size: 0.9rem;
  color: var(--text-heading);
}
.review-card__by small {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ---- FAQ accordion (restyles the Bootstrap component) ---- */
.faq-accordion .accordion-item {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md) !important;
  margin-bottom: 0.7rem;
  overflow: hidden;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.faq-accordion .accordion-header {
  margin: 0;
}
.faq-accordion .accordion-button {
  padding: 1.15rem 1.25rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text-heading);
  background: transparent;
  box-shadow: none;
  border-radius: 0 !important;
}
.faq-accordion .accordion-button:not(.collapsed) {
  color: var(--brand-primary-strong);
  background: rgba(22, 58, 153, 0.05);
}
.faq-accordion .accordion-button:focus {
  box-shadow: none;
}
.faq-accordion .accordion-button:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
}
/* Bootstrap's chevron is a fixed-colour data URI that ignores the palette.
   Draw it with borders instead so it inherits the brand tokens. */
.faq-accordion .accordion-button::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-left: auto;
  margin-right: 4px;
  background-image: none;
  border-right: 2px solid var(--brand-primary);
  border-bottom: 2px solid var(--brand-primary);
  transform: rotate(45deg);
  transition: transform var(--duration-base) var(--ease-premium);
}
.faq-accordion .accordion-button:not(.collapsed)::after {
  transform: rotate(-135deg);
}
.faq-accordion .accordion-body {
  padding: 0 1.25rem 1.25rem;
  font-size: 0.9rem;
  color: var(--text-body);
}


/* ==========================================================================
   DEVELOPERS PAGE
   Two audiences share this page: a client checking who will actually write
   their software, and a freelance developer deciding whether to apply. The
   components below keep those two readings separate rather than blending
   them into one vague "team" section.
   ========================================================================== */

/* The skills picker is three elements, not one control, so it carries its own
   invalid state — .form-field's rules key off an <input> it does not have. */
.skills-field.is-invalid .tag-input {
  border-color: var(--color-danger);
  animation: shake 0.4s var(--ease-premium);
}
.skills-field.is-invalid .form-error {
  display: flex;
}
.skills-field.is-invalid .tag-input__hint {
  display: none;
}

/* ---- Header status strip ---- */
.meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-md);
}
.meta-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-body);
}
.meta-strip__item .icon {
  width: 15px;
  height: 15px;
  color: var(--brand-primary);
}

/* A live dot, used only where the claim is genuinely current. */
.pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-success);
  box-shadow: 0 0 0 0 rgba(47, 143, 91, 0.55);
  animation: pulseDot 2.6s var(--ease-soft) infinite;
}
@keyframes pulseDot {
  70% { box-shadow: 0 0 0 9px rgba(47, 143, 91, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 143, 91, 0); }
}

/* ---- The profile card ---- */
.dev-profile {
  padding: var(--space-lg);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.dev-profile__top {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.dev-profile__avatar {
  position: relative;
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: 0.02em;
  color: var(--brand-accent);
  background: linear-gradient(140deg, var(--brand-primary), var(--brand-primary-strong));
  box-shadow: 0 14px 34px rgba(22, 58, 153, 0.24);
}
/* A thin rotating ring, so the card has one piece of motion that is not a
   hover state — it reads as "active practice" at a glance. */
.dev-profile__avatar::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: calc(var(--radius-md) + 5px);
  border: 1.5px dashed rgba(22, 58, 153, 0.28);
  animation: devRing 26s linear infinite;
}
@keyframes devRing {
  to { transform: rotate(360deg); }
}
.dev-profile__name {
  font-size: 1.4rem;
  margin-bottom: 0.15rem;
}
.dev-profile__role {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0;
}
.dev-profile__meta {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) 0;
  border-block: 1px solid var(--border-soft-2);
  display: grid;
  gap: 0.6rem;
}
.dev-profile__meta li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.6rem;
  align-items: baseline;
  font-size: 0.88rem;
  color: var(--text-heading);
}
.dev-profile__meta dt,
.dev-profile__meta .k {
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dev-profile__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: auto;
}

/* ---- Delivery facts beside the profile ---- */
.dev-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}
.dev-facts li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0.85rem;
  align-items: start;
}
.dev-facts__icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--color-blue-100);
  color: var(--brand-primary-strong);
}
.dev-facts__icon .icon {
  width: 16px;
  height: 16px;
}
.dev-facts b {
  display: block;
  color: var(--text-heading);
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}
.dev-facts p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-body);
}

/* ==========================================================================
   THE BENCH — disciplines we sub-contract
   Each card opens in place. A dialog would be too heavy for three lines of
   text, and a permanently expanded card would make the grid unreadable.
   ========================================================================== */

/* The card is a div and only its header is the button: the open panel holds a
   definition list, which is flow content and cannot legally live inside a
   <button>. */
.bench {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--glass-fill);
  padding: var(--space-md);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color var(--duration-base) var(--ease-premium),
    box-shadow var(--duration-base) var(--ease-premium),
    transform var(--duration-base) var(--ease-premium),
    background var(--duration-base) var(--ease-premium);
}
.bench:hover {
  transform: translateY(-5px);
  border-color: var(--color-blue-200);
  box-shadow: var(--glass-shadow);
}
.bench.is-open {
  background: var(--glass-fill-strong);
  border-color: var(--brand-primary);
  box-shadow: var(--glass-shadow);
}
.bench__trigger {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}
.bench__trigger:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.bench__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}
.bench__icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--color-blue-100);
  color: var(--brand-primary-strong);
  transition: background var(--duration-base) var(--ease-premium),
    color var(--duration-base) var(--ease-premium);
}
.bench.is-open .bench__icon {
  background: var(--color-sun-200);
  color: var(--brand-accent-strong);
}
.bench__icon .icon {
  width: 18px;
  height: 18px;
}
.bench__title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-heading);
  line-height: var(--lh-snug);
  margin: 0;
}
.bench__line {
  display: block;
  font-size: 0.88rem;
  color: var(--text-body);
  margin: 0;
}
.bench__more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: var(--space-sm);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
.bench__more::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--duration-base) var(--ease-premium);
}
.bench.is-open .bench__more::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* Height is animated from a measured pixel value set by the script, because
   `auto` is not an animatable length. */
.bench__panel {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height var(--duration-base) var(--ease-premium),
    opacity var(--duration-base) var(--ease-premium);
}
.bench__panel-inner {
  padding-top: var(--space-sm);
  margin-top: var(--space-sm);
  border-top: 1px solid var(--border-soft-2);
}
.bench__panel dl {
  margin: 0;
}
.bench__panel dt {
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.bench__panel dd {
  font-size: 0.86rem;
  color: var(--text-body);
  margin-bottom: 0.8rem;
}
.bench__panel dd:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   COLLABORATION FLOW
   A horizontal rail on desktop, a vertical one on narrow screens. The rule
   is drawn behind the markers and clipped at the first and last, so it never
   dangles past either end of the row.
   ========================================================================== */

.flow-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(5, 1fr);
}
.flow-rail__step {
  position: relative;
  padding-top: calc(var(--space-md) + 8px);
}
.flow-rail__step::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border-soft);
}
.flow-rail__step:first-child::before { left: 50%; }
.flow-rail__step:last-child::before { right: 50%; }
.flow-rail__n {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--fs-tiny);
  font-weight: 800;
  color: var(--color-white);
  background: var(--brand-primary);
  box-shadow: 0 0 0 5px var(--surface-page);
}
.flow-rail__step:last-child .flow-rail__n {
  background: var(--brand-accent-strong);
}
.flow-rail__step h3 {
  font-size: 1rem;
  text-align: center;
  margin-bottom: 0.35rem;
}
.flow-rail__step p {
  font-size: 0.85rem;
  color: var(--text-body);
  text-align: center;
  margin: 0;
}

/* ==========================================================================
   CRITERIA — what we look for / what you get
   ========================================================================== */

.criteria {
  padding: var(--space-lg);
  height: 100%;
}
.criteria__label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.criteria--ask .criteria__label { color: var(--brand-primary); }
.criteria--give .criteria__label { color: var(--brand-accent-strong); }
.criteria ul {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.criteria li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: 0.9rem;
  color: var(--text-body);
}
.criteria li .icon {
  width: 15px;
  height: 15px;
  margin-top: 0.22rem;
}
.criteria--ask li .icon { color: var(--brand-primary); }
.criteria--give li .icon { color: var(--brand-accent-strong); }
.criteria li b {
  color: var(--text-heading);
}

/* ==========================================================================
   APPLICATION — readiness meter
   Scores the form as it is filled in, so an applicant can see that a bare
   two-line submission is not competitive before they send it.
   ========================================================================== */

.readiness {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-md);
}
.readiness__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: 0.5rem;
}
.readiness__label {
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.readiness__value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand-primary-strong);
}
.readiness__track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-cream-200);
  overflow: hidden;
}
.readiness__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
  transition: width var(--duration-slow) var(--ease-premium);
}
.readiness__hint {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}

/* ==========================================================================
   INTERNSHIP BAND
   ========================================================================== */

.intern-band {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: linear-gradient(120deg, rgba(255, 239, 222, 0.6), rgba(232, 240, 251, 0.55));
}
.intern-band h2 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}
.intern-band p {
  margin-bottom: 0;
  color: var(--text-body);
  max-width: 62ch;
}
.intern-band__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-sm);
}


/* ==========================================================================
   DOWNLOADS PAGE
   A download centre, not a marketing grid: the catalogue is a list of rows
   carrying real metadata slots (version, platform, size), and the page also
   answers the questions a download page is actually asked -- what it runs on,
   how it installs, what changed, and what happens to your data.
   ========================================================================== */

/* ---- Catalogue row ---- */
.dl-list {
  display: grid;
  gap: var(--space-sm);
}
.dl-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 15rem auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--glass-fill);
  transition: border-color var(--duration-base) var(--ease-premium),
    box-shadow var(--duration-base) var(--ease-premium),
    transform var(--duration-base) var(--ease-premium);
}
.dl-row:hover {
  transform: translateY(-3px);
  border-color: var(--color-blue-200);
  box-shadow: var(--glass-shadow);
}
/* Filtered out. Kept in the DOM so the counts stay honest and so a filter
   change does not destroy and rebuild the list. */
.dl-row[hidden] {
  display: none;
}
.dl-row__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--color-blue-100), var(--color-cream-200));
  color: var(--brand-primary-strong);
}
.dl-row__icon .icon {
  width: 22px;
  height: 22px;
}
.dl-row__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.dl-row__title h3 {
  font-size: 1.05rem;
  margin: 0;
}
.dl-row__desc {
  font-size: 0.88rem;
  color: var(--text-body);
  margin: 0;
}

/* The metadata block. Values are em dashes until a build actually exists --
   an invented version number would be the one thing a download page must
   never carry. */
.dl-row__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  padding-left: var(--space-md);
  border-left: 1px solid var(--border-soft-2);
}
.dl-row__meta div {
  min-width: 0;
}
.dl-row__meta dt {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.1rem;
}
.dl-row__meta dd {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-heading);
  margin: 0;
  overflow-wrap: anywhere;
}
.dl-row__action {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  text-align: center;
}
.dl-row__action .btn-ghost {
  white-space: nowrap;
  padding: 0.7rem 1.2rem;
  font-size: 0.82rem;
}
.dl-row__state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-accent-strong);
}
.dl-row__state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: chipPulse 2.4s var(--ease-soft) infinite;
}

/* A button that has to read as a link because it sits mid-sentence. */
.btn-link-inline {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--brand-primary-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Shown when a filter matches nothing, so the list never just empties. */
.dl-empty {
  padding: var(--space-lg);
  text-align: center;
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-md);
  color: var(--text-body);
  font-size: 0.9rem;
}

/* ==========================================================================
   SYSTEM REQUIREMENTS
   A real two-column spec table. On phones each row becomes a stacked block,
   because a three-column table at 375px is unreadable at any font size.
   ========================================================================== */

.specs {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.specs caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--space-sm);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.specs th,
.specs td {
  padding: 0.75rem 0.9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-soft-2);
}
.specs thead th {
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom-color: var(--border-soft);
}
.specs tbody th {
  font-weight: 700;
  color: var(--text-heading);
  width: 30%;
}
.specs td {
  color: var(--text-body);
}
.specs tbody tr:last-child th,
.specs tbody tr:last-child td {
  border-bottom: none;
}
.specs__rec {
  color: var(--text-heading);
  font-weight: 600;
}

/* ==========================================================================
   ASSURANCES — what ships with every application
   ========================================================================== */

.assurance {
  height: 100%;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--glass-fill);
}
.assurance__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  margin-bottom: 0.7rem;
  background: var(--color-sun-200);
  color: var(--brand-accent-strong);
}
.assurance__icon .icon {
  width: 17px;
  height: 17px;
}
.assurance h3 {
  font-size: 1rem;
  margin-bottom: 0.3rem;
}
.assurance p {
  font-size: 0.87rem;
  color: var(--text-body);
  margin: 0;
}

/* ==========================================================================
   RELEASE NOTES — honest empty state
   Nothing has shipped, so rather than hide the section this explains what a
   published entry will carry. A changelog that appears from nowhere on the
   first release is less trustworthy than one that was always here.
   ========================================================================== */

.changelog {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--glass-fill);
}
.changelog__empty {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-soft-2);
  font-weight: 700;
  color: var(--text-heading);
}
.changelog__empty .icon {
  width: 17px;
  height: 17px;
  color: var(--brand-primary);
}
.changelog ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.changelog li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 0.65rem;
  align-items: start;
  font-size: 0.88rem;
  color: var(--text-body);
}
.changelog li .icon {
  width: 13px;
  height: 13px;
  margin-top: 0.25rem;
  color: var(--brand-accent-strong);
}
.changelog li b {
  color: var(--text-heading);
}


/* ==========================================================================
   DANGER ZONE — account deletion
   Deliberately styled apart from everything else on the page. A destructive
   action that looks like every other button gets clicked by accident.
   ========================================================================== */

.danger-zone {
  border: 1px solid rgba(192, 68, 44, 0.28);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(192, 68, 44, 0.05));
}
.danger-zone .panel__head h2 {
  color: var(--color-danger);
}
.danger-zone__notes {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.danger-zone__notes li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: 0.86rem;
  color: var(--text-body);
}
.danger-zone__notes .icon {
  width: 14px;
  height: 14px;
  margin-top: 0.2rem;
  color: var(--color-danger);
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.7rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-danger);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-danger);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-premium),
    color var(--duration-fast) var(--ease-premium),
    box-shadow var(--duration-fast) var(--ease-premium);
}
.btn-danger:hover {
  background: var(--color-danger);
  color: var(--color-white);
  box-shadow: 0 8px 22px rgba(192, 68, 44, 0.28);
}
.btn-danger:focus-visible {
  outline: 2px solid var(--color-danger);
  outline-offset: 3px;
}
.btn-danger:disabled {
  opacity: 0.6;
  cursor: default;
}
.btn-danger .icon {
  width: 14px;
  height: 14px;
}

/* The confirmation dialog carries the form, so it needs a little more room
   and a left-aligned body than the logout one. */
.delete-dialog .logout-dialog__body {
  max-width: 460px;
}
.delete-dialog .form-field {
  margin-bottom: var(--space-sm);
  text-align: left;
}
.delete-dialog .logout-dialog__actions {
  margin-top: var(--space-md);
}
.logout-dialog__icon--danger {
  background: rgba(192, 68, 44, 0.12);
  color: var(--color-danger);
}


/* ---- "Check your email" panel, shown in place of the login form ---- */
.auth-verify {
  text-align: center;
}
.auth-verify__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto var(--space-sm);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: var(--color-blue-100);
  color: var(--brand-primary-strong);
}
.auth-verify__icon .icon {
  width: 22px;
  height: 22px;
}
.auth-verify__lead {
  font-size: 0.9rem;
  color: var(--text-body);
  margin-bottom: 0.2rem;
}
.auth-verify__email {
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: var(--space-sm);
  overflow-wrap: anywhere;
}
.auth-verify__hint {
  font-size: 0.85rem;
  color: var(--text-body);
  margin-bottom: var(--space-md);
}
.auth-verify__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.auth-verify__actions .btn-ghost,
.auth-verify__actions .btn-brand {
  padding: 0.7rem 1.2rem;
  font-size: 0.82rem;
}
.auth-verify__status {
  display: block;
  margin-top: 0.7rem;
  min-height: 1.2em;
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}


/* ---- Forgotten password ---- */
.auth-forgot {
  text-align: right;
  margin: -0.35rem 0 var(--space-sm);
}
.auth-forgot button {
  border: none;
  background: none;
  padding: 0.25rem;
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  font-weight: 700;
  color: var(--brand-primary-strong);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-forgot button:hover {
  color: var(--brand-accent-strong);
}

.auth-reset .auth-switch {
  margin-top: var(--space-sm);
}
/* The confirmation replaces the field and the button, so it carries the
   spacing they leave behind. */
.auth-reset .form-status.is-visible {
  margin-top: 0;
}


/* ==========================================================================
   CONTACT CHANNELS
   Four ways to reach the same person. Each card says what it is best for, so
   the choice is about the message rather than guesswork — WhatsApp for a
   quick question, email when there is a file to attach.
   ========================================================================== */

.channel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--glass-fill);
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-premium),
    border-color var(--duration-base) var(--ease-premium),
    box-shadow var(--duration-base) var(--ease-premium);
}
.channel:hover {
  transform: translateY(-5px);
  border-color: var(--color-blue-200);
  box-shadow: var(--glass-shadow);
  text-decoration: none;
}
.channel:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
}
.channel__icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--color-blue-100);
  color: var(--brand-primary-strong);
  transition: transform var(--duration-base) var(--ease-premium);
}
.channel:hover .channel__icon {
  transform: scale(1.08) rotate(-4deg);
}
.channel__icon .icon {
  width: 19px;
  height: 19px;
}
.channel__label {
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}
.channel__value {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-heading);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
  margin-bottom: 0.35rem;
}
/* Pushed to the bottom so the notes line up across the row even when the
   values above them wrap to different numbers of lines. */
.channel__note {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: var(--fs-tiny);
  color: var(--text-body);
}

/* WhatsApp is the channel most people here will actually use, so it is the
   one card that carries the brand accent rather than the default blue. */
.channel--whatsapp {
  border-color: rgba(47, 143, 91, 0.3);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(47, 143, 91, 0.06));
}
.channel--whatsapp .channel__icon {
  background: rgba(47, 143, 91, 0.14);
  color: var(--color-success);
}
.channel--whatsapp:hover {
  border-color: var(--color-success);
  box-shadow: 0 18px 44px rgba(47, 143, 91, 0.18);
}