/* ============================================================
   dbfam digital HUB — Library / Hub components  ·  hub-lib.css
   Loads AFTER hub.css. Adds: scan-first tool cards, the badge
   system, hero search, library filters, icon guide, and the
   homepage section blocks. All classes prefixed to avoid clashes.
   ============================================================ */

/* ============================================================
   HEADER EXTRAS  — search trigger + language toggle
   ============================================================ */
.db-header__tools { display: none; align-items: center; gap: 8px; }
.db-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--db-r-pill);
  border: 1px solid var(--db-border-2); background: transparent; color: var(--db-text-2);
  cursor: pointer; transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.db-iconbtn:hover { color: var(--db-text); border-color: var(--db-accent); background: var(--db-accent-dim); }
.db-iconbtn svg { width: 19px; height: 19px; }

.db-lang { display: inline-flex; border: 1px solid var(--db-border-2); border-radius: var(--db-r-pill); overflow: hidden; }
.db-lang button {
  min-height: 42px; padding: 0 13px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--db-font-head); font-weight: 600; font-size: 12.5px; letter-spacing: .04em;
  color: var(--db-text-3); transition: color .14s ease, background .14s ease;
}
.db-lang button.is-active { color: var(--db-bg-deep); background: var(--db-sand); }
.db-lang button:not(.is-active):hover { color: var(--db-text); }

@media (min-width: 860px) { .db-header__tools { display: flex; } }

/* drawer language row */
.db-drawer__lang { display: flex; gap: 10px; align-items: center; padding: 14px 6px 4px; }
.db-drawer__lang .db-lang { margin-left: auto; }

/* ============================================================
   HERO SEARCH
   ============================================================ */
.hs { max-width: 640px; margin: 26px auto 0; }
.hs__bar {
  display: flex; align-items: center; gap: 8px; padding: 7px 7px 7px 16px;
  background: #E7EDF4; border: 1.5px solid transparent; border-radius: var(--db-r-pill);
  box-shadow: var(--db-shadow); transition: border-color .14s ease, box-shadow .14s ease;
}
.hs__bar:focus-within { border-color: var(--db-accent); box-shadow: var(--db-glow); }
.hs__icon { color: var(--tc-ink-3); display: flex; flex: 0 0 auto; }
.hs__icon svg { width: 20px; height: 20px; }
.hs__input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--db-font-body); font-size: 16px; color: var(--tc-ink);
}
.hs__input::placeholder { color: var(--tc-ink-3); }
.hs__btn { flex: 0 0 auto; }

/* suggestions dropdown */
.hs__wrap { position: relative; }
.hs__suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40;
  background: var(--tc-surface); border: 1px solid var(--tc-line); border-radius: var(--db-r-lg);
  box-shadow: var(--db-shadow); overflow: hidden; text-align: left; display: none;
}
.hs__suggest.is-open { display: block; }
.hs__sg {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer;
  border-bottom: 1px solid var(--tc-line); color: var(--tc-ink); text-decoration: none;
}
.hs__sg:last-child { border-bottom: none; }
.hs__sg:hover, .hs__sg.is-cursor { background: var(--tc-field); }
.hs__sg__well { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; background: rgba(49,93,138,.10);
  border: 1px solid rgba(49,93,138,.18); color: var(--tc-accent); }
.hs__sg__well svg { width: 18px; height: 18px; }
.hs__sg__name { font-family: var(--db-font-head); font-weight: 600; font-size: 14.5px; color: var(--tc-ink); }
.hs__sg__meta { font-family: var(--db-font-mono); font-size: 11px; color: var(--tc-ink-3); margin-top: 1px; }
.hs__sg__empty { padding: 16px; color: var(--tc-ink-3); font-size: 14px; }

/* popular searches + category chips + trust */
.hs__pop { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.hs__pop__lbl { font-family: var(--db-font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--db-text-3); margin-right: 2px; }
.hs__chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px;
  border-radius: var(--db-r-pill); border: 1px solid var(--db-border-2); background: rgba(255,255,255,.03);
  color: var(--db-text-2); font-family: var(--db-font-body); font-size: 13px; cursor: pointer;
  transition: all .14s ease; text-decoration: none;
}
.hs__chip:hover { border-color: var(--db-accent); color: var(--db-accent-2); background: var(--db-accent-dim); }
.hs__chip svg { width: 15px; height: 15px; }

