/* =========================================================================
   Authoritative Context — page CSS (hosted asset, loaded via top HtmlEmbed)
   Re-declares the FULL source rule sets for reused classes (Webflow's rebuild
   kept only fragments) + the page-unique sections (defsec/acviz, ivsa, cmpx).
   Tokens (--accent, --ink, --line, --font-mono ...) come from TQ Global Styles.
   ========================================================================= */

/* ---------- section alternation (source uses inline borders; .section-alt has no rule) ---------- */
#problem, #four-elements, #why-ai, #authority, #how-built {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

/* ============================ HERO (product) ============================ */
.hero.hero-product { position: relative; overflow: hidden; display: flex; align-items: center;
  padding-top: clamp(60px, 8vw, 112px); padding-bottom: clamp(52px, 7vw, 96px); }
.hero-product .container { position: relative; z-index: 1; }
.hero-interior { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.hero-interior .display { max-width: 17ch; margin-left: auto; margin-right: auto; }
.hero .lede { margin: 24px auto 0; max-width: 600px; }
.hero-label { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 22px; }
.hero-actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-actions.center { justify-content: center; align-items: center; }
.hero-wash { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(20,20,27,.05) 0 1px, transparent 1px 54px),
    radial-gradient(58% 50% at 50% -8%, rgba(241,90,34,.06), transparent 70%),
    radial-gradient(50% 40% at 88% 4%, rgba(59,111,246,.05), transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 94%); }
/* hero-icon: box is killed by the site-wide !important reset -> render as a bare glyph */
.hero-icon { background: transparent !important; border: none !important; box-shadow: none !important;
  width: auto !important; height: auto !important; display: grid; place-items: center; margin-bottom: 26px; color: var(--ink); }
.hi-svg { width: 46px; height: 46px; display: block; }
.hi-dot { fill: #9A968B; }
.hi-adot { fill: var(--accent); }
.hi-c { stroke: #C9C5BA; stroke-width: 1.4; }

/* ============================ HEAD-SPLIT ============================ */
.head-split { display: grid; grid-template-columns: 1fr 0.82fr; gap: clamp(40px, 8vw, 120px); align-items: start; margin-bottom: clamp(36px, 5vw, 52px); }
.head-split .section-title { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.65rem); }
.head-split .lede { margin: 0; padding-top: 5px; }
@media (max-width: 860px) { .head-split { grid-template-columns: 1fr; gap: 16px; } }

/* ============================ CAP GRID + icon reset ============================ */
.cap-grid { margin-top: clamp(40px, 5vw, 56px); display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--card); }
.cap { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(26px, 2.6vw, 34px); }
.cap h3 { font-size: 1.12rem; letter-spacing: -.02em; margin-top: 20px; }
.cap p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; margin-top: 9px; }
/* icon reset: no navy box, just a 27px glyph (accent for c-ic-acc) */
.cap .c-ic { background: transparent !important; border: none !important; box-shadow: none !important;
  width: auto !important; height: auto !important; display: flex; justify-content: flex-start; align-items: center; }
.cap .c-ic .iconify { font-size: 27px; color: var(--ink); }
.cap .c-ic-acc .iconify { color: var(--accent); }
.cap-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .cap-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .cap-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cap-grid.cols-4 { grid-template-columns: 1fr; } }
/* four-elements pillar labels */
.pillar-num { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 12px; }
.pillar-q { font-weight: 600; color: var(--ink); font-size: 15px; margin: 6px 0 10px; }
.fourel-foot { text-align: center; margin: clamp(22px, 2.6vw, 32px) auto 0; font-size: 14px; color: var(--ink-mute); font-family: var(--font-mono); letter-spacing: .02em; }

