/* Information pages (templates/info_base.html and the pages that extend it).
   Loaded after dataintell-marketing.css and dataintell-tools.css; every rule
   is scoped under .ip. */

.ip a { text-decoration: none; }

/* header */
.ip-head { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); padding: 140px 0 64px; }
.ip-head::before { content: ""; position: absolute; right: -160px; top: -200px; width: 680px; height: 680px; border-radius: 50%; background: radial-gradient(circle, rgba(123,30,122,.45), rgba(23,17,28,0) 65%); pointer-events: none; }
.ip-head .dm-shell { position: relative; z-index: 1; }
.ip-title { max-width: 18ch; margin: 0 0 18px; font-family: var(--dm-display); font-weight: 400; font-size: clamp(44px, 6vw, 80px); line-height: .98; letter-spacing: -.025em; }
.ip-title em { font-style: italic; color: var(--orchid); }
.ip-sub { max-width: 52ch; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.55; color: rgba(251,249,252,.75); }
.ip-sub p { margin: 0; }
.ip-sub a { color: var(--seal); font-weight: 600; }
.ip-sub a:hover { color: var(--orchid); }
.ip-date { margin: 0; font-family: var(--dm-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(251,249,252,.72); }

/* reading column */
.ip-read { max-width: 760px; }
.ip-prose { font-size: 17px; line-height: 1.75; color: #2C2136; }
.ip-prose p { margin: 0 0 14px; }
.ip-prose ul { margin: 0 0 14px; padding-left: 20px; }
.ip-prose li { margin-bottom: 6px; }
.ip-prose h2 { margin: 40px 0 12px; font-family: var(--dm-display); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink); }
.ip-prose h2:first-child { margin-top: 0; }
.ip-prose a { color: var(--plum); font-weight: 600; }
.ip-prose a:hover { color: var(--orchid); }

/* numbered steps (how it works) */
.ip-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.ip-step { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; padding: 36px 0; border-top: 1px solid var(--line); }
.ip-step:first-child { border-top: 0; padding-top: 0; }
.ip-step__n { font-family: var(--dm-display); font-size: 56px; line-height: .9; color: var(--plum); }
.ip-step h2 { margin: 0 0 12px; font-family: var(--dm-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.08; }
.ip-step p { margin: 0 0 14px; font-size: 17px; line-height: 1.7; color: #2C2136; }
.ip-step--first { padding: 28px; border: 1px dashed rgba(123,30,122,.45); border-radius: 12px; background: #fff; margin-bottom: 36px; }
.ip-note { padding: 14px 18px; border-radius: 10px; background: var(--mist); font-size: 15px; line-height: 1.6; color: #2C2136; }
.ip-note strong { color: var(--plum); }
.ip-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.ip-tier { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ip-tier b { display: block; font-size: 15px; }
.ip-tier span { font-family: var(--dm-mono); font-size: 12px; color: var(--slate); }

/* cards grid */
.ip-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.ip-card { display: flex; flex-direction: column; padding: 28px; border: 1px solid rgba(23,17,28,.08); border-radius: 12px; background: #fff; }
.ip-card__k { margin: 0 0 14px; font-family: var(--dm-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--plum); }
.ip-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 10px; background: var(--mist); color: var(--plum); font-size: 18px; }
.ip-card h3 { margin: 0 0 10px; font-family: var(--dm-display); font-weight: 400; font-size: 28px; line-height: 1.1; }
.ip-card p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: var(--slate); }
.ip-card__eg { margin-top: auto !important; padding: 12px 14px; border-radius: 8px; background: var(--mist); color: #2C2136 !important; font-style: italic; }
.ip-cards--ink .ip-card { border-color: var(--line-dk); background: transparent; }
.ip-cards--ink .ip-card h3 { color: var(--paper); }
.ip-cards--ink .ip-card p { color: rgba(251,249,252,.72); }
.ip-cards--ink .ip-card__icon { background: rgba(251,249,252,.08); color: var(--seal); }
.ip-cards--ink .ip-card__k { color: var(--seal); }

/* comparison table */
.ip-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ip-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.ip-table th, .ip-table td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--line); }
.ip-table th:first-child, .ip-table td:first-child { text-align: left; }
.ip-table thead th { background: var(--ink); color: var(--paper); font-family: var(--dm-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.ip-table thead th.ip-us { color: var(--seal); }
.ip-table tbody tr:last-child td { border-bottom: 0; }
.ip-table td.ip-us { font-weight: 600; color: #0A5F4A; background: #F3FAF7; }
.ip-table td { color: var(--slate); }
.ip-table tbody th { font-weight: 600; color: var(--ink); background: #fff; }

/* FAQ */
.ip-faq h2 { margin: 48px 0 14px; font-family: var(--dm-mono); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--plum); }
.ip-faq h2:first-child { margin-top: 0; }
.ip-faq__group { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ip-faq details { border-top: 1px solid var(--line); }
.ip-faq details:first-child { border-top: 0; }
.ip-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 16px 22px; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; }
.ip-faq summary::-webkit-details-marker { display: none; }
.ip-faq summary::after { content: "+"; flex: none; font-family: var(--dm-display); font-size: 28px; line-height: 1; color: var(--plum); transition: transform .2s; }
.ip-faq details[open] summary::after { transform: rotate(45deg); }
.ip-faq summary:hover { color: var(--plum); }
.ip-faq details p { margin: 0; padding: 0 22px 20px; font-size: 16px; line-height: 1.7; color: #2C2136; }

/* contact */
.ip-contact { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px; }
.ip-form { flex: 999 1 520px; min-width: 0; padding: clamp(22px, 3vw, 36px); border: 1px solid rgba(23,17,28,.08); border-radius: 12px; background: #fff; }
.ip-form .ci-fields { display: flex; flex-direction: column; gap: 18px; }
.ip-form .ci-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.ip-side { flex: 1 1 280px; display: flex; flex-direction: column; gap: 12px; }
.ip-mail { padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ip-mail p { margin: 0 0 4px; font-family: var(--dm-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--plum); }
.ip-mail a { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ip-mail a:hover { color: var(--plum); }

/* closing call to action */
.ip-close { padding: 48px clamp(24px, 5vw, 56px); border-radius: 16px; background: var(--ink); color: var(--paper); text-align: center; }
.ip-close h2 { margin: 0 0 10px; font-family: var(--dm-display); font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: 1.05; }
.ip-close h2 em { font-style: italic; color: var(--orchid); }
.ip-close p { max-width: 52ch; margin: 0 auto 24px; color: rgba(251,249,252,.75); }
.ip-close__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

@media (max-width: 991.98px) { .ip-head { padding-top: 112px; } }
@media (max-width: 560px) {
  .ip-step { grid-template-columns: 1fr; gap: 6px; }
  .ip-step__n { font-size: 44px; }
}

.ip-more { display: inline-block; margin-top: auto; padding-top: 6px; font-size: 15px; font-weight: 600; color: var(--plum); }
.ip-more:hover { color: var(--orchid); }

/* staff stats dashboard (/stats/) */
.st-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.st-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 0 0 24px; }
.st-kpis > div { padding: 22px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.st-kpis dt { font-family: var(--dm-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--plum); }
.st-kpis dd { margin: 6px 0 4px; font-family: var(--dm-display); font-size: 44px; line-height: 1; }
.st-kpis span { font-size: 13px; color: var(--slate); }
.st-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.st-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.st-side { flex: 1 1 300px; display: flex; flex-direction: column; gap: 20px; }
.st-box { padding: 24px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.st-box h2 { margin: 0 0 16px; font-family: var(--dm-display); font-weight: 400; font-size: 26px; }
.st-rows { list-style: none; margin: 0; padding: 0; }
.st-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.st-rows li:first-child { border-top: 0; }
.st-rows b { font-family: var(--dm-mono); }
.st-gold b { color: #8A5D0B; }
.st-red b { color: #B42318; }
.st-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 0; }
.st-tiers dt { font-size: 13px; font-weight: 400; color: var(--slate); }
.st-tiers dd { margin: 0; font-family: var(--dm-display); font-size: 36px; }
.st-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.st-bars li { display: grid; grid-template-columns: 160px minmax(0, 1fr) 40px; gap: 12px; align-items: center; font-size: 14px; }
.st-bars b { font-family: var(--dm-mono); text-align: right; }
.st-bar { height: 8px; border-radius: 4px; background: var(--mist); overflow: hidden; }
.st-bar span { display: block; height: 100%; background: var(--plum); }
.st-table th[scope="row"] a { color: var(--ink); }
.st-table th[scope="row"] a:hover { color: var(--plum); }
.st-table th[scope="row"] small { display: block; font-weight: 400; font-size: 12px; color: var(--slate); }
.st-table .tl-badge { margin: 0; }
.st-person { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.st-person:first-of-type { border-top: 0; }
.st-person small { display: block; font-size: 12px; color: var(--slate); }
.st-person .dm-btn { padding: 8px 14px; font-size: 13px; }
.st-plum { color: var(--plum) !important; }
.st-empty { margin: 0; color: var(--slate); }
@media (max-width: 560px) { .st-bars li { grid-template-columns: 110px minmax(0, 1fr) 32px; } }

/* ── Error pages (404, 500) ───────────────────────────────── */
.ip-err { padding-top: 48px; padding-bottom: 96px; }
.ip-err__search { display: flex; flex-wrap: wrap; gap: 10px; max-width: 640px; margin: 0 0 36px; }
.ip-err__search input { flex: 1 1 280px; min-height: 52px; padding: 0 16px; border: 1px solid rgba(23,17,28,.2); border-radius: 8px; background: #fff; font: inherit; font-size: 16px; color: var(--ink); }
.ip-err__search input:focus { outline: 2px solid var(--plum); outline-offset: 1px; border-color: var(--plum); }
.ip-err__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ip-err__links a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); transition: border-color .2s; }
.ip-err__links a:hover { color: var(--ink); border-color: rgba(123,30,122,.4); }
.ip-err__links strong { font-size: 16px; }
.ip-err__links span { font-size: 14px; color: var(--slate); }
/* 500: a page of its own, so it renders even when the database is down */
.ip-err500 { min-height: 100vh; display: flex; flex-direction: column; }
.ip-err500 .ip-head { flex: 1; display: flex; align-items: center; padding: 64px 0; }
.ip-err500__logo { display: inline-block; margin: 0 0 48px; }
.ip-err500__logo img { height: 36px; }
.ip-err500 .ip-sub { margin-bottom: 32px; }
.ip-err500__acts { display: flex; flex-wrap: wrap; gap: 10px; }