.hs__cats { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }

/* ============================================================
   BADGE SYSTEM  (access · status · type/category chips)
   ============================================================ */
.tcb {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-family: var(--db-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .02em;
  padding: 4px 8px; border-radius: var(--db-r-pill); border: 1px solid transparent;
}
.tcb svg { width: 11px; height: 11px; }

/* access — free/no-signup = friendly sand; premium/pro = navy+gold; paid muted */
.tcb--free,
.tcb--free_no_signup,
.tcb--free_email      { color: var(--db-sand-2); background: var(--db-sand-dim); border-color: var(--db-sand-line); }
.tcb--light           { color: var(--db-accent-2); background: var(--db-accent-dim); border-color: var(--db-accent-line); }
.tcb--pro,
.tcb--premium,
.tcb--premium_html    { color: var(--db-sand-2); background: linear-gradient(180deg, rgba(216,199,163,.12), rgba(32,61,95,.55));
                        border-color: var(--db-sand-line); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }
.tcb--paid            { color: var(--db-text-2); background: rgba(255,255,255,.05); border-color: var(--db-border-2); }

/* status */
.tcb--popular { color: var(--db-accent-2); background: var(--db-accent-dim); border-color: var(--db-accent-line); }
.tcb--new     { color: var(--db-accent-2); background: var(--db-accent-dim); border-color: var(--db-accent-line); }
.tcb--updated { color: var(--db-accent-2); background: rgba(111,160,208,.08); border-color: var(--db-accent-line); }
.tcb--coming_soon { color: var(--db-text-3); background: rgba(255,255,255,.04); border-color: var(--db-border-2); }

/* type + category chips (neutral, very legible) */
.tc-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--db-font-body); font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: var(--db-r-sm); color: var(--db-text-2);
  background: rgba(255,255,255,.05); border: 1px solid var(--db-border);
}
.tc-chip svg { width: 13px; height: 13px; color: var(--db-text-3); }
.tc-chip--type { color: var(--db-text); }

/* ============================================================
   SCAN-FIRST TOOL CARD
   ============================================================ */
.tc-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .tc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tc-grid { grid-template-columns: repeat(3, 1fr); } }

.tc-card {
  position: relative; display: flex; flex-direction: column; gap: 0;
  padding: 16px 16px 14px; min-height: 100%;
  background: var(--db-card); border: 1px solid var(--db-border); border-radius: var(--db-r-lg);
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
.tc-card:not(.is-soon):hover { background: var(--db-card-2); border-color: var(--db-glow-line); transform: translateY(-3px); box-shadow: var(--db-shadow); }
.tc-card::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--db-accent), transparent); transition: opacity .2s ease;
}
.tc-card:not(.is-soon):hover::before { opacity: 1; }
.tc-card.is-soon { opacity: .82; }
.tc-card.is-premium { background: var(--db-elevated); border-color: var(--db-sand-line); }

.tc-card:focus-visible { outline: 2px solid var(--db-accent); outline-offset: 2px; }

/* top row: status (left) · access (right) — wraps so long DE labels never overflow */
.tc-card__top { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; justify-content: space-between; min-height: 24px; margin-bottom: 14px; }
.tc-card__top .tcb--access { margin-left: auto; }
.tcb { max-width: 100%; }

.tc-card__icon { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 13px; }
.tc-card.is-premium .tc-card__icon { background: var(--db-sand-dim); border-color: var(--db-sand-line); color: var(--db-sand-2); }

.tc-card__name { font-family: var(--db-font-head); font-weight: 600; font-size: 17px; line-height: 1.25; color: var(--db-text); letter-spacing: -.01em; }
.tc-card__desc { font-family: var(--db-font-body); font-size: 13.5px; line-height: 1.5; color: var(--db-text-2); margin: 7px 0 0; }

/* meta chips row */
.tc-card__meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

/* feature icon row + in-card caption (caption guarantees the label is ALWAYS
   readable inside the card — no clipped floating tooltips) */
