/*
 * Hand-written layout fixes on top of style.min.css (which has no source in
 * the repo, so it is not edited). Loaded on every page right after
 * style.min.css, before rtl.css. Rules here apply to LTR and RTL alike;
 * RTL-only mirrors live in rtl.css (scripts/gen_rtl_css.py, MANUAL block).
 */

/* Home hero, 1024-1279px: the image box (.intro--main .intro__img-wrapper,
 * left:calc(50% - 20px), 388px wide) starts at 492px at 1024 and moves with
 * the viewport, while the subtitle column is wider than the space left of
 * it, so the subtitle's first/last words ran under the image (en and he).
 * 420px keeps the subtitle clear of the image at every width in the range:
 * en text ends at 488 vs image 492 (1024); he text starts at 536 vs image
 * right edge 532 (1024). At >=1280 the original layout already clears. */
@media (min-width:1024px) and (max-width:1279px) {
  .intro--main .intro__subtitle {max-width:420px}
}

/* /feature/call-history-and-sms-control/, 1024-1279px: this is the only
 * feature page whose photo (.intro--features-history .intro__img-wrapper,
 * left:calc(50% + 15px), mirrored in RTL) starts above the bottom of the
 * one-line H1, so long translations (de/ru/pl/sv/ro/fr/nl/es/it) ran their
 * last word under it. 50% of the content box ends 15px before the photo at
 * every width in the range, in LTR and RTL. Other feature pages are left
 * alone: their photos start below the H1 line and a general cap would
 * re-wrap titles that fit today. */
@media (min-width:1024px) and (max-width:1279px) {
  .intro--features-history .intro__title {max-width:50%}
}

/* /download/ Features: download.html's inline
 * `.download-page .tabs-element__wrapper{max-width:790px}` (#41) beats
 * style.min.css's breakpoint widths, so between 768 and 1279px the feature
 * rows ran under the phone mockup (.tabs-element__app-link, right:38px,
 * 286px img shifted 16px outwards; <=1023: right:36px, 175px img, 13px).
 * Reserve the phone's footprint plus a 16px gap: 280px at 1024-1299
 * (capped at the inline 790px; at 1280-1299 the phone still sits at
 * right:45px), style.min.css's own 195px at 768-1023 (phone hidden <=767).
 * One extra class beats the inline rule's specificity. */
@media (min-width:768px) and (max-width:1023px) {
  .download-page .tabs-element .tabs-element__wrapper {max-width:calc(100% - 195px)}
}
@media (min-width:1024px) and (max-width:1299px) {
  .download-page .tabs-element .tabs-element__wrapper {max-width:min(790px, calc(100% - 280px))}
}

/* Mobile/tablet header (<=1023px): burger on the right edge of the pill,
 * like the blog (blog-hero-fullbleed.css). .main-nav is flex:1 1 auto, so it
 * fills the pill after the logo, and the block-level toggle sat at its
 * start, right next to the logo. Pushing it to the logical end puts it on
 * the right in LTR and on the left in RTL. The open menu panel
 * (.main-nav__wrapper) is position:absolute at <=1023px, so it is not moved.
 * 44x44 tap target, vertically centred; the 16px icon's outer edge sits
 * 22px inside the pill, mirroring the logo; pill height is unchanged. */
@media (max-width:1023px) {
  .header .main-nav {display:flex;justify-content:flex-end;margin-inline-start:auto}
  .header .main-nav__toggle {display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;margin-block:-9px;margin-inline-end:-11px}
}

/* mime */

/* /subprocessors/: a document, not a marketing hero. Text stays inside the
 * shared .container. Logical alignment so Hebrew reads from the start edge. */
.subprocessors {padding:48px 0 96px;color:#1c2430}
.subprocessors h1 {font-family:"Euclid Circular A","IBM Plex Sans",sans-serif;font-size:40px;line-height:1.15;font-weight:600;margin:0 0 16px;text-align:start}
.subprocessors__intro {max-width:42rem;margin:0 0 40px;font-size:18px;line-height:1.5;text-align:start}
.subprocessors__card {border-top:1px solid #e3e8ee;padding:28px 0}
.subprocessors__card h2 {font-size:24px;line-height:1.25;margin:0 0 8px;text-align:start}
.subprocessors__summary {max-width:42rem;margin:0 0 16px;line-height:1.5;text-align:start}
.subprocessors__use {max-width:42rem;margin:0 0 16px}
.subprocessors__use h3 {font-size:16px;line-height:1.4;margin:0 0 4px;text-align:start}
.subprocessors__use p {margin:0;line-height:1.5;text-align:start}
@media (max-width:767px) {
  .subprocessors {padding:32px 0 64px}
  .subprocessors h1 {font-size:32px}
}

/* 404. .intro is the blue card (#1d4ed8). .intro--features paints the title
 * and the paragraph near-black for the lilac feature heroes, and the bare
 * anchors stay black, so this page was unreadable. White copy, white pills. */
.intro--not-found {margin-bottom:48px}
.intro--not-found .intro__wrapper {padding-top:168px;padding-bottom:56px}
.intro--not-found .intro__content {max-width:40rem;margin-bottom:0;color:#fff}
.intro--not-found .intro__title {color:#fff;font-size:48px;line-height:1.15}
.intro--not-found .intro__text {color:#e7eeff;max-width:36rem;margin:12px 0 0;font-size:18px;line-height:1.45}
.not-found__links {display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:28px 0 0;padding:0}
.not-found__links a {display:inline-block;color:#1d4ed8;background:#fff;border-radius:999px;padding:8px 16px;font-weight:600;font-size:16px;line-height:1.2;text-decoration:none}
.not-found__links a:hover {background:#e7eeff}
@media (max-width:767px) {
  .intro--not-found .intro__wrapper {padding-top:140px;padding-bottom:40px}
  .intro--not-found .intro__title {font-size:36px}
}