/* == components/Button.module.css (prefix Btn_) == */
/* Button — ported from day4/buttons.css */

.Btn_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;

  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 80ms ease;

  font-size: 14px;
  line-height: 1;
  height: 36px;
  padding: 0 16px;
}

.Btn_btn:focus { outline: none; }
.Btn_btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.Btn_btn:active { transform: translateY(1px); }

.Btn_btn:disabled,
.Btn_btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

/* Sizes */
.Btn_sm {
  font-size: 12px;
  height: 28px;
  padding: 0 12px;
  gap: 6px;
}
.Btn_md { /* default — defined on .btn */ }
.Btn_lg {
  font-size: 16px;
  height: 44px;
  padding: 0 20px;
  gap: 10px;
}

/* Primary */
.Btn_primary {
  background: var(--brand-purple-500);
  color: var(--neutral-white);
  border-color: var(--brand-purple-500);
}
.Btn_primary:hover {
  background: var(--brand-purple-600);
  border-color: var(--brand-purple-600);
  color: var(--neutral-white);
  text-decoration: none;
}
.Btn_primary:active {
  background: #2a0d4a;
  border-color: #2a0d4a;
}
.Btn_primary:disabled,
.Btn_primary[aria-disabled="true"] {
  background: var(--brand-purple-300);
  border-color: var(--brand-purple-300);
  color: var(--neutral-white);
}

/* Secondary */
.Btn_secondary {
  background: var(--neutral-white);
  color: var(--brand-walnut-900);
  border-color: var(--brand-sand-500);
}
.Btn_secondary:hover {
  background: var(--brand-cream-500);
  border-color: var(--brand-walnut-700);
  color: var(--brand-walnut-900);
  text-decoration: none;
}
.Btn_secondary:active {
  background: #e8dcc0;
  border-color: var(--brand-walnut-900);
}
.Btn_secondary:disabled,
.Btn_secondary[aria-disabled="true"] {
  background: var(--neutral-white);
  border-color: var(--brand-sand-300);
  color: var(--brand-walnut-400);
}

/* Ghost */
.Btn_ghost {
  background: transparent;
  color: var(--brand-walnut-900);
  border-color: transparent;
}
.Btn_ghost:hover {
  background: rgba(50, 16, 88, 0.06);
  color: var(--brand-walnut-900);
  text-decoration: none;
}
.Btn_ghost:active {
  background: rgba(50, 16, 88, 0.10);
}
.Btn_ghost:disabled,
.Btn_ghost[aria-disabled="true"] {
  background: transparent;
  color: var(--brand-walnut-400);
}

/* Destructive */
.Btn_destructive {
  background: var(--semantic-danger-500);
  color: var(--neutral-white);
  border-color: var(--semantic-danger-500);
}
.Btn_destructive:hover {
  background: var(--semantic-danger-700);
  border-color: var(--semantic-danger-700);
  color: var(--neutral-white);
  text-decoration: none;
}
.Btn_destructive:active {
  background: #4d1217;
  border-color: #4d1217;
}
.Btn_destructive:disabled,
.Btn_destructive[aria-disabled="true"] {
  background: #c89497;
  border-color: #c89497;
  color: var(--neutral-white);
}

/* Link */
.Btn_link {
  background: transparent;
  border: none;
  padding: 0;
  height: auto;
  color: var(--link);
  font-weight: 500;
  text-decoration: none;
}
.Btn_link:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.Btn_link:disabled,
.Btn_link[aria-disabled="true"] {
  color: var(--brand-walnut-400);
  text-decoration: none;
}

/* Icons */
.Btn_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}
.Btn_icon svg { width: 100%; height: 100%; display: block; }

.Btn_iconOnly { padding: 0; width: 36px; }
.Btn_iconOnly.Btn_sm { width: 28px; }
.Btn_iconOnly.Btn_lg { width: 44px; }

/* Loading */
.Btn_btn[aria-busy="true"] {
  cursor: progress;
  position: relative;
}
.Btn_btn[aria-busy="true"] > *:not(.Btn_spinner) { opacity: 0; }
.Btn_spinner {
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: spin 600ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Block */
.Btn_block { width: 100%; }


/* == components/Card.module.css (prefix Card_) == */
/* Card — ported from day6/cards.css */

.Card_card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  display: block;
  color: var(--fg-1);
}

