/* Responsive reading layout: retain body type, reduce display type and empty space.
   Relative font units preserve browser text scaling; content is never clipped. */

  body[data-home] .hero {
    padding-block: clamp(20px, 2.2vw, 32px) clamp(28px, 2.8vw, 40px);
    gap: clamp(24px, 3.125vw, 40px);
    align-items: start;
  }
  body[data-home] .hero h1 {
    font-size: clamp(2rem, 1.25rem + 1.7vw, 3rem);
    line-height: 1.1;
    max-width: none;
    margin-block: 16px 20px;
  }
  body[data-home] .hero .lede { line-height: 1.65; }
  body[data-home] .hero .actions { margin-block: 22px; }
  body[data-home] .hero .person-line { margin-top: 22px; }
  body[data-home] .hero .range-line { margin-block: 16px; }
  body[data-home] .hero-proof { padding: 20px 22px 0; }
  body[data-home] .proof-story { padding-block: 18px; }
  body[data-home] .proof-story h2 { font-size: 1.375rem; line-height: 1.2; }
  body[data-home] .proof-heading { padding-bottom: 18px; }
  body[data-home] .proof-footer { padding-block: 16px; }

  main#main > .head { padding-block: 28px; }
  main#main > .head h1 {
    font-size: clamp(2rem, 1.25rem + 1.7vw, 2.75rem);
    line-height: 1.12;
    max-width: 26ch;
  }
  #restored-work-accounts .w3-header h2,
  #restored-how .page-intro h2 {
    font-size: clamp(1.875rem, 1.25rem + 1.6vw, 2.5rem);
    line-height: 1.15;
    margin-block: 12px 16px;
  }
  #restored-work-accounts .w3-header { margin-bottom: 24px; }
  #restored-how .page-intro { padding-block: 24px; }
  #restored-library .library-v1 .intro { padding-block: clamp(24px, 2.5vw, 32px) 36px; gap: clamp(24px, 3.75vw, 48px); }
  #restored-library .library-v1 .lede { font-size: clamp(2rem, 1.25rem + 1.7vw, 2.75rem); line-height: 1.1; margin-block: 12px 18px; }
  body[data-home] .section-heading h2,
  body[data-home] .practice-copy h2 { font-size: clamp(1.75rem, 1.25rem + 1.2vw, 2.25rem); line-height: 1.15; }

/* Stack columns before text becomes a narrow strip on tablets/small windows. */
@media (max-width: 1000px) {
  body[data-home] .hero { grid-template-columns: minmax(0, 1fr); }
  body[data-home] .hero-copy { min-width: 0; }
  body[data-home] .hero-proof { min-width: 0; width: auto; }
  #restored-library .library-v1 .intro { grid-template-columns: minmax(0, 1fr); }
}

/* One readable type scale inside the shared side-panel hosts. */
.fx-drawer > .fx-drawer-panel > h2 {
  font-size: clamp(1.5rem, 1.15rem + 1vw, 1.875rem);
  line-height: 1.2;
  margin-block: 16px 20px;
}
.fx-drawer .fx-drawer-close { position: sticky; top: 4px; z-index: 4; }
.fx-drawer[data-reader-motion] > .fx-drawer-panel { will-change: transform; }
#original-work-reader .work-original-account .head > h1 {
  font-size: clamp(1.5rem, 1.15rem + 1vw, 1.75rem);
  line-height: 1.2;
  max-width: none;
  margin-block: 12px 16px;
}
#original-work-reader .work-original-account .head > .lead {
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 65ch;
}
#original-work-reader .work-original-account h2 {
  font-size: clamp(1.375rem, 1.1rem + .8vw, 1.625rem);
  line-height: 1.25;
  margin-block: 24px 12px;
}
#original-work-reader .work-original-account .prose { max-width: 70ch; }
/* The journey's container rule otherwise forces a 32px heading in drawers. */
#original-work-reader .work-original-account .journey-proposal .jp-title {
  font-size: clamp(1.375rem, 1.1rem + .8vw, 1.625rem) !important;
}
@media (prefers-reduced-motion: no-preference) {
  #original-work-reader .work-original-mount:not(:empty),
  #original-work-reader .work-original-account:has(.head) {
    animation: reader-content-arrive 140ms ease-out;
  }
}
@keyframes reader-content-arrive { from { opacity: 0; } to { opacity: 1; } }

