/*
 * Why Boundlearn — phone portrait and short-landscape compositions.
 * Ownership stops at 760px portrait and short phone landscape; tablet,
 * standard desktop, and native-wide remain independently locked.
 */

@media (max-width:760px),
  (orientation:landscape) and (max-width:950px) and (max-height:500px) {
  .bl-why-page {
    --why-mobile-gutter:clamp(20px,5.65vw,28px);
    margin:0;
    overflow-x:clip;
    background:var(--why-paper);
  }

  .bl-why-editorial {
    color:var(--why-ink);
    font-family:"Manrope",system-ui,sans-serif;
  }

  .bl-why-kicker {
    color:var(--why-rose);
    font-size:10px;
    line-height:1.2;
    font-weight:850;
    letter-spacing:.18em;
  }

  .bl-why-hero {
    position:relative;
    min-height:calc(100svh - 64px);
    display:grid;
    grid-template-columns:1fr;
    align-content:start;
    overflow:hidden;
    padding:84px 22px 54px;
    background-color:var(--why-paper);
    background-image:url("/assets/media/boundlearn/boundlearn-why-hero-canvas-portrait-v1.png");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    isolation:isolate;
  }

  .bl-why-hero::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:rgba(251,248,242,.14);
  }

  .bl-why-hero-copy,
  .bl-why-folio {
    grid-column:1;
    min-width:0;
  }

  .bl-why-hero-copy {
    position:relative;
    z-index:2;
  }

  .bl-why-hero h1 {
    max-width:6.35em;
    margin:18px 0 0;
    color:var(--why-ink);
    font-size:clamp(48px,14vw,66px);
    line-height:.94;
    font-weight:790;
    letter-spacing:-.04em;
    text-wrap:wrap;
  }

  .bl-why-hero h1 span:first-child {
    display:block;
  }

  .bl-why-hero h1 span:nth-child(2),
  .bl-why-hero h1 em {
    display:inline;
    font-style:normal;
  }

  .bl-why-hero h1 span:nth-child(2)::after {
    content:" ";
  }

  .bl-why-hero h1 em {
    color:var(--why-rose);
  }

  .bl-why-hero-copy>p {
    max-width:39ch;
    margin:26px 0 0;
    color:var(--why-slate);
    font-size:15px;
    line-height:1.66;
    text-wrap:pretty;
  }

  .bl-why-scroll-link {
    min-height:44px;
    display:inline-flex;
    align-items:center;
    margin-top:23px;
    padding:10px 0 8px;
    border-bottom:2px solid var(--why-gold);
    color:var(--why-ink);
    font-size:10px;
    line-height:1.2;
    font-weight:850;
    letter-spacing:.12em;
    text-transform:uppercase;
  }

  .bl-why-folio {
    position:relative;
    min-height:430px;
    margin:36px 0 0;
    isolation:isolate;
  }

  .bl-why-folio::before {
    content:"";
    position:absolute;
    inset:5% 1% 7% 3%;
    z-index:-1;
    background:rgba(255,253,248,.96);
    box-shadow:0 22px 48px rgba(11,18,33,.16);
    transform:rotate(-1.1deg);
  }

  .bl-why-folio-wash {
    position:absolute;
    inset:10% 5% 12% 7%;
    z-index:0;
    border-top:14px solid rgba(207,118,94,.28);
    border-bottom:22px solid rgba(47,127,120,.2);
    transform:rotate(.7deg);
  }

  .bl-why-folio-student {
    position:absolute;
    right:7%;
    bottom:14%;
    z-index:2;
    width:72%;
    height:61%;
    object-fit:cover;
    object-position:center 35%;
    box-shadow:0 16px 34px rgba(11,18,33,.18);
    transform:rotate(1deg);
  }

  .bl-why-folio-note {
    position:absolute;
    top:10%;
    left:9%;
    z-index:3;
    max-width:58%;
    padding-bottom:7px;
    border-bottom:2px solid var(--why-rose);
    color:var(--why-ink);
    font-size:12px;
    line-height:1.25;
    font-weight:850;
    letter-spacing:.1em;
  }

  .bl-why-folio-paper {
    position:absolute;
    z-index:4;
    max-width:178px;
    padding:14px 16px;
    color:var(--why-ink);
    background:#FFFDF8;
    font-size:12px;
    line-height:1.45;
    font-weight:750;
    box-shadow:0 10px 24px rgba(11,18,33,.15);
  }

  .bl-why-folio-paper--question {
    top:27%;
    left:0;
    transform:rotate(-1.7deg);
  }

  .bl-why-folio-paper--mentor {
    right:0;
    bottom:7%;
    max-width:190px;
    border-top:3px solid var(--why-teal);
    transform:rotate(1.2deg);
  }

  .bl-why-folio figcaption {
    position:absolute;
    bottom:0;
    left:8%;
    z-index:4;
    max-width:80%;
    color:var(--why-ink);
    font-size:12px;
    line-height:1.35;
    font-weight:850;
    letter-spacing:.1em;
    text-transform:uppercase;
  }

  .bl-why-action,
  .bl-why-growth,
  .bl-why-guidance,
  .bl-why-family,
  .bl-why-cta {
    padding:78px 22px;
  }

  .bl-why-action {
    overflow:hidden;
    background-color:var(--why-paper);
    background-image:url("/assets/media/boundlearn/boundlearn-why-canvas.png");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    isolation:isolate;
  }

  .bl-why-action::before,
  .bl-why-growth::before,
  .bl-why-family::before,
  .bl-why-cta::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
  }

  .bl-why-action::before {
    background:rgba(251,248,242,.78);
  }

  .bl-why-action>header,
  .bl-why-growth>header,
  .bl-why-family>header {
    text-align:center;
  }

  .bl-why-action h2,
  .bl-why-growth h2,
  .bl-why-family h2,
  .bl-why-cta h2 {
    margin:16px auto 0;
    color:var(--why-ink);
    font-size:clamp(38px,10.8vw,48px);
    line-height:.99;
    font-weight:780;
    letter-spacing:-.04em;
  }

  .bl-why-action h2 {
    max-width:9ch;
  }

  .bl-why-action header p {
    max-width:39ch;
    margin:25px auto 0;
    color:var(--why-slate);
    font-size:15px;
    line-height:1.7;
    font-weight:560;
    text-align:left;
    text-wrap:pretty;
  }

  .bl-why-action-fold {
    position:relative;
    display:grid;
    gap:0;
    margin:50px 0 0;
    padding:0;
    list-style:none;
    counter-reset:why-action;
  }

  .bl-why-action-fold::before {
    content:"";
    position:absolute;
    top:28px;
    bottom:31px;
    left:17px;
    width:1px;
    background:rgba(11,18,33,.24);
  }

  .bl-why-action-fold li {
    position:relative;
    min-height:84px;
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    align-items:center;
    padding:10px 0;
    color:var(--why-ink);
    font-size:24px;
    line-height:1.05;
    font-weight:800;
    letter-spacing:-.025em;
    counter-increment:why-action;
  }

  .bl-why-action-fold li::before {
    content:"0" counter(why-action);
    position:relative;
    z-index:1;
    width:35px;
    height:35px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#FFFDF8;
    background:var(--why-coral);
    box-shadow:0 0 0 5px rgba(251,248,242,.82);
    font-size:9px;
    line-height:1;
    font-weight:850;
    letter-spacing:.08em;
  }

  .bl-why-action-fold li:nth-child(n+3)::before {
    background:var(--why-teal);
  }

  .bl-why-action-fold li::after {
    content:"";
    position:absolute;
    right:0;
    bottom:4px;
    left:46px;
    height:1px;
    background:rgba(11,18,33,.15);
  }

  .bl-why-growth {
    overflow:hidden;
    background-color:var(--why-paper);
    background-image:url("/assets/media/boundlearn/boundlearn-why-interaction-canvas-v1.png");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    isolation:isolate;
  }

  .bl-why-growth::before {
    background:rgba(245,242,236,.8);
  }

  .bl-why-growth h2 {
    max-width:12ch;
  }

  .bl-why-process {
    position:relative;
    display:grid;
    gap:0;
    margin:56px 0 0;
    padding:0;
    list-style:none;
  }

  .bl-why-process::before {
    content:"";
    position:absolute;
    top:30px;
    bottom:35px;
    left:27px;
    width:2px;
    background:linear-gradient(var(--why-coral),var(--why-lavender) 34%,var(--why-teal) 68%,var(--why-rose));
  }

  .bl-why-process li {
    --step-color:var(--why-coral);
    position:relative;
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:16px;
    min-height:126px;
    padding:0 0 34px;
  }

  .bl-why-process li[data-step="mentor"] { --step-color:var(--why-lavender); }
  .bl-why-process li[data-step="make"] { --step-color:var(--why-teal); }
  .bl-why-process li[data-step="explain"] { --step-color:var(--why-rose); }

  .bl-why-process li>span {
    position:relative;
    z-index:1;
    grid-row:1 / span 2;
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    border:6px solid rgba(251,248,242,.88);
    border-radius:50%;
    color:var(--why-clean);
    background:var(--step-color);
    box-shadow:0 8px 18px rgba(11,18,33,.13);
    font-size:10px;
    line-height:1;
    font-weight:850;
  }

  .bl-why-process h3 {
    align-self:end;
    margin:6px 0 7px;
    color:var(--why-ink);
    font-size:21px;
    line-height:1.14;
    font-weight:800;
    letter-spacing:-.025em;
  }

  .bl-why-process p {
    max-width:31ch;
    margin:0;
    color:#405064;
    font-size:14px;
    line-height:1.56;
  }

  .bl-why-capabilities {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 22px;
    margin:29px 0 0 74px;
  }

  .bl-why-capabilities section {
    min-width:0;
    padding:17px 0 20px;
    border-top:1px solid rgba(11,18,33,.24);
  }

  .bl-why-capabilities section:last-child {
    grid-column:1 / -1;
  }

  .bl-why-capabilities h3 {
    margin:0 0 7px;
    color:var(--why-rose);
    font-size:13px;
    line-height:1.2;
    font-weight:850;
  }

  .bl-why-capabilities section:nth-child(2) h3,
  .bl-why-capabilities section:nth-child(4) h3 {
    color:var(--why-teal);
  }

  .bl-why-capabilities p {
    margin:0;
    color:#405064;
    font-size:12px;
    line-height:1.55;
  }

  .bl-why-outcome-ribbon {
    position:relative;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px 18px;
    margin:52px -8px 0;
    padding:24px 20px;
    color:var(--why-ink);
    background:rgba(255,253,248,.96);
    box-shadow:0 16px 34px rgba(11,18,33,.11);
    transform:rotate(-.55deg);
  }

  .bl-why-outcome-ribbon::before,
  .bl-why-outcome-ribbon::after {
    content:"";
    position:absolute;
    top:-9px;
    width:64px;
    height:20px;
    background:rgba(212,175,55,.28);
  }

  .bl-why-outcome-ribbon::before { left:8%; transform:rotate(-3deg); }
  .bl-why-outcome-ribbon::after { right:8%; transform:rotate(2deg); }

  .bl-why-outcome-ribbon span {
    font-size:9px;
    line-height:1.35;
    font-weight:850;
    letter-spacing:.055em;
    text-transform:uppercase;
    white-space:nowrap;
  }

  .bl-why-guidance {
    color:var(--why-clean);
    background:var(--why-ink);
  }

  .bl-why-guidance-heading {
    display:block;
  }

  .bl-why-guidance-heading .bl-why-kicker {
    color:var(--why-coral);
  }

  .bl-why-guidance-title {
    margin:24px 0 0;
    color:rgba(245,242,236,.78)!important;
    font-size:13px;
    line-height:1.45;
    font-weight:750;
  }

  .bl-why-guidance-heading h2 {
    max-width:11ch;
    margin:12px 0 0;
    color:var(--why-clean);
    font-size:clamp(38px,10.5vw,47px);
    line-height:1;
    font-weight:780;
    letter-spacing:-.04em;
  }

  .bl-why-guidance-heading h2 em {
    color:var(--why-coral);
    font-style:normal;
  }

  .bl-why-guidance-heading>p:last-child {
    max-width:36ch;
    margin:25px 0 0;
    color:rgba(245,242,236,.78);
    font-size:14px;
    line-height:1.65;
  }

  .bl-why-guidance-spread {
    position:relative;
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
    margin-top:45px;
    color:var(--why-ink);
    box-shadow:none;
  }

  .bl-why-guidance-spread::after {
    content:none;
  }

  .bl-why-guidance-spread>section {
    min-width:0;
    padding:30px 24px 34px;
    background:#FBF7EF;
    box-shadow:0 18px 42px rgba(2,6,14,.26);
  }

  .bl-why-guidance-spread>section+section {
    background:#F3EEE4;
  }

  .bl-why-guidance-spread>section::after {
    position:absolute;
    right:24px;
    bottom:17px;
    color:var(--why-coral);
    font-size:9px;
    line-height:1;
    font-weight:850;
    letter-spacing:.16em;
  }

  .bl-why-guidance-spread>section:first-child::after { content:"US / 01"; }
  .bl-why-guidance-spread>section:last-child::after { content:"UK / 02"; color:var(--why-teal); }

  .bl-why-guidance-spread>section>span {
    display:block;
    margin-bottom:10px;
    color:var(--why-coral);
    font-size:10px;
    line-height:1.2;
    font-weight:850;
    letter-spacing:.16em;
    text-transform:uppercase;
  }

  .bl-why-guidance-spread>section+section>span {
    color:var(--why-teal);
  }

  .bl-why-guidance-spread h3 {
    max-width:17ch;
    margin:0;
    color:var(--why-ink);
    font-size:27px;
    line-height:1.08;
    font-weight:790;
    letter-spacing:-.03em;
  }

  .bl-why-guidance-quote {
    margin:29px 0 0;
    padding-top:22px;
    border-top:1px solid rgba(11,18,33,.2);
  }

  .bl-why-guidance-quote p {
    margin:0;
    color:var(--why-ink);
    font-size:16px;
    line-height:1.53;
    font-weight:650;
    letter-spacing:-.012em;
  }

  .bl-why-guidance-quote footer {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    margin-top:17px;
  }

  .bl-why-guidance-quote cite {
    color:var(--why-slate);
    font-size:12px;
    line-height:1.3;
    font-style:normal;
    font-weight:850;
  }

  .bl-why-guidance-quote a {
    min-height:44px;
    display:inline-flex;
    align-items:center;
    padding:8px 0 6px;
    border-bottom:2px solid var(--why-gold);
    color:var(--why-ink);
    font-size:10px;
    line-height:1.2;
    font-weight:850;
  }

  .bl-why-guidance-spread>section>p:last-of-type {
    max-width:39ch;
    margin:31px 0 20px;
    color:#405064;
    font-size:13px;
    line-height:1.65;
  }

  .bl-why-guidance-disclaimer {
    max-width:39ch;
    margin:28px auto 0;
    color:rgba(245,242,236,.72)!important;
    font-size:11px;
    line-height:1.6;
    text-align:center;
  }

  .bl-why-family {
    display:block;
    overflow:hidden;
    background-color:var(--why-paper);
    background-image:url("/assets/media/boundlearn/boundlearn-family-canvas-portrait-v1.png");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    isolation:isolate;
  }

  .bl-why-family::before {
    background:rgba(251,248,242,.67);
  }

  .bl-why-family h2 {
    max-width:9ch;
  }

  .bl-why-family header p {
    max-width:39ch;
    margin:25px auto 0;
    color:var(--why-slate);
    font-size:15px;
    line-height:1.7;
    text-align:left;
    text-wrap:pretty;
  }

  .bl-why-family>ol {
    position:relative;
    display:grid;
    gap:0;
    margin:45px 0 0;
    padding:0;
    list-style:none;
  }

  .bl-why-family li {
    position:relative;
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    column-gap:14px;
    padding:24px 0;
    border-top:1px solid rgba(11,18,33,.2);
  }

  .bl-why-family li:last-child {
    border-bottom:1px solid rgba(11,18,33,.2);
  }

  .bl-why-family li>span {
    grid-row:1 / span 2;
    color:var(--why-coral);
    font-size:11px;
    line-height:1.3;
    font-weight:850;
    letter-spacing:.14em;
  }

  .bl-why-family li:nth-child(2)>span { color:var(--why-teal); }
  .bl-why-family li:nth-child(3)>span { color:var(--why-rose); }

  .bl-why-family h3 {
    margin:0 0 7px;
    color:var(--why-ink);
    font-size:19px;
    line-height:1.18;
    font-weight:800;
    letter-spacing:-.02em;
  }

  .bl-why-family li p {
    max-width:34ch;
    margin:0;
    color:#405064;
    font-size:14px;
    line-height:1.6;
  }

  .bl-why-cta {
    min-height:590px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    text-align:center;
    background-color:#FAF5EC;
    background-image:url("/assets/media/boundlearn/boundlearn-why-canvas.png");
    background-position:center 64%;
    background-size:cover;
    background-repeat:no-repeat;
    isolation:isolate;
  }

  .bl-why-cta::before {
    background:rgba(251,248,242,.68);
  }

  .bl-why-cta h2 {
    max-width:12ch;
  }

  .bl-why-cta>p {
    max-width:39ch;
    margin:25px auto 0;
    color:#405064;
    font-size:15px;
    line-height:1.67;
    text-align:left;
    text-wrap:pretty;
  }

  .bl-why-cta>div {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    margin-top:30px;
  }

  .bl-why-cta a {
    width:min(292px,100%);
    min-height:49px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 20px;
    border:0;
    border-radius:0;
    color:var(--why-ink);
    background:transparent;
    font-size:10px;
    line-height:1.25;
    font-weight:850;
    letter-spacing:.13em;
    text-transform:uppercase;
  }

  .bl-why-cta a:first-child {
    color:var(--why-paper);
    background:var(--why-coral);
    clip-path:polygon(2% 4%,98% 0,100% 90%,4% 100%,0 22%);
  }

  .bl-why-cta a:last-child {
    color:var(--why-teal);
    border-bottom:1px solid currentColor;
  }

  .bl-why-footer {
    width:100%!important;
    padding:36px var(--why-mobile-gutter) 24px!important;
    color:var(--why-paper)!important;
    background:var(--why-ink)!important;
  }

  .bl-why-footer>div {
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }

  .bl-why-footer .bl-hub-footer-grid {
    gap:24px 18px!important;
    padding-bottom:26px!important;
  }

  .bl-why-footer [data-bl-footer-copy],
  .bl-why-footer .bl-hub-footer-links a,
  .bl-why-footer [data-bl-footer-slogan],
  .bl-why-footer [data-bl-footer-copyright] {
    color:var(--why-paper)!important;
  }
}

