/* Styling of the "Scientific career choice for your child" landing page.
   The sizes were measured off the original page
   main-experts.ru/ru/proforientacziya-dlya-podrostkov-test/ (Elementor) at a
   window width of 1440: colours #f5f4f3 / #fdfcfb / #88827c / #ceb58c, card
   radius 24px, button 265x68 with a 60px radius, section band 1400px,
   section padding 100px top and bottom.

   This file comes second, after style.css: the font, reset, body typography, logo and
   footer come from there — the same as on rebenok/vuz. Only what those pages do not
   have lives here. Putting this into the shared style.css is not an option: the same
   rules would then load for two simple pages that do not need them.

   IMPORTANT about vw in clamp(). The original keeps its desktop sizes across the whole
   wide layout — from 1025 upwards they do not change, and at 1024 the page switches to
   the tablet column. So the coefficient is chosen so that the upper bound is reached
   already at 1025 (coefficient = size in pixels / 10.25): at any width from 1025 the
   values match the original to the pixel, and vw only takes effect on tablet and phone,
   where the grid is different anyway. */

/* Weight 700 for five large lines: "Basic", "32%", "4-6" and two prices.
   On the original page they are set at 600-700, while the PT Sans from style.css is only
   400: the browser would draw synthetic bold at 56px. The subset is built for this page —
   Cyrillic, Latin, digits, the rouble sign (U+20BD; the 400 subsets do not have it, which
   is why the price has to be bold). */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/lp/a/pt-sans-700.woff2') format('woff2');
}

:root {
  /* The original page is darker and cooler in its text than rebenok/vuz. */
  --ink: #0f1d2d;
  --ink-soft: #2c3540;
  --card: #fdfcfb;
  --taupe: #88827c;
  --accent-dark: #baa26a;
  --shadow: 1px 1px 10px 1px #e4e0d8;
  --radius: 24px;

  --sec-pad: clamp(40px, 9.76vw, 100px); /* section padding: 100px */
  --gap-60: clamp(28px, 5.86vw, 60px);
  --gap-40: clamp(24px, 3.91vw, 40px);
  --gap-30: clamp(20px, 2.93vw, 30px);
  --gap-25: clamp(18px, 2.44vw, 25px);
  --gap-20: clamp(16px, 1.96vw, 20px);
  --col-gap-100: clamp(24px, 9.76vw, 100px);
  --col-gap-200: clamp(28px, 19.52vw, 200px);

  --fs-h1: clamp(2.125rem, 6.44vw, 4.125rem); /* 66 */
  --fs-h2: clamp(1.75rem, 5.47vw, 3.5rem); /* 56 */
  --fs-h3: clamp(1.375rem, 3.13vw, 2rem); /* 32 */
  --fs-lead: clamp(1.125rem, 2.35vw, 1.5rem); /* 24 */
  --fs-sub: clamp(1.125rem, 2.74vw, 1.75rem); /* 28 */
  --fs-body: clamp(1rem, 1.96vw, 1.25rem); /* 20 */
  --fs-small: clamp(0.9375rem, 1.76vw, 1.125rem); /* 18 */
}

body {
  color: var(--ink-soft);
}

/* The logo is inline-block (style.css), and the line under it adds ~7px of emptiness
   from the baseline. Here that would shift the whole page relative to the original,
   so we make it a block. */
.lp .logo {
  display: block;
}

.lp {
  padding: 28px 0 0;
}

/* Content band: 1440 maximum plus 20px of padding on each side — exactly as in the
   original, where the section is full-screen wide while its contents are capped at
   min(100%, 1440px). The padding lives on the rows rather than on .lp, because the
   "Price" section leaves the band and occupies the full screen width. */
.lp > * {
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: 20px;
}

.price-sec {
  max-width: none;
}

/* Section and its grid --------------------------------------------------- */

/* In the original every section has 100px above and 100px below, i.e. 200px between the
   contents of neighbouring sections. A single margin-top is not enough here — the page
   came out 330px shorter than the original. */
.sec {
  /* Vertically only: the side padding comes from `.lp > *`, and the shorthand
     padding would zero it out. */
  padding-block: var(--sec-pad);
}

.sec__head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-30);
}

/* The heading and subheading of the first section are narrower than the band in the original — 881px. */
.sec--anchor {
  padding-top: calc(var(--sec-pad) + 30px);
}

.sec__head--narrow {
  max-width: 881px;
}

.eyebrow {
  margin: 0;
  color: var(--taupe);
  font-size: var(--fs-lead);
  line-height: 1.3;
}

.h1 {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.2;
  /* The original page's theme tightens headings by 0.49px — that is what fits one more
     word onto the line. Without it "Personality profile, recommendations and directions"
     breaks in the wrong place. */
  letter-spacing: -0.49px;
}

