/* ============================================================================
 * landing_home.css — the home page only (templates/home_v3.html, landing
 * redesign 2026-10-22).
 *
 * Loaded AFTER landing_v3.css, which keeps the shared shell (nav, footer,
 * buttons, reveal) and the visual components this page reuses (.petra,
 * .phone, .scene3d, .codeblock, .grant-card, .chip). Everything below is
 * page-specific and references brand_tokens.css tokens only, so light and dark
 * both follow the one token set.
 * ========================================================================== */

/* ============ SHARED BITS ============ */
.btn-lg{padding:14px 26px; font-size:1rem; border-radius:10px;}
.lp-section{padding:112px 0 0;}
.lp-head{max-width:680px; margin-bottom:44px;}
.lp-head-center{margin-left:auto; margin-right:auto; text-align:center;}
.lp-head .eyebrow{display:block; margin-bottom:12px;}
.lp-head .h2{font-size:clamp(1.9rem,3.8vw,2.75rem); font-weight:680; margin-bottom:0;}
.lp-head .lede{margin-top:14px;}
.lp-head-center .lede{margin-left:auto; margin-right:auto;}
@media (max-width:700px){ .lp-section{padding-top:80px;} .lp-head{margin-bottom:32px;} }

/* ============ HERO ============ */
.lp-hero{padding:84px 0 88px;}
.lp-hero .hero-grid{grid-template-columns:1.05fr .95fr; gap:64px;}
.lp-hero h1{font-size:clamp(2.3rem,4.8vw,3.7rem); line-height:1.04;}
.lp-hero h1 em{display:block; margin-top:.12em;}
.lp-hero .hero-sub{font-size:1.18rem; max-width:48ch;}
@media (max-width:980px){ .lp-hero{padding:56px 0 64px;} .lp-hero .hero-grid{grid-template-columns:1fr; gap:44px;} }

/* The layer stack: your AI → connection → geoDB → what feeds it */
.stack{margin:0; display:flex; flex-direction:column; align-items:stretch; max-width:500px; justify-self:end; width:100%;}
@media (max-width:980px){ .stack{justify-self:stretch; max-width:none;} }
.stack-card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-lg); position:relative;
}
.stack-ai{padding:16px 16px 18px;}
.stack-head{
  display:flex; align-items:center; gap:9px; font-weight:640; font-size:.92rem;
  padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--line-soft);
}
.stack-head .mono{margin-left:auto; font-size:10px; font-weight:400; letter-spacing:.06em; color:var(--ink-3); text-transform:uppercase;}
@media (max-width:460px){ .stack-head .mono{display:none;} }
.stack-dot{width:8px; height:8px; border-radius:50%; background:var(--good); box-shadow:0 0 0 3px var(--good-soft);}

.bubble{font-size:.9rem; line-height:1.5;}
.bubble-user{
  margin-left:auto; max-width:82%; width:fit-content; padding:9px 14px;
  background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:12px 12px 3px 12px;
  opacity:0; animation:bubbleIn .5s ease .6s forwards;
}
.bubble-ai{
  margin-top:12px; padding:13px 14px; background:var(--panel-2); border:1px solid var(--line-soft);
  border-radius:12px 12px 12px 3px; opacity:0; animation:bubbleIn .5s ease 1.3s forwards;
}
.dry-title{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--teal); margin-bottom:8px;
}
.dry{list-style:none; margin:0; padding:0;}
.dry li{display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px dashed var(--line); font-size:.86rem;}
.dry li:last-child{border-bottom:0;}
.dry li span{color:var(--ink-2);}
.dry li b{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:.84rem; font-variant-numeric:tabular-nums;}
.dry .dry-warn b{color:var(--warn);}
.dry-gate{display:flex; align-items:center; gap:12px; margin-top:12px;}
.dry-gate .btn{cursor:default; pointer-events:none;}
.dry-gate .mono{font-size:10.5px; color:var(--ink-3); letter-spacing:.06em;}
@keyframes bubbleIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

.stack-link{
  position:relative; height:58px; display:flex; align-items:center; justify-content:center;
}
.stack-link::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%);
  background:repeating-linear-gradient(to bottom, var(--accent) 0 6px, transparent 6px 12px);
  background-size:2px 12px; animation:flow 1.1s linear infinite; opacity:.7;
}
.stack-link span{
  position:relative; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); background:var(--ground); border:1px solid var(--line); border-radius:99px; padding:4px 12px;
}
@keyframes flow{from{background-position:0 0;} to{background-position:0 12px;}}

