.iconography-main { overflow: hidden; }

.icon-hero {
  width: min(100% - 3rem, 88rem);
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 8rem) 0 clamp(5rem, 9vw, 8rem);
  display: grid;
  grid-template-columns: minmax(20rem, .8fr) minmax(28rem, 1.2fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: center;
}

.icon-hero h1 { max-width: 12ch; font-size: clamp(3.8rem, 7vw, 7rem); }
.icon-hero h1 em { color: var(--fern); }
.icon-lede { max-width: 39rem; margin: 2rem 0 0; color: #4d4a40; font-size: clamp(1.05rem, 1.4vw, 1.22rem); }
.icon-hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.icon-primary-link, .icon-secondary-link { min-height: 2.9rem; padding: .68rem 1rem; display: inline-flex; align-items: center; border: 1px solid var(--moss); border-radius: var(--radius-button); font-size: .84rem; font-weight: 750; text-decoration: none; }
.icon-primary-link { color: var(--chalk); background: var(--moss); }
.icon-primary-link:hover { background: var(--fern); }
.icon-secondary-link { color: var(--moss); background: transparent; }
.icon-secondary-link:hover { background: var(--mist); }

.icon-hero-specimen { position: relative; min-height: 31rem; overflow: hidden; background-color: #fbfaf5; background-image: linear-gradient(rgba(45,74,42,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(45,74,42,.05) 1px,transparent 1px); background-size: 24px 24px; border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 2rem 5rem rgba(39,51,29,.14); }
.hero-icon { position: absolute; overflow: visible; color: var(--moss); fill: none; }
.hero-icon-bed { width: 14rem; height: 14rem; top: 13%; left: 9%; transform: rotate(-7deg); }
.hero-icon-scan { width: 8rem; height: 8rem; right: 9%; top: 11%; color: var(--sky); }
.hero-icon-intelligence { width: 7rem; height: 7rem; right: 19%; bottom: 15%; color: var(--clay); }
.hero-leader { position: absolute; left: 36%; top: 54%; width: 27%; border-top: 1px dashed var(--moss); transform: rotate(15deg); transform-origin: left; }
.hero-note { position: absolute; right: 7%; top: 48%; padding: .75rem .9rem; display: grid; background: rgba(250,247,242,.96); border: 1px solid var(--line); border-radius: var(--radius-chip); box-shadow: 0 7px 22px rgba(28,26,20,.1); }
.hero-note strong { color: var(--moss); font-size: .78rem; }
.hero-note span { color: var(--muted-ink); font-size: .68rem; }

.icon-section { padding: clamp(5rem, 9vw, 8rem) max(1.5rem, calc((100vw - 88rem) / 2)); border-top: 1px solid var(--line); }
.icon-section:nth-of-type(odd) { background: var(--cream); }
.icon-section-head { display: grid; grid-template-columns: 3rem minmax(0,1fr); gap: 0 2.5rem; }
.icon-section-head h2 { color: var(--moss); font-size: clamp(2.8rem,5vw,5.2rem); }
.icon-section-head > div > p:last-child { max-width: 48rem; margin: 1.25rem 0 0; color: #514e44; font-size: 1.03rem; }

.icon-filters { margin: 3rem 0 1rem 5.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.icon-filter { min-height: 2.75rem; padding: .55rem .85rem; color: var(--moss); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-button); font: 700 .78rem var(--sans); cursor: pointer; }
.icon-filter:hover { border-color: var(--fern); background: var(--mist); }
.icon-filter[aria-pressed="true"] { color: var(--chalk); background: var(--moss); border-color: var(--moss); }
.icon-results { min-height: 1.5rem; margin: 0 0 1rem 5.5rem; color: var(--muted-ink); font-size: .78rem; }
.icon-grid { margin-left: 5.5rem; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; }
.icon-card { min-width: 0; min-height: 9.5rem; padding: 1rem; display: grid; grid-template-columns: 3.25rem minmax(0,1fr); gap: 1rem; align-items: center; background: var(--parchment); border: 1px solid var(--line); border-radius: var(--radius-card); }
.icon-card svg { width: 3.25rem; height: 3.25rem; overflow: visible; color: var(--moss); fill: none; }
.icon-card h3 { margin: 0; color: var(--soil); font: 700 .84rem var(--sans); }
.icon-card p { margin: .25rem 0 0; color: var(--muted-ink); font-size: .68rem; line-height: 1.4; }
.icon-card code { display: block; margin-top: .55rem; overflow: hidden; color: var(--fern); font-size: .62rem; text-overflow: ellipsis; }
.icon-noscript { margin-left: 5.5rem; color: var(--terracotta); }

.rule-grid { margin: 3rem 0 0 5.5rem; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.rule-grid article { min-height: 14rem; padding: 1.35rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rule-grid h3 { margin: 1.4rem 0 .5rem; color: var(--moss); font: 400 1.4rem var(--serif); }
.rule-grid p { margin: 0; color: var(--muted-ink); font-size: .8rem; }
.rule-grid svg { width: 3.7rem; height: 3.7rem; color: var(--moss); fill: none; }
.rule-value { color: var(--moss); font: 400 3.5rem/1 var(--serif); }

.state-strip { margin: 1.5rem 0 0 5.5rem; display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; }
.state-strip article { min-height: 6.5rem; padding: 1rem; display: flex; gap: .8rem; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-card); }
.state-strip svg { width: 2.2rem; height: 2.2rem; flex: 0 0 auto; fill: none; }
.state-strip strong, .state-strip span { display: block; }
.state-strip strong { font-size: .8rem; }.state-strip span { margin-top: .2rem; font-size: .67rem; }
.state-default { color: var(--soil); background: var(--cream); }
.state-active { color: var(--chalk); background: var(--moss); }
.state-review-icon { color: var(--soil); background: var(--clay); }
.state-user-icon { color: var(--soil); background: color-mix(in srgb,var(--sky) 42%,var(--cream)); }
.icon-rules-list { margin: 2rem 0 0 5.5rem; padding: 1.5rem 1.5rem 1.5rem 2.7rem; display: grid; gap: .65rem; color: #d6e3d1; background: var(--moss); border-radius: var(--radius-card); }
.icon-rules-list code { font-family: ui-monospace,monospace; }

.icon-asset-links { margin: 3rem 0 0 5.5rem; display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; }
.icon-asset-links a { min-height: 9rem; padding: 1rem; display: flex; flex-direction: column; justify-content: end; color: var(--moss); background: var(--parchment); border: 1px solid var(--line); border-radius: var(--radius-card); text-decoration: none; }
.icon-asset-links a:hover { border-color: var(--moss); transform: translateY(-2px); }
.icon-asset-links span { color: var(--muted-ink); font-size: .73rem; }

@media (max-width: 1100px) {
  .icon-hero { grid-template-columns: 1fr; }.icon-hero > div:first-child { max-width: 49rem; }
  .icon-hero-specimen { width: min(100%,52rem); }
  .icon-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .rule-grid, .state-strip { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .icon-hero { width: min(100% - 2rem,88rem); padding-top: 3.5rem; gap: 3rem; }
  .icon-hero h1 { font-size: clamp(3.2rem,15vw,5rem); }
  .icon-hero-specimen { min-height: 25rem; }
  .hero-icon-bed { width: 10rem; height: 10rem; }.hero-icon-scan { width: 6rem; height: 6rem; }.hero-icon-intelligence { width: 5rem; height: 5rem; }
  .icon-section-head { grid-template-columns: 1fr; gap: .6rem; }
  .icon-filters, .icon-results, .icon-grid, .rule-grid, .state-strip, .icon-rules-list, .icon-asset-links, .icon-noscript { margin-left: 0; }
  .icon-grid { grid-template-columns: 1fr 1fr; }
  .icon-asset-links { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .icon-grid, .rule-grid, .state-strip, .icon-asset-links { grid-template-columns: 1fr; }
  .icon-card { min-height: 7.5rem; }
  .hero-note { right: 4%; }.hero-leader { display: none; }
}

@media (prefers-reduced-motion: reduce) { .icon-asset-links a:hover { transform: none; } }