/*
 * client-org.css: designs of the ORG documents of the namespace; in d1 the simulated Org, the homepage A.0.Org.1.1.
 * Free CSS loaded after the generated LowestCode CSS and outside its compatibility guarantee (230). The four client
 * files load in the rollout order client-sys, client-pro, client-org, client-user; each is owned by its layer.
 * Owned by the ORG namespace; a SYS rollout never delivers or overwrites it.
 * A class carries the prefix .<smaCode>-<docId>- of the document it styles (410).
 */

/* WHY: hero, login card and contact page are client widgets on a fixed dark backdrop; they carry their own palette as
   local values of the governed theme variables, so they look the same in every theme (2026-09-29). */
.org-1-hero {
  --text: #f8fbff;
  --muted: rgb(248 251 255 / 0.82);
  --accent: #6ee7c8;
}

.org-1-shell {
  width: min(100%, 120rem);
  margin: 0 auto;
}

/* Hero */

.org-1-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 82% 18%, rgb(45 212 191 / 0.32), transparent 28rem),
    radial-gradient(circle at 15% 82%, rgb(34 197 94 / 0.28), transparent 31rem),
    linear-gradient(135deg, #102a54 0%, #0f4f6a 48%, #11223c 100%);
  color: var(--text);
  /* WHY: the bottom padding leaves room for the absolutely positioned scroll control below the last line on a phone. */
  padding: clamp(4rem, 8vw, 7rem) 1rem clamp(5.5rem, 8vw, 7rem);
}

.org-1-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.5) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
  z-index: -2;
}

.org-1-glow {
  position: absolute;
  width: clamp(14rem, 26vw, 24rem);
  aspect-ratio: 1;
  border-radius: 9999px;
  filter: blur(4rem);
  opacity: 0.78;
  z-index: -1;
  animation: homeFloat 7s ease-in-out infinite;
}

.org-1-glow.accent {
  top: 8%;
  right: 8%;
  background: rgb(110 231 200 / 0.24);
}

.org-1-glow.success {
  bottom: 8%;
  left: 8%;
  width: clamp(16rem, 32vw, 30rem);
  background: rgb(34 197 94 / 0.22);
  animation-delay: -2s;
}

.org-1-container {
  position: relative;
  z-index: 1;
  width: min(100%, 72rem);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
  text-align: center;
}

.org-1-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.5rem 1rem;
  margin-bottom: 2rem;
  color: var(--text);
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 9999px;
  backdrop-filter: blur(12px);
  font-size: 0.875rem;
  font-weight: 600;
}

.org-1-status-dot {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 9999px;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgb(34 197 94 / 0.55);
  animation: homePulse 1.8s ease-out infinite;
}

/* WHY: the lockup is LowestCode by RSaccess (operator decision 2026-09-28): the RSaccess logo is the smaller by-line under the title. A plain row, not the framework t-1.logo container, because fun.css widens every .flex.row img to the full width under 36rem and centers div.img.logo2. */
.org-1-brand-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0 0 1.4rem;
}

.org-1-brand-by-logo {
  display: block;
  width: auto;
  height: clamp(3.4rem, 6vw, 5rem); /* WHY: double the text-height size, operator decision 2026-09-28 */
  padding: 0; /* WHY: format-0 gives every img a 1rem padding, which would eat the logo */
  margin: 0;
  border-radius: 0.4rem;
}

.org-1-brand-by-text {
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 650;
  color: var(--muted);
}

.org-1-title {
  margin: 0 0 1.4rem;
  color: var(--text);
  font-size: clamp(3.1rem, 8vw, 7rem);
  line-height: 0.96;
  font-weight: 800;
  letter-spacing: 0;
}

