/* ============================================================
   home-closing.css  —  FUI homepage closing editorial zone
   Scope: body.magazine-home ONLY. Loaded on / only.
   Styles .ai-rescue / .ai-rescue-faqs which
   were injected without any CSS and rendered full-bleed.
   No content, schema, links or tracking touched.
   ============================================================ */

/* .position-push base styling lives in closing-zone.css (site-wide).
   This file aligns the whole homepage closing zone onto ONE editorial
   grid: a sticky title rail on the left, content column on the right.
   The guide, key-facts card and FAQ all share the same vertical axis. */

/* ---------- shared closing grid ---------- */
html body.magazine-home section.ai-rescue:is(.ai-rescue),
html body.magazine-home section.ai-rescue-faqs:is(.ai-rescue-faqs){
  display:grid!important;
  grid-template-columns:minmax(260px,.85fr) minmax(0,1.5fr)!important;
  column-gap:clamp(48px,5.5vw,140px)!important;
  align-items:start!important;
  max-width:1680px!important;
  width:auto!important;
  margin-inline:auto!important;
  padding-inline:var(--gut)!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  text-align:start!important;
}

/* ---------- 1. KEY FACTS — sits in the content column ---------- */
html body.magazine-home section.ai-rescue:is(.ai-rescue){
  margin-block:clamp(44px,4.5vw,72px) 0!important;
}
html body.magazine-home .ai-rescue > *{
  grid-column:2;
  justify-self:start!important;
  width:100%!important;
}

html body.magazine-home .ai-rescue .ai-rescue-answer{
  text-align:start!important;
  margin-inline:0!important;
  max-width:60ch!important;
  padding-top:clamp(30px,3vw,46px);
  border-top:1px solid var(--ink-10);
}

html body.magazine-home .ai-rescue .ai-rescue-tldr{
  background:transparent!important;
  max-width:none!important;
  margin-inline:0!important;
  text-align:start!important;
  margin-top:clamp(26px,2.6vw,38px);
  padding:0!important;
}
html body.magazine-home .ai-rescue .ai-rescue-tldr > strong{
  display:block;
  font-family:var(--fb);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--bronze-d);
  margin-bottom:clamp(14px,1.4vw,20px);
  text-align:start!important;
}
html body.magazine-home .ai-rescue .ai-rescue-tldr ul{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0 clamp(24px,2.5vw,48px);
  max-width:none;
  margin:0;
  padding:0;
  text-align:start!important;
}
html body.magazine-home .ai-rescue .ai-rescue-tldr li{
  font-family:var(--fb);
  font-size:.88rem;
  line-height:1.6;
  color:var(--ink-70);
  padding:.8rem 0 .8rem 1.5rem;
  border-bottom:1px solid var(--ink-10);
  position:relative;
  text-align:start!important;
}
html body.magazine-home .ai-rescue .ai-rescue-tldr li::before{
  content:'';
  position:absolute;
  inset-inline-start:0;
  top:calc(.8rem + .8em);
  width:9px;
  height:1px;
  background:var(--bronze);
}

/* ---------- 2. QUICK ANSWERS — title rail + accordion ---------- */
html body.magazine-home section.ai-rescue-faqs:is(.ai-rescue-faqs){
  margin-block:clamp(52px,5.5vw,88px) clamp(56px,6vw,96px)!important;
}
html body.magazine-home .ai-rescue-faqs > h2{
  grid-column:1;
  grid-row:1/-1;
  position:sticky;
  top:clamp(90px,10vh,140px);
  align-self:start;
  font-family:var(--fd)!important;
  font-weight:400!important;
  font-size:clamp(26px,2.5vw,44px)!important;
  line-height:1.08!important;
  letter-spacing:-.02em!important;
  color:var(--ink)!important;
  margin:0!important;
  text-align:start!important;
}
html body.magazine-home .ai-rescue-faqs > h2::after{
  content:'';
  display:block;
  width:48px;
  height:1px;
  background:var(--bronze);
  margin-top:clamp(20px,2vw,30px);
}
html body.magazine-home .ai-rescue-faqs > details{grid-column:2}

html body.magazine-home details.ai-rescue-faq{
  text-align:start!important;
  background:transparent!important;
  border:0!important;
  border-top:1px solid var(--ink-10)!important;
  border-radius:0!important;
  box-shadow:none!important;
  margin:0!important;
  padding:0!important;
}
html body.magazine-home details.ai-rescue-faq:last-of-type{
  border-bottom:1px solid var(--ink-10)!important;
}
html body.magazine-home details.ai-rescue-faq summary{
  text-align:start!important;
  list-style:none;
  cursor:pointer;
  position:relative;
  display:block;
  padding:22px 48px 22px 0;
  font-family:var(--fb)!important;
  font-size:1rem!important;
  font-weight:500!important;
  letter-spacing:0!important;
  line-height:1.5;
  color:var(--ink);
  transition:color .25s var(--ease);
}
html body.magazine-home details.ai-rescue-faq summary::-webkit-details-marker{display:none}
html body.magazine-home details.ai-rescue-faq summary:hover{color:var(--bronze-d)}
html body.magazine-home details.ai-rescue-faq summary::after{
  content:'+';
  position:absolute;
  inset-inline-end:4px;
  top:50%;
  transform:translateY(-50%);
  margin-left:0!important;
  font-family:var(--fb);
  font-size:20px;
  font-weight:300;
  line-height:1;
  color:var(--bronze);
}
html body.magazine-home details.ai-rescue-faq[open] summary::after{content:'\2013'}
html body.magazine-home details.ai-rescue-faq > div{
  text-align:start!important;
  padding:0 48px 26px 0!important;
  background:transparent!important;
  border:0!important;
}
html body.magazine-home details.ai-rescue-faq > div span{
  display:block;
  text-align:start!important;
  margin-inline:0!important;
  max-width:64ch;
  font-family:var(--fb);
  font-size:.94rem;
  line-height:1.8;
  color:var(--ink-70);
}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  html body.magazine-home section.ai-rescue:is(.ai-rescue),
  html body.magazine-home section.ai-rescue-faqs:is(.ai-rescue-faqs){display:block!important}
  html body.magazine-home .ai-rescue-faqs > h2{position:static;margin-bottom:clamp(24px,3vw,36px)!important}
  html body.magazine-home .ai-rescue .ai-rescue-tldr ul{grid-template-columns:1fr}
}
@media(max-width:768px){
  html body.magazine-home details.ai-rescue-faq summary{padding:18px 38px 18px 0;font-size:.95rem!important}
  html body.magazine-home details.ai-rescue-faq > div{padding:0 0 22px!important}
}