/* ============================================================
   INAJ — editorial concierge theme on top of Bootstrap 5.3.
   Warm cream paper, deep forest brand, coral signal accent.
   Display: Source Serif 4 (variable, opsz). Body: Geist. Mono: JetBrains Mono.
   ============================================================ */

:root {
  /* Palette */
  --inaj-paper:      #F4EFE5;
  --inaj-paper-deep: #EBE3D2;
  --inaj-paper-edge: #E2D8C1;
  --inaj-surface:    #FFFFFF;
  --inaj-ink:        #1A1614;
  --inaj-ink-soft:   #3A332D;
  --inaj-stone:      #6F665B;
  --inaj-stone-soft: #948A7C;
  --inaj-hairline:   #DDD3BE;
  --inaj-hairline-soft: #ECE3D0;

  --inaj-brand:      #0F3E36;   /* deep forest */
  --inaj-brand-deep: #082822;
  --inaj-brand-soft: #D6E1DC;

  --inaj-accent:     #C9442B;   /* signal coral */
  --inaj-accent-deep:#9D2F1B;
  --inaj-accent-soft:#F4D9CC;

  --inaj-good:       #2D6A4F;
  --inaj-good-soft:  #D5E5DB;
  --inaj-warn:       #B47B1F;
  --inaj-warn-soft:  #F2E1BE;
  --inaj-danger:     #A33024;
  --inaj-danger-soft:#F2D2CC;
  --inaj-info:       #3D5A80;
  --inaj-info-soft:  #D3DCE8;

  /* Type stacks */
  --inaj-display: "Source Serif 4", "Source Serif Pro",
                  "Iowan Old Style", "Charter", Georgia, serif;
  --inaj-sans:    "Geist", "Inter", ui-sans-serif, system-ui,
                  -apple-system, "Segoe UI", Roboto, sans-serif;
  --inaj-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular,
                  "SF Mono", Menlo, Consolas, monospace;

  /* Bootstrap variable overrides (5.3) */
  --bs-body-bg:               var(--inaj-paper);
  --bs-body-color:            var(--inaj-ink);
  --bs-body-secondary-color:  var(--inaj-stone);
  --bs-body-tertiary-color:   var(--inaj-stone-soft);
  --bs-body-tertiary-bg:      var(--inaj-paper-deep);
  --bs-body-secondary-bg:     var(--inaj-paper);
  --bs-border-color:          var(--inaj-hairline);
  --bs-border-color-translucent: var(--inaj-hairline);

  --bs-primary:       var(--inaj-brand);
  --bs-primary-rgb:   15, 62, 54;
  --bs-link-color:    var(--inaj-brand);
  --bs-link-color-rgb: 15, 62, 54;
  --bs-link-hover-color: var(--inaj-accent);
  --bs-link-hover-color-rgb: 201, 68, 43;

  --bs-success: var(--inaj-good);
  --bs-warning: var(--inaj-warn);
  --bs-danger:  var(--inaj-danger);
  --bs-info:    var(--inaj-info);

  --bs-font-sans-serif: var(--inaj-sans);
  --bs-font-monospace:  var(--inaj-mono);

  --bs-border-radius:    3px;
  --bs-border-radius-sm: 2px;
  --bs-border-radius-lg: 4px;

  --inaj-shadow-sm: 0 1px 0 rgba(26,22,20,.04), 0 1px 2px rgba(26,22,20,.04);
  --inaj-shadow:    0 1px 0 rgba(26,22,20,.05), 0 8px 24px -12px rgba(26,22,20,.18);
  --inaj-shadow-lg: 0 2px 0 rgba(26,22,20,.05), 0 24px 60px -28px rgba(26,22,20,.28);
}

/* ============================================================
   Page chrome: warm paper, subtle grain, opentype niceties
   ============================================================ */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--inaj-sans);
  font-feature-settings: "ss01", "ss02", "cv11", "cv10", "tnum" 0;
  letter-spacing: -0.005em;
  background-color: var(--inaj-paper);
  /* Hairline grain — pure SVG, inline, no extra HTTP. Keeps the cream
     surface from looking flat under big monitors. */
  background-image:
    radial-gradient(1100px 600px at 88% -10%, rgba(15,62,54,0.05), transparent 60%),
    radial-gradient(900px 500px at -5% 8%, rgba(201,68,43,0.04), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-attachment: fixed, fixed, fixed;
  background-size: auto, auto, 180px 180px;
}

main { min-height: calc(100vh - 110px); }

/* ============================================================
   Typography
   ============================================================ */

h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--inaj-display);
  font-weight: 460;
  letter-spacing: -0.018em;
  color: var(--inaj-ink);
  /* Engage Source Serif 4's optical-size axis for big headlines */
  font-variation-settings: "opsz" 56;
}
h1, .h1 { font-size: clamp(2.1rem, 3.6vw, 2.85rem); line-height: 1.05; }
h2, .h2 { font-size: clamp(1.5rem, 2.4vw, 1.85rem); line-height: 1.12; }
h3, .h3 { font-size: 1.35rem; line-height: 1.2;
          font-variation-settings: "opsz" 36; }
h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--inaj-sans);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--inaj-ink);
}
h4, .h4 { font-size: 1.15rem; }
h5, .h5 { font-size: 1.0rem; }
h6, .h6 { font-size: 0.875rem; }

.lead {
  font-family: var(--inaj-display);
  font-weight: 380;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--inaj-ink-soft);
  font-variation-settings: "opsz" 30;
  letter-spacing: -0.008em;
}

p { color: var(--inaj-ink-soft); }
.text-body-secondary { color: var(--inaj-stone) !important; }

