/* ===========================================================================
   Programmatic SEO pages.

   Long form, readable, and never dressed up. These pages exist to answer a
   question somebody typed into a search box, so the priority is legibility over
   decoration.
   =========================================================================== */

.seo{padding-block:2rem 4rem}
.seo__narrow{max-width:44rem}

.seo__crumbs{
  display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;
  font-size:.8125rem;color:var(--muted-foreground);margin-bottom:1.5rem;
}
.seo__crumbs a{text-decoration:underline;text-underline-offset:2px}
.seo__crumbs a:hover{color:var(--foreground)}

.seo__title{margin-bottom:1rem}
.seo__cta{margin:1.75rem 0}
.seo__note{margin-top:2rem;display:flex;gap:.4rem;align-items:flex-start}

/* --- headline facts. Only rendered when they are real. -------------------- */

.seo__facts{
  display:grid;gap:.5rem;margin:1.75rem 0;
  grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr));
}
.seo__facts li{
  border:1px solid var(--border);border-radius:var(--r-card);
  padding:1rem;display:grid;gap:.25rem;
}
.seo__fact-num{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  font-size:1.875rem;line-height:1;
}
.seo__fact-label{font-size:.75rem;color:var(--muted-foreground);line-height:1.4}

/* --- panels --------------------------------------------------------------- */

.seo__panel{
  border-top:1px solid var(--border);
  padding-top:1.5rem;margin-top:1.5rem;
}
.seo__panel h2{margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}
.seo__panel p{margin-bottom:.75rem;line-height:1.65;color:var(--body-on-white)}
.seo__panel p:last-child{margin-bottom:0}
.seo__panel strong{color:var(--foreground)}

/* The legal gate reads as information, not as a warning. */
.seo__panel--legal{
  border:1px solid var(--border);border-radius:var(--r-card);
  background:var(--secondary);padding:1.5rem;
}
.seo__panel--legal .ico{color:var(--ok)}

.seo__steps{display:grid;gap:.875rem;counter-reset:step;padding-left:0}
.seo__steps li{
  display:grid;gap:.2rem;padding-left:2.25rem;position:relative;
  line-height:1.6;color:var(--body-on-white);
}
.seo__steps li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:0;top:.05rem;
  width:1.5rem;height:1.5rem;border-radius:var(--r-full);
  background:var(--foreground);color:#fff;
  display:grid;place-items:center;font-size:.75rem;font-weight:600;
}

/* --- links ---------------------------------------------------------------- */

.seo__links{display:grid;gap:.375rem}
.seo__links--grid{grid-template-columns:1fr}
@media(min-width:560px){.seo__links--grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.seo__links--grid{grid-template-columns:repeat(3,1fr)}}
.seo__links a{
  display:flex;align-items:center;gap:.4rem;
  padding:.625rem .75rem;min-height:44px;
  border-radius:var(--r-base);font-size:.9375rem;
  transition:background .15s;
}
.seo__links a:hover{background:var(--secondary)}
.seo__links .ico{color:var(--muted-foreground);margin-left:auto;flex:none}
.seo__gate{display:inline-flex;color:var(--ok);margin-left:.25rem}

.seo__zones{display:grid;gap:.5rem}
.seo__zones a{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding:1rem 1.25rem;min-height:44px;
  border:1px solid var(--border);border-radius:var(--r-card);
  transition:border-color .15s,background .15s;
}
.seo__zones a:hover{border-color:var(--accent);background:var(--accent-soft)}
.seo__zone-name{font-weight:600;flex:1 1 auto}
.seo__zones .ico{flex:none;color:var(--muted-foreground)}

/* --- reviews -------------------------------------------------------------- */

.seo__reviews{display:grid;gap:1rem}
.seo__reviews li{
  padding:1rem;border-radius:var(--r-card);background:var(--secondary);
  display:grid;gap:.4rem;
}
.seo__reviews .stars{color:var(--warn);letter-spacing:.08em;font-size:.9375rem}
.seo__reviews p{margin:0;color:var(--foreground)}
.seo__reviews a{text-decoration:underline;text-underline-offset:2px}

/* --- index ---------------------------------------------------------------- */

.seo__groups{display:grid;gap:2rem;margin-top:2rem}
.seo__group-head{padding-bottom:.5rem;border-bottom:1px solid var(--border);margin-bottom:.75rem}

/* --- trade profile -------------------------------------------------------- */

.trade__head{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.trade__badge{flex:none;display:inline-flex;align-items:center;gap:.3rem}
.trade__schemes{display:grid;gap:.5rem;margin-bottom:.75rem}
.trade__schemes li{display:flex;align-items:center;gap:.5rem;font-size:.9375rem}
.trade__schemes .ico{color:var(--ok);flex:none}
.trade__reply{
  margin-top:.5rem;padding:.75rem;border-left:2px solid var(--border);
  background:#fff;border-radius:0 var(--r-base) var(--r-base) 0;display:grid;gap:.2rem;
}