.org-1-title span {
  display: inline-block;
  color: transparent;
  background: linear-gradient(90deg, #67e8f9 0%, #6ee7c8 52%, #bef264 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.org-1-title .org-1-title-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.18em;
  max-width: 100%;
  color: inherit;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  white-space: nowrap;
}

.org-1-product-mark {
  flex: 0 0 auto;
  width: 1.17em;
  height: 1.17em;
  padding: 0;
  margin: 0;
  object-fit: contain;
}

.org-1-title .org-1-title-detail {
  display: block;
  margin-top: 0.7rem;
  font-size: clamp(1.5rem, 2.9vw, 2.6rem);
  line-height: 1.08;
  font-weight: 750;
}

.org-1-subtitle {
  margin: 0 0 1rem;
  color: rgb(248 251 255 / 0.92);
  font-size: clamp(1.45rem, 3.4vw, 2.25rem);
  line-height: 1.2;
  font-weight: 650;
}

.org-1-copy {
  max-width: 48rem;
  margin: 0 auto 3rem;
  color: var(--muted);
  font-size: clamp(1.06rem, 2vw, 1.35rem);
  line-height: 1.58;
}

.org-1-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  width: min(100%, 58rem);
  margin: 0 auto 2.6rem;
}

.org-1-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  min-width: 11rem;
  padding: 0.75rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  font: inherit;
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.org-1-action-primary {
  color: #102033;
  background: linear-gradient(135deg, #a7f3d0, #67e8f9);
  box-shadow: 0 18px 35px rgb(12 25 50 / 0.24);
}

.org-1-action-primary:hover,
.org-1-action-primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 22px 42px rgb(12 25 50 / 0.32);
}

/* WHY: the hero carries two secondary actions beside the primary one, Follow the Quest and Summary (operator proposal 2026-10-01); an outline on the dark hero keeps the filled primary button the leading action. */
.org-1-action-secondary {
  color: #e6fbff;
  border-color: rgb(167 243 208 / 0.55);
  background: rgb(255 255 255 / 0.06);
}

.org-1-action-secondary:hover,
.org-1-action-secondary:focus-visible {
  transform: translateY(-1px);
  border-color: #a7f3d0;
  background: rgb(255 255 255 / 0.12);
}

.org-1-next-hint {
  width: min(100%, 40rem);
  margin: clamp(1.7rem, 4vw, 2.6rem) auto 0;
  color: rgb(248 251 255 / 0.72);
  font-size: clamp(0.98rem, 1.8vw, 1.16rem);
  line-height: 1.45;
  font-weight: 650;
  text-align: center;
}

/* Hero proposition under the four buttons since 2026-10-03 (operator text and placement): one heading line and three short paragraphs between the buttons and the section hint, in the width and the muted colour of the hero copy, the trademark line small. */
.org-1-proposition {
  width: min(100%, 48rem);
  margin: clamp(1.7rem, 4vw, 2.6rem) auto 0;
  text-align: center;
}

.org-1-proposition-head {
  margin: 0 0 0.9rem;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.25;
}

.org-1-proposition p {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.9vw, 1.2rem);
  line-height: 1.5;
}

.org-1-proposition .org-1-proposition-note {
  margin-top: 0.4rem;
  font-size: 0.85rem;
}

/* WHY: hero gallery above the button row (operator requests 2026-10-01): a horizontal track that snaps to each picture and moves by swipe, trackpad or keyboard without script; each slide links to its section. Dots and auto-advance follow with the second picture; the Quest slide is a picture rendered once a month by render-quest-slide.py (operator decision 2026-10-01). */
.org-1-gallery {
  width: min(100%, 48rem);
  margin: 0 auto 2.4rem;
}

/* Why: the governed themes give `.gallery` a light panel background; the hero gallery stands on the dark hero without one. */
.org-1-gallery.gallery {
  background: none;
}