a {
  color: var(--inaj-brand);
  text-decoration: none;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover {
  color: var(--inaj-accent);
  text-decoration: underline;
  text-decoration-color: var(--inaj-accent);
}
a.text-decoration-none:hover { text-decoration: none; color: var(--inaj-accent); }

code, pre, .font-monospace {
  font-family: var(--inaj-mono);
  font-feature-settings: "ss03", "ss05";
}
code {
  font-size: 0.85em;
  color: var(--inaj-accent-deep);
  background: var(--inaj-accent-soft);
  padding: 0.05em 0.35em;
  border-radius: 2px;
}

/* A small reusable "kicker" — uppercase, tracked, hairline */
.eyebrow,
.kicker {
  font-family: var(--inaj-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--inaj-stone);
}

/* ============================================================
   Navbar — wordmark with tracked monogram + hairline under-rule
   ============================================================ */

.navbar {
  background-color: var(--inaj-paper) !important;
  border-bottom: 1px solid var(--inaj-hairline) !important;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  position: relative;
}
.navbar::after {
  /* a second, almost-imperceptible rule for an editorial double-line */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--inaj-hairline-soft);
}

.navbar-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
  gap: 0.15rem;
}
.navbar-brand .brand-mark {
  font-family: var(--inaj-display);
  font-style: italic;
  font-weight: 480;
  font-size: 1.6rem;
  letter-spacing: -0.015em;
  color: var(--inaj-ink);
  font-variation-settings: "opsz" 48;
}
.navbar-brand .brand-mark .amp,
.navbar-brand .brand-mark em {
  color: var(--inaj-accent);
  font-style: italic;
  margin: 0 0.04em;
  font-variation-settings: "opsz" 48;
}
.navbar-brand .brand-sub {
  font-family: var(--inaj-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--inaj-stone);
}
.navbar-brand:hover .brand-mark { color: var(--inaj-brand); }

.navbar .nav-link {
  font-family: var(--inaj-sans);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--inaj-ink-soft) !important;
  padding: 0.45rem 0.85rem;
  position: relative;
  border-radius: 0;
  letter-spacing: -0.003em;
}
.navbar .nav-link:hover { color: var(--inaj-accent) !important; }
.navbar .nav-link.active {
  color: var(--inaj-ink) !important;
  font-weight: 600;
}
/* Underline indicator only makes sense when the navbar is horizontal.
   Below the md breakpoint (navbar-expand-md collapses to a vertical
   dropdown), `bottom: -0.95rem` puts the bar INSIDE the next stacked
   nav item — observed on mobile 2026-05-17 where the underline cut
   through "Job Preferences" below the active "Dashboard". The
   font-weight + color shift from `.active` still distinguishes the
   active item on mobile. */
@media (min-width: 768px) {
  .navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0.85rem; right: 0.85rem;
    bottom: -0.95rem;
    height: 2px;
    background: var(--inaj-accent);
  }
}

.navbar-toggler {
  border-color: var(--inaj-hairline);
  border-radius: 2px;
}
.navbar-toggler:focus { box-shadow: 0 0 0 0.15rem var(--inaj-accent-soft); }

/* ============================================================
   Cards — float on the paper, hairline border, no chunky radius
   ============================================================ */

.card {
  background-color: var(--inaj-surface);
  border: 1px solid var(--inaj-hairline);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--inaj-shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card.shadow-sm { box-shadow: var(--inaj-shadow) !important; }

a.text-decoration-none > .card:hover,
.card-link:hover {
  border-color: var(--inaj-brand);
  box-shadow: var(--inaj-shadow);
  transform: translateY(-1px);
}

.card-body { padding: 1.5rem; }
@media (max-width: 576px) { .card-body { padding: 1.1rem; } }

.card.bg-body-tertiary {
  background-color: var(--inaj-paper-deep) !important;
  border-style: dashed;
  border-color: var(--inaj-hairline);
}

/* Subtle warning-tinted card used for "Bad matches" — keep restrained */
.card.border-warning-subtle {
  border-color: var(--inaj-hairline);
  border-left: 3px solid var(--inaj-warn);
  background-color: var(--inaj-surface);
}

/* Top-edge category rules: tint cards within each dashboard section */
#good .card    { border-top: 2px solid var(--inaj-good); }
#applied .list-group-item { border-left: 2px solid var(--inaj-info); }
#discarded .list-group-item { border-left: 2px solid var(--inaj-stone-soft); }
#bad .card     { border-top: 2px solid var(--inaj-warn); }

/* The JD submit card gets the brand stripe */
#submit-jd .card { border-top: 2px solid var(--inaj-brand); }

/* ============================================================
   Section headings on the dashboard
   ============================================================ */

section > .d-flex > h2,
section > h2 {
  font-family: var(--inaj-display);
  font-style: italic;
  font-weight: 460;
  font-variation-settings: "opsz" 60;
  letter-spacing: -0.015em;
}
section > .d-flex > h2 .fs-6 {
  font-family: var(--inaj-sans);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.7rem !important;
  color: var(--inaj-stone);
  margin-left: 0.35rem;
}

/* ============================================================
   Buttons — square corners, confident hover lift
   ============================================================ */

.btn {
  font-family: var(--inaj-sans);
  font-weight: 500;
  letter-spacing: 0.005em;
  border-radius: 2px;
  padding: 0.5rem 1.1rem;
  border-width: 1px;
  transition: background-color .15s ease, color .15s ease,
              border-color .15s ease, transform .12s ease,
              box-shadow .15s ease;
}
.btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 500;
}
.btn:focus-visible {
  box-shadow: 0 0 0 3px var(--inaj-accent-soft);
  outline: none;
}