.Card_body { padding: 24px; }
.Card_bodySm { padding: 16px; }
.Card_bodyLg { padding: 32px; }

.Card_header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.Card_title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--fg-1);
  margin: 0;
}
.Card_eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 6px;
  display: block;
}

.Card_footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-soft);
  background: rgba(50, 16, 88, 0.02);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.Card_divider {
  height: 1px;
  background: var(--border-soft);
  margin: 0;
  border: 0;
}

/* Variants */
.Card_elevated {
  background-color: var(--brand-cream-500);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.24  0 0 0 0 0.16  0 0 0 0 0.09  0 0 0 0.09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-repeat: repeat;
  border-color: var(--brand-sand-500);
}
.Card_elevated .Card_header,
.Card_elevated .Card_footer { border-color: var(--brand-sand-500); }
.Card_elevated .Card_footer { background: rgba(50, 16, 88, 0.04); }

.Card_parchment {
  background: var(--brand-cream-500);
  border-color: var(--brand-sand-500);
}
.Card_parchment .Card_header,
.Card_parchment .Card_footer { border-color: var(--brand-sand-500); }

.Card_feature {
  background: var(--brand-walnut-900);
  border-color: var(--brand-walnut-900);
  color: var(--brand-cream-500);
}
.Card_feature .Card_title { color: var(--brand-cream-500); }
.Card_feature .Card_eyebrow { color: var(--brand-sand-300); }
.Card_feature .Card_header,
.Card_feature .Card_footer { border-color: rgba(240, 230, 207, 0.15); }
.Card_feature .Card_footer { background: rgba(240, 230, 207, 0.04); }

.Card_outline {
  background: transparent;
  border: 1px solid var(--brand-sand-500);
}

/* Interactive */
.Card_interactive {
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.Card_interactive:hover {
  border-color: var(--brand-walnut-700);
  box-shadow: var(--shadow-sm);
}
.Card_interactive:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--brand-walnut-700);
}
.Card_interactive:active { transform: translateY(1px); }

.Card_selected {
  border-color: var(--brand-purple-500);
  box-shadow: 0 0 0 1px var(--brand-purple-500) inset;
}


/* == components/Footer.module.css (prefix Footer_) == */
/* Footer — ported from day11/marketing.css (.mk-footer) */

.Footer_footer {
  background: var(--brand-walnut-900);
  color: var(--brand-cream-500);
  padding: 64px 0 40px;
}
.Footer_container { max-width: 1140px; margin: 0 auto; padding: 0 32px; }

.Footer_grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(240, 230, 207, 0.12);
}

.Footer_brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.Footer_brandMark { width: 32px; height: 32px; flex-shrink: 0; }
.Footer_brandName {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--brand-cream-500);
}

.Footer_tag {
  font-size: 14px;
  line-height: 1.55;
  color: var(--brand-sand-300);
  max-width: 36ch;
  margin: 16px 0 0;
}

.Footer_colHeading {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--brand-sand-300);
  margin: 0 0 16px;
}

.Footer_list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.Footer_list a {
  color: var(--brand-cream-500);
  text-decoration: none;
  font-size: 14px;
  transition: color 100ms ease;
}
.Footer_list a:hover { color: var(--brand-sand-300); }

.Footer_bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--brand-sand-300);
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .Footer_grid { grid-template-columns: 1fr 1fr; }
  .Footer_bottom { flex-direction: column; gap: 8px; }
}


/* == components/FormField.module.css (prefix FF_) == */
/* FormField — ported from day5/forms.css (.field, .input, .textarea, .select, .checkbox, .radio, .switch) */

.FF_field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-sans);
}

.FF_label {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--brand-walnut-900);
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.FF_required {
  color: var(--semantic-danger-500);
  font-weight: 600;
}
.FF_optional {
  color: var(--fg-3);
  font-weight: 400;
  font-size: 12px;
  margin-left: 4px;
}

.FF_hint {
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-3);
  margin-top: 2px;
}

