/* Shared styles for /suite/*/ offer detail pages.
   Tokens come from each page :root — white / slate / gold. */

.crumb{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin:0 0 18px;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--accent)}
.crumb .sep{opacity:.45}

.hero-offer{padding:56px 0 48px; position:relative; overflow:hidden}
.hero-offer::before{
  content:""; position:absolute; right:-160px; top:-200px;
  width:480px; height:480px; border-radius:50%;
  background:var(--accent-soft); pointer-events:none;
}
.hero-offer .wrap{position:relative; z-index:1}
.hero-offer .group{
  font-family:var(--font-mono); font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
  margin:0 0 10px;
}
.hero-offer h1{margin-bottom:16px}
.hero-offer .lede{font-size:1.12rem; max-width:54ch}
.hero-offer .lede b{color:var(--ink)}

.prose{display:flex; flex-direction:column; gap:18px; max-width:62ch}
.prose p{color:var(--muted); font-size:1.02rem; text-wrap:pretty}
.prose p b,.prose li b{color:var(--ink); font-weight:600}
.prose ul,.prose ol{
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:12px;
}
.prose li{
  position:relative; padding-left:22px; color:var(--muted); font-size:.98rem;
}
.prose li::before{
  content:""; position:absolute; left:2px; top:10px;
  width:7px; height:7px; border-radius:50%; background:var(--accent);
}
.prose ol{counter-reset:step}
.prose ol li{padding-left:36px}
.prose ol li::before{
  content:counter(step); counter-increment:step;
  width:auto; height:auto; border-radius:0; background:transparent;
  font-family:var(--font-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.06em; color:var(--accent); top:2px; left:0;
}

.panel{
  background:var(--surface); border:1px solid var(--hair);
  border-radius:8px; padding:22px 24px; margin-top:8px;
}
.panel .pk{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 8px;
}
.panel h3{font-size:1.1rem; font-weight:640; margin:0 0 10px}
.panel p{color:var(--muted); font-size:.95rem; margin:0}

.split{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:8px}
@media (max-width:720px){.split{grid-template-columns:1fr}}

.flow-frame{
  background:var(--surface); border:1px solid var(--hair);
  border-radius:8px; overflow:hidden; margin-top:10px;
}
.flow-frame iframe{
  display:block; width:100%; height:min(720px, 92vh);
  border:0; background:#0b1220;
}
.flow-cap{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em;
  color:var(--muted); padding:12px 16px; border-top:1px solid var(--hair);
  margin:0;
}
.flow-cap a{color:var(--accent)}

.related{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px}
@media (max-width:640px){.related{grid-template-columns:1fr}}
.rel{
  display:block; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--hair);
  border-radius:8px; padding:20px 22px;
  transition:border-color .15s ease, transform .15s ease;
}
.rel:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--hair)); transform:translateY(-1px)}
.rel .rk{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin:0 0 6px;
}
.rel h3{font-size:1.02rem; font-weight:640; margin:0 0 6px; color:var(--ink)}
.rel p{margin:0; color:var(--muted); font-size:.9rem}

.offer-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:10px}
@media (max-width:720px){.offer-grid{grid-template-columns:1fr}}
.offer-card{
  display:flex; flex-direction:column; gap:10px;
  background:var(--surface); border:1px solid var(--hair);
  border-radius:8px; padding:22px 24px; text-decoration:none; color:inherit;
  transition:border-color .15s ease, transform .15s ease;
}
.offer-card:hover{
  border-color:color-mix(in srgb,var(--accent) 42%,var(--hair));
  transform:translateY(-1px);
}
.offer-card .ok{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.offer-card .otag{
  font-size:.58rem; letter-spacing:.08em; color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  border-radius:100px; padding:2px 8px; white-space:nowrap;
}
.offer-card .otag.voz{
  color:var(--brass);
  border-color:color-mix(in srgb,var(--brass) 40%,transparent);
}
.offer-card h3{font-size:1.12rem; font-weight:640; margin:0; color:var(--ink)}
.offer-card p{margin:0; color:var(--muted); font-size:.92rem}
.offer-card .more{
  margin-top:auto; padding-top:6px;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em;
  color:var(--accent);
}

.group-head{display:flex; flex-direction:column; gap:10px; margin-bottom:4px}
.group-head .kicker{margin-bottom:0}