.btn-primary {
  background-color: var(--inaj-brand);
  border-color: var(--inaj-brand);
  color: #F4EFE5;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--inaj-brand-deep);
  border-color: var(--inaj-brand-deep);
  color: #FFFFFF;
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-outline-primary {
  color: var(--inaj-brand);
  border-color: var(--inaj-brand);
  background-color: transparent;
}
.btn-outline-primary:hover {
  color: #F4EFE5;
  background-color: var(--inaj-brand);
  border-color: var(--inaj-brand);
}

.btn-outline-secondary {
  color: var(--inaj-ink-soft);
  border-color: var(--inaj-hairline);
  background-color: transparent;
}
.btn-outline-secondary:hover {
  color: var(--inaj-ink);
  background-color: var(--inaj-paper-deep);
  border-color: var(--inaj-stone-soft);
}

.btn-outline-success {
  color: var(--inaj-good);
  border-color: var(--inaj-good);
}
.btn-outline-success:hover {
  background-color: var(--inaj-good);
  border-color: var(--inaj-good);
  color: #F4EFE5;
}

.btn-outline-danger {
  color: var(--inaj-danger);
  border-color: var(--inaj-danger-soft);
}
.btn-outline-danger:hover {
  background-color: var(--inaj-danger);
  border-color: var(--inaj-danger);
  color: #F4EFE5;
}

.btn-warning {
  background-color: var(--inaj-accent);
  border-color: var(--inaj-accent);
  color: #FFFFFF;
}
.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--inaj-accent-deep);
  border-color: var(--inaj-accent-deep);
  color: #FFFFFF;
}

/* "Sign out" is small in the nav — keep it discreet */
.navbar .btn-outline-secondary {
  border-color: var(--inaj-hairline);
  color: var(--inaj-stone);
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
}

/* ============================================================
   Forms
   ============================================================ */

.form-label {
  font-family: var(--inaj-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--inaj-stone);
  margin-bottom: 0.4rem;
}
.form-control,
.form-select {
  background-color: var(--inaj-surface);
  border: 1px solid var(--inaj-hairline);
  border-radius: 2px;
  color: var(--inaj-ink);
  padding: 0.6rem 0.85rem;
  font-family: var(--inaj-sans);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control:focus,
.form-select:focus {
  background-color: var(--inaj-surface);
  border-color: var(--inaj-brand);
  box-shadow: 0 0 0 3px var(--inaj-brand-soft);
  color: var(--inaj-ink);
}
.form-control::placeholder { color: var(--inaj-stone-soft); }
.form-text { color: var(--inaj-stone); font-size: 0.8rem; }
.form-control.is-invalid {
  border-color: var(--inaj-danger);
  background-image: none;
  padding-right: 0.85rem;
}
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px var(--inaj-danger-soft);
}
.invalid-feedback { color: var(--inaj-danger); font-size: 0.8rem; }

textarea.form-control { font-family: var(--inaj-mono); font-size: 0.9rem; line-height: 1.55; }

/* ============================================================
   Alerts
   ============================================================ */

.alert {
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
}
/* The flat 1rem inline padding above wipes Bootstrap's reserved
   right-padding for `.alert-dismissible`, which is what keeps the
   absolutely-positioned `.btn-close` from sitting on top of the
   message text. Restore it explicitly. */
.alert-dismissible {
  padding-right: 3rem;
}
.alert-success {
  background-color: var(--inaj-good-soft);
  border-color: var(--inaj-good);
  color: #163A2C;
}
.alert-danger,
.alert-error {
  background-color: var(--inaj-danger-soft);
  border-color: var(--inaj-danger);
  color: var(--inaj-danger);
}
.alert-warning {
  background-color: var(--inaj-warn-soft);
  border-color: var(--inaj-warn);
  color: #5A3D0A;
}
.alert-info {
  background-color: var(--inaj-info-soft);
  border-color: var(--inaj-info);
  color: var(--inaj-info);
}

/* ============================================================
   Badges — small caps, tracked
   ============================================================ */

.badge {
  font-family: var(--inaj-sans);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3em 0.55em;
  border-radius: 2px;
  vertical-align: 0.18em;
}
.badge.text-bg-success {
  background-color: var(--inaj-good-soft) !important;
  color: var(--inaj-good) !important;
  border: 1px solid var(--inaj-good);
}
.badge.text-bg-warning {
  background-color: var(--inaj-warn-soft) !important;
  color: #5A3D0A !important;
  border: 1px solid var(--inaj-warn);
}
.badge.text-bg-danger {
  background-color: var(--inaj-danger-soft) !important;
  color: var(--inaj-danger) !important;
  border: 1px solid var(--inaj-danger);
}
.badge.text-bg-info {
  background-color: var(--inaj-info-soft) !important;
  color: var(--inaj-info) !important;
  border: 1px solid var(--inaj-info);
}
.badge.text-bg-secondary {
  background-color: var(--inaj-paper-deep) !important;
  color: var(--inaj-stone) !important;
  border: 1px solid var(--inaj-hairline);
}

/* ============================================================
   List groups
   ============================================================ */

.list-group { border-radius: var(--bs-border-radius); overflow: hidden; }
.list-group-item {
  background-color: var(--inaj-surface);
  border-color: var(--inaj-hairline);
  padding: 1rem 1.25rem;
  transition: background-color .15s ease;
}
.list-group-item:hover { background-color: var(--inaj-paper-deep); }

/* ============================================================
   Pagination
   ============================================================ */

.page-link {
  color: var(--inaj-ink-soft);
  background-color: var(--inaj-surface);
  border-color: var(--inaj-hairline);
  font-family: var(--inaj-sans);
  font-size: 0.85rem;
  padding: 0.4rem 0.75rem;
}
.page-link:hover {
  color: var(--inaj-accent);
  background-color: var(--inaj-paper-deep);
  border-color: var(--inaj-stone-soft);
}
.page-item.active .page-link {
  background-color: var(--inaj-brand);
  border-color: var(--inaj-brand);
  color: #F4EFE5;
}
.page-item.disabled .page-link { color: var(--inaj-stone-soft); background-color: var(--inaj-paper); }