.FF_error {
  font-size: 12px;
  line-height: 1.45;
  color: var(--semantic-danger-500);
  margin-top: 2px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

/* Input */
.FF_input {
  display: inline-flex;
  align-items: center;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  color: var(--brand-walnut-900);
  background: var(--neutral-white);
  border: 1px solid var(--brand-sand-500);
  border-radius: var(--radius-md);
  padding: 0 12px;
  height: 36px;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.FF_input::placeholder {
  color: var(--brand-walnut-400);
  opacity: 1;
}
.FF_input:hover:not(:focus):not(:disabled):not([aria-invalid="true"]) {
  border-color: var(--brand-purple-300);
}
.FF_input:focus,
.FF_input:focus-visible {
  outline: none;
  border-color: var(--brand-purple-500);
  box-shadow: 0 0 0 3px rgba(50, 16, 88, 0.15);
}
.FF_input:disabled,
.FF_input[aria-disabled="true"] {
  background: var(--brand-cream-500);
  color: var(--brand-walnut-400);
  border-color: var(--brand-sand-300);
  cursor: not-allowed;
}
.FF_input[aria-invalid="true"] {
  border-color: var(--semantic-danger-500);
}
.FF_input[aria-invalid="true"]:focus {
  border-color: var(--semantic-danger-500);
  box-shadow: 0 0 0 3px rgba(115, 28, 36, 0.18);
}
.FF_inputSm { height: 28px; font-size: 13px; padding: 0 10px; }
.FF_inputLg { height: 44px; font-size: 16px; padding: 0 14px; }

/* Textarea */
.FF_textarea {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--brand-walnut-900);
  background: var(--neutral-white);
  border: 1px solid var(--brand-sand-500);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  min-height: 96px;
  resize: vertical;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.FF_textarea::placeholder { color: var(--brand-walnut-400); }
.FF_textarea:hover:not(:focus):not(:disabled):not([aria-invalid="true"]) {
  border-color: var(--brand-purple-300);
}
.FF_textarea:focus {
  outline: none;
  border-color: var(--brand-purple-500);
  box-shadow: 0 0 0 3px rgba(50, 16, 88, 0.15);
}
.FF_textarea:disabled {
  background: var(--brand-cream-500);
  color: var(--brand-walnut-400);
  cursor: not-allowed;
}
.FF_textarea[aria-invalid="true"] {
  border-color: var(--semantic-danger-500);
}

/* Select (styled native) */
.FF_select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--brand-walnut-900);
  background-color: var(--neutral-white);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b5640' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  border: 1px solid var(--brand-sand-500);
  border-radius: var(--radius-md);
  padding: 0 36px 0 12px;
  height: 36px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.FF_select:hover:not(:focus):not(:disabled) {
  border-color: var(--brand-purple-300);
}
.FF_select:focus {
  outline: none;
  border-color: var(--brand-purple-500);
  box-shadow: 0 0 0 3px rgba(50, 16, 88, 0.15);
}
.FF_select:disabled {
  background-color: var(--brand-cream-500);
  color: var(--brand-walnut-400);
  cursor: not-allowed;
}

/* Checkbox */
.FF_checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--brand-walnut-900);
  cursor: pointer;
  user-select: none;
  position: relative;
}
.FF_checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.FF_checkboxBox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1px solid var(--brand-sand-500);
  border-radius: 3px;
  background: var(--neutral-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  margin-top: 1px;
}
.FF_checkboxBox::after {
  content: "";
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
}
.FF_checkbox:hover input:not(:disabled) ~ .FF_checkboxBox {
  border-color: var(--brand-purple-300);
}
.FF_checkbox input:focus-visible ~ .FF_checkboxBox {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.FF_checkbox input:checked ~ .FF_checkboxBox {
  background-color: var(--brand-purple-500);
  border-color: var(--brand-purple-500);
}
.FF_checkbox input:checked ~ .FF_checkboxBox::after { opacity: 1; }
.FF_checkbox input:disabled ~ .FF_checkboxBox {
  background-color: var(--brand-cream-500);
  border-color: var(--brand-sand-300);
}

/* Radio */
.FF_radio {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--brand-walnut-900);
  cursor: pointer;
  user-select: none;
  position: relative;
}
.FF_radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.FF_radioBox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1px solid var(--brand-sand-500);
  border-radius: 50%;
  background: var(--neutral-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  margin-top: 1px;
}
.FF_radioBox::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neutral-white);
  transform: scale(0);
  transition: transform 120ms ease;
}
.FF_radio:hover input:not(:disabled) ~ .FF_radioBox {
  border-color: var(--brand-purple-300);
}
.FF_radio input:focus-visible ~ .FF_radioBox {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.FF_radio input:checked ~ .FF_radioBox {
  background: var(--brand-purple-500);
  border-color: var(--brand-purple-500);
}
.FF_radio input:checked ~ .FF_radioBox::after { transform: scale(1); }

/* Switch */
.FF_switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--brand-walnut-900);
  cursor: pointer;
  user-select: none;
  position: relative;
}
.FF_switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.FF_switchTrack {
  flex-shrink: 0;
  position: relative;
  width: 32px;
  height: 18px;
  background: var(--brand-sand-500);
  border-radius: 999px;
  transition: background-color 160ms ease;
}
.FF_switchTrack::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--neutral-white);
  box-shadow: 0 1px 2px rgba(61, 40, 23, 0.25);
  transition: transform 160ms ease;
}
.FF_switch:hover input:not(:disabled) ~ .FF_switchTrack {
  background: var(--brand-purple-300);
}
.FF_switch input:focus-visible ~ .FF_switchTrack {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.FF_switch input:checked ~ .FF_switchTrack {
  background: var(--brand-purple-500);
}
.FF_switch input:checked ~ .FF_switchTrack::after {
  transform: translateX(14px);
}


/* == components/LightboxImage.module.css (prefix Lb_) == */
.Lb_thumbButton {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
}

.Lb_thumbButton:focus-visible {
  outline: 2px solid var(--accent, currentColor);
  outline-offset: 4px;
}

.Lb_thumbImg {
  display: block;
  transition: opacity 0.15s ease;
}

.Lb_thumbButton:hover .Lb_thumbImg {
  opacity: 0.85;
}

.Lb_dialog {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  background: rgba(0, 0, 0, 0.88);
  color: white;
  cursor: zoom-out;
  overflow: hidden;
}

.Lb_dialog::backdrop {
  background: rgba(0, 0, 0, 0.88);
}

.Lb_dialog[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  box-sizing: border-box;
  animation: fadeIn 0.15s ease;
}

.Lb_backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: zoom-out;
}

