/* ============================================================================
   syed.ai — Build 17 / Phase C visual system
   Additive visual layer only. B3 IA/copy, router, forms and backend semantics
   remain authoritative. Uses the existing site.css design tokens exclusively.
   ========================================================================== */

/* ── Editorial ground & global accessibility polish ─────────────────────── */
html{scroll-padding-top:calc(var(--nav-h) + var(--s-5))}
body{
  background:
    radial-gradient(1200px 620px at 50% -180px,rgba(207,175,103,.055),transparent 66%),
    var(--c-bg);
}
::selection{background:var(--c-gold);color:var(--c-on-gold)}
:focus-visible{outline:2px solid var(--c-gold);outline-offset:4px}
main{isolation:isolate}
.wrap{position:relative}
.band,.band--tight{scroll-margin-top:calc(var(--nav-h) + var(--s-5))}
.head{position:relative}
.head>.t-label{display:inline-flex;align-items:center;gap:var(--s-3);width:max-content}
.head>.t-label::before{content:"";width:28px;height:1px;background:var(--c-gold-dark)}
.head h1,.head h2{max-width:21ch}
.head>p{max-width:68ch}

/* ── Hero: founder-led editorial rather than generic SaaS ───────────────── */
.hero{min-height:min(82svh,760px);border-bottom:1px solid var(--c-line-soft)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0 7%,rgba(207,175,103,.09) 7% calc(7% + 1px),transparent calc(7% + 1px) 100%),
    linear-gradient(180deg,transparent 0 88%,rgba(207,175,103,.08) 88% calc(88% + 1px),transparent calc(88% + 1px) 100%)}
.hero__scrim{background:
  linear-gradient(90deg,rgba(6,5,4,.95) 0%,rgba(6,5,4,.78) 35%,rgba(6,5,4,.20) 64%,rgba(6,5,4,.12) 100%),
  linear-gradient(180deg,rgba(6,5,4,.12),rgba(6,5,4,.26))}
.hero__in{padding-block:calc(var(--s-8) + var(--s-4));gap:var(--s-5)}
.hero__in h1{max-width:17ch;text-shadow:0 1px 24px rgba(6,5,4,.38)}
.hero__lede{max-width:48ch}
.status{backdrop-filter:blur(10px);background:rgba(6,5,4,.54);border-color:var(--c-line)}
.hero__cta{padding-top:var(--s-3)}
.hero__cta .btn{min-width:190px;justify-content:center}

/* ── Section rhythm / cards ─────────────────────────────────────────────── */
#what-is-geo>.stack-lg,#evidence>.stack-lg,#method>.split,#engagement-summary>.stack-lg,
#team>.stack-lg,#visibility-check>.stack-lg,#faq>.stack-lg,#author{
  position:relative;z-index:1
}
#evidence::before,#engagement-summary::before,#author::before{
  content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(207,175,103,.025),transparent 22%,transparent 78%,rgba(207,175,103,.02));
  border-block:1px solid rgba(207,175,103,.06)
}
.panel,.card,.fig,.sim,.term,.pcta,.pc-figure,.pc-process{
  border:1px solid var(--c-line-soft);
  box-shadow:inset 0 1px 0 rgba(247,245,240,.018)
}
.panel,.card{transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),background var(--dur) var(--ease)}
@media (hover:hover){
  .panel:hover,.card:hover{border-color:var(--c-line);transform:translateY(-2px);background:linear-gradient(180deg,var(--c-surface-1),rgba(25,21,16,.52))}
}
.panel__h{border-bottom:1px solid var(--c-line-soft);padding-bottom:var(--s-3)}
.panel__h h3{color:var(--c-text-2)}
.panel__h span{color:var(--c-gold)}

/* Deep-dive cards on the overview */
#what-is-geo .grid-3 .panel{min-height:190px;justify-content:flex-start;background:transparent}
#what-is-geo .grid-3 .panel .link{margin-top:auto}

/* ── Evidence: more publication-like, less repeated card grid ───────────── */
#evidence .grid-2{gap:0;border-block:1px solid var(--c-line)}
#evidence .ev{padding:var(--s-5);border-top:0;border-right:1px solid var(--c-line-soft);min-height:295px}
#evidence .ev:nth-child(2n){border-right:0}
.ev__fig{letter-spacing:-.035em;line-height:.92}
.ev h3{max-width:30ch;margin-top:var(--s-2)}
.cite-src{margin-top:auto;padding-top:var(--s-3);border-top:1px solid var(--c-line-soft)}
.fig{padding:var(--s-5);background:linear-gradient(180deg,var(--c-surface-1),rgba(14,12,9,.58))}
.fig__t{display:flex;align-items:center;gap:var(--s-3)}
.fig__t::after{content:"";height:1px;flex:1;background:var(--c-line-soft)}
.fig svg{min-width:min(680px,100%)}
.fig figcaption,.pc-figure figcaption,.pc-process figcaption,.method-photo figcaption{
  padding-top:var(--s-3);border-top:1px solid var(--c-line-soft)
}

