/* ========================================
   THE ATTRIBUTES AND USE CASES SECTIONS ON THE PRODUCT PAGES — the geolocation page's "[04 — Attributes]" and
   "[05 — Use cases]" forms (css/geolocation.css), under their own class names so the pages' older rules cannot reach
   them. Written onto the pages by scripts/product-sections.py.
   ======================================== */
.attrs-sec { padding: var(--space-5xl) 0; position: relative; z-index: 1; }
.attrs-header { text-align: center; margin-bottom: var(--space-3xl); }
.attrs-header h2 { margin-top: var(--space-lg); font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 700; letter-spacing: -0.02em; }
.attrs-header p { margin: var(--space-md) auto 0; max-width: 600px; font-size: var(--text-lg); color: var(--text-secondary); }

/* every attribute, in the response's own groups, one cell each in a three-across grid: the type above the field's path, then what it means */
.attr-wrap { max-width: 1120px; margin: 0 auto; }
.attr-group + .attr-group { margin-top: var(--space-2xl); }
.attr-group-title { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 var(--space-md); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-primary); }
.attr-group-title::before { content: '▸'; color: var(--accent); }
.attr-group-title span { margin-left: auto; font-weight: 400; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.attr-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
/* each cell draws its own right and bottom rules, so a short last row leaves the empty slots open */
.attr-field { min-width: 0; padding: var(--space-lg); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.attr-field-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.attr-field-name { font: 600 0.9rem/1.4 var(--font-mono); color: var(--text-primary); background: none; padding: 0; overflow-wrap: anywhere; }
.attr-field-type { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.attr-field-desc { margin: 0.55rem 0 0; font-size: 0.85rem; line-height: 1.55; color: var(--text-secondary); }
@media (max-width: 899px) { .attr-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .attr-fields { grid-template-columns: minmax(0, 1fr); } }

/* the use cases: a panel inset 12px from the page edge, corner brackets (.hud, from enrich.css) and a paper glow; a grid of numbered cards */
.uc-sec {
  --hud: color-mix(in srgb, var(--text-primary) 55%, transparent);
  padding: var(--space-2xl) 0; position: relative; z-index: 0; margin: 12px; border-radius: 6px; overflow: hidden;
  background: radial-gradient(ellipse 72% 62% at 50% 56%, color-mix(in srgb, #fff 70%, var(--bg-primary)) 0%, var(--bg-primary) 62%, color-mix(in srgb, var(--bg-primary) 94%, var(--text-primary)) 100%);
}
.uc-sec > .container { position: relative; z-index: 1; }
.uc-header { text-align: center; margin-bottom: var(--space-xl); }
.uc-header h2 { margin-top: var(--space-lg); font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 700; letter-spacing: -0.02em; }
.uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.uc-card { padding: var(--space-2xl); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background 200ms ease; }   /* each card closes its own cell, whatever the count */
.uc-card:hover { background: color-mix(in srgb, var(--text-primary) 3%, transparent); }
.uc-num { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-muted); letter-spacing: 0.05em; margin-bottom: var(--space-md); }
.uc-card h4 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--space-sm); line-height: 1.25; }
.uc-card p { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.65; }
@media (max-width: 1023px) { .uc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .uc-grid { grid-template-columns: 1fr; } }