/* DRAFT v18 — a figure, its explanation and navigation each keep their space.
   Body / supporting headline / hero follow the 18 / 29 / 47 / 76 type scale.
   Illustrations use consistent 4:3 viewports; available height caps hero scale. */
html[data-organization-theme] #organization-stage :is(.questions-copy,.follow-copy) {
  top: 37%;
}
html[data-organization-theme] #organization-stage :is(.questions-copy,.follow-copy) h2 {
  font-size: clamp(47px, 6.65svh, 76px);
  line-height: 1;
}
html[data-organization-theme] #organization-stage :is(.offer-stories,.agreement-stories) {
  gap: 24px;
  margin-top: 18px;
}
html[data-organization-theme] #organization-stage .offer-story {
  grid-template-columns: 80px minmax(0,1fr);
  gap: 5px 16px;
  padding: 16px 12px;
  min-height: 142px;
}
html[data-organization-theme] #organization-stage .offer-story .offer-illustration {
  width: 80px; height: 60px; max-height: 60px;
}
html[data-organization-theme] #organization-stage .agreement-story .organization-object {
  width: 112px; height: 84px; max-width: 100%;
}
html[data-organization-theme] #organization-stage .offer-boundary {
  margin: 12px auto 0; max-width: 52ch;
}

/* The object has its own measured canvas. Card titles do not inherit the
   page headline size, and the front card never crosses into the reading column. */
html[data-organization-theme] .role-demo-layout {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(29px, 4vw, 62px);
  align-items: center;
}
html[data-organization-theme] .role-demo-layout>* { min-width: 0; }
html[data-organization-theme] .role-object {
  container-type: inline-size;
  display: flex;
  width: 100%;
  min-height: 410px;
  padding: 24px 10px 76px;
  align-items: flex-start;
  isolation: isolate;
}
html[data-organization-theme] .role-mark-card {
  width: clamp(164px, 44cqw, 224px);
  min-height: 280px;
  aspect-ratio: .72;
  padding: 26px 20px;
  gap: 26px;
  flex-shrink: 0;
}
html[data-organization-theme] .role-mark-card img {
  width: 62%; height: auto; aspect-ratio: 100/130;
}
html[data-organization-theme] .role-mark-card>span {
  font-size: 16px; line-height: 1.35; text-align: center;
}
html[data-organization-theme] :is(.role-invitation,.role-responsibility) {
  top: 35px;
  left: 49%;
  width: clamp(164px, 44cqw, 224px);
  min-height: 280px;
  aspect-ratio: .72;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  transform: translateY(28px) rotate(3deg);
}
html[data-organization-theme] :is(.role-invitation,.role-responsibility)>span {
  font-size: 12px; line-height: 1.4; letter-spacing: .055em;
}
html[data-organization-theme] :is(.role-invitation,.role-responsibility)>strong {
  font-size: clamp(22px, 5.9cqw, 29px);
  line-height: 1.1;
  letter-spacing: -.04em;
  margin-block: 24px;
  overflow-wrap: anywhere;
}
html[data-organization-theme] :is(.role-invitation,.role-responsibility)>i {
  font-size: 14px; line-height: 1.4;
  margin-top: auto; padding-top: 14px;
}
html[data-organization-theme] .role-ground-label {
  bottom: 12px; left: 0; right: 0;
  font-size: 16px; line-height: 1.45;
}
html[data-organization-theme] .role-explorer:is([data-role-view=availability],[data-role-view=representation]) .role-mark-card {
  transform: translateX(-24%) rotate(-6deg);
}
html[data-organization-theme] .role-explorer[data-role-view=availability] .role-invitation,
html[data-organization-theme] .role-explorer[data-role-view=representation] .role-responsibility {
  transform: translateY(0) rotate(3deg);
}
html[data-organization-theme] .role-explorer.is-invitation-away .role-invitation {
  transform: translate(8px,38px) rotate(9deg);
}
html[data-organization-theme] .role-demo-copy>p:not(.sr-only) { font-size: 18px; line-height: 1.55; }
html[data-organization-theme] .role-demo-copy .role-demo-principle { font-size: 16px!important; line-height: 1.5; }
html[data-organization-theme] .org-small-label { font-size: 14px; line-height: 1.4; }
html[data-organization-theme] .role-choice-controls { gap: 12px 19px; }
html[data-organization-theme] .role-choice-controls>button { overflow-wrap: anywhere; }
html[data-organization-theme] #role-invitation-toggle { font-size: 16px; line-height: 1.35; }
html[data-organization-theme] .reading-paths .path-object {
  width: 128px; height: 96px; max-width: 100%; margin-top: 20px;
}
html[data-organization-theme] #explore .reading-paths h3 { margin-top: 18px; }

