:root {
  /* Kuwait Mirror brand palette (kuwaitmirror.com --ink/--paper scheme) */
  --bg: #eeedeb;
  --bg-raised: #f6f8f9;
  --bg-inset: #e2e0dd;
  --border: rgba(52, 65, 75, 0.14);
  --border-bright: rgba(52, 65, 75, 0.26);
  --text: #34414b;
  --text-dim: #546878;
  --text-faint: #778fa1;
  --accent: #34414b;
  --accent-dim: #232c33;
  --warn: #546878;
  --danger: #ce1126;
  --info: #34414b;
  --good: #00732f;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---- Shell layout ---- */

.kmi-header {
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.kmi-header-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 10px 24px;
  min-height: 52px;
}

.kmi-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
}

.kmi-logo {
  height: 26px;
  width: auto;
  display: block;
}

.kmi-brand-kicker {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.kmi-disclaimer-bar {
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11px;
  padding: 7px 24px;
  text-align: center;
}

.kmi-disclaimer-bar a {
  color: var(--text);
  text-decoration: underline;
}

.kmi-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 24px;
  border-top: 1px solid var(--border);
}

.kmi-globalsearch {
  display: flex;
  flex: 1;
  max-width: 420px;
  gap: 0;
}

.kmi-globalsearch input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: var(--bg-inset);
  border: 1px solid var(--border-bright);
  border-right: none;
  border-radius: 2px 0 0 2px;
  padding: 6px 10px;
}

.kmi-globalsearch input:focus {
  outline: none;
  border-color: var(--accent);
}

.kmi-globalsearch button {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--accent);
  color: var(--bg-raised);
  border: 1px solid var(--accent);
  border-radius: 0 2px 2px 0;
  padding: 0 12px;
  cursor: pointer;
}

.kmi-header-login {
  display: flex;
  gap: 0;
  flex-shrink: 0;
}

.kmi-header-login input {
  width: 220px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: var(--bg-inset);
  border: 1px solid var(--border-bright);
  border-right: none;
  border-radius: 2px 0 0 2px;
  padding: 6px 10px;
}

.kmi-header-login input:focus {
  outline: none;
  border-color: var(--accent);
}

.kmi-header-login button {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--accent);
  color: var(--bg-raised);
  border: 1px solid var(--accent);
  border-radius: 0 2px 2px 0;
  padding: 0 14px;
  cursor: pointer;
}

.kmi-header-login-error {
  padding: 6px 24px;
  font-size: 11px;
  color: var(--danger);
  text-align: right;
  border-top: 1px solid var(--border);
}

.kmi-session {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.kmi-session-credits {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 3px 7px;
  white-space: nowrap;
}

.kmi-session-credits-low {
  color: var(--danger);
  border-color: var(--danger);
}

.kmi-session-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: none;
  color: var(--text-dim);
  border: 1px solid var(--border-bright);
  border-radius: 2px;
  padding: 5px 9px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.kmi-session-btn:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

.kmi-session-btn-danger:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.kmi-messages {
  max-width: 1180px;
  margin: 12px auto 0;
  padding: 0 24px;
}

.kmi-message {
  font-size: 12px;
  padding: 8px 14px;
  border: 1px solid var(--border-bright);
  border-radius: 2px;
  margin-bottom: 8px;
  background: var(--bg-raised);
}

.kmi-message-warning { border-color: var(--danger); color: var(--danger); }
.kmi-message-info { border-color: var(--text-dim); color: var(--text-dim); }

.kmi-secret-reveal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  vertical-align: middle;
}

.kmi-secret-value {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 3px 8px;
  min-width: 340px;
  max-width: 100%;
  background: var(--bg-inset);
  border: 1px solid var(--border-bright);
  border-radius: 2px;
  color: var(--text);
}

.kmi-secret-value-sm { min-width: 150px; }

/* The "…" suffix on a truncated identifier (see the API Keys table) is
   deliberately NOT part of the <input>'s value — Copy must only ever
   copy the real identifier, never a trailing ellipsis character — but
   it still needs to look visually attached to the box, not floating
   outside it. kmi-secret-value-group joins an <input> and a following
   <span> into one seamless-looking box (input keeps its left border/
   radius, drops its right ones; the span is the mirror image), so the
   two elements read as one control despite being visually merged and
   functionally separate for copying purposes. */
.kmi-secret-value-group {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
}

