/* Experience landing pages. Reuses tokens + rail + btn + tag from styles.css. */

.xp-main{ }
.crumbs{
  max-width:var(--maxw); margin-inline:auto; padding:var(--space-md) var(--gutter) 0;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:var(--ink-faint);
  display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
}
.crumbs a{ color:var(--ink-muted); }
.crumbs a:hover{ color:var(--signal); }
.crumbs span[aria-current]{ color:var(--ink); }
.crumbs i{ color:var(--ink-faint); font-style:normal; }

.xp-hero{
  position:relative; overflow:hidden;
  padding-block:clamp(2.5rem,7vw,5rem);
  border-bottom:1px solid var(--hair);
}
.xp-hero__grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 10% 100%, var(--glow), transparent 55%),
    repeating-linear-gradient(0deg, var(--hair) 0 1px, transparent 1px var(--grid-cell)),
    repeating-linear-gradient(90deg, var(--hair) 0 1px, transparent 1px var(--grid-cell));
  -webkit-mask-image:radial-gradient(120% 100% at 30% 0%, #000 50%, transparent 100%);
  mask-image:radial-gradient(120% 100% at 30% 0%, #000 50%, transparent 100%);
}
.xp-hero__inner{ position:relative; z-index:1; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.xp-eyebrow{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--signal); margin-bottom:var(--space-sm); }
.xp-h1{
  font-family:var(--font-display); font-optical-sizing:auto; font-weight:540;
  font-size:clamp(2.1rem,1.5rem + 3.4vw,3.6rem); line-height:1.02; letter-spacing:-.02em;
  max-width:18ch; overflow-wrap:break-word; text-wrap:balance;
}
.xp-lede{ margin-top:var(--space-md); font-size:clamp(1.05rem,1rem + .5vw,1.2rem); color:var(--ink-muted); max-width:60ch; line-height:1.6; }
.xp-cta{ margin-top:var(--space-lg); display:flex; flex-wrap:wrap; gap:var(--space-sm); }

.xp-section{ max-width:var(--maxw); margin-inline:auto; padding:clamp(2.5rem,6vw,4rem) var(--gutter) 0; }
.xp-section:last-of-type{ padding-bottom:clamp(2.5rem,6vw,4rem); }
.xp-section__eyebrow{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:var(--space-sm); }
.xp-section__title{ font-family:var(--font-display); font-weight:540; font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem); line-height:1.1; letter-spacing:-.015em; max-width:22ch; }
.xp-cols{ display:grid; gap:clamp(1.5rem,4vw,3rem); grid-template-columns:1fr; margin-top:var(--space-lg); }
@media (min-width:820px){ .xp-cols--2{ grid-template-columns:1fr 1fr; } }

.xp-list{ display:grid; gap:.7rem; }
.xp-list li{ position:relative; padding-left:1.6rem; color:var(--ink); line-height:1.55; }
.xp-list li::before{ content:"▸"; position:absolute; left:0; top:0; color:var(--signal); }
.xp-list--muted li{ color:var(--ink-muted); }

.xp-prose{ color:var(--ink-muted); max-width:var(--maxw-prose); line-height:1.7; font-size:1.02rem; }
.xp-prose p{ margin-top:var(--space-sm); }
.xp-prose p:first-child{ margin-top:0; }
.xp-main .xp-list, .xp-main .tags, .xp-main .xp-prose{ margin-top:var(--space-md); }
.xp-updated{ color:var(--ink-faint); }
.xp-main .contact{ border-top:none; }

.xp-cred{
  margin-top:var(--space-lg); background:var(--signal-wash); border:1px solid var(--hair);
  border-left:3px solid var(--signal-deep); border-radius:var(--radius-sm); padding:var(--space-md);
  color:var(--ink); line-height:1.6;
}
.xp-cred .k{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--signal-deep); display:block; margin-bottom:.4rem; }

.xp-faq{ display:grid; gap:.6rem; margin-top:var(--space-lg); }
.xp-faq details{ background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius-md); padding:0 var(--space-md); }
.xp-faq summary{ cursor:pointer; padding:var(--space-sm) 0; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.xp-faq summary::-webkit-details-marker{ display:none; }
.xp-faq summary::after{ content:"+"; color:var(--signal); font-family:var(--font-mono); }
.xp-faq details[open] summary::after{ content:"\2212"; }
.xp-faq summary:focus-visible{ box-shadow:var(--ring-focus); border-radius:var(--radius-xs); }
.xp-faq p{ color:var(--ink-muted); padding:0 0 var(--space-md); line-height:1.6; margin:0; }

.xp-related{ display:grid; gap:var(--space-md); grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); margin-top:var(--space-lg); }
.xp-rel{ display:flex; flex-direction:column; gap:.4rem; height:100%; background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius-md); padding:var(--space-md) var(--space-md) calc(var(--space-md) - .2rem); transition:background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.xp-rel:hover{ background:var(--panel-2); border-color:var(--hair-strong); transform:translateY(-2px); }
.xp-rel__code{ display:block; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.07em; color:var(--signal); }
.xp-rel__name{ display:block; font-family:var(--font-display); font-weight:540; font-size:1.12rem; line-height:1.22; letter-spacing:-.01em; }
.xp-rel__outcome{ display:block; color:var(--ink-muted); font-size:.9rem; line-height:1.5; }
.xp-rel__go{ display:block; margin-top:auto; padding-top:.8rem; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; color:var(--ink-muted); }
.xp-rel:hover .xp-rel__go{ color:var(--signal); }

.xp-band{
  margin-top:clamp(2.5rem,6vw,4rem); background:var(--base-2); border-top:1px solid var(--hair);
}
.xp-band__inner{ max-width:var(--maxw); margin-inline:auto; padding:clamp(2.5rem,6vw,4rem) var(--gutter); display:grid; gap:var(--space-md); }
.xp-band__title{ font-family:var(--font-display); font-weight:540; font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem); letter-spacing:-.015em; max-width:20ch; }
.xp-band__body{ color:var(--ink-muted); max-width:54ch; line-height:1.6; }

/* Hub grid */
.xp-hub{ display:grid; gap:var(--space-md); grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); margin-top:var(--space-xl); }
.xp-hub .xp-rel__outcome{ font-size:.92rem; line-height:1.55; }