/* Throughscan landing — art direction layer.
   Adds narrative rhythm the base system intentionally lacks: full-bleed dark
   bands, oversized data moments, a warm accent used only for "loss", and a
   through-line motif. Loaded only on the home page. */

:root {
  --tl-navy:        #0a1d30;
  --tl-navy-2:      #103153;
  --tl-on-navy:     #eef4fa;
  --tl-on-navy-mut: #9db6cf;
  --tl-accent-navy: #7fb4e8;   /* accent that reads on the dark band */
  --tl-loss:        #f0a06a;   /* warm: reserved for the lost / false number */
  --tl-line-navy:   rgba(255, 255, 255, 0.14);
  --tl-display: "Space Grotesk", var(--tl-font);
}

/* full-bleed bands break the page out of the centered column */
.tl-band { width: 100%; }
.tl-band--navy { background: var(--tl-navy); color: var(--tl-on-navy); }
.tl-band--tint { background: var(--tl-surface-2); }
.tl-band__inner { max-width: var(--tl-maxw); margin: 0 auto; padding: var(--tl-9) var(--tl-5); }
.tl-band--navy .tl-eyebrow { color: var(--tl-accent-navy); }
.tl-band--navy h2, .tl-band--navy h3 { color: var(--tl-on-navy); }
.tl-band--navy .tl-muted { color: var(--tl-on-navy-mut); }

/* oversized data moments */
.tl-xl { font-family: var(--tl-display); font-weight: 600; letter-spacing: -0.04em; line-height: 0.92; font-size: clamp(56px, 10vw, 116px); }
.tl-xl--ghost { color: var(--tl-on-navy-mut); opacity: 0.5; }
.tl-xl--loss { color: var(--tl-loss); }

/* the tension band */
.tl-tension { text-align: center; }
.tl-tension__nums { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 5vw, 64px); margin: var(--tl-5) 0; flex-wrap: wrap; }
.tl-tension__lbl { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tl-on-navy-mut); margin-top: var(--tl-3); }
.tl-tension__arrow { font-family: var(--tl-display); font-size: clamp(28px, 5vw, 48px); color: var(--tl-on-navy-mut); }
.tl-tension__line { max-width: 640px; margin: 0 auto; font-size: 18px; line-height: 1.6; color: var(--tl-on-navy-mut); }
.tl-tension__line strong { color: var(--tl-on-navy); font-weight: 500; }

/* section heading lockup (display font, no mandatory subtext) */
.tl-h-lockup h2 { font-family: var(--tl-display); font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.03em; }
.tl-eyebrow { font-family: var(--tl-font); }

/* featured tool spotlight */
.tl-feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tl-8); align-items: center; }
@media (max-width: 900px) { .tl-feature { grid-template-columns: 1fr; gap: var(--tl-6); } }
.tl-feature__points { list-style: none; margin: var(--tl-5) 0; padding: 0; display: grid; gap: var(--tl-3); }
.tl-feature__points li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.tl-feature__points .tl-i { color: var(--tl-accent); font-size: 22px; margin-top: 1px; flex: none; }
.tl-feature__points b { font-weight: 600; }
.tl-feature__points span { color: var(--tl-ink-2); }

/* topic-verdict mini visual (light) */
.tl-verdicts { display: grid; gap: 10px; }
.tl-verdict { display: flex; align-items: center; justify-content: space-between; gap: var(--tl-3); padding: 12px 16px; background: var(--tl-surface); border: 1px solid var(--tl-line); border-radius: var(--tl-r-md); font-size: 14px; box-shadow: var(--tl-shadow-1); }
.tl-verdict__topic { color: var(--tl-ink); font-weight: 500; }
.tl-verdict__tag { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--tl-r-pill); }
.tl-verdict__tag--keep { background: var(--tl-success-wash); color: var(--tl-success); }
.tl-verdict__tag--block { background: var(--tl-warn-wash); color: var(--tl-warn); }