/* ============================ AUTHORITY (authx) — full re-declaration ============================ */
.authx { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: clamp(30px, 4vw, 46px); }
.authx-tile { position: relative; overflow: hidden; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--card); padding: clamp(20px, 2.4vw, 28px); }
.authx-copy { grid-column: span 2; grid-row: span 2; }
.authx-copy p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.authx-std { grid-column: span 1; position: relative; display: flex; flex-direction: column; gap: 6px; justify-content: center; padding: clamp(16px, 1.8vw, 24px); padding-right: 34px; transition: background .15s ease; text-decoration: none; }
.authx-std:hover { background: var(--bg-2); }
.authx-std b { font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: .06em; color: var(--ink); }
.authx-std:hover b { color: var(--accent); }
.authx-std > span { font-size: 12.5px; line-height: 1.4; color: var(--ink-mute); }
.authx-std .std-arr { position: absolute; top: 12px; right: 12px; font-size: 14px; color: var(--ink-mute); transition: color .15s ease, transform .15s ease; }
.authx-std:hover .std-arr { color: var(--accent); transform: translate(1px, -1px); }
.authx-book { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; background: var(--ink); border-color: var(--ink); transition: transform .25s cubic-bezier(.3,1,.4,1), box-shadow .25s ease; text-decoration: none; }
.authx-book:hover { transform: translateY(-4px); box-shadow: 0 28px 54px -26px rgba(14,26,46,.5); }
.authx-book .authx-k { color: rgba(255,255,255,.55); }
.authx-book.authx-tile h3 { color: #fff; font-size: clamp(1.2rem, 1.7vw, 1.45rem); padding-right: 48px; }
.authx-book.authx-tile > p { color: rgba(255,255,255,.8); }
.authx-book p em { color: #fff; }
.authx-book .arr { color: var(--accent); }
.authx-stat { grid-column: span 2; }
.authx-k { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.authx-tile h3 { margin-top: 8px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 1.4vw, 1.2rem); letter-spacing: -.015em; }
.authx-tile > p, .authx-book p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); max-width: 46ch; }
.authx-tile p em { font-style: italic; color: var(--ink); }
.authx-book.authx-tile p em { color: #fff; }
.authx-n { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3vw, 2.7rem); letter-spacing: -.03em; line-height: 1; color: var(--accent); }
.authx-stat p { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); max-width: 24ch; }
.authx-bookarr { position: absolute; top: 18px; right: 18px; color: rgba(255,255,255,.85); font-size: 18px; transition: transform .2s ease, color .2s ease; }
.authx-bookarr .iconify { font-size: 18px; }
.authx-book:hover .authx-bookarr { transform: translate(2px, -2px); color: #fff; }
.authx-booklink { margin-top: auto; padding-top: 22px; font-size: 14px; font-weight: 600; color: var(--accent); }
.authx-booklink .arr { display: inline-block; transition: transform .2s ease; }
.authx-book:hover .authx-booklink .arr { transform: translateX(3px); }
@media (max-width: 860px) {
  .authx { grid-template-columns: 1fr 1fr; }
  .authx-copy, .authx-book { grid-column: 1 / -1; grid-row: auto; }
  .authx-stat { grid-column: span 1; }
}

/* ============================ HOW IT'S BUILT (tqsteps) — full re-declaration ============================ */
.tqsteps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(18px, 2.5vw, 34px); margin-top: clamp(38px, 4.5vw, 58px); padding-top: 30px; }
.tqsteps::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--line-strong) 0%, var(--line-strong) 32%, rgba(241,90,34,.45) 66%, var(--accent) 100%); }
.tqstep { position: relative; }
.tqstep::before { content: ""; position: absolute; top: -34px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.tqstep:nth-child(3)::before { background: #cf9273; }
.tqstep:nth-child(4)::before, .tqstep:nth-child(5)::before { background: var(--accent); }
.tqstep-n { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 10px; }
.tqstep h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -.02em; }
.tqstep-k { font-weight: 600; color: var(--accent-ink); font-size: 14px; margin: 7px 0 10px; }
.tqstep p:not(.tqstep-k) { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
@media (max-width: 960px) {
  .tqsteps { grid-template-columns: 1fr; gap: 0; padding-top: 0; padding-left: 26px; }
  .tqsteps::before { top: 8px; bottom: 8px; left: 0; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--line-strong) 0%, var(--line-strong) 32%, rgba(241,90,34,.45) 66%, var(--accent) 100%); }
  .tqstep { padding: 18px 0; }
  .tqstep::before { top: 24px; left: -30px; }
}

