/* ============================================================
   GeodeMCP design system — merged from homepage and listing mockups
   Homepage: docs/mockups/homepage.html
   Listing:  docs/mockups/listing.html
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root{
  --blue-100: oklch(93.2% .032 255.585); --blue-500: oklch(62.3% .214 259.815);
  --blue-600: oklch(54.6% .245 262.881); --blue-700: oklch(48.8% .243 264.376);
  --emerald-300: oklch(84.5% .143 164.978); --emerald-400: oklch(76.5% .177 163.223);
  --emerald-500: oklch(69.6% .17 162.48); --neutral-200: oklch(92.2% 0 0);
  --bg: oklch(15% .006 165); --surface: oklch(18.5% .006 165); --surface-2: oklch(21% .006 165);
  --input: oklch(12% .006 165);
  --border: oklch(100% 0 0 / .07); --border-strong: oklch(100% 0 0 / .12);
  --text: oklch(96% 0 0); --muted: oklch(70.8% 0 0); --faint: oklch(55.6% 0 0);
  --green: var(--emerald-400); --ease: cubic-bezier(.4,0,.2,1);
}

/* ── Reset ───────────────────────────────────────────────────── */
*{box-sizing:border-box} html,body{margin:0}
body{background:var(--bg); color:var(--text); font-family:"Geist",ui-sans-serif,system-ui,sans-serif;
  font-feature-settings:"cv01" 1; -webkit-font-smoothing:antialiased; line-height:1.5; overflow-x:hidden}
a{color:inherit; text-decoration:none}
.is{font-family:"Instrument Sans",sans-serif; font-feature-settings:"cv01" 1}
.display{font-family:"Instrument Sans",sans-serif; font-weight:600; letter-spacing:-.025em}
.mono{font-family:"Geist Mono",monospace}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; height:2.75rem; padding-inline:1rem;
  border-radius:.375rem; white-space:nowrap; cursor:pointer; border:1px solid var(--blue-500); background:var(--blue-600);
  color:var(--blue-100); font-family:"Instrument Sans",sans-serif; font-weight:500; font-size:.9rem; transition:.15s var(--ease)}
.btn:hover{background:var(--blue-700); border-color:var(--blue-600)}
.ghost{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; height:2.75rem; padding-inline:1rem;
  border-radius:.375rem; white-space:nowrap; cursor:pointer; border:1px solid var(--border-strong); background:transparent;
  color:var(--neutral-200); font-family:"Instrument Sans",sans-serif; font-weight:500; font-size:.9rem; transition:.15s var(--ease)}
.ghost:hover{background:oklch(100% 0 0 / .045); border-color:oklch(100% 0 0 / .2)}
.btn.sm,.ghost.sm{height:2.25rem; font-size:.83rem; padding-inline:.85rem}

/* ── Header ──────────────────────────────────────────────────── */
header{position:sticky; top:0; z-index:40; background:oklch(15% .006 165 / .72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--border)}
header .wrap{display:flex; align-items:center; gap:18px; height:64px}
.brand{display:flex; align-items:center; gap:4px}
.brand .name{font-family:"Onest",sans-serif; font-weight:500; font-size:19px; letter-spacing:-.02em}
.navlinks{display:flex; gap:26px; margin-left:24px; color:var(--muted); font-size:14px; font-weight:500}
.navlinks a:hover{color:var(--text)}
.nav-cta{margin-left:14px; display:flex; gap:10px; align-items:center}
.burger{display:none; background:transparent; border:1px solid var(--border-strong); border-radius:8px; width:36px; height:36px; align-items:center; justify-content:center; cursor:pointer; color:var(--text); flex:none}
.hsearch{margin-left:auto; position:relative; flex:1; max-width:280px}
.hsearch svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--faint)}
.hsearch input{width:100%; background:var(--surface); border:1px solid var(--border-strong); border-radius:8px; padding:8px 12px 8px 33px; color:var(--text); font-size:13.5px; font-family:"Geist",sans-serif}
.hsearch input::placeholder{color:var(--faint)}
.hsearch input:focus{outline:none; border-color:var(--green)}
.mobile-menu{display:none; border-top:1px solid var(--border); padding:14px 28px 18px; flex-direction:column; gap:6px; background:oklch(15% .006 165 / .96)}
.mobile-menu.open{display:flex}
.mobile-menu a{color:var(--muted); font-family:"Instrument Sans",sans-serif; font-weight:500; font-size:15px; padding:7px 0}
.mobile-menu a:hover{color:var(--text)}
.mobile-menu .hsearch.m{margin:0 0 8px; max-width:none; flex:none}
@media (max-width:760px){.navlinks{display:none} .hsearch{display:none} .nav-cta{display:none} .burger{display:inline-flex}}

