/* ==========================================================================
   Rankovi.ai — additions on top of the shared Rankovi Labs system (site.css).
   Same tokens, type, spacing, buttons and panels; this file only adds the
   components the measurement pages need.
   ========================================================================== */

/* Header: Rankovi.ai wordmark with a readable parent-brand attribution */
.brand-block{display:flex;flex-direction:column;gap:3px;line-height:1}
.logo-ai img{width:190px;height:auto}
.by-labs{display:inline-block;font:500 12.5px/1.2 var(--sans);letter-spacing:.01em;color:var(--ink-3);align-self:flex-start;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.by-labs:hover{color:var(--navy);border-bottom-color:var(--coral)}
.site-footer .by-labs{color:var(--on-navy-2);margin:10px 0 14px;font-size:13px}
.site-footer .by-labs:hover{color:#fff}
.site-footer .foot-grid>div:first-child img{margin-bottom:0}
@media (max-width:900px){.logo-ai img{width:150px}.by-labs{font-size:11.5px}}

/* Hero with a compact dated sample beside the introduction */
.ai-hero{padding:clamp(56px,7vw,96px) 0 clamp(48px,6vw,80px)}
.ai-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center}
.ai-hero h1{margin:18px 0 14px;max-width:17ch;font-size:clamp(40px,4.6vw,64px)}
.ai-hero .sub{font:500 clamp(20px,1.9vw,26px)/1.3 var(--sans);letter-spacing:-.01em;color:var(--navy);max-width:24ch}
.ai-hero .lead{margin-top:18px;max-width:54ch;font-size:clamp(17px,1.3vw,18.5px)}
.ai-hero .engines{margin-top:18px;font-size:15px;color:var(--ink-2)}
.ai-hero .engines .mono{color:var(--slate-ink);margin-right:8px}
.ai-hero .cta-row{margin-top:26px}

/* The sample card: one client example, visibly dated */
.sample{background:#fff;border:1px solid var(--line);box-shadow:0 24px 56px rgba(12,24,36,.12),0 2px 6px rgba(12,24,36,.05)}
.sample-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 22px;background:var(--navy);color:var(--on-navy)}
.sample-head .mono{color:var(--coral);font-weight:600}
.sample-head .when{font:400 11px/1.6 var(--mono);letter-spacing:.06em;color:#B8C3CD;text-transform:none}
.sample-body{padding:22px 22px 20px}
.sample-body .who{font:400 22px/1.2 var(--serif);letter-spacing:-.01em}
.sample-body .scope{font:400 12px/1.6 var(--mono);color:var(--slate-ink);letter-spacing:.03em;margin-top:6px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:18px;border-top:1px solid var(--line)}
.metrics>div{padding:16px 16px 14px 0;border-right:1px solid var(--line);margin-right:16px}
.metrics>div:last-child{border-right:0;margin-right:0}
.metrics .n{font:400 clamp(28px,2.6vw,36px)/1 var(--serif);letter-spacing:-.02em}
.metrics .n small{font:500 13px/1 var(--mono);color:var(--slate-ink);letter-spacing:.02em;margin-left:4px}
.metrics .l{font-size:12.5px;line-height:1.4;color:var(--ink-3);margin-top:8px}
.sample-foot{padding:14px 22px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5;color:var(--ink-3);background:var(--cream)}

/* Two-question comparison */
.qcompare{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qcompare article{background:#fff;border:1px solid var(--line);padding:22px 24px}
.qcompare .mono{color:var(--slate-ink)}
.qcompare .q{font:400 22px/1.25 var(--serif);letter-spacing:-.01em;margin:10px 0 14px}
.qcompare .r{display:flex;align-items:baseline;gap:10px}
.qcompare .r b{font:400 40px/1 var(--serif);letter-spacing:-.02em}
.qcompare .r span{font-size:14px;color:var(--ink-3)}
.qcompare .by{margin-top:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.qcompare .by div{font:500 11px/1.5 var(--mono);letter-spacing:.04em;padding:8px 6px;border:1px solid var(--line);text-align:center}
.qcompare .by div b{display:block;font:400 18px/1 var(--serif);margin-top:4px;color:var(--navy)}
.qcompare .by div.all{background:var(--navy);color:var(--on-navy);border-color:var(--navy)}
.qcompare .by div.all b{color:#fff}
.qcompare .by div.none{background:var(--mist)}
.qcompare .by div.none b{color:var(--coral-ink-2)}

/* Per-engine table on light surfaces */
.rtable.light{font-size:15px}
.rtable.light caption{color:var(--coral-ink-2)}
.rtable.light th,.rtable.light td{border-bottom-color:var(--line)}
.rtable.light thead th{color:var(--slate-ink)}
.rtable.light tbody th{color:var(--navy)}
.rtable.light td{color:var(--ink-2)}
.rtable.light .rbar{background:var(--mist)}
.rtable.light .rbar i{background:var(--navy)}

/* Three-column "observed / interpretation / action" */
.oia{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.oia article{background:#fff;border:1px solid var(--line);padding:24px}
.oia article .mono{color:var(--coral-ink-2);font-weight:600}
.oia article h3{font-size:24px;margin:10px 0 10px}
.oia article p{font-size:15px;color:var(--ink-2)}
.dark .oia article{background:var(--navy-2);border-color:var(--navy-3)}
.dark .oia article .mono{color:var(--coral)}
.dark .oia article p{color:var(--on-navy-2)}

/* Method facts list */
.facts-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 32px}
.facts-list div{padding:14px 0;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.facts-list div b{display:block;font:600 11px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--slate-ink);margin-bottom:4px}

/* Research index cards */
.papers{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.papers article{background:#fff;border:1px solid var(--line);padding:26px 28px;display:flex;flex-direction:column}
.papers .mono{color:var(--slate-ink)}
.papers h2{font-size:clamp(24px,2.4vw,30px);margin:12px 0 10px;line-height:1.14}
.papers p{font-size:15px;color:var(--ink-3);flex:1}
.papers .textlink{margin-top:18px;align-self:flex-start}

/* About: founder block reuses .founder from site.css */

@media (max-width:900px){
  .ai-hero-grid{grid-template-columns:1fr;gap:36px}
  .ai-hero h1{max-width:none}
  .qcompare,.oia,.papers{grid-template-columns:1fr}
  .facts-list{grid-template-columns:1fr}
}
@media (max-width:600px){
  .metrics{grid-template-columns:1fr}
  .metrics>div{border-right:0;margin-right:0;border-bottom:1px solid var(--line);padding:12px 0}
  .metrics>div:last-child{border-bottom:0}
  .sample-head{flex-direction:column;align-items:flex-start;gap:4px}
  .qcompare .by{grid-template-columns:repeat(2,1fr)}
}