/* ── Simulator ─────────────────────────────────────────────────────────── */
.sim{border-color:var(--c-line);background:linear-gradient(160deg,var(--c-surface-2),var(--c-surface-1));overflow:hidden}
.sim__bar{background:rgba(6,5,4,.42)}
.sim__q{border-block:1px solid var(--c-line-soft)}
.answer{background:rgba(6,5,4,.34);border-block:1px solid var(--c-line-soft)}
.sources{padding-top:var(--s-4)}

/* ── Phase C figure system ─────────────────────────────────────────────── */
.pc-figure,.pc-process{padding:var(--s-5);background:linear-gradient(155deg,var(--c-surface-1),rgba(25,21,16,.34));overflow:hidden}
.pc-figure__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5);padding-bottom:var(--s-4);border-bottom:1px solid var(--c-line-soft)}
.pc-figure__head>.t-label{color:var(--c-gold);flex:none}
.pc-figure__title{font-size:var(--fs-h3);font-weight:var(--w-med);line-height:var(--lh-snug);max-width:48ch;text-wrap:balance}
.pc-figure svg{width:100%;height:auto;margin-top:var(--s-4);overflow:visible}
.pc-figure figcaption,.pc-process figcaption{font-size:var(--fs-cap);line-height:1.65;color:var(--c-text-3);max-width:90ch}

/* Answer anatomy SVG */
.pc-answer-map{margin-top:var(--s-5)}
.pc-answer-map svg text{font-family:var(--font-text);font-size:15px;fill:var(--c-text-2)}
.pc-answer-map svg .pc-svg-k{font-size:11px;font-weight:var(--w-semi);letter-spacing:1.5px;fill:var(--c-gold)}
.pc-answer-map svg .pc-svg-note{font-size:12px;fill:var(--c-text-3)}
.pc-svg-card rect,.pc-svg-out rect{fill:var(--c-bg);stroke:var(--c-line-soft);stroke-width:1}
.pc-svg-answer>rect{fill:var(--c-surface-2);stroke:var(--c-line);stroke-width:1}
.pc-svg-answer .pc-svg-chip{fill:var(--c-surface-3);stroke:var(--c-line);stroke-width:1}
.pc-svg-answer .pc-svg-chiptext{font-size:12px;fill:var(--c-text-2)}
.pc-svg-lines path{fill:none;stroke:var(--c-gold-dark);stroke-width:1.25;stroke-dasharray:5 6}
.pc-svg-out rect{stroke:var(--c-gold-dark)}

/* ── Method: put real work beside the operating sequence ──────────────── */
.split--method{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:var(--s-8)}
.method__lead{display:flex;flex-direction:column;gap:var(--s-6);position:sticky;top:calc(var(--nav-h) + var(--s-5))}
.method-photo{border:1px solid var(--c-line-soft);background:var(--c-surface-1);padding:var(--s-3);position:relative;overflow:hidden}
.method-photo::after{content:"";position:absolute;inset:var(--s-3) var(--s-3) 54px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(207,175,103,.11)}
.method-photo picture{display:block;overflow:hidden;aspect-ratio:16/10;background:var(--c-surface-2)}
.method-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;filter:saturate(.82) contrast(1.04) brightness(.82)}
.method-photo figcaption{position:relative;font-size:var(--fs-cap);line-height:1.55;color:var(--c-text-3);margin-top:var(--s-3)}
.steps{counter-reset:pcstep}
.step{position:relative;grid-template-columns:64px 1fr;padding:var(--s-5) 0 var(--s-5) var(--s-4)}
.step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(var(--c-gold-dark),var(--c-line-soft))}
.step__n{font-size:var(--fs-n4);border:1px solid var(--c-line);width:42px;height:42px;display:grid;place-items:center;color:var(--c-gold-light);background:var(--c-bg)}
.step h3{color:var(--c-text)}