.stack-core{
  display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 20px;
  border-color:var(--accent-line);
  background:linear-gradient(135deg, var(--panel) 0%, var(--accent-soft) 100%);
}
.stack-brand{font-size:1.6rem; line-height:1; display:inline-flex;}
.stack-core .mono{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); text-align:right;}

.stack-feeds{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px;}
.stack-feeds span{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px; border-radius:10px;
  border:1px dashed var(--line); font-size:.76rem; color:var(--ink-2); text-align:center; background:var(--ground);
}
.stack-feeds i{font-size:1.05rem; color:var(--teal);}

@media (prefers-reduced-motion: reduce){
  .bubble-user,.bubble-ai{animation:none; opacity:1;}
  .stack-link::before{animation:none;}
}

/* ============ WORKS WITH ============ */
.works{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--panel);}
.works-inner{display:flex; align-items:center; gap:28px; padding-top:20px; padding-bottom:20px; flex-wrap:wrap;}
.works-label{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}
.works-list{display:flex; flex-wrap:wrap; gap:10px 30px; list-style:none; margin:0; padding:0; flex:1;}
.works-list li{font-family:'Bricolage Grotesque','Figtree',sans-serif; font-weight:640; font-size:1.06rem; color:var(--ink-2); letter-spacing:-.01em;}
.works-list small{font-family:'Figtree',sans-serif; font-weight:500; font-size:.72rem; color:var(--ink-3);}

/* ============ HOW IT WORKS ============ */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:none;}
@media (max-width:880px){ .steps{grid-template-columns:1fr;} }
.step{
  position:relative; background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:28px 26px 26px; box-shadow:var(--shadow);
}
.step-n{
  position:absolute; top:22px; right:24px; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
  color:var(--ink-3);
}
.step-icon{
  display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:12px;
  background:var(--accent-soft); color:var(--accent); font-size:1.3rem; margin-bottom:18px;
}
.step h3{font-size:1.3rem; font-weight:660; margin-bottom:8px;}
.step p{color:var(--ink-2); font-size:.98rem;}

/* ============ PRODUCT TOUR ============ */
.tour{background:var(--panel); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-lg); overflow:hidden;}
.tour-tabs{display:flex; gap:4px; padding:10px; border-bottom:1px solid var(--line-soft); overflow-x:auto; scrollbar-width:none;}
.tour-tabs::-webkit-scrollbar{display:none;}
.tour-tabs [role="tab"]{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap; border:0; background:transparent;
  color:var(--ink-2); font-weight:600; font-size:.93rem; padding:10px 16px; border-radius:10px; cursor:pointer;
}
.tour-tabs [role="tab"]:hover{color:var(--ink); background:var(--panel-2);}
.tour-tabs [role="tab"][aria-selected="true"]{color:var(--accent); background:var(--accent-soft);}
.tour-tabs [role="tab"] i{font-size:1rem;}
/* Without script every panel shows, stacked (the crawler view). */
.tour:not(.tour-js) [role="tab"]{pointer-events:none;}
.tour:not(.tour-js) .tour-panel + .tour-panel{border-top:1px solid var(--line-soft);}
.tour-panel{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; padding:44px;}
.tour-panel[hidden]{display:none;}
@media (max-width:880px){ .tour-panel{grid-template-columns:1fr; gap:28px; padding:28px 20px;} }
.tour-copy h3{font-size:clamp(1.4rem,2.6vw,1.85rem); font-weight:660; letter-spacing:-.01em; margin-bottom:12px;}
.tour-copy > p{color:var(--ink-2); font-size:1.03rem; margin-bottom:18px;}
.ticks{list-style:none; margin:0; padding:0;}
.ticks li{position:relative; padding:6px 0 6px 28px; font-size:.97rem;}
.ticks li::before{
  content:"✓"; position:absolute; left:0; top:6px; width:19px; height:19px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:800;
  background:var(--good-soft); color:var(--good);
}
.tour-live{display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-weight:600; font-size:.93rem;}
.tour-visual{min-width:0;}
.tour-visual .scene3d{height:340px;}

/* QC control chart card */
.qc-card{padding:20px 20px 16px;}
.qc-chart{width:100%; height:auto; display:block;}
.qc-foot{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}

