/* Design by Tanner — portal type roles.
   Source: Tanner brand guidelines, section 04 (Type).
   Every piece of text in the portal and Command Center takes exactly one of these.
   Nothing is ever font-weight 700: PP Monument Extended ships 300, 400 and 900 only. */
:root{
  --tnr-display:'PP Monument Extended',sans-serif;
  --tnr-text:'Inter',system-ui,sans-serif;
}
.t-eyebrow{font:400 12px/1.4 var(--tnr-display);letter-spacing:.3em;text-transform:uppercase;color:var(--tnr-yellow,#FFD100)}
.t-h1{font:900 clamp(27px,7vw,42px)/1 var(--tnr-display);letter-spacing:0;text-transform:uppercase;color:var(--tnr-white,#FFFFFF);text-wrap:balance}
.t-h2{font:900 clamp(18px,1.6vw,26px)/1.12 var(--tnr-display);letter-spacing:.02em;text-transform:uppercase;color:var(--tnr-white,#FFFFFF);text-wrap:balance}
.t-label{font:400 11px/1.5 var(--tnr-display);letter-spacing:.24em;text-transform:uppercase;color:var(--tnr-static,#E6E7E7)}
.t-num{font-family:var(--tnr-display);font-weight:300;font-variant-numeric:tabular-nums;line-height:.85;letter-spacing:-.01em;color:var(--tnr-yellow,#FFD100)}
.t-button{font:900 12px/1 var(--tnr-display);letter-spacing:.18em;text-transform:uppercase}
.t-body{font:400 16px/1.6 var(--tnr-text);color:var(--tnr-white,#FFFFFF);max-width:62ch}
.t-small{font:400 14px/1.5 var(--tnr-text);color:var(--tnr-static,#E6E7E7)}

/* Headline period: the 14K dot, not a typed "." */
.t-dot{display:inline-block;width:.46em;height:.33em;margin-left:.06em;background:var(--tnr-yellow,#FFD100);clip-path:polygon(28.9% 0,100% 0,71.1% 100%,0 100%);vertical-align:baseline;white-space:nowrap}

@media (max-width: 767px) {
  .t-h1 { font-size: clamp(27px, 7vw, 42px); letter-spacing: 0; overflow-wrap: anywhere; word-break: normal; text-wrap: wrap; }
  .t-h2 { font-size: clamp(16px, 4.8vw, 24px); letter-spacing: .02em; overflow-wrap: break-word; word-break: normal; }
}

/* Color rules that go with the type:
   - On a #FFD100 background, text is always #333333.
   - On blue, text is #FFFFFF, #E6E7E7 or #FFD100. Never #333333.
   - No opacity on text. */

/* Universal Rule: #FFD100 background sets color: #333333 on itself and every text child */
[style*="#FFD100"],
[style*="#ffd100"],
[style*="#FFD000"],
[style*="#ffd000"],
.bg-\[\#FFD100\],
.bg-\[\#ffd100\],
.bg-\[\#FFD000\],
.bg-\[\#ffd000\],
.bg-14k,
.t-button,
.tanner-btn-primary,
.tnr-btn-primary,
.tanner-choice--selected,
.tanner-choice[data-selected="true"],
.tanner-step-chip--active,
[data-state="checked"],
.tnr-chip-selected,
[data-selected="true"] {
  background-color: #FFD100 !important;
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
  border-color: #FFD100 !important;
}

[style*="#FFD100"] *,
[style*="#ffd100"] *,
[style*="#FFD000"] *,
[style*="#ffd000"] *,
.bg-\[\#FFD100\] *,
.bg-\[\#ffd100\] *,
.bg-\[\#FFD000\] *,
.bg-\[\#ffd000\] *,
.bg-14k *,
.t-button *,
.tanner-btn-primary *,
.tnr-btn-primary *,
.tanner-choice--selected *,
.tanner-choice[data-selected="true"] *,
.tanner-step-chip--active *,
[data-state="checked"] *,
.tnr-chip-selected *,
[data-selected="true"] *:not(svg):not(path):not(line):not(polyline):not(polygon):not(circle):not(rect) {
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
}
[style*="#FFD100"] svg.lucide,
[style*="#FFD100"] svg.lucide *,
.bg-14k svg.lucide,
.bg-14k svg.lucide *,
.t-button svg.lucide,
.t-button svg.lucide *,
.tanner-btn-primary svg.lucide,
.tanner-btn-primary svg.lucide *,
.tanner-choice--selected svg.lucide,
.tanner-choice[data-selected="true"] svg.lucide,
[data-state="checked"] svg.lucide,
[data-selected="true"] svg.lucide {
  fill: none !important;
  stroke: #333333 !important;
  color: #333333 !important;
}