/* ── Representative engagement process ───────────────────────────────── */
.pc-process{margin-top:var(--s-3)}
.pc-process__grid{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-5)}
.pc-process__axis,.pc-process__row{display:grid;grid-template-columns:150px repeat(4,minmax(0,1fr));gap:var(--s-2);align-items:center}
.pc-process__axis{padding-bottom:var(--s-2);border-bottom:1px solid var(--c-line-soft)}
.pc-process__axis::before{content:""}
.pc-process__axis span{font-size:var(--fs-label);font-weight:var(--w-semi);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--c-text-3)}
.pc-process__row>span{font-size:var(--fs-sm);color:var(--c-text-2)}
.pc-process__row>i{grid-column:calc(var(--pc-start) + 1)/span var(--pc-span);height:18px;background:linear-gradient(90deg,var(--c-gold-dark),var(--c-gold));position:relative}
.pc-process__bar--baseline{--pc-start:1;--pc-span:2}
.pc-process__bar--diagnosis{--pc-start:1;--pc-span:3}
.pc-process__bar--implementation,.pc-process__bar--corroboration{--pc-start:2;--pc-span:3}
.pc-process__bar--measurement{--pc-start:3;--pc-span:2}
.pc-process__row>i::after{content:"";position:absolute;inset:4px;background:rgba(6,5,4,.22)}

/* ── Delivery / readiness / author ───────────────────────────────────── */
#team .card{border-left:1px solid var(--c-line-soft);border-top:1px solid var(--c-line);padding:var(--s-5);background:linear-gradient(145deg,var(--c-bg),rgba(14,12,9,.82))}
#team .card__k{color:var(--c-gold)}
#visibility-check .panel{min-height:250px}
#visibility-check .panel .btn{margin-top:auto}
.author{grid-template-columns:240px minmax(0,1fr);padding-block:var(--s-5)}
.author__img{border-color:var(--c-line);background:var(--c-surface-1)}
.author__img img{filter:saturate(.88) contrast(1.03)}
#newsletter{background:linear-gradient(145deg,var(--c-surface-1),rgba(25,21,16,.65))}

/* ── CTA: no repeated founder photograph ─────────────────────────────── */
.cta{min-height:470px;border-block:1px solid var(--c-line);background:
  linear-gradient(100deg,rgba(6,5,4,.97) 0 42%,rgba(6,5,4,.78) 66%,rgba(6,5,4,.9) 100%),
  var(--c-surface-1)}
.cta__field{position:absolute;inset:0;overflow:hidden;opacity:.8}
.cta__field::before{content:"";position:absolute;width:62vw;aspect-ratio:1;right:-10vw;top:50%;transform:translateY(-50%) rotate(45deg);border:1px solid var(--c-gold-dark);box-shadow:0 0 0 80px rgba(207,175,103,.012),0 0 0 160px rgba(207,175,103,.009)}
.cta__field::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),rgba(207,175,103,.055) calc(12.5% - 1px) 12.5%)}
.cta__field span{position:absolute;width:6px;height:6px;background:var(--c-gold);box-shadow:0 0 0 5px rgba(207,175,103,.08)}
.cta__field span:nth-child(1){right:26%;top:22%}.cta__field span:nth-child(2){right:12%;top:44%}.cta__field span:nth-child(3){right:34%;top:67%}.cta__field span:nth-child(4){right:18%;top:80%}.cta__field span:nth-child(5){right:42%;top:39%}
.cta__in{min-height:470px;justify-content:center;max-width:var(--maxw);margin-inline:auto;width:100%;padding-inline:var(--s-6)}
.cta__in h2{max-width:20ch}

/* ── Reference/deep-page editorial framing ───────────────────────────── */
main>.wrap.band:first-child{padding-top:calc(var(--s-8) + var(--s-4));padding-bottom:var(--s-8)}
main>.wrap.band:first-child::before{content:"";position:absolute;z-index:-1;inset:0 50% 0 auto;width:100vw;transform:translateX(50%);background:
  linear-gradient(125deg,rgba(207,175,103,.035),transparent 42%),
  repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(207,175,103,.024) calc(10% - 1px) 10%)}
.crumb{padding-bottom:var(--s-4);border-bottom:1px solid var(--c-line-soft)}
.prose-lead{border-left:2px solid var(--c-gold);padding-left:var(--s-5);max-width:90ch}
.tbl-wrap{border:1px solid var(--c-line-soft);background:var(--c-surface-1)}
.tbl th,.tbl td{border-color:var(--c-line-soft)}
.term{padding:var(--s-5);background:linear-gradient(150deg,var(--c-bg),rgba(14,12,9,.72));scroll-margin-top:calc(var(--nav-h) + 58px)}
.term h2{color:var(--c-text)}