/* ============ AI CONNECTOR (MCP) — the lead offer ============ */
.mcp{
  display:grid; grid-template-columns:1fr 1.05fr; gap:28px 56px; align-items:center;
  padding:56px; border:1px solid var(--accent-line); border-radius:24px;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--accent-soft) 0%, transparent 55%),
    var(--panel);
  box-shadow:var(--shadow-lg);
}
@media (max-width:980px){ .mcp{grid-template-columns:1fr; padding:36px 28px;} }
@media (max-width:520px){ .mcp{padding:28px 18px; border-radius:18px;} }
.mcp-copy{min-width:0;}
.mcp-copy .eyebrow{display:block; margin-bottom:12px;}
.mcp-copy .h2{font-size:clamp(1.9rem,3.6vw,2.6rem); font-weight:680; margin-bottom:18px;}
.mcp-lede{font-size:1.1rem; color:var(--ink); margin-bottom:12px; max-width:56ch;}
.mcp-lede b{color:var(--accent); font-weight:700;}
.mcp-body{color:var(--ink-2); max-width:56ch; margin-bottom:22px;}
.mcp-url{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:22px;
  padding:8px 8px 8px 14px; border:1px dashed var(--accent-line); border-radius:12px; background:var(--ground);
  max-width:520px;
}
.mcp-url-label{font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);}
.mcp-url code{font-family:'IBM Plex Mono',monospace; font-size:.95rem; font-weight:600; color:var(--ink); flex:1; min-width:0; white-space:nowrap; overflow-x:auto;}
@media (max-width:520px){
  .mcp-url-label{flex-basis:100%;}
  .mcp-url code{font-size:.86rem;}
}
.mcp-copy-btn{
  border:1px solid var(--line); background:var(--panel); color:var(--ink); border-radius:8px;
  padding:6px 14px; font-size:.85rem; font-weight:600; cursor:pointer;
}
.mcp-copy-btn:hover{border-color:var(--accent); color:var(--accent);}
.mcp-copy .hero-ctas{margin-bottom:10px;}

.mcp-reach{min-width:0;}
.mcp-clients{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;}
.mcp-clients span{
  font-family:'Bricolage Grotesque','Figtree',sans-serif; font-weight:640; font-size:.95rem;
  padding:7px 14px; border-radius:99px; background:var(--panel); border:1px solid var(--line); color:var(--ink);
}
.mcp-clients span:last-child{color:var(--ink-2); border-style:dashed;}
.mcp-tiles{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.mcp-tile{
  display:flex; gap:12px; align-items:flex-start; padding:14px 14px 15px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
}
/* Stagger the middle row, like a mosaic, so the grid reads as a network not a table. */
@media (min-width:981px){
  .mcp-tile:nth-child(3), .mcp-tile:nth-child(4){transform:translateX(-28px);}
}
.mcp-tile i{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:10px; background:var(--accent-soft); color:var(--accent); font-size:1.05rem;
}
.mcp-tile:nth-child(4) i, .mcp-tile:nth-child(5) i{background:var(--teal-soft); color:var(--teal);}
.mcp-tile:nth-child(6) i{background:var(--gold-soft); color:var(--gold);}
.mcp-tile div{min-width:0;}
.mcp-tile b{display:block; font-weight:650; font-size:.95rem; margin-bottom:2px;}
.mcp-tile span{display:block; font-size:.84rem; line-height:1.45; color:var(--ink-2);}
@media (max-width:520px){ .mcp-tiles{grid-template-columns:1fr;} }

.mcp-foot{
  grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:12px 40px;
  padding-top:24px; border-top:1px solid var(--line); font-size:.93rem; color:var(--ink-2);
}
@media (max-width:980px){ .mcp-foot{grid-template-columns:1fr;} }
.mcp-foot b{color:var(--ink); font-weight:650;}
.mcp-spec{display:block; margin-top:4px; color:var(--ink-3); font-size:.88rem;}
.mcp-spec code{font-size:.9em; color:var(--ink-2);}

/* ============ PETRA (built in) ============ */
.ai-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
@media (max-width:980px){ .ai-grid{grid-template-columns:1fr; gap:36px;} }
#petra .eyebrow{display:block; margin-bottom:12px;}
#petra .h2{font-size:clamp(1.9rem,3.8vw,2.75rem); font-weight:680; margin-bottom:16px;}
#petra .lede{margin-bottom:18px;}
#petra .petra{min-height:540px; max-height:580px;}

/* ============ PROMISES ============ */
.promises{padding:112px 0 0;}
.promise-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:20px; background:var(--panel); overflow:hidden;}
@media (max-width:880px){ .promises{padding-top:80px;} .promise-grid{grid-template-columns:1fr;} }
.promise{padding:32px 30px; border-left:1px solid var(--line-soft);}
.promise:first-child{border-left:0;}
@media (max-width:880px){ .promise{border-left:0; border-top:1px solid var(--line-soft);} .promise:first-child{border-top:0;} }
.promise-big{
  display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:2.6rem; font-weight:720; line-height:1;
  color:var(--accent); margin-bottom:14px;
}
.promise-big i{font-size:2rem;}
.promise h3{font-size:1.15rem; font-weight:650; margin-bottom:6px;}
.promise p{color:var(--ink-2); font-size:.95rem;}