/* ============================================================
   Impersonation banner — keep it loud but on-theme
   ============================================================ */

.alert.rounded-0 {
  background-color: var(--inaj-accent);
  color: #FFFFFF;
  border: 0;
  border-bottom: 1px solid var(--inaj-accent-deep);
}
.alert.rounded-0 .btn { background-color: #FFFFFF; color: var(--inaj-accent-deep); border-color: #FFFFFF; }
.alert.rounded-0 .btn:hover { background-color: var(--inaj-paper); color: var(--inaj-accent-deep); }

/* ============================================================
   Hero treatment used on welcome / login / signup pages
   ============================================================ */

.inaj-hero {
  padding: 2.5rem 0 1rem;
  text-align: left;
}
.inaj-hero .kicker { margin-bottom: 0.75rem; }
.inaj-hero h1 {
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1.0;
  margin: 0 0 0.5rem;
  font-variation-settings: "opsz" 60;
}
.inaj-hero h1 em {
  font-style: italic;
  color: var(--inaj-accent);
  font-variation-settings: "opsz" 60;
}
.inaj-hero .lead { max-width: 38em; margin-bottom: 1.5rem; }
.inaj-hero .rule {
  display: block;
  width: 3.5rem;
  height: 2px;
  background: var(--inaj-accent);
  margin: 1.25rem 0 1.5rem;
}

/* Centered hero (login / signup) */
.inaj-hero.is-centered { text-align: center; }
.inaj-hero.is-centered .rule,
.inaj-hero.is-centered .lead { margin-left: auto; margin-right: auto; }

/* ============================================================
   Report body — keep readable, but switch to editorial type
   ============================================================ */

.report-body { font-size: 1rem; line-height: 1.65; }
.report-body h1:first-child { display: none; }
/* The h1 above is display:none, so the first visible child is usually
   an h2 ("JD Requirements") whose 2rem top margin compounds with the
   card-body padding into a wedge of empty space. Zero that margin
   when the h2 is the first or second child (the h1 sibling counts
   even though it's hidden). */
.report-body > h2:first-child,
.report-body > h1:first-child + h2 {
  margin-top: 0;
}
.report-body h2 {
  margin-top: 2rem;
  font-size: 1.45rem;
  font-family: var(--inaj-display);
  font-style: italic;
  font-weight: 460;
  font-variation-settings: "opsz" 48;
  color: var(--inaj-ink);
  border-bottom: 1px solid var(--inaj-hairline);
  padding-bottom: 0.4rem;
}
.report-body h3 {
  margin-top: 1.5rem;
  font-size: 1.1rem;
  font-family: var(--inaj-sans);
  font-weight: 600;
  letter-spacing: 0.005em;
}
.report-body p { color: var(--inaj-ink-soft); }
.report-body blockquote {
  border-left: 3px solid var(--inaj-accent);
  margin: 1.25rem 0;
  padding: 0.25rem 0 0.25rem 1rem;
  color: var(--inaj-ink-soft);
  font-family: var(--inaj-display);
  font-style: italic;
  font-size: 1.1rem;
  font-variation-settings: "opsz" 30;
}

/* Tables inside reports / customization plan */
.report-body table,
.customization-plan table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.92rem;
  font-family: var(--inaj-sans);
  table-layout: auto;
  background-color: var(--inaj-surface);
}
.report-body th,
.report-body td,
.customization-plan th,
.customization-plan td {
  border: 1px solid var(--inaj-hairline);
  padding: 0.65rem 0.85rem;
  vertical-align: top;
  /* break-word, not anywhere: the browser breaks inside a word only
     as a last resort, so "Performance" / "ER + risk + judgment" /
     similar short JD requirements stay intact instead of splitting
     into "Performan / ce". Long URLs are still handled — there's a
     more specific `.report-body a / code` rule below that re-enables
     mid-string breaks on anchor and code elements. */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}
.report-body th,
.customization-plan th {
  background: var(--inaj-paper-deep);
  font-family: var(--inaj-sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inaj-stone);
  text-align: left;
}
.customization-plan th:first-child,
.customization-plan td:first-child {
  width: 2.75rem;
  text-align: center;
  font-weight: 600;
}

/* gaps block */
.gaps-block pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--inaj-mono);
  font-size: 0.85rem;
  margin: 0;
  color: var(--inaj-ink-soft);
}

/* ============================================================
   Long-URL handling (preserved from original)
   ============================================================ */

.card a,
.card code,
.list-group-item a,
.list-group-item code,
.breadcrumb a,
.report-body a,
.report-body code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.card object,
.card iframe,
.card img,
.card embed { max-width: 100%; }

/* Flex children default to min-width:auto, which refuses to shrink below
   their longest unbreakable content — so a long JD URL or title pushes
   the card wider than the viewport on mobile instead of wrapping. */
.min-w-0 { min-width: 0; }

/* ============================================================
   Mobile refinements (carried forward + retuned)
   ============================================================ */

@media (max-width: 575.98px) {
  main.container { padding-left: 0.85rem; padding-right: 0.85rem; }
  .card > .card-body.p-0 > object[type="application/pdf"] {
    height: 50vh;
    min-height: 320px;
  }
  .inaj-hero { padding-top: 1.5rem; }
}

