/* Mobile review 01. All presentation changes are scoped to phones or small tablets.
   The approved desktop cascade and copy are preserved. */
@media (max-width:1000px) {
  html {scroll-padding-top:96px}
  body { -webkit-text-size-adjust:100% }
  #wh-site-header .brand { flex-shrink:1 }
  #wh-site-header #main-nav {padding-bottom:max(32px,env(safe-area-inset-bottom));overscroll-behavior:contain}
  #wh-site-header #audience-menu a {min-height:48px}
  #wh-site-header #main-nav .nav-contact {min-height:48px;height:auto}
  body .button,body .cta-unified {max-width:100%}
  body .button>svg,body .cta-unified>svg,body .audience-cta>svg {flex-shrink:0}
  body .button>span,body .cta-unified>span {min-width:0}
  body input,body select,body textarea {font-size:16px}
  #footer.wh-unified-footer .footer-navigation .closing-column>a {display:flex;align-items:center;min-height:44px;font-size:14px;line-height:1.5}
  #footer.wh-unified-footer .footer-navigation .closing-column {gap:2px}
  #footer.wh-unified-footer .footer-legal a {display:inline-flex;align-items:center;min-height:44px}
  body dialog .wh-bloom-film-close {width:44px;height:44px;flex-basis:44px}
  body dialog [data-close] {min-width:44px;min-height:44px}
}
@media (min-width:761px) and (max-width:1000px) {
  body .estate-hero-layout {grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:32px}
  body .estate-hero h1 {font-size:clamp(40px,5.3vw,49px);line-height:1.07;text-wrap:balance}
  body .estate-hero .estate-eyebrow {font-size:14px;letter-spacing:.07em}
  body .estate-hero .estate-eyebrow:after {width:32px;flex-basis:32px}
}
@media (max-width:760px) {
  html {scroll-padding-top:92px}
  #wh-site-header .header-shell {padding-inline:22px;gap:14px}
  #wh-site-header .brand {max-width:calc(100% - 62px)}
  #wh-site-header #main-nav {padding-inline:24px}
  #wh-site-header #main-nav>a:not(.nav-contact),#wh-site-header #audience-toggle {font-size:21px;line-height:1.4}
  #footer.wh-unified-footer .footer-navigation {column-gap:22px;row-gap:28px;padding:32px 0}
  #footer.wh-unified-footer .footer-navigation .closing-column>p {font-size:14px;line-height:1.7;margin-top:6px}
  #footer.wh-unified-footer .footer-legal {padding-block:16px 10px;gap:8px 16px}
  #footer.wh-unified-footer .footer-legal>div {gap:18px;flex-wrap:wrap}
  body .button,body .cta-unified:not(.nav-contact) {min-height:48px;font-size:14px;line-height:1.4;white-space:normal;gap:14px}
  body .button>svg,body .cta-unified>svg {width:34px;height:34px;min-width:34px;flex:0 0 34px;aspect-ratio:1;padding:8px}
  body .estate-hero h1 {font-size:clamp(36px,9.6vw,44px);line-height:1.06;text-wrap:balance}
  body .estate-hero-image {height:clamp(290px,88vw,370px);min-height:0;max-height:none}
  body .estate-hero-image img {width:100%;height:100%;object-fit:cover}
  body .estate-hero-copy p,body .estate-overview-card p,
  body .estate-freedom-copy p,body .estate-journey-copy p,
  body .estate-suite-copy p,body .intelligence-item>p,
  body .marketing-item>p,body .step p {font-size:15px;line-height:1.75}
  /* Keep directory cards compact, but do not squeeze the CTA arrow beside long audience labels. */
  body[data-connected-page="index.html"] .audience-entry {display:grid;grid-template-columns:94px minmax(0,1fr);gap:13px 18px;padding-block:24px;align-items:start}
  body[data-connected-page="index.html"] .audience-image {grid-column:1;grid-row:1 / span 2;min-height:180px;height:100%}
  body[data-connected-page="index.html"] .audience-text {display:contents}
  body[data-connected-page="index.html"] .audience-text h3 {grid-column:2;grid-row:1;align-self:end;margin:0;font-size:25px;line-height:1.12;white-space:normal;text-wrap:balance}
  body[data-connected-page="index.html"] .audience-text p {grid-column:2;grid-row:2;margin:0;font-size:15px;line-height:1.7}
  body[data-connected-page="index.html"] .audience-text .audience-cta {grid-column:1 / -1;grid-row:3;width:fit-content;max-width:100%;justify-self:start;margin:2px 0 0;font-size:13px;min-height:48px;padding:7px 8px 7px 16px}
  body[data-connected-page="index.html"] .hero-copy-stack {width:100%}
  body[data-connected-page="index.html"] .hero-copy-stack p {font-size:16px;line-height:1.65;text-wrap:pretty}
  /* One readable marketing option per row. Retain the approved images and visual treatments. */
  body .marketing-grid {display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
  body .marketing-grid .marketing-item,
  body .marketing-grid .marketing-item:first-child {display:block;grid-column:auto;margin:0;min-width:0}
  body .marketing-grid .marketing-item .marketing-visual,
  body .marketing-grid .marketing-item:first-child .marketing-visual {width:100%;height:230px;margin:0 0 17px;grid-column:auto;grid-row:auto}
  body .marketing-grid .marketing-item h3,
  body .marketing-grid .marketing-item h4 {font-size:27px;line-height:1.15;margin:0 0 10px;align-self:auto}
  body .marketing-grid .marketing-item>p {max-width:none;margin:0}
  body .marketing-visual.social-visual {position:relative;overflow:hidden}
  body .marketing-visual.social-visual .social-card {width:40%;height:208px;max-width:130px;aspect-ratio:9/16;margin:0;top:13px;bottom:auto}
  body .marketing-visual.social-visual .social-back {left:calc(50% - 116px);right:auto;transform:rotate(-6deg)}
  body .marketing-visual.social-visual .social-front {left:auto;right:calc(50% - 116px);transform:rotate(6deg)}
  /* The existing shared preview sits directly under the selected description on mobile. */
  body .intelligence-layout {display:block}
  body .intelligence-list {width:100%}
  body .intelligence-item {padding-block:19px;scroll-margin-top:94px}
  body .intelligence-item>.intelligence-selector {min-height:48px;font-size:27px;line-height:1.17;padding-bottom:10px;align-items:center}
  body .wh-mobile-inline-preview {width:100%;max-width:100%;margin:20px 0 7px;position:relative}
  body .wh-mobile-inline-preview .intelligence-stage {width:100%;height:390px;min-height:0;aspect-ratio:auto}
  body .wh-mobile-inline-preview .ask-question-text {font-size:clamp(25px,7.1vw,32px);line-height:1.13}
  body .ask-question-controls {gap:6px;align-items:center;flex-wrap:wrap}
  body .ask-question-controls button {min-width:40px;min-height:44px}
  body .ask-question-controls .ask-next-question {margin-left:auto}
  /* How it works uses the same mobile preview proximity without changing its desktop tabs. */
  body.how-design-07 .library-layout {display:block;min-height:0}
  body.how-design-07 .library-panel {min-height:0}
  body.how-design-07 .library-tabs {gap:12px;grid-template-columns:1fr 1.35fr .85fr}
  body.how-design-07 .library-tab {min-height:68px;font-size:20px;line-height:1.14;padding:14px 0}
  body.how-design-07 .library-tab svg {display:none}
  body.how-design-07 .library-choices .choice {scroll-margin-top:94px}
  body.how-design-07 .library-choices .choice>button {min-height:48px;font-size:27px;padding-bottom:10px}
  body.how-design-07 .library-choices .choice>p {font-size:15px;line-height:1.7}
  body.how-design-07 .library-media.wh-mobile-inline-preview {height:390px;min-height:390px;max-height:390px;overflow:hidden}
  body.how-design-07 .library-media.wh-mobile-inline-preview>.media-state {height:390px;min-height:390px;max-height:390px}
  body.how-design-07 .question-switches {gap:5px 8px;align-items:center;left:20px;right:20px;bottom:13px;flex-wrap:wrap}
  body.how-design-07 .question-switches button {min-width:36px;min-height:44px;padding:6px 0}
  body.how-design-07 .question-switches .question-next {width:auto;margin-left:auto;gap:5px}
  body.how-design-07 .ask-example {left:20px;right:20px;bottom:89px;max-width:17ch;font-size:31px;line-height:1.14}
  body.how-design-07 .suite-photo {height:300px;margin-bottom:25px}
  /* Keep form labels and entries comfortable on a phone, without changing required fields. */
  body.talk-design-01 .talk-form input,body.talk-design-01 .talk-form select,body.talk-design-01 .talk-form textarea {font-size:16px;line-height:1.5}
  body.talk-design-01 .talk-form input,body.talk-design-01 .talk-form select {min-height:50px}
  body.talk-design-01 .talk-form label,body.talk-design-01 .form-help {font-size:14px;line-height:1.6}
  body.talk-design-01 .talk-form .form-privacy a {display:inline-flex;min-height:44px;align-items:center}
  body.faq-design-03 .topic-link {font-size:14px;min-height:52px;line-height:1.5}
  body.faq-design-03 .faq-answer p {font-size:15px;line-height:1.75}
}
@media (max-width:360px) {
  body[data-connected-page="index.html"] .audience-entry {grid-template-columns:82px minmax(0,1fr);column-gap:16px}
  body.how-design-07 .library-tab {font-size:18px}
  body .intelligence-item>.intelligence-selector {font-size:25px}
  body.how-design-07 .library-choices .choice>button {font-size:25px}
  body .wh-mobile-inline-preview .intelligence-stage {height:365px}
}
@media (max-width:760px) {
 body[data-connected-page="index.html"] .audience-text .audience-cta>svg {width:34px;height:34px;min-width:34px;max-width:34px;flex:0 0 34px;padding:8px;border-radius:50%}
}
@media (max-width:760px) {
 body .intelligence-stage .ask-example-controls {flex-wrap:wrap;gap:7px;align-items:center}
 body .intelligence-stage .ask-example-index {gap:4px}
 body .intelligence-stage .ask-example-index button {min-width:36px;min-height:44px;padding:7px 0}
 body .intelligence-stage .ask-example-next {min-height:44px;margin-left:auto;font-size:12px}
 body .intelligence-stage .ask-example-questions .estate-question {font-size:clamp(24px,6.8vw,30px);line-height:1.15}
}