.h2 {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.49px;
}

.lead {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.sub {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-sub);
  line-height: 1.5;
}

/* The line under the heading "Understanding character" is itself a heading in the
   original — hence the colour and the tightened letters. */
.sub--head {
  color: var(--ink);
  letter-spacing: -0.49px;
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--gap-25);
}

.photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

/* The image sits in its container absolutely positioned: then the row height is set by
   the container's `min-height` and the height of the neighbouring block, not by the file
   size. Otherwise <img> pulls its natural height into the calculation and the picture
   either grows (775px instead of 500) or fails to reach its neighbour. */
.photo > img,
.hero__art > img,
.report__shot > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Button ----------------------------------------------------------------- */

/* style.css draws the button of the neighbouring pages: a white 48px circle and 16px of
   padding, 80px of height in total. The button here is different — 265x68: a 38x38 icon
   with 15px of padding all round (that is what sets the height), 40px to the edge on the
   right. The white circle is drawn inside the icon itself, no background is needed under it. */
.hero__text .cta {
  margin-top: 20px;
}

.lp .cta {
  gap: 0;
  padding: 0 40px 0 0;
  font-size: var(--fs-body);
  line-height: 1.4;
}

.lp .cta__icon {
  width: 38px;
  height: 38px;
  margin: 15px;
  background: none;
  border-radius: 0;
}

/* Header ----------------------------------------------------------------- */

/* In the original the badge starts 110px from the top of the page. There is no logo
   there while we have one — so the offset is reduced by exactly its height, and
   everything below the badge lands on the original coordinates. */
.hero-sec {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-block: 52px var(--sec-pad);
}

.hero {
  display: grid;
  /* 840 + 20 + 540 = 1400 — the original's columns. */
  grid-template-columns: minmax(0, 840fr) minmax(0, 540fr);
  /* Both columns are the same height, as in the original: on a wide screen it is set by
     the image (494), on a narrow one by the text, and the image follows it. The text still
     starts from the top: it is in a flex column. */
  align-items: stretch;
  gap: 20px;
  width: 100%;
  /* style.css offsets the header of the neighbouring pages by 48px — here the offset is
     set by the section, otherwise the line drifts down relative to the original. */
  margin-top: 0;
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-20);
  height: 100%;
  /* style.css keeps the header text within 640px — the heading there is shorter. */
  max-width: none;
}

.hero__art {
  position: relative;
  width: 100%;
  /* The image is fitted into a 494px-tall box and pinned to the right — like the
     container background in the original (`contain`, position `100% 50%`). The box stretches
     with the row: at 1200 it is already 592px in the original. */
  min-height: 494px;
}

.hero__art > img {
  object-fit: contain;
  object-position: 100% 50%;
}

/* The "Career guidance / Personality + career" badge */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-25);
  margin: 0;
  padding: 12px;
  border-radius: 44px;
  background: var(--card);
  box-shadow: 1px 1px 10px 1px #e4e4e4;
  font-size: var(--fs-small);
  line-height: 1.3;
}

.pill__tag {
  /* The badge width and the right caption wrapping onto two lines are as in the original:
     245 + 25 + 152 + padding 12 = 448. */
  width: 245px;
  text-align: center;
  padding: 10px 15px;
  border-radius: 50px;
  background: var(--taupe);
  color: #fdfcfb;
  white-space: nowrap;
}

.pill__rest {
  max-width: 152px;
  color: var(--ink);
}

/* Ticked lists ----------------------------------------------------------- */

.checks {
  display: flex;
  flex-direction: column;
  margin: 0;
  /* In the original the list widget is offset 10px from the top, and the items 2.5px from
     each other. Without this the button under the list rises by 15px. */
  padding: 10px 0 0;
  list-style: none;
}

.checks li + li {
  margin-top: 2.5px;
}

.checks li {
  display: flex;
  align-items: center;
  padding-bottom: 2.5px;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: 1.4;
}

/* The tick is drawn in a 20x20 field but rendered scaled up to 32 — which makes it
   noticeably bolder than the source file. Together with its offset the block occupies
   49px: that is exactly how far right of the list edge the text starts in the original. */
.checks svg {
  flex: 0 0 auto;
  box-sizing: content-box;
  width: 32px;
  height: 32px;
  padding: 0 17px 0 0;
}

.checks li:last-child {
  padding-bottom: 0;
}

/* In the price card the icon is larger while the text matches the body text. */
.checks--price {
  /* The list offsets in the price card are its own: nothing on top, 4px between items. */
  padding-top: 0;
  gap: 4px;
}

.checks--price li + li {
  margin-top: 0;
}

.checks--price li {
  padding-bottom: 4px;
  font-size: var(--fs-body);
  line-height: 1.4;
}