@media (max-width: 575.98px) {
  .report-body table,
  .customization-plan table { display: block; width: 100%; border: 0; }
  .report-body thead,
  .customization-plan thead { display: none; }
  .report-body tbody,
  .report-body tr,
  .customization-plan tbody,
  .customization-plan tr { display: block; width: 100%; }
  .report-body tr,
  .customization-plan tr {
    margin-bottom: 0.75rem;
    border: 1px solid var(--inaj-hairline);
    border-radius: var(--bs-border-radius);
    padding: 0.6rem 0.85rem;
    background: var(--inaj-surface);
  }
  .report-body td,
  .customization-plan td {
    display: block;
    width: 100%;
    border: 0;
    padding: 0.15rem 0;
    font-size: 0.9rem;
    /* Reset the compact-first-col / compact-last-col rules that pin
       label columns to `white-space: nowrap; width: 1%` on desktop —
       when the table stacks into per-row cards, the "label" cell is
       full-width and long prose in it must wrap, not overflow. */
    white-space: normal;
  }
  .report-body td:first-child,
  .customization-plan td:first-child {
    font-weight: 600;
    font-size: 0.95rem;
    padding-bottom: 0.25rem;
  }
  .report-body td:nth-child(2),
  .customization-plan td:nth-child(2) { color: var(--inaj-stone); }
  .report-body td:last-child:not(:only-child),
  .customization-plan td:last-child:not(:only-child) {
    margin-top: 0.25rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--inaj-hairline);
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .report-body th,
  .report-body td,
  .customization-plan th,
  .customization-plan td {
    padding: 0.45rem 0.55rem;
    font-size: 0.875rem;
  }
}

/* ============================================================
   HOMEPAGE — public marketing page
   Full-bleed sections via .home / .home-section
   ============================================================ */

.home {
  display: block;
  min-height: calc(100vh - 110px);
  padding-bottom: 0;
}

/* shared anchor-link "see how it works" affordance */
.btn-text-link {
  font-family: var(--inaj-sans);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--inaj-ink-soft);
  letter-spacing: 0.01em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
  padding: 0.55rem 0;
}
.btn-text-link:hover {
  color: var(--inaj-accent);
  border-color: var(--inaj-accent);
}

/* Big "accent" CTA button — used in the final CTA strip */
.btn-accent {
  background-color: var(--inaj-accent);
  border-color: var(--inaj-accent);
  color: #FFFFFF;
}
.btn-accent:hover,
.btn-accent:focus {
  background-color: var(--inaj-accent-deep);
  border-color: var(--inaj-accent-deep);
  color: #FFFFFF;
  transform: translateY(-1px);
}
.btn-lg {
  padding: 0.85rem 1.6rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.005em;
}

/* ============================================================
   Hero
   ============================================================ */

.home-hero {
  position: relative;
  padding: 3.5rem 0 3rem;
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(15,62,54,0.08), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(201,68,43,0.06), transparent 55%);
}
@media (min-width: 992px) {
  .home-hero { padding: 5.5rem 0 5rem; }
}

.home-hero__title {
  font-family: var(--inaj-display);
  font-weight: 380;
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--inaj-ink);
  font-variation-settings: "opsz" 60;
  margin: 0.5rem 0 1.25rem;
}
.home-hero__title em {
  font-style: italic;
  color: var(--inaj-accent);
  font-variation-settings: "opsz" 60;
}

.home-hero__lead {
  font-family: var(--inaj-display);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(1.1rem, 1.55vw, 1.32rem);
  line-height: 1.45;
  color: var(--inaj-ink-soft);
  max-width: 34em;
  margin-bottom: 1.8rem;
  font-variation-settings: "opsz" 30;
}

.home-hero__fineprint {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--inaj-stone);
  font-family: var(--inaj-sans);
  letter-spacing: 0.005em;
}

.home-hero__rule {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--inaj-hairline);
}

/* Hero side-panel mini-mockup */
.home-hero__card {
  position: relative;
  background: var(--inaj-surface);
  border: 1px solid var(--inaj-hairline);
  border-top: 2px solid var(--inaj-brand);
  border-radius: var(--bs-border-radius);
  padding: 1.5rem 1.4rem;
  box-shadow:
    0 1px 0 rgba(26,22,20,.04),
    0 24px 60px -28px rgba(26,22,20,.22);
  transform: rotate(0.4deg);
}
@media (max-width: 991px) {
  .home-hero__card { transform: none; margin-top: 1.5rem; }
}

.mock-stamp {
  display: inline-block;
  font-family: var(--inaj-sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--inaj-accent);
  background: var(--inaj-accent-soft);
  border: 1px solid var(--inaj-accent);
  border-radius: 2px;
  padding: 0.25rem 0.55rem;
  margin-bottom: 0.75rem;
}
.mock-stamp--corner {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  margin-bottom: 0;
  z-index: 2;
}

.mock-row {
  padding: 0.7rem 0;
  border-top: 1px solid var(--inaj-hairline-soft);
}
.mock-row:first-of-type { border-top: 0; }
.mock-row__title {
  font-family: var(--inaj-sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--inaj-ink);
  line-height: 1.25;
  margin-bottom: 0.2rem;
}
.mock-row__meta {
  font-family: var(--inaj-sans);
  font-size: 0.78rem;
  color: var(--inaj-stone);
}
.mock-row--good { border-left: 2px solid var(--inaj-good); padding-left: 0.65rem; margin-left: -0.65rem; }
.mock-row--applied { border-left: 2px solid var(--inaj-info); padding-left: 0.65rem; margin-left: -0.65rem; }