.Lb_backdrop:focus {
  outline: none;
}

.Lb_fullImage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: 1;
  pointer-events: none;
}

.Lb_closeButton {
  position: fixed;
  top: var(--space-3);
  right: var(--space-3);
  background: transparent;
  border: 0;
  color: white;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 2;
}

.Lb_closeButton:hover {
  background: rgba(255, 255, 255, 0.15);
}

.Lb_closeButton:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* == components/Section.module.css (prefix Sec_) == */
/* Section — page-shell helpers ported from day11/marketing.css (.mk-section, .mk-container) */

.Sec_section { padding: 58px 0; }
.Sec_tight { padding: 38px 0; }

.Sec_white { background: var(--bg-card); }
.Sec_cream { background: var(--brand-cream-500); }
.Sec_walnut { background: var(--brand-walnut-900); color: var(--brand-cream-500); }

.Sec_container { max-width: 1140px; margin: 0 auto; padding: 0 32px; }
.Sec_narrow { max-width: 760px; }
.Sec_prose { max-width: var(--measure-prose); }


/* == components/TopBar.module.css (prefix Tb_) == */
/* TopBar — ported from day7/nav.css (.topbar / .topbar--marketing) */

.Tb_topbar {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
  padding: 0 32px;
  background: var(--brand-cream-500);
  border-bottom: 1px solid var(--brand-sand-500);
  font-family: var(--font-sans);
}

.Tb_brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.Tb_brandMark { width: 32px; height: 32px; flex-shrink: 0; }
.Tb_brandName {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--brand-purple-500);
}

.Tb_links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.Tb_link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 120ms ease, color 120ms ease;
  position: relative;
}
.Tb_link:hover { color: var(--fg-1); background: rgba(50, 16, 88, 0.04); }
.Tb_linkActive { color: var(--brand-purple-500); }
.Tb_linkActive::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: -26px;
  height: 2px;
  background: var(--brand-purple-500);
  border-radius: 1px;
}

