/* ============================================================================
   PHOENIX LABS · experiment division · layer over the vapor design system
   Identity: the vapor paper becomes a laboratory notebook. A faint graph-paper
   grid under everything, specimen tags (EXP-###), the experimental promise
   riding the same floating pill as the home page, and a dark lab-log band.
   ========================================================================== */

/* ---- lab notebook ground: faint graph grid over the paper ---- */
body.labs::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(25, 20, 17, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 20, 17, 0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.12) 70%, transparent 100%);
          mask-image: linear-gradient(115deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.12) 70%, transparent 100%);
}
body.labs > * { position: relative; z-index: 1; }
/* the flattening rule above must not defeat the floating pill: it needs its
   sticky position and its place above the hero, exactly like the home page */
body.labs > .promo-pill { position: sticky; z-index: 60; }

/* labs nav has plain links, no mega-menus: restore the wide link rhythm the
   sn__item layer collapses to 4px on the main site */
.labs .nav__links { gap: 20px; }
.labs .nav__links a { white-space: nowrap; }

/* ---- nav wordmark: Phoenix lockup + dotted LABS tag ---- */
.labs-mark { display: inline-flex; align-items: center; gap: 11px; }
.labs-mark .labs-tag { font-size: 13px; font-weight: 800; letter-spacing: 0.34em; color: var(--maroon);
  border: 1.5px dotted var(--maroon); border-radius: 999px; padding: 5px 13px 5px 16px; text-transform: uppercase; }
.nav__links .nav-back { color: var(--ink3); font-weight: 500; font-size: 14px; }
.nav__links .nav-back b { color: var(--maroon); }

/* marquee: orbs and text share one baseline */
.labs .marquee__track { align-items: center; }

/* ---- hero ---- */
.labs-hero { padding: 108px 0 92px; }
.labs-hero .lede { max-width: 680px; }
.labs-hero .hero__trust { margin-top: 56px; }

/* ---- specimen tag ---- */
.exp-id { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; color: var(--ink3);
  border: 1px dotted #c9beb4; border-radius: 8px; padding: 4px 10px; font-variant-numeric: tabular-nums; }

/* ---- experiments: home-page pricing clone, labs accents only ---- */
#pricing .segments .exp-dot { width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 30%, #ff7847, var(--red) 62%, var(--red-deep)); }
#pricing .seg-status { display: inline-flex; align-items: center; gap: 8px; margin-left: 14px;
  font-size: 12px; font-weight: 600; color: var(--ink3); }

/* the honesty line every experiment card carries */
.exp-honest { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px;
  border-top: 1px dotted var(--line-soft); font-size: 11.5px; font-weight: 300; color: var(--ink3); line-height: 1.5; }
.exp-honest svg { flex: none; width: 13px; height: 13px; color: var(--maroon); }
.exp-honest a { color: var(--maroon); font-weight: 600; }


/* ---- lab showcase: animated experiment vial ---- */
.lab-showcase{display:grid;grid-template-columns:0.82fr 1fr;gap:56px;align-items:center;margin-top:60px}
@media(max-width:900px){.lab-showcase{grid-template-columns:1fr;gap:24px;max-width:520px;margin:40px auto 0}}
.lab-vial{position:relative;display:flex;align-items:center;justify-content:center;min-height:470px}
.lab-vial .vial-ring{position:absolute;width:320px;height:320px;top:50%;left:50%;transform:translate(-50%,-52%)}
.lab-vial .vial-halo{position:absolute;top:50%;left:50%;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,67,31,.16),rgba(242,163,60,.07) 45%,transparent 70%);
  filter:blur(6px);z-index:0;animation:vhalo 6s ease-in-out infinite;transform:translate(-50%,-46%)}
.lab-vial .vial{position:relative;z-index:1;width:min(300px,84%);height:auto;overflow:visible;
  filter:drop-shadow(0 26px 42px rgba(157,64,62,.20))}

/* rising orb bubbles */
.vbub{opacity:0;transform-box:fill-box;transform-origin:center;animation:vbub 5s ease-in infinite}
@keyframes vbub{0%{transform:translateY(6px) scale(.5);opacity:0}14%{opacity:.9}80%{opacity:.7}
  100%{transform:translateY(-108px) scale(1.05);opacity:0}}
