/* ================================================================
   HOMEPAGE — serif/lavender system, as delivered.
   Scoped to body.home so the rest of the site is untouched until each
   page type is redesigned. The :root block is renamed to .home for the
   same reason: its tokens would otherwise override the whole site.
   ================================================================ */
body.home{
  --bg:#f5f1e8; --bg-2:#eee7dc; --surface:#fffcf6; --surface-2:#f3ede3; --surface-3:#e9e2d7;
  --ink:#0d0d10; --muted:#6e6a73; --line:rgba(37, 27, 60, .12);
  --purple:#9f62ff; --purple-2:#ca8cff; --violet:#7d54d6; --teal:#23b39e; --crimson:#e36a76;
  --dark-card:#111117; --dark-card-2:#18151f;
  --radius:24px; --max:1220px;
  --shadow:0 22px 50px rgba(18, 11, 30, .10); --shadow-2:0 34px 90px rgba(18, 11, 30, .16);
}
html[data-theme="dark"] body.home{
  --bg:#08070d; --bg-2:#0e0b17; --surface:#111117; --surface-2:#171621; --surface-3:#1d1a2a;
  --ink:#f5f1ff; --muted:#aaa3b8; --line:rgba(219, 203, 255, .11);
  --purple:#af73ff; --purple-2:#d8a4ff; --violet:#9c7cff; --teal:#3cc0ad; --crimson:#ed7683;
  --dark-card:#0d0c13; --dark-card-2:#141220;
  --shadow:0 22px 50px rgba(0, 0, 0, .32); --shadow-2:0 34px 90px rgba(0, 0, 0, .48);
}
body.home{box-sizing:border-box}
body.home{scroll-behavior:smooth}
body.home{margin:0;color:var(--ink);background:radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--purple) 12%, transparent), transparent 24%),radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--purple) 18%, transparent), transparent 30%),radial-gradient(circle at 90% 38%, color-mix(in srgb, var(--teal) 10%, transparent), transparent 22%),linear-gradient(180deg,var(--bg),var(--bg-2) 45%,var(--bg));font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.45;-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden}
body.home:before, body.home:after{content:"";position:fixed;pointer-events:none;z-index:0;opacity:.6}
body.home:before{width:500px;height:500px;border:1px solid color-mix(in srgb,var(--purple) 25%, transparent);border-radius:42px;top:110px;right:-150px;transform:rotate(17deg)}
body.home:after{width:560px;height:560px;border:1px solid color-mix(in srgb,var(--purple) 12%, transparent);border-radius:44px;top:330px;left:-180px;transform:rotate(-14deg)}
body.home a{color:inherit;text-decoration:none}
body.home button, body.home input{font:inherit}
body.home img{display:block;max-width:100%}
body.home .container{width:min(var(--max),calc(100% - 40px));margin:auto;position:relative;z-index:2}
body.home .kicker{font:800 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
body.home .eyebrow{display:inline-flex;gap:8px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface) 82%, transparent);font:800 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);backdrop-filter:blur(8px)}
body.home .dot{width:6px;height:6px;border-radius:50%;background:var(--purple);box-shadow:0 0 0 5px color-mix(in srgb,var(--purple) 15%, transparent)}
body.home .nav-wrap{position:sticky;top:0;z-index:50;border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent);backdrop-filter:blur(20px);background:color-mix(in srgb,var(--bg) 76%,transparent)}
body.home .nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
body.home .brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.04em;font-size:22px}
body.home .logo-tile{width:36px;height:36px;border-radius:10px;overflow:hidden;background:#050505;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
body.home .logo-tile img{width:100%;height:100%;object-fit:cover}
body.home .navlinks{display:flex;gap:28px;align-items:center;font-size:14px;font-weight:650;color:var(--muted)}
body.home .navlinks a:hover{color:var(--ink)}
body.home .nav-actions{display:flex;gap:10px;align-items:center}
body.home .icon-btn{width:42px;height:42px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 80%,transparent);color:var(--ink);border-radius:12px;display:grid;place-items:center;cursor:pointer}
body.home .primary-btn, body.home .secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:14px;padding:14px 18px;font-weight:800;font-size:14px;transition:.22s ease}
body.home .primary-btn{background:var(--ink);color:var(--bg);border:1px solid var(--ink)}
body.home .secondary-btn{border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--ink)}
body.home .primary-btn:hover, body.home .secondary-btn:hover, body.home .icon-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
body.home .mobile-menu-btn{display:none}
body.home main section{border-bottom:1px solid var(--line);position:relative}
body.home main section:before{content:"";position:absolute;inset:18px 18px auto;bottom:18px;border:1px solid color-mix(in srgb,var(--purple) 10%, transparent);border-radius:30px;pointer-events:none;opacity:.45}
body.home .hero{padding:78px 0 70px;overflow:hidden}
body.home .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
body.home .hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(52px,6.5vw,96px);line-height:.92;letter-spacing:-.065em;margin:22px 0 24px;max-width:760px;font-weight:500}
body.home .hero h1 .accent{color:var(--violet)}
body.home .hero-copy{font-size:18px;line-height:1.62;color:var(--muted);max-width:620px}
body.home .hero-actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
body.home .hero-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px;color:var(--muted);font:750 11px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.08em}
body.home .hero-meta span{display:flex;align-items:center;gap:7px}
body.home .hero-meta i{width:4px;height:4px;background:var(--purple);border-radius:50%}
body.home .hero-visual{position:relative;min-height:650px;display:grid;place-items:center}
body.home .outline-card{position:absolute;border:1px solid color-mix(in srgb,var(--purple) 18%, transparent);border-radius:34px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 25%, transparent),transparent);backdrop-filter:blur(6px)}
body.home .outline-a{width:78%;height:66%;top:11%;right:7%;transform:rotate(7deg)}
body.home .outline-b{width:72%;height:72%;bottom:7%;left:2%;transform:rotate(-8deg)}
body.home .bundle-scene{position:relative;width:min(100%,530px);height:590px;display:grid;place-items:center;perspective:1400px}
body.home .bundle-glow{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--purple) 34%, transparent),transparent 68%);filter:blur(30px);top:102px;left:54px}
body.home .bundle-box{position:relative;width:360px;height:500px;transform-style:preserve-3d;transform:rotateY(-20deg) rotateX(4deg);filter:drop-shadow(0 30px 60px rgba(10,8,16,.38))}
body.home .bundle-front, body.home .bundle-side, body.home .bundle-top{position:absolute;overflow:hidden}
body.home .bundle-front{inset:0;border-radius:26px;background:radial-gradient(circle at 76% 68%, rgba(171,115,255,.34), transparent 28%),linear-gradient(180deg,var(--dark-card),var(--dark-card-2));border:1px solid rgba(255,255,255,.12);padding:26px 26px 22px;color:#fff}
body.home .bundle-front:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 22%,transparent 65%,rgba(255,255,255,.04));pointer-events:none}
body.home .bundle-side{width:64px;height:500px;left:-64px;top:0;border-radius:20px 0 0 20px;background:linear-gradient(180deg,#0b0b11,#171622);transform-origin:right center;transform:rotateY(90deg);border:1px solid rgba(255,255,255,.08);padding:22px 8px;color:#fff}
body.home .bundle-top{width:360px;height:64px;left:0;top:-64px;border-radius:20px 20px 0 0;background:linear-gradient(180deg,#1a1524,#0f0d16);transform-origin:bottom center;transform:rotateX(90deg);border:1px solid rgba(255,255,255,.08)}
body.home .bundle-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px}
body.home .bundle-logo .tile{width:32px;height:32px;border-radius:10px;overflow:hidden;background:#000}
body.home .bundle-logo .tile img{width:100%;height:100%;object-fit:cover}
body.home .bundle-kicker{margin-top:18px;font:800 12px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;color:var(--purple-2);text-transform:uppercase}
body.home .bundle-front h3{font-size:52px;line-height:.94;letter-spacing:-.06em;margin:16px 0 12px;max-width:270px}
body.home .bundle-front h3 span{color:var(--purple-2)}
body.home .bundle-front p{font-size:17px;color:rgba(255,255,255,.76);margin:0 0 22px;max-width:270px}
body.home .bundle-mini{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0 18px}
body.home .bundle-mini figure{margin:0;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
body.home .bundle-mini img{width:100%;height:120px;object-fit:cover}
body.home .bundle-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid rgba(255,255,255,.12)}
body.home .bundle-stats div{text-align:center}
body.home .bundle-stats strong{display:block;font-size:14px;letter-spacing:.08em}
body.home .bundle-stats span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.62);margin-top:4px}
body.home .spine-text{writing-mode:vertical-rl;transform:rotate(180deg);font-size:18px;font-weight:700;letter-spacing:-.02em;height:100%;display:flex;justify-content:space-between;align-items:center;padding:10px 0}
body.home .spine-text b{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--purple-2)}
body.home .bundle-pill{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:11px 14px;border-radius:999px;background:rgba(12,10,18,.86);color:#ddd5ef;border:1px solid rgba(255,255,255,.10);font:800 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(8px)}
body.home .bundle-pill.top{right:-8px;top:8px}
body.home .bundle-pill.bottom{left:-18px;bottom:8px}
body.home .bundle-note{position:absolute;left:-24px;bottom:88px;padding:18px 20px;border-radius:24px;background:rgba(18,16,24,.88);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(10px);color:#fff;box-shadow:0 14px 40px rgba(5,4,10,.36)}
body.home .bundle-note strong{display:block;font-size:44px;line-height:1;letter-spacing:-.05em}
body.home .bundle-note span{display:block;margin-top:6px;font-size:14px;color:rgba(255,255,255,.72)}
body.home .principles{padding:92px 0}
body.home .section-head{display:flex;justify-content:space-between;gap:28px;align-items:end;margin-bottom:38px}
body.home .section-head h2{font-size:clamp(36px,5vw,68px);line-height:.95;letter-spacing:-.055em;margin:10px 0 0;max-width:760px}
body.home .section-head p{max-width:430px;color:var(--muted);margin:0}
body.home .principle-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}
body.home .principle{
  position:relative;
  padding:26px;
  border:1px solid var(--line);
  border-radius:26px;
  background:
    radial-gradient(circle at 88% 10%, color-mix(in srgb,var(--purple) 11%, transparent), transparent 24%),
    linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,transparent),color-mix(in srgb,var(--surface-2) 76%,transparent));
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:500px;
}
body.home .principle:after{
  content:"";
  position:absolute;
  inset:auto -60px -80px auto;
  width:220px;
  height:220px;
  border:1px solid color-mix(in srgb,var(--purple) 13%,transparent);
  border-radius:42px;
  transform:rotate(18deg);
  pointer-events:none;
}
body.home .principle .n{
  position:relative;
  z-index:1;
  font:800 11px ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--violet);
  letter-spacing:.14em;
  text-transform:uppercase;
}
body.home .principle h3{
  position:relative;
  z-index:1;
  font-size:30px;
  line-height:1.04;
  letter-spacing:-.045em;
  margin:20px 0 12px;
  max-width:300px;
}
body.home .principle p{
  position:relative;
  z-index:1;
  color:var(--muted);
  margin:0;
  font-size:15px;
  line-height:1.55;
  max-width:95%;
}
body.home .principle-graphic{
  position:relative;
  z-index:1;
  margin-top:28px;
  border:1px solid var(--line);
  border-radius:20px;
  background:
    radial-gradient(circle at 86% 12%, color-mix(in srgb,var(--purple) 16%,transparent),transparent 32%),
    color-mix(in srgb,var(--surface) 90%,transparent);
  overflow:hidden;
  min-height:176px;
}
body.home .graphic-kicker{
  padding:14px 16px 0;
  font:800 9px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
body.home .principle-outcome{
  position:relative;
  z-index:1;
  margin-top:auto;
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
}
body.home .principle-outcome strong{
  color:var(--ink);
  font-size:12px;
  letter-spacing:.02em;
}
body.home /* Complete systems visual */
body.home .system-map{
  position:relative;
  padding:22px 18px 18px;
}
body.home .system-line{
  position:absolute;
  left:36px;
  right:36px;
  top:62px;
  height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--purple) 25%,transparent),var(--purple),color-mix(in srgb,var(--purple) 25%,transparent));
}
body.home .system-nodes{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
body.home .system-node{
  text-align:center;
  display:grid;
  justify-items:center;
  gap:8px;
}
body.home .node-dot{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--purple) 35%,var(--line));
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--purple) 7%,transparent);
  color:var(--violet);
  font:800 10px ui-monospace,SFMono-Regular,Menlo,monospace;
}
body.home .system-node strong{
  font-size:12px;
  line-height:1.2;
  letter-spacing:-.02em;
}
body.home .system-node span{
  color:var(--muted);
  font-size:10px;
  line-height:1.3;
}
body.home /* Actually built visual */
body.home .asset-stack{
  position:relative;
  height:138px;
  margin:14px 16px 18px;
}
body.home .asset-card{
  position:absolute;
  width:76%;
  left:12%;
  height:82px;
  border:1px solid var(--line);
  border-radius:15px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:0 12px 28px rgba(13,9,24,.08);
  padding:13px 14px;
  display:grid;
  grid-template-columns:36px 1fr;
  gap:10px;
  align-items:center;
}
body.home .asset-card:nth-child(1){top:0;transform:translateX(-18px) rotate(-3deg);opacity:.72}
body.home .asset-card:nth-child(2){top:24px;transform:translateX(10px) rotate(2deg);opacity:.88}
body.home .asset-card:nth-child(3){top:50px;z-index:3}
body.home .asset-icon{
  width:36px;height:36px;border-radius:12px;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--purple) 11%,transparent);
  color:var(--violet);
  font-size:16px;font-weight:900;
}
body.home .asset-copy b{
  display:block;
  color:var(--violet);
  font:800 9px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:3px;
}
body.home .asset-copy strong{
  display:block;
  font-size:13px;
  letter-spacing:-.02em;
}
body.home .asset-copy span{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:10px;
}
body.home /* Evidence visual */
body.home .evidence-bars{
  padding:14px 16px 18px;
  display:grid;
  gap:10px;
}
body.home .evidence-bar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb,var(--surface) 93%,transparent);
}
body.home .evidence-dot{
  width:10px;height:10px;border-radius:50%;
}
body.home .evidence-copy b{
  display:block;
  font:800 9px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:2px;
}
body.home .evidence-copy span{
  display:block;
  color:var(--muted);
  font-size:10px;
  line-height:1.35;
}
body.home .evidence-state{
  padding:5px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
@media (max-width:1080px){
  body.home .principle-grid{grid-template-columns:1fr}
body.home .principle{min-height:auto}
body.home .principle h3{max-width:none}
body.home .principle p{max-width:760px}
}
@media (max-width:760px){
  body.home .principles{padding:72px 0}
body.home .principle{padding:22px;border-radius:22px;min-height:auto}
body.home .principle h3{font-size:27px}
body.home .principle-graphic{min-height:160px}
body.home .system-nodes{grid-template-columns:repeat(2,1fr)}
body.home .system-line{display:none}
body.home .system-map{padding-top:18px}
body.home .asset-stack{height:158px}
body.home .asset-card{width:86%;left:7%}
body.home .evidence-bar{grid-template-columns:auto 1fr}
body.home .evidence-state{grid-column:2;justify-self:start}
}
body.home .library{
padding:96px 0;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 44%, transparent), color-mix(in srgb,var(--surface-2) 28%, transparent))}
body.home .library-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:28px 0 34px}
body.home .search{position:relative;flex:1;min-width:240px}
body.home .search input{width:100%;padding:14px 44px 14px 15px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface) 92%, transparent);color:var(--ink);outline:none}
body.home .search input:focus{border-color:var(--purple)}
body.home .search .sicon{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
body.home .chip{border:1px solid var(--line);border-radius:999px;padding:10px 14px;background:color-mix(in srgb,var(--surface) 80%, transparent);color:var(--muted);font-weight:750;font-size:12px;cursor:pointer}
body.home .chip.active, body.home .chip:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
body.home .kit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
body.home .kit-card{display:grid;grid-template-columns:minmax(240px,290px) 1fr;border:1px solid var(--line);border-radius:26px;overflow:hidden;background:color-mix(in srgb,var(--surface) 92%, transparent);box-shadow:var(--shadow);transition:.25s ease;min-height:340px;align-items:stretch}
body.home .kit-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:color-mix(in srgb,var(--purple) 32%, var(--line))}
body.home .kit-thumb{position:relative;min-height:100%;background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 85%,transparent), color-mix(in srgb,var(--surface-3) 85%,transparent));display:grid;place-items:center;padding:26px 24px;overflow:hidden}
body.home .kit-thumb:before{content:"";position:absolute;inset:18px;border:1px solid color-mix(in srgb,var(--purple) 13%, transparent);border-radius:22px;transform:rotate(-3deg)}
body.home .kit-thumb img{position:relative;width:min(100%,220px);aspect-ratio:4 / 5.25;height:auto;object-fit:cover;object-position:top center;border-radius:22px;box-shadow:0 18px 34px rgba(20,11,30,.16)}
body.home .kit-badge{position:absolute;left:28px;top:26px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.88);font:800 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.11em;text-transform:uppercase;color:#4f4561;border:1px solid rgba(40,20,65,.08)}
body.home .kit-info{padding:28px;display:flex;flex-direction:column}
body.home .kit-cat{display:flex;justify-content:space-between;color:var(--muted);font:800 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
body.home .kit-info h3{font-size:32px;line-height:1.02;letter-spacing:-.05em;margin:24px 0 12px}
body.home .kit-info p{font-size:14px;color:var(--muted);margin:0;line-height:1.55}
body.home .kit-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
body.home .kit-tags span{border:1px solid var(--line);border-radius:999px;padding:6px 8px;font-size:10px;font-weight:700;color:var(--muted)}
body.home .kit-bottom{margin-top:auto;display:flex;align-items:end;justify-content:space-between;gap:14px}
body.home .price{font-size:28px;font-weight:900;letter-spacing:-.04em}
body.home .subprice{display:block;color:var(--muted);font-size:12px;font-weight:700;margin-top:6px}
body.home .view-link{font-size:12px;font-weight:850;border-bottom:1px solid var(--ink);padding-bottom:3px}
body.home .anatomy{
  padding:96px 0 104px;
}
body.home .inside-panel{
  position:relative;
  padding:34px;
  border:1px solid var(--line);
  border-radius:30px;
  background:
    radial-gradient(circle at 86% 12%, color-mix(in srgb,var(--purple) 12%, transparent), transparent 25%),
    linear-gradient(180deg,color-mix(in srgb,var(--surface) 94%, transparent), color-mix(in srgb,var(--surface-2) 72%, transparent));
  box-shadow:var(--shadow);
  overflow:hidden;
}
body.home .inside-panel:before{
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid color-mix(in srgb,var(--purple) 10%, transparent);
  border-radius:24px;
  pointer-events:none;
}
body.home .inside-top{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:26px;
  align-items:start;
}
body.home .inside-copy h2{
  font-size:clamp(34px,4.6vw,72px);
  line-height:.94;
  letter-spacing:-.06em;
  margin:12px 0 18px;
  max-width:760px;
}
body.home .inside-copy p{
  font-size:16px;
  color:var(--muted);
  line-height:1.56;
  max-width:680px;
  margin:0;
}
body.home .metric-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
body.home .metric{
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:color-mix(in srgb,var(--surface) 84%, transparent);
}
body.home .metric strong{
  display:block;
  font-size:30px;
  line-height:1;
  letter-spacing:-.05em;
}
body.home .metric span{
  display:block;
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}
body.home .inside-layout{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:20px;
  margin-top:28px;
  align-items:stretch;
}
body.home .inside-steps{padding:0;border:none;border-radius:0;background:transparent}
body.home .steps-title, body.home .graphic-title{
  font:800 10px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:18px;
}
body.home .steps-title{padding-left:2px}
body.home .steps-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px;align-items:stretch}
body.home .inside-step{position:relative;padding:26px 24px 22px;border:1px solid var(--line);border-radius:26px;background:color-mix(in srgb,var(--surface) 90%, transparent);min-height:0;aspect-ratio:1 / 1;box-shadow:0 16px 34px rgba(14,10,25,.06);display:flex;flex-direction:column;justify-content:flex-start}
body.home .inside-step:not(:last-child):after{content:none}
body.home .inside-step b{display:inline-flex;width:52px;height:52px;border-radius:999px;align-items:center;justify-content:center;background:color-mix(in srgb,var(--purple) 14%, transparent);color:var(--violet);font:800 15px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;margin-bottom:22px;flex:0 0 auto}
body.home .inside-step h4{margin:0 0 14px;font-size:28px;line-height:1.02;letter-spacing:-.04em}
body.home .inside-step p{margin:0;font-size:14px;color:var(--muted);line-height:1.65;max-width:22ch}
body.home .flow-arrow{position:absolute;width:42px;height:42px;border-radius:999px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--violet);font-size:20px;font-weight:900;box-shadow:0 12px 26px rgba(13,9,24,.08);z-index:3;transform:translate(-50%,-50%)}
body.home .flow-arrow.a12{left:50%;top:25%}
body.home .flow-arrow.a13{left:25%;top:50%}
body.home .flow-arrow.a24{left:75%;top:50%}
body.home .flow-arrow.a34{left:50%;top:75%}
body.home .inside-graphic{
  padding:20px;
  border:1px solid var(--line);
  border-radius:24px;
  background:
    radial-gradient(circle at 84% 14%, color-mix(in srgb,var(--purple) 16%, transparent), transparent 28%),
    linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%, transparent), transparent);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
}
body.home .blueprint{
  display:grid;
  gap:14px;
}
body.home .blueprint-tier{
  border:1px solid var(--line);
  border-radius:20px;
  padding:16px;
  background:color-mix(in srgb,var(--surface) 84%, transparent);
}
body.home .blueprint-label{
  display:inline-flex;
  padding:6px 9px;
  border-radius:999px;
  background:color-mix(in srgb,var(--purple) 12%, transparent);
  color:var(--violet);
  font:800 10px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:12px;
}
body.home .blueprint-row{
  display:grid;
  gap:10px;
}
body.home .blueprint-row.cols-3{
  grid-template-columns:repeat(3,1fr);
}
body.home .blueprint-row.cols-2{
  grid-template-columns:repeat(2,1fr);
}
body.home .bp-card{
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:color-mix(in srgb,var(--surface) 88%, transparent);
}
body.home .bp-card strong{
  display:block;
  font-size:14px;
  line-height:1.2;
  letter-spacing:-.02em;
}
body.home .bp-card span{
  display:block;
  margin-top:5px;
  font-size:11px;
  line-height:1.45;
  color:var(--muted);
}
body.home .inside-note{
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:color-mix(in srgb,var(--surface) 84%, transparent);
}
body.home .inside-note strong{
  display:block;
  font-size:14px;
  letter-spacing:-.02em;
  margin-bottom:5px;
}
body.home .inside-note p{
  margin:0;
  font-size:12px;
  color:var(--muted);
  line-height:1.55;
}
body.home .footer{
padding:32px 0 46px}
body.home .footer-grid{display:flex;justify-content:space-between;gap:20px;align-items:center}
body.home .footer p{color:var(--muted);max-width:520px;margin:10px 0 0}
body.home .footer-links{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:14px}
body.home .reveal{opacity:0;transform:translateY(18px);transition:.6s ease}
body.home .reveal.visible{opacity:1;transform:none}
@media (max-width:1080px){body.home .hero-grid, body.home .kit-card, body.home .inside-top, body.home .inside-layout{grid-template-columns:1fr}
body.home .hero-visual{min-height:560px}
body.home .kit-thumb{min-height:340px;padding:26px 24px 18px}
body.home .kit-thumb img{width:min(100%,260px);aspect-ratio:4 / 5.25}
body.home .kit-grid{grid-template-columns:1fr}
body.home .principle-grid{grid-template-columns:1fr}
body.home .metric-row{grid-template-columns:repeat(2,1fr)}
body.home .steps-grid{grid-template-columns:repeat(2,1fr);gap:18px 22px}
body.home .inside-step{aspect-ratio:auto;min-height:240px}
body.home .flow-arrow{display:none}
body.home .bundle-scene{height:540px}}
@media (max-width:760px){body.home .container{width:min(var(--max),calc(100% - 24px))}
body.home .nav{height:70px}
body.home .navlinks{display:none}
body.home .mobile-menu-btn{display:grid}
body.home .hero{padding:52px 0}
body.home .hero h1{font-size:clamp(44px,14vw,68px)}
body.home .hero-copy{font-size:16px}
body.home .hero-actions{flex-direction:column}
body.home .hero-actions a{width:100%}
body.home .hero-visual{min-height:430px;margin-top:8px}
body.home .bundle-scene{width:100%;height:400px;overflow:visible}
body.home .bundle-glow{width:280px;height:280px;top:70px;left:50%;transform:translateX(-50%)}
body.home .bundle-box{width:250px;height:340px}
body.home .bundle-front{padding:18px 18px 14px;border-radius:20px}
body.home .bundle-side{width:44px;height:340px;left:-44px;padding:12px 6px}
body.home .bundle-top{width:250px;height:44px;top:-44px}
body.home .bundle-front h3{font-size:34px;max-width:180px}
body.home .bundle-front p{font-size:13px;max-width:175px;margin-bottom:12px}
body.home .bundle-mini{gap:6px;margin:8px 0 12px}
body.home .bundle-mini img{height:74px}
body.home .bundle-stats strong{font-size:11px}
body.home .bundle-stats span{font-size:8px}
body.home .spine-text{font-size:13px}
body.home .bundle-note{left:-2px;bottom:-10px;padding:12px 14px;border-radius:18px}
body.home .bundle-note strong{font-size:28px}
body.home .bundle-note span{font-size:12px}
body.home .bundle-pill{display:none}
body.home main section:before{inset:10px 10px auto;bottom:10px;border-radius:22px}
body.home .section-head{display:block}
body.home .section-head p{max-width:none;margin-top:16px}
body.home .principles, body.home .library, body.home .anatomy{padding:72px 0}
body.home .metric-row, body.home .shelf, body.home .steps-grid, body.home .blueprint-row.cols-3, body.home .blueprint-row.cols-2{grid-template-columns:1fr}
body.home .inside-panel{padding:22px}
body.home .inside-copy h2{font-size:clamp(30px,12vw,52px)}
body.home .inside-step{min-height:auto}
body.home .inside-step:not(:last-child):after{display:none}
body.home .kit-thumb{min-height:292px;padding:20px 18px 14px}
body.home .kit-thumb:before{inset:14px;border-radius:18px}
body.home .kit-thumb img{width:min(100%,210px);aspect-ratio:4 / 5.25;border-radius:18px}
body.home .kit-info{padding:22px}
body.home .kit-info h3{font-size:26px;margin:18px 0 10px}
body.home .kit-bottom{align-items:flex-start;flex-direction:column}
body.home .footer-grid{display:block}
body.home .footer-links{margin-top:18px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none !important;animation:none !important}}
body.home /* hero image replacement */
body.home .hero-visual{
  position:relative;
  min-height:650px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}