/* ─── Dropdown menus ─── */

.Tb_link {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.Tb_dropdown { position: relative; }

.Tb_chevron {
  width: 12px;
  height: 12px;
  transition: transform 120ms ease;
}
[aria-expanded="true"] > .Tb_chevron { transform: rotate(180deg); }

.Tb_splitTrigger {
  display: inline-flex;
  align-items: center;
}
.Tb_splitLink { padding-right: 4px; }
.Tb_splitToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 32px;
  padding: 0;
  margin-right: 6px;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--fg-2);
  cursor: pointer;
}
.Tb_splitToggle:hover { color: var(--fg-1); background: rgba(50, 16, 88, 0.04); }

.Tb_link:focus-visible,
.Tb_splitToggle:focus-visible,
.Tb_menuLink:focus-visible {
  outline: 2px solid var(--brand-purple-500);
  outline-offset: 2px;
}

.Tb_menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  min-width: 240px;
  max-width: 320px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--bg-card, #fff);
  border: 1px solid var(--brand-sand-500);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(61, 40, 23, 0.12);
}
/* Invisible bridge so the pointer can travel from the label to the menu. */
.Tb_menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -10px;
  height: 10px;
}
.Tb_menu[hidden] { display: none; }

.Tb_menuLink {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--fg-1);
}
.Tb_menuLink:hover { background: rgba(50, 16, 88, 0.05); }
.Tb_menuLabel { font-size: 14px; font-weight: 500; }
.Tb_menuDescription { font-size: 13px; line-height: 1.4; color: var(--fg-3); }

.Tb_actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ─── Narrow screens: links collapse behind a Menu button ─── */

.Tb_mobile { display: none; }

.Tb_menuButton {
  padding: 6px 12px;
  font: 500 14px/1.2 var(--font-sans);
  color: var(--fg-1);
  background: none;
  border: 1px solid var(--brand-sand-500);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.Tb_menuButton:focus-visible {
  outline: 2px solid var(--brand-purple-500);
  outline-offset: 2px;
}

.Tb_mobilePanel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  padding: 8px 16px 20px;
  background: var(--brand-cream-500);
  border-bottom: 1px solid var(--brand-sand-500);
  box-shadow: 0 12px 24px rgba(61, 40, 23, 0.10);
}
.Tb_mobilePanel[hidden] { display: none; }

.Tb_mobileList,
.Tb_mobileSubList {
  list-style: none;
  margin: 0;
  padding: 0;
}
.Tb_mobileList > li { border-bottom: 1px solid var(--brand-sand-300, rgba(61, 40, 23, 0.1)); }
.Tb_mobileList > li:last-child { border-bottom: 0; }

.Tb_mobileLink,
.Tb_mobileHeading {
  display: block;
  padding: 14px 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--fg-1);
  text-decoration: none;
}
.Tb_mobileHeading { color: var(--fg-3); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; padding-bottom: 4px; }
.Tb_mobileSubList { padding: 0 0 10px 12px; }
.Tb_mobileSubLink {
  display: block;
  padding: 9px 4px;
  font-size: 15px;
  color: var(--fg-2);
  text-decoration: none;
}

@media (max-width: 900px) {
  .Tb_topbar { padding: 0 16px; gap: 12px; }
  .Tb_links { display: none; }
  .Tb_mobile { display: block; }
  /* Keep only the primary call to action; the rest move into the menu. */
  .Tb_actions > :not(:last-child) { display: none; }
  .Tb_actions { margin-left: auto; }
  .Tb_brandName { font-size: 20px; }
}


/* == components/BackLink.module.css (prefix Bk_) == */
.Bk_wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 16px 32px 0;
  background: var(--brand-cream-500);
}

.Bk_link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--fg-2);
  text-decoration: none;
  transition: color 120ms ease, background 120ms ease;
}

.Bk_link:hover {
  color: var(--brand-walnut-900);
  background: rgba(50, 16, 88, 0.06);
}

.Bk_link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.Bk_chevron {
  width: 18px;
  height: 18px;
}


/* == components/blocks/HeroBlock.module.css (prefix Hero_) == */
.Hero_hero {
  max-width: 800px;
  padding-block: var(--space-7);
}

