/* Feedback round 3: approved responsive direction and two focused rebuilds. */

.hero-responsive-motion,
.hero-lede-short,
.deep-work-v8-demo,
.brain-mobile-sources,
.decision-mobile-prompt,
.decision-mobile-lenses {
  display: none;
}

/* Keep the responsive portrait films completely out of the desktop hero. */
@media (min-width: 1101px) {
  .static-opening-page .approved-hero .hero-responsive-motion {
    display: none !important;
  }
}

/* Desktop composition for the "keeps getting better" section — the Depth
   treatment, 2026-09-06.

   The problem this replaces: the source render is 2752x1536 and its top 34% is
   empty white. The old rules anchored it `center top` inside a section that was
   min-height max(760px, 55.8vw), so on a 1512px screen roughly 457px of an 844px
   section went by before the brain even began. It read as a large dead gap under
   the copy, and it made the brain look small.

   The fix: anchor the image to the BOTTOM at its natural aspect ratio and let the
   section's overflow:hidden clip the top. What gets clipped is exactly the empty
   white, never the phone, card or tablet along the bottom edge. Because the image
   height (55.8vw at full width) and the section height (42vw) are both in vw, the
   crop stays correct at every desktop width instead of being tuned for one.
   Verified brain fully visible at 1100, 1280, 1512 and 1920px.

   Do not reintroduce a percentage `height` on .learning-v4-visual here: that
   re-enables object-fit cover and starts clipping the devices off the bottom. */
@media (min-width: 1051px) {
  .feedback-v4 .learning-v4 {
    min-height: 42vw;
  }

  .feedback-v4 .learning-v4-visual {
    inset: auto 0 0 0;
    width: 100%;
    height: auto;
    /* Safety net only. The desktop render is 1.79:1, so its natural height is
       55.8vw and this cap never engages. It exists because `height:auto` trusts
       the image's aspect: if the portrait mobile render (941x1672) ever paints at
       a desktop width — a stale <picture> source during a window resize across
       1050px — it would be 177vw tall and bottom-anchoring would throw the brain
       hundreds of px above the section. The cap turns that into a plain crop. */
    max-height: 60vw;
    object-fit: cover;
    object-position: center 64%;
  }

  /* Longer, softer wash: the headline now sits over the top of the render, so the
     white has to carry the type further down before releasing the image. */
  .feedback-v4 .learning-v4::before {
    height: 52%;
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.97) 40%, rgba(255,255,255,.74) 68%, rgba(255,255,255,0) 100%);
  }

  .feedback-v4 .learning-v4-shell {
    padding: clamp(40px, 3.2vw, 58px) clamp(32px, 5vw, 92px) 0;
  }

  .feedback-v4 .learning-v4-heading h2 {
    font-size: clamp(56px, 5.1vw, 86px);
    text-shadow: 0 1px 0 rgba(255,255,255,.65);
  }

  .feedback-v4 .learning-v4-heading p {
    margin-top: 18px;
  }
}

/* The simplified Clone Yourself treatment is responsive-only. Desktop keeps
   the previously approved cinematic film and thought composition. */
