/* Guide pages - Luxe editorial layout (numbered chapters, sticky question,
   gradient-rule pullquote answer, why-band). Shared by all guide pages. */

.beam-soft{
  height:1px; width:100%;
  background:linear-gradient(90deg,transparent,rgba(167,139,250,.18) 30%,rgba(34,211,238,.18) 60%,rgba(236,72,153,.18) 85%,transparent);
}

section.dir{
  padding:110px 0;
  border-top:1px solid rgba(42,38,64,.75);
}
section.dir.dir-first{border-top:0; padding-top:72px}
.dir-grid{
  display:grid; grid-template-columns:1fr 1.45fr;
  gap:96px; align-items:start;
}
.dir-h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(28px,3vw,42px);
  line-height:1.12; letter-spacing:-.022em;
  color:var(--ink);
  position:sticky; top:96px;
}
.dir-h2 .num{
  display:block; font-family:var(--display); font-weight:500;
  font-size:.78rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:18px;
}

.pullquote{
  position:relative; padding:8px 0 8px 28px;
  border-left:2px solid transparent;
  border-image:var(--grad-3) 1 100%;
  border-image-slice:1;
  font-family:var(--display); font-weight:300;
  font-size:26px; line-height:1.45; letter-spacing:-.012em;
  color:var(--ink);
  max-width:760px;
}
.pullquote .lead-eyebrow{
  display:block; font-family:var(--display); font-weight:600;
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px;
}
.pullquote .answer-body{
  display:block; font-family:'Roboto',system-ui,sans-serif; font-weight:400;
  font-size:17.5px; line-height:1.75; color:var(--muted-strong);
  margin-top:20px; letter-spacing:0;
}
.pullquote .answer-body a{
  color:var(--cyan); border-bottom:1px solid rgba(34,211,238,.35);
  transition:border-color .2s;
}
.pullquote .answer-body a:hover{border-color:var(--cyan)}
.pullquote ul.qa-steps{
  list-style:none; padding:0; margin:24px 0 0;
  display:grid; gap:14px;
}
.pullquote ul.qa-steps li{
  font-family:'Roboto',system-ui,sans-serif; font-weight:400;
  font-size:17px; line-height:1.65; color:var(--muted-strong);
  padding-left:34px; position:relative;
}
.pullquote ul.qa-steps li b{color:var(--ink); font-weight:600}
.pullquote ul.qa-steps li .qn{
  position:absolute; left:0; top:2px;
  font-family:var(--display); font-weight:700;
  font-size:.72rem; letter-spacing:.18em; color:var(--cyan);
  min-width:24px;
}

.why-band{
  padding:96px 0;
  border-top:1px solid rgba(42,38,64,.75);
  background:
    radial-gradient(600px 300px at 80% 20%, rgba(236,72,153,.06), transparent 70%),
    radial-gradient(800px 320px at 12% 80%, rgba(167,139,250,.08), transparent 70%);
}
.why-inner{
  display:grid; grid-template-columns:280px 1fr; gap:96px; align-items:start;
}
.why-label{
  font-family:var(--display); font-weight:600;
  font-size:.75rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--magenta);
}
.why-body{
  font-family:var(--display); font-weight:300;
  font-size:26px; line-height:1.5; letter-spacing:-.012em;
  color:var(--ink); max-width:780px;
}
.why-body strong{
  font-weight:600;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

@media (max-width:900px){
  section.dir{padding:72px 0}
  section.dir.dir-first{padding-top:56px}
  .dir-grid{grid-template-columns:1fr; gap:36px}
  .dir-h2{position:static}
  .why-inner{grid-template-columns:1fr; gap:24px}
  .why-body{font-size:22px}
  .pullquote{font-size:22px}
}
@media (max-width:480px){
  .pullquote{font-size:20px; padding-left:20px}
  .why-body{font-size:20px}
  section.dir{padding:56px 0}
}