@media (orientation:landscape) and (max-width:950px) and (max-height:500px) {
  .bl-why-page {
    --why-mobile-gutter:clamp(30px,5.2vw,52px);
  }

  .bl-why-hero {
    min-height:calc(100svh - 50px);
    grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr);
    column-gap:clamp(28px,4.6vw,48px);
    align-items:center;
    padding:26px var(--why-mobile-gutter) 30px;
    background-image:url("/assets/media/boundlearn/boundlearn-why-hero-canvas-landscape-v1.png");
    background-position:center;
  }

  .bl-why-hero::after {
    background:rgba(251,248,242,.08);
  }

  .bl-why-hero-copy {
    grid-column:1;
  }

  .bl-why-hero .bl-why-kicker {
    font-size:9px;
  }

  .bl-why-hero h1 {
    max-width:none;
    margin-top:11px;
    font-size:clamp(38px,5.65vw,48px);
    line-height:.88;
  }

  .bl-why-hero h1 span,
  .bl-why-hero h1 em {
    display:block;
  }

  .bl-why-hero h1 span:nth-child(2)::after {
    content:none;
  }

  .bl-why-hero-copy>p {
    max-width:38ch;
    margin-top:15px;
    font-size:12px;
    line-height:1.48;
  }

  .bl-why-scroll-link {
    min-height:40px;
    margin-top:11px;
    padding-block:7px 5px;
    font-size:8.5px;
  }

  .bl-why-folio {
    grid-column:2;
    min-height:280px;
    margin:0;
  }

  .bl-why-folio::before {
    inset:5% 2% 6% 3%;
  }

  .bl-why-folio-wash,
  .bl-why-folio-note,
  .bl-why-folio-paper--question,
  .bl-why-folio figcaption {
    display:none;
  }

  .bl-why-folio-student {
    right:9%;
    bottom:11%;
    width:82%;
    height:76%;
  }

  .bl-why-folio-paper--mentor {
    right:-2%;
    bottom:4%;
    display:block;
    max-width:164px;
    padding:11px 13px;
    font-size:12px;
  }

  .bl-why-action,
  .bl-why-growth,
  .bl-why-guidance,
  .bl-why-family,
  .bl-why-cta {
    padding:74px var(--why-mobile-gutter);
  }

  .bl-why-action>header,
  .bl-why-growth>header,
  .bl-why-family>header {
    max-width:680px;
    margin-inline:auto;
  }

  .bl-why-action h2,
  .bl-why-growth h2,
  .bl-why-family h2,
  .bl-why-cta h2 {
    font-size:clamp(39px,5.2vw,46px);
  }

  .bl-why-action header p,
  .bl-why-family header p,
  .bl-why-cta>p {
    max-width:57ch;
    font-size:14px;
  }

  .bl-why-action-fold,
  .bl-why-process,
  .bl-why-capabilities,
  .bl-why-family>ol {
    width:min(100%,680px);
    margin-right:auto;
    margin-left:auto;
  }

  .bl-why-capabilities {
    margin-top:29px;
  }

  .bl-why-process p,
  .bl-why-family li p {
    max-width:52ch;
  }

  .bl-why-guidance-heading,
  .bl-why-guidance-spread,
  .bl-why-guidance-disclaimer {
    width:min(100%,720px);
    margin-right:auto;
    margin-left:auto;
  }

  .bl-why-guidance-heading h2 {
    max-width:13ch;
    font-size:clamp(39px,5.2vw,46px);
  }

  .bl-why-guidance-heading>p:last-child {
    max-width:52ch;
  }

  .bl-why-guidance-spread {
    grid-template-columns:1fr;
    margin-top:45px;
  }

  .bl-why-guidance-spread>section {
    padding:36px 38px 40px;
  }

  .bl-why-guidance-quote footer {
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }

  .bl-why-family {
    background-image:url("/assets/media/boundlearn/boundlearn-family-canvas-landscape-v1.png");
  }

  .bl-why-family>ol {
    margin-top:45px;
  }

  .bl-why-cta {
    min-height:430px;
  }

  .bl-why-cta>div {
    flex-direction:row;
    justify-content:center;
    gap:20px;
  }

  .bl-why-cta a {
    width:auto;
    min-width:210px;
  }

  .bl-why-footer {
    padding-inline:var(--why-mobile-gutter)!important;
  }
}