/* ExitKit — deep navy, ivory, brass. Fraunces for display, Inter for text.
   Fonts are self-hosted: the CSP blocks external font hosts, and the same files
   are installed system-wide for the DOCX/PDF renderer so screen and document
   agree. */

@font-face {
  font-family: 'Fraunces';
  src: url('/static/fonts/fraunces.woff2') format('woff2-variations'),
       url('/static/fonts/fraunces.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'InterVar';
  src: url('/static/fonts/inter.woff2') format('woff2-variations'),
       url('/static/fonts/inter.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --navy: #0B2545;
  --navy-700: #12325c;
  --ivory: #FAF7F0;
  --brass: #B8860B;
  --brass-light: #d9a520;
  --ink: #12161C;
  --muted: #555F6C;
  --line: #E4DED2;
  --ok: #1E6E4B;
  --warn: #8A5B00;
}

body {
  font-family: 'InterVar', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--ivory);
  font-size: 1.02rem;
  line-height: 1.65;
}

h1, h2, h3, h4, .ek-display {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--navy);
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.2; margin-top: 2.2rem; }
h3 { font-size: 1.2rem; }

a { color: var(--navy); text-decoration-color: var(--brass); text-underline-offset: 3px; }
a:hover { color: var(--brass); }

/* --- Wordmark ---------------------------------------------------------- */
.ek-wordmark {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  color: var(--navy);
}
.ek-wordmark span { color: var(--brass); }
.ek-wordmark-light { color: var(--ivory); font-size: 1.35rem; }
.ek-wordmark-light span { color: var(--brass-light); }


