/*
 * Why Boundlearn — tablet portrait and landscape compositions.
 * Ownership is deliberately exact: 761–1180px viewports taller than short
 * phone landscape. Locked phone, desktop and native-wide layers stay separate.
 */

.bl-why-tablet-break { display:none; }

@media (min-width:761px) and (max-width:1180px) and (min-height:501px) {
  .bl-why-page {
    --why-tablet-gutter:clamp(42px,6vw,72px);
    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:11px;
    line-height:1.2;
    font-weight:850;
    letter-spacing:.18em;
  }

  .bl-why-hero {
    position:relative;
    min-height:calc(100svh - 76px);
    display:grid;
    grid-template-columns:repeat(8,minmax(0,1fr));
    gap:26px;
    align-items:center;
    overflow:hidden;
    padding:104px clamp(42px,6vw,72px) 74px;
    background-color:var(--why-paper);
    background-image:url("/assets/media/boundlearn/boundlearn-why-hero-canvas-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,.1);
  }

  .bl-why-hero-copy {
    position:relative;
    z-index:2;
    grid-column:1/span 5;
    min-width:0;
  }

  .bl-why-hero h1 {
    --why-tablet-hero-size:clamp(62px,7.2vw,76px);
    margin:18px 0 0;
    color:var(--why-ink);
    font-size:var(--why-tablet-hero-size);
    line-height:.94;
    font-weight:790;
    letter-spacing:-.04em;
  }

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

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

  .bl-why-hero-copy>p {
    max-width:47ch;
    margin:25px 0 0;
    color:var(--why-slate);
    font-size:16px;
    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;
    grid-column:5/-1;
    min-width:0;
    min-height:520px;
    margin:0;
    isolation:isolate;
  }

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

  .bl-why-folio-wash {
    position:absolute;
    inset:11% 6% 12% 7%;
    z-index:0;
    border-top:16px solid rgba(207,118,94,.27);
    border-bottom:26px solid rgba(47,127,120,.2);
    transform:rotate(.7deg);
  }

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

  .bl-why-folio-note {
    position:absolute;
    top:11%;
    left:9%;
    z-index:3;
    max-width:56%;
    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:190px;
    padding:15px 17px;
    color:var(--why-ink);
    background:#FFFDF8;
    font-size:12px;
    line-height:1.45;
    font-weight:750;
    box-shadow:0 11px 26px rgba(11,18,33,.15);
  }

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

  .bl-why-folio-paper--mentor {
    right:0;
    bottom:7%;
    max-width:202px;
    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:84%;
    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:104px clamp(42px,6vw,72px);
  }

  .bl-why-action,
  .bl-why-growth,
  .bl-why-family,
  .bl-why-cta {
    overflow:hidden;
    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 {
    display:grid;
    grid-template-columns:repeat(8,minmax(0,1fr));
    column-gap:26px;
    align-items:center;
    min-height:720px;
    background:var(--why-paper) url("/assets/media/boundlearn/boundlearn-why-canvas.png") center/cover no-repeat;
  }

  .bl-why-action::before { background:rgba(251,248,242,.75); }
  .bl-why-action>header { grid-column:1/span 4; }

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

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

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

  .bl-why-action-fold {
    position:relative;
    grid-column:5/-1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:38px 34px;
    margin:0;
    padding:0;
    list-style:none;
    counter-reset:why-action;
  }

  .bl-why-action-fold li {
    position:relative;
    min-height:112px;
    padding:34px 0 17px;
    border-bottom:1px solid rgba(11,18,33,.2);
    color:var(--why-ink);
    font-size:25px;
    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:absolute;
    top:0;
    left:0;
    color:var(--why-coral);
    font-size:10px;
    line-height:1;
    font-weight:850;
    letter-spacing:.15em;
  }

  .bl-why-action-fold li::after {
    content:"";
    position:absolute;
    bottom:-3px;
    left:0;
    width:76px;
    height:5px;
    background:var(--why-coral);
    clip-path:polygon(0 40%,20% 8%,43% 36%,67% 0,100% 27%,95% 78%,65% 60%,40% 100%,15% 69%,2% 88%);
  }

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

  .bl-why-growth {
    min-height:980px;
    background:var(--why-paper) url("/assets/media/boundlearn/boundlearn-why-interaction-canvas-v1.png") center/cover no-repeat;
  }

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

  .bl-why-growth>header {
    max-width:800px;
    margin-inline:auto;
    text-align:center;
  }

  .bl-why-growth h2 {
    max-width:13ch;
    margin-inline:auto;
  }

  .bl-why-process {
    position:relative;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:40px 46px;
    max-width:820px;
    margin:72px auto 0;
    padding:0;
    list-style:none;
  }

  .bl-why-process li {
    --step-color:var(--why-coral);
    position:relative;
    min-height:170px;
    padding:72px 12px 0 0;
    border-top:3px solid var(--step-color);
  }

  .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:absolute;
    top:-27px;
    left:0;
    z-index:1;
    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 {
    margin:0 0 8px;
    color:var(--why-ink);
    font-size:23px;
    line-height:1.14;
    font-weight:800;
    letter-spacing:-.025em;
  }

  .bl-why-process p {
    max-width:31ch;
    margin:0;
    color:var(--why-slate);
    font-size:14px;
    line-height:1.58;
  }

  .bl-why-capabilities {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0 30px;
    max-width:900px;
    margin:54px auto 0;
  }

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

  .bl-why-capabilities h3 {
    margin:0 0 7px;
    color:var(--why-rose);
    font-size:14px;
    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:var(--why-slate);
    font-size:13px;
    line-height:1.58;
  }

  .bl-why-outcome-ribbon {
    position:relative;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:13px 24px;
    max-width:920px;
    margin:58px auto 0;
    padding:25px 28px;
    color:var(--why-ink);
    background:rgba(255,253,248,.96);
    box-shadow:0 16px 34px rgba(11,18,33,.11);
    transform:rotate(-.45deg);
  }

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

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

  .bl-why-outcome-ribbon span {
    font-size:10px;
    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 {
    max-width:820px;
    margin-inline:auto;
    text-align:center;
  }

  .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:14px;
    line-height:1.45;
    font-weight:750;
  }

  .bl-why-guidance-heading h2 {
    max-width:12ch;
    margin:12px auto 0;
    color:var(--why-clean);
    font-size:clamp(48px,6vw,64px);
    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:48ch;
    margin:25px auto 0;
    color:rgba(245,242,236,.78);
    font-size:15px;
    line-height:1.65;
    text-align:left;
    text-wrap:pretty;
  }

  .bl-why-guidance-spread {
    position:relative;
    display:grid;
    grid-template-columns:1fr;
    gap:34px;
    width:min(100%,860px);
    margin:58px auto 0;
    color:var(--why-ink);
    box-shadow:none;
  }

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

  .bl-why-guidance-spread>section {
    min-width:0;
    padding:44px 46px 48px;
    background:#FBF7EF;
    box-shadow:0 22px 50px rgba(2,6,14,.3);
  }

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

  .bl-why-guidance-spread>section::after {
    position:absolute;
    right:34px;
    bottom:22px;
    color:var(--why-coral);
    font-size:10px;
    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:11px;
    color:var(--why-coral);
    font-size:11px;
    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:18ch;
    margin:0;
    color:var(--why-ink);
    font-size:31px;
    line-height:1.08;
    font-weight:790;
    letter-spacing:-.03em;
  }

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

  .bl-why-guidance-quote p {
    max-width:48ch;
    margin:0;
    color:var(--why-ink);
    font-size:18px;
    line-height:1.52;
    font-weight:650;
    letter-spacing:-.012em;
  }

  .bl-why-guidance-quote footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    margin-top:18px;
  }

  .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;
    flex:0 0 auto;
    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:59ch;
    margin:34px 0 20px;
    color:var(--why-slate);
    font-size:14px;
    line-height:1.66;
  }

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

  .bl-why-family {
    min-height:820px;
    background-color:var(--why-paper);
    background-image:url("/assets/media/boundlearn/boundlearn-family-canvas-landscape-v1.png");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
  }

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

  .bl-why-family>header,
  .bl-why-family>ol {
    width:min(100%,760px);
    margin-inline:auto;
  }

  .bl-why-family>header { text-align:center; }
  .bl-why-family h2 { max-width:10ch; margin-inline:auto; }

  .bl-why-family header p {
    max-width:49ch;
    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 {
    margin-top:48px;
    padding:0;
    list-style:none;
  }

  .bl-why-family li {
    position:relative;
    display:grid;
    grid-template-columns:52px minmax(0,1fr);
    column-gap:18px;
    padding:25px 0 27px;
    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:21px;
    line-height:1.18;
    font-weight:800;
    letter-spacing:-.02em;
  }

  .bl-why-family li p {
    max-width:51ch;
    margin:0;
    color:var(--why-slate);
    font-size:14px;
    line-height:1.6;
  }

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

  .bl-why-cta::before { background:rgba(251,248,242,.65); }
  .bl-why-cta h2 { max-width:13ch; margin-inline:auto; }

  .bl-why-cta>p {
    max-width:58ch;
    margin:25px auto 0;
    color:var(--why-slate);
    font-size:15px;
    line-height:1.67;
    text-wrap:pretty;
  }

  .bl-why-cta>div {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin-top:31px;
  }

  .bl-why-cta a {
    min-width:210px;
    min-height:49px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 22px;
    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 {
    color:var(--why-paper)!important;
    background:var(--why-ink)!important;
  }

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

@media (min-width:761px) and (max-width:900px) and (min-height:901px) and (orientation:portrait) {
  .bl-why-hero {
    min-height:calc(100svh - 56px);
    grid-template-columns:1fr;
    align-content:start;
    gap:0;
    padding:88px var(--why-tablet-gutter) 94px;
    background-image:url("/assets/media/boundlearn/boundlearn-why-hero-canvas-portrait-v1.png");
    background-position:center;
  }

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

  .bl-why-hero-copy { width:100%; }

  .bl-why-hero h1 {
    max-width:6.35em;
    --why-tablet-hero-size:clamp(68px,9.4vw,76px);
  }

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

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

  .bl-why-tablet-break { display:block; }

  .bl-why-hero-copy>p { max-width:52ch; font-size:16px; }

  .bl-why-folio {
    width:min(100%,640px);
    min-height:590px;
    margin:56px auto 0;
  }

  .bl-why-action {
    display:block;
    min-height:0;
    text-align:center;
  }

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

  .bl-why-action h2,
  .bl-why-growth h2,
  .bl-why-family h2 {
    margin-inline:auto;
  }

  .bl-why-action header p,
  .bl-why-family header p {
    max-width:49ch;
    margin-inline:auto;
    text-align:left;
  }

  .bl-why-action-fold {
    width:min(100%,660px);
    margin:64px auto 0;
    text-align:left;
  }

  .bl-why-growth { min-height:0; }

  .bl-why-process {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:52px 42px;
  }

  .bl-why-capabilities {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap-inline:34px;
  }

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

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

  .bl-why-guidance-spread { width:min(100%,660px); }

  .bl-why-guidance-spread>section { padding:42px 44px 47px; }

  .bl-why-family {
    min-height:980px;
    background-image:url("/assets/media/boundlearn/boundlearn-family-canvas-portrait-v1.png");
    background-position:center;
  }

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

  .bl-why-family>header,
  .bl-why-family>ol {
    width:min(100%,580px);
  }

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

  .bl-why-cta h2 { font-size:clamp(50px,6.8vw,58px); }
}

@media (min-width:901px) and (max-width:1180px) and (min-height:501px) and (orientation:landscape) {
  .bl-why-hero {
    min-height:calc(100svh - 56px);
    grid-template-columns:repeat(8,minmax(0,1fr));
    gap:26px;
    align-items:center;
    padding:54px var(--why-tablet-gutter) 58px;
    background-image:url("/assets/media/boundlearn/boundlearn-why-hero-canvas-v1.png");
    background-position:54% center;
  }

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

  .bl-why-hero h1 {
    max-width:none;
    font-size:clamp(56px,5.8vw,64px);
    line-height:.91;
  }

  .bl-why-hero h1 span:nth-child(2) { white-space:nowrap; }

  .bl-why-hero-copy>p {
    max-width:42ch;
    margin-top:20px;
    font-size:14px;
    line-height:1.58;
  }

  .bl-why-scroll-link { margin-top:17px; }

  .bl-why-folio {
    grid-column:5/-1;
    width:100%;
    min-height:500px;
  }

  .bl-why-folio-paper--question { left:-2%; }
  .bl-why-folio-paper--mentor { right:-1%; }

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

  .bl-why-action { min-height:650px; }

  .bl-why-action h2,
  .bl-why-growth h2,
  .bl-why-family h2,
  .bl-why-cta h2,
  .bl-why-guidance-heading h2 {
    font-size:clamp(48px,5.2vw,58px);
  }

  .bl-why-process {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:28px;
    max-width:none;
    margin-top:78px;
  }

  .bl-why-process li { min-height:190px; }

  .bl-why-process h3 { font-size:20px; }

  .bl-why-capabilities {
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:24px;
    max-width:none;
  }

  .bl-why-capabilities p { font-size:12px; }

  .bl-why-guidance-spread {
    grid-template-columns:1fr;
    width:min(100%,880px);
  }

  .bl-why-guidance-spread>section {
    min-width:420px;
    padding:46px 52px 50px;
  }

  .bl-why-guidance-quote p { font-size:18px; }

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

  .bl-why-family>header,
  .bl-why-family>ol { width:min(100%,760px); }

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