/* Targeted finishing pass: shared layout, navigation and area presentation. */
html, body { overflow-x: clip; }
.site-header { backdrop-filter: none; }
.mobile-tools { display: none; }
[id] { scroll-margin-top: 11rem; }

.hero {
  min-height: calc(100vh - 138px);
  grid-template-columns: minmax(0, 1.05fr) minmax(480px, .95fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 4rem);
  padding: clamp(2rem, 4vw, 4rem) clamp(1.25rem, 5vw, 6rem);
}
.hero-copy { max-width: 720px; }
.hero h1 {
  max-width: 15ch;
  margin: .35rem 0 .9rem;
  font-size: clamp(2.9rem, 4.6vw, 5rem);
  line-height: .94;
}
.hero .lead { max-width: 43rem; margin-block: .5rem; font-size: clamp(1rem, 1.35vw, 1.2rem); }
.hero .actions { margin: 1.05rem 0; }
.hero-checks { gap: .55rem 1.1rem; margin: 1rem 0 0; font-size: .82rem; }

.hero-visual {
  min-height: 390px;
  grid-template-columns: minmax(120px, 1fr) minmax(250px, 280px) minmax(120px, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: .75rem 1rem;
}
.hero-visual .orb { grid-column: 2; grid-row: 1 / 4; width: min(270px, 30vw); z-index: 1; }
.orbit-labels { display: contents; }
.orbit-labels span { position: relative; z-index: 3; width: 100%; max-width: 11rem; align-self: center; }
.orbit-labels span:nth-child(1) { grid-column: 1; grid-row: 1; justify-self: end; }
.orbit-labels span:nth-child(2) { grid-column: 3; grid-row: 1; justify-self: start; }
.orbit-labels span:nth-child(3) { grid-column: 1; grid-row: 2; justify-self: end; }
.orbit-labels span:nth-child(4) { grid-column: 3; grid-row: 2; justify-self: start; }
.orbit-labels span:nth-child(5) { grid-column: 1; grid-row: 3; justify-self: end; }
.orbit-labels span:nth-child(6) { grid-column: 3; grid-row: 3; justify-self: start; }

.card-mark { display: grid; place-items: center; }
.card-mark svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.floor-cta { display: inline-block; margin: .6rem 0 1rem; }
.area-card,
.edition-list,
.edition-list article,
.radar-items,
.radar-item { min-width: 0; overflow-wrap: anywhere; }
.radar-item a { overflow-wrap: anywhere; word-break: break-word; }
.result-grid article,
.two-grid article,
.operations-grid > *,
.fp-card-grid article { min-width: 0; overflow-wrap: anywhere; }

.area-hero { padding-block: clamp(3.5rem, 6vw, 6rem); }
.area-hero h1 { overflow-wrap: anywhere; hyphens: auto; }
.area-hero .early-example { margin-top: 1rem; }
.story { padding: clamp(1.8rem, 3vw, 3rem); }
.story h2 { margin-top: 0; font-size: clamp(1.6rem, 2.6vw, 2.5rem); }
.story .scenario-copy { max-width: 72ch; font-size: clamp(1.05rem, 1.45vw, 1.25rem); line-height: 1.65; }
.example-workbench { padding-top: clamp(3rem, 5vw, 5rem); }
.example-workbench .result-grid { margin-top: clamp(1.5rem, 3vw, 3rem); }
.result-grid article:first-child { background: linear-gradient(145deg, #fff, #eef8ff); border-color: #acd8fb; }
.result-grid article:last-child { border-top: 4px solid var(--blue); }
.caution { padding-block: 1.5rem; }
.caution p { margin-block: 0; }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { max-width: 780px; }
  .hero-visual { max-width: 720px; width: 100%; margin-inline: auto; }
  .hero-visual .orb { width: min(270px, 40vw); }
}

@media (max-width: 680px) {
  [id] { scroll-margin-top: 9rem; }
  .site-header {
    position: sticky;
    top: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
    padding: .65rem .8rem;
  }
  .brand { min-width: 0; gap: .45rem; }
  .brand img { width: 78px; }
  .brand span { display: inline; white-space: nowrap; font-size: .95rem; }
  .site-header > .button { padding: .65rem .75rem; font-size: .72rem; }
  .desktop-nav, .desktop-language-switch { display: none !important; }
  .mobile-tools { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .mobile-tools details { position: relative; min-width: 0; }
  .mobile-tools details:not([open]) > :not(summary) { display: none !important; }
  .mobile-tools summary {
    min-height: 42px;
    padding: .65rem .7rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--pale);
    color: var(--ink);
    font-size: .76rem;
    font-weight: 900;
    cursor: pointer;
    list-style-position: inside;
  }
  .mobile-tools details[open] summary { border-color: var(--blue); }
  .mobile-menu nav, .mobile-languages .language-switch {
    position: absolute;
    top: calc(100% + .4rem);
    z-index: 20;
    display: grid;
    width: min(320px, calc(100vw - 1.6rem));
    gap: .25rem;
    padding: .6rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow);
  }
  .mobile-menu nav { left: 0; }
  .mobile-languages .language-switch { right: 0; justify-content: stretch; overflow: visible; }
  .mobile-menu nav a, .mobile-languages .language-switch a { display: block !important; padding: .65rem .75rem; border-radius: 8px; text-decoration: none; }
  .mobile-menu nav a:hover, .mobile-languages .language-switch a:hover { background: var(--pale); }

  .hero { gap: 1rem; padding: 1.75rem 1.2rem 2.5rem; }
  .hero h1 { max-width: 14ch; margin: .3rem 0 .75rem; font-size: clamp(2.25rem, 11vw, 2.75rem); line-height: .96; }
  .hero .lead { font-size: 1rem; line-height: 1.48; }
  .hero .actions { margin: .85rem 0; }
  .hero-checks { gap: .45rem; font-size: .75rem; }
  .hero-visual { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: 0; margin-top: .75rem; }
  .hero-visual .orb { grid-column: 1; grid-row: 1; width: min(220px, 66vw); margin-inline: auto; }
  .orbit-labels { position: static; grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; width: 100%; margin-top: 2.75rem; }
  .orbit-labels span,
  .orbit-labels span:nth-child(n) { grid-column: auto; grid-row: auto; justify-self: stretch; max-width: none; padding: .65rem; font-size: .72rem; }

  .area-hero { padding: 2.5rem 1.2rem; }
  .area-hero h1 { font-size: clamp(2.45rem, 13vw, 3.4rem); }
  .story { margin: 1rem; padding: 1.5rem; }
  .story .scenario-copy { font-size: 1rem; }
  .example-workbench { padding: 2.5rem 1.2rem; }
  .caution { padding: 1.2rem; }
}