.Hero_eyebrow {
  margin-bottom: var(--space-3);
  color: var(--fg-3);
}

.Hero_hero.Hero_wide {
  max-width: none;
}

.Hero_headline {
  margin-bottom: var(--space-4);
  text-wrap: balance;
}

/* Editor-chosen line breaks only apply once there is room for them. */
@media (max-width: 640px) {
  .Hero_break { display: none; }
}

.Hero_subhead {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-tracking);
  color: var(--fg-2);
  margin: 0 0 var(--space-5);
}

.Hero_lede {
  color: var(--fg-2);
  max-width: 60ch;
  margin: 0 0 var(--space-6);
}

.Hero_actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ─── Photographic-background variant ─── */

.Hero_heroPhoto {
  position: relative;
  isolation: isolate;
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: var(--space-9);
}

.Hero_bgWrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.Hero_bgImage {
  object-fit: cover;
  object-position: center;
}

.Hero_bgOverlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.Hero_overlay-none .Hero_bgOverlay { display: none; }

.Hero_overlay-scrim .Hero_bgOverlay {
  background: linear-gradient(
    to top,
    rgba(61, 40, 23, 0.78) 0%,
    rgba(61, 40, 23, 0.35) 55%,
    rgba(61, 40, 23, 0.10) 100%
  );
}

.Hero_overlay-walnut .Hero_bgOverlay {
  background: rgba(61, 40, 23, 0.70);
}

.Hero_overlay-walnut-deep .Hero_bgOverlay {
  background: rgba(61, 40, 23, 0.85);
}

.Hero_fg {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Light type over photograph */

.Hero_onPhoto.Hero_hero { /* applied to .hero */
  /* no-op container so selectors below can compose */
}

.Hero_onPhoto .Hero_eyebrow { color: var(--brand-cream-500); opacity: 0.85; }
.Hero_onPhoto .Hero_headline { color: var(--brand-cream-500); }
.Hero_onPhoto .Hero_subhead { color: var(--brand-cream-500); opacity: 0.92; }
.Hero_onPhoto .Hero_lede { color: var(--brand-cream-500); opacity: 0.92; }


/* == components/blocks/RichTextBlock.module.css (prefix Rt_) == */
.Rt_prose {
  /* Lexical's React output emits raw <p>, <h2>, <ul>, etc.
     globals.css already styles these via the t-* classes; the rules
     below cover prose-specific spacing within RichText blocks. */
}

.Rt_prose p,
.Rt_prose li {
  /* Marketing rich text is read carefully by the target buyer. Bump
     from the default 15px body to 17px / 1.6 line-height — one step
     under the Hero lede (18px) so the visual flow from Hero into the
     body is smooth, and lines stay around 70ch at the narrow
     container width. */
  font-size: 17px;
  line-height: 1.6;
}

.Rt_prose p {
  margin: 0 0 var(--space-4);
}

.Rt_prose h2 {
  margin: var(--space-6) 0 var(--space-3);
}

.Rt_prose h3 {
  margin: var(--space-5) 0 var(--space-3);
}

.Rt_prose ul,
.Rt_prose ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

.Rt_prose li {
  margin-bottom: var(--space-2);
}

.Rt_prose blockquote {
  margin: var(--space-5) 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--brand-purple-500);
  font-style: italic;
  color: var(--fg-2);
}

.Rt_prose a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.Rt_prose a:hover {
  color: var(--link-hover);
}

.Rt_prose code {
  background: var(--brand-cream-500);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 0 0.3em;
  font-size: 0.9em;
}

.Rt_prose pre {
  background: var(--brand-walnut-900);
  color: var(--brand-cream-500);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--space-5) 0;
}

.Rt_prose pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
}


/* == components/blocks/FeatureGridBlock.module.css (prefix Fg_) == */
.Fg_header {
  margin-bottom: var(--space-6);
  max-width: 60ch;
}

.Fg_eyebrow {
  margin-bottom: var(--space-2);
  color: var(--fg-3);
}

.Fg_headline {
  margin: 0;
}

.Fg_grid {
  display: grid;
  gap: var(--space-5);
}

.Fg_cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.Fg_cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.Fg_cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.Fg_cols5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

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