.org-1-gallery-track {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.org-1-gallery-track::-webkit-scrollbar {
  display: none;
}

.org-1-gallery-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

.org-1-gallery-slide a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.org-1-gallery-slide img {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  /* Why: every slide keeps the gallery frame 1200 x 638, so the gallery does not change height between pictures; a
     picture of another shape is cut to the frame, never stretched. */
  aspect-ratio: 1200 / 638;
  object-fit: cover;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 0.75rem;
  box-shadow: 0 18px 35px rgb(12 25 50 / 0.3);
}

.org-1-gallery-caption {
  display: block;
  margin-top: 0.65rem;
  color: rgb(248 251 255 / 0.72);
  font-size: clamp(0.92rem, 1.6vw, 1.02rem);
  font-weight: 650;
  line-height: 1.4;
}

.org-1-gallery-slide a:hover .org-1-gallery-caption,
.org-1-gallery-slide a:focus-visible .org-1-gallery-caption {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

@media (prefers-reduced-motion: reduce) {
  .org-1-gallery-track {
    scroll-behavior: auto;
  }
}

.org-1-copy a,
.org-1-next-hint a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
}

.org-1-copy a:hover,
.org-1-copy a:focus-visible,
.org-1-next-hint a:hover,
.org-1-next-hint a:focus-visible {
  color: var(--text);
}

.org-1-scroll {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  width: 1.5rem;
  height: 2.5rem;
  border: 2px solid color-mix(in srgb, var(--text) 34%, transparent);
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  padding-top: 0.45rem;
  opacity: 0.9;
  animation: homeBounce 1.6s infinite;
  text-decoration: none;
}

.org-1-scroll::before {
  content: "";
  width: 0.25rem;
  height: 0.75rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--text) 58%, transparent);
}

.org-1-scroll:focus-visible {
  /* Keep the icon-only section control visible during keyboard navigation. */
  outline: 3px solid var(--accent);
  outline-offset: 0.35rem;
}

/* WHY: a jump from the hero hint lands in a section and the browser's back does not scroll the inner board, so every section carries its way back to the hero as a second pill beside the arrow, in the arrow's design (operator layout 2026-09-28). */
.section .org-1-scroll {
  left: calc(50% - 1.35rem);
}

.org-1-top {
  position: absolute;
  left: calc(50% + 1.35rem);
  bottom: 2rem;
  transform: translateX(-50%);
  width: 1.5rem;
  height: 2.5rem;
  border: 2px solid color-mix(in srgb, var(--text) 34%, transparent);
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  padding-top: 0.72rem;
  opacity: 0.9;
  text-decoration: none;
}

.org-1-top::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-top: 2px solid color-mix(in srgb, var(--text) 58%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--text) 58%, transparent);
  transform: rotate(45deg);
}

.org-1-top:hover {
  opacity: 1;
  border-color: color-mix(in srgb, var(--text) 55%, transparent);
}

.org-1-top:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 0.35rem;
}

.org-1-top-alone {
  left: 50%;
}

.org-1-inner {
  width: min(100%, 82rem);
  margin: 0 auto;
}

/* WHY: a two-column section aligns heading and cards as one row and lead and note box as the next, so the proof sits beside its claim; an aside without a thesis spans both rows. */
.org-1-columns {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  column-gap: clamp(2rem, 5vw, 4rem);
  /* WHY: the row gap is the only distance between the cards and the note box below them; the label and heading margins give it back, so the left column keeps its spacing. */
  row-gap: 1rem;
  align-items: start;
}

.org-1-columns > .sectionLabel {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
}

.org-1-columns > h2 {
  grid-column: 1;
  grid-row: 2;
  margin-bottom: 0.2rem;
  /* WHY: beside the cards the heading has a narrow column; one size step down keeps long headings under six lines at laptop widths. */
  font-size: clamp(2.1rem, 3.9vw, 3.5rem);
}

.org-1-columns > .lead {
  grid-column: 1;
  grid-row: 3;
  margin-bottom: 0;
}

.org-1-columns > .org-1-aside {
  grid-column: 2;
  grid-row: 2;
}

.org-1-columns > .org-1-aside-tall {
  grid-row: 2 / span 2;
}

/* WHY: the closing action of a two-column section spans both columns under the text and the aside; without a placement the grid would drop it into the first free cell beside the heading. */
.org-1-columns > .org-1-actions {
  grid-column: 1 / -1;
  grid-row: 4;
  justify-content: center;
}

.org-1-columns > .note {
  grid-column: 2;
  grid-row: 3;
}

