/* ==========================================================================
   /ai-visibility · page styles. Tokens only; every class is prefixed .aiv-.
   The four-surface stage, the level glyph (.ais-lv) and the brand mark
   (mark.ais-b) come from the shared component in /css/ai-stage.css.
   ========================================================================== */

/* ---------------------------------------------------------------- hero -- */
.aiv-hero{padding:64px 0 24px}
.aiv-hero-h{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:end}
.aiv-hero-h .display{max-width:15ch}
.aiv-hero-s .btns{margin-top:22px}
.aiv-scope{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:var(--fs-sm);color:var(--ink-2)}
.aiv-scope svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--primary);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.aiv-hero .ais{margin-top:44px}
.aiv-hero-src{margin-top:12px}

/* the product-mock tabs */
.aiv-tabs{display:inline-grid;grid-auto-flow:column;gap:2px;padding:3px;border-radius:var(--r-pill);background:var(--grey)}
.aiv-tabs button{height:34px;padding:0 14px;border:0;border-radius:var(--r-pill);background:none;font:500 13px/1 var(--sans);color:var(--ink-2);white-space:nowrap;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.aiv-tabs button:hover{color:var(--ink)}
.aiv-tabs button[aria-selected=true]{background:var(--white);color:var(--ink);box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 12%,transparent)}
.aiv-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

/* level rows in the answer panel */
.aiv-ap-b li{display:flex;align-items:center;gap:8px;min-height:30px;padding:4px 8px;margin:0 -8px;border-radius:9px;font-size:13px}
.aiv-ap-b li b{font-weight:500;white-space:nowrap}
.aiv-ap-b li span:last-child{margin-left:auto;text-align:right;color:var(--ink-2);font-size:12.5px;line-height:1.3}
.aiv-ap-b li.you{background:var(--t1)}
.aiv-ap-b li.you .ais-lv i{background:color-mix(in srgb,var(--primary) 22%,var(--t1))}
.aiv-ap-b li.you .ais-lv[data-l="2"] i:nth-child(-n+2){background:var(--primary)}

/* ------------------------------------------------------- the four levels -- */
.aiv-lvl{padding:36px 44px 28px}
.aiv-lvl-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:end}
.aiv-lvl-h h2{max-width:14ch}
.aiv-ladder{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:30px}
.aiv-ladder::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:color-mix(in srgb,var(--on-primary) 20%,var(--primary))}
.aiv-ladder li{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding-top:34px}
.aiv-ladder li::before{content:"";position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;background:var(--primary);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--on-primary) 45%,var(--primary))}
.aiv-ladder li[data-l="2"]::before,.aiv-ladder li[data-l="3"]::before{background:var(--accent);box-shadow:0 0 0 4px var(--primary)}
.aiv-ladder .ais-lv{transform:scale(1.7);transform-origin:left bottom;margin-bottom:14px}
.aiv-ladder .ais-lv i{background:color-mix(in srgb,var(--on-primary) 20%,var(--primary))}
.aiv-ladder .ais-lv[data-l="1"] i:nth-child(1),
.aiv-ladder .ais-lv[data-l="2"] i:nth-child(-n+2),
.aiv-ladder .ais-lv[data-l="3"] i{background:var(--accent)}
.aiv-ladder b{font-size:var(--fs-h3);font-weight:400;letter-spacing:-.03em;line-height:1.15}
.aiv-ladder p{margin-top:6px;font-size:14px;line-height:1.5;color:var(--on-primary-2);max-width:30ch}
.aiv-cnt{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.aiv-brk{margin:18px 0 0 calc(50% + var(--gap) / 2);padding-top:10px;border-top:1.5px solid var(--accent);text-align:center;font-size:var(--fs-sm);font-weight:500;color:var(--t2)}
.aiv-rules{margin-top:28px;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--on-primary) 16%,var(--primary));font-size:13.5px;color:var(--on-primary-2)}

/* --------------------------------------------- the product, one tabbed mock --
   One surface: the window. Inside it, panes are divided by hairlines, never boxed. */