.tc-card__feats { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tc-feat {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04); border: 1px solid var(--db-border); color: var(--db-text-2);
  padding: 0; transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.tc-feat svg { width: 15px; height: 15px; }
.tc-feat:hover, .tc-feat:focus-visible, .tc-feat.is-shown { color: var(--db-accent-2); border-color: var(--db-accent-line); background: var(--db-accent-dim); }
.tc-card__featcap {
  margin: 9px 0 0; min-height: 16px; font-family: var(--db-font-body); font-size: 12px; line-height: 1.35;
  color: var(--db-text-3); transition: color .14s ease;
}
.tc-card__featcap.is-shown { color: var(--db-accent-2); }

/* footer cta */
.tc-card__foot { margin-top: auto; padding-top: 14px; }
.tc-card__cta {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--db-font-head);
  font-weight: 600; font-size: 13.5px; color: var(--db-accent-2);
}
.tc-card:not(.is-soon):hover .tc-card__cta { color: var(--db-accent); }
.tc-card__cta svg { width: 15px; height: 15px; transition: transform .16s ease; }
.tc-card:not(.is-soon):hover .tc-card__cta svg { transform: translateX(3px); }
.tc-card.is-soon .tc-card__cta { color: var(--db-text-3); }

/* ============================================================
   ICON GUIDE LEGEND
   ============================================================ */
.ig { margin: 0 0 18px; }
.ig__toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  background: transparent; border: 1px dashed var(--db-border-2); border-radius: var(--db-r-pill);
  color: var(--db-text-2); font-family: var(--db-font-body); font-size: 13px; cursor: pointer;
}
.ig__toggle:hover { border-color: var(--db-accent); color: var(--db-accent-2); }
.ig__toggle svg { width: 15px; height: 15px; }
.ig__panel { display: none; margin-top: 12px; padding: 16px; background: var(--db-card); border: 1px solid var(--db-border); border-radius: var(--db-r-md); }
.ig__panel.is-open { display: block; }
.ig__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
@media (min-width: 680px) { .ig__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .ig__list { grid-template-columns: repeat(4, 1fr); } }
.ig__item { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--db-text-2); }
.ig__item .tc-feat { cursor: default; }

/* ============================================================
   LIBRARY FILTERS
   ============================================================ */
.lib-toolbar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.lib-search {
  display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 50px;
  background: var(--tc-surface); border: 1.5px solid transparent; border-radius: var(--db-r-md); box-shadow: var(--db-shadow-sm);
}
.lib-search:focus-within { border-color: var(--db-accent); }
.lib-search svg { width: 18px; height: 18px; color: var(--tc-ink-3); flex: 0 0 auto; }
.lib-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--db-font-body); font-size: 16px; color: var(--tc-ink); }
.lib-search input::placeholder { color: var(--tc-ink-3); }