/* ── Utility text / section helpers ─────────────────────────── */
.label{font-family:"Instrument Sans",sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.17em; color:var(--green); font-weight:600}
.sec{padding:84px 0}
.sec h2{font-size:34px; line-height:1.12; margin:14px 0 0; max-width:18em}
.sec .lead{color:var(--muted); font-size:16.5px; margin:14px 0 0; max-width:36em; line-height:1.6}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:500; font-family:"Instrument Sans",sans-serif;
  color:var(--emerald-300); background:transparent; border:1px solid oklch(76.5% .177 163.223 / .16); padding:5px 11px; border-radius:999px}
.dot{width:6px; height:6px; border-radius:50%; background:var(--green)}
.link{color:var(--green); font-size:14px; font-weight:500; font-family:"Instrument Sans",sans-serif}

/* ── Panel / terminal card (shared) ─────────────────────────── */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; position:relative}
.panel-bar{display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--border)}
.tl{width:9px; height:9px; border-radius:50%; background:oklch(100% 0 0 / .1)}
.panel-bar .file{margin-left:8px; color:var(--faint); font-size:12px}
pre{margin:0; padding:16px 18px; font-family:"Geist Mono",monospace; font-size:12px; line-height:1.75; color:oklch(82% 0 0); overflow-x:auto}
.c-com{color:var(--faint)} .c-key{color:var(--emerald-500)} .c-str{color:oklch(70% .04 255)} .c-blue{color:oklch(70.7% .165 254.624)}

/* ── Server card (cC) — shared ───────────────────────────────── */
.cC{border:1px solid var(--border); border-radius:14px; background:var(--surface); overflow:hidden; transition:.15s var(--ease)}
.cC:hover{border-color:var(--border-strong); background:var(--surface-2)}
.cC .bar{display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--border); font-family:"Geist Mono",monospace; font-size:11.5px; color:var(--faint)}
.cC .ep{color:var(--emerald-500)}
.cC .head{display:flex; gap:12px; align-items:flex-start}
.ltile{flex:none; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:oklch(100% 0 0 / .04); border:1px solid var(--border); overflow:hidden}
.ltile img{width:22px; height:22px; filter:grayscale(1) brightness(1.3) contrast(.9); opacity:.7; transition:.2s var(--ease)}
.cC:hover .ltile img{filter:none; opacity:1}
.cC .nm{font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:14.5px}
.cC .ds{font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.45}

/* chips — shared */
.chip{font-size:11px; font-weight:600; font-family:"Instrument Sans",sans-serif; padding:3px 9px; border-radius:999px; border:1px solid var(--border); color:var(--muted)}
.chip.live{color:var(--green); border-color:oklch(76.5% .177 163.223 / .25); background:oklch(76.5% .177 163.223 / .08)}
.pulse{width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 7px var(--green); display:inline-block; margin-right:5px; vertical-align:middle}

/* ── Cards grid ──────────────────────────────────────────────── */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px}
@media (max-width:880px){.cards{grid-template-columns:1fr 1fr}} @media (max-width:560px){.cards{grid-template-columns:1fr}}

/* ── Footer ──────────────────────────────────────────────────── */
footer{border-top:1px solid var(--border); margin-top:40px; background:oklch(13% .006 165)}

/* ================================================================
   HOMEPAGE-ONLY SECTIONS
   ================================================================ */

