/* ==========================================================================
   SORZIA — components.css  (v5)
   Header, buttons, panels, chips, rails, forms, footer.
   Every colour here resolves to a token in base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Icons
   -------------------------------------------------------------------------- */
.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-lg { width: 1.5em; height: 1.5em; }

/* Circular gold medallion. Two gradients: a warm top-light and a cool
   bottom-shadow, so it reads as a machined metal disc rather than a circle. */
.medallion {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  color: var(--gold-bright);
  font-size: 20px;
  background:
    radial-gradient(circle at 50% 26%, rgba(224, 191, 107, 0.24), rgba(224, 191, 107, 0.03) 66%),
    linear-gradient(168deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(208, 169, 74, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 224, 0.16),
    0 0 24px -12px rgba(208, 169, 74, 0.95),
    0 6px 14px -10px rgba(0, 0, 0, 0.9);
}

.medallion-sm { width: 34px; height: 34px; font-size: 15px; }
.medallion-lg { width: 62px; height: 62px; font-size: 27px; }

/* --------------------------------------------------------------------------
   2. Site header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.is-stuck {
  background: rgba(4, 7, 15, 0.76);
  border-bottom-color: rgba(208, 169, 74, 0.13);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* Brand ------------------------------------------------------------------ */
.brand { display: inline-flex; align-items: center; gap: 0.72rem; flex: none; }

.brand-mark {
  width: 38px;
  height: 38px;
  color: var(--gold-bright);
  filter: drop-shadow(0 0 14px rgba(208, 169, 74, 0.45));
  transition: transform var(--dur-3) var(--ease);
}

.brand:hover .brand-mark { transform: rotate(45deg); }

/* The wordmark is the real brand asset, not type we set ourselves. */
.brand-word {
  display: block;
  height: 30px;
  width: auto;
  filter: drop-shadow(0 2px 10px rgba(156, 116, 40, 0.35));
}

@media (max-width: 620px) { .brand-word { height: 24px; } }

.site-footer .brand-word { height: 26px; }

/* Navigation ------------------------------------------------------------- */
.nav { margin-inline: auto; }

.nav-list { display: flex; align-items: center; gap: clamp(0.5rem, 1.6vw, 1.6rem); }

.nav-link {
  position: relative;
  display: block;
  padding: 0.42rem 0.72rem;
  border-radius: var(--r-sm);
  font-size: var(--step-0);
  font-weight: 480;
  letter-spacing: -0.005em;
  color: var(--text-muted);
  transition:
    color var(--dur-micro) var(--ease-premium),
    background var(--dur-micro) var(--ease-premium);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 2px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--gold-bright);
  opacity: 0;
  transition:
    left var(--dur-state) var(--ease-premium),
    right var(--dur-state) var(--ease-premium),
    opacity var(--dur-state) var(--ease-premium);
}

.nav-link:hover { color: var(--ivory); background: rgba(255, 255, 255, 0.045); }

.nav-link[aria-current="page"] { color: var(--ivory); }

.nav-link[aria-current="page"]::after {
  left: 0.72rem;
  right: 0.72rem;
  opacity: 1;
}

/* Press feedback on every navigational control. */
.nav-link:active { transform: scale(0.97); }

.header-actions { display: flex; align-items: center; gap: 0.6rem; flex: none; }

/* Mobile nav ------------------------------------------------------------- */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--ivory);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}

.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }

@media (max-width: 1000px) {
  .nav-toggle { display: grid; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    margin: 0;
    padding: var(--sp-4) 1.25rem var(--sp-5);
    background: rgba(5, 9, 20, 0.95);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-3);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2);
  }

  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }

  .nav-link {
    padding: 0.85rem 0.4rem;
    font-size: var(--step-1);
    border-bottom: 1px solid var(--hairline);
  }

  .nav-link::after { display: none; }
  .header-actions { margin-left: auto; }
}

@media (max-width: 620px) {
  .brand-word { font-size: 1.15rem; letter-spacing: 0.26em; text-indent: 0.26em; }
  .brand-mark { width: 32px; height: 32px; }
  .btn-header-cta .btn-label { display: none; }
  .btn-header-cta { padding-inline: 0.85rem; }
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.74rem 1.4rem;
  border-radius: var(--r-pill);
  font-size: var(--step-0);
  font-weight: 550;
  letter-spacing: 0.006em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-micro) var(--ease-premium),
    box-shadow var(--dur-state) var(--ease-premium),
    border-color var(--dur-state) var(--ease-premium),
    filter var(--dur-state) var(--ease-premium);
}