.lib-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 720px) { .lib-filters { grid-template-columns: repeat(5, 1fr); } }
.lib-sel { position: relative; }
.lib-sel select {
  width: 100%; min-height: 46px; padding: 0 36px 0 13px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background: var(--db-card); border: 1px solid var(--db-border-2); border-radius: var(--db-r-md);
  color: var(--db-text); font-family: var(--db-font-body); font-size: 14px; outline: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236FA0D0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.lib-sel select:focus { border-color: var(--db-accent); }
.lib-sel__lbl { display: block; font-family: var(--db-font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--db-text-3); margin: 0 0 6px 2px; }

.lib-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.lib-count { font-family: var(--db-font-mono); font-size: 13px; color: var(--db-text-2); }
.lib-count b { color: var(--db-text); }
.lib-active { display: flex; flex-wrap: wrap; gap: 7px; }
.lib-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 11px; border-radius: var(--db-r-pill);
  background: var(--db-accent-dim); border: 1px solid var(--db-accent-line); color: var(--db-accent-2);
  font-family: var(--db-font-body); font-size: 12.5px;
}
.lib-pill button { width: 20px; height: 20px; border: 0; background: transparent; color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.lib-pill button svg { width: 13px; height: 13px; }
.lib-reset { margin-left: auto; }

.lib-empty { text-align: center; padding: 48px 18px; }
.lib-empty__icon { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; background: var(--db-accent-dim); border: 1px solid var(--db-accent-line); color: var(--db-accent-2); }
.lib-empty__icon svg { width: 26px; height: 26px; }
.lib-empty h3 { font-family: var(--db-font-head); font-weight: 600; font-size: 18px; color: var(--db-text); margin: 0 0 6px; }
.lib-empty p { color: var(--db-text-2); margin: 0; font-size: 14.5px; }

/* ============================================================
   HOMEPAGE SECTIONS
   ============================================================ */
/* category tiles */
.hm-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 620px) { .hm-cats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 940px) { .hm-cats { grid-template-columns: repeat(4, 1fr); } }
.hm-cat {
  display: flex; align-items: center; gap: 12px; padding: 15px 16px; text-decoration: none;
  background: var(--db-card); border: 1px solid var(--db-border); border-radius: var(--db-r-md);
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.hm-cat:hover { background: var(--db-card-2); border-color: var(--db-glow-line); transform: translateY(-2px); }
.hm-cat__well { width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto; }
.hm-cat__name { font-family: var(--db-font-head); font-weight: 600; font-size: 15px; color: var(--db-text); }
.hm-cat__count { font-family: var(--db-font-mono); font-size: 11.5px; color: var(--db-text-3); margin-top: 1px; }

/* type pills row */
.hm-types { display: flex; flex-wrap: wrap; gap: 10px; }
.hm-type {
  display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 16px; text-decoration: none;
  background: var(--db-card); border: 1px solid var(--db-border); border-radius: var(--db-r-pill);
  color: var(--db-text); font-family: var(--db-font-head); font-weight: 500; font-size: 14px;
  transition: all .15s ease;
}
.hm-type:hover { border-color: var(--db-accent); color: var(--db-accent-2); background: var(--db-accent-dim); }
.hm-type svg { width: 17px; height: 17px; color: var(--db-accent); }
.hm-type span.c { font-family: var(--db-font-mono); font-size: 11.5px; color: var(--db-text-3); }

/* how it works */
.hm-steps { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .hm-steps { grid-template-columns: repeat(3, 1fr); } }
.hm-step { padding: 22px; background: var(--db-card); border: 1px solid var(--db-border); border-radius: var(--db-r-lg); }
.hm-step__n { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--db-accent-dim); border: 1px solid var(--db-accent-line); color: var(--db-accent-2);
  font-family: var(--db-font-head); font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.hm-step h3 { font-family: var(--db-font-head); font-weight: 600; font-size: 17px; color: var(--db-text); margin: 0 0 7px; }
.hm-step p { font-size: 14px; color: var(--db-text-2); margin: 0; line-height: 1.55; }

/* free vs premium */
.hm-vs { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .hm-vs { grid-template-columns: 1fr 1fr; } }
.hm-vs__card { padding: 26px; border-radius: var(--db-r-lg); border: 1px solid var(--db-border); }
.hm-vs__free { background: var(--db-card); }
.hm-vs__prem { background: var(--db-elevated); border-color: var(--db-sand-line); }
.hm-vs__card h3 { font-family: var(--db-font-head); font-weight: 600; font-size: 19px; color: var(--db-text); margin: 12px 0 8px; }
.hm-vs__card p { color: var(--db-text-2); font-size: 14.5px; margin: 0; line-height: 1.55; }

/* privacy band */
.hm-trust { background: var(--db-bg-deep); border: 1px solid var(--db-border); border-radius: var(--db-r-xl); padding: 32px 24px; }
.hm-trust__grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }
@media (min-width: 720px) { .hm-trust__grid { grid-template-columns: repeat(3, 1fr); } }
.hm-trust__item { display: flex; gap: 12px; align-items: flex-start; }
.hm-trust__item svg { width: 20px; height: 20px; color: var(--db-sand); flex: 0 0 auto; margin-top: 2px; }
.hm-trust__item span { color: var(--db-text-2); font-size: 14.5px; line-height: 1.5; }