body.home .hero-books-wrap{
  position:relative;
  z-index:2;
  width:min(860px, 110%);
  display:flex;
  align-items:center;
  justify-content:center;
}
body.home .hero-books-image{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  filter: drop-shadow(0 28px 56px rgba(13, 9, 22, .26));
}
body.home .hero .outline-a{
  width:80%;
  height:68%;
  top:10%;
  right:4%;
}
body.home .hero .outline-b{
  width:76%;
  height:72%;
  bottom:6%;
  left:0;
}
@media (max-width:1080px){
  body.home .hero-visual{min-height:540px}
body.home .hero-books-wrap{width:min(760px, 100%)}
}
@media (max-width:760px){
  body.home .hero-visual{min-height:350px;margin-top:10px}
body.home .hero-books-wrap{width:100%}
body.home .hero-books-image{max-width:100%}
}
@media (max-width:1080px){
  body.home .inside-top, body.home .inside-layout{grid-template-columns:1fr}
body.home .metric-row{grid-template-columns:repeat(2,1fr)}
body.home .steps-grid{grid-template-columns:repeat(2,1fr);gap:18px 22px}
body.home .inside-step{aspect-ratio:auto;min-height:240px}
body.home .flow-arrow{display:none}
}
@media (max-width:760px){
  body.home .anatomy{padding:72px 0}
body.home .inside-panel{padding:22px;border-radius:24px}
body.home .inside-panel:before{inset:10px;border-radius:18px}
body.home .inside-copy h2{font-size:clamp(34px,12vw,52px)}
body.home .metric-row{grid-template-columns:repeat(2,1fr);gap:10px}
body.home .metric{padding:16px}
body.home .metric strong{font-size:26px}
body.home .inside-layout{gap:16px;margin-top:20px}
body.home .inside-steps, body.home .inside-graphic{padding:16px;border-radius:20px}
body.home .steps-grid{grid-template-columns:1fr;gap:14px}
body.home .inside-step{aspect-ratio:auto;min-height:auto}
body.home .flow-arrow{display:none}
body.home .inside-step{min-height:auto}
body.home .inside-step:not(:last-child):after{display:none}
body.home .blueprint-row.cols-3, body.home .blueprint-row.cols-2{grid-template-columns:1fr}
}