/* The arrow leads the eye out of the button on hover. */
.btn .icon { transition: transform var(--dur-state) var(--ease-premium); }
.btn:hover .icon { transform: translateX(3px); }
.btn-ghost:hover .icon { transform: scale(1.08); }
.btn:active { transform: translateY(1px) scale(0.994); }

/* Primary — four gold stops so the pill has a real highlight, a body and a
   turned-under bottom edge. No flat two-stop gradient, no harsh shine. */
.btn-primary {
  color: #241A08;
  font-weight: 600;
  /* Antique champagne, not yellow: the palest stop is a highlight, not the body. */
  background:
    linear-gradient(180deg,
      #EFD9A3 0%,
      var(--gold-bright) 18%,
      var(--gold-mid) 46%,
      var(--gold) 76%,
      var(--gold-deep) 100%);
  border: 1px solid rgba(242, 222, 172, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 235, 0.62),
    inset 0 -1px 0 rgba(58, 40, 8, 0.45),
    inset 0 0 18px rgba(255, 236, 190, 0.16),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 14px 30px -16px rgba(120, 88, 26, 0.95),
    0 0 30px -20px rgba(231, 201, 125, 0.8);
}

/* A specular that travels across the metal on hover. */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -62%;
  width: 44%;
  z-index: -1;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 252, 244, 0.42), transparent);
  transition: left 820ms var(--ease-out);
}

.btn-primary:hover {
  transform: translateY(-1px);
  border-color: rgba(242, 222, 172, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 235, 0.7),
    inset 0 -1px 0 rgba(58, 40, 8, 0.45),
    inset 0 0 22px rgba(255, 236, 190, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 20px 40px -18px rgba(120, 88, 26, 1),
    0 0 42px -18px rgba(231, 201, 125, 0.9);
}

.btn-primary:hover::after { left: 118%; }

.btn-primary:active {
  transform: translateY(1px) scale(0.994);
  box-shadow:
    inset 0 2px 6px rgba(50, 34, 6, 0.55),
    inset 0 1px 0 rgba(255, 250, 235, 0.28),
    0 2px 8px -4px rgba(0, 0, 0, 0.75);
}

/* Ghost — glass panel button. */
.btn-ghost {
  color: var(--ivory);
  background: var(--glass-2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 24px -18px rgba(0, 0, 0, 0.95);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}

.btn-ghost .icon { color: var(--gold-bright); }

.btn-ghost:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  background: var(--surface-2);
  box-shadow: var(--edge-strong), var(--glow-gold);
}

.btn-ghost:active { transform: translateY(1px) scale(0.994); }

/* Quiet text link with a travelling arrow. */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--gold-bright);
  transition: color var(--dur-1) var(--ease);
}

.btn-text .icon { transition: transform var(--dur-2) var(--ease); }
.btn-text:hover { color: var(--gold-lift); }
.btn-text:hover .icon { transform: translateX(4px); }

.btn-lg { padding: 0.94rem 1.8rem; font-size: var(--step-1); }
.btn-block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* --------------------------------------------------------------------------
   4. Panels & cards
   -------------------------------------------------------------------------- */
.panel {
  position: relative;
  border-radius: var(--r-lg);
  /* Six layers: a non-uniform gold/violet rim (painted only into the 1px
     border ring via border-box + padding-box clipping), two soft specular
     catch-points standing in for light hitting the edge of glass, the warm
     top sheen, and the glass body last (background-color must be the final
     layer for the CSS background shorthand to stay valid). */
  background:
    linear-gradient(135deg, rgba(231, 201, 125, 0.32), rgba(255, 255, 255, 0.07) 30%, rgba(98, 85, 199, 0.16) 64%, rgba(212, 173, 89, 0.26)) border-box,
    radial-gradient(140px 90px at 12% 0%, rgba(255, 246, 226, 0.12), transparent 70%) padding-box,
    radial-gradient(120px 80px at 92% 100%, rgba(212, 173, 89, 0.11), transparent 70%) padding-box,
    linear-gradient(168deg, rgba(231, 201, 125, 0.05), rgba(255, 255, 255, 0.014) 44%, transparent) padding-box,
    var(--glass-1) padding-box;
  border: 1px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 235, 0.085),
    inset 0 0 0 1px rgba(212, 173, 89, 0.045),
    0 1px 1px rgba(0, 0, 0, 0.28),
    0 14px 32px -22px rgba(0, 0, 0, 0.8),
    0 0 54px -32px rgba(212, 173, 89, 0.4);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
}