/* ============================ FAQ — full re-declaration ============================ */
.faq-grid { margin-top: 44px; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(28px,5vw,72px); align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; background: none; border: 0; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font-family: var(--font-display); font-size: 1.18rem; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; cursor: pointer; }
.faq-q .pm { flex: none; width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: 0; display: grid; place-items: center; transition: transform .3s, background .3s, color .3s, border-color .3s; }
.faq-q .pm .iconify { font-size: 15px; }
.faq-item.open .faq-q .pm { background: var(--ink); color: #fff; border-color: var(--ink); transform: rotate(90deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a p { color: var(--ink-soft); padding: 0 0 24px; font-size: 15.5px; max-width: 60ch; margin: 0; }
.faq-item.open .faq-a { max-height: 320px; }
@media (max-width: 1000px) { .faq-grid { grid-template-columns: 1fr; } }

/* ============================ DEFINITION + ACVIZ (canvas) ============================ */
.defsec { background: #fff; padding-bottom: 0; }
.defsec .acviz { margin-bottom: 0; }
.acviz { position: relative; height: clamp(300px, 32vw, 460px); background: #fff; margin-top: clamp(30px, 4vw, 46px); overflow: hidden; }
.acviz canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.acviz-tags { position: relative; height: 100%; pointer-events: none; }
.acviz-tag { position: absolute; top: clamp(14px, 2.4vw, 24px); font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink-mute); white-space: nowrap; }
.acviz-tag-l { left: 0; }
.acviz-tag-c { left: 50%; transform: translateX(-50%); border-color: var(--ink); color: var(--ink); }
.acviz-tag-r { right: 0; border-color: rgba(241, 90, 34, .55); color: var(--accent); }
@media (max-width: 640px) { .acviz-tag-c { display: none; } }

/* ============================ INFERRED vs AUTHORITATIVE (ivsa) ============================ */
.ivsa { max-width: 980px; margin: clamp(34px, 4vw, 52px) auto 0; }
.ivsa-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.ivsa-card { padding: clamp(24px, 2.8vw, 36px); display: flex; flex-direction: column; gap: 14px; }
.ivsa-card p { font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.6; margin: 0; }
.ivsa-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.ivsa-label .iconify { font-size: 16px; }
.ivsa-inferred { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-soft); }
.ivsa-inferred .ivsa-label { color: var(--ink-mute); }
.ivsa-auth { background: #fff; border: 1px solid var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 28px 64px -36px rgba(241,90,34,.55); color: var(--ink); }
.ivsa-auth p { font-weight: 500; }
.ivsa-auth .ivsa-label { color: var(--accent-ink); }
.ivsa-callout { margin-top: clamp(16px, 2vw, 24px); padding: clamp(22px, 2.6vw, 32px); background: var(--ink); color: rgba(255,255,255,.84); }
.ivsa-callout p { margin: 12px 0 0; font-size: clamp(.98rem, 1.25vw, 1.08rem); line-height: 1.65; max-width: 76ch; }
.ivsa-callout-l { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #ff8a5c; }
.ivsa-throughline { margin: clamp(26px, 3vw, 38px) auto 0; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.6rem); letter-spacing: -.02em; color: var(--ink); max-width: 34ch; }
.ivsa-throughline::before { content: ""; display: block; width: 34px; height: 2px; background: var(--accent); margin: 0 auto 18px; }
@media (max-width: 720px) { .ivsa-cols { grid-template-columns: 1fr; } }

/* ============================ COMPARISON BENTO (cmpx) ============================ */
.cmpx { display: grid; grid-template-columns: 1fr 1.06fr 1fr; gap: 0; margin-top: clamp(30px, 3.6vw, 46px);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cmpx-col { display: grid; grid-template-rows: repeat(3, 1fr); }
.cmpx-cell { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(22px, 3vw, 40px);
  min-height: clamp(150px, 15vw, 190px); padding: clamp(20px, 2.2vw, 28px);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--card); transition: background .18s ease; }
.cmpx-cell:hover { background: var(--bg-2); }
.cmpx-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cmpx-top h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 1.25vw, 1.15rem); letter-spacing: -.015em; color: var(--ink); }
.cmpx-ic { flex: none; font-size: 18px; color: var(--ink-mute); transition: color .18s ease; }
.cmpx-cell:hover .cmpx-ic { color: var(--accent); }
.cmpx-body { display: grid; gap: 7px; }
.cmpx-them { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-mute); }
.cmpx-us { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); font-weight: 500; }
.cmpx-hero { position: relative; display: grid; place-items: center; padding: clamp(26px, 3vw, 44px);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--ink);
  background-image: radial-gradient(120% 90% at 50% 0%, rgba(241,90,34,.22), transparent 62%); }
.cmpx-heroinner { text-align: center; max-width: 30ch; margin: 0 auto; }
.cmpx-mark { display: block; margin: 0 auto; width: 132px; height: auto; filter: brightness(0) invert(1); opacity: .95; }
.cmpx-hero h3 { margin-top: 20px; text-wrap: balance; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2vw, 1.75rem); letter-spacing: -.02em; color: #fff; }
.cmpx-hero p { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.76); text-wrap: pretty; }
.cmpx-herotag { display: inline-block; white-space: nowrap; margin-top: 20px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(241,90,34,.5); padding: 7px 12px; }
@media (max-width: 980px) {
  .cmpx { grid-template-columns: 1fr 1fr; }
  .cmpx-hero { grid-column: 1 / -1; order: -1; min-height: 240px; }
}
@media (max-width: 620px) { .cmpx { grid-template-columns: 1fr; } }