/* Skip link. The homepage does not load site.css, so it needs its own. */
body.home .skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:#141020;color:#fff;padding:12px 18px;border-radius:10px;
  font-size:14px;text-decoration:none;
}
body.home .skip:focus{left:12px;top:12px}

/* Hero render. It ships on a lit dark studio background rather than cut out,
   so it is framed as a panel: on the light theme a bare dark rectangle would
   read as a pasted block, and cutting it out would lose the rim light and the
   floor reflection that make it work. */
body.home .hero-books-image{
  max-width:100%;
  border-radius:20px;
  display:block;
  box-shadow:0 34px 80px rgba(18,11,30,.30), 0 2px 0 rgba(255,255,255,.05) inset;
}
html[data-theme="dark"] body.home .hero-books-image{
  box-shadow:0 34px 80px rgba(0,0,0,.55);
  border:1px solid rgba(190,160,255,.10);
}
/* Keep the framed render inside its column. The original asset was a
   transparent cutout and was allowed to bleed past the edge; a panel with
   rounded corners cannot, or the right corner is cut off by the viewport. */
body.home .hero-visual{min-height:0;overflow:visible}
body.home .hero-books-wrap{width:min(100%,720px);margin-inline:auto}
@media (max-width:760px){
  /* the original mobile rules sized a cutout, not a framed panel */
  /* the hero grid stays two-column below 760, which squeezed the visual to
     ~147px. Force the stack. */
  body.home .hero-grid{grid-template-columns:1fr !important;display:grid}
  body.home .hero-visual{min-height:0;margin-top:22px;width:100%}
  body.home .hero-books-wrap{width:100%}
  body.home .hero-books-image{width:100%;height:auto;border-radius:14px}
}