/* ── Hero ────────────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--border)}
.hero .grad{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.8;
  background:radial-gradient(55.8% 55.49% at 50% 40%, #264d4c 0%, rgba(25,48,47,0) 100%)}
.hero canvas{position:absolute; inset:0; z-index:1; -webkit-mask-image:radial-gradient(130% 110% at 50% 40%, #000 50%, transparent 100%); mask-image:radial-gradient(130% 110% at 50% 40%, #000 50%, transparent 100%)}
.hero .grain{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.44; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero .wrap{position:relative; z-index:3; display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; padding-top:84px; padding-bottom:92px}
@media (max-width:880px){.hero .wrap{grid-template-columns:1fr; gap:36px; padding-top:52px; padding-bottom:60px}}
.hero h1{font-size:52px; line-height:1.04; margin:22px 0 0; color:var(--text)}
.ai-badge{display:inline-flex; align-items:center; gap:.26em; vertical-align:middle; font-size:.66em; line-height:1; padding:.12em .42em .14em .34em; border-radius:.34em; background:oklch(76.5% .177 163.223 / .13); border:1px solid oklch(76.5% .177 163.223 / .3); color:var(--green); font-weight:600; transform:translateY(-.05em)}
.ai-badge svg{width:1em; height:1em}
@media (max-width:880px){.hero h1{font-size:39px}}
.sub{color:var(--muted); font-size:16.5px; line-height:1.62; margin:22px 0 0; max-width:32em}
.cta-row{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap}
.trust{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; color:var(--faint); font-size:13px; font-weight:500}
.trust b{color:var(--muted); font-weight:600} .trust .sep{color:oklch(100% 0 0 / .1)}

/* hero panel — override shared panel for homepage hero */
.hero .panel{background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden}
.hero .panel-bar{padding:13px 16px}
.hero .panel-bar .file{margin-left:10px; font-size:12.5px}
.hero .tl{width:10px; height:10px}
.hero pre{padding:20px; font-size:12px; line-height:1.78}

/* ── Clients strip ───────────────────────────────────────────── */
.clients{border-bottom:1px solid var(--border)}
.clients .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 28px; flex-wrap:nowrap; overflow:hidden}
.clients .cap{font-size:12px; color:var(--faint); font-weight:600; text-transform:uppercase; letter-spacing:.14em; white-space:nowrap}
.client{display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:600; font-size:14px; font-family:"Instrument Sans",sans-serif; white-space:nowrap}
.client img{width:17px; height:17px; border-radius:4px}
.more{color:var(--faint); font-weight:500; font-size:13.5px; font-family:"Instrument Sans",sans-serif; white-space:nowrap}
@media (max-width:900px){.clients .wrap{flex-wrap:wrap; justify-content:flex-start; overflow:visible; gap:14px 20px}}

/* ── Compare / problem section ───────────────────────────────── */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:30px}
@media (max-width:760px){.compare{grid-template-columns:1fr}}
.col{border:1px solid var(--border); border-radius:14px; padding:22px; background:var(--surface)}
.col.geode{border-color:oklch(76.5% .177 163.223 / .25); background:oklch(76.5% .177 163.223 / .04)}
.col h3{margin:0 0 12px; font-size:14px; font-family:"Instrument Sans",sans-serif; font-weight:600; color:var(--text)}
.col ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px}
.col li{font-size:14px; color:var(--muted); display:flex; gap:10px; align-items:flex-start; padding:2px 0}
.col li .mk{flex:none; width:18px; height:18px; border-radius:5px; display:grid; place-items:center; font-size:12px; font-weight:700; line-height:1; margin-top:1px}
.mk.x{background:oklch(60% .13 25 / .15); color:oklch(74% .14 25)}
.mk.c{background:oklch(76.5% .177 163.223 / .15); color:var(--green)}