@media (max-width: 900px) {
  .Fg_cols3, .Fg_cols4, .Fg_cols5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .Fg_grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.Fg_feature {
  padding: var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.Fg_featureLink {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.Fg_featureLink:hover {
  border-color: var(--brand-walnut-700);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.Fg_featureLink:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.Fg_icon {
  font-family: var(--font-mono);
  font-size: var(--h4-size);
  color: var(--brand-purple-500);
  margin-bottom: var(--space-3);
}

.Fg_featureTitle {
  margin: 0 0 var(--space-2);
}

.Fg_featureBody {
  color: var(--fg-2);
  margin: 0;
}


/* == components/blocks/IframeBlock.module.css (prefix If_) == */
.If_figure {
  margin: 0 auto;
}

.If_prose {
  max-width: var(--measure-prose);
}

.If_wide {
  max-width: none;
}

.If_fullBleed {
  max-width: none;
  width: 100%;
}

.If_frame {
  position: relative;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.If_aspect169 { aspect-ratio: 16 / 9; }
.If_aspect43  { aspect-ratio: 4 / 3; }
.If_aspect11  { aspect-ratio: 1 / 1; }
.If_aspect219 { aspect-ratio: 21 / 9; }

.If_iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.If_caption {
  margin-top: var(--space-3);
  text-align: center;
  color: var(--fg-2);
}

.If_image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}


/* == components/blocks/ImageBlock.module.css (prefix Img_) == */
.Img_figure {
  margin: 0 auto;
}

.Img_prose {
  max-width: var(--measure-prose);
}

.Img_wide {
  /* Default — fills the Container */
  max-width: none;
}

.Img_fullBleed {
  max-width: none;
  width: 100%;
}

.Img_imageWrap {
  width: 100%;
  /* Light backdrop and a soft border so SVG diagrams with
     transparent backgrounds still read against a cream Section. */
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.Img_image {
  display: block;
  width: 100%;
  height: auto;
}

.Img_caption {
  margin-top: var(--space-3);
  text-align: center;
  color: var(--fg-2);
}


/* == components/blocks/CTABandBlock.module.css (prefix Cta_) == */
.Cta_band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.Cta_copy {
  flex: 1;
  min-width: 280px;
}

.Cta_headline {
  margin: 0 0 var(--space-2);
}

.Cta_subhead {
  color: var(--fg-2);
  margin: 0;
  max-width: 60ch;
}

.Cta_actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Purple variant overrides Section's default cream background. */
.Cta_purple {
  background: var(--brand-purple-500);
  color: var(--fg-on-purple);
}

.Cta_purple .Cta_headline,
.Cta_purple .Cta_subhead {
  color: var(--fg-on-purple);
}


/* == components/blocks/StatStripBlock.module.css (prefix Ss_) == */
.Ss_strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
}

.Ss_stat {
  text-align: left;
}

.Ss_value {
  font-family: var(--font-display);
  font-size: var(--display-lg-size);
  line-height: var(--display-lg-lh);
  letter-spacing: var(--display-lg-tracking);
  color: var(--brand-purple-500);
  margin-bottom: var(--space-2);
}

.Ss_label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--body-md-size);
  color: var(--fg-1);
  margin-bottom: var(--space-1);
}

.Ss_note {
  font-family: var(--font-sans);
  font-size: var(--caption-size);
  letter-spacing: var(--caption-tracking);
  color: var(--fg-3);
}


/* == app/(frontend)/resources/[slug]/page.module.css (prefix ResPage_) == */
.ResPage_type {
  margin-bottom: var(--space-2);
  color: var(--fg-3);
}

.ResPage_title {
  margin: 0 0 var(--space-4);
}

.ResPage_meta {
  font-family: var(--font-sans);
  font-size: var(--body-sm-size);
  color: var(--fg-3);
  margin: 0 0 var(--space-4);
}

.ResPage_summary {
  color: var(--fg-2);
  margin: 0 0 var(--space-5);
}

.ResPage_actions {
  margin-top: var(--space-5);
}

.ResPage_body p,
.ResPage_body li {
  font-size: 17px;
  line-height: 1.6;
}

.ResPage_body p {
  margin: 0 0 var(--space-4);
}

.ResPage_body h2 {
  margin: var(--space-6) 0 var(--space-3);
}

.ResPage_body h3 {
  margin: var(--space-5) 0 var(--space-3);
}

.ResPage_body ul,
.ResPage_body ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}


/* == app/(frontend)/resources/security-and-architecture-whitepaper/page.module.css (prefix Wp_) == */
.Wp_eyebrow {
  margin-bottom: var(--space-2);
  color: var(--fg-3);
}

.Wp_title {
  margin: 0 0 var(--space-3);
}

.Wp_meta {
  font-family: var(--font-sans);
  font-size: var(--body-sm-size);
  color: var(--fg-3);
  margin: 0 0 var(--space-5);
}

.Wp_summary {
  color: var(--fg-2);
  margin: 0 0 var(--space-5);
}

.Wp_toc {
  border-top: 1px solid var(--fg-3);
  border-bottom: 1px solid var(--fg-3);
  padding: var(--space-4) 0;
  margin: var(--space-5) 0 0;
  font-family: var(--font-sans);
  font-size: var(--body-sm-size);
}

.Wp_tocLabel {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--fg-3);
  margin: 0 0 var(--space-3);
}