.kmi-secret-value-joined {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.kmi-secret-value-ellipsis {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 3px 8px 3px 0;
  background: var(--bg-inset);
  border: 1px solid var(--border-bright);
  border-left: none;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  color: var(--text);
}

.kmi-secret-value-revoked {
  text-decoration: line-through;
  color: var(--danger);
  border-color: var(--danger);
  opacity: 0.75;
}

.kmi-copy-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 10px;
  background: var(--accent);
  color: var(--bg-raised);
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

.kmi-copy-btn:hover { background: var(--accent-dim); }

.kmi-nav a {
  color: var(--text-dim);
  padding: 6px 12px;
  border-radius: 3px;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.kmi-nav a:hover,
.kmi-nav a.active {
  color: var(--accent);
  background: var(--bg-inset);
  text-decoration: none;
}

.kmi-nav a.kmi-nav-other {
  margin-left: auto;
  color: var(--text-faint);
  font-style: italic;
}

.kmi-nav a.kmi-nav-other:hover {
  color: var(--text-dim);
  background: none;
}

.kmi-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px;
}

/* Every page's outermost blocks (.kmi-panel, .kmi-record, .kmi-section, …)
   carry their own margin-bottom for spacing *between* stacked elements —
   correct there, but on the true last element it stacks on top of
   .kmi-main's own bottom padding, making the gap before the footer bigger
   than the gap below the header for no reason. Zeroing it here keeps
   top/bottom page padding equal on every page from one place, instead of
   every template having to remember to override it on its own last block. */
.kmi-main > *:last-child {
  margin-bottom: 0;
}

.kmi-pagehead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.kmi-pagehead h1 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}

.kmi-pagehead .meta {
  color: var(--text-faint);
  font-size: 11px;
}

.kmi-crumb {
  color: var(--text-faint);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.kmi-crumb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.kmi-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.kmi-subtabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.kmi-subtabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.kmi-subtabs-row .kmi-subtabs {
  margin-bottom: 0;
}

/* A live, functional indicator — not decorative — see base.html: only
   rendered when there is a genuine unread Country Monitoring alert. */
.kmi-nav-livedot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--danger);
  animation: kmi-livedot-pulse 1.4s ease-in-out infinite;
  vertical-align: middle;
}

@keyframes kmi-livedot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.kmi-subtabs a {
  color: var(--text-dim);
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.kmi-subtabs a:hover,
.kmi-subtabs a.active {
  color: var(--accent);
  background: var(--bg-inset);
  border-color: var(--accent);
  text-decoration: none;
}

.kmi-crossmatch {
  font-size: 12px;
  color: var(--text-dim);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 8px 12px;
  margin-bottom: 18px;
}

.kmi-crossmatch a {
  color: var(--accent);
}

.kmi-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11px;
  color: var(--text-dim);
}

.kmi-activity-list li {
  padding: 2px 0;
}

/* ---- Filter bar ---- */

.kmi-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.kmi-filterfield {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kmi-filterfield label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.kmi-searchgroup {
  display: flex;
  gap: 6px;
}

.kmi-searchgroup select {
  min-width: 0;
  width: auto;
}

.kmi-filterbar input,
.kmi-filterbar select {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: var(--bg-inset);
  border: 1px solid var(--border-bright);
  border-radius: 2px;
  padding: 6px 8px;
  min-width: 140px;
}

.kmi-filterbar input:focus,
.kmi-filterbar select:focus {
  outline: none;
  border-color: var(--accent);
}

.kmi-filterfield-actions {
  flex-direction: row;
  gap: 8px;
}

.kmi-btn,
.kmi-filterbar button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--bg-raised);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 7px 14px;
  cursor: pointer;
}

.kmi-btn:hover,
.kmi-filterbar button:hover {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
}

.kmi-btn:disabled,
.kmi-filterbar button:disabled {
  background: none;
  color: var(--text-faint);
  border-color: var(--border);
  cursor: not-allowed;
}

.kmi-filterfield-actions a {
  font-size: 11px;
  color: var(--text-dim);
  align-self: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Same look as .kmi-filterbar's own input/select styling, but usable
   standalone (full-width, not a fixed min-width flex chip) — for a form
   field laid out in its own <label> block rather than inside a filter
   bar, e.g. the public intake form's per-subject fields. */
.kmi-field-input {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: var(--bg-inset);
  border: 1px solid var(--border-bright);
  border-radius: 2px;
  padding: 6px 8px;
  width: 100%;
  box-sizing: border-box;
}

.kmi-field-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ---- Panels / module sections ---- */

.kmi-panel {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  margin-bottom: 24px;
  overflow-x: auto;
}

.kmi-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.kmi-panel-head a {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}

.kmi-collapsible > summary.kmi-panel-head {
  cursor: pointer;
  list-style: none;
}

.kmi-collapsible > summary.kmi-panel-head::-webkit-details-marker {
  display: none;
}

.kmi-collapsible > summary.kmi-panel-head::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s ease;
}