/* buttons on the dark bands */
.tl-band--navy .tl-btn { background: transparent; border-color: var(--tl-line-navy); color: var(--tl-on-navy); }
.tl-band--navy .tl-btn:hover { background: rgba(255,255,255,0.07); border-color: var(--tl-on-navy-mut); }
.tl-band--navy .tl-btn--primary, .tl-band--navy .tl-btn--primary:hover { background: var(--tl-accent-navy); border-color: var(--tl-accent-navy); color: var(--tl-navy); }
.tl-band--navy .tl-btn--primary:hover { background: #9cc6ee; border-color: #9cc6ee; }

/* compact suite grid (icon + name + one line, no paragraph) */
.tl-suite { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tl-3); }
@media (max-width: 820px) { .tl-suite { grid-template-columns: 1fr; } }
.tl-suite__item { display: flex; align-items: center; gap: var(--tl-3); padding: var(--tl-4); border: 1px solid var(--tl-line); border-radius: var(--tl-r-lg); background: var(--tl-surface); text-decoration: none; color: inherit; transition: border-color 120ms ease, transform 120ms ease; }
.tl-suite__item:hover { text-decoration: none; border-color: var(--tl-accent); transform: translateY(-2px); }
.tl-suite__ic { width: 36px; height: 36px; flex: none; border-radius: var(--tl-r-md); background: var(--tl-accent-wash); color: var(--tl-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 19px; }
.tl-suite__name { display: block; font-weight: 600; font-size: 15px; }
.tl-suite__one { display: block; font-size: 13px; color: var(--tl-ink-2); margin-top: 2px; }

/* pull quote for the moat */
.tl-pull { font-family: var(--tl-display); font-size: clamp(26px, 4.5vw, 46px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; max-width: 18ch; }
.tl-pull .accent { color: var(--tl-accent-navy); }
.tl-moat { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--tl-7); align-items: center; }
@media (max-width: 900px) { .tl-moat { grid-template-columns: 1fr; gap: var(--tl-5); } }
.tl-pillars { display: grid; gap: var(--tl-4); }
.tl-pillar { display: flex; gap: var(--tl-3); align-items: flex-start; padding-left: var(--tl-4); border-left: 2px solid var(--tl-accent-navy); }
.tl-pillar__t { font-weight: 600; color: var(--tl-on-navy); }
.tl-pillar__d { font-size: 14px; color: var(--tl-on-navy-mut); margin-top: 2px; }

/* horizontal "how it works" flow with a connecting through-line */
.tl-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tl-5); position: relative; margin-top: var(--tl-6); }
@media (max-width: 760px) { .tl-flow { grid-template-columns: 1fr; gap: var(--tl-5); } }
.tl-flow__step { position: relative; }
.tl-flow__node { width: 40px; height: 40px; border-radius: 50%; background: var(--tl-accent-wash); color: var(--tl-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: var(--tl-3); position: relative; z-index: 1; }
.tl-flow__step:not(:last-child) .tl-flow__node::after { content: ""; position: absolute; left: 48px; top: 50%; width: calc(100% + var(--tl-5) - 8px); height: 2px; background: var(--tl-line); }
@media (max-width: 760px) { .tl-flow__step .tl-flow__node::after { display: none; } }
.tl-flow__t { font-weight: 600; font-size: 16px; }
.tl-flow__d { font-size: 14px; color: var(--tl-ink-2); margin-top: 4px; }

/* a clearer "go" link than the muted foot text */
.tl-go { display: inline-flex; align-items: center; gap: 6px; color: var(--tl-accent); font-size: 13px; font-weight: 500; }
.tl-band--navy .tl-go { color: var(--tl-accent-navy); }

/* FAQ accordion (objection handling) */
.tl-faq { max-width: var(--tl-maxw-prose); margin-top: var(--tl-6); }
.tl-faq details { border-bottom: 1px solid var(--tl-line); }
.tl-faq details:first-of-type { border-top: 1px solid var(--tl-line); }
.tl-faq summary { cursor: pointer; font-weight: 600; font-size: 17px; padding: var(--tl-4) 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--tl-4); }
.tl-faq summary::-webkit-details-marker { display: none; }
.tl-faq summary::after { content: "+"; color: var(--tl-accent); font-size: 24px; font-weight: 400; line-height: 1; flex: none; }
.tl-faq details[open] summary::after { content: "\2212"; }
.tl-faq__a { padding: 0 0 var(--tl-4); color: var(--tl-ink-2); font-size: 15px; line-height: 1.7; max-width: 62ch; }
.tl-faq__a a { color: var(--tl-accent); }

/* trust row (data-safety reassurance at the point of conversion) */
.tl-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tl-5); max-width: 860px; margin: var(--tl-7) auto 0; text-align: left; }
@media (max-width: 760px) { .tl-trust { grid-template-columns: 1fr; gap: var(--tl-4); } }
.tl-trust__item { display: flex; gap: 12px; align-items: flex-start; }
.tl-trust__item .tl-i { font-size: 22px; color: var(--tl-accent-navy); flex: none; margin-top: 2px; }
.tl-trust__item b { display: block; font-weight: 600; color: var(--tl-on-navy); margin-bottom: 2px; }
.tl-trust__item span { font-size: 13px; color: var(--tl-on-navy-mut); line-height: 1.5; }
.tl-reassure { font-size: 13px; color: var(--tl-on-navy-mut); margin-top: var(--tl-4); }
.tl-reassure a { color: var(--tl-accent-navy); }

/* scroll-reveal: content rises in as it enters view. Gated on .tl-js so the
   page is fully visible if JavaScript never runs. */
.tl-js [data-anim] { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tl-js [data-anim].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .tl-js [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; } }