.aiv-app{border-radius:var(--r-blk);background:var(--white);box-shadow:inset 0 0 0 1px var(--line),var(--shadow);overflow:hidden}
.aiv-app-h{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:14px 20px;background:var(--paper);border-bottom:1px solid var(--line)}
.aiv-app-t{display:flex;align-items:baseline;gap:12px;font-size:13px;color:var(--ink-2)}
.aiv-app-t b{font-size:14.5px;font-weight:500;color:var(--ink)}
.aiv-tabs{max-width:100%;overflow-x:auto;scrollbar-width:none}
.aiv-tabs::-webkit-scrollbar{display:none}
.aiv-panel{min-height:400px}
.aiv-panel:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
.aiv-panel[hidden]{display:none}
.aiv-two{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch}
.aiv-two>*{min-width:0;padding:22px 26px}
.aiv-two>.uc{border-radius:0;background:none;box-shadow:none}
.aiv-two>*+*{border-left:1px solid var(--line)}
#aiv-p2.aiv-two{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.aiv-app-src{margin-top:14px}

/* overview */
.aiv-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.aiv-tile{display:flex;flex-direction:column;padding:22px 26px 20px}
.aiv-tile+.aiv-tile{border-left:1px solid var(--line)}
.aiv-tile-k{font-size:12.5px;font-weight:500;color:var(--ink-2)}
.aiv-tile-n{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:8px}
.aiv-tile-n b{font-size:clamp(42px,4.2vw,56px);font-weight:400;letter-spacing:-.04em;line-height:1}
.aiv-tile-n span{font-size:14px;color:var(--ink-2)}
.aiv-tile-m{margin-top:auto;padding-top:14px;font-size:12px;color:var(--ink-2)}
.aiv-tile.is-key{background:var(--primary);color:var(--on-primary);border-left-color:transparent}
.aiv-tile.is-key+.aiv-tile{border-left-color:transparent}
.aiv-tile.is-key .aiv-tile-k,.aiv-tile.is-key .aiv-tile-n span,.aiv-tile.is-key .aiv-tile-m{color:var(--on-primary-2)}
.aiv-tile.is-key .aiv-mat{color:var(--on-primary)}
.aiv-tile.is-key .aiv-mat::before{background:var(--accent)}
.aiv-gaps{padding:18px 26px 10px;border-top:1px solid var(--line)}
.aiv-gaps ol{margin-top:8px}
.aiv-gaps li{display:grid;grid-template-columns:170px auto minmax(0,1fr) auto;align-items:center;gap:8px 16px;padding:11px 0;border-top:1px solid var(--line);font-size:13.5px}
.aiv-gaps li b{font-weight:500}
.aiv-spend{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-pill);background:var(--t1);font-size:12px;font-weight:500;white-space:nowrap}

/* maturity marker: said in words, the dot only repeats it */
.aiv-mat{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--ink);white-space:nowrap}
.aiv-mat::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary)}
.aiv-mat.early::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--warn)}