.mock-tag {
  display: inline-block;
  font-family: var(--inaj-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15em 0.5em;
  border-radius: 2px;
  vertical-align: 0.1em;
  margin-left: 0.35em;
}
.mock-tag--good { background: var(--inaj-good-soft); color: var(--inaj-good); border: 1px solid var(--inaj-good); }
.mock-tag--warn { background: var(--inaj-warn-soft); color: #5A3D0A; border: 1px solid var(--inaj-warn); }
.mock-tag--bad  { background: var(--inaj-danger-soft); color: var(--inaj-danger); border: 1px solid var(--inaj-danger); }

/* ============================================================
   Generic home section
   ============================================================ */

.home-section {
  padding: 5rem 0;
  position: relative;
}
.home-section--dim {
  background: var(--inaj-paper-deep);
  border-top: 1px solid var(--inaj-hairline);
  border-bottom: 1px solid var(--inaj-hairline);
}

.home-section__title {
  font-family: var(--inaj-display);
  font-weight: 420;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--inaj-ink);
  margin: 0.4rem 0 0.75rem;
  font-variation-settings: "opsz" 56;
}
.home-section__title em {
  font-style: italic;
  color: var(--inaj-accent);
  font-variation-settings: "opsz" 56;
}
.home-section__lead {
  font-family: var(--inaj-display);
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 360;
  line-height: 1.5;
  color: var(--inaj-ink-soft);
  font-variation-settings: "opsz" 30;
  max-width: 36em;
}

/* ============================================================
   How-it-works steps
   ============================================================ */

.home-step {
  padding-top: 1rem;
  border-top: 2px solid var(--inaj-ink);
}
.home-step__num {
  font-family: var(--inaj-display);
  font-style: italic;
  font-weight: 320;
  font-size: 3rem;
  color: var(--inaj-accent);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 60;
  margin-bottom: 0.6rem;
}
.home-step__title {
  font-family: var(--inaj-sans);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--inaj-ink);
  letter-spacing: -0.005em;
  margin-bottom: 0.4rem;
}
.home-step__body {
  color: var(--inaj-ink-soft);
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   Pillars (why it's different)
   ============================================================ */

.home-pillar {
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--inaj-surface);
  border: 1px solid var(--inaj-hairline);
  border-radius: var(--bs-border-radius);
  height: 100%;
  transition: border-color .15s ease, transform .15s ease;
}
.home-pillar:hover { border-color: var(--inaj-brand); transform: translateY(-2px); }
.home-pillar__title {
  font-family: var(--inaj-display);
  font-style: italic;
  font-weight: 460;
  font-size: 1.45rem;
  color: var(--inaj-ink);
  margin-bottom: 0.5rem;
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.01em;
}
.home-pillar p {
  margin: 0;
  color: var(--inaj-ink-soft);
  font-size: 0.96rem;
  line-height: 1.55;
}

/* ============================================================
   Dashboard mockup ("browser chrome" wrapper)
   ============================================================ */

.mock-frame {
  margin: 1.5rem 0 0;
  background: var(--inaj-surface);
  border: 1px solid var(--inaj-hairline);
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 2px 0 rgba(26,22,20,.04),
    0 40px 100px -40px rgba(26,22,20,.35);
}
.mock-frame__chrome {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--inaj-paper-deep);
  border-bottom: 1px solid var(--inaj-hairline);
  padding: 0.65rem 0.85rem;
}
.mock-frame__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--inaj-hairline);
  display: inline-block;
}
.mock-frame__dot--r { background: #E66B5C; }
.mock-frame__dot--y { background: #E7B83C; }
.mock-frame__dot--g { background: #6FB37D; }
.mock-frame__url {
  margin-left: 0.9rem;
  font-family: var(--inaj-mono);
  font-size: 0.78rem;
  color: var(--inaj-stone);
  background: var(--inaj-paper);
  border: 1px solid var(--inaj-hairline);
  border-radius: 2px;
  padding: 0.15rem 0.6rem;
}

.mock-frame__body {
  position: relative;
  padding: 1.75rem 1.75rem 2rem;
  background: var(--inaj-paper);
}
@media (max-width: 575.98px) {
  .mock-frame__body { padding: 1.1rem 1rem 1.4rem; }
  .mock-frame__url { display: none; }
}

.mock-card {
  background: var(--inaj-surface);
  border: 1px solid var(--inaj-hairline);
  border-radius: var(--bs-border-radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 0.8rem;
}
.mock-card--brand { border-top: 2px solid var(--inaj-brand); margin-bottom: 1.5rem; }
.mock-card--good  { border-top: 2px solid var(--inaj-good); }
.mock-card--bad   { border-top: 2px solid var(--inaj-warn); border-left: 3px solid var(--inaj-warn); }

.mock-card__title {
  font-family: var(--inaj-sans);
  font-weight: 600;
  font-size: 1rem;
  color: var(--inaj-ink);
  margin-bottom: 0.2rem;
  letter-spacing: -0.005em;
}
.mock-card__sub {
  font-family: var(--inaj-sans);
  font-size: 0.85rem;
  color: var(--inaj-stone);
  margin: 0 0 0.85rem;
}
.mock-card__meta {
  font-family: var(--inaj-sans);
  font-size: 0.78rem;
  color: var(--inaj-stone);
}
.mock-card__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}
/* The content column holds a `white-space: nowrap` URL. Without this,
   the flex item's default `min-width: auto` resolves to that URL's
   full width — the column balloons past the card and the URL never
   reaches its `text-overflow: ellipsis`. min-width:0 lets it shrink
   so the URL truncates as designed. */
.mock-card__row > div:first-child { min-width: 0; }
.mock-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.mock-note {
  margin: 0.8rem 0 0;
  font-size: 0.85rem;
  color: var(--inaj-ink-soft);
}

.mock-section { margin-top: 1.75rem; }
.mock-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.mock-section__title {
  font-family: var(--inaj-display);
  font-style: italic;
  font-weight: 460;
  font-size: 1.35rem;
  color: var(--inaj-ink);
  margin: 0;
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.01em;
}
.mock-section__sub {
  font-family: var(--inaj-sans);
  font-style: normal;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inaj-stone);
  margin-left: 0.35rem;
}
.mock-section__count {
  font-family: var(--inaj-sans);
  font-size: 0.78rem;
  color: var(--inaj-stone);
}

.mock-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--inaj-hairline);
  border-radius: var(--bs-border-radius);
  background: var(--inaj-surface);
  overflow: hidden;
}
.mock-list__item {
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--inaj-hairline);
  border-left: 2px solid var(--inaj-info);
}
.mock-list__item:first-child { border-top: 0; }
.mock-list__title {
  font-family: var(--inaj-sans);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--inaj-ink);
  margin-bottom: 0.15rem;
}
.mock-list__meta {
  font-family: var(--inaj-sans);
  font-size: 0.78rem;
  color: var(--inaj-stone);
}