/* --- Buttons ----------------------------------------------------------- */
.btn-brand {
  background: var(--navy); color: #fff; border: 1px solid var(--navy);
  font-weight: 600; border-radius: 4px; padding: 0.55rem 1.2rem;
}
.btn-brand:hover, .btn-brand:focus {
  background: var(--navy-700); color: #fff; border-color: var(--navy-700);
}
.btn-brass {
  background: var(--brass); color: #fff; border: 1px solid var(--brass);
  font-weight: 600; border-radius: 4px; padding: 0.55rem 1.2rem;
}
.btn-brass:hover, .btn-brass:focus { background: #a2760a; color: #fff; }
.btn-outline-brand {
  border: 1px solid var(--navy); color: var(--navy); font-weight: 600;
  border-radius: 4px; padding: 0.55rem 1.2rem; background: transparent;
}
.btn-outline-brand:hover, .btn-outline-brand:focus { background: var(--navy); color: #fff; }
/* On the dark hero an outline button must outline in light, not navy-on-navy. */
.ek-hero .btn-outline-brand { border-color: rgba(255,255,255,.55); color: var(--ivory); }
.ek-hero .btn-outline-brand:hover { background: var(--ivory); color: var(--navy); border-color: var(--ivory); }
.ek-hero .btn-brand { background: var(--brass); border-color: var(--brass); }
.ek-hero .btn-brand:hover { background: #a2760a; border-color: #a2760a; }

/* --- Hero -------------------------------------------------------------- */
.ek-hero {
  background: linear-gradient(170deg, var(--navy) 0%, #071a33 100%);
  color: var(--ivory);
  padding: 4.5rem 0 4rem;
}
.ek-hero h1 { color: var(--ivory); }
.ek-hero .lead { color: #cfd8e4; font-size: 1.15rem; max-width: 34rem; }
.ek-eyebrow {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem;
  font-weight: 700; color: var(--brass-light);
}
.ek-trust-strip {
  border-top: 1px solid rgba(255,255,255,0.14);
  margin-top: 2.5rem; padding-top: 1.25rem;
  color: #b9c4d3; font-size: 0.87rem;
}
.ek-trust-strip span { white-space: nowrap; }

/* --- Sections ---------------------------------------------------------- */
.ek-section { padding: 3.5rem 0; }
.ek-section-alt { background: #fff; border-block: 1px solid var(--line); }

.ek-card {
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 1.6rem;
}
/* Equal-height only where cards sit side by side in a row. Applying height:100%
   to every .ek-card made the first card in a sidebar stretch to the height of
   the (much taller) main column, then pushed the card beneath it out of the row
   and over the footer. */
.ek-card-fill { height: 100%; }
.ek-card h3 { margin-top: 0; }

.ek-step-num {
  font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 700;
  color: var(--brass); line-height: 1;
}

/* --- Estimator --------------------------------------------------------- */
.ek-estimator {
  background: #fff; border: 1px solid var(--line);
  border-top: 3px solid var(--brass); border-radius: 6px; padding: 1.75rem;
}
.ek-result-figure {
  font-family: 'Fraunces', serif; font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--navy); line-height: 1.15;
}
.ek-source-note { font-size: 0.82rem; color: var(--muted); }
.ek-source-note a { color: var(--muted); }

/* --- Pricing ----------------------------------------------------------- */
.ek-price-card {
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 2rem;
}
.ek-price-card { height: 100%; }   /* pricing cards are always a side-by-side pair */
.ek-price-card.featured { border: 2px solid var(--navy); position: relative; }
.ek-price-card.featured::before {
  content: 'Most complete'; position: absolute; top: -0.75rem; left: 2rem;
  background: var(--brass); color: #fff; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.7rem;
  border-radius: 3px;
}
.ek-price {
  font-family: 'Fraunces', serif; font-size: 2.8rem; font-weight: 700; color: var(--navy);
}
.ek-price-card ul { list-style: none; padding-left: 0; }
.ek-price-card li { padding: 0.3rem 0 0.3rem 1.6rem; position: relative; font-size: 0.95rem; }
.ek-price-card li::before {
  content: '\F26E'; font-family: 'bootstrap-icons'; position: absolute; left: 0;
  color: var(--brass); font-size: 0.9rem;
}

/* --- Honest / caution blocks ------------------------------------------- */
.ek-honest {
  background: #fff; border-left: 3px solid var(--brass);
  padding: 1.25rem 1.5rem; border-radius: 0 4px 4px 0;
}
/* The hero sets a light body colour for its own text. Any light-background card
   placed inside it must reassert dark text or it inherits ivory-on-white. */
.ek-hero .ek-honest,
.ek-hero .ek-caution,
.ek-hero .ek-card {
  color: var(--ink);
}
.ek-hero .ek-honest h1, .ek-hero .ek-honest h2, .ek-hero .ek-honest h3,
.ek-hero .ek-card h1, .ek-hero .ek-card h2, .ek-hero .ek-card h3 {
  color: var(--navy);
}
.ek-hero .ek-honest .ek-muted, .ek-hero .ek-card .ek-muted { color: var(--muted); }
.ek-caution {
  background: #FFF8E8; border: 1px solid #EBD9A8; border-radius: 4px;
  padding: 1rem 1.25rem; font-size: 0.93rem;
}

/* Sourced market context. Deliberately cooler and quieter than .ek-caution —
   it is reference material beside the owner's own figure, not a warning and
   not a recommendation. */
.ek-context {
  background: #F4F7FA; border: 1px solid #D8E2EC; border-radius: 4px;
  padding: 0.9rem 1.1rem;
}
.ek-context summary { cursor: pointer; color: var(--muted); }
.ek-context ul { padding-left: 1.1rem; }
.ek-context li { margin-bottom: 0.35rem; }

/* --- Prose ------------------------------------------------------------- */
.ek-prose { max-width: 44rem; }
.ek-prose p, .ek-prose li { font-size: 1.05rem; }
.ek-prose h2 { margin-top: 2.6rem; }
.ek-prose h3 { margin-top: 1.8rem; }
.ek-prose table { width: 100%; margin: 1.5rem 0; font-size: 0.95rem; }
.ek-prose th {
  background: var(--navy); color: #fff; padding: 0.6rem 0.75rem;
  font-weight: 600; font-size: 0.85rem;
}
.ek-prose td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }

/* --- Kit workspace ----------------------------------------------------- */
.ek-doc-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line);
}
.ek-doc-row:last-child { border-bottom: 0; }
.ek-badge {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 3px;
}
.ek-badge-ok { background: #E3F1EA; color: var(--ok); }
.ek-badge-wait { background: #FBF0D9; color: var(--warn); }
.ek-badge-muted { background: #EDEAE3; color: var(--muted); }

.ek-checklist-item {
  border: 1px solid var(--line); border-radius: 5px; background: #fff;
  padding: 1.1rem 1.25rem; margin-bottom: 0.85rem;
}
.ek-copy-field {
  background: var(--ivory); border: 1px solid var(--line); border-radius: 4px;
  padding: 0.7rem 0.85rem; font-size: 0.9rem; white-space: pre-wrap;
  max-height: 12rem; overflow-y: auto;
}

/* --- Utility ----------------------------------------------------------- */
.ek-muted { color: var(--muted); }
.form-control:focus, .form-select:focus {
  border-color: var(--brass); box-shadow: 0 0 0 0.2rem rgba(184,134,11,0.15);
}
@media (max-width: 767px) {
  .ek-hero { padding: 3rem 0 2.5rem; }
  .ek-section { padding: 2.5rem 0; }
}


/* --- Shared HCWF shell adjustments ------------------------------------- */
/* The shared navbar forces `width: 350px` with `max-height: none`, which suits
   the 5:1–6:1 logos most sites use. Ours is 4.34:1, so 350px wide renders ~81px
   tall and clips against the navbar's 8px padding. Cap the height and let width
   follow, so the mark scales down proportionally instead of being cropped.
   Colours and layout of the shell are deliberately left alone. */
.hcwf-navbar .navbar-brand img {
  width: auto !important;
  max-width: 320px !important;
  max-height: 54px !important;
  height: auto;
}
@media (max-width: 991px) {
  .hcwf-navbar .navbar-brand img { max-height: 44px !important; }
}
/* The footer logo has room to breathe, but not 250px of it. */
.site-footer img[alt="ExitKit"] { max-height: 68px; width: auto !important; }

/* Editorial pages sit on the ivory page background; the shell's dark navbar
   already provides contrast, so the old bespoke hero wrapper is retained only
   for the coloured hero band. */
.ek-hero { border-bottom: 1px solid rgba(255,255,255,.08); }

/* The shared footer markup carries class="site-footer" but takes its colours
   from the site stylesheet. Declaring the variables in :root is not enough —
   without these two lines the footer renders light text on the ivory page
   background and is effectively invisible. */
.site-footer {
  background: var(--mm-footer-bg);
  color: var(--mm-footer-text);
}
.site-footer h4,
.site-footer .footer-col-title { color: #fff; }
.site-footer a { color: #d5dde7; text-decoration: none; }
.site-footer a:hover { color: var(--secondary-color); text-decoration: underline; }
.site-footer .btn-gold {
  background: var(--brass); color: #fff; border: 1px solid var(--brass);
}

/* A marketplace the owner cannot use today. Faded, not hidden: the reason it is
   closed to them is the useful part, and it may open later. */
.ek-ineligible { opacity: 0.62; }
.ek-ineligible:hover, .ek-ineligible:focus-within { opacity: 1; }
.ek-tag {
  display: inline-block; vertical-align: middle; margin-left: 0.4rem;
  padding: 0.1rem 0.5rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  background: #F0E3E3; border: 1px solid #DCC3C3; color: #7A4A4A;
}
.ek-tag-soft { background: #EEF1F5; border-color: #D5DCE5; color: #4A5A70; }

/* Listing key facts. A two-column definition list that collapses to one on a
   phone — buyers scan these before reading a word of the prose. */
.ek-facts { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
@media (min-width: 576px) { .ek-facts { grid-template-columns: 1fr 1fr; } }
.ek-facts > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0; border-bottom: 1px solid var(--line);
}
.ek-facts dt { font-size: 0.88rem; color: var(--muted); font-weight: 500; margin: 0; }
.ek-facts dd { font-weight: 600; text-align: right; margin: 0; }
@media (min-width: 576px) { .ek-facts > div:nth-last-child(-n+2) { border-bottom: 0; } }

/* Directory cards. The two-column .ek-facts grid is built for the full-width
   listing page; inside a one-third-width card it squeezes a long value like
   "Built, not yet earning" against its own label. Always one column here. */
.ek-facts-compact { grid-template-columns: 1fr !important; }
.ek-facts-compact > div { padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.ek-facts-compact > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ek-facts-compact dd { font-size: 0.95rem; }

/* Category and stage chips. */
.ek-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.6rem; }
.ek-chip {
  display: inline-block; padding: 0.12rem 0.55rem; border-radius: 999px;
  font-size: 0.73rem; font-weight: 600; letter-spacing: 0.01em;
  background: #EEF1F5; border: 1px solid #D5DCE5; color: #33465F;
  text-decoration: none; white-space: nowrap;
}
a.ek-chip:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.ek-chip-stage { background: #FDF4E3; border-color: #EBD9A8; color: #7A5A14; }
.ek-chip-on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* The filter rail above the results. */
.ek-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.ek-filters .form-control, .ek-filters .form-select { max-width: 15rem; }