/* ---------------------------------------------------------------
   content.css — the benchmark, case-study and ad-gallery pages.

   Built to be read and to be extracted. Measure (~68ch) is set for
   reading; the answer-first lead is given real type size because
   44% of ChatGPT citations come from the first 30% of a page, and
   the source lines are deliberately visible rather than footnoted,
   since cited sources were one of the three modifications the GEO
   paper actually measured a lift from.
   --------------------------------------------------------------- */

.ct, .hb-inner{
  width:min(760px,90vw);margin:0 auto;
  padding-block:clamp(96px,12vh,150px) clamp(56px,8vh,104px);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Inter,system-ui,Arial,sans-serif;
  color:#24202d;
}
.ct{--c-ink-2:#5f5670;--c-ink-3:#766f82;--c-line:#17121f14}

.ct-kicker,.hb-kicker{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;
  background:#fff;box-shadow:inset 0 0 0 1px #17121f14;
  font:600 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:#7c3aed;
}
.ct-kicker span,.hb-kicker span{color:#a78bfa}
.ct-h,.hb-h{
  margin:clamp(16px,2vh,24px) 0 0;
  font-size:clamp(28px,3.1vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.08;
  text-wrap:balance;
}
/* the answer, first */
.ct-lead{
  margin:clamp(18px,2.4vh,28px) 0 0;
  font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:#2c2637;text-wrap:pretty;
}
.ct-lead b{font-weight:700;color:#201a2c}
.ct-sub{
  margin:clamp(12px,1.6vh,18px) 0 0;padding-left:14px;border-left:3px solid #7c3aed3d;
  font-size:clamp(13px,1.08vw,15px);line-height:1.55;color:var(--c-ink-3);
}

.ct-h2{
  margin:clamp(34px,4.4vh,56px) 0 clamp(12px,1.6vh,18px);
  font-size:clamp(19px,1.7vw,26px);font-weight:700;letter-spacing:-.025em;line-height:1.2;
}
.ct-p{margin:0 0 clamp(10px,1.4vh,16px);font-size:clamp(15px,1.22vw,17px);line-height:1.65;
  color:var(--c-ink-2);text-wrap:pretty}
.ct-p b{font-weight:650;color:#201a2c}
.ct-note{
  margin:clamp(14px,1.8vh,20px) 0 0;padding:clamp(13px,1.6vw,20px);border-radius:14px;
  background:#f6f3fc;box-shadow:inset 0 0 0 1px #7c3aed1f;
  font-size:clamp(14px,1.15vw,16px);line-height:1.6;color:#3b3348;
}
.ct-note b{font-weight:700;color:#201a2c}

.ct-l{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.3vh,15px)}
.ct-l li{
  position:relative;padding-left:20px;
  font-size:clamp(14.5px,1.18vw,16.5px);line-height:1.6;color:var(--c-ink-2);
}
.ct-l li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:2px;
  border-radius:2px;background:#a78bfa}
.ct-l b{font-weight:650;color:#201a2c}
.ct-l span{color:var(--c-ink-3);font-size:.92em}

.ct-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ct-t{width:100%;border-collapse:collapse;min-width:460px}
/* the small uppercase treatment belongs to COLUMN heads only. Row heads are
   <th scope="row"> so a screen reader can say which row a cell is in, but
   they read as body text and must look like it. */
.ct-t thead th{
  text-align:left;padding:0 14px 10px 0;white-space:nowrap;
  font:700 9.5px/1.3 ui-monospace,Menlo,monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-ink-3);
}
.ct-t td{
  padding:clamp(9px,1.2vh,13px) 14px clamp(9px,1.2vh,13px) 0;
  border-top:1px solid var(--c-line);vertical-align:top;
  font-size:clamp(13.5px,1.1vw,15.5px);line-height:1.45;color:var(--c-ink-2);
}
.ct-t tbody th{
  padding:clamp(9px,1.2vh,13px) 14px clamp(9px,1.2vh,13px) 0;
  border-top:1px solid var(--c-line);vertical-align:top;text-align:left;
  font-size:clamp(13.5px,1.1vw,15.5px);line-height:1.45;
  font-weight:650;color:#201a2c;white-space:nowrap;
}
.ct-t tbody th a{color:inherit;text-decoration-color:#a78bfa}
.ct-t td:nth-child(2){font-family:ui-monospace,Menlo,monospace;font-weight:650;color:#5b21b6;
  white-space:nowrap}

/* attribution stays on the page, not in a footnote */
.ct-src{
  margin:clamp(9px,1.2vh,14px) 0 0;
  font-size:clamp(12px,1vw,13.5px);line-height:1.5;color:var(--c-ink-3);
}
.ct-src i{font-style:italic}

.ct-cite{
  margin-top:clamp(40px,5vh,72px);padding:clamp(18px,2.2vw,28px);border-radius:16px;
  background:#fff;box-shadow:inset 0 0 0 1px var(--c-line);
}
.ct-cite-t{
  font:700 9.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:#7c3aed;margin-bottom:10px;
}
.ct-cite p{font-size:clamp(13px,1.08vw,15px);line-height:1.6;color:var(--c-ink-2)}
.ct-cite span{display:block;margin-top:6px;color:var(--c-ink-3)}

/* ---- a hub ---- */
.hb-l{list-style:none;margin:clamp(24px,3vh,40px) 0 0;padding:0;display:grid;gap:clamp(10px,1.4vh,16px)}
.hb-i a{
  display:block;padding:clamp(16px,2vw,24px);border-radius:16px;background:#fff;
  box-shadow:inset 0 0 0 1px #17121f14,0 14px 34px -30px #17121f;
  transition:box-shadow .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1);
}
.hb-i a:hover{transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px #7c3aed3d,0 18px 40px -26px #7c3aed80}
.hb-t{font-size:clamp(17px,1.4vw,21px);font-weight:650;letter-spacing:-.022em;line-height:1.24;
  color:#201a2c;text-wrap:balance}
.hb-s{margin-top:8px;font-size:clamp(13.5px,1.1vw,15.5px);line-height:1.55;color:#5f5670;
  text-wrap:pretty}
.hb-m{margin-top:10px;font:600 9.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.1em;
  text-transform:uppercase;color:#766f82}