.mock-input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.55rem;
}
.mock-input {
  flex: 1 1 260px;
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--inaj-hairline);
  border-radius: 2px;
  background: var(--inaj-paper);
  font-family: var(--inaj-mono);
  font-size: 0.82rem;
  color: var(--inaj-stone);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--inaj-sans);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.005em;
  padding: 0.4rem 0.85rem;
  border-radius: 2px;
  border: 1px solid var(--inaj-hairline);
  background: var(--inaj-surface);
  color: var(--inaj-ink-soft);
  white-space: nowrap;
}
.mock-btn--primary { background: var(--inaj-brand); border-color: var(--inaj-brand); color: #F4EFE5; }
.mock-btn--warn    { background: var(--inaj-accent); border-color: var(--inaj-accent); color: #FFFFFF; }
.mock-btn--outline { color: var(--inaj-brand); border-color: var(--inaj-brand); background: transparent; }
.mock-btn--outline-mute { color: var(--inaj-ink-soft); }
.mock-btn--outline-good { color: var(--inaj-good); border-color: var(--inaj-good); background: transparent; }
.mock-btn--outline-danger { color: var(--inaj-accent); border-color: var(--inaj-hairline); background: transparent; }

.mock-card__url {
  margin-top: 0.35rem;
  font-family: var(--inaj-mono);
  font-size: 0.72rem;
  color: var(--inaj-stone);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 38em;
}

.mock-row__url {
  font-family: var(--inaj-mono);
  font-size: 0.72rem;
  color: var(--inaj-stone);
  margin-top: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.mock-pager {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 0.85rem;
  font-family: var(--inaj-sans);
  font-size: 0.78rem;
}
.mock-pager__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--inaj-hairline);
  background: var(--inaj-surface);
  color: var(--inaj-ink-soft);
  border-radius: 2px;
}
.mock-pager__page {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  border-top: 1px solid var(--inaj-hairline);
  border-bottom: 1px solid var(--inaj-hairline);
  border-left: 0;
  border-right: 0;
  background: var(--inaj-brand);
  color: #F4EFE5;
  font-weight: 600;
  font-size: 0.78rem;
}

/* ============================================================
   Pricing
   ============================================================ */

.home-price {
  background: var(--inaj-surface);
  border: 1px solid var(--inaj-hairline);
  border-top: 3px solid var(--inaj-brand);
  border-radius: var(--bs-border-radius);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--inaj-shadow);
}
@media (min-width: 768px) { .home-price { padding: 3rem 3rem 2.5rem; } }

.home-price__amount {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1rem;
  margin-bottom: 0.4rem;
}
.home-price__dollar {
  font-family: var(--inaj-display);
  font-style: italic;
  font-weight: 400;
  font-size: 2rem;
  color: var(--inaj-ink-soft);
  align-self: flex-start;
  margin-top: 0.6rem;
  font-variation-settings: "opsz" 60;
}
.home-price__num {
  font-family: var(--inaj-display);
  font-weight: 380;
  font-size: clamp(4.5rem, 9vw, 6.5rem);
  line-height: 1;
  color: var(--inaj-ink);
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 60;
}
.home-price__per {
  font-family: var(--inaj-sans);
  font-size: 1rem;
  color: var(--inaj-stone);
  margin-left: 0.3rem;
}
.home-price__tag {
  font-family: var(--inaj-sans);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--inaj-accent);
  margin-bottom: 1.5rem;
}

.home-price__list {
  list-style: none;
  margin: 0 auto 1.75rem;
  padding: 0;
  max-width: 32em;
  text-align: left;
  border-top: 1px solid var(--inaj-hairline);
  border-bottom: 1px solid var(--inaj-hairline);
  padding: 1rem 0;
}
.home-price__list li {
  padding: 0.55rem 0 0.55rem 1.6rem;
  position: relative;
  font-size: 0.95rem;
  color: var(--inaj-ink-soft);
  line-height: 1.4;
}
.home-price__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0.55rem;
  color: var(--inaj-accent);
  font-weight: 600;
  font-family: var(--inaj-sans);
}
.home-price__list li:not(:first-child) {
  border-top: 1px dashed var(--inaj-hairline-soft);
}

.home-price__fineprint {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  color: var(--inaj-stone);
  line-height: 1.5;
  max-width: 36em;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   FAQ
   ============================================================ */

.home-faq {
  padding: 1.25rem 0;
  border-top: 1px solid var(--inaj-hairline);
}
.home-faq__q {
  font-family: var(--inaj-display);
  font-style: italic;
  font-weight: 460;
  font-size: 1.25rem;
  color: var(--inaj-ink);
  margin-bottom: 0.5rem;
  font-variation-settings: "opsz" 36;
  letter-spacing: -0.008em;
}
.home-faq__a {
  font-size: 0.95rem;
  color: var(--inaj-ink-soft);
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   Final CTA strip
   ============================================================ */

.home-cta {
  background: var(--inaj-brand);
  color: #F4EFE5;
  padding: 3.5rem 0;
  position: relative;
  overflow: hidden;
}
.home-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 200px at 10% 100%, rgba(201,68,43,0.22), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.86  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: auto, 180px 180px;
  pointer-events: none;
}
.home-cta > .container { position: relative; }
.home-cta__title {
  font-family: var(--inaj-display);
  font-weight: 380;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: #F4EFE5;
  margin: 0;
  font-variation-settings: "opsz" 56;
}
.home-cta__title em {
  font-style: italic;
  color: #F2D5C7;
  font-variation-settings: "opsz" 56;
}
.home-cta__sub {
  font-family: var(--inaj-sans);
  font-size: 0.8rem;
  color: rgba(244,239,229,0.7);
  margin-top: 0.6rem;
  letter-spacing: 0.005em;
}

/* ============================================================
   About page — small LinkedIn-style avatar + long-form prose
   ============================================================ */

.about-hero { padding-top: 4rem; }
.about-hero__title { margin-top: 0.5rem; }
.about-hero__lead {
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}

.about-avatar {
  margin: 0 0 1rem 0;
  display: flex;
  justify-content: center;
}
.about-avatar img {
  width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--inaj-surface);
  box-shadow:
    0 0 0 1px var(--inaj-hairline),
    0 10px 28px -16px rgba(15, 23, 32, 0.35);
  background: var(--inaj-paper);
}