/* A single specular hairline along the top edge — the macOS panel tell. */
.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 250, 235, 0.28), transparent);
  pointer-events: none;
}

/* Warm perimeter reflection, only on interactive surfaces. */
.card-link::after,
a.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 0 1px rgba(231, 201, 125, 0.3);
  transition: opacity var(--dur-state) var(--ease-premium);
}

.card-link:hover::after,
a.card:hover::after { opacity: 1; }

.panel-pad { padding: clamp(1.15rem, 2.4vw, 1.75rem); }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
  transition:
    transform var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    background var(--dur-2) var(--ease);
}

.card-link:hover,
a.card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 235, 0.13),
    0 2px 3px rgba(0, 0, 0, 0.3),
    0 22px 44px -26px rgba(0, 0, 0, 0.85),
    0 0 30px -20px rgba(212, 173, 89, 0.55);
}

/* Titles rise a hair on hover — the whole card feels like it lifted. */
.card-link h3, a.card h3 { transition: transform var(--dur-state) var(--ease-premium); }
.card-link:hover h3, a.card:hover h3 { transform: translateY(-1px); }

.card h3 { font-size: var(--step-2); }

.card-title-row { display: flex; align-items: center; gap: 0.85rem; }
.card p { color: var(--text-muted); font-size: var(--step-0); }

.card-foot {
  margin-top: auto;
  padding-top: var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  color: var(--text-dim);
}

.meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.7; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.24rem 0.7rem;
  border-radius: var(--r-pill);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--gold-bright);
  background: rgba(208, 169, 74, 0.09);
  border: 1px solid rgba(208, 169, 74, 0.22);
}

/* --------------------------------------------------------------------------
   5. Question chips
   -------------------------------------------------------------------------- */
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.58rem 1.1rem;
  border-radius: var(--r-pill);
  font-size: var(--step-0);
  color: var(--ivory);
  background: linear-gradient(168deg, rgba(21, 33, 60, 0.90), rgba(8, 15, 31, 0.90));
  border: 1px solid rgba(208, 169, 74, 0.30);
  box-shadow:
    var(--edge),
    0 10px 26px -18px rgba(0, 0, 0, 0.95),
    0 0 22px -16px rgba(208, 169, 74, 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition:
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    background var(--dur-2) var(--ease);
}

.chip .icon { color: var(--gold-bright); }

.chip:hover,
.chip.is-active {
  border-color: rgba(224, 191, 107, 0.72);
  background: linear-gradient(168deg, rgba(30, 45, 78, 0.92), rgba(12, 20, 40, 0.92));
  box-shadow: var(--edge-strong), 0 0 30px -6px rgba(208, 169, 74, 0.6);
}

.chip-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* --------------------------------------------------------------------------
   6. Trust rail
   --------------------------------------------------------------------------
   GEOMETRY GATE: the rail is 96px wide plus 18px of offset. The content
   shell is capped at 1460px, so the rail only has clear space of its own
   once the viewport reaches 1460 + 2*114 = 1688px. Gating it below that
   made it sit on top of the insight cards. 1720px gives a safe margin.
   -------------------------------------------------------------------------- */
.trust-rail {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
  flex-direction: column;
  gap: 0;
  padding: 0.5rem 0.45rem;
  width: var(--rail-w);
  border-radius: var(--r-lg);
  /* Deliberately lighter than a card: this is an ambient marker, not a
     panel competing with the insight stack. */
  background: linear-gradient(180deg, rgba(10, 19, 36, 0.42), rgba(6, 11, 22, 0.34));
  border: 1px solid rgba(208, 169, 74, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 245, 224, 0.05);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}

@media (min-width: 1720px) {
  .trust-rail { display: flex; }
}

.trust-rail-item {
  display: grid;
  justify-items: center;
  gap: 0.34rem;
  padding: 0.72rem 0.2rem;
  text-align: center;
  font-size: 0.66rem;
  line-height: 1.32;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  border-radius: var(--r-sm);
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}

.trust-rail-item + .trust-rail-item { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.trust-rail-item .icon { width: 19px; height: 19px; color: var(--gold-mid); }
.trust-rail-item:hover { color: var(--ivory); background: rgba(208, 169, 74, 0.055); }

/* The inline strip stands down only once the rail actually appears. */
@media (min-width: 1720px) {
  .hide-when-rail { display: none; }
}

/* Inline trust strip — the in-flow version. */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
}