.org-1-aside > h3 {
  margin: 0 0 0.75rem;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0;
}

.org-1-aside .note {
  margin-top: 0.75rem;
}
/* A row break inside a term list: the planned projects show the ERP row and the Office row (operator layout 2026-09-28). */
.term .org-1-term-break {
  flex-basis: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
/* Team section: a lead paragraph followed by a chain keeps a short gap, and the rollout and contribution chains are rows of
   button-like chips joined by arrows so the chain stands out (operator layout 2026-09-28). Non-adaptive homepage colors, as
   the primary action above. */
.org-1-lead-tight {
  margin-bottom: 1.1rem;
}
/* Energy section since 2026-10-09: the web shop line follows the five stat buttons, which carry no bottom margin; the gap
   keeps the line apart from the buttons as the actions below are (homepage design check). */
.org-1-stat + .lead {
  margin-top: 1.1rem;
}
.org-1-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.55rem;
  margin: 0 0 clamp(1.6rem, 4vw, 2.6rem);
  padding: 0;
  list-style: none;
}
.org-1-chain li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.org-1-chain li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  color: #102033;
  background: linear-gradient(135deg, #a7f3d0, #67e8f9);
  box-shadow: 0 14px 28px rgb(12 25 50 / 0.24);
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.org-1-chain li:not(:last-child)::after {
  content: "\2192";
  color: var(--muted);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}
.org-1-chain-up li span {
  color: #1f1305;
  background: linear-gradient(135deg, #fcd34d, #fb923c);
}
/* Team section: each chain carries its name, Rollout or Contribution, in the chain's accent color left of the chips,
   right-aligned against a thin divider; both labels share one width so the two chains line up, and on a phone the label
   stands above its chain (operator request 2026-09-29). */
.org-1-chain-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin: 0 0 clamp(1.6rem, 4vw, 2.6rem);
}
.org-1-chain-row .org-1-chain {
  margin: 0;
}
.org-1-chain-label {
  min-width: 8.5rem;
  padding: 0.4rem 1rem 0.4rem 0;
  border-right: 2px solid rgb(103 232 249 / 0.7);
  color: #67e8f9;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-align: right;
  text-transform: uppercase;
}
.org-1-chain-label-up {
  border-right-color: rgb(251 146 60 / 0.7);
  color: #fdba74;
}
@media (max-width: 760px) {
  .org-1-chain-label {
    flex-basis: 100%;
    min-width: 0;
    padding: 0;
    border-right: 0;
    text-align: left;
  }
}

.section .org-1-actions {
  justify-content: center;
  width: auto;
  margin: clamp(1.5rem, 4vw, 2.4rem) 0 0;
}

/* Energy section: a full-width note box (operator request 2026-09-28). */
.org-1-note-wide {
  max-width: 58rem;
  margin: clamp(1.5rem, 4vw, 2.4rem) 0 0;
}
/* Energy section: the five load test buttons under the comparison picture, the value large and the explanation
   small, four in dark blue and the energy figure in green (operator design of the post picture, on the page since
   2026-10-01). WHY text and not the picture: the page text is translated, read aloud and wraps on a phone. Each
   button is a link to the load test report, since a button has to do something. The buttons follow the picture
   directly, at the distance they keep among themselves. */
.section figure.org-1-figure-tight {
  margin-bottom: 0.35rem;
}
.org-1-stat {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.org-1-stat-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 100%;
  min-height: 7.2rem;
  padding: 0.9rem 0.8rem;
  border: 1px solid rgb(103 232 249 / 0.7);
  border-radius: 0.85rem;
  background: linear-gradient(135deg, #102a54, #10395d);
  color: #f8fbff;
  text-align: center;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.org-1-stat-link strong {
  color: #67e8f9;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
}
.org-1-stat-link span {
  font-size: 0.9rem;
  line-height: 1.35;
}
.org-1-stat-green {
  border-color: rgb(110 231 200 / 0.7);
  background: linear-gradient(135deg, #136e64, #157a63);
}
.org-1-stat-green strong {
  color: #a8ef80;
}
.org-1-stat-link:hover,
.org-1-stat-link:focus-visible {
  transform: translateY(-1px);
  border-color: #a7f3d0;
}
@media (max-width: 980px) {
  .org-1-stat {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .org-1-stat > li:last-child {
    grid-column: 1 / -1;
  }
}
/* Summary: three groups of cards, each card one link to its section or page, its symbol a tile on the left
   (operator request 2026-10-01: wider icons, clickable). WHY the whole card is the link: the tile alone is a small
   touch target, and a card that looks clickable has to be clickable. The tile replaces the mark line of the card. */
.org-1-summary-head {
  margin: clamp(1.4rem, 3.5vw, 2.2rem) 0 0.8rem;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.02em;
}
.org-1-summary > li {
  padding: 0;
}
.org-1-summary > li::before {
  display: none;
}
.org-1-card-link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  height: 100%;
  padding: 0.85rem 1rem;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
  transition: background 0.18s ease;
}
.org-1-card-icon {
  display: grid;
  flex: 0 0 3.2rem;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid rgb(167 243 208 / 0.55);
  border-radius: 0.6rem;
  background: rgb(255 255 255 / 0.06);
  font-size: 1.6rem;
  line-height: 1;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.org-1-card-text {
  color: var(--muted);
  font-size: 0.92em;
  line-height: 1.45;
}
.org-1-card-link:hover,
.org-1-card-link:focus-visible {
  background: rgb(255 255 255 / 0.05);
}
.org-1-card-link:hover .org-1-card-icon,
.org-1-card-link:focus-visible .org-1-card-icon {
  border-color: #a7f3d0;
  background: rgb(255 255 255 / 0.12);
}
/* Workplace section: three note boxes across the full width, one column on narrow screens (operator layout 2026-09-28). */
.org-1-note-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 clamp(1.5rem, 4vw, 2.4rem);
}
/* Workplace section since 2026-10-03: two note boxes, the Office note moved into the Office section (operator decision). */
.org-1-note-row-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 980px) {
  .org-1-note-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
.org-1-projects-note {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.48;
}
/* Project table legend since 2026-10-03: a legend item keeps its mark and its word on one line, so no word stands alone on a phone (design check). */
.org-1-nowrap { white-space: nowrap; }

/* WHY: the project heading stays on one line (operator request 2026-09-29): its text is 11.75em wide in the site font
   plus 1em heading padding, so below the governed size of format-0 `.section h2` it shrinks with the viewport; 6.6vw fits
   down to 320px and under every font scale. */
h2.org-1-one-line {
  max-width: none;
  white-space: nowrap;
  font-size: min(clamp(2.2rem, 5vw, 4.5rem), 6.6vw);
}

.org-1-reveal {
  opacity: 0;
  animation: homeReveal 0.7s ease forwards;
}

.org-1-reveal.delay-1 { animation-delay: 0.12s; }
.org-1-reveal.delay-2 { animation-delay: 0.22s; }
.org-1-reveal.delay-3 { animation-delay: 0.32s; }
.org-1-reveal.delay-4 { animation-delay: 0.42s; }
.org-1-reveal.delay-5 { animation-delay: 0.52s; }
.org-1-reveal.delay-6 { animation-delay: 0.62s; }

@media (prefers-reduced-motion: reduce) {
  /* Respect system motion preferences without hiding reveal content. */
  .org-1-glow,
  .org-1-status-dot,
  .org-1-scroll,
  .org-1-reveal {
    animation: none;
  }

  .org-1-reveal {
    opacity: 1;
    transform: none;
  }

  .org-1-action {
    transition: none;
  }

  .org-1-action-primary:hover,
  .org-1-action-primary:focus-visible {
    transform: none;
  }
}

/* WHY: desktop card groups center against their large left-hand headings instead of aligning to the heading row's top edge. */
@media (min-width: 981px) {
  .org-1-columns > .org-1-aside {
    align-self: center;
  }

  /* WHY: a second note box closes a two-column section across both columns, under the text and the cards; on a narrow
     screen it follows the cards in the page order (the Kotlin and Python box, operator 2026-09-30). */
  .org-1-columns > .note.org-1-note-below {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  /* WHY: the shell's navigation and footer take about 6rem of the viewport; the hero fills the visible board instead of the full viewport, so its last line and the scroll control are in the first screen. */
  .org-1-hero {
    min-height: calc(100vh - 6rem);
  }
}

/* WHY: the hero fits the first screen on every desktop size, statement, buttons, hint and scroll control (operator
   request 2026-10-01). Measured before: the hint lay 45 to 156 px below the board from 1280x800 to 1920x1080, and at
   1536x864 the buttons too, because type and spacing followed the width alone. The unit is one percent of the board
   height, the viewport less the shell's navigation and footer (92 px, 4.6rem); type and spacing take the smaller of
   their width step and their height step, with the former minimum sizes as the floor. */
@media (min-width: 981px) {
  .org-1-hero {
    --org-1-u: calc((100vh - 4.6rem) / 100);
    /* WHY: the bottom padding keeps the scroll control (1.2rem + 2.5rem) off the last line with 0.7rem between them. */
    padding-block: calc(2.2 * var(--org-1-u)) 4.4rem;
  }

  .org-1-hero .org-1-scroll {
    bottom: 1.2rem;
  }

  .org-1-hero .org-1-badge {
    margin-bottom: calc(1.5 * var(--org-1-u));
  }

  .org-1-hero .org-1-title {
    margin-bottom: calc(1.6 * var(--org-1-u));
    font-size: clamp(3.1rem, min(6.5vw, calc(9.2 * var(--org-1-u))), 6rem);
  }

  .org-1-hero .org-1-title-detail {
    margin-top: var(--org-1-u);
    font-size: clamp(1.4rem, min(2.9vw, calc(4 * var(--org-1-u))), 2.6rem);
  }

  .org-1-hero .org-1-brand-by {
    margin-bottom: calc(1.4 * var(--org-1-u));
  }

  .org-1-hero .org-1-brand-by-logo {
    height: clamp(2.6rem, min(6vw, calc(7.5 * var(--org-1-u))), 5rem);
  }

  .org-1-hero .org-1-subtitle {
    margin-bottom: calc(1.4 * var(--org-1-u));
    font-size: clamp(1.3rem, min(2.4vw, calc(3.5 * var(--org-1-u))), 2.25rem);
  }

  .org-1-hero .org-1-copy {
    max-width: 56rem;
    margin-bottom: calc(2 * var(--org-1-u));
    font-size: clamp(1rem, calc(2.4 * var(--org-1-u)), 1.25rem);
    line-height: 1.45;
  }

  .org-1-hero .org-1-actions {
    margin-bottom: calc(1.6 * var(--org-1-u));
  }

  .org-1-hero .org-1-next-hint {
    width: min(100%, 56rem);
    margin-top: 0;
    font-size: clamp(0.9rem, calc(2.1 * var(--org-1-u)), 1.16rem);
  }
}

@media (max-width: 980px) {
  .org-1-columns {
    grid-template-columns: 1fr;
  }

  .org-1-columns > .sectionLabel,
  .org-1-columns > h2,
  .org-1-columns > .lead,
  .org-1-columns > .note,
  .org-1-columns > .org-1-aside,
  .org-1-columns > .org-1-aside-tall,
  .org-1-columns > .org-1-actions {
    grid-column: 1;
    grid-row: auto;
  }

  .org-1-columns > .note,
  .org-1-columns > .org-1-aside {
    margin-top: 0.5rem;
  }
}

@media (max-width: 760px) {
  .org-1-title {
    font-size: clamp(2.15rem, 10vw, 3.1rem);
  }

  .org-1-title .org-1-title-line {
    gap: 0.14em;
  }

  .org-1-badge {
    border-radius: 0.5rem;
    white-space: normal;
  }

  .org-1-actions {
    align-items: stretch;
  }

  .org-1-action {
    width: min(100%, 23rem);
  }
}