@media (min-width:701px) and (max-height:740px) {
  html[data-organization-theme] #organization-stage :is(.questions-copy,.follow-copy) { top: 35%; }
  html[data-organization-theme] #organization-stage :is(.questions-copy,.follow-copy) h2 { font-size: 47px; }
  html[data-organization-theme] #organization-stage .offer-story { min-height: 118px; padding: 10px; grid-template-columns: 64px minmax(0,1fr); }
  html[data-organization-theme] #organization-stage .offer-story .offer-illustration { width: 64px; height: 48px; max-height: 48px; }
  html[data-organization-theme] #organization-stage .agreement-story .organization-object { width: 88px; height: 66px; }
}
@media (max-width:1000px) {
  html[data-organization-theme] .role-demo-layout { grid-template-columns: 1fr; gap: 24px; }
  html[data-organization-theme] .role-object { max-width: 470px; justify-self: center; }
  html[data-organization-theme] .role-demo-copy { max-width: 620px; width: 100%; justify-self: center; }
}
@media (max-width:700px) {
  html[data-organization-theme] #organization-stage :is(.questions-copy,.follow-copy) { top: 33%; }
  html[data-organization-theme] #organization-stage :is(.questions-copy,.follow-copy) h2 { font-size: 35px; }
  html[data-organization-theme] #organization-stage :is(.offer-stories,.agreement-stories) { gap: 12px; margin-top: 16px; }
  html[data-organization-theme] #organization-stage .offer-story {
    display: flex; gap: 7px; padding: 10px 2px; min-height: 0;
  }
  html[data-organization-theme] #organization-stage .offer-story .offer-illustration { width: 68px; height: 51px; max-height: 51px; }
  html[data-organization-theme] #organization-stage .offer-story strong { font-size: 18px; line-height: 1.15; }
  html[data-organization-theme] #organization-stage .offer-name { font-size: 13px; }
  html[data-organization-theme] #organization-stage .offer-phrase { font-size: 14px; line-height: 1.3; }
  html[data-organization-theme] #organization-stage .offer-boundary { font-size: 14px; line-height: 1.35; margin-top: 8px; }
  html[data-organization-theme] #organization-stage .agreement-story .organization-object { width: 80px; height: 60px; }
  html[data-organization-theme] .role-explorer { padding-inline: 20px; }
  html[data-organization-theme] .role-object { min-height: 355px; padding: 20px 0 64px; }
  html[data-organization-theme] .role-mark-card {
    width: 57%; max-width: 180px; min-height: 244px;
    padding: 20px 15px; gap: 20px;
  }
  html[data-organization-theme] :is(.role-invitation,.role-responsibility) {
    left: 40%; top: 30px; width: 57%; max-width: 180px;
    min-height: 248px; padding: 18px 14px;
  }
  html[data-organization-theme] :is(.role-invitation,.role-responsibility)>strong { font-size: 23px; margin-block: 21px; }
  html[data-organization-theme] :is(.role-invitation,.role-responsibility)>span { font-size: 11px; }
  html[data-organization-theme] :is(.role-invitation,.role-responsibility)>i { font-size: 13px; }
  html[data-organization-theme] .role-mark-card>span { font-size: 14px; }
  html[data-organization-theme] .role-ground-label { font-size: 14px; padding-inline: 5px; }
  html[data-organization-theme] .role-demo-copy h3 { font-size: 29px; }
  html[data-organization-theme] .reading-paths .path-object { width: 116px; height: 87px; }
}
@media (max-width:700px) and (max-height:740px) {
  html[data-organization-theme] #organization-stage :is(.questions-copy,.follow-copy) { top: 32%; }
  html[data-organization-theme] #organization-stage :is(.questions-copy,.follow-copy) h2 { font-size: 29px; }
  html[data-organization-theme] #organization-stage :is(.offer-stories,.agreement-stories) { margin-top: 10px; gap: 10px; }
  html[data-organization-theme] #organization-stage .offer-story { gap: 5px; padding-block: 8px; }
  html[data-organization-theme] #organization-stage .offer-story .offer-illustration { width: 60px; height: 45px; max-height: 45px; }
  html[data-organization-theme] #organization-stage .offer-story strong { font-size: 17px; }
  html[data-organization-theme] #organization-stage .agreement-story .organization-object { width: 72px; height: 54px; }
}
/* The no-motion view stays in document flow rather than borrowing hero offsets. */
html[data-organization-theme] body.is-static #organization-stage :is(.questions-copy,.follow-copy) { top: auto; }
@media (max-width:700px) {
  html[data-organization-theme] body.is-static #organization-stage :is(.offer-stories,.agreement-stories) { grid-template-columns: 1fr; }
  html[data-organization-theme] body.is-static #organization-stage .offer-story { display: grid; grid-template-columns: 80px minmax(0,1fr); padding: 16px; gap: 5px 18px; }
  html[data-organization-theme] body.is-static #organization-stage .offer-story strong { font-size: 23px; }
  html[data-organization-theme] body.is-static #organization-stage .offer-phrase { font-size: 17px; }
}
/* When a second choice appears, keep both captions and the complete mark
   readable. The cards may angle towards one another, but do not cover content. */
html[data-organization-theme] :is(.role-invitation,.role-responsibility) { left: 52%; }
html[data-organization-theme] .role-explorer:is([data-role-view=availability],[data-role-view=representation]) .role-mark-card {
  transform: translateX(-52%) rotate(-4deg);
}
@media(max-width:700px) {
  html[data-organization-theme] .role-explorer:is([data-role-view=availability],[data-role-view=representation]) .role-mark-card {
    width: 45%; transform: translateX(-58%) rotate(-3deg); padding-inline: 10px;
  }
  html[data-organization-theme] :is(.role-invitation,.role-responsibility) {
    left: 52%; width: 45%; padding-inline: 12px; min-height: 254px;
  }
  html[data-organization-theme] :is(.role-invitation,.role-responsibility)>strong {
    font-size: 21px; margin-block: 18px; line-height: 1.08;
  }
  html[data-organization-theme] :is(.role-invitation,.role-responsibility)>i { font-size: 12px; }
}
@media(min-width:701px) and (max-height:820px) {
  html[data-organization-theme] #organization-stage .agreement-story .organization-object {
    width: 96px; height: 72px; margin-top: 6px;
  }
}
@media(min-width:701px) and (min-height:741px) and (max-height:820px) {
  html[data-organization-theme] #organization-stage .follow-copy { top: 36%; }
}
@media(min-width:701px) {
  html[data-organization-theme] .role-object { min-height: 430px; }
}