/* The Library and How pages use native readers with the same motion controller. */
#restored-library .library-v1 #library-original-reader-title,
#restored-how .reader-header h2 {
  font-size: clamp(1.5rem, 1.15rem + 1vw, 1.875rem);
  line-height: 1.2;
}
#restored-library .library-v1 .reader-head,
#restored-how .reader-header { padding: 18px clamp(18px, 2vw, 26px); }
#restored-library .library-v1 .reader-scroll,
#restored-how .reader-body { padding: 22px clamp(18px, 2vw, 26px) 32px; }
#restored-library .library-v1 #library-original-reader-content,
#restored-how .reader-body { font-size: 1rem; line-height: 1.65; }
#restored-library .library-v1 #library-original-reader-content h3,
#restored-how .reader-body h3 { font-size: 1.5rem; line-height: 1.25; }
#restored-library .library-v1 .reader-lead,
#restored-how .reader-body .lead { font-size: 1.25rem; line-height: 1.45 !important; }
#restored-library .library-v1 [data-library-reader][data-reader-motion]::backdrop,
#restored-how [data-drawer][data-reader-motion]::backdrop { animation-duration: 180ms; }

/* Homepage career readers: spacious content, measured motion, persistent controls. */
@media screen {
  html.js [data-home] .org[open] .org__body {
    --rpad: clamp(20px, 2.5vw, 36px);
    inset: max(calc(var(--head-h) + 12px), env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) auto;
    width: min(1200px, calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    max-height: calc(100dvh - var(--head-h) - 24px - env(safe-area-inset-bottom));
    padding: 0 var(--rpad) 28px;
    border-radius: 20px;
    transform: translateX(48px);
  }
  html.js [data-home] .org[open]:is(.org--in, .org--closing) .org__body {
    transition: transform 420ms cubic-bezier(.25,.8,.25,1), opacity 420ms cubic-bezier(.25,.8,.25,1);
  }
  html.js [data-home] .org[open].org--in:not(.org--closing) .org__body { transform: none; opacity: 1; }
  html.js [data-home] .org[open].org--closing .org__body { transform: translateX(48px); opacity: 0; transition-duration: 320ms; }
  html.has-reader [data-home]::after,
  html.reader-closing [data-home]::after { transition: opacity 320ms ease-out; }
  [data-home] .org__body .cigna-experiences-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 20px; }
  [data-home] .org__body .cigna-experience { padding: 20px; }
  [data-home] .org__body .cigna-experience-copy { font-size: 1rem; line-height: 1.65; }
  [data-home] .org__body .cigna-experience-flow > li { font-size: .8125rem; }
  [data-home] .org__body .cigna-experience-link { font-size: .875rem; }
  [data-home] .org__body .df-s { font-size: 1rem; line-height: 1.6; }
  [data-home] .org__body .org__team { font-size: clamp(1.5rem, 1.15rem + 1vw, 1.875rem); }
  @media (max-width: 760px), (max-height: 480px) {
    html.js [data-home] .org[open] .org__body {
      inset: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
      width: auto;
      max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
      transform: translateY(32px);
    }
    html.js [data-home] .org[open].org--closing .org__body { transform: translateY(32px); }
  }
  @media (prefers-reduced-motion: reduce) {
    html.js [data-home] .org[open] .org__body,
    html.js [data-home] .org[open]:is(.org--in, .org--closing) .org__body { transition: none; transform: none; opacity: 1; }
    html.has-reader [data-home]::after,
    html.reader-closing [data-home]::after { transition: none; }
  }
}