/* brand profile + prompts */
.aiv-dl{margin-top:10px}
.aiv-dl>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.aiv-dl dt{font-size:12.5px;color:var(--ink-3);padding-top:1px}
.aiv-dl dd{margin:0;font-size:13.5px;line-height:1.45;min-width:0}
.aiv-dl dd b{font-weight:500}
.aiv-dl dd>span:not(.tags){display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.aiv-dl .tags{gap:6px}
.aiv-conf{display:flex!important;align-items:flex-start;gap:7px}
.aiv-conf i{flex:none;width:7px;height:7px;margin-top:6px;border-radius:50%;background:var(--accent)}
.aiv-prof-f{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.aiv-prof-f>span:first-child{margin-right:auto}
.aiv-sug{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;margin-top:12px;padding:14px 16px;border-radius:var(--r-row);background:var(--paper)}
.aiv-pq{font-size:14.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.aiv-why{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:6px;font-size:12.5px;color:var(--ink-2)}
.aiv-act{grid-column:2;grid-row:1/3;align-self:center;display:flex;gap:6px}
.aiv-pr-g{margin:16px 0 4px;font-size:12.5px;color:var(--ink-3)}
.aiv-leg{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.aiv-leg i{width:7px;height:7px;border-radius:50%;margin-left:6px}
.aiv-leg i:first-child{margin-left:0}
.aiv-leg i.w,.aiv-wl b.w::before{background:var(--accent)}
.aiv-leg i.l,.aiv-wl b.l::before{background:var(--warn)}
.aiv-leg i.n,.aiv-wl b.n::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--mute)}
.aiv-trk li{display:grid;grid-template-columns:minmax(0,1fr) auto 70px;align-items:center;gap:14px;padding:10px 0;border-top:1px solid var(--line)}
.aiv-trk .aiv-pq{font-size:13.5px;font-weight:400;min-width:0}
.aiv-trk .aiv-mat{justify-self:end}
.aiv-wl{display:flex;gap:12px}
.aiv-wl b{position:relative;display:inline-flex;align-items:center;gap:5px;min-width:30px;font-size:13.5px;font-weight:500}
.aiv-wl b::before{content:"";flex:none;width:7px;height:7px;border-radius:50%}

/* competitors */
.aiv-tw{margin-top:8px;overflow-x:auto}
.aiv-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.aiv-tbl th,.aiv-tbl td{padding:11px 10px 11px 0;text-align:left;vertical-align:middle;white-space:nowrap}
.aiv-tbl thead th{padding-top:8px;padding-bottom:8px;font-size:12px;font-weight:500;color:var(--ink-3)}
.aiv-tbl tbody tr{border-top:1px solid var(--line)}
.aiv-tbl tbody th{font-weight:500}
.aiv-tbl tbody th .tag{margin-left:6px;height:20px;padding:0 8px;font-size:11px}
.aiv-tbl td:last-child,.aiv-tbl th:last-child{padding-right:0;text-align:right}
.aiv-bar-c{display:inline-block;width:56px;height:6px;margin-right:10px;border-radius:3px;vertical-align:middle;background:linear-gradient(90deg,var(--primary) calc(var(--v) * 1%),var(--grey) 0)}
.aiv-acts .pill{height:28px;padding:0 11px;font-size:12px}
.aiv-tbl-n{margin-top:10px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.aiv-send{display:flex;flex-direction:column;background:var(--primary);color:var(--on-primary)}
.aiv-two>.aiv-send{border-left:0}
.aiv-plat{margin-top:12px}
.aiv-plat li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:baseline;padding:10px 0;border-top:1px solid color-mix(in srgb,var(--on-primary) 16%,var(--primary))}
.aiv-plat b{font-size:15px;font-weight:500;letter-spacing:-.01em}
.aiv-plat span{grid-row:2;font-size:12.5px;color:var(--on-primary-2)}
.aiv-plat em{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-size:13.5px}
.aiv-send-k{margin-top:18px;font-size:var(--fs-sm);color:var(--on-primary-2)}
.aiv-route{margin-top:10px;display:grid;gap:8px}
.aiv-route li{display:grid;grid-template-columns:118px minmax(0,1fr) 40px;align-items:center;gap:12px;font-size:13.5px}
.aiv-route i{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--accent) calc(var(--v) * 1%),var(--on-primary-3) 0)}
.aiv-route b{font-weight:500;text-align:right}
.aiv-send-n{margin-top:16px;font-size:12.5px;line-height:1.5;color:var(--on-primary-2)}

/* one answer + cited sites */
.aiv-ap-a{margin-top:12px;font-size:16px;line-height:1.62;max-width:62ch}
.aiv-ap-b{display:grid;gap:2px;margin-top:14px}
.aiv-ap-s{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px}
.aiv-ap-s b{margin-right:6px;font-weight:500}
.aiv-ap-s span{padding:3px 9px;border-radius:7px;background:var(--paper)}
.aiv-ap-f{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.aiv-src-l{margin-top:10px}
.aiv-src-l li{display:grid;grid-template-columns:minmax(0,1fr) 34% 24px;align-items:center;gap:14px;padding:9px 8px;margin:0 -8px;border-top:1px solid var(--line)}
.aiv-src-l li span b{display:block;font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis}
.aiv-src-l li span small{display:block;font-size:12px;color:var(--ink-2)}
.aiv-src-l li i{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--primary) calc(var(--v) / 14 * 100%),var(--grey) 0)}
.aiv-src-l li em{font-style:normal;font-size:13.5px;text-align:right}
.aiv-src-l li.you{border-radius:10px;background:var(--t1);border-top-color:transparent}
.aiv-src-l li.you i{background:linear-gradient(90deg,var(--primary) calc(var(--v) / 14 * 100%),var(--white) 0)}
.aiv-src-n{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5;color:var(--ink-2)}

/* ------------------------------------------------------------------ bridge -- */
.aiv-br{align-items:center;gap:56px}
.aiv-br-t .sub{margin-top:16px}
.aiv-br-l{display:grid;gap:12px;justify-items:start;margin-top:26px}
.aiv-br .sugg .pill{font-weight:400;font-size:13px;background:var(--card)}