/* newsletter */
.hm-news { background: var(--db-card); border: 1px solid var(--db-border); border-radius: var(--db-r-xl); padding: 32px 24px; text-align: center; }
.hm-news__form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 440px; margin: 18px auto 10px; }
.hm-news__form input { flex: 1; min-width: 200px; min-height: 50px; padding: 0 16px;
  background: var(--tc-surface); border: 1.5px solid transparent; border-radius: var(--db-r-md);
  font-family: var(--db-font-body); font-size: 16px; color: var(--tc-ink); outline: 0; }
.hm-news__form input:focus { border-color: var(--db-accent); }

/* attribution chip (dbfam travel etc.) */
.tc-by { font-family: var(--db-font-mono); font-size: 11px; color: var(--db-text-3); }
.tc-by b { color: var(--db-sand); font-weight: 600; }

/* ============================================================
   TOOL PAGE — extended content blocks
   ============================================================ */
.tp-block { margin-top: 34px; }
.tp-block:first-child { margin-top: 0; }
.tp-block__h { font-family: var(--db-font-head); font-weight: 600; font-size: clamp(20px,4.5vw,24px); color: var(--db-text); margin: 0 0 14px; letter-spacing: -.01em; }

/* use-case list */
.tp-uses { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .tp-uses { grid-template-columns: 1fr 1fr; } }
.tp-use { display: flex; gap: 11px; align-items: flex-start; padding: 14px 15px; background: var(--db-card); border: 1px solid var(--db-border); border-radius: var(--db-r-md); }
.tp-use__ic { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--db-accent-dim); border: 1px solid var(--db-accent-line); color: var(--db-accent-2); }
.tp-use__ic svg { width: 16px; height: 16px; }
.tp-use span { font-size: 14px; color: var(--db-text-2); line-height: 1.45; }

/* worked example callout */
.tp-example { padding: 20px; background: var(--db-bg-deep); border: 1px solid var(--db-border); border-left: 3px solid var(--db-sand); border-radius: var(--db-r-md); }
.tp-example__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.tp-example__row + .tp-example__row { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--db-border); }
.tp-example__k { font-family: var(--db-font-body); font-size: 13.5px; color: var(--db-text-3); min-width: 110px; }
.tp-example__v { font-family: var(--db-font-mono); font-size: 14px; color: var(--db-text); }
.tp-example__v b { color: var(--db-sand-2); font-weight: 700; }

/* tips list */
.tp-tips { list-style: none; margin: 0; padding: 0; }
.tp-tips li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--db-border); font-size: 14.5px; color: var(--db-text-2); line-height: 1.5; }
.tp-tips li:last-child { border-bottom: none; }
.tp-tips svg { width: 16px; height: 16px; color: var(--db-sand); flex: 0 0 auto; margin-top: 3px; }

/* action checklist (numbered "what to do next") */
.tp-checklist { list-style: none; margin: 0; padding: 0; counter-reset: checklist-step; }
.tp-checklist li { display: flex; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--db-border); font-size: 14.5px; color: var(--db-text-2); line-height: 1.5; align-items: flex-start; }
.tp-checklist li:last-child { border-bottom: none; }
.tp-checklist li::before { content: counter(checklist-step); counter-increment: checklist-step; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--db-accent-dim); border: 1px solid var(--db-accent-line); color: var(--db-accent-2); font-family: var(--db-font-head); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }

/* formula / method box */
.tp-formula { background: var(--db-bg-deep); border: 1px solid var(--db-border); border-left: 3px solid var(--db-accent); border-radius: var(--db-r-md); padding: 18px 20px; }
.tp-formula p { font-size: 14.5px; line-height: 1.65; color: var(--db-text-2); margin: 0 0 10px; }
.tp-formula p:last-child { margin-bottom: 0; }
.tp-formula code { font-family: var(--db-font-mono); font-size: 13.5px; color: var(--db-sand-2); background: rgba(255,255,255,.07); padding: 2px 6px; border-radius: 5px; white-space: pre-wrap; }

/* limitations list */
.tp-limits { list-style: none; margin: 0; padding: 0; }
.tp-limits li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--db-border); font-size: 14px; color: var(--db-text-3); line-height: 1.5; align-items: flex-start; }
.tp-limits li:last-child { border-bottom: none; }
.tp-limits svg { width: 15px; height: 15px; color: var(--db-warn); flex: 0 0 auto; margin-top: 2px; }

