/* ==========================================================================
   home.css — furniture that only exists on the marketing homepage (/).
   Loaded by landing/index.html via {% block extra_css %}, on top of site.css.

   Everything shared (tokens, reset, typography, layout, buttons, header,
   footer, .eyebrow, .microcopy, .grid, .card, .pill, .badge-*, .stats,
   .codewin, .chip-code, .reveal) lives in site.css — never re-declare it here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Small shared-on-this-page helpers
   -------------------------------------------------------------------------- */
.section--soft{background:var(--bg-soft)}
.section--cta{padding-top:24px}
.section-head .h2{margin:16px 0 12px}

/* horizontal row of CTAs, centred */
.btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-row--top{margin-top:22px}
.btn-row--lg{margin-top:34px}

/* centred muted footnote under a block */
.center-note{text-align:center;color:var(--muted);font-size:14px;margin-top:18px}

/* transparent button for use inside a dark band */
.btn-ghost-dark{background:transparent;border-color:var(--dark-border);color:#fff}
.btn-ghost-dark:hover{background:rgba(255,255,255,.06)}

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding:84px 0 80px}
.hero-bg{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 50% at 50% -5%,rgba(16,185,129,.08),transparent 70%)}
.hero-grid{position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(0,0,0,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.035) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(70% 55% at 50% 0%,#000,transparent 78%);
  mask-image:radial-gradient(70% 55% at 50% 0%,#000,transparent 78%)}
.hero-inner{max-width:760px;margin:0 auto;text-align:center}
.hero h1{font-size:clamp(36px,6vw,60px);line-height:1.04;font-weight:700;margin:22px 0 18px}
.hero h1 .hl{position:relative;white-space:nowrap}
.hero h1 .hl::after{content:"";position:absolute;left:-2px;right:-2px;bottom:6px;height:11px;
  background:var(--accent);opacity:.18;border-radius:3px;z-index:-1}
.hero .lead{max-width:600px;margin:0 auto}
.hero-cta{display:flex;gap:12px;justify-content:center;margin:30px 0 16px;flex-wrap:wrap}

/* --------------------------------------------------------------------------
   2. Marketing feature card — the padded, lifting variant of .card
   -------------------------------------------------------------------------- */
.card--feature{padding:26px;transition:transform .25s ease,box-shadow .25s ease}
.card--feature:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card--feature .ic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--bg-soft);border:1px solid var(--border);margin-bottom:16px;color:var(--fg)}
.card--feature .ic svg{width:20px;height:20px}
.card--feature .ic.accent{background:var(--accent-bg);border-color:var(--accent-bd);color:var(--accent-fg)}
.card--feature h3{font-size:17px;margin-bottom:7px;font-weight:600}
.card--feature p{font-size:14.5px;color:var(--muted);line-height:1.6}
.card--feature code{font-family:var(--mono);font-size:12px}

/* --------------------------------------------------------------------------
   3. Toolkit bento
   -------------------------------------------------------------------------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,auto);gap:18px}
.bt{position:relative;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);padding:24px;
  box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;
  display:flex;flex-direction:column}
.bt:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.bt .tag{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2)}
.bt .bh{display:flex;align-items:center;gap:11px;margin:8px 0 4px}
.bt .bi{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--accent-bg);border:1px solid var(--accent-bd);color:var(--accent-fg);flex:0 0 auto}
.bt .bi svg{width:19px;height:19px}
.bt h3{font-size:17px;font-weight:600;letter-spacing:-.01em}
.bt p{font-size:14px;color:var(--muted);line-height:1.55}
.b-dash{grid-column:span 2;grid-row:span 2}
.b-replica{grid-column:span 2}
.b-cli{grid-column:span 1}
.b-rest{grid-column:span 1}
.b-mcp{grid-column:span 4;background:var(--dark);border-color:var(--dark-border);color:#fff}
.b-mcp h3{color:#fff}
.b-mcp p{color:var(--muted-2)}
.b-mcp .tag{color:#6ee7b7}
.b-mcp .bi{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.32);color:#6ee7b7}

/* mini dashboard mock (inside .b-dash) */
.dashmock{margin-top:16px;flex:1;border:1px solid var(--border);border-radius:12px;background:var(--bg-soft);
  overflow:hidden;min-height:210px;display:flex;flex-direction:column}
.dm-bar{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid var(--border);background:#fff}
.dm-bar .d{width:9px;height:9px;border-radius:50%;background:var(--border)}
.dm-bar .t{margin-left:6px;font-size:11px;color:var(--muted-2);font-family:var(--mono)}
.dm-body{padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dm-stat{background:#fff;border:1px solid var(--border);border-radius:9px;padding:10px 12px}
.dm-stat .l{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.dm-stat .v{font-size:19px;font-weight:700;letter-spacing:-.02em;margin-top:2px}
.dm-stat .v em{font-style:normal;color:var(--accent-fg);font-size:13px;font-weight:600}
.dm-chart{grid-column:span 2;background:#fff;border:1px solid var(--border);border-radius:9px;padding:12px;
  display:flex;align-items:flex-end;gap:6px;height:80px}
.dm-chart i{flex:1;background:var(--accent);opacity:.85;border-radius:3px 3px 0 0;display:block}
/* static mock series — heights belong to the design, not to the markup */
.dm-chart i:nth-child(1){height:38%}
.dm-chart i:nth-child(2){height:60%}
.dm-chart i:nth-child(3){height:46%}
.dm-chart i:nth-child(4){height:74%}
.dm-chart i:nth-child(5){height:56%}
.dm-chart i:nth-child(6){height:88%}
.dm-chart i:nth-child(7){height:68%}
.dm-chart i:nth-child(8){height:96%}
.dm-reviews{grid-column:span 2;background:#fff;border:1px solid var(--border);border-radius:9px;padding:10px 12px;
  display:flex;flex-direction:column;gap:9px}
.dm-rev{display:flex;align-items:center;gap:9px}
.dm-rev .stars{color:#f59e0b;font-size:12px;letter-spacing:1px;flex:0 0 auto}
.dm-rev .txt{font-size:11.5px;color:var(--muted);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-rev .st{font-size:10px;font-weight:600;color:var(--accent-fg);background:var(--accent-bg);border-radius:999px;
  padding:2px 8px;flex:0 0 auto}
.dm-rev .st.new{color:#a16207;background:#fef9c3}

/* MCP node row (inside .b-mcp) */
.mcp-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.mcp-node{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--dark-border);background:var(--dark-2);
  border-radius:10px;padding:9px 14px;font-size:13px;color:#d4d4d8;font-weight:500}
.mcp-node svg{width:15px;height:15px;color:#6ee7b7}
.mcp-arrow{color:var(--muted-strong);display:inline-flex}
.mcp-arrow svg{width:18px;height:18px}
.mcp-hub{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(16,185,129,.4);
  background:rgba(16,185,129,.12);border-radius:10px;padding:9px 14px;font-size:13px;color:#6ee7b7;font-weight:600}
.mcp-hub svg{width:15px;height:15px}

/* --------------------------------------------------------------------------
   4. Endpoint list
   -------------------------------------------------------------------------- */
.ep-wrap{max-width:820px;margin:0 auto;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;background:var(--bg);box-shadow:var(--shadow-sm)}
.ep{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;
  border-bottom:1px solid var(--border-soft)}
.ep:last-child{border-bottom:none}
.ep .epl{display:flex;align-items:center;gap:13px}
.ep .epl svg{width:18px;height:18px;color:var(--accent);flex:0 0 auto}
.ep .name{font-weight:500;font-size:15px}
.ep .qual{color:var(--muted);font-weight:400}
.ep .path{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:2px}
.ep .svc{font-size:12.5px;color:var(--muted);font-weight:500;background:var(--bg-soft);border:1px solid var(--border);
  padding:4px 10px;border-radius:999px;white-space:nowrap}
.ep-note{font-size:13.5px;color:var(--muted);text-align:center;margin-top:18px}
.ep-note code{font-family:var(--mono);font-size:12.5px;background:var(--bg-soft);border:1px solid var(--border);
  padding:1px 6px;border-radius:5px}
.ep-note .lnk{color:var(--accent-fg);font-weight:600}

/* --------------------------------------------------------------------------
   5. Dark failure-simulation band
   -------------------------------------------------------------------------- */
.dark-band{background:var(--dark);color:#fff}
.dark-band .h2{color:#fff}
.dark-band .lead{color:var(--muted-2)}
.dark-band .eyebrow{background:var(--dark-2);border-color:var(--dark-border);color:var(--muted-2)}
.dark-band .section-head{margin-bottom:8px}
.dark-band .codewin{max-width:680px;margin-top:36px}
.dark-band .codewin ~ .codewin{margin-top:20px}

.chips{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:30px 0 8px}
.chip{border:1px solid var(--dark-border);background:var(--dark-2);border-radius:12px;padding:14px 18px;
  text-align:center;min-width:140px}
.chip .v{font-size:24px;font-weight:700;color:#fff;letter-spacing:-.02em;font-family:var(--mono)}
.chip .v em{color:var(--accent);font-style:normal}
.chip .l{font-size:12.5px;color:var(--muted-2);margin-top:3px}

.modes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.mode{border:1px solid var(--dark-border);background:var(--dark-2);border-radius:10px;padding:10px 16px;
  font-size:13.5px;color:#d4d4d8}
.mode b{color:#fff;font-weight:600}
.mode .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;vertical-align:middle}
.mode .dot.gr{background:var(--accent)}
.mode .dot.rd{background:#fb7185}
.mode .dot.gy{background:var(--muted-strong)}

/* --------------------------------------------------------------------------
   6. Changelog teaser stats (uses shared .stats)
   -------------------------------------------------------------------------- */
.stats--hero{justify-content:center;gap:48px;text-align:center;margin:36px 0 8px}
.stats--hero .n{font-size:52px}
.stats--hero .l{font-size:14px;margin-top:2px}

/* --------------------------------------------------------------------------
   7. Pricing block
   -------------------------------------------------------------------------- */
.billing{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:6px}
.toggle{display:inline-flex;align-items:center;border:1px solid var(--border);background:#f4f4f5;
  border-radius:999px;padding:4px}
.toggle button{display:inline-flex;align-items:center;gap:7px;border:none;background:transparent;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:500;color:var(--muted);padding:7px 18px;border-radius:999px;transition:all .18s}
.toggle button.active{background:#fff;color:var(--fg);box-shadow:var(--shadow-sm)}
.save-tag{font-size:10.5px;font-weight:600;line-height:1.5;color:var(--accent-fg);
  background:var(--accent-bg);border:1px solid var(--accent-bd);border-radius:999px;padding:1px 7px}

.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:840px;margin:48px auto 0}
.plan{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:18px;padding:32px;
  background:var(--bg);box-shadow:var(--shadow-sm)}
.plan .pname{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.plan .ptag{font-size:14px;color:var(--muted);margin-top:8px;min-height:42px}
.price-row{display:flex;align-items:baseline;gap:4px;margin-top:20px}
.price{font-size:46px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.per{font-size:14px;color:var(--muted);font-weight:500}
.price-note{font-size:12.5px;color:var(--muted-2);margin-top:5px;min-height:18px}
.plan .btn{width:100%;margin-top:22px}
.plan .divider{height:1px;background:var(--border-soft);margin:26px 0}
.feats{list-style:none;display:flex;flex-direction:column;gap:13px}
.feats li{position:relative;padding-left:30px;font-size:14px;color:var(--fg-soft);line-height:1.5}
.feats li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;
  background:var(--accent-bg);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size:12px;background-position:center;background-repeat:no-repeat}
.feats li.hd{font-weight:600;color:var(--fg)}
.feats li .ft{font-weight:600;color:var(--fg)}
.feats li .fd{display:block;margin-top:3px;font-size:13px;font-weight:400;color:var(--muted);line-height:1.45}

.plan--pro{position:relative;background:var(--dark);border-color:var(--dark-border);box-shadow:var(--shadow-lg)}
.plan--pro .pname,.plan--pro .ptag,.plan--pro .per,.plan--pro .price-note{color:var(--muted-2)}
.plan--pro .price{color:#fff}
.plan--pro .divider{background:var(--dark-border)}
.plan--pro .feats li{color:#d4d4d8}
.plan--pro .feats li.hd{color:#fff}
.plan--pro .feats li .ft{color:#fff}
.plan--pro .feats li .fd{color:#a1a1aa}
.plan--pro .feats li::before{background:var(--accent);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size:12px;background-position:center;background-repeat:no-repeat}
.plan--pro .feats li.hd::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>")}
.pop{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:5px;background:var(--accent);color:#fff;font-size:12px;font-weight:600;
  padding:5px 13px;border-radius:999px;box-shadow:0 8px 20px -6px rgba(16,185,129,.5)}
.pop svg{width:13px;height:13px}

/* --------------------------------------------------------------------------
   8. FAQ — element selectors stay scoped to .faq so they never leak
   -------------------------------------------------------------------------- */
.faq{max-width:760px;margin:0 auto}
.faq details{border:1px solid var(--border);border-radius:12px;background:var(--bg);margin-bottom:12px;overflow:hidden}
.faq details[open]{box-shadow:var(--shadow-sm)}
.faq summary{list-style:none;cursor:pointer;padding:20px 22px;font-weight:500;font-size:16px;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pl{flex:0 0 auto;width:20px;height:20px;position:relative;transition:transform .2s}
.faq summary .pl::before,.faq summary .pl::after{content:"";position:absolute;background:var(--muted);border-radius:2px}
.faq summary .pl::before{top:9px;left:2px;width:16px;height:2px}
.faq summary .pl::after{left:9px;top:2px;width:2px;height:16px;transition:transform .2s}
.faq details[open] summary .pl::after{transform:rotate(90deg);opacity:0}
.faq details p{padding:0 22px 22px;color:var(--muted);font-size:14.5px;line-height:1.65}

/* --------------------------------------------------------------------------
   9. Final CTA band
   -------------------------------------------------------------------------- */
.cta-band{background:var(--dark);border-radius:24px;padding:60px 40px;text-align:center;color:#fff;
  position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(50% 80% at 50% 0%,rgba(16,185,129,.16),transparent 70%)}
.cta-band > *{position:relative}
.cta-band h2{font-size:clamp(26px,3.5vw,38px);color:#fff;margin-bottom:14px}
.cta-band p{color:var(--muted-2);font-size:17px;margin-bottom:28px}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */
@media(max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .b-dash{grid-column:span 2;grid-row:span 1}
  .b-replica{grid-column:span 2}
  .b-cli,.b-rest{grid-column:span 1}
  .b-mcp{grid-column:span 2}
}
@media(max-width:760px){
  .plans{grid-template-columns:1fr}
  .ep{flex-direction:column;align-items:flex-start;gap:8px}
  .cta-band{padding:44px 24px}
  .stats--hero{gap:32px}
}
@media(max-width:600px){
  .bento{grid-template-columns:1fr}
  .b-dash,.b-replica,.b-cli,.b-rest,.b-mcp{grid-column:span 1}
}