.about-byline {
  font-family: var(--inaj-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--inaj-stone);
  margin: 0 0 0.25rem 0;
}

.about-prose p {
  font-family: var(--inaj-display);
  font-size: 1.125rem;
  line-height: 1.72;
  color: var(--inaj-ink);
  margin: 0 0 1.15rem 0;
}
.about-prose p:last-child { margin-bottom: 0; }
.about-prose em {
  font-style: italic;
  color: var(--inaj-ink);
}

.about-signoff p {
  font-family: var(--inaj-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--inaj-ink);
  margin: 0;
}

/* ============================================================
   Footer
   ============================================================ */

.home-footer {
  background: var(--inaj-paper);
  border-top: 1px solid var(--inaj-hairline);
  padding: 2.25rem 0 2.5rem;
}
.home-footer__mark {
  font-family: var(--inaj-display);
  font-style: italic;
  font-weight: 460;
  font-size: 1.35rem;
  color: var(--inaj-ink);
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.012em;
}
.home-footer__mark em {
  color: var(--inaj-accent);
  font-variation-settings: "opsz" 48;
  margin: 0 0.04em;
}
.home-footer__sub {
  font-family: var(--inaj-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--inaj-stone);
  margin-top: 0.15rem;
}
.home-footer a {
  color: var(--inaj-ink-soft);
  font-size: 0.9rem;
  font-weight: 500;
}
.home-footer a:hover { color: var(--inaj-accent); }
.home-footer__sep {
  margin: 0 0.4rem;
  color: var(--inaj-stone-soft);
}
.home-footer__legal {
  font-size: 0.72rem;
  color: var(--inaj-stone);
  margin-top: 0.6rem;
  letter-spacing: 0.005em;
}

@media (max-width: 575.98px) {
  .home-section { padding: 3rem 0; }
  .home-hero { padding: 2.5rem 0 2.5rem; }
  .home-cta { padding: 2.5rem 0; }
  .mock-card__actions { width: 100%; }
}

/* ============================================================
   Navbar report-search autocomplete
   ============================================================ */

.navbar-search {
  width: 18rem;
}
#navbar-search-results {
  max-width: 24rem;
  right: 0;
  left: auto;
}
#navbar-search-results .list-group-item.active {
  background-color: var(--bs-tertiary-bg);
  color: inherit;
  border-color: rgba(0, 0, 0, 0.08);
}
#navbar-search-results .list-group-item-action:hover {
  background-color: var(--bs-tertiary-bg);
}

/* ============================================================
   Workspace stage flowchart (/report/<f> top of page)
   ============================================================ */

.stage-flow .stage-icon {
  font-size: 1.5rem;
  line-height: 1;
}
.stage-flow .disabled-card {
  cursor: not-allowed;
}
.stage-flow .stage-arrow {
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 0.25rem;
  user-select: none;
}

/* ============================================================
   Workspace Jump-to nav (/report/<f>)
   Absolutely positioned so it hangs in the right gutter past the
   full-width body card. Only rendered on xxl+ where the gutter
   has room for it.
   ============================================================ */

.jump-to-aside {
  position: absolute;
  top: 0;
  left: 100%;
  height: 100%;
  width: 11rem;
  padding-left: 1.25rem;
}

/* ============================================================
   Report tables: shrink narrow label columns to fit content so
   short labels like "Work mode" and "✅ Moderate" don't wrap when
   the prose column otherwise dominates the table width. Tables
   get tagged in views.py based on their header structure.
   ============================================================ */

.report-body table.compact-first-col th:first-child,
.report-body table.compact-first-col td:first-child,
.report-body table.compact-last-col th:last-child,
.report-body table.compact-last-col td:last-child {
  white-space: nowrap;
  width: 1%;
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}

/* ── Docs ───────────────────────────────────────────────── */

.docs-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .docs-layout {
    grid-template-columns: 220px 1fr;
    align-items: start;
  }
}

.docs-sidebar {
  position: sticky;
  top: 1.5rem;
}

.docs-sidebar__heading {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  margin-bottom: .5rem;
  padding-left: .5rem;
}

.docs-sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.docs-sidebar__link {
  display: block;
  padding: .35rem .5rem;
  border-radius: .375rem;
  color: var(--bs-body-color);
  text-decoration: none;
  font-size: .9rem;
}

.docs-sidebar__link:hover {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

.docs-sidebar__link--active {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
  font-weight: 600;
}

.docs-body h1 { font-size: 1.75rem; margin-bottom: 1rem; }
.docs-body h2 { font-size: 1.25rem; margin-top: 2rem; margin-bottom: .75rem; }
.docs-body h3 { font-size: 1.05rem; margin-top: 1.5rem; margin-bottom: .5rem; }
.docs-body p, .docs-body li { line-height: 1.7; }
.docs-body .docs-callout {
  background: var(--bs-primary-bg-subtle);
  border-left: 3px solid var(--bs-primary);
  padding: .75rem 1rem;
  border-radius: 0 .375rem .375rem 0;
  margin: 1.25rem 0;
}