/* trust line below tool description */
.tp-trust { font-family: var(--db-font-mono); font-size: 11.5px; color: var(--db-text-3); margin: 10px 0 0; letter-spacing: .03em; }

/* ============================================================
   AD SLOTS  (clearly labelled, never disguised as content)
   ============================================================ */
.ad-slot {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px);
  border: 1px dashed var(--db-border-2); border-radius: var(--db-r-md); text-align: center;
  color: var(--db-text-3); overflow: hidden;
}
.ad-slot__tag {
  position: absolute; top: 8px; left: 10px; font-family: var(--db-font-mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--db-text-3); opacity: .8;
}
.ad-slot__body { font-family: var(--db-font-body); font-size: 13px; color: var(--db-text-3); padding: 14px; }
.ad-slot__body b { display: block; color: var(--db-text-2); font-weight: 600; margin-bottom: 2px; }
.ad-slot--leaderboard { min-height: 110px; margin: 28px 0; }
.ad-slot--inline { min-height: 110px; margin: 8px 0; }
.ad-slot--rect { min-height: 250px; }
@media (min-width: 760px) { .ad-slot--leaderboard { min-height: 130px; } }

/* ============================================================
   AFFILIATE BLOCKS  (disclosed, on-brand, not pushy)
   ============================================================ */
.aff { background: var(--db-elevated); border: 1px solid var(--db-sand-line); border-radius: var(--db-r-lg); padding: 18px; }
.aff__head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.aff__label { font-family: var(--db-font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--db-sand-2); }
.aff__title { font-family: var(--db-font-head); font-weight: 600; font-size: 16px; color: var(--db-text); }
.aff__list { display: flex; flex-direction: column; gap: 10px; }
.aff-item { display: flex; align-items: center; gap: 13px; padding: 13px; background: var(--db-card); border: 1px solid var(--db-border); border-radius: var(--db-r-md); text-decoration: none; transition: border-color .15s ease, transform .15s ease, background .15s ease; }
.aff-item:hover { border-color: var(--db-sand-line); transform: translateY(-2px); background: var(--db-card-2); }
.aff-item__ic { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--db-sand-dim); border: 1px solid var(--db-sand-line); color: var(--db-sand-2); }
.aff-item__ic svg { width: 20px; height: 20px; }
.aff-item__name { display: block; font-family: var(--db-font-head); font-weight: 600; font-size: 14.5px; color: var(--db-text); }
.aff-item__desc { display: block; font-family: var(--db-font-body); font-size: 12.5px; color: var(--db-text-3); margin-top: 2px; line-height: 1.4; }
.aff-item__cta { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; font-family: var(--db-font-head); font-weight: 600; font-size: 13px; color: var(--db-sand-2); }
.aff-item__cta svg { width: 14px; height: 14px; }
.aff__disclosure { font-family: var(--db-font-body); font-size: 11.5px; color: var(--db-text-3); margin: 12px 0 0; line-height: 1.45; }

/* sticky sidebar wrapper for tool page aside */
.tp-aside { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 820px) { .tp-aside { position: sticky; top: 90px; } }

/* ============================================================
   ROUND 2 ADDITIONS
   header Lupe · footer brand+aligned cols · newsletter field/opt-in
   · dev ad placeholder · affiliate asterisk · about page
   ============================================================ */

/* --- header search (Lupe): mobile copy sits next to the burger --- */
.db-iconbtn--mobile { display: inline-flex; margin-right: 2px; }
@media (min-width: 860px) { .db-iconbtn--mobile { display: none; } }

