/* aivisibilitynerd.com. Look: a data desk (Our World in Data's serif + chart + "updated" chips, Linear-style
   dated change log) for marketers choosing a tool at work. Chosen 2026-10-08 by a blind three-model panel
   (docs/design-2026-10-08/README.md); the editorial hook headline came from the losing option. */
:root{--navy:#14304f;--ink:#1c2733;--muted:#5d6b7a;--rule:#dde3ea;--bg:#fff;--soft:#f3f6f9;--coral:#d4492c;--teal:#1f7a74;--teal-soft:#e3f1ef}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16.5px/1.6 "IBM Plex Sans",system-ui,sans-serif}
a{color:inherit;text-underline-offset:2px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.small{font-size:13.5px;color:var(--muted)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:6px;z-index:9}

.nav{background:var(--navy);color:#fff}
.nav .in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:28px;padding:13px 24px}
.logo{font-family:"Source Serif 4",Georgia,serif;font-weight:700;font-size:23px;text-decoration:none;letter-spacing:-.01em;white-space:nowrap}.logo b{color:#ffb4a3}
.nav nav{display:flex;gap:22px;font-size:14.5px}.nav nav a{text-decoration:none;opacity:.92}.nav nav a:hover,.nav nav a[aria-current]{opacity:1;text-decoration:underline}
.nav .ind{margin-left:auto;font:500 12px "IBM Plex Mono",monospace;color:#c9d6e4;text-decoration:none;white-space:nowrap}
.sub{background:var(--soft);border-bottom:1px solid var(--rule)}
.sub .in{max-width:1200px;margin:0 auto;padding:8px 24px;display:flex;gap:8px;flex-wrap:wrap;font-size:12.5px}
.sub .in span{color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:11px;align-self:center;margin-right:4px}
.sub a{border:1px solid var(--rule);background:#fff;border-radius:99px;padding:3px 10px;text-decoration:none}.sub a:hover{border-color:var(--navy)}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:"Source Serif 4",Georgia,serif;color:var(--navy);letter-spacing:-.01em}
h1{font-weight:600;font-size:clamp(32px,4.3vw,50px);line-height:1.08;margin:0 0 14px}
h2{font-weight:600;font-size:clamp(23px,2.4vw,27px);line-height:1.2;margin:38px 0 6px}
h3{font-weight:600;font-size:20px;margin:24px 0 6px}
.h2cap{color:var(--muted);font-size:14px;margin:0 0 14px}
.kicker{font:500 12.5px "IBM Plex Mono",monospace;color:var(--coral);margin:0 0 10px;text-transform:uppercase;letter-spacing:.03em}

.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;padding:38px 0 32px;border-bottom:1px solid var(--rule)}
.dek{font-size:19px;color:#34414f;margin:0 0 16px}
.stats{display:flex;gap:8px;flex-wrap:wrap}.stats span{font:12.5px "IBM Plex Mono",monospace;border:1px solid var(--rule);border-radius:99px;padding:4px 11px;background:#fff}

.chart{border:1px solid var(--rule);padding:16px 18px;background:#fff;align-self:start}
.chart h3{font-size:17px;margin:0}.chart .cap{font-size:12.5px;color:var(--muted);margin:2px 0 12px}
.bar{display:grid;grid-template-columns:132px 1fr 62px;gap:10px;align-items:center;font-size:13.5px;margin:7px 0;text-decoration:none}
.bar i{display:block;height:14px;background:var(--teal);border-radius:1px;min-width:2px}.bar:first-of-type i{background:var(--coral)}
.bar .v{font-family:"IBM Plex Mono";text-align:right}.bar:hover span:first-child{text-decoration:underline}
.chart .src{font-size:11.5px;color:var(--muted);margin:10px 0 0}

.two{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px;padding:6px 0 30px}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{text-align:left;font:600 11.5px "IBM Plex Sans";text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:8px;border-bottom:2px solid var(--navy);vertical-align:bottom}
.tbl td{padding:10px 8px;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl .num{font-family:"IBM Plex Mono";text-align:right;white-space:nowrap}
.tbl td.tool a{font-weight:600;color:var(--navy)}
.tbl tbody tr:hover td{background:#fafbfc}
.tbl .go{font-size:13px;white-space:nowrap}
.yes{color:var(--teal);font-weight:600}.no{color:var(--muted)}

.log{border-left:2px solid var(--rule);padding-left:18px;margin:8px 0 0}
.log .e{position:relative;padding:0 0 18px}.log .e::before{content:"";position:absolute;left:-24px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--coral)}
.log .d{font:500 12px "IBM Plex Mono";color:var(--muted)}.log .t{font-weight:600;margin:2px 0}.log p{margin:0;font-size:14px;color:#3a4654}

.lead{display:block;background:var(--navy);color:#fff;padding:22px 24px;margin:30px 0 4px;text-decoration:none}
.lead .k{font:500 12px "IBM Plex Mono";color:#ffb4a3;text-transform:uppercase}
.lead h2{color:#fff;margin:6px 0 6px;font-size:clamp(24px,3vw,32px)}.lead p{margin:0;color:#d5dfea}
.lead:hover h2{text-decoration:underline}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:16px 0 50px}
.card{border:1px solid var(--rule);padding:16px 18px;text-decoration:none;display:block}.card:hover{border-color:var(--navy)}
.card .k{font:500 11.5px "IBM Plex Mono";color:var(--coral);text-transform:uppercase}.card h3{margin:6px 0;font-size:19px}.card p{margin:0;font-size:14.5px;color:#3a4654}

/* article */
.crumbs{font-size:12.5px;color:var(--muted);padding:18px 0 0}.crumbs a{color:var(--muted)}
.ph{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;padding:10px 0 24px;border-bottom:1px solid var(--rule)}
.answer{font-size:18.5px;line-height:1.55;background:var(--soft);border-left:4px solid var(--coral);padding:14px 18px;margin:10px 0 0}
.byline{font:12.5px "IBM Plex Mono";color:var(--muted);margin:10px 0 0}
.metabox{border:1px solid var(--rule);font-size:13.5px;align-self:start}
.metabox dl{margin:0}.metabox dl{display:grid;grid-template-columns:auto 1fr}
.metabox dt,.metabox dd{padding:8px 14px;border-bottom:1px solid var(--rule);margin:0}.metabox dt{color:var(--muted)}.metabox dd{font-weight:600;text-align:right;overflow-wrap:anywhere}
.ptbl{width:100%;border-collapse:collapse;margin:14px 0 18px;font-size:15px}
.ptbl th{background:var(--navy);color:#fff;text-align:left;font-weight:600;padding:10px 12px;font-size:13px}
.ptbl td{padding:12px;border-bottom:1px solid var(--rule);vertical-align:top}.ptbl td.num{font-family:"IBM Plex Mono";white-space:nowrap}
.ptbl tr:nth-child(even) td{background:#fafbfc}
.strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--navy);margin:6px 0 10px}
.strip div{padding:12px 16px 12px 0}.strip div+div{padding-left:16px;border-left:1px solid var(--rule)}
.strip b{display:block;font:600 11.5px "IBM Plex Sans";text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:3px}
.cta{display:inline-block;background:var(--coral);color:#fff;text-decoration:none;font-weight:600;padding:10px 16px;border-radius:3px;margin:8px 8px 8px 0}
.cta.alt{background:#fff;color:var(--navy);border:1.5px solid var(--navy);padding:8.5px 14px}.cta:hover{filter:brightness(.92)}
.prose{max-width:760px;padding-bottom:40px}
.prose p,.prose li{font-size:17px}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px;margin:14px 0}
.prose th{text-align:left;font-size:12px;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--navy);padding:8px}
.prose td{border-bottom:1px solid var(--rule);padding:9px 8px;vertical-align:top}
.prose blockquote{margin:16px 0;padding:4px 0 4px 16px;border-left:3px solid var(--rule);color:#3a4654}
.note{background:var(--soft);border:1px solid var(--rule);padding:12px 16px;font-size:15px;margin:18px 0}
.sources{font-size:14px;color:#3a4654}.sources li{margin:4px 0;overflow-wrap:anywhere}

.foot{background:var(--soft);border-top:1px solid var(--rule);margin-top:30px;padding:26px 0 40px;font-size:14px;color:#3a4654}
.foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}.foot a{display:block;margin:4px 0}.foot p{margin:0 0 8px;max-width:520px}

@media (max-width:820px){
  .nav .in{flex-wrap:wrap;gap:6px 16px;padding:12px 16px}
  .nav .ind{margin-left:0;order:2;width:100%;white-space:normal}
  .nav nav{order:3;width:100%;overflow-x:auto;gap:18px;font-size:14px;-webkit-overflow-scrolling:touch}.nav nav a{white-space:nowrap}
  .sub .in{padding:8px 16px;flex-wrap:nowrap;overflow-x:auto}.sub a{white-space:nowrap}
  .wrap{padding:0 16px}
  .hero,.two,.ph{grid-template-columns:1fr;gap:24px}
  .hero{padding:24px 0}
  .dek{font-size:17.5px}
  .bar{grid-template-columns:104px 1fr 56px}
  .cards{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr}.strip div+div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .foot .cols{grid-template-columns:1fr 1fr}.foot .cols>div:first-child{grid-column:1/-1}
  .tbl.stack thead{display:none}
  .tbl.stack tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 0;border-bottom:1px solid var(--rule)}
  .tbl.stack td{display:block;border:0;padding:0}
  .tbl.stack td.tool{grid-column:1;font-size:16px}
  .tbl.stack td.key{grid-column:2;grid-row:1;text-align:right;font-weight:600}
  .tbl.stack td.sub{grid-column:1/-1;font-size:14px;color:var(--muted)}
  .tbl.stack td.sub[data-l]::before{content:attr(data-l) ": ";font-size:11.5px;text-transform:uppercase;font-weight:600}
  .tbl.stack td.go{grid-column:1/-1}
  .ptbl.stack thead{display:none}
  .ptbl.stack tr{display:grid;grid-template-columns:1fr auto;padding:10px 0;border-bottom:1px solid var(--rule)}
  .ptbl.stack td{display:block;border:0;padding:2px 0;background:none!important}
  .ptbl.stack td.key{grid-column:2;grid-row:1;text-align:right;font-weight:600}
  .ptbl.stack td.sub{grid-column:1/-1;font-size:14px;color:var(--muted)}
  .ptbl.stack td.sub[data-l]::before{content:attr(data-l) ": ";font-size:11.5px;text-transform:uppercase;font-weight:600}
}