/* GEO vs SEO conceptual map */
.pc-compare-map__grid{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);gap:var(--s-5);align-items:stretch;margin-top:var(--s-5)}
.pc-compare-map__side{padding:var(--s-5);border:1px solid var(--c-line-soft);background:var(--c-bg);display:flex;flex-direction:column;gap:var(--s-3)}
.pc-compare-map__side>b{font-family:var(--font-display);font-size:var(--fs-d3);font-weight:var(--w-semi);line-height:1.1}
.pc-compare-map__side>p{font-size:var(--fs-sm);color:var(--c-text-2)}
.pc-compare-map__k,.pc-citation-split__k{font-size:var(--fs-label);font-weight:var(--w-semi);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--c-gold)}
.pc-search-list{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2);margin-block:var(--s-3)}
.pc-search-list i{height:48px;border:1px solid var(--c-line);display:grid;place-items:center;font-family:var(--font-display);font-style:normal;color:var(--c-gold-light)}
.pc-answer-lines{display:flex;flex-direction:column;gap:var(--s-2);margin-block:var(--s-3)}
.pc-answer-lines>i{height:8px;background:var(--c-surface-3);display:block}
.pc-answer-lines>i:nth-child(2){width:88%}.pc-answer-lines>i:nth-child(3){width:72%}
.pc-answer-lines>div{display:flex;gap:var(--s-2);margin-top:var(--s-2)}
.pc-answer-lines span{border:1px solid var(--c-gold-dark);padding:var(--s-1) var(--s-2);font-size:var(--fs-label);color:var(--c-text-2)}
.pc-compare-map__bridge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2)}
.pc-compare-map__bridge i{height:48px;width:1px;background:var(--c-line)}
.pc-compare-map__bridge span{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;text-align:center;color:var(--c-text-3)}

/* Citation vs recommendation split */
.pc-citation-split__body{display:grid;grid-template-columns:minmax(220px,.8fr) 120px repeat(2,minmax(0,1fr));gap:var(--s-4);align-items:center;margin-top:var(--s-5)}
.pc-citation-split__answer,.pc-citation-split__out{border:1px solid var(--c-line-soft);background:var(--c-bg);padding:var(--s-5)}
.pc-citation-split__answer{display:flex;flex-direction:column;gap:var(--s-2)}
.pc-citation-split__answer>span{font-family:var(--font-display);font-size:var(--fs-d3);font-weight:var(--w-semi)}
.pc-citation-split__answer>i{height:7px;background:var(--c-surface-3)}
.pc-citation-split__answer>i:nth-of-type(2){width:88%}.pc-citation-split__answer>i:nth-of-type(3){width:66%}
.pc-citation-split__answer small{font-size:var(--fs-cap);color:var(--c-text-3);margin-top:var(--s-2)}
.pc-citation-split__branch{height:140px;position:relative}
.pc-citation-split__branch::before{content:"";position:absolute;left:0;top:50%;width:50%;height:1px;background:var(--c-gold-dark)}
.pc-citation-split__branch i{position:absolute;left:50%;width:50%;height:1px;background:var(--c-gold-dark);transform-origin:left center}
.pc-citation-split__branch i:first-child{top:50%;transform:rotate(-24deg)}
.pc-citation-split__branch i:last-child{top:50%;transform:rotate(24deg)}
.pc-citation-split__out{min-height:180px;display:flex;flex-direction:column;gap:var(--s-2);justify-content:center}
.pc-citation-split__out>b{font-family:var(--font-display);font-size:var(--fs-d3);font-weight:var(--w-semi)}
.pc-citation-split__out>p{font-size:var(--fs-sm);color:var(--c-text-2)}

