/* ============================================================
   Dreamteam · Competitive Landscape — Design System
   Light, premium, data-dense. All color/type via CSS vars so
   brand tokens can be swapped in one place (see :root).
   ============================================================ */

:root {
  /* ---- Brand (dreamteam.co tokens: near-black primary + rust-orange spark, Inter) ---- */
  --accent:        #1A1A1A;   /* near-black — Dreamteam primary (buttons, nav, structure) */
  --accent-ink:    #000000;
  --accent-soft:   #F1EFEC;   /* warm paper tint */
  --accent-2:      #C0392B;   /* rust-orange — the one brand spark */
  --spark:         #C0392B;
  --spark-soft:    #F8E9E4;

  /* ---- Ink & neutrals ---- */
  --ink:      #0E0E14;
  --ink-2:    #35353F;
  --muted:    #6A6A78;
  --faint:    #9A9AA6;
  --line:     #E8E8EE;
  --line-2:   #F0F0F4;
  --bg:       #FFFFFF;
  --bg-2:     #FAFAFC;
  --bg-3:     #F4F4F8;
  --bg-ink:   #0E0E14;   /* dark sections */

  /* ---- Semantic ---- */
  --good:  #12915A;  --good-soft:#E4F5EC;
  --warn:  #B9770B;  --warn-soft:#FBF0DC;
  --bad:   #C4372B;  --bad-soft: #FBE6E3;
  --info:  #2563EB;  --info-soft:#E5EDFD;

  /* ---- Type ---- */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, monospace;

  /* ---- Shape / motion ---- */
  --r-sm: 7px; --r: 12px; --r-lg: 18px; --r-xl: 26px;
  --shadow-1: 0 1px 2px rgba(16,16,20,.04), 0 1px 3px rgba(16,16,20,.06);
  --shadow-2: 0 4px 12px rgba(16,16,20,.06), 0 12px 32px rgba(16,16,20,.08);
  --shadow-3: 0 12px 40px rgba(16,16,20,.12);
  --maxw: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- Threat / competitor accent hues ---- */
.k-hubspot   { --c: #FF6B4A; --c-soft:#FFEAE3; }
.k-pipedrive { --c: #1F7A54; --c-soft:#E4F3EC; }
.k-attio     { --c: #E5484D; --c-soft:#FBE6E7; }  /* most dangerous */
.k-lightfield{ --c: #6E56CF; --c-soft:#EDEAFB; }
.k-clarify   { --c: #0C8CE9; --c-soft:#E2F0FC; }
.k-day       { --c: #F2A900; --c-soft:#FCF1D8; }
.k-coffee    { --c: #8B5E3C; --c-soft:#F1E8E0; }
.k-dreamteam { --c: var(--spark); --c-soft: var(--spark-soft); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.62;
  font-feature-settings: "cv05","ss01","tnum" 0; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { line-height: 1.16; letter-spacing: -0.02em; font-weight: 680; color: var(--ink); margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.15rem); letter-spacing: -0.03em; }
h3 { font-size: 1.24rem; }
h4 { font-size: 1.02rem; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
strong { font-weight: 660; color: var(--ink); }
small { font-size: .82rem; }
::selection { background: var(--accent-soft); color: var(--accent-ink); }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); }
.narrow { max-width: 820px; }
.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* ============================ Top nav ============================ */
.topnav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topnav .wrap { display: flex; align-items: center; gap: 22px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 720; letter-spacing: -0.03em; color: var(--ink); font-size: 1.06rem; }
.brand:hover { text-decoration: none; }
.brand .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--spark); box-shadow: 0 0 0 4px var(--spark-soft); }
.brand .sep { color: var(--faint); font-weight: 400; }
.brand .sub { color: var(--muted); font-weight: 560; font-size: .92rem; }
.navlinks { display: flex; gap: 3px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.navlinks a {
  color: var(--ink-2); font-weight: 560; font-size: .9rem; padding: 7px 11px; border-radius: 8px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.navlinks a:hover { background: var(--bg-3); text-decoration: none; color: var(--ink); }
.navlinks a.active { background: var(--ink); color: #fff; }
.nav-toggle { display: none; }

/* ============================ Hero ============================ */
.hero { position: relative; padding: clamp(48px, 8vw, 104px) 0 clamp(36px,5vw,64px); overflow: hidden; }
.hero::before {
  content:""; position:absolute; inset:-40% -10% auto -10%; height: 80%;
  background: radial-gradient(60% 60% at 18% 0%, var(--accent-soft) 0%, transparent 60%),
              radial-gradient(48% 48% at 92% 8%, var(--spark-soft) 0%, transparent 55%);
  z-index: -1; filter: saturate(1.05);
}
.kicker {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono);
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink);
  background: var(--accent-soft); padding: 5px 11px; border-radius: 100px; font-weight: 600; margin-bottom: 20px;
}
.kicker .live { width:7px; height:7px; border-radius:50%; background: var(--accent-2); box-shadow:0 0 0 0 var(--accent-2); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent-2) 55%,transparent);} 70%{box-shadow:0 0 0 8px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }
.hero h1 { max-width: 15ch; }
.hero .lede { font-size: clamp(1.08rem, 1.9vw, 1.4rem); color: var(--ink-2); max-width: 60ch; line-height: 1.5; }
.hero-meta { display:flex; gap: 26px; flex-wrap: wrap; margin-top: 30px; color: var(--muted); font-size: .9rem; }
.hero-meta b { color: var(--ink); font-weight: 640; }

/* ============================ Sections ============================ */
section { padding: clamp(38px, 6vw, 72px) 0; }
.section-head { max-width: 62ch; margin-bottom: 34px; }
.eyebrow { font-family: var(--mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color: var(--accent-ink); font-weight:600; margin-bottom:12px; }
.divider { border:0; border-top:1px solid var(--line); margin: 0; }

/* ============================ Cards / grid ============================ */
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .g3,.g4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .g2,.g3,.g4 { grid-template-columns: 1fr;} }

.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; box-shadow: var(--shadow-1); transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--line) 40%, var(--c, var(--accent))); }

/* competitor tile */
.ctile { display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit; position:relative; border-top: 3px solid var(--c, var(--accent)); }
.ctile:hover { text-decoration:none; }
.ctile .ctile-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ctile .name { font-weight: 700; font-size: 1.14rem; letter-spacing:-.02em; color: var(--ink); }
.ctile .cat { font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.ctile .oneline { color: var(--ink-2); font-size:.94rem; line-height:1.45; }
.ctile .ctile-foot { margin-top:auto; display:flex; align-items:center; gap:10px; font-size:.82rem; color:var(--muted); padding-top:10px; border-top:1px solid var(--line-2); }
.ctile .arrow { margin-left:auto; color: var(--c, var(--accent)); font-weight:700; transition: transform .18s var(--ease); }
.ctile:hover .arrow { transform: translateX(3px); }

/* ============================ Threat meter ============================ */
.threat { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:100px; }
.threat i { width:6px; height:6px; border-radius:50%; background: currentColor; }
.threat.t5 { color:#B4231A; background: var(--bad-soft); }
.threat.t4 { color:#C4372B; background: var(--bad-soft); }
.threat.t3 { color:#B9770B; background: var(--warn-soft); }
.threat.t2 { color:#2563EB; background: var(--info-soft); }
.threat.t1 { color:#12915A; background: var(--good-soft); }

/* ============================ Claim tags ============================ */
.tag { font-family: var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.04em; padding:1.5px 6px; border-radius:5px; vertical-align: 1.5px; white-space:nowrap; cursor:help; border:1px solid transparent; }
.tag-s  { color: var(--good); background: var(--good-soft); border-color: color-mix(in srgb,var(--good) 20%,transparent); }
.tag-sr { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb,var(--warn) 20%,transparent); }
.tag-i  { color: var(--info); background: var(--info-soft); border-color: color-mix(in srgb,var(--info) 20%,transparent); }
.tag-u  { color: var(--bad);  background: var(--bad-soft);  border-color: color-mix(in srgb,var(--bad) 20%,transparent); }
.legend { display:flex; gap:16px; flex-wrap:wrap; font-size:.82rem; color:var(--muted); align-items:center; }
.legend b { color: var(--ink-2); font-weight:600; }

/* ============================ Callouts ============================ */
.callout { border-radius: var(--r); padding: 16px 18px 16px 20px; margin: 22px 0; position:relative; border:1px solid var(--line); background: var(--bg-2); }
.callout::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius: var(--r) 0 0 var(--r); background: var(--accent); }
.callout .lbl { font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); font-weight:700; display:block; margin-bottom:5px; }
.callout p:last-child { margin-bottom:0; }
.callout.sowhat::before { background: var(--spark); }
.callout.sowhat .lbl { color: #A32C21; }
.callout.risk::before { background: var(--bad); }
.callout.risk .lbl { color: var(--bad); }

/* win / lose */
.hh { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin: 20px 0; }
@media(max-width:620px){ .hh{ grid-template-columns:1fr; } }
.hh > div { border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; background:var(--bg); }
.hh .win  { border-top:3px solid var(--good); }
.hh .lose { border-top:3px solid var(--bad); }
.hh h4 { display:flex; align-items:center; gap:8px; }
.hh .win h4  { color: var(--good); }
.hh .lose h4 { color: var(--bad); }

/* ============================ Score bars (AI readiness) ============================ */
.scorebar { display:flex; align-items:center; gap:12px; margin:10px 0; }
.scorebar .lab { width: 168px; font-size:.9rem; color:var(--ink-2); flex:none; }
.scorebar .track { flex:1; height:9px; background: var(--bg-3); border-radius:100px; overflow:hidden; }
.scorebar .fill { height:100%; border-radius:100px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.scorebar .val { width: 42px; text-align:right; font-family:var(--mono); font-weight:600; font-size:.86rem; color:var(--ink); flex:none; }

/* stat row */
.stats { display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin:22px 0; }
.stats .stat { background:var(--bg); padding:16px 18px; }
.stats .stat .n { font-size:1.5rem; font-weight:720; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.stats .stat .l { font-size:.78rem; color:var(--muted); margin-top:3px; }

/* ============================ Tables (matrix) ============================ */
.table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); -webkit-overflow-scrolling:touch; }
table.matrix { border-collapse: collapse; width:100%; font-size:.9rem; min-width: 880px; }
table.matrix th, table.matrix td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line-2); vertical-align:top; }
table.matrix thead th { position:sticky; top:0; background: var(--bg-2); z-index:2; font-size:.78rem; letter-spacing:.02em; color:var(--ink-2); font-weight:660; border-bottom:1px solid var(--line); }
table.matrix tbody th[scope=row] { position:sticky; left:0; background: var(--bg); font-weight:600; color:var(--ink); z-index:1; min-width:170px; box-shadow: 1px 0 0 var(--line-2); }
table.matrix tbody tr:hover td, table.matrix tbody tr:hover th[scope=row] { background: var(--bg-2); }
table.matrix td.us { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
table.matrix thead th.us { background: var(--accent-soft); color: var(--accent-ink); }
.cell-yes { color: var(--good); font-weight:600; }
.cell-part{ color: var(--warn); font-weight:600; }
.cell-no  { color: var(--bad); font-weight:600; }
.cell-q   { color: var(--faint); }
.rowlabel-note { display:block; font-weight:400; color:var(--muted); font-size:.78rem; }

/* filter chips */
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; align-items:center; }
.chip { font-size:.84rem; font-weight:560; color:var(--ink-2); background:var(--bg); border:1px solid var(--line); padding:6px 13px; border-radius:100px; cursor:pointer; transition: all .14s var(--ease); }
.chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.chip[aria-pressed=true] { background: var(--ink); color:#fff; border-color:var(--ink); }
.chip.legacy[aria-pressed=true]{ background:#334; border-color:#334; }
.chip.modern[aria-pressed=true]{ background:var(--accent); border-color:var(--accent); }

/* ============================ Citations ============================ */
sup.cite { font-family: var(--mono); line-height:0; }
sup.cite a {
  font-size: .64em; font-weight:600; color: var(--spark); background: var(--spark-soft);
  padding: 1px 4px; border-radius: 4px; text-decoration:none; margin-left:2px; transition: background .12s, color .12s;
}
sup.cite a:hover { background: var(--spark); color:#fff; }
sup.cite.missing a { color:#fff; background: var(--bad); }  /* QA: unresolved source key */

.references { margin-top: 54px; padding-top: 26px; border-top: 2px solid var(--line); }
.references h3 { font-size:1.05rem; display:flex; align-items:center; gap:10px; }
.references ol { padding-left: 0; list-style:none; counter-reset: ref; margin:14px 0 0; column-gap: 40px; }
.references li {
  counter-increment: ref; position:relative; padding: 8px 8px 8px 40px; border-radius: var(--r-sm);
  font-size:.88rem; color: var(--ink-2); break-inside: avoid; scroll-margin-top: 90px;
}
.references li::before {
  content: counter(ref); position:absolute; left:0; top:8px; width:26px; text-align:right;
  font-family:var(--mono); font-size:.78rem; font-weight:600; color: var(--accent-ink);
}
.references li:target { background: var(--accent-soft); box-shadow: -6px 0 0 var(--accent-soft); }
.references li .src-title { font-weight:560; color: var(--ink); }
.references li .src-dom { color: var(--muted); font-family:var(--mono); font-size:.78rem; }
.references li .backref { margin-left:8px; color: var(--faint); text-decoration:none; font-size:.9rem; }
.references li .backref:hover { color: var(--accent); }
@media(min-width: 820px){ .references ol { columns: 2; } }

/* citation hover tooltip */
.cite-tip {
  position: fixed; z-index: 90; max-width: 320px; background: var(--bg-ink); color:#F4F4F8;
  font-size:.8rem; line-height:1.4; padding:9px 12px; border-radius:10px; box-shadow: var(--shadow-3);
  pointer-events:none; opacity:0; transform: translateY(4px); transition: opacity .12s, transform .12s;
}
.cite-tip.show { opacity:1; transform: translateY(0); }
.cite-tip .t { font-weight:600; color:#fff; }
.cite-tip .d { color: #A9A9C0; font-family:var(--mono); font-size:.72rem; margin-top:2px; }

/* ============================ Dark band ============================ */
.band-ink { background: var(--bg-ink); color:#E9E9F0; border-radius: var(--r-xl); padding: clamp(28px,5vw,52px); }
.band-ink h2, .band-ink h3, .band-ink strong { color:#fff; }
.band-ink .eyebrow { color: #B7AEFF; }
.band-ink a { color:#B7AEFF; }

/* ============================ Footer ============================ */
.foot { border-top:1px solid var(--line); margin-top: 40px; padding: 34px 0 60px; color: var(--muted); font-size:.86rem; }
.foot .wrap { display:flex; gap:20px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.foot .fnav { display:flex; gap:16px; flex-wrap:wrap; }
.foot a { color: var(--ink-2); }

/* breadcrumb */
.crumb { font-size:.85rem; color:var(--muted); margin: 22px 0 6px; }
.crumb a { color: var(--muted); } .crumb b { color: var(--ink-2); font-weight:600; }

/* utilities */
.tacenter{text-align:center;} .mt0{margin-top:0;} .mb0{margin-bottom:0;}
.pill-num { font-family:var(--mono); font-weight:700; font-size:.8rem; padding:2px 8px; border-radius:6px; background:var(--bg-3); color:var(--ink-2); }
.updated { font-family:var(--mono); font-size:.76rem; color:var(--faint); }
.toc { position:sticky; top:80px; align-self:start; font-size:.88rem; }
.toc a { display:block; padding:5px 12px; color:var(--muted); border-left:2px solid var(--line); line-height:1.35; }
.toc a:hover, .toc a.active { color:var(--ink); border-color:var(--spark); text-decoration:none; }
.toc-h { font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); padding:0 12px 8px; }

/* ---- Dossier (competitor page) layout ---- */
.dossier { display:grid; grid-template-columns: minmax(0,1fr) 220px; gap:48px; align-items:start; margin-top:24px; }
.dossier-main { min-width:0; }
@media(max-width:940px){ .dossier{ grid-template-columns:1fr; } .dossier aside{ display:none; } }
.dhead { border-top:4px solid var(--c,var(--accent)); padding-top:20px; margin-top:8px; }
.dhead .drow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.dhead h1 { margin:2px 0 8px; }
.dossier-main section { padding:26px 0; border-top:1px solid var(--line-2); }
.dossier-main section:first-of-type { border-top:none; }
.dossier-main h2 { font-size:1.5rem; margin-bottom:14px; scroll-margin-top:84px; }
.aiscore-big { display:inline-flex; align-items:baseline; gap:5px; font-family:var(--mono); background:var(--bg-3); padding:4px 10px; border-radius:8px; }
.aiscore-big b { font-size:1.15rem; color:var(--ink); }
.feat { list-style:none; padding:0; margin:14px 0; }
.feat li { padding:11px 0 11px 26px; border-bottom:1px solid var(--line-2); position:relative; }
.feat li::before { content:"▸"; position:absolute; left:2px; color:var(--c,var(--accent)); font-weight:700; }
.feat li b { color:var(--ink); }
.quote { border-left:3px solid var(--line); padding:3px 0 3px 16px; margin:14px 0; color:var(--ink-2); }
.quote .who { display:block; font-size:.8rem; color:var(--muted); margin-top:5px; font-style:normal; }
.quote.pro { border-color: var(--good); } .quote.con { border-color: var(--bad); }
.gapnote { font-size:.85rem; color:var(--muted); background:var(--bg-2); border:1px dashed var(--line); border-radius:var(--r-sm); padding:10px 14px; margin:14px 0; }

@media (max-width: 860px){
  .navlinks { display:none; position:absolute; top:62px; left:0; right:0; background:var(--bg); flex-direction:column; padding:10px 20px 18px; border-bottom:1px solid var(--line); box-shadow:var(--shadow-2); }
  .navlinks.open { display:flex; }
  .navlinks a { padding:10px 12px; }
  .nav-toggle { display:inline-flex; margin-left:auto; background:none; border:1px solid var(--line); border-radius:8px; padding:7px 10px; cursor:pointer; }
}

/* print */
@media print {
  .topnav,.foot,.chips,.nav-toggle { display:none; }
  .card,.table-scroll { box-shadow:none; break-inside: avoid; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:.7em; color:#555; }
  sup.cite a { background:none; color:#000; }
}