@media (max-width: 1100px) {
  .static-opening-page .portrait-context {
  height: auto !important;
  min-height: 0 !important;
  padding: clamp(110px, 10vw, 170px) max(4vw, 36px) clamp(92px, 8vw, 140px);
  display: block;
  color: #0b0d0e;
  background: #f6f4ef !important;
}

  .static-opening-page .portrait-context-video,
  .static-opening-page .portrait-context::before,
  .static-opening-page .portrait-context::after {
  display: none !important;
  }

  .static-opening-page .portrait-context .context-film-copy {
  position: relative;
  inset: auto;
  z-index: 3;
  width: min(1180px, 100%);
  margin: 0 auto;
  color: #0b0d0e;
  }

  .static-opening-page .portrait-context .context-film-kicker {
  color: #b9683d;
  }

  .static-opening-page .portrait-context .context-film-copy h2 {
  max-width: 1000px;
  margin: 16px 0 0;
  color: #0b0d0e;
  font-size: clamp(62px, 6.8vw, 112px);
  line-height: .88;
  letter-spacing: -.07em;
  }

  .static-opening-page .portrait-context .context-film-copy > p:last-child {
  max-width: 680px;
  margin: 24px 0 0;
  color: #62676a;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.5;
  }

  .static-opening-page .portrait-context .portrait-thoughts {
  position: relative;
  inset: auto;
  z-index: 3;
  width: min(1180px, 100%);
  margin: clamp(48px, 5vw, 78px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  pointer-events: auto;
  }

  .static-opening-page .portrait-context .portrait-thought {
  position: relative;
  inset: auto;
  width: auto;
  min-height: 138px;
  padding: 22px 22px 24px;
  display: flex;
  align-items: flex-end;
  border: 1px solid rgba(21, 24, 25, .13);
  border-radius: 16px;
  background: rgba(255, 255, 255, .76);
  box-shadow: none;
  backdrop-filter: blur(8px);
  transform: none;
  }

  .static-opening-page .portrait-context .portrait-thought::before,
  .static-opening-page .portrait-context .portrait-thought::after {
  display: none;
  }

  .static-opening-page .portrait-context .portrait-thought p {
  color: #17191a;
  font-size: clamp(16px, 1.15vw, 20px);
  line-height: 1.28;
  }
}

/* Deep Work is shown as the actual interview, not a mostly empty photograph. */
@media (max-width: 1050px) {
  .deep-work-v7 {
    min-height: 1000px;
    padding: 82px 32px 66px;
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(350px, 1.18fr);
    grid-template-areas:
      "copy demo"
      "questions demo";
    gap: 30px 34px;
    align-content: center;
    color: #11110f;
    background: linear-gradient(135deg, #fff 0%, #f4f1ea 100%);
  }

  .deep-work-v7::after,
  .deep-work-v7-media {
    display: none !important;
  }

  .deep-work-v7-copy {
    grid-area: copy;
    width: auto;
    margin: 0;
  }

  .deep-work-v7-copy h2 {
    max-width: 420px;
    font-size: clamp(62px, 8.2vw, 84px);
  }

  .deep-work-v7-copy > p:not(.eyebrow) {
    margin-top: 20px;
    font-size: 15px;
  }

  .deep-work-v7-questions {
    grid-area: questions;
    width: auto;
    margin: 0;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .deep-work-v7-question {
    display: none;
    min-height: 0;
    padding: 13px 14px 14px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .8);
  }

  .deep-work-v7-question:nth-of-type(1),
  .deep-work-v7-question:nth-of-type(3),
  .deep-work-v7-question:nth-of-type(5) {
    display: block;
  }

  .deep-work-v7-question-wide { grid-column: auto; }

  .deep-work-v7-result {
    grid-column: auto;
    margin-top: 4px;
    color: #b75f34;
  }

  .deep-work-v8-demo {
    grid-area: demo;
    min-height: 720px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    border: 1px solid rgba(28, 28, 25, .13);
    border-radius: 26px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 32px 80px rgba(44, 39, 31, .1);
  }

  .deep-work-v8-demo > header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    font-family: "DM Sans", system-ui, sans-serif;
  }

  .deep-work-v8-demo > header strong { font-size: 13px; }

  .deep-work-v8-demo > header span {
    color: #b9683d;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .deep-work-v8-progress {
    height: 3px;
    margin: 18px 0 34px;
    overflow: hidden;
    border-radius: 999px;
    background: #ece8e0;
  }

  .deep-work-v8-progress span {
    width: 16%;
    height: 100%;
    display: block;
    border-radius: inherit;
    background: #bd6b3d;
  }

  .deep-work-v8-demo article {
    max-width: 88%;
    padding: 18px 20px;
    border: 1px solid rgba(28, 28, 25, .1);
    border-radius: 18px;
  }

  .deep-work-v8-demo article small {
    display: block;
    margin-bottom: 8px;
    color: #b9683d;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .deep-work-v8-demo article p { margin: 0; }

  .deep-work-v8-question {
    margin-right: auto;
    background: #f3efe7;
    font-family: "Instrument Sans", sans-serif;
    font-size: 23px;
    font-style: italic;
    line-height: 1.2;
  }

  .deep-work-v8-answer {
    margin: 18px 0 18px auto;
    color: #fff;
    background: #25241f;
    font-size: 14px;
    line-height: 1.45;
  }

  .deep-work-v8-followup {
    margin-right: auto;
    background: #faf8f3;
    font-family: "Instrument Sans", sans-serif;
    font-size: 19px;
    font-style: italic;
    line-height: 1.25;
  }

  .deep-work-v8-input {
    min-height: 58px;
    margin-top: auto;
    padding: 10px 10px 10px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #77736d;
    border: 1px solid rgba(28, 28, 25, .14);
    border-radius: 14px;
    font-size: 12px;
  }

  .deep-work-v8-input b {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 9px;
    background: #191a17;
  }

  .deep-work-v8-demo footer {
    margin-top: 14px;
    color: #b9683d;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
  }
}

/* Approved vertical Everything film. */
@media (min-width: 721px) and (max-width: 1050px) {
  .feedback-v4 .brain-literal-v9-shell {
    height: max(960px, 100svh);
    aspect-ratio: auto;
  }

  .feedback-v4 .brain-literal-v9-video {
    inset: 0 0 0 auto;
    width: 59%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
  }

  .feedback-v4 .brain-literal-v9-copy {
    top: 104px;
    left: 38px;
    width: 45%;
    transform: none;
    text-align: left;
  }

  .feedback-v4 .brain-literal-v9-copy h2 {
    font-size: clamp(54px, 7.5vw, 76px);
  }

  .feedback-v4 .brain-literal-v9-copy p {
    margin-inline: 0;
  }
}

.brain-mobile-sources {
  position: absolute;
  z-index: 3;
  gap: 7px;
}

.brain-mobile-sources span {
  padding: 9px 10px;
  border: 1px solid rgba(14, 17, 19, .13);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 1050px) {
  .brain-mobile-sources {
    left: 38px;
    bottom: 74px;
    width: 43%;
    display: flex;
    flex-wrap: wrap;
  }
}

/* Approved live roundtable with three primary lenses split into role and question. */
@media (max-width: 1050px) {
  .feedback-v4 .decision-perspectives-v2 {
    min-height: 1000px;
    padding: 0;
    display: block;
  }

  .feedback-v4 .decision-perspectives-v2 .decision-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
  }

  .feedback-v4 .decision-perspectives-v2 .decision-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    height: auto;
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.97) 25%, rgba(255,255,255,.04) 52%, rgba(255,255,255,.88) 100%);
  }

  .feedback-v4 .decision-perspectives-v2 .decision-heading {
    position: relative;
    z-index: 4;
    width: auto;
    margin: 0;
    padding: 54px 38px 0;
  }

  .feedback-v4 .decision-perspectives-v2 .decision-heading h2 {
    max-width: 720px;
    font-size: clamp(52px, 7.2vw, 72px);
  }

  .feedback-v4 .decision-perspectives-v2 .decision-heading > p,
  .feedback-v4 .decision-perspectives-v2 .adviser-shirt-labels,
  .feedback-v4 .decision-perspectives-v2 .adviser-thoughts,
  .feedback-v4 .decision-perspectives-v2 .decision-synthesis {
    display: none;
  }

  .decision-mobile-prompt {
    position: absolute;
    right: 38px;
    bottom: 146px;
    left: 38px;
    z-index: 5;
    padding: 18px 20px;
    display: block;
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 16px 40px rgba(20, 23, 24, .1);
  }

  .decision-mobile-prompt small,
  .decision-mobile-lenses b {
    display: block;
    color: #b9683d;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .decision-mobile-prompt strong {
    display: block;
    margin-top: 7px;
    font-size: 20px;
  }

  .decision-mobile-lenses {
    position: absolute;
    right: 38px;
    bottom: 42px;
    left: 38px;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
  }

  .decision-mobile-lenses span {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid rgba(15, 18, 20, .12);
    border-radius: 10px;
    background: rgba(255, 255, 255, .94);
  }

  .decision-mobile-lenses small {
    display: block;
    margin-top: 5px;
    color: #17191a;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
  }
}