.kmi-collapsible[open] > summary.kmi-panel-head::before {
  transform: rotate(90deg);
}

/* ---- Restricted-record lock icon ---- */

.kmi-lock {
  vertical-align: -2px;
  display: inline-block;
}

.kmi-lock-closed {
  color: #b91c1c;
}

.kmi-lock-open {
  color: var(--text-faint);
}

/* ---- Overview stat boxes ---- */

.kmi-stats {
  display: flex;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 24px;
}

.kmi-stat {
  flex: 1;
  background: var(--bg-raised);
  padding: 16px;
  text-align: center;
}

.kmi-stat .kmi-stat-num {
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
}

.kmi-stat .kmi-stat-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 6px;
}

@media (max-width: 640px) {
  .kmi-stats {
    flex-wrap: wrap;
  }
  .kmi-stat {
    flex-basis: 100%;
  }
}

/* ---- Tables ---- */

table.kmi-table {
  width: 100%;
  border-collapse: collapse;
}

table.kmi-table th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-inset);
}

table.kmi-table td {
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  overflow-wrap: anywhere;
}

table.kmi-table tr:last-child td {
  border-bottom: none;
}

table.kmi-table tr:hover td {
  background: var(--bg-inset);
}

.kmi-ref {
  color: var(--text-faint);
  font-size: 11px;
}

.kmi-empty {
  padding: 24px 16px;
  color: var(--text-faint);
  font-size: 12px;
}

/* ---- Badges ---- */

.badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
  border: 1px solid currentColor;
  margin: 2px 4px 2px 0;
  /* overflow-wrap is an inherited property, so table.kmi-table td's own
     overflow-wrap:anywhere (needed for long free-text cells like a URL or
     description) cascades into every badge too — inside a narrow table
     column that shrinks an inline-block badge down tight, "anywhere"
     breaks a long choice-field label (e.g. a CaseType like "Press / Media
     Freedom Violation") mid-word, one character per line, instead of at
     its own word spaces. Reset to normal word-wrapping here specifically,
     independent of whatever the surrounding cell needs. */
  overflow-wrap: normal;
}

.badge-accent { color: var(--accent); }
.badge-warn { color: var(--warn); }
.badge-danger { color: var(--danger); }
.badge-info { color: var(--info); }
.badge-dim { color: var(--text-dim); }
.badge-good { color: var(--good); }

/* ---- Detail record layout ---- */

.kmi-record {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  overflow-x: auto;
}

.kmi-record-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.kmi-record-head h1 {
  font-size: 18px;
  margin: 0 0 6px;
  color: var(--text);
}

.kmi-record-head-photo {
  display: flex;
  align-items: center;
  gap: 16px;
}

.kmi-photo {
  width: 64px;
  height: 64px;
  border-radius: 3px;
  border: 1px solid var(--border-bright);
  object-fit: cover;
  flex-shrink: 0;
}

.kmi-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-inset);
  color: var(--text-faint);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}

code {
  font-family: var(--font-mono);
  background: var(--bg-inset);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 0.95em;
}

.kmi-fields {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
}

.kmi-fields dt {
  padding: 10px 20px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  background: var(--bg-inset);
}

.kmi-fields dd {
  margin: 0;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

/* ---- Read more / read less (apps.core.templatetags.text_extras) ---- */

.kmi-readmore {
  max-height: 6.4em; /* ~4 lines at line-height:1.6 */
  overflow: hidden;
  position: relative;
  line-height: 1.6;
}

.kmi-readmore:not(.expanded):not(.kmi-readmore-noclamp)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.6em;
  background: linear-gradient(to bottom, transparent, var(--bg-raised));
}

.kmi-readmore.expanded {
  max-height: none;
}

.kmi-readmore-toggle {
  margin-top: 8px;
}

/* .kmi-session-btn's own `display: inline-block` is an author rule, so
   it beats the browser's built-in `[hidden] { display: none }` UA rule
   outright regardless of selector specificity (author origin always
   wins over user-agent origin in the cascade) — read-more.js setting
   .hidden = true on a short, non-overflowing block's toggle button did
   nothing without this override, confirmed directly: the attribute was
   present in the DOM but the button still rendered. Scoped to the class
   itself (not just .kmi-readmore-toggle, the first button this hit) so
   any other .kmi-session-btn toggled via .hidden — e.g. intake-form.js's
   "+ Add Another Subject" button — is covered by the same fix instead of
   needing its own one-off rule discovered the same way. */
.kmi-session-btn[hidden] {
  display: none;
}

/* ---- Pagination ---- */

.kmi-pagination {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
}

/* ---- Footer ---- */