/* ── Responsive QA targets ────────────────────────────────────────────── */
@media (min-width:1181px){
  #evidence .grid-2{grid-template-columns:repeat(4,minmax(0,1fr))}
  #evidence .ev{border-right:1px solid var(--c-line-soft)}
  #evidence .ev:last-child{border-right:0}
}
@media (max-width:1180px){
  .split--method{grid-template-columns:minmax(0,1fr)}
  .method__lead{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);align-items:start}
  .method-photo{margin-top:0}
  .pc-citation-split__body{grid-template-columns:minmax(220px,.8fr) 90px repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
  .pc-answer-map{overflow-x:auto}
  .pc-answer-map svg{min-width:920px}
  .pc-compare-map__grid{grid-template-columns:1fr}
  .pc-compare-map__bridge{flex-direction:row}
  .pc-compare-map__bridge i{height:1px;width:100%}
  .pc-citation-split__body{grid-template-columns:1fr 64px 1fr 1fr}
}
@media (max-width:900px){
  .hero{min-height:86svh}
  .hero::after{display:none}
  .hero__scrim{background:linear-gradient(180deg,rgba(6,5,4,.28) 0%,rgba(6,5,4,.10) 28%,rgba(6,5,4,.48) 58%,rgba(6,5,4,.96) 88%,var(--c-bg) 100%)}
  .hero__in{padding-bottom:var(--s-7);gap:var(--s-4)}
  .head h1,.head h2{max-width:none}
  .method__lead{grid-template-columns:1fr}
  .method-photo picture{aspect-ratio:16/9}
  .pc-process__axis,.pc-process__row{grid-template-columns:110px repeat(4,minmax(80px,1fr));min-width:650px}
  .pc-process__grid{overflow-x:auto;padding-bottom:var(--s-2)}
  .author{grid-template-columns:180px minmax(0,1fr)}
  .cta,.cta__in{min-height:430px}
  .cta__field::before{width:92vw;right:-42vw}
  main>.wrap.band:first-child{padding-top:var(--s-7)}
  .pc-citation-split__body{grid-template-columns:1fr;gap:var(--s-3)}
  .pc-citation-split__branch{height:64px}
  .pc-citation-split__branch::before{left:50%;top:0;width:1px;height:50%;background:var(--c-gold-dark)}
  .pc-citation-split__branch i{left:50%;top:50% !important;width:1px;height:50%;transform:none !important;background:var(--c-gold-dark)}
  .pc-citation-split__branch i:first-child{transform:translateX(-64px) rotate(18deg) !important}
  .pc-citation-split__branch i:last-child{transform:translateX(64px) rotate(-18deg) !important}
}
@media (max-width:768px){
  .pc-figure,.pc-process,.fig{padding:var(--s-4)}
  .pc-figure__head{align-items:flex-start;flex-direction:column;gap:var(--s-2)}
  .pc-answer-map{margin-inline:calc(var(--s-5) * -1);padding-inline:var(--s-5);border-inline:0}
  .author{grid-template-columns:1fr}
  .author__img{max-width:190px}
  #evidence .ev{min-height:0}
}
@media (max-width:600px){
  .hero__cta .btn{min-width:0}
  #what-is-geo .grid-3 .panel{min-height:0}
  #evidence .grid-2{grid-template-columns:1fr}
  #evidence .ev{border-right:0;border-bottom:1px solid var(--c-line-soft);padding-inline:0}
  #evidence .ev:last-child{border-bottom:0}
  .step{grid-template-columns:50px 1fr;padding-left:var(--s-3)}
  .step__n{width:36px;height:36px}
  .pc-process__axis,.pc-process__row{grid-template-columns:96px repeat(4,minmax(74px,1fr));min-width:560px}
  .pc-process__row>i{height:14px}
  .cta__field::before{width:128vw;right:-82vw}
  .cta__field::after{background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(207,175,103,.045) calc(25% - 1px) 25%)}
  .pc-search-list i{height:40px}
}
@media (max-width:430px){
  .hero{min-height:88svh}
  .hero__in{padding-top:var(--s-6)}
  .status{max-width:100%;white-space:normal;line-height:1.35}
  .pc-figure__title{font-size:var(--fs-h4)}
  .method-photo{padding:var(--s-2)}
  .method-photo::after{inset:var(--s-2) var(--s-2) 50px}
  .author__img{max-width:152px}
}
@media (max-width:390px){
  .pc-answer-map{margin-inline:calc(var(--s-4) * -1);padding-inline:var(--s-4)}
  .pc-process{margin-inline:calc(var(--s-2) * -1)}
}
@media (max-width:360px){
  .pc-figure,.pc-process{padding:var(--s-3)}
  .pc-process__axis,.pc-process__row{grid-template-columns:88px repeat(4,minmax(70px,1fr));min-width:530px}
}
@media (min-width:1600px){
  .hero__in h1{max-width:16ch}
  .hero__in{padding-inline:var(--s-6)}
  .pc-figure,.pc-process{padding:var(--s-6)}
}
@media (prefers-reduced-motion:reduce){
  .panel,.card{transform:none!important}
}