/* --- footer: brand block + aligned, calmer columns --- */
.db-footer__cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px 28px; align-items: start;
}
.db-footer__brand { grid-column: 1 / -1; max-width: 340px; }
.db-footer__logo { display: inline-flex; align-items: center; }
.db-footer__logo img { height: 30px; width: auto; }
.db-footer__tag {
  margin: 14px 0 0; font-family: var(--db-font-body); font-size: 12.5px; line-height: 1.55;
  color: var(--db-text-3); max-width: 320px;
}
/* calmer headings + links so the three areas read quietly and line up */
.db-footer__col h4 { font-size: 11.5px; margin-bottom: 10px; color: var(--db-text-2); }
.db-footer__col a { font-size: 13px; padding: 4px 0; }
@media (min-width: 720px) {
  .db-footer__cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
  .db-footer__brand { grid-column: auto; }
}

/* --- newsletter: field matches the search bar + double opt-in state --- */
.hm-news__area { max-width: 460px; margin: 0 auto; }
.hm-news__form input { background: #E7EDF4; }
.hm-news__form input.is-invalid { border-color: var(--db-bad); }
.hm-news__note { margin-top: 4px; }
.hm-news__note.is-invalid { color: var(--db-bad); }
.hm-news__ok {
  display: flex; gap: 14px; align-items: flex-start; text-align: left;
  max-width: 440px; margin: 18px auto 0; padding: 18px;
  background: var(--db-elevated); border: 1px solid var(--db-border); border-radius: var(--db-r-lg);
}
.hm-news__okicon {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); border: 1px solid var(--db-border); color: var(--db-sand);
}
.hm-news__oktitle { font-family: var(--db-font-head); font-weight: 600; font-size: 16px; color: var(--db-text); margin: 2px 0 0; }
.hm-news__oktext { font-family: var(--db-font-body); font-size: 13.5px; line-height: 1.5; color: var(--db-text-2); margin: 6px 0 0; }

/* --- dev-only ad placeholder (never shown when ads disabled in prod) --- */
.ad-slot--dev { opacity: .6; border-style: dashed; }

/* --- affiliate asterisk marker --- */
.aff-item__mark { color: var(--db-sand-2); font-weight: 700; margin-left: 1px; }
.aff-item__cta .aff-item__mark { margin-left: 0; margin-right: 3px; }

/* --- about page --- */
.ab-prose { max-width: 680px; }
.ab-prose .db-h2 { margin-bottom: 14px; }
.ab-prose p { font-family: var(--db-font-body); font-size: 16px; line-height: 1.65; color: var(--db-text-2); margin: 0 0 14px; }
.ab-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .ab-grid { grid-template-columns: 1fr 1fr; } }
.ab-card { background: var(--db-card); border: 1px solid var(--db-border); border-radius: var(--db-r-lg); padding: 22px; }
.ab-card__h { font-family: var(--db-font-head); font-weight: 600; font-size: 17px; color: var(--db-text); margin: 14px 0 6px; }
.ab-card__p { font-family: var(--db-font-body); font-size: 14px; line-height: 1.55; color: var(--db-text-2); margin: 0; }
.ab-eco { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .ab-eco { grid-template-columns: repeat(3, 1fr); } }
.ab-eco__card { display: block; background: var(--db-bg-deep); border: 1px solid var(--db-border); border-radius: var(--db-r-lg); padding: 20px; text-decoration: none; transition: border-color .15s ease, transform .12s ease; }
a.ab-eco__card:hover { border-color: var(--db-accent); transform: translateY(-2px); }
.ab-eco__card.is-current { border-color: var(--db-sand-line); background: var(--db-elevated); }
.ab-eco__name { font-family: var(--db-font-head); font-weight: 700; font-size: 16px; color: var(--db-text); }
.ab-eco__desc { font-family: var(--db-font-body); font-size: 13.5px; line-height: 1.55; color: var(--db-text-2); margin: 8px 0 0; }

/* ============================================================
   CONTACT PAGE  (topic dropdown · no email exposed)
   ============================================================ */