@media (max-width:420px){
  /* At 360 the logo, theme toggle, "Explore kits" and the menu button do not
     fit on one row and push the page sideways. The menu button already jumps
     to the library, so the duplicate CTA is the one to drop. */
  body.home .nav-actions .primary-btn{display:none}
  body.home .kit-grid{grid-template-columns:1fr}
  body.home .kit-card{grid-template-columns:1fr}
}

@media (max-width:360px){
  /* 320px (iPhone SE and older Androids). The hero buttons and the kit search
     carry fixed padding that exceeds the viewport at this width. */
  body.home .container{width:calc(100% - 20px)}
  body.home .hero-actions a{padding-left:16px;padding-right:16px;font-size:14px}
  body.home .search{width:100%;min-width:0}
  body.home .search input{width:100%;min-width:0}
  body.home .library-toolbar{gap:8px}
}

/* Kit thumbnails ship as two crops. The desktop one rendered as a small square
   on phones because the card keeps a fixed thumb width; the mobile crop plus a
   wider box fixes it. From the v2 package. */
body.home .kit-thumb{padding:26px 22px}
body.home .kit-thumb picture{position:relative;display:block;width:min(100%,238px)}
body.home .kit-thumb img{
  display:block;position:relative;width:100%;height:auto;
  object-fit:contain;object-position:center;border-radius:22px;
  box-shadow:0 18px 34px rgba(20,11,30,.18);aspect-ratio:auto;
}
@media (max-width:1080px){
  body.home .kit-thumb{min-height:300px;padding:22px 22px 14px}
  body.home .kit-thumb picture{width:min(100%,300px)}
}

body.home .footer-social{margin-top:14px}
body.home .social{display:flex;gap:10px;align-items:center}
body.home .social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;
  border:1px solid var(--line);color:var(--ink);
}
body.home .social a:hover{border-color:var(--purple);color:var(--purple)}