.checks--price svg {
  width: 40px;
  height: 40px;
  padding: 0 15px 0 0;
}

/* What you get ----------------------------------------------------------- */

.benefits {
  display: grid;
  grid-template-columns: minmax(0, 570fr) minmax(0, 385fr) minmax(0, 385fr);
  /* 20px vertically between the cards, 30px horizontally. */
  gap: 20px 30px;
  /* The block height is fixed in the original: the dark card is 700px, and on the right
     there are two rows of 340px. Without this the right column shrinks to its text and the
     block drifts away from the original. */
  grid-template-rows: 1fr 1fr;
  min-height: 700px;
  margin-top: var(--gap-60);
}

.benefit {
  display: flex;
  flex-direction: column;
  gap: var(--gap-20);
}

.benefit__icon {
  display: block;
  line-height: 0;
}

.benefit__title {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-h3);
  line-height: 1.3;
}

.benefit__desc {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: 1.4;
}

/* The dark card with the report mock-up occupies both rows of the right-hand grid. */
.report {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-20);
  padding: var(--gap-40) var(--gap-25) var(--gap-25) var(--gap-40);
  background: var(--taupe);
  color: #fdfcfb;
}

.report__shot {
  position: relative;
  width: 100%;
  /* The report spread is fitted into a 339px-tall box — like the background in the original. */
  min-height: 339px;
}

.report__shot > img {
  object-fit: contain;
}

.report__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-20);
}

.report__title {
  margin: 0;
  color: #fdfcfb;
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.3;
}

.report__desc {
  margin: 0 0 10px;
  color: #fdfcfb;
  font-size: var(--fs-body);
  line-height: 1.4;
}

.report__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: #fdfcfb;
  font-size: var(--fs-body);
  text-decoration: none;
}

.report__link svg {
  width: 25px;
  height: 25px;
}

.report__link:hover {
  text-decoration: underline;
}

.report__link:focus-visible {
  outline: 3px solid #fdfcfb;
  outline-offset: 4px;
  border-radius: 4px;
}

/* When it helps ---------------------------------------------------------- */

.cases {
  display: grid;
  grid-template-columns: minmax(0, 840fr) minmax(0, 460fr);
  gap: var(--col-gap-100);
  margin-top: var(--gap-60);
}

.cases__list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-30);
  margin: 0;
  padding: 0;
  list-style: none;
}

.case {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-20);
}

.case__icon {
  flex: 0 0 auto;
  line-height: 0;
}

.case__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.case__title {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.5;
}

.case__desc {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: 1.4;
}

.cases__photo {
  min-height: 439px;
}

/* Two columns: text and photo / card and photo --------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--col-gap-100);
}

.split--text-wide {
  grid-template-columns: minmax(0, 700fr) minmax(0, 600fr);
}

.split--card-right {
  grid-template-columns: minmax(0, 573fr) minmax(0, 727fr);
}

.split--card-left {
  grid-template-columns: minmax(0, 740fr) minmax(0, 560fr);
}

.split--steps {
  grid-template-columns: minmax(0, 576fr) minmax(0, 624fr);
  gap: var(--col-gap-200);
}

.split--faq {
  grid-template-columns: minmax(0, 468fr) minmax(0, 732fr);
  gap: var(--col-gap-200);
}

.split__text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-30);
}

.photo--teens {
  min-height: 500px;
}

.photo--teens > img {
  /* The crop is raised by 169px — exactly like the background in the original. Pixels
     specifically, not percentages: at a different column width a percentage would give a
     different crop (at 1920 the discrepancy was 16px). */
  object-position: 0 -169px;
}

.photo--nasa {
  min-height: 676px;
}

.photo--laptop {
  min-height: 539px;
}

.method {
  display: flex;
  flex-direction: column;
  gap: var(--gap-60);
  padding: var(--gap-30) var(--gap-30) var(--gap-60);
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-20);
}

.stat__num {
  margin: 0 0 5px;
  color: var(--ink);
  font-size: clamp(2rem, 4.69vw, 3rem); /* 48 */
  font-weight: 700;
  line-height: 1.3;
}

.stat__label {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: 1.4;
}

/* How the testing works -------------------------------------------------- */

.steps {
  display: flex;
  flex-direction: column;
  gap: var(--gap-40);
  margin: 0;
  padding: var(--gap-40);
  list-style: none;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-30);
}

.step__icon {
  flex: 0 0 auto;
  padding-top: 8px;
  line-height: 0;
}

.step__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.step__title {
  margin: 0;
  padding-top: 7px;
  color: var(--ink);
  font-size: var(--fs-h3);
  line-height: 1.3;
}

.step__desc {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: 1.3;
}

/* Price ------------------------------------------------------------------ */

.price-sec {
  text-align: center;
}