/* ── How it works — 3D flow ──────────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.flow{perspective:1500px; margin-top:46px}
.flow-row{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; transform:rotateX(13deg); transform-style:preserve-3d}
@media (max-width:820px){.flow-row{transform:none; grid-template-columns:1fr; gap:16px}}
.p3{position:relative; background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--border-strong); border-radius:16px; padding:22px; box-shadow:0 36px 60px -34px rgba(0,0,0,.85); transition:transform .35s var(--ease)}
.p3:hover{transform:translateZ(40px)}
.p3 .n{width:30px; height:30px; border-radius:999px; display:grid; place-items:center; font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:13px; color:var(--green); background:oklch(76.5% .177 163.223 / .12); border:1px solid oklch(76.5% .177 163.223 / .3)}
.p3 h3{margin:15px 0 5px; font-size:16px; font-family:"Instrument Sans",sans-serif; font-weight:600}
.p3 p{margin:0 0 16px; font-size:13.5px; color:var(--muted); line-height:1.5}
.mini{border:1px solid var(--border); border-radius:11px; background:var(--surface); padding:13px 14px; font-family:"Geist Mono",monospace; font-size:11.5px; color:var(--muted); margin-top:auto; line-height:1.7}
.mini .row{display:flex; align-items:center; gap:8px; padding:4px 0}
.mini .row .gd{width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); flex:none}
.mini .st{margin-left:auto; color:var(--faint)}
.mini .add{color:var(--green)}
.mini .k{color:var(--emerald-500)} .mini .b{color:oklch(70.7% .165 254.624)}
.keychip{display:inline-flex; align-items:center; gap:8px; color:var(--muted)}

/* ── Why Geode — pillars ─────────────────────────────────────── */
.pillars{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:34px}
@media (max-width:760px){.pillars{grid-template-columns:1fr}}
.pillar{border:1px solid var(--border); border-radius:14px; padding:24px; background:var(--surface)}
.pillar .ic{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:var(--green); background:oklch(76.5% .177 163.223 / .1); border:1px solid oklch(76.5% .177 163.223 / .2)}
.pillar h3{margin:14px 0 6px; font-size:16px; font-family:"Instrument Sans",sans-serif; font-weight:600}
.pillar p{margin:0; font-size:14px; color:var(--muted); line-height:1.55}

/* ── Browse / catalog section ────────────────────────────────── */
.head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* homepage server card extras */
.cC .body{padding:15px 16px}
.cC .chips{display:flex; gap:7px; margin-top:12px; flex-wrap:wrap}
.cC .bar .dotsm{width:6px; height:6px; border-radius:50%; background:var(--green); display:inline-block; vertical-align:middle; box-shadow:0 0 7px var(--green)}
.dotsm{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;vertical-align:middle; box-shadow:0 0 7px var(--green)}

/* homepage chip variant */
.chip.live .dotsm,.cC .bar .dotsm{flex:none}
.cats{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.cat-pill{border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:8px 14px; font-size:13px; color:var(--muted); font-weight:500}
.cat-pill:hover{color:var(--text); border-color:var(--border-strong)}
.cat-pill.on{color:var(--text); border-color:var(--green); background:oklch(76.5% .177 163.223 / .08)}

/* ── Pricing ─────────────────────────────────────────────────── */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px}
@media (max-width:760px){.plans{grid-template-columns:1fr}}
.plan{border:1px solid var(--border); border-radius:16px; padding:26px; background:var(--surface); display:flex; flex-direction:column}
.plan.feat{border-color:oklch(62.3% .214 259.815 / .5); background:oklch(54.6% .245 262.881 / .05)}
.plan .pn{font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:15px}
.plan .pr{font-family:"Instrument Sans",sans-serif; font-weight:700; font-size:34px; margin:10px 0 2px; letter-spacing:-.02em}
.plan .pr span{font-size:14px; color:var(--faint); font-weight:500}
.plan ul{list-style:none; margin:16px 0 22px; padding:0; display:flex; flex-direction:column; gap:9px}
.plan li{font-size:13.5px; color:var(--muted); display:flex; gap:9px} .plan li .m{color:var(--green)}
.plan .btn,.plan .ghost{width:100%; margin-top:auto}
.ann{text-align:center; color:var(--faint); font-size:13px; margin-top:16px}

/* ── Band / CTA strip ────────────────────────────────────────── */
.band{border:1px solid var(--border); border-radius:18px; background:var(--surface); padding:30px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.band h3{margin:0; font-size:20px; font-family:"Instrument Sans",sans-serif; font-weight:600}
.band p{margin:6px 0 0; color:var(--muted); font-size:14.5px; max-width:40em}

/* ── Closing CTA ─────────────────────────────────────────────── */
.closing{text-align:center; padding:90px 0}
.closing h2{margin:0 auto; max-width:16em}
.closing .cta-row{justify-content:center}

/* ── Homepage footer ─────────────────────────────────────────── */
footer .wrap{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px; padding:54px 28px}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr 1fr}}
footer .ft-tag{color:var(--muted); font-size:13.5px; margin-top:12px; max-width:24em; line-height:1.55}
footer .col-t{font-size:13px; font-weight:600; font-family:"Instrument Sans",sans-serif; margin-bottom:12px}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
footer li a{color:var(--muted); font-size:13.5px} footer li a:hover{color:var(--text)}
.ft-bottom{border-top:1px solid var(--border)} .ft-bottom .wrap{display:flex; justify-content:space-between; padding:18px 28px; color:var(--faint); font-size:12.5px}
svg.mk{flex:none}