.kmi-footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px 40px;
  color: var(--text-faint);
  font-size: 11px;
  text-align: center;
  border-top: 1px solid var(--border);
}

/* ---- Landing page ---- */

.kmi-cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--bg-raised);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 14px 32px;
  text-decoration: none;
}

.kmi-cta:hover {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
  text-decoration: none;
}

.kmi-section {
  max-width: 1180px;
  margin: 0 auto 48px;
  padding: 0 24px;
}

.kmi-section-head {
  text-align: center;
  margin-bottom: 24px;
}

.kmi-section-head h2 {
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 6px;
}

.kmi-section-head p {
  color: var(--text-dim);
  font-size: 12px;
  margin: 0;
}

/* Pricing */

.kmi-pricing-product {
  margin-bottom: 32px;
}

.kmi-pricing-product h3 {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.kmi-pricing-grid {
  display: grid;
  /* No max-width here (unlike .kmi-faq, which deliberately stays
     narrower for prose readability) — this must span the same width as
     .kmi-stats directly above it, both bounded only by .kmi-section's
     own 1180px. The old 760px cap here was sized for exactly 2 tiers;
     adding a 3rd (Demo) under that same cap squeezed every card into a
     ~240px column, which is what actually caused the cramped, heavily-
     wrapped text — not the number of tiers itself. minmax(220px, 1fr)
     fits all 4 public tiers (Trial/Standard/Enterprise/Sovereign) across
     one row at .kmi-section's 1180px width instead of stranding the 4th
     alone on its own row, while still wrapping to fewer columns
     automatically on a narrow viewport (see the max-width:640px rule
     below), same responsive mechanism .kmi-stats already uses. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.kmi-plan {
  border: 1px solid var(--border-bright);
  background: var(--bg-raised);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kmi-plan h4 {
  font-size: 13px;
  color: var(--text);
  margin: 0;
}

.kmi-plan .price {
  font-size: 22px;
  font-weight: 600;
  color: var(--accent);
}

.kmi-plan .price small {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 400;
}

.kmi-plan p {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.5;
}

.kmi-plan ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.kmi-plan ul li::before {
  content: "— ";
  color: var(--text-faint);
}

.kmi-subscribe-row {
  text-align: center;
  margin-top: 28px;
}

/* FAQ */

.kmi-faq {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
}

.kmi-faq-item {
  border-bottom: 1px solid var(--border);
}

.kmi-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 4px;
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kmi-faq-item summary::-webkit-details-marker {
  display: none;
}

.kmi-faq-item summary::after {
  content: "+";
  color: var(--text-faint);
  font-size: 16px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.kmi-faq-item[open] summary::after {
  transform: rotate(45deg);
}

.kmi-faq-item p {
  margin: 0;
  padding: 0 4px 18px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-dim);
}

.kmi-faq-item p + ul {
  list-style: none;
  margin: -8px 0 0;
  padding: 0 4px 18px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-dim);
}

.kmi-faq-item ul li::before {
  content: "— ";
  color: var(--text-faint);
}

/* ---- Small screens ---- */

@media (max-width: 720px) {
  .kmi-header-top {
    flex-direction: column;
    align-items: stretch;
  }

  .kmi-brand {
    align-items: center;
  }

  .kmi-globalsearch,
  .kmi-header-login {
    max-width: none;
    width: 100%;
  }

  .kmi-globalsearch input,
  .kmi-header-login input {
    flex: 1;
    width: auto;
  }

  .kmi-session {
    justify-content: center;
  }

  .kmi-header-login-error {
    text-align: center;
  }

  .kmi-nav {
    flex-wrap: nowrap;
    justify-content: center;
  }

  .kmi-nav a {
    flex-shrink: 0;
  }

  .kmi-fields {
    grid-template-columns: 1fr;
  }

  .kmi-fields dt {
    border-bottom: none;
    padding-bottom: 2px;
  }

  /* A wide table (many columns, long cell content) doesn't actually
     become usable by scrolling sideways inside .kmi-panel on a phone —
     you'd see one sliver of one column at a time. Instead, collapse each
     row into a stack of labelled fields; base.html mirrors each column's
     header onto the matching cell as data-label for this to read from. */
  table.kmi-table thead {
    display: none;
  }

  table.kmi-table,
  table.kmi-table tbody,
  table.kmi-table tr,
  table.kmi-table td {
    display: block;
    width: 100%;
  }

  table.kmi-table tr {
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
  }

  table.kmi-table tr:last-child {
    border-bottom: none;
  }

  table.kmi-table td {
    border-bottom: none;
    padding: 4px 16px;
  }

  table.kmi-table td:empty {
    display: none;
  }

  table.kmi-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 2px;
  }
}