/* One fluid page frame: nested legacy shells must not add a second inset. */
@media screen {
  html:root { --page-max: none; --gutter: clamp(16px, 2.5vw, 48px); }
  body > .site-head .site-head__in { max-width: none; }
  main#main.page { width: 100%; max-width: none; }
  #restored-library { margin-inline: 0; }
  #restored-work-accounts .w3-shell,
  #restored-how,
  #restored-library .library-v1 .library-original-main { max-width: none; padding-inline: 0; }
  html.js [data-home] .org[open] .org__body { width: calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
  @media (max-width:760px), (max-height:480px) {
    html.js [data-home] .org[open] .org__body { width: auto; }
  }
}

/* The embedded Punchout collection has its own responsive layout. Inherited
   full-row subgrid placement previously stranded every card in column two.
   Keep the standalone five-stage connected diagram's container rules separate. */
:is(#org-amazon, #original-work-reader) :is(.org__original, #reader-mount, .work-original-mount) [data-flow="punchout"] { container-name: reader-punchout; }
:is(#org-amazon, #original-work-reader) :is(.org__original, #reader-mount, .work-original-mount) [data-flow="punchout"] .fl-steps {
  display: flex; flex-wrap: wrap; grid-column: 2; grid-template-columns: none; gap: 24px; margin: 0; padding: 0;
}
:is(#org-amazon, #original-work-reader) :is(.org__original, #reader-mount, .work-original-mount) [data-flow="punchout"] .fl-step {
  container: fl / inline-size;
  display: flex; flex-direction: column; flex: 1 1 calc((100% - 48px) / 3); gap: 12px;
  min-width: min(100%, 18rem); grid-column: auto; grid-row: auto;
}
:is(#org-amazon, #original-work-reader) :is(.org__original, #reader-mount, .work-original-mount) [data-flow="punchout"] .fl-step > .fl-wire { display: none; }
:is(#org-amazon, #original-work-reader) :is(.org__original, #reader-mount, .work-original-mount) [data-flow="punchout"] .fl-step > :is(.fl-disc, .fl-seek) { align-self: start; margin: 0; }
:is(#org-amazon, #original-work-reader) :is(.org__original, #reader-mount, .work-original-mount) [data-flow="punchout"] .fl-step > .fl-card {
  display: flex; flex-direction: column; width: 100%; flex: 1; gap: 12px; padding-bottom: 16px;
}
:is(#org-amazon, #original-work-reader) :is(.org__original, #reader-mount, .work-original-mount) [data-flow="punchout"] .fl-detail,
:is(#org-amazon, #original-work-reader) :is(.org__original, #reader-mount, .work-original-mount) [data-flow="punchout"] .fl-did { font-size: 1rem; line-height: 1.5; }
:is(#org-amazon, #original-work-reader) :is(.org__original, #reader-mount, .work-original-mount) [data-flow="punchout"] .fl-play { grid-column: 1; grid-row: 2; justify-self: center; }
:is(#org-amazon, #original-work-reader) :is(.org__original, #reader-mount, .work-original-mount) [data-flow="punchout"] .fl-take { grid-row: 3; container: fl / inline-size; grid-template-columns: minmax(0, 1fr); }
:is(#org-amazon, #original-work-reader) :is(.org__original, #reader-mount, .work-original-mount) [data-flow="punchout"] .fl-src { grid-row: 4; }
@container reader-punchout (max-width: 600px) {
  :is(#org-amazon, #original-work-reader) :is(.org__original, #reader-mount, .work-original-mount) [data-flow="punchout"] .fl-steps { grid-column: 1 / -1; grid-row: 3; }
  :is(#org-amazon, #original-work-reader) :is(.org__original, #reader-mount, .work-original-mount) [data-flow="punchout"] .fl-play { position: static; grid-row: 2; justify-self: start; }
  :is(#org-amazon, #original-work-reader) :is(.org__original, #reader-mount, .work-original-mount) [data-flow="punchout"] .fl-take { grid-row: 4; }
  :is(#org-amazon, #original-work-reader) :is(.org__original, #reader-mount, .work-original-mount) [data-flow="punchout"] .fl-src { grid-row: 5; }
}
/* Billing summaries inside a phone-sized career reader must wrap within it. */
@media (max-width: 600px) {
  #org-amazon .bi-flow .bi-rail { grid-template-columns: minmax(0, 1fr); }
  #org-amazon .bi-flow .bi-rail > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
  #org-amazon .bi-flow .bi-rail strong { min-width: 0; }
}

/* Pair introduction headings with their supporting text on roomy screens. */
@media screen and (min-width: 1024px) {
  main#main:has(> :is(#restored-work-accounts, #restored-how, #restored-library)) > .head {
    max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 48px);
  }
  main#main:has(> :is(#restored-work-accounts, #restored-how, #restored-library)) > .head > :is(.context, .caps, h1) { grid-column: 1; }
  main#main:has(> :is(#restored-work-accounts, #restored-how, #restored-library)) > .head > .lead { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; max-width: 65ch; }
  #restored-work-accounts .w3-header { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 48px); }
  #restored-work-accounts .w3-header > .eyebrow { grid-column: 1 / -1; }
  #restored-work-accounts .w3-header > h2 { grid-column: 1; grid-row: 2 / span 2; }
  #restored-work-accounts .w3-header > p:last-of-type { grid-column: 2; grid-row: 2; align-self: end; }
  #restored-work-accounts .w3-collection-count { grid-column: 2; grid-row: 3; margin-top: 16px; }
}