/* ================================================================
   LISTING-ONLY SECTIONS
   ================================================================ */

/* ── Title block (.top) ──────────────────────────────────────── */
.top{position:relative; border-bottom:1px solid var(--border); overflow:hidden}
.top .grad{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.8; background:radial-gradient(55% 80% at 20% -10%, #264d4c 0%, rgba(25,48,47,0) 70%)}
.top canvas{position:absolute; inset:0; z-index:1; -webkit-mask-image:radial-gradient(130% 120% at 28% 0%, #000 46%, transparent 100%); mask-image:radial-gradient(130% 120% at 28% 0%, #000 46%, transparent 100%)}
.top .grain{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.44; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.top .wrap{position:relative; z-index:3; padding-top:34px; padding-bottom:42px}
.crumb{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--faint)}
.crumb a:hover{color:var(--muted)} .crumb .sep{opacity:.5}
.title-row{display:flex; gap:18px; align-items:center; margin-top:20px}
.big-tile{flex:none; width:60px; height:60px; border-radius:15px; display:grid; place-items:center; background:oklch(100% 0 0 / .04); border:1px solid var(--border); overflow:hidden}
.big-tile img{width:36px; height:36px}
.top h1{font-size:30px; margin:0; font-family:"Instrument Sans",sans-serif; font-weight:600; letter-spacing:-.02em}
.top h1 .sub{color:var(--muted); font-weight:500; font-size:18px}
.chips{display:flex; gap:8px; margin-top:9px; flex-wrap:wrap}
.summary{color:var(--muted); margin:18px 0 0; max-width:54ch; font-size:15.5px; line-height:1.6}
.actions{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap}

/* ── Sub nav ─────────────────────────────────────────────────── */
.subnav{position:sticky; top:64px; z-index:30; background:oklch(15% .006 165 / .82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--border)}
.subnav .wrap{display:flex; gap:24px; overflow-x:auto}
.subnav a{padding:13px 0; font-size:13.5px; font-weight:500; color:var(--muted); border-bottom:2px solid transparent; font-family:"Instrument Sans",sans-serif; white-space:nowrap}
.subnav a.on{color:var(--text); border-color:var(--green)} .subnav a:hover{color:var(--text)}

/* ── Main content grid ───────────────────────────────────────── */
.grid2{display:grid; grid-template-columns:1fr 320px; gap:40px; padding-top:36px}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}
section.blk{margin-bottom:44px; scroll-margin-top:128px}
.blk h2{font-size:20px; font-family:"Instrument Sans",sans-serif; font-weight:600; margin:0 0 4px}
.blk .sublede{color:var(--muted); font-size:14px; margin:0 0 18px}
.body-text{color:var(--muted); line-height:1.7; font-size:15px}
.caps{list-style:none; padding:0; margin:14px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:8px}
@media (max-width:560px){.caps{grid-template-columns:1fr}}
.caps li{display:flex; gap:9px; font-size:14px; color:var(--muted)} .caps li svg{color:var(--green); flex:none; margin-top:2px}

/* ── Tools list ──────────────────────────────────────────────── */
.tool{display:flex; gap:13px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--border)}
.tool:first-child{border-top:none}
.tool .tn{font-family:"Geist Mono",monospace; font-size:13px; color:var(--emerald-300); flex:none; width:188px}
@media (max-width:560px){.tool{flex-direction:column; gap:3px} .tool .tn{width:auto}}
.tool .td{font-size:13.5px; color:var(--muted); line-height:1.5}

/* ── Setup steps ─────────────────────────────────────────────── */
.step{display:flex; gap:14px; margin-bottom:32px}
.step .sn{flex:none; width:28px; height:28px; border-radius:999px; display:grid; place-items:center; font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:13px; color:var(--green); background:oklch(76.5% .177 163.223 / .1); border:1px solid oklch(76.5% .177 163.223 / .25)}
.step h3{margin:3px 0 4px; font-size:15px; font-family:"Instrument Sans",sans-serif; font-weight:600}
.step p{margin:0 0 12px; color:var(--muted); font-size:14px; line-height:1.55}
.step .grow{flex:1; min-width:0}
.needs{border:1px solid var(--border); border-radius:12px; background:var(--surface); padding:16px 18px; margin-bottom:28px}
.needs .t{font-size:13px; font-weight:600; font-family:"Instrument Sans",sans-serif; margin-bottom:10px}
.needs li{display:flex; gap:9px; font-size:13.5px; color:var(--muted); padding:3px 0} .needs li b{color:var(--text); font-weight:600}

/* ── Form elements ───────────────────────────────────────────── */
.form-mini{border:1px solid var(--border); border-radius:12px; background:var(--surface); padding:16px}
.field{margin-bottom:11px}
.flabel{font-size:12.5px; color:var(--muted); margin-bottom:6px; display:block; font-weight:500}
.input{width:100%; background:var(--input); border:1px solid var(--border-strong); border-radius:8px; padding:9px 12px; color:var(--text); font-size:13.5px; font-family:inherit}
.input::placeholder{color:var(--faint)}
.hint{font-size:12px; color:var(--faint); margin:10px 0 0; display:flex; gap:7px; align-items:center}

/* copy button on panels */
.copy{position:absolute; right:10px; top:9px; font-size:11.5px; color:var(--muted); background:oklch(100% 0 0 / .06); border:1px solid var(--border); border-radius:6px; padding:4px 9px; cursor:pointer; font-family:"Instrument Sans",sans-serif}
.copy:hover{color:var(--text)}

/* advanced details block */
details.adv{margin-top:8px; border:1px solid var(--border); border-radius:12px; background:var(--surface); padding:0}
details.adv summary{cursor:pointer; padding:14px 16px; font-size:13.5px; color:var(--muted); font-family:"Instrument Sans",sans-serif; font-weight:500; list-style:none}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary:hover{color:var(--text)}
details.adv .panel{border:none; border-top:1px solid var(--border); border-radius:0}

/* ── Feedback form ───────────────────────────────────────────── */
form.fb{max-width:520px}
.fb .row{display:flex; gap:10px; margin-bottom:10px}
.fb select{background:var(--input); border:1px solid var(--border-strong); border-radius:8px; padding:9px 12px; color:var(--text); font-size:13.5px; font-family:inherit}
textarea.input{resize:vertical; min-height:84px}

/* ── Sidebar ─────────────────────────────────────────────────── */
aside .card{border:1px solid var(--border); border-radius:14px; background:var(--surface); padding:18px; margin-bottom:14px; position:sticky; top:124px}
aside .card + .card{position:static}
.card .ct{font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:15px}
.card p.note{color:var(--muted); font-size:13px; margin:6px 0 0; line-height:1.5} .card p.note b{color:var(--text)}
.card .btn,.card .ghost{width:100%; margin-top:14px}
dl{margin:0} .drow{display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid var(--border); font-size:13.5px}
.drow:first-child{border-top:none} .drow dt{color:var(--muted)} .drow dd{margin:0; color:var(--text); text-align:right}
.drow dd a{color:var(--green)}

/* ── Listing page footer (minimal) ──────────────────────────── */
footer .wrap.listing-footer{display:flex; justify-content:space-between; padding:26px 28px; color:var(--faint); font-size:12.5px; flex-wrap:wrap; gap:10px; grid-template-columns:none}

/* ── Connect dialog / modal ──────────────────────────────────── */
dialog{border:1px solid var(--border-strong); border-radius:16px; background:var(--surface); color:var(--text); padding:0; max-width:440px; width:92%}
dialog::backdrop{background:oklch(0% 0 0 / .6); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
.modal{padding:24px}
.modal h3{margin:0; font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:18px}
.modal p{color:var(--muted); font-size:14px; margin:8px 0 0; line-height:1.55}
.modal .actions{justify-content:flex-end; margin-top:18px}

/* ── Related cards section (listing .cC .bd) ─────────────────── */
.cC .bd{padding:15px 16px}

/* ── Secondary page helpers ─────────────────────────────────── */
.wrap-sm{max-width:560px; margin:0 auto; padding:0 28px}
.ptitle{font-family:"Instrument Sans",sans-serif; font-weight:600; letter-spacing:-.02em; font-size:30px; color:var(--text); margin:0}
.psub{color:var(--muted); font-size:16px; margin:8px 0 0}
.notice{border:1px solid oklch(76.5% .177 163.223 / .25); background:oklch(76.5% .177 163.223 / .06); color:var(--emerald-300); border-radius:10px; padding:12px 14px; font-size:14px}
.errorbox{border:1px solid oklch(60% .13 25 / .35); background:oklch(60% .13 25 / .08); color:oklch(74% .14 25); border-radius:10px; padding:12px 14px; font-size:14px}
label.fl{display:block; font-size:13px; color:var(--muted); font-weight:500; margin-bottom:6px}
select.input{appearance:none}
.tbl{width:100%; border:1px solid var(--border); border-radius:12px; border-collapse:separate; border-spacing:0; overflow:hidden; font-size:13.5px}
.tbl th{text-align:left; padding:10px 14px; color:var(--faint); font-weight:600; background:var(--surface)}
.tbl td{padding:10px 14px; border-top:1px solid var(--border); color:var(--muted)}
.tbl tr:first-child td{border-top:1px solid var(--border)}
.doc{color:var(--muted); line-height:1.75; font-size:15.5px; max-width:46em}
.doc h2{color:var(--text); font-family:"Instrument Sans",sans-serif; font-weight:600; letter-spacing:-.02em; font-size:22px; margin:2rem 0 .6rem}
.doc h3{color:var(--text); font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:17px; margin:1.4rem 0 .4rem}
.doc p{margin:.75rem 0}
.doc ul{list-style:disc; padding-left:1.2rem; margin:.75rem 0}
.doc li{margin:.35rem 0}
.doc a{color:var(--green); text-decoration:underline}
.doc b{color:var(--text)}
.doc code{font-family:"Geist Mono",monospace; font-size:.85em; background:var(--surface); border:1px solid var(--border); color:var(--emerald-300); padding:.1em .4em; border-radius:5px}
.doc pre{background:var(--surface); border:1px solid var(--border); color:oklch(82% 0 0); padding:16px 18px; border-radius:10px; overflow-x:auto; font-family:"Geist Mono",monospace; font-size:12.5px; line-height:1.7; margin:1rem 0}
.doc pre code{background:none; border:none; color:inherit; padding:0}

/* Dashboard */
.dgrid{display:grid; grid-template-columns:1.55fr 1fr; gap:24px; align-items:start; margin-top:22px}
@media (max-width:760px){.dgrid{grid-template-columns:1fr}}
.dcol{border:1px solid var(--border); border-radius:16px; background:var(--surface); padding:22px}
.dside{position:sticky; top:84px}
.dcol-hd{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.conn-row{display:flex; align-items:center; gap:11px; padding:13px 0; border-top:1px solid var(--border)}
.conn-row:first-of-type{border-top:none}
.dsec{padding:16px 0; border-top:1px solid var(--border)}
.dsec:first-child{padding-top:0; border-top:none}
.ti{width:32px; height:32px; border-radius:9px; background:oklch(100% 0 0 / .05); border:1px solid var(--border); display:grid; place-items:center; font-family:"Geist Mono"; color:var(--muted); font-size:13px; flex:none}
.kkey{font-family:"Geist Mono"; font-size:11px; color:oklch(82% 0 0); word-break:break-all}
.linkbtn{background:none; border:none; color:var(--green); font-size:12px; font-family:"Instrument Sans"; font-weight:500; cursor:pointer; padding:0}
.dialog{border:none; padding:0; background:transparent; max-width:480px; width:92%}
.dialog::backdrop{background:oklch(0% 0 0 / .55)}
.dcard{background:oklch(17% .006 165); border:1px solid var(--border-strong); border-radius:16px; overflow:hidden}
.dcard .hd{display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--border)}
.dcard .bd{padding:18px}
.picker{display:flex; align-items:center; gap:11px; padding:10px 12px; border:1px solid var(--border); border-radius:11px; background:var(--surface); margin-bottom:8px; cursor:pointer; width:100%; text-align:left; color:var(--text)}
.picker.on{border-color:var(--green); background:oklch(76.5% .177 163.223 / .06)}
.fieldset{display:none}
.fieldset.on{display:block}