.Wp_tocList {
  list-style: none;
  padding: 0;
  margin: 0;
  column-count: 2;
  column-gap: var(--space-5);
}

.Wp_tocList li {
  break-inside: avoid;
  margin: 0 0 var(--space-2);
}

.Wp_tocList a {
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: 1px dotted var(--fg-3);
}

.Wp_tocList a:hover {
  border-bottom-style: solid;
}

.Wp_section h2 {
  margin: var(--space-6) 0 var(--space-3);
  scroll-margin-top: var(--space-7);
}

.Wp_section h3 {
  margin: var(--space-5) 0 var(--space-2);
}

.Wp_section p,
.Wp_section li {
  font-size: 17px;
  line-height: 1.6;
}

.Wp_section p {
  margin: 0 0 var(--space-4);
  color: var(--fg-1);
}

.Wp_section ul,
.Wp_section ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

.Wp_section ul li,
.Wp_section ol li {
  margin: 0 0 var(--space-2);
}

.Wp_section code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-2);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}

.Wp_section blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--fg-3);
  font-style: italic;
  color: var(--fg-2);
}

.Wp_figure {
  margin: var(--space-6) 0;
  text-align: center;
}

.Wp_figure img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: var(--bg-2);
}

.Wp_figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--body-sm-size);
  color: var(--fg-2);
  text-align: center;
}

.Wp_tableWrap {
  margin: var(--space-5) 0;
  overflow-x: auto;
}

.Wp_section table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--body-sm-size);
}

.Wp_section th,
.Wp_section td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--bg-3);
  vertical-align: top;
}

.Wp_section th {
  font-weight: 600;
  background: var(--bg-2);
}

.Wp_callout {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  background: var(--bg-2);
  border-left: 3px solid var(--accent);
}

.Wp_callout p:last-child {
  margin-bottom: 0;
}

.Wp_ctaBand {
  text-align: center;
}

.Wp_ctaBand h2 {
  margin: 0 0 var(--space-3);
}

.Wp_ctaBand p {
  margin: 0 auto var(--space-5);
  max-width: 60ch;
}

.Wp_ctaActions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}


/* == app/(frontend)/solutions/[industry]/[useCase]/page.module.css (prefix UcPage_) == */
.UcPage_eyebrow {
  margin-bottom: var(--space-2);
  color: var(--fg-3);
}

.UcPage_headline {
  margin: 0 0 var(--space-4);
  max-width: 24ch;
}

.UcPage_lede {
  color: var(--fg-2);
  max-width: 60ch;
  margin: 0;
}

.UcPage_section {
  margin-bottom: var(--space-7);
}

.UcPage_section p,
.UcPage_section li {
  font-size: 17px;
  line-height: 1.6;
}

.UcPage_section p {
  margin: 0 0 var(--space-4);
}

.UcPage_section h2 {
  margin-bottom: var(--space-4);
}

.UcPage_cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  color: var(--fg-on-purple);
}

.UcPage_ctaHeadline {
  margin: 0 0 var(--space-2);
  color: var(--fg-on-purple);
}

.UcPage_ctaSub {
  color: var(--brand-cream-500);
  margin: 0;
  max-width: 50ch;
}