/* Approved grounded Always Current image. */
@media (min-width: 681px) and (max-width: 1050px) {
  .feedback-v4 .learning-v4 {
    min-height: 1000px;
  }

  .feedback-v4 .learning-v4::before {
    inset: 0;
    width: 64%;
    height: 100%;
    background: linear-gradient(90deg, #fff 0%, #fff 70%, rgba(255,255,255,0) 100%);
  }

  .learning-v4-picture {
    position: absolute;
    inset: 0 0 0 auto;
    width: 58%;
    height: 100%;
    display: block;
  }

  .feedback-v4 .learning-v4-visual {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    object-position: center bottom;
  }

  .feedback-v4 .learning-v4-shell {
    width: 49%;
    margin: 0;
    padding: 100px 0 0 38px;
  }

  .feedback-v4 .learning-v4-heading {
    text-align: left;
  }

  .feedback-v4 .learning-v4-heading h2 {
    font-size: clamp(58px, 7.8vw, 76px);
  }

  .feedback-v4 .learning-v4-heading p { margin-inline: 0; }
}

/* The approved authentic motion opening belongs here and nowhere else. */
@media (max-width: 1100px) {
  .static-opening-page .approved-hero .hero-neural-background-video,
  .static-opening-page .approved-hero .hero-authentic-portrait {
    display: none;
  }

  .static-opening-page .hero-responsive-motion {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 1;
    width: 58%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .static-opening-page .hero-tablet-motion { display: block; }
  .static-opening-page .hero-mobile-motion { display: none; }

  .static-opening-page .approved-hero-wash {
    background: linear-gradient(90deg, #fff 0%, #fff 37%, rgba(255,255,255,.9) 49%, rgba(255,255,255,.04) 72%);
  }

  .static-opening-page .approved-hero .hero-shell {
    align-items: flex-start;
    padding-top: 235px;
  }

  .static-opening-page .approved-hero .hero-copy {
    width: 51%;
  }

  .static-opening-page .approved-hero h1 {
    font-size: clamp(56px, 7.4vw, 72px);
  }

  .static-opening-page .approved-hero .hero-lede {
    max-width: 390px;
    font-size: 14px;
    line-height: 1.48;
  }

  .static-opening-page .approved-hero .hero-lede-long { display: none; }
  .static-opening-page .approved-hero .hero-lede-short { display: block; }

  .static-opening-page .approved-hero .hero-support { display: none; }
}

@media (max-width: 680px) {
  .static-opening-page .portrait-context {
    padding: 86px 18px 78px;
  }

  .static-opening-page .portrait-context .context-film-copy h2 {
    max-width: 9ch;
    font-size: clamp(52px, 15vw, 64px);
  }

  .static-opening-page .portrait-context .context-film-copy > p:last-child {
    max-width: 28ch;
    font-size: 14px;
  }

  .static-opening-page .portrait-context .portrait-thoughts {
    margin-top: 36px;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .static-opening-page .portrait-context .portrait-thought {
    min-height: 0;
    padding: 18px 18px 19px;
    display: block !important;
  }

  .static-opening-page .portrait-context .portrait-thought p {
    font-size: 16px;
  }

  .deep-work-v7 {
    min-height: 0;
    padding: 74px 0 76px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .deep-work-v7-copy {
    order: 1;
    padding: 0 18px;
  }

  .deep-work-v7-copy h2 {
    font-size: clamp(56px, 16.5vw, 68px);
  }

  .deep-work-v8-demo {
    order: 2;
    min-height: 610px;
    margin: 32px 14px 0;
    padding: 20px;
    border-radius: 20px;
  }

  .deep-work-v8-demo > header { align-items: flex-start; }
  .deep-work-v8-demo > header span { max-width: 120px; text-align: right; line-height: 1.3; }
  .deep-work-v8-progress { margin: 15px 0 24px; }
  .deep-work-v8-demo article { padding: 15px 16px; }
  .deep-work-v8-question { font-size: 20px; }
  .deep-work-v8-answer { font-size: 13px; }
  .deep-work-v8-followup { font-size: 17px; }

  .deep-work-v7-questions {
    order: 3;
    margin: 18px 14px 0;
  }

  .feedback-v4 .brain-literal-v9-shell {
    height: max(820px, 100svh);
  }

  .feedback-v4 .brain-literal-v9-video {
    inset: auto 0 0;
    width: 100%;
    height: 68%;
    object-fit: cover;
    object-position: center bottom;
  }

  .brain-mobile-sources {
    left: 18px;
    bottom: 26px;
    width: calc(100% - 36px);
    justify-content: center;
  }

  .brain-mobile-sources span {
    padding: 8px 9px;
    font-size: 7px;
  }

  .feedback-v4 .decision-perspectives-v2 {
    min-height: max(820px, 100svh);
  }

  .feedback-v4 .decision-perspectives-v2 .decision-heading {
    padding: 42px 18px 0;
  }

  .feedback-v4 .decision-perspectives-v2 .decision-heading h2 {
    font-size: clamp(46px, 13vw, 54px);
  }

  .decision-mobile-prompt {
    right: 16px;
    bottom: 112px;
    left: 16px;
    padding: 14px;
  }

  .decision-mobile-prompt strong { font-size: 18px; }

  .decision-mobile-lenses {
    right: 16px;
    bottom: 20px;
    left: 16px;
    gap: 6px;
  }

  .decision-mobile-lenses span { padding: 10px 9px; }
  .decision-mobile-lenses b { font-size: 8px; }
  .decision-mobile-lenses small { font-size: 8px; }

  .learning-v4-picture {
    order: 2;
    width: 100%;
    height: 480px;
    display: block;
  }

  .feedback-v4 .learning-v4-visual {
    width: 100%;
    height: 100%;
    object-position: center bottom;
  }

  .static-opening-page .hero-tablet-motion { display: none; }

  .static-opening-page .hero-mobile-motion {
    display: block;
    inset: 0 0 auto;
    width: 100%;
    height: 55%;
  }

  .static-opening-page .approved-hero-wash {
    background: linear-gradient(180deg, rgba(255,255,255,.02) 22%, rgba(255,255,255,.25) 48%, #fff 59%, #fff 100%);
  }

  .static-opening-page .hero.chapter.approved-hero {
    height: max(844px, 100svh);
    min-height: 844px;
  }

  .static-opening-page .approved-hero .hero-shell {
    padding: 0 18px 34px;
  }

  .static-opening-page .approved-hero .hero-copy {
    position: absolute;
    top: 43%;
    left: 18px;
    width: calc(100% - 36px);
  }

  .static-opening-page .approved-hero h1 {
    max-width: 100%;
    font-size: clamp(40px, 10.5vw, 44px);
    letter-spacing: -.06em;
  }

  .static-opening-page .approved-hero .hero-lede {
    max-width: 350px;
    margin-top: 16px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-responsive-motion { display: none !important; }
}