/* ---------------------------------- the bridge: from an AI answer to a paid decision -- */
.aiv-st-sub{margin-top:10px;max-width:72ch}
.aiv-also{margin-top:14px;font-size:var(--fs-sm);color:var(--ink-2)}
.aiv-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:20px;border-radius:var(--r-pillr);background:var(--grey);overflow:hidden}
.aiv-track li{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;padding:20px 22px}
.aiv-track li+li{box-shadow:inset 1px 0 0 var(--line-2)}
.aiv-track li:first-child{padding-left:30px}
.aiv-track li:last-child{padding-right:30px}
.aiv-track li.now{background:var(--t1)}
.aiv-track .tag{min-width:64px;justify-content:center;background:var(--paper);color:var(--ink-2)}
.aiv-track li.now .tag{background:var(--primary);color:var(--on-primary)}
.aiv-track .tag.pilot{background:var(--white);box-shadow:inset 0 0 0 1px var(--accent);color:var(--ink)}
.aiv-track b{font-size:14.5px;font-weight:500;letter-spacing:-.01em;line-height:1.35}

/* ------------------------------------------------------------- responsive -- */
@media (max-width:1100px){
  .aiv-hero-h{grid-template-columns:1fr;gap:24px}
  .aiv-hero-h .display{max-width:18ch}
  .aiv-lvl{padding:40px 32px 32px}
  .aiv-ladder{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .aiv-ladder::before{display:none}
  .aiv-brk{display:none}
  .aiv-cnt{position:static!important;width:auto;height:auto;overflow:visible;clip:auto;margin-top:6px;font-size:12.5px;font-weight:500;color:var(--t2)}
  .aiv-two,#aiv-p2.aiv-two{grid-template-columns:minmax(0,1fr)}
  .aiv-panel{min-height:0}
  .aiv-gaps li{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .aiv-gaps li>span:nth-child(3){grid-column:1}
  .aiv-two>*+*{border-left:0;border-top:1px solid var(--line)}
  .aiv-track{grid-template-columns:repeat(3,minmax(0,1fr));border-radius:var(--r-blk)}
  .aiv-track li+li{box-shadow:inset 1px 0 0 var(--line-2),inset 0 1px 0 var(--line-2)}
  .aiv-track li:first-child,.aiv-track li:last-child{padding-left:22px;padding-right:22px}
}
@media (max-width:860px){
  .aiv-hero{padding:44px 0 20px}
  .aiv-hero .ais{margin-top:32px}
  .aiv-tabs button{height:38px}
  .aiv-lvl{padding:30px 22px 26px}
  .aiv-lvl-h{grid-template-columns:1fr;gap:14px}
  .aiv-ladder{grid-template-columns:1fr;margin-top:28px;row-gap:22px}
  .aiv-ladder li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:start;padding-top:0}
  .aiv-ladder li::before{display:none}
  .aiv-ladder .ais-lv{grid-row:1/4;margin:4px 0 0;transform:scale(1.5);transform-origin:left top}
  .aiv-ladder li>:not(.ais-lv){grid-column:2}
  .aiv-app-h{padding:12px 14px}
  .aiv-tabs{display:flex;width:100%}
  .aiv-tiles{grid-template-columns:1fr}
  .aiv-tile{padding:18px 16px 16px}
  .aiv-tile+.aiv-tile{border-left:0;border-top:1px solid var(--line)}
  .aiv-tile.is-key+.aiv-tile{border-top-color:transparent}
  .aiv-gaps{padding:14px 16px 6px}
  .aiv-two>*{padding:18px 16px}
  .aiv-sug{grid-template-columns:1fr}
  .aiv-act{grid-column:1;grid-row:auto;margin-top:6px}
  .aiv-trk li{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .aiv-trk .aiv-pq{grid-column:1/-1}
  .aiv-route li{grid-template-columns:104px minmax(0,1fr) 40px}
  .aiv-src-l li{grid-template-columns:minmax(0,1fr) 28% 24px}
  .aiv-br{gap:32px}
  .aiv-br .chat{order:2}
  .aiv-track{grid-template-columns:1fr}
  .aiv-track li,.aiv-track li:first-child,.aiv-track li:last-child{flex-direction:row;align-items:center;padding:14px 18px}
  .aiv-track li+li{box-shadow:inset 0 1px 0 var(--line-2)}
}
@media (max-width:520px){
  .aiv-tbl{font-size:13px}
  .aiv-tbl thead th{white-space:normal;line-height:1.3}
  .aiv-bar-c{width:36px;margin-right:6px}
  .aiv-tbl th:nth-child(4),.aiv-tbl td:nth-child(4){display:none}
}