/* Subject and SEO landing pages (primary-english … secondary-papers-online) and the
   Promotion page. Loaded after info-page.css and built from its tokens and
   components: the lede, section headings, tone cards, figures and closing sheet. */

/* First screen: a deep blue sheet with white type. The teacher stands on its lower edge, unframed, and fades into the blue where the name is set. */
.subject-hero{min-height:640px;padding-bottom:104px;border-radius:0 0 48px 48px;background:var(--deep)}
.subject-hero::before{content:none}
.subject-hero .page-width>div{position:relative;z-index:1;max-width:calc(100% - 490px)}
.subject-hero .info-eyebrow{color:#bcd4ff}
.subject-hero h1{color:#fff;font-size:clamp(34px,3.9vw,58px);line-height:1.07;letter-spacing:-.045em}
.subject-hero h1 .is-accent{color:#a9c8ff}
.subject-intro{max-width:62ch;margin-top:32px;animation:info-rise .9s var(--ease) .28s both}
.subject-intro p{color:#e3ecff;font-size:17px;line-height:1.65}
.subject-intro p+p{margin-top:16px}
.subject-intro a{color:#fff}
.subject-intro a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px}
.subject-teacher{position:absolute;right:max(56px,calc(50% - 600px));bottom:0;width:460px;height:min(calc(100% - 100px),540px);margin:0;animation:info-rise .9s var(--ease) .34s both}
.subject-teacher-photo{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,#000 46%,transparent 82%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,#000 46%,transparent 82%);mask-composite:intersect}
.subject-teacher-photo img{position:absolute;left:50%;top:0;width:auto;max-width:none;height:var(--portrait-height,150%);translate:calc(-1*var(--portrait-center,50%)) 0}
.subject-teacher figcaption{position:absolute;left:28px;right:28px;bottom:44px;color:#dbe7ff;font-size:14px;line-height:1.45}
.subject-teacher figcaption strong{display:block;margin-bottom:8px;color:#fff;font-size:27px;font-weight:600;line-height:1.1;letter-spacing:-.02em}
.subject-teacher figcaption strong::before{content:"";display:block;width:32px;height:2px;margin-bottom:16px;border-radius:1px;background:#ff823d}

/* Reasons: a ruled list with the heading on the left and the text beside it. */
.info-heading>p{max-width:60ch;margin-top:18px;font-size:17px;line-height:1.65}
.subject-rows{border-bottom:1px solid var(--line)}
.subject-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);align-items:start;gap:72px;padding-block:48px;border-top:1px solid var(--line)}
.subject-rows:first-child>.subject-row:first-child{padding-top:0;border-top:0}
.subject-row-head{position:sticky;top:124px}
.subject-row-head h2{color:var(--ink);font-size:clamp(26px,2.5vw,34px);font-weight:700;line-height:1.2;letter-spacing:-.03em}
.subject-row-head h3{color:var(--ink);font-size:clamp(22px,2.1vw,28px);font-weight:650;line-height:1.22;letter-spacing:-.025em}
.subject-row-number{display:block;margin-bottom:14px;color:var(--numeral);font-size:44px;font-weight:500;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.subject-row-body{min-width:0}
.subject-row .info-prose{max-width:none}
.subject-points{margin:28px 0 0;padding:0;list-style:none}
.subject-points li{position:relative;padding:24px 0 24px 44px;border-top:1px solid var(--line-soft)}
.subject-points li:last-child{padding-bottom:0}
.subject-points li::before{content:"";position:absolute;left:0;top:25px;width:26px;height:26px;border-radius:50%;background:#edf4ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231261df' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/15px no-repeat}
.subject-points.is-numbered{counter-reset:point}
.subject-points.is-numbered li::before{counter-increment:point;content:counter(point);display:grid;place-items:center;background:#edf4ff;color:var(--blue);font-size:14px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.subject-points h3{margin-bottom:8px;color:var(--ink);font-size:20px;font-weight:650;line-height:1.35;letter-spacing:-.015em}
.subject-points p{font-size:17px;line-height:1.65}
.subject-points a{color:var(--blue)}

/* Call to action: a navy panel closing the reasons. */
.subject-cta{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:48px;margin-top:72px;padding:44px 48px;border-radius:24px;background:#15365f;color:#fff}
.subject-cta h3{max-width:24em;color:#fff;font-size:clamp(22px,2.2vw,30px);font-weight:650;line-height:1.3;letter-spacing:-.025em}
.subject-cta h3 a{color:inherit}
.subject-cta h3 a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px}
.subject-cta .info-cta:focus-visible{outline:3px solid #fff;outline-offset:5px}

/* Figures: four across on the tinted band. */
.subject-stats{padding-block:72px}
.info-figures.is-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.info-figures.is-four>div{padding-block:4px;padding-right:28px}
.info-figures.is-four>div+div{padding-left:32px}
.info-figures.is-four dd{font-size:clamp(26px,2.6vw,38px);line-height:1.14;letter-spacing:-.04em}
.info-figures.is-four dt{margin-top:8px;font-size:16px}

/* Students' words on the tone cards. */
.subject-more{position:relative;display:inline-flex;align-items:center;min-height:48px;padding:10px 0 16px;color:var(--ink);font-size:16px;font-weight:600;line-height:1.4;letter-spacing:-.015em;text-decoration:none;white-space:nowrap;transition:color .18s ease}
.info-heading.is-row>.subject-more:last-child:not(:first-child){font-size:16px;line-height:1.4}
.subject-more::after{content:"";position:absolute;left:0;bottom:4px;width:32px;height:2px;border-radius:1px;background:var(--blue);transition:width .22s cubic-bezier(.22,1,.36,1)}
.subject-more:hover,.subject-more:focus-visible{color:var(--blue)}
.subject-more:hover::after,.subject-more:focus-visible::after{width:100%}
.subject-more:focus-visible{outline:2px solid var(--blue);outline-offset:6px;border-radius:2px}
.subject-quotes .info-card{padding:30px 32px 28px}
.subject-quotes blockquote{margin:0 0 32px}
.subject-quotes blockquote::before{content:"\201C";display:block;height:46px;color:var(--blue);font:400 76px/1 Georgia,'Times New Roman',serif}
.subject-quotes blockquote p{color:var(--ink);font-size:18px;font-weight:500;line-height:1.55}
.subject-person{display:flex;align-items:center;gap:14px;margin-top:auto}
.subject-person img{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover}
.subject-person strong{display:block;color:var(--ink);font-size:16px;font-weight:650;line-height:1.4}
.subject-person span{display:block;font-size:14px;line-height:1.45}
.subject-quotes .info-card:nth-child(3n+2) :is(blockquote p,.subject-person strong){color:#fff}
.subject-quotes .info-card:nth-child(3n+2) blockquote::before{color:#fff}
.subject-quotes .info-card:nth-child(3n) blockquote::before{color:#c94b0a}

/* Questions: the heading stays beside the list. */
.subject-faq{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1fr);align-items:start;gap:96px}
.subject-faq-aside{position:sticky;top:124px}
.subject-faq-aside .info-heading{margin-bottom:28px}
.subject-faq-aside .info-rule{width:56px;height:3px;margin-bottom:28px}
.subject-faq-aside h2{font-size:clamp(36px,3vw,42px);line-height:1.16;letter-spacing:-.035em}
.subject-faq-more{max-width:300px}
.subject-faq-more h3{color:var(--ink);font-size:18px;font-weight:650;line-height:1.4;letter-spacing:-.01em}
.subject-faq-more p{margin-top:6px;font-size:16px;line-height:1.65}
.subject-faq-more a{color:var(--blue);font-weight:600;text-underline-offset:5px}
.subject-faq-list{border-top:1px solid var(--line-strong)}
.subject-faq-list details{border-bottom:1px solid var(--line-strong)}
.subject-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:88px;padding:26px 0;color:var(--ink);font-size:21px;font-weight:600;line-height:1.4;letter-spacing:-.015em;list-style:none;cursor:pointer;transition:color .2s ease}
.subject-faq-list summary::-webkit-details-marker{display:none}
.subject-faq-list summary::after{content:"";flex:none;width:32px;height:32px;border-radius:50%;background:linear-gradient(var(--blue),var(--blue)) center/14px 2px no-repeat,linear-gradient(var(--blue),var(--blue)) center/2px 14px no-repeat,#fff}
.subject-faq-list details[open] summary{color:var(--blue)}
.subject-faq-list details[open] summary::after{background:linear-gradient(#fff,#fff) center/14px 2px no-repeat,var(--blue)}
.subject-faq-list summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:4px}
@media(hover:hover){.subject-faq-list summary:hover{color:var(--blue)}}
.subject-faq-answer{padding:0 30px 28px 0;font-size:17px;line-height:1.65}
.subject-faq-answer p+p{margin-top:14px}
.subject-faq-answer a{color:var(--blue);text-underline-offset:3px}

/* Promotion: the month's artwork beside the two ways to ask about it. */
.promo-hero.promo-hero{padding:150px 0 104px;text-align:center}
.promo-hero h1{font-size:clamp(96px,16.5vw,236px);line-height:.86;letter-spacing:-.07em}
.promo-art{position:relative;display:block;width:min(100%,440px);margin:-18px auto 0;rotate:-3deg;border-radius:28px;overflow:hidden;box-shadow:0 50px 80px -40px rgba(4,16,52,.85);transition:rotate .5s var(--ease),translate .5s var(--ease);animation:info-rise .9s var(--ease) .2s both}
.promo-art img{display:block;width:100%;height:auto}
.promo-art:focus-visible{outline:3px solid #fff;outline-offset:6px}
@media(hover:hover){.promo-art:hover{rotate:0deg;translate:0 -6px}}
.promo-hero .info-statement{max-width:none;margin:56px auto 0;color:#fff;font-size:clamp(22px,2.2vw,30px);font-weight:650;line-height:1.3;letter-spacing:-.02em;animation:info-rise .9s var(--ease) .3s both}
.promo-steps{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:920px;margin:32px auto 0;padding:0;list-style:none;text-align:left;counter-reset:step;animation:info-rise .9s var(--ease) .38s both}
.promo-steps li{counter-increment:step;padding:28px 30px 30px;border-radius:20px;background:#fff;color:var(--body);font-size:17px;line-height:1.65}
.promo-steps li::before{content:counter(step,decimal-leading-zero);display:block;margin-bottom:14px;color:#c94b0a;font-size:34px;font-weight:500;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.promo-steps a{color:var(--blue)}
.promo-layout.has-no-art .promo-art{display:none}
/* Closing: the pricing prompt on white, in the two-tone heading. */
.promo-closing h2{color:var(--ink);font-size:clamp(36px,3.8vw,56px);font-weight:700;line-height:1.13;letter-spacing:-.035em}
.promo-closing h2 span{display:block}
.promo-closing h2 span+span{color:var(--blue)}
.promo-closing p{max-width:580px;margin-top:22px;font-size:18px;line-height:1.65}

@media(max-width:1100px){
  .subject-hero{min-height:560px;padding-bottom:88px}
  .subject-hero .page-width>div{max-width:calc(100% - 330px)}
  .subject-teacher{right:max(24px,calc(50% - 480px));width:330px;height:min(calc(100% - 96px),440px)}
  .subject-teacher figcaption{left:20px;right:16px;bottom:36px}
  .subject-teacher figcaption strong{font-size:23px}
  .subject-row{gap:44px}
  .subject-faq{gap:64px}
  .subject-row{padding-block:40px}
  .subject-cta{gap:32px;margin-top:56px;padding:36px}
  .info-figures.is-four>div{padding-right:16px}
  .info-figures.is-four>div+div{padding-left:20px}
  .subject-quotes .info-card{padding:24px}
  .subject-quotes blockquote p{font-size:16px}
}
@media(max-width:900px){
  .subject-row-head,.subject-faq-aside{position:static}
  .subject-cta{flex-direction:column;align-items:flex-start}
  .info-figures.is-four{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .info-figures.is-four>div:nth-child(odd){padding-left:0;border-left:0}
  .info-cards.subject-quotes{grid-template-columns:1fr;gap:16px;padding-block:0}
  .info-cards.subject-quotes>.info-card{rotate:none;translate:none}
  .info-motion .info-cards.subject-quotes>[data-reveal].is-in{translate:none}
  .subject-quotes blockquote{margin-bottom:24px}
  .subject-quotes blockquote p{font-size:17px}
}
@media(max-width:760px){
  .subject-hero{min-height:0;padding-bottom:0;border-radius:0 0 30px 30px}

  .subject-hero .page-width>div{max-width:none}
  .subject-hero h1{font-size:clamp(31px,8.6vw,42px)}
  .subject-intro{margin-top:22px}
  .subject-intro p{font-size:16px}
  .subject-teacher{position:relative;right:auto;width:auto;height:340px;margin:20px -20px 0}
  .subject-teacher-photo{-webkit-mask-image:linear-gradient(180deg,#000 42%,transparent 76%);mask-image:linear-gradient(180deg,#000 42%,transparent 76%)}
  .subject-teacher figcaption{left:20px;right:20px;bottom:30px}
  .subject-teacher figcaption strong{font-size:24px}
  .info-heading>p{margin-top:14px;font-size:16px}
  .subject-row,.subject-faq{grid-template-columns:1fr;gap:16px}
  .subject-row{padding-block:30px}
  .subject-row-number{margin-bottom:10px;font-size:36px}
  .subject-points{margin-top:22px}
  .subject-points li{padding:20px 0 20px 40px}
  .subject-points li::before{top:20px}
  .subject-points h3{font-size:18px}
  .subject-points p{font-size:16px}
  .subject-cta{gap:24px;margin-top:44px;padding:28px 24px;border-radius:20px}
  .subject-cta .info-cta{width:100%;white-space:normal;text-align:center}
  .subject-stats{padding-block:52px}
  .info-heading.is-row>.subject-more:last-child:not(:first-child){min-height:44px;font-size:14px}
  .info-figures.is-four{row-gap:0}
  .info-figures.is-four>div,.info-figures.is-four>div:first-child{padding:22px 0}
  .info-figures.is-four>div:nth-child(-n+2){padding-top:0}
  .info-figures.is-four>div:nth-last-child(-n+2){padding-bottom:0}
  .info-figures.is-four>div:nth-child(even){padding-left:20px;border-left:1px solid var(--line-strong)}
  .info-figures.is-four>div:nth-child(odd){padding-right:12px}
  .info-figures.is-four>div:nth-child(2){border-top:0}
  .info-figures.is-four dd{font-size:clamp(22px,6.2vw,28px)}
  .info-figures.is-four dt{font-size:15px}
  .subject-faq{gap:28px}
  .subject-faq-aside h2{font-size:30px}
  .subject-faq-aside .info-rule{width:44px;margin-bottom:22px}
  .subject-faq-more{max-width:440px}
  .subject-faq-aside .info-heading{margin-bottom:22px}
  .subject-faq-list summary{gap:12px;min-height:56px;padding:12px 0;font-size:16px;font-weight:500;line-height:1.5}
  .subject-faq-answer{padding:0 0 28px;font-size:16px}
  .promo-hero.promo-hero{padding:44px 0 64px}
  .promo-hero h1{font-size:clamp(56px,17vw,96px);line-height:.9}
  .promo-art{width:min(100% - 24px,340px);margin-top:14px;border-radius:22px}
  .promo-hero .info-statement{margin-top:40px;font-size:22px}
  .promo-steps{grid-template-columns:1fr;gap:12px;margin-top:24px}
  .promo-steps li{padding:22px 22px 24px;font-size:16px}
  .promo-steps li::before{margin-bottom:10px;font-size:28px}
  .promo-closing h2{font-size:clamp(30px,8vw,40px)}
  .promo-closing p{margin-top:16px;font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .subject-intro,.subject-teacher{animation:none}
  .subject-faq-list summary,.promo-art,.subject-more,.subject-more::after{transition:none}
  .promo-art,.promo-hero .info-statement,.promo-steps{animation:none}
}