.trust-strip li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.trust-strip .icon { color: var(--gold-mid); width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
.field { display: grid; gap: 0.4rem; }

.field > label {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.field .hint { font-size: var(--step--1); color: var(--text-dim); }

.input,
.textarea,
.select {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border-radius: var(--r-md);
  color: var(--ivory);
  background: rgba(255, 255, 255, 0.032);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: var(--edge);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}

.textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

.input::placeholder,
.textarea::placeholder { color: rgba(175, 168, 157, 0.55); }

.input:hover,
.textarea:hover,
.select:hover { border-color: rgba(255, 255, 255, 0.19); }

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.052);
  border-color: rgba(208, 169, 74, 0.62);
  box-shadow: var(--edge), 0 0 0 3px rgba(208, 169, 74, 0.16);
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23E0BF6B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
}

.select option { background: #0A1324; color: var(--ivory); }

.field-error { display: none; font-size: var(--step--1); color: #FF9E9E; }

.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select { border-color: rgba(255, 138, 138, 0.65); }

.field.has-error .field-error { display: block; }

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text-muted);
  cursor: pointer;
}

.check input {
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 6px;
  border: 1px solid rgba(208, 169, 74, 0.45);
  background: rgba(255, 255, 255, 0.04);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.check input:checked {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%231E1608' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.5 6 11l5.5-7'/%3E%3C/svg%3E") center / 13px no-repeat,
    linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-color: var(--gold-bright);
}

.check a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 2px; }

/* Honeypot — hidden from people, visible to naive bots.
   Clipped rather than pushed off-canvas, so it can never affect layout. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.form-status {
  display: none;
  gap: 0.6rem;
  align-items: start;
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  font-size: var(--step-0);
  border: 1px solid;
}

.form-status.is-shown { display: flex; }

.form-status[data-state="success"] {
  color: #CFF3DA;
  background: rgba(60, 190, 120, 0.10);
  border-color: rgba(60, 190, 120, 0.35);
}

.form-status[data-state="error"] {
  color: #FFD6D6;
  background: rgba(255, 120, 120, 0.10);
  border-color: rgba(255, 120, 120, 0.35);
}

.form-status[data-state="info"] {
  color: var(--ivory);
  background: rgba(126, 200, 255, 0.09);
  border-color: rgba(126, 200, 255, 0.3);
}

.btn.is-busy { pointer-events: none; opacity: 0.7; }

/* --------------------------------------------------------------------------
   8. Detail / accordion
   -------------------------------------------------------------------------- */
.faq-item { padding: 0; overflow: hidden; }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 1.05rem 1.25rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ivory);
  cursor: pointer;
  list-style: none;
  transition: background var(--dur-2) var(--ease);
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: rgba(255, 255, 255, 0.028); }
.faq-item summary .icon { color: var(--gold-bright); transition: transform var(--dur-2) var(--ease); }
.faq-item[open] summary .icon { transform: rotate(180deg); }

.faq-item .faq-body {
  padding: 0 1.25rem 1.15rem;
  color: var(--text-muted);
  font-size: var(--step-0);
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: var(--sp-7);
  padding-block: var(--sp-6) var(--sp-4);
  border-top: 1px solid rgba(208, 169, 74, 0.13);
  background: linear-gradient(180deg, rgba(4, 7, 15, 0), rgba(2, 4, 10, 0.9));
}

/* Single column on phones. The multi-column rule below has hard minimums
   that would otherwise force the page wider than a 390px screen. */
.footer-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 700px) {
  .footer-grid {
    grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  }
}

.footer-brand p {
  margin-top: var(--sp-2);
  max-width: 34ch;
  font-size: var(--step--1);
  color: var(--text-dim);
}

.footer-col h4 {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: var(--sp-2);
}

.footer-col li + li { margin-top: 0.45rem; }

.footer-col a {
  font-size: var(--step-0);
  color: var(--text-muted);
  transition: color var(--dur-1) var(--ease);
}

.footer-col a:hover { color: var(--ivory); }

.social-row { display: flex; gap: 0.5rem; margin-top: var(--sp-3); }

.social-link {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--text-muted);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.028);
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}

