/* ============================================================
   Blend landing pages — one per god.
   Same furniture as the homepage; the only thing that varies is the
   accent, which is written once per page as a token override so a
   landing page can never be half one blend and half another.
   ============================================================ */
.landing{ background: var(--void); }

.lp-hero{ position:relative; padding-block: clamp(128px,17vh,210px) clamp(60px,9vh,110px); overflow:clip; }
.lp-wash{
  position:absolute; inset:-22% 0; z-index:0; pointer-events:none;
  background:
    radial-gradient(44% 46% at 74% 34%,
      color-mix(in oklab, var(--accent) 26%, transparent) 0%,
      color-mix(in oklab, var(--accent) 7%, transparent) 46%, transparent 74%),
    linear-gradient(180deg, var(--pitch) 0%, var(--void) 68%);
}
.lp-grid{
  position:relative; z-index:1; display:grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,.85fr);
  gap: clamp(28px,5vw,80px); align-items:center;
}
.lp-title{
  font-size: clamp(3.4rem, 8vw, 8rem); line-height:.96; letter-spacing:.028em; margin:0; color: var(--bone);
  text-transform:uppercase;
}
.lp-epithet{
  font-family:var(--display);
  font-size:1.16rem; font-weight:600; color: var(--accent);
  margin:14px 0 0; letter-spacing:-.008em;
}
.lp-formula{
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.18em;
  text-transform:uppercase; color: var(--bone);
  margin:28px 0 0; padding:13px 0 0; border-top:1px solid var(--gold-line);
  display:inline-block;
}
.lp-hero .hero-cta{ margin-top:36px; }

/* the two formats, shown together — this is the page that has to answer
   "how does it actually arrive" */
.lp-shot{ position:relative; display:flex; align-items:flex-end; justify-content:center;
  gap: clamp(10px,2vw,34px); height: clamp(300px, 52svh, 520px); }
.lp-vial{ width:auto; height:62%; filter: drop-shadow(0 24px 34px rgba(0,0,0,.78)); }
/* the pen photograph has a fixed green cartridge; tint it so the device
   belongs to the blend whose page this is */
.lp-pen-wrap{ position:relative; display:block; height:100%;
  transform: rotate(-6deg); transform-origin:50% 80%; }
.lp-pen-window{
  position:absolute; left:50%; top:35.2%; width:6.6%; height:5.6%;
  transform:translateX(-52%); border-radius:1px;
  background: var(--accent-lift); opacity:.85; mix-blend-mode:color;
}
.lp-pen{ width:auto; height:100%;
  filter: drop-shadow(16px 22px 26px rgba(0,0,0,.72))
          drop-shadow(-10px 0 24px color-mix(in oklab, var(--accent) 32%, transparent)); }

/* ---------- body ---------- */
.lp-body{ background: var(--void); padding-block: clamp(64px,9vh,120px); }
.lp-cols{ display:grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.1fr);
  gap: clamp(28px,5vw,80px); align-items:start; }
.lp-who{ margin-top:22px; }
.lp-who li{ padding:16px 0; }
.lp-specs{ margin-top:32px; }

/* ---------- siblings ---------- */
.lp-siblings{ background: var(--pitch); padding-block: clamp(60px,8vh,104px); }
.sib-row{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap: clamp(8px,1.4vw,20px); margin-top:30px; }
.sib{
  display:block; text-align:center; padding:22px 10px 20px; border-radius:4px;
  border:1px solid var(--slate-lift); background: linear-gradient(180deg, var(--slate), var(--pitch));
  transition: border-color .45s var(--ease-out), transform .5s var(--ease-soft);
}
.sib img{ width:56%; height:auto; margin:0 auto 14px;
  filter: drop-shadow(0 14px 20px rgba(0,0,0,.7)); }
.sib b{ display:block; font-family:var(--display);
  font-size:1rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--bone); }
.sib span{ display:block; font-family:var(--mono); font-size:var(--t-nano); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); margin-top:6px; }
@media (hover:hover) and (pointer:fine){
  .sib:hover{ border-color: color-mix(in oklab, var(--g) 50%, var(--slate-lift)); transform: translateY(-3px); }
}

@media (max-width:900px){
  .lp-grid, .lp-cols{ grid-template-columns:1fr; gap:34px; }
  .lp-shot{ order:-1; height: clamp(230px,32svh,320px); }
  .sib-row{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:620px){
  .sib-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lp-title{ font-size: clamp(2.55rem, 13.5vw, 4.4rem); }
}