/* ============ PRICING (includes/pricing_plans.html, restyled to the tokens) ============
   The include carries its own <style> with a fixed dark palette so it can drop
   into home_v2 too. #main raises specificity above those rules; the markup
   stays the ONE shared pricing surface. */
#main .ap-section{background:transparent; color:var(--ink); padding:112px 0 0;}
#main .ap-section .ap-wrap{max-width:1140px; padding:0 24px;}
#main .ap-head{margin-bottom:40px;}
#main .ap-head h2{font-family:'Bricolage Grotesque','Figtree',sans-serif; font-size:clamp(1.9rem,3.8vw,2.75rem); font-weight:680; letter-spacing:-.015em; color:var(--ink); line-height:1.06;}
#main .ap-head p{color:var(--ink-2); font-size:1.09rem; margin-top:10px;}
#main .ap-plans{max-width:none; gap:20px;}
#main .ap-plan{background:var(--panel); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:16px; padding:28px 26px;}
#main .ap-plan:nth-child(2){border-color:var(--accent-line); box-shadow:0 0 0 1px var(--accent-line), var(--shadow-lg);}
#main .ap-plan h3{font-family:'Bricolage Grotesque','Figtree',sans-serif; font-size:1.25rem; font-weight:660;}
#main .ap-plan .ap-price-value{font-family:'Bricolage Grotesque','Figtree',sans-serif; color:var(--ink); margin-top:4px;}
#main .ap-plan .ap-price-value .per{color:var(--ink-3); font-family:'Figtree',sans-serif; font-weight:500; font-size:.88rem;}
#main .ap-plan p{color:var(--ink-2); font-size:.94rem;}
#main .ap-terms{max-width:760px; color:var(--ink-2); font-size:.98rem;}
#main .ap-terms strong{color:var(--ink);}
#main .ap-included{max-width:none; margin-bottom:28px; padding:26px 28px; border:1px solid var(--line-soft); border-radius:16px; background:var(--panel-2);}
#main .ap-included h3{color:var(--ink); font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; text-align:left; margin-bottom:14px;}
#main .ap-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:6px 24px;}
#main .ap-grid li{color:var(--ink-2); font-size:.9rem;}
#main .ap-grid li::before{color:var(--good);}
#main .ap-claims{max-width:none; background:var(--teal-soft); border-color:transparent; color:var(--ink-2); font-size:.95rem; border-radius:12px;}
#main .ap-claims strong{color:var(--ink);}
#main .ap-btn{background:var(--cta-bg); color:var(--cta-ink); border-radius:10px; padding:14px 28px;}
#main .ap-btn:hover{filter:brightness(1.08); text-decoration:none;}
#main .ap-fine{color:var(--ink-3); font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.04em;}
@media (max-width:700px){ #main .ap-section{padding-top:80px;} }

/* ============ FAQ ============ */
.faq-wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start;}
@media (max-width:880px){ .faq-wrap{grid-template-columns:1fr; gap:8px;} }
.faq details{border-bottom:1px solid var(--line);}
.faq details:first-child{border-top:1px solid var(--line);}
.faq summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:18px 2px; font-weight:620; font-size:1.04rem;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+"; flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); color:var(--ink-2); font-weight:500; transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq summary:hover{color:var(--accent);}
.faq details > p, .faq details > ul{padding:0 2px 20px; color:var(--ink-2); max-width:62ch;}
.faq-soon{list-style:none; margin:0;}
.faq-soon li{padding:4px 0;}
.faq-soon .soon{
  display:inline-block; margin-right:8px; font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; padding:2px 8px; border-radius:99px; background:var(--gold-soft);
  color:var(--gold); vertical-align:2px;
}
.faq-soon b{color:var(--ink); font-weight:620;}

/* ============ FINAL ============ */
.final{margin-top:112px; border-top:1px solid var(--line); background:linear-gradient(180deg, var(--accent-soft) 0%, var(--ground) 100%);}