.social-link:hover {
  color: var(--gold-bright);
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.footer-bottom {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
  justify-content: space-between;
  font-size: var(--step--1);
  color: var(--text-dim);
}

.footer-note { max-width: 70ch; }


/* ==========================================================================
   10. Icon micro-interactions
   --------------------------------------------------------------------------
   Each medallion answers the cursor with one small, specific gesture. They
   are quiet enough to be discovered rather than noticed.
   ========================================================================== */
.medallion { overflow: hidden; transition: border-color var(--dur-state) var(--ease-premium); }

.medallion .icon {
  transition: transform var(--dur-state) var(--ease-spring), color var(--dur-state) var(--ease-premium);
}

/* A highlight sweeps across the disc. */
.medallion::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -70%;
  width: 55%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 250, 235, 0.22), transparent);
  transition: left var(--dur-3) var(--ease-premium);
  pointer-events: none;
}

:where(li, a, article, .card, .pillar-mini, .benefit-list li, .hero-trust li):hover > .medallion::after,
:where(li, a, article, .card, .pillar-mini):hover .medallion::after { left: 130%; }

:where(li, a, article, .card, .pillar-mini):hover .medallion {
  border-color: rgba(231, 201, 125, 0.5);
}

/* Layers separate a touch, then settle. */
:where(li, a, article, .card):hover .medallion .icon[data-mi="layers"],
.hero-trust li:hover .medallion .icon { transform: translateY(-1.5px); }

/* Targets contract toward their centre. */
.hero-trust li:hover .medallion .icon { transform: scale(0.94); }

/* Console row marks brighten and lean in. */
.console-row.is-shown .row-mark .icon { transition: transform var(--dur-state) var(--ease-spring); }
.console-row.is-shown:hover .row-mark .icon { transform: scale(1.1); }

/* Chips answer the pointer before they answer the sequence. */
.chip { transition-timing-function: var(--ease-premium); }
.chip:active { transform: scale(0.97); }

/* ==========================================================================
   11. Hover tilt (desktop, fine pointer, reduced-motion aware)
   ========================================================================== */
.tilt {
  transform: perspective(900px)
             rotateX(calc(var(--ty, 0) * -1.4deg))
             rotateY(calc(var(--tx, 0) * 1.4deg))
             translateZ(0);
  transition: transform 420ms var(--ease-premium);
  transform-style: preserve-3d;
}

.tilt.is-tilting { transition: transform 120ms linear; }

/* Higher specificity than .card-link:hover so the lift composes with the
   tilt instead of replacing it. */
.card-link.tilt:hover,
a.card.tilt:hover,
.tilt:hover {
  transform: perspective(900px)
             rotateX(calc(var(--ty, 0) * -1.4deg))
             rotateY(calc(var(--tx, 0) * 1.4deg))
             translateY(-2px);
}

@media (hover: none), (pointer: coarse) {
  .tilt { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tilt { transform: none !important; }
  .medallion::after { display: none; }
}


/* ==========================================================================
   12. Touch targets
   --------------------------------------------------------------------------
   Every control reaches the 44px comfortable-tap minimum on phones. Done
   with padding and min-height so nothing shifts on desktop.
   ========================================================================== */
@media (max-width: 899px) {
  .btn-header-cta { min-height: 44px; }
  .chip { min-height: 44px; }   /* covers chip rows outside the hero rail, e.g. 404 */
  .nav-toggle { width: 44px; height: 44px; }
  .social-link { width: 44px; height: 44px; }
  .nav-link { padding-block: 0.78rem; }
  .btn-text { padding-block: 0.6rem; }

  .footer-col a,
  .toc a,
  .breadcrumb a,
  .footer-bottom a {
    display: inline-block;
    padding-block: 0.42rem;
  }

  .filter-btn { min-height: 44px; }
}


/* ==========================================================================
   13. Phone toolbar
   --------------------------------------------------------------------------
   The desktop CTA does not belong in a 60px phone toolbar: it was clipping
   off the right edge and burying the menu button, which left navigation
   unreachable. The primary action lives in the hero on phones.
   ========================================================================== */
@media (max-width: 899px) {
  .site-header .btn-header-cta { display: none; }

  .header-inner { gap: 0.75rem; min-height: var(--header-h); }
  .brand-word { height: 22px; }
  .brand-mark { width: 28px; height: 28px; }
  .brand { gap: 0.55rem; }

  .site-header.is-stuck {
    box-shadow: 0 1px 0 rgba(255, 250, 235, 0.04);
    border-bottom-color: rgba(255, 255, 255, 0.05);
  }

  .nav-toggle { margin-left: auto; }
}