/*
 * SP CTA unification — 2026-09-03.
 * Canonical control: job-detail CTA, 16px type / 52px box / 44px+ tap target.
 * Desktop declarations are intentionally absent.
 */
@media (max-width: 767px) {
  :root {
    --sect-sp-cta-height: 52px;
    --sect-sp-cta-font: 16px;
    --sect-sp-cta-line: 24px;
    --sect-sp-cta-width: 293px;
    --sect-sp-cta-narrow: 260px;
    --sect-sp-cta-gap: 16px;
  }

  /* TOP hero is already the narrow reference; only normalize its one-pixel drift. */
  .sp-hero-jobs {
    height: var(--sect-sp-cta-height);
  }
  .sp-hero-jobs > span {
    top: 16px;
    font-size: var(--sect-sp-cta-font);
    line-height: 19.2px;
  }

  /* TOP: generated absolute canvases need their button children and old frames
     reduced together, otherwise the removed 22/52px survives as blank space. */
  .sect2-sp__cta,
  .sect3-sp__jobs-button,
  .sect4-sp__submit,
  .sect7-button,
  .sect10-sp [data-figma-node="229:5441"],
  .sect10-sp [data-figma-node="229:5444"] {
    height: var(--sect-sp-cta-height);
  }
  .sect2-sp__cta {
    left: 25px;
    width: var(--sect-sp-cta-width);
  }
  .sect2-sp__cta > span,
  .sect3-sp__jobs-button > span,
  .sect4-sp__submit > span,
  .sect7-sp [data-figma-node="229:5313"],
  .sect10-sp [data-figma-node="229:5442"],
  .sect10-sp [data-figma-node="229:5445"] {
    top: 14px;
    height: var(--sect-sp-cta-line);
    font-size: var(--sect-sp-cta-font);
    line-height: var(--sect-sp-cta-line);
    letter-spacing: 1.6px;
  }
  .sect2-sp__cta > span { left: 24px; width: 205px; }
  .sect2-sp__cta > img { left: 243px; top: 18.5px; }
  .sect2-sp__main { height: 426px; }
  .sect2 { height: calc(661.3053px * var(--sect-sp-scale, 1)); }
  .sect2-sp { height: 661.3053px; }

  .sect3-sp__jobs-button-wrap,
  .sect3-sp__jobs-button { height: var(--sect-sp-cta-height); }
  .sect3-sp__jobs-button > span { left: 41px; width: 145px; }
  .sect3-sp__jobs-button > img { left: 211px; top: 18.5px; }
  .sect3-sp__jobs-panel { height: 246px; }
  .sect3-sp__jobs { height: 443px; }
  .sect3 { height: calc(1358px * var(--sect-sp-scale, 1)); }
  .sect3-sp { height: 1358px; }

  .sect4-sp__submit > span { left: 35px; width: 184px; }
  .sect4-sp__submit > img { left: 240px; top: 18.5px; }
  .sect4-sp__result-main { height: 146px; }
  .sect4-sp__result { height: 259px; }
  .sect4-sp__graduate { top: 186px; }
  .sect4-sp__body { height: 829.7511px; }
  .sect4-sp__content,
  .sect4-sp__search { height: 739.7511px; }
  .sect4 { height: calc(1045.7511px * var(--sect-sp-scale, 1)); }
  .sect4-sp { height: 1045.7511px; }

  .sect5 a.sect5-cms__all {
    box-sizing: border-box;
    display: flex;
    width: min(var(--sect-sp-cta-width), 100%) !important;
    height: var(--sect-sp-cta-height) !important;
    min-height: var(--sect-sp-cta-height);
    margin: 28px auto 0;
    padding: 0 24px;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 12px;
    border: 1px solid #333;
    background: #fff;
    box-shadow: 6px 6px 0 #f7e730;
    color: #333;
    font-size: var(--sect-sp-cta-font);
    font-weight: 700;
    line-height: var(--sect-sp-cta-line);
    letter-spacing: 1.6px;
    text-decoration: none;
  }
  .sect5 a.sect5-cms__all img { width: 25px; height: 15px; }
  .sect5.sect5-cms { min-height: 0; }

  .sect7-sp .sect7-button,
  .sect7-sp [data-figma-node="229:5312"] {
    left: 41px;
    width: var(--sect-sp-cta-width);
    height: var(--sect-sp-cta-height);
  }
  .sect7-sp [data-figma-node="229:5313"] { left: 21px; width: 218px; }
  .sect7-sp [data-figma-node="229:5314"] { left: 247px; top: 18.5px; }
  .sect7 { --sect7-sp-height: 861.57px; }
  .sect7-sp { height: 861.57px; }

  .sect10-sp [data-figma-node="229:5432"] { height: 321px; }
  .sect10-sp [data-figma-node="229:5441"],
  .sect10-sp [data-figma-node="229:5444"] {
    left: 26px;
    width: var(--sect-sp-cta-width);
  }
  .sect10-sp [data-figma-node="229:5441"] { top: 201px; }
  .sect10-sp [data-figma-node="229:5444"] { top: 269px; }
  .sect10-sp [data-figma-node="229:5442"] { left: 52px; width: 127px; }
  .sect10-sp [data-figma-node="229:5443"] { left: 191px; top: 18.5px; }
  .sect10-sp [data-figma-node="229:5445"] { left: 20px; width: 191px; }
  .sect10-sp [data-figma-node="229:5446"] { left: 223px; top: 18.5px; }
  .sect10-sp [data-figma-node="229:5447"] { top: 425px; }
  .sect10 { --sect10-sp-height: 656px; }
  .sect10-sp,
  .sect10-sp [data-figma-node="229:5429"] { height: 656px; }

  /* Roadmap: preserve the offset shadows but normalize primary control density. */
  .roadmap-action,
  .roadmap-entry__cta {
    height: var(--sect-sp-cta-height);
    min-height: var(--sect-sp-cta-height);
    padding: 0 24px;
    font-size: var(--sect-sp-cta-font);
    line-height: var(--sect-sp-cta-line);
    letter-spacing: 1.6px;
  }
  .roadmap-action span,
  .roadmap-entry__cta span {
    font-size: var(--sect-sp-cta-font);
    line-height: var(--sect-sp-cta-line);
    letter-spacing: 1.6px;
  }
  .roadmap-people__all,
  .roadmap-role__link,
  .roadmap-entry__actions,
  .roadmap-entry__cta {
    width: min(var(--sect-sp-cta-width), 100%);
  }
  .roadmap-people__all,
  .roadmap-entry__actions { justify-self: center; align-self: center; }
  .roadmap-people__voices { min-height: 0; }
  .roadmap-entry { min-height: 65.6rem; }
  .roadmap-entry__content { height: auto; }
  .roadmap-entry__actions { gap: var(--sect-sp-cta-gap); }
  .roadmap-entry__collage { top: 42.5rem; }
  .roadmap-work__jobs {
    width: min(var(--sect-sp-cta-width), 100%);
    height: var(--sect-sp-cta-height);
    min-height: var(--sect-sp-cta-height);
    margin-inline: auto;
    padding: 0 24px;
    justify-content: center;
    font-size: var(--sect-sp-cta-font);
    line-height: var(--sect-sp-cta-line);
  }
  .roadmap-work__jobs span {
    font-size: var(--sect-sp-cta-font);
    line-height: var(--sect-sp-cta-line);
    letter-spacing: 1.6px;
  }

  /* Jobs archive: the 51px result-card control rounds to the 52px token.
     The filter result frame follows its smaller submit instead of retaining 74px math. */
  .jobs-filter__submit,
  .job-result-card__link {
    height: var(--sect-sp-cta-height);
    min-height: var(--sect-sp-cta-height);
    padding: 0 24px;
    font-size: var(--sect-sp-cta-font);
    line-height: var(--sect-sp-cta-line);
    letter-spacing: 1.6px;
  }
  .jobs-filter__result-main { min-height: 145px; }
  .jobs-filter__result { min-height: 0; }

  /* Job details: preserve the original mid-CTA overlap while replacing the two
     7.4rem controls with physical 52px tap boxes. At the 375px reference this
     yields panel 302px / dark slot 166px / following padding 216.234px: the first
     button crosses the boundary by 17px, the second hangs below it, and the old
     80.234px clearance before the following content remains intact. */
  .jd-hero__actions,
  .jd-consult-cta__actions,
  .jd-closing-cta__actions { height: auto; }
  .jd-consult-cta {
    height: calc(19.8rem + 104px);
    min-height: calc(19.8rem + 104px);
  }
  .jd-consult-slot,
  .jd-consult-slot--before-requirements { height: calc(14.9rem + 17px); }
  .jd-one-day,
  .jd-requirements { padding-top: calc(12.9234rem + 87px); }

  section.jd-people .jd-people__inner > .jd-people__all {
    width: min(var(--sect-sp-cta-width), 100%);
    height: var(--sect-sp-cta-height);
    min-height: var(--sect-sp-cta-height);
    align-self: center;
    padding: 0 24px;
    font-size: var(--sect-sp-cta-font);
    line-height: var(--sect-sp-cta-line);
    letter-spacing: 1.6px;
  }

  .jd-closing-cta,
  .jd-closing-cta--dynamic,
  .jd-closing-cta--room-advisor {
    display: flex;
    height: auto;
    min-height: 0;
    padding: 8rem 1.6rem 0;
    flex-direction: column;
  }
  .jd-closing-cta__inner,
  .jd-closing-cta--dynamic .jd-closing-cta__inner,
  .jd-closing-cta--room-advisor .jd-closing-cta__inner,
  .jd-closing-cta__content,
  .jd-closing-cta--dynamic .jd-closing-cta__content,
  .jd-closing-cta--room-advisor .jd-closing-cta__content {
    order: 1;
    width: 100%;
    height: auto;
    min-height: 0;
  }
  .jd-closing-cta__collage,
  .jd-closing-cta--dynamic .jd-closing-cta__collage,
  .jd-closing-cta--room-advisor .jd-closing-cta__collage {
    position: relative;
    order: 2;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    max-width: 343px;
    height: auto;
    margin: 24px auto 0;
    aspect-ratio: 343 / 231;
  }

  /* Interview archive/detail. Narrow related cards keep their available 250px width. */
  .interview-card-fresh__link,
  .interview-detail-fresh__back,
  .interview-detail-related__link {
    height: var(--sect-sp-cta-height);
    min-height: var(--sect-sp-cta-height);
    padding: 0 24px;
    font-size: var(--sect-sp-cta-font);
    line-height: var(--sect-sp-cta-line);
    letter-spacing: 1.6px;
  }
  .interview-card-fresh__link,
  .interview-detail-fresh__back { width: min(var(--sect-sp-cta-width), 100%); }
  .interview-detail-fresh__back { margin-inline: auto; }

  /* Contact input/confirm/thanks actions. Panels remain content-driven. */
  .contact-submit,
  .contact-confirm-button,
  .contact-thanks-button {
    width: min(var(--sect-sp-cta-width), 100%);
    height: var(--sect-sp-cta-height);
    min-height: var(--sect-sp-cta-height);
    margin-inline: auto;
    padding: 0 24px;
    font-size: var(--sect-sp-cta-font);
    line-height: var(--sect-sp-cta-line);
    letter-spacing: 1.6px;
  }
  .contact-confirm-actions,
  .contact-thanks-actions {
    width: min(var(--sect-sp-cta-width), 100%);
    height: auto;
    flex-basis: auto;
    gap: var(--sect-sp-cta-gap);
  }
  .contact-confirm-actions form { width: 100%; height: var(--sect-sp-cta-height); }
  .contact-main,
  .contact-main[data-contact-state="confirm"],
  .contact-main[data-contact-state="thanks"],
  .contact-panel--confirm,
  .contact-panel--thanks { min-height: 0; }

  /* The legacy TOP canvases scale their whole 375px source at 320/414. Counter
     that scale for controls so their rendered bbox remains 16px × 52px. */
  .top-hero-sp .sp-hero-jobs {
    left: calc(16px / var(--sect-sp-scale, 1));
    width: calc(260px / var(--sect-sp-scale, 1));
    height: calc(52px / var(--sect-sp-scale, 1));
  }
  .top-hero-sp .sp-hero-jobs > span {
    position: static;
    width: auto;
    height: auto;
    font-size: calc(16px / var(--sect-sp-scale, 1));
    line-height: calc(24px / var(--sect-sp-scale, 1));
    letter-spacing: calc(1.6px / var(--sect-sp-scale, 1));
  }
  .top-hero-sp .sp-hero-jobs > i {
    position: static;
    display: block;
    flex: 0 0 calc(21px / var(--sect-sp-scale, 1));
    width: calc(21px / var(--sect-sp-scale, 1));
    height: calc(15px / var(--sect-sp-scale, 1));
  }
  .top-hero-sp .sp-hero-jobs > i img {
    position: static;
    display: block;
    left: auto;
    top: auto;
    width: 100%;
    height: 100%;
    transform: none;
  }
  .top-hero-sp .sp-hero-jobs { display: flex; align-items: center; justify-content: center; gap: calc(12px / var(--sect-sp-scale, 1)); }

  .sect2-sp .sect2-sp__cta {
    left: calc((375px - (293px / var(--sect-sp-scale, 1))) / 2);
    width: calc(293px / var(--sect-sp-scale, 1));
    height: calc(52px / var(--sect-sp-scale, 1));
    display: flex; align-items: center; justify-content: center; gap: calc(12px / var(--sect-sp-scale, 1));
  }
  .sect2-sp .sect2-sp__cta > span,
  .sect3-sp .sect3-sp__jobs-button > span,
  .sect4-sp .sect4-sp__submit > span {
    position: static; width: auto; height: auto;
    font-size: calc(16px / var(--sect-sp-scale, 1));
    line-height: calc(24px / var(--sect-sp-scale, 1));
    letter-spacing: calc(1.6px / var(--sect-sp-scale, 1));
  }
  .sect2-sp .sect2-sp__cta > img,
  .sect3-sp .sect3-sp__jobs-button > img,
  .sect4-sp .sect4-sp__submit > img {
    position: static; width: calc(25px / var(--sect-sp-scale, 1)); height: calc(15px / var(--sect-sp-scale, 1));
  }
  .sect2-sp__main { height: calc(374px + (52px / var(--sect-sp-scale, 1))); }
  .sect2 { height: calc(609.3053px * var(--sect-sp-scale, 1) + 52px); }
  .sect2-sp { height: calc(609.3053px + (52px / var(--sect-sp-scale, 1))); }

  .sect3-sp .sect3-sp__jobs-button-wrap,
  .sect3-sp .sect3-sp__jobs-button {
    width: calc(260px / var(--sect-sp-scale, 1));
    height: calc(52px / var(--sect-sp-scale, 1));
  }
  .sect3-sp .sect3-sp__jobs-button-wrap { left: calc((343px - (260px / var(--sect-sp-scale, 1))) / 2); }
  .sect3-sp .sect3-sp__jobs-button { display: flex; align-items: center; justify-content: center; gap: calc(12px / var(--sect-sp-scale, 1)); }
  .sect3-sp__jobs-panel { height: calc(194px + (52px / var(--sect-sp-scale, 1))); }
  .sect3-sp__jobs { height: calc(391px + (52px / var(--sect-sp-scale, 1))); }
  .sect3 { height: calc(1306px * var(--sect-sp-scale, 1) + 52px); }
  .sect3-sp { height: calc(1306px + (52px / var(--sect-sp-scale, 1))); }

  .sect4-sp .sect4-sp__submit {
    width: calc(293px / var(--sect-sp-scale, 1));
    height: calc(52px / var(--sect-sp-scale, 1));
    display: flex; align-items: center; justify-content: center; gap: calc(12px / var(--sect-sp-scale, 1));
  }
  .sect4-sp__result-main { height: calc(94px + (52px / var(--sect-sp-scale, 1))); }
  .sect4-sp__result { height: calc(207px + (52px / var(--sect-sp-scale, 1))); }
  .sect4-sp__graduate { top: calc(134px + (52px / var(--sect-sp-scale, 1))); }
  .sect4-sp__body { height: calc(777.7511px + (52px / var(--sect-sp-scale, 1))); }
  .sect4-sp__content,
  .sect4-sp__search { height: calc(687.7511px + (52px / var(--sect-sp-scale, 1))); }
  .sect4 { height: calc(993.7511px * var(--sect-sp-scale, 1) + 52px); }
  .sect4-sp { height: calc(993.7511px + (52px / var(--sect-sp-scale, 1))); }

  .sect7-sp .sect7-button {
    left: calc((375px - (293px / var(--sect7-sp-scale, 1))) / 2);
    width: calc(293px / var(--sect7-sp-scale, 1));
    height: calc(52px / var(--sect7-sp-scale, 1));
    display: flex; align-items: center; justify-content: center; gap: calc(12px / var(--sect7-sp-scale, 1));
  }
  .sect7-sp .sect7-button > .sect7-text {
    position: static; width: auto; height: auto;
    font-size: calc(16px / var(--sect7-sp-scale, 1));
    line-height: calc(24px / var(--sect7-sp-scale, 1));
    letter-spacing: calc(1.6px / var(--sect7-sp-scale, 1));
  }
  .sect7-sp .sect7-button > img { position: static; width: calc(25px / var(--sect7-sp-scale, 1)); height: calc(15px / var(--sect7-sp-scale, 1)); }
  .sect7 { height: calc(809.5662px * var(--sect7-sp-scale, 1) + 52px); }
  .sect7-sp { height: calc(809.5662px + (52px / var(--sect7-sp-scale, 1))); }

  .sect10-sp [data-figma-node="229:5432"] { height: calc(201px + (120px / var(--sect10-sp-scale, 1))); }
  .sect10-sp [data-figma-node="229:5441"],
  .sect10-sp [data-figma-node="229:5444"] {
    left: calc((345px - (293px / var(--sect10-sp-scale, 1))) / 2);
    width: calc(293px / var(--sect10-sp-scale, 1));
    height: calc(52px / var(--sect10-sp-scale, 1));
    display: flex; align-items: center; justify-content: center; gap: calc(12px / var(--sect10-sp-scale, 1));
  }
  .sect10-sp [data-figma-node="229:5444"] { top: calc(201px + (68px / var(--sect10-sp-scale, 1))); }
  .sect10-sp [data-figma-node="229:5442"],
  .sect10-sp [data-figma-node="229:5445"] {
    position: static; width: auto; height: auto;
    font-size: calc(16px / var(--sect10-sp-scale, 1));
    line-height: calc(24px / var(--sect10-sp-scale, 1));
    letter-spacing: calc(1.6px / var(--sect10-sp-scale, 1));
  }
  .sect10-sp [data-figma-node="229:5443"],
  .sect10-sp [data-figma-node="229:5446"] { position: static; width: calc(25px / var(--sect10-sp-scale, 1)); height: calc(15px / var(--sect10-sp-scale, 1)); }
  .sect10-sp [data-figma-node="229:5447"] { top: calc(305px + (120px / var(--sect10-sp-scale, 1))); }
  .sect10 { height: calc(536px * var(--sect10-sp-scale, 1) + 120px); }
  .sect10-sp,
  .sect10-sp [data-figma-node="229:5429"] { height: calc(536px + (120px / var(--sect10-sp-scale, 1))); }

  /* Defeat route-local rem geometry on the jobs list; these are physical tap boxes. */
  .jobs-results .job-result-card__link,
  .jobs-search .jobs-filter__submit {
    box-sizing: border-box;
    width: min(var(--sect-sp-cta-width), 100%) !important;
    height: var(--sect-sp-cta-height) !important;
    min-height: var(--sect-sp-cta-height) !important;
    flex-basis: var(--sect-sp-cta-height);
  }
}

@media (max-width: 374px) {
  /* Keep the same overlap formula at 320px; do not collapse the slot around the panel. */
  .jd-one-day,
  .jd-requirements { padding-top: calc(12.9234rem + 87px); }
  .jd-consult-slot,
  .jd-consult-slot--before-requirements {
    height: calc(14.9rem + 17px);
    padding: 0 1.6rem;
  }
  .jd-consult-cta__actions {
    width: 260px;
    max-width: none;
    margin-right: calc((100% - 260px) / 2);
    margin-left: calc((100% - 260px) / 2);
  }
}