.ct-wrap { max-width: 620px; margin: 0 auto; }
.ct-area { background: var(--db-card); border: 1px solid var(--db-border); border-radius: var(--db-r-xl, 18px); padding: 26px; }
.ct-form { display: flex; flex-direction: column; gap: 18px; }
.ct-field { display: flex; flex-direction: column; gap: 7px; }
.ct-label { font-family: var(--db-font-head); font-weight: 600; font-size: 13px; color: var(--db-text-2); }
.ct-row { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 560px) { .ct-row { grid-template-columns: 1fr 1fr; } }
.ct-input, .ct-select {
  width: 100%; font-family: var(--db-font-body); font-size: 15px; color: var(--db-text);
  background: #E7EDF4; border: 1px solid transparent; border-radius: var(--db-r-md, 12px);
  padding: 12px 14px; transition: border-color .15s ease, background .15s ease; box-sizing: border-box;
}
.ct-input::placeholder { color: #6b7a8d; }
.ct-input:focus, .ct-select:focus { outline: none; border-color: var(--db-accent); background: #EDF2F8; }
.ct-input.is-invalid, .ct-select.is-invalid { border-color: var(--db-bad); }
.ct-textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.ct-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23315D8A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
.ct-consent { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.ct-consent input { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--db-navy, #315D8A); }
.ct-consent span { font-family: var(--db-font-body); font-size: 13px; line-height: 1.5; color: var(--db-text-2); }
.ct-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ct-note { font-family: var(--db-font-body); font-size: 13px; margin: 0; color: var(--db-text-3); }
.ct-note.is-err { color: var(--db-bad); }
.ct-ok { text-align: center; padding: 16px 6px 8px; }
.ct-ok__icon {
  width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(60,160,110,.12); border: 1px solid rgba(60,160,110,.4); color: var(--db-ok, #3CA06E);
}
.ct-ok__title { font-family: var(--db-font-head); font-weight: 700; font-size: 22px; color: var(--db-text); margin: 0; }
.ct-ok__text { font-family: var(--db-font-body); font-size: 15px; line-height: 1.6; color: var(--db-text-2); margin: 10px auto 0; max-width: 440px; }



/* ============================================================
   QA patch 2026-06-03: consistent tool inputs/outputs, external product clarity
   ============================================================ */
.db-textarea{min-height:130px;resize:vertical;line-height:1.45;}
.db-output-wrap{margin-top:18px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(255,255,255,.06);overflow:hidden;}
.db-output-actions{display:flex;gap:8px;flex-wrap:wrap;padding:10px;border-bottom:1px solid rgba(255,255,255,.12);}
.db-mini-btn{border:1px solid rgba(226,202,158,.45);background:rgba(226,202,158,.14);color:var(--db-sand);border-radius:999px;padding:7px 11px;font-weight:800;cursor:pointer;}
.db-output{margin:0;padding:16px;white-space:pre-wrap;word-break:break-word;color:#fff;font:14px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}
.tcb--external{background:rgba(226,202,158,.14);border:1px solid rgba(226,202,158,.38);color:var(--db-sand);}
.tc-card.is-external-product{position:relative;}
.tc-card__external-note{font-size:12px;line-height:1.35;color:rgba(255,255,255,.72);margin:8px 0 0;}
.tc-card.is-external-product .tc-card__cta{color:var(--db-sand);}
.aff--own{border-color:rgba(226,202,158,.45);background:rgba(36,61,92,.82);}
.aff--own .aff-item{border-color:rgba(226,202,158,.28);}
.aff--own .aff-item__desc{color:rgba(255,255,255,.68);}
/* legacy polished travel pages: ensure light form cards remain readable on dark HUB */
.tool-card,.prose-card,.affiliate-soft{color:#17324d;}
.tool-card h2,.prose-card h2{color:#17324d!important;}
.tool-field label{color:#315D8A!important;}
.result-card .mini b,.result-card .result-title{color:#fff!important;}
@media(max-width:850px){.db-output-actions{gap:6px}.db-mini-btn{font-size:12px}}

/* QA 2026-06-03: search dropdown must not be clipped by the next section. */
.hs { position: relative; z-index: 90; max-width: 760px; }
.hs__wrap { position: relative; z-index: 100; }
.hs__suggest { z-index: 1000; max-height: min(68vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
.hs__sg { align-items: flex-start; }
.hs__sg__name { display: block; line-height: 1.25; }
.hs__sg__meta { display: block; line-height: 1.3; margin-top: 4px; }
@media (max-width: 680px) {
  .hs__suggest { max-height: 62vh; border-radius: 18px; }
  .hs__sg { padding: 12px 14px; }
}