/* interior vapor blobs drift exactly like the page's vapor fields */
.vblob{transform-box:fill-box;transform-origin:center;animation:vblob 13s ease-in-out infinite alternate}
.vblob.b2{animation-duration:17s;animation-delay:-6s}
@keyframes vblob{0%{transform:translate(0,0) scale(1)}100%{transform:translate(16px,-12px) scale(1.1)}}
/* the birth orb at the surface */
.v-orb{transform-box:fill-box;transform-origin:center;animation:vorb 4.5s ease-in-out infinite}
@keyframes vorb{0%,100%{transform:translateY(0) scale(.88)}50%{transform:translateY(-4px) scale(1.1)}}
/* dotted vapor wisps */
.wisp{opacity:0}
.wisp.w1{animation:wisp 6s ease-in-out infinite}
.wisp.w2{animation:wisp 7s ease-in-out 1.2s infinite}
@keyframes wisp{0%{opacity:0;transform:translateY(6px)}30%{opacity:.55}100%{opacity:0;transform:translateY(-26px)}}
@keyframes vhalo{0%,100%{opacity:.6;transform:translate(-50%,-46%) scale(1)}50%{opacity:1;transform:translate(-50%,-46%) scale(1.06)}}
@media (prefers-reduced-motion: reduce){
  .vbub,.vblob,.v-orb,.wisp,.vial-halo{animation:none!important}
  .vbub{opacity:.5}.wisp{opacity:.3}
}

/* the three truths, editorial rows beside the vial */
.lab-truths{display:flex;flex-direction:column}
.lab-truth{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.lab-truth:last-child{border-bottom:0}
.lab-truth .lt-mark{width:34px;height:34px;border-radius:50%;border:1.5px dotted var(--maroon);
  display:flex;align-items:center;justify-content:center;flex:none;margin-top:3px}
.lab-truth .lt-mark .orb{width:12px;height:12px}
.lab-truth h4{font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin-bottom:5px}
.lab-truth p{font-size:14.5px;font-weight:300;color:var(--ink3);line-height:1.62}

/* ---- charter ---- */
.charter-card { padding: 46px 48px; }
.charter-big { font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; color: var(--ink); }
.charter-big .orb { width: 0.15em; height: 0.15em; margin-left: 0.06em; }
.charter-sub { font-size: 16.5px; font-weight: 300; color: var(--ink3); line-height: 1.65; margin-top: 16px; max-width: 660px; }
.charter-sub b { font-weight: 600; }
.promise { margin-top: 34px; padding-top: 30px; border-top: 2px dotted var(--line-soft); }
.promise .p-k { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--maroon); margin-bottom: 18px; }
.promise .p-k .orb { width: 9px; height: 9px; flex: none; }
.promise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 720px) { .promise-grid { grid-template-columns: 1fr; } }
.promise-cell { padding: 24px 28px; border: 1.5px dotted var(--red); border-radius: 18px;
  background: linear-gradient(140deg, rgba(232, 67, 31, 0.05), rgba(242, 163, 60, 0.08)); }
.promise-cell b { display: block; font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--red), #c2571e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.promise-cell span { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink2); margin-top: 6px; line-height: 1.55; }
.charter-list { list-style: none; margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 34px; }
@media (max-width: 720px) { .charter-list { grid-template-columns: 1fr; } }
.charter-list li { position: relative; padding: 2px 0 2px 26px; font-size: 14.5px; font-weight: 300; color: var(--ink2); line-height: 1.65; }
.charter-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ff7847, var(--red) 62%, var(--red-deep)); }
.charter-list li b { font-weight: 700; }

/* ---- faq ---- */
.labs-faq { max-width: 860px; }
.labs-faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.labs-faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 14px;
  font-size: 16.5px; font-weight: 600; color: var(--ink); padding: 16px 0; }
.labs-faq summary::-webkit-details-marker { display: none; }
.labs-faq summary::before { content: ""; width: 0; height: 0; flex: none;
  border-left: 7px solid var(--maroon); border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transition: transform 0.25s ease; }
.labs-faq details[open] summary::before { transform: rotate(90deg); }
.labs-faq details p { font-size: 14.5px; font-weight: 300; color: var(--ink3); line-height: 1.7; padding: 0 0 18px 21px; max-width: 720px; }
.labs-faq details p b { font-weight: 600; }

/* ---- notify / final ---- */
.notify-card { padding: 46px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .notify-card { grid-template-columns: 1fr; } }
.notify-card form { display: flex; gap: 10px; }
.notify-card input[type="email"] { flex: 1; font-family: var(--font); font-size: 15px; padding: 15px 20px;
  border: 1.5px solid var(--line-soft); border-radius: 999px; background: #fff; color: var(--ink); outline: none; min-width: 0; }
.notify-card input[type="email"]:focus { border-color: var(--amber); }
.notify-card .consent { font-size: 11.5px; color: var(--faint); font-weight: 300; line-height: 1.5; margin-top: 14px; }

/* labs footer is slim */
.labs-footer .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 720px) { .labs-footer .footer__grid { grid-template-columns: 1fr; } }