/* Homepage only (core/home.html), on top of dataintell-marketing.css. */

/* Check Idea, right in the hero */
.hm-check { display: grid; gap: 8px; max-width: 560px; margin: 0 0 8px; padding: 22px; border: 1px solid var(--line-dk); border-radius: 14px; background: rgba(23,17,28,.62); backdrop-filter: blur(6px); }
.hm-check__lbl { font-size: 13px; font-weight: 600; color: rgba(251,249,252,.82); }
.hm-check__fld { width: 100%; padding: 11px 13px; border: 1px solid rgba(251,249,252,.2); border-radius: 8px; background: rgba(251,249,252,.06); color: var(--paper); font: 15px/1.45 var(--dm-body); resize: vertical; }
.hm-check__fld::placeholder { color: rgba(251,249,252,.38); }
.hm-check__fld:focus { outline: none; border-color: var(--orchid); box-shadow: 0 0 0 3px rgba(194,103,192,.25); }
.hm-check__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 8px; }
.hm-check__alt { color: rgba(251,249,252,.8); font-size: 14px; font-weight: 600; text-decoration: none; }
.hm-check__alt:hover { color: var(--orchid); }
.hm-check__note { margin: 4px 0 0; font-size: 12.5px; color: rgba(251,249,252,.5); }

/* Counts under the hero */
.hm-counts { border-bottom: 1px solid var(--line); background: var(--paper); }
.hm-counts__in { display: grid; grid-template-columns: repeat(4, 1fr); }
.hm-counts p { margin: 0; padding: 20px 0; font-size: 14px; color: var(--slate); }
.hm-counts b { display: block; font-family: var(--dm-display); font-weight: 400; font-size: 34px; line-height: 1.1; color: var(--ink); }
@media (max-width: 700px) { .hm-counts__in { grid-template-columns: repeat(2, 1fr); } }

/* Four steps instead of six */
.hm-pipe { grid-template-columns: repeat(4, 1fr); }
.hm-pipe .dm-step__d { font-size: 14px; max-width: 26ch; }
@media (max-width: 900px) { .hm-pipe { grid-template-columns: 1fr; } }

/* What you get */
.hm-gets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hm-get { padding: 26px 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.hm-get i { font-size: 20px; color: var(--plum); }
.hm-get h3 { margin: 14px 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.hm-get p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--slate); }
.hm-pro { margin: 26px 0 0; font-size: 15px; color: var(--slate); }
.hm-pro a { color: var(--plum); font-weight: 600; text-decoration: none; }
@media (max-width: 980px) { .hm-gets { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hm-gets { grid-template-columns: 1fr; } }

/* Examples: a report and a certificate */
.hm-show { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hm-spec { margin: 0; padding: 28px; border-radius: 14px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; }
.hm-spec__tag { margin: 0 0 18px; font-family: var(--dm-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.hm-spec__k { margin: 14px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--plum); }
.hm-spec__verdict { margin: 0 0 6px; font-family: var(--dm-display); font-size: 32px; line-height: 1.1; color: #B45309; }
.hm-spec__d { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.hm-spec__list { list-style: none; margin: 16px 0 6px; padding: 0; font-size: 14px; color: var(--slate); }
.hm-spec__list li { padding: 7px 0; border-top: 1px solid var(--line); }
.hm-spec__list b { color: var(--ink); }
.hm-spec .dm-door__go { margin-top: 20px; }
.hm-cert { padding: 24px; border-radius: 10px; background: var(--ink); color: var(--paper); border-top: 4px solid var(--seal); }
.hm-cert__k { margin: 0 0 8px; font-family: var(--dm-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--seal); }
.hm-cert__t { margin: 0 0 18px; font-family: var(--dm-display); font-size: 28px; line-height: 1.1; }
.hm-cert__dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0 0 18px; font-size: 14px; }
.hm-cert__dl dt { color: rgba(251,249,252,.5); }
.hm-cert__dl dd { margin: 0; }
.hm-cert__mono { font-family: var(--dm-mono); font-size: 13px; }
.hm-cert__v { margin: 0; font-size: 13px; color: rgba(251,249,252,.7); }
@media (max-width: 900px) { .hm-show { grid-template-columns: 1fr; } }

/* Two doors instead of three */
.hm-doors { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .hm-doors { grid-template-columns: 1fr; } }