.price {
  display: flex;
  flex-direction: column;
  gap: var(--gap-30);
  /* A fraction of the section width: 406 of 1400 at 1440, 545 of 1880 at 1920 — in the
     original this is one and the same value. */
  width: 29%;
  max-width: none;
  /* In the original there are two 30px offsets between "Price" and the card. */
  margin: var(--gap-60) auto 0;
  padding: var(--gap-30) 31px;
  text-align: left;
}

.price__main {
  display: flex;
  flex-direction: column;
  gap: var(--gap-40);
}

.price__cta {
  padding-top: 10px;
}

.price__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.price__name {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
}

.price__what {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-lead);
  line-height: 1.3;
}

.price__tags {
  display: flex;
  flex-direction: column;
  gap: var(--gap-20);
}

.price__old,
.price__new {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.3;
}

.price__old {
  color: var(--taupe);
  text-decoration: line-through;
}

.price__new {
  color: var(--accent);
}

.price .cta {
  align-self: flex-start;
}

.fineprint {
  margin: 0;
  color: rgba(44, 53, 64, 0.68);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Questions and answers -------------------------------------------------- */

.faq__list {
  display: flex;
  flex-direction: column;
  padding: var(--gap-40);
}

/* The disclosure uses <details>: it works without a single line of JavaScript, from the
   keyboard and in the browser's find-on-page. The name attribute makes it exclusive —
   only one question stays open, like the accordion in the original. */
.faq__item {
  border-top: 1px solid var(--accent);
  padding-top: var(--gap-30);
  margin-bottom: var(--gap-30);
}

.faq__item:last-child {
  margin-bottom: 0;
}

.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-20);
  cursor: pointer;
  color: var(--ink);
  font-size: var(--fs-h3);
  line-height: 1.3;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
  border-radius: 4px;
}

.faq__chev {
  flex: 0 0 auto;
  /* The icon block must not stretch the question line above its own font size. */
  display: block;
  line-height: 0;
  margin-top: 11px;
  color: var(--accent-dark);
  transition: transform 0.2s ease;
}

.faq__item[open] .faq__chev {
  transform: rotate(180deg);
}

/* The answer opens smoothly, like the accordion on the original page. The browser does
   this itself: `interpolate-size` allows animating height to `auto`, and
   `::details-content` is the content of <details> under the heading. Where this is not
   supported yet, the answer opens instantly — as it did before this change. */
.faq__list {
  interpolate-size: allow-keywords;
}

.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
}

.faq__item[open]::details-content {
  block-size: auto;
}

.faq__item p {
  margin: 0;
  padding: 20px 0;
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: 1.3;
}

/* Footer ----------------------------------------------------------------- */

.footer {
  padding-bottom: 48px;
}

/* Layout on narrow screens ----------------------------------------------- */

/* The breakpoints are taken from the original: tablet is 1024 and below, phone is 767
   and below. The photo heights at each level are their own and were also measured. */

@media (max-width: 1024px) {
  .hero,
  .cases,
  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .hero {
    margin-top: 32px;
  }

  .benefits {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    min-height: 0;
  }

  .report {
    grid-row: auto;
  }

  /* The first screen goes to the text and the button, the image follows below — as in the
     original on a phone. */
  .hero__art {
    justify-self: center;
    max-width: 420px;
    min-height: 0;
    aspect-ratio: 636 / 703;
  }

  .report__shot {
    min-height: 339px;
  }

  .cases__photo {
    min-height: 596px;
  }

  .photo--teens {
    min-height: 504px;
  }

  .photo--teens > img {
    object-position: 0 -254px;
  }

  .photo--nasa,
  .photo--laptop {
    min-height: 788px;
  }

  /* The photo of the "gold standard" section comes after the text in the original, not before. */
  .split--card-right .photo {
    order: 2;
  }

  /* On a tablet the price card is wider — 60% of the band instead of 29%. */
  .price {
    width: 60%;
  }
}

@media (max-width: 767px) {
  .lp > * {
    padding-inline: 16px;
  }

  .stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .report__shot {
    min-height: 195px;
  }

  .cases__photo,
  .photo--nasa,
  .photo--laptop {
    min-height: 356px;
  }

  .photo--teens {
    min-height: 366px;
  }

  .photo--teens > img {
    object-position: 0 0;
  }

  .price {
    width: 100%;
    max-width: 406px;
  }

  /* On a phone the button takes the full width — a finger hits it without looking.
     We do not do this on a tablet: a 728px button looks like a stripe. */
  .lp .cta {
    align-self: stretch;
    width: 100%;
    justify-content: center;
  }

  .pill {
    align-items: center;
    width: 100%;
  }

  .pill__tag {
    width: auto;
  }

  .pill__rest {
    max-width: none;
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__chev,
  .faq__item::details-content {
    transition: none;
  }
}