/* ==========================================================================
   Property landing page, 2026 design (page-property-guide.php with
   meta.design = 'lp-2026'; markup in inc/property-guide/render-lp.php).
   Figma "Property pages" > "Property Page - Dynamic": frames 1440w, 992w,
   768w, 600w and 375w, one per snap point:
     <= 599 | 600 - 767 | 768 - 991 | 992 - 1199 | >= 1200
   Mobile first. Every rule is scoped under .plp so it beats the parent theme
   by scoping, not !important.
   Two Figma export artefacts are deliberately not copied: the stretched
   cut-out at 992 / 768 and the stretched review photo at 768 / 600 / 375
   (both are drawn undistorted, on the same focal point); and the two-tone
   callback band at 768 (flat navy, as at 1440).
   ========================================================================== */

/* Lato black and italic (style.css only declares 300 / 400 / 700) */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/lato-v25-latin-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-v25-latin-italic.woff2') format('woff2');
}

/* --- shell ---------------------------------------------------------------- */
/* anchor jumps, and fields scrolled into view on focus, land clear of the fixed site header */
html:has(body.pg-design-lp-2026) { scroll-padding-top: 96px; }
/* LP mode keeps the site sticky bar off (its markup still prints in footer.php) */
body.pg-lp-mode #ct-sticky-bar { display: none; }
/* the footer sits flush under the navy callback band, as in the Figma frame
   (style.min.css gives section#footer a 32 / 64 / 80px top margin: a white strip here) */
body.pg-design-lp-2026 section#footer { margin-top: 0; }

.plp {
  --plp-navy: #0d364a;
  --plp-blue: #1595ca;
  --plp-blue-dark: #117aa8;
  --plp-brand: #195c7d;
  --plp-ink: #0f1f3d;
  --plp-text: #445667;
  --plp-muted: #5c6f7e;
  --plp-tone: #556d82;
  --plp-rule: #d4dce3;
  --plp-pale: #e8f4fa;
  --plp-placeholder: #8a99a6;
  --plp-a: #99abbc;
  --plp-sky: #014d9a;
  --plp-error: #b42318;
  display: block;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--plp-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- resets against the parent theme's element rules ----------------------- */
.plp *, .plp *::before, .plp *::after { box-sizing: border-box; }
.plp h1, .plp h2, .plp h3, .plp p, .plp ul, .plp ol, .plp li,
.plp dl, .plp dt, .plp dd, .plp figure, .plp blockquote, .plp figcaption { margin: 0; padding: 0; border: 0; }
.plp ul, .plp ol { list-style: none; }
.plp h1, .plp h2, .plp h3 { font-family: inherit; font-style: normal; text-transform: none; }
.plp p { font-size: inherit; text-wrap: pretty; }
.plp a { text-decoration: none; }
.plp img { display: block; max-width: 100%; height: auto; border: 0; }
.plp picture { display: contents; }
.plp blockquote { background: none; font-style: normal; quotes: none; }
.plp blockquote::before, .plp blockquote::after { content: none; display: none; }
.plp button { font-family: inherit; }

.plp-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.plp-notes { padding-top: 16px; padding-bottom: 16px; }
.plp .pg-editor-note { margin: 12px 0; padding: 12px 16px; border: 1px solid #f0c36d; border-radius: 8px; background: #fff8e5; color: #5b4a1a; font-size: 14px; line-height: 1.5; }
.plp .pg-editor-note code { font-size: 13px; }

/* --- shared parts ------------------------------------------------------------ */
.plp .plp-pill {
  display: inline-flex;
  align-self: flex-start;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(21, 149, 202, .2);
  color: var(--plp-blue);
  font-size: 13px;
  line-height: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.plp .plp-pill--light { background: rgba(255, 255, 255, .2); color: #fff; }

.plp .plp-h2 { font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: 0; color: var(--plp-navy); }
.plp .plp-lead { font-size: 22px; line-height: 30.8px; color: var(--plp-text); }

/* buttons: labels are sentence case in the markup, capitals here */
.plp .plp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin: 0;
  padding: 0 28px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: none;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .1s ease;
}
.plp .plp-btn:active { transform: translateY(1px); }
/* Dante sets a { outline: 0 !important } and input:focus { box-shadow: none !important },
   so the focus rings here have to be !important to show at all */
.plp .plp-btn:focus-visible { outline: 3px solid var(--plp-blue) !important; outline-offset: 3px; }
.plp .plp-btn--light { background: #fff; border-color: #fff; color: var(--plp-navy); }
.plp .plp-btn--light:hover, .plp .plp-btn--light:focus { background: var(--plp-pale); border-color: var(--plp-pale); color: var(--plp-navy); }
.plp .plp-btn--outline-light { height: 52px; border-color: rgba(255, 255, 255, .65); color: #fff; }
.plp .plp-btn--outline-light:hover, .plp .plp-btn--outline-light:focus { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.plp .plp-btn--light:focus-visible, .plp .plp-btn--outline-light:focus-visible { outline-color: #fff !important; }
.plp .plp-btn--ink { border-color: var(--plp-ink); border-radius: 15px; background: var(--plp-ink); color: #fff; }
.plp .plp-btn--ink:hover, .plp .plp-btn--ink:focus { border-color: #22375f; background: #22375f; color: #fff; }
.plp .plp-btn--compact { padding: 0 32px; font-size: 14px; letter-spacing: .6px; }
.plp .plp-btn--primary { height: 58px; border: 0; border-radius: 15px; background: var(--plp-blue); color: #fff; letter-spacing: .6px; }
.plp .plp-btn--primary:hover, .plp .plp-btn--primary:focus { background: var(--plp-blue-dark); color: #fff; }
.plp .plp-btn--navy { border-color: var(--plp-navy); background: var(--plp-navy); color: #fff; }
.plp .plp-btn--navy:hover, .plp .plp-btn--navy:focus { border-color: #164a63; background: #164a63; color: #fff; }

/* named person: round photo, name, phone, email */
.plp-person { display: flex; align-items: center; gap: 18px; min-width: 0; }
.plp-person__photo { position: relative; flex: 0 0 auto; width: 61.333px; height: 61.333px; overflow: hidden; border-radius: 50%; }
.plp .plp-person__photo img { position: absolute; left: -4px; top: 0; width: 74.667px; height: 74.667px; max-width: none; object-fit: cover; }
.plp-person__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.plp .plp-person__name { font-size: 20px; line-height: 20.8px; font-weight: 700; color: var(--plp-blue); }
.plp .plp-person__lines { display: flex; flex-direction: column; align-items: flex-start; }
.plp .plp-person__phone { font-size: 18px; line-height: 22px; font-weight: 700; letter-spacing: -.16px; color: #fff; }
.plp .plp-person__email { font-size: 16px; line-height: 20px; color: #fff; overflow-wrap: anywhere; }
.plp .plp-person__phone, .plp .plp-person__email { display: inline-flex; align-items: center; min-height: 24px; } /* WCAG 2.5.8 target size */
.plp .plp-person__phone:hover, .plp .plp-person__email:hover { color: #fff; text-decoration: underline; }
.plp .plp-person a:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px; }

/* Trustpilot line (hero) */
.plp .plp-tp { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px; line-height: 22.4px; color: #fff; }
.plp .plp-tp:hover span { text-decoration: underline; }
.plp .plp-tp:focus-visible { outline: 2px solid #fff !important; outline-offset: 3px; }
.plp .plp-tp__stars { flex: 0 0 auto; width: 106px; height: 20.05px; }

/* ==========================================================================
   1. Hero
   ========================================================================== */
.plp-hero { position: relative; overflow: hidden; background: var(--plp-navy); color: #fff; }
.plp-hero__row { display: flex; flex-direction: column; gap: 48px; padding-top: 56px; padding-bottom: 32px; }
.plp-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; min-width: 0; }
.plp-hero__head { display: flex; flex-direction: column; gap: 32px; max-width: 680.65px; }
.plp .plp-hero__title { font-size: 42px; line-height: 52px; font-weight: 400; letter-spacing: 0; color: #fff; text-align: left; }
.plp-hero__line { display: block; }
.plp-hero__line--strong { font-weight: 900; }
.plp .plp-hero__text p { font-size: 18px; line-height: 26px; color: rgba(255, 255, 255, .86); }
.plp .plp-hero__text p + p { margin-top: 26px; }
.plp-hero__cta { width: 100%; padding-top: 6px; }
.plp-hero__cta .plp-btn { width: 100%; }
.plp .plp-hero__trust { font-size: 14px; line-height: 22.4px; color: rgba(255, 255, 255, .72); }

/* The photo: .plp-hero__media is the rounded frame's box. The cut-out is the
   same photo with the sky removed, drawn under the frame and on to the right
   edge of the screen (the hero clips it), so the villa breaks out of the
   frame. Its box is the photo canvas right of 52.6%, placed in % of the
   frame: at <= 767 and >= 1200 the frame is 40.67% of the canvas, at
   768 - 1199 it is a narrower slice (28.15%). */
.plp-hero__media { position: relative; flex: 0 0 auto; width: min(301.674px, 97%); aspect-ratio: 495.782 / 803; margin: 3.04px 0; }
.plp-hero__frame { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: 13.71px; background: #6fb9e8; }
.plp .plp-hero__photo { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.plp .plp-hero__cutout { position: absolute; z-index: 0; left: 87.740%; top: -.6227%; width: 116.584%; height: 101.245%; max-width: none; }

/* named-person band under the hero */
.plp-hero__band { border-top: 1px solid rgba(255, 255, 255, .14); }
.plp-hero__band-row.plp-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 24px 17px 36px; }
.plp-hero__band .plp-btn { width: 100%; }

/* ==========================================================================
   2. Guide download
   ========================================================================== */
.plp-guide { padding: 64px 0; background: var(--plp-pale); }
.plp-guide .plp-wrap { padding: 0; }
.plp .plp-guide__title { max-width: 500px; margin: 0 auto 24px; padding: 0 16px; font-size: 32px; line-height: 40px; font-weight: 900; color: var(--plp-brand); text-wrap: balance; }
.plp-guide__row { display: flex; flex-direction: column; align-items: stretch; gap: 32px; padding: 0 16px; }
.plp-guide__intro { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.plp-guide__cover { overflow: hidden; aspect-ratio: 500 / 249.583; border-bottom: 2px solid var(--plp-blue); }
.plp .plp-guide__img { width: 100%; height: auto; }
.plp .plp-guide__text { font-size: 20px; line-height: 31px; color: var(--plp-brand); }
.plp-guide__side { display: flex; flex-direction: column; gap: 22px; min-width: 0; padding-top: 19px; }
.plp-card--guide { padding: 32px 24px; border-radius: 15px; background: #fff; box-shadow: 0 10px 15px rgba(0, 51, 102, .18); }
.plp .plp-guide__note { font-size: 14px; line-height: 22.4px; color: var(--plp-brand); text-align: center; }

/* ==========================================================================
   3. Why buyers / How it works / What's available / Before you buy
   ========================================================================== */
.plp-block .plp-wrap { padding: 0 24px; }
.plp-block + .plp-block { margin-top: 48px; }
.plp-block__head { display: flex; flex-direction: column; gap: 9.4px; }

/* 3a Why buyers */
.plp-why .plp-block__inner { display: flex; flex-direction: column; gap: 48px; padding: 64px 0 32px; }
.plp-why__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 64px; }
.plp-why__item { display: flex; align-items: flex-start; gap: 14px; }
.plp .plp-why__icon { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 14px; }
.plp-why__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.plp-why__item:nth-child(n+3) .plp-why__body { gap: 8px; }
.plp .plp-why__title { font-size: 18px; line-height: 20.16px; font-weight: 700; letter-spacing: -.18px; color: var(--plp-navy); }
.plp .plp-why__body p { font-size: 16px; line-height: 24px; color: var(--plp-muted); }
.plp-why__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 24px; border-top: 1px solid var(--plp-rule); }
.plp .plp-why__foot p { order: -1; font-size: 18px; line-height: 24px; color: var(--plp-muted); }
.plp .plp-why__foot .plp-btn { width: 100%; max-width: 320px; }

/* 3b How it works: a vertical line of numbered steps, a row from 768 */
.plp-steps__inner { display: flex; flex-direction: column; gap: 32px; padding-top: 64px; }
.plp .plp-steps .plp-h2 { line-height: 35.84px; }
.plp-steps__list { display: flex; flex-direction: column; }
.plp-steps__item { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.plp-steps__item:not(:last-child)::after { content: ''; position: absolute; left: 22px; top: 48px; bottom: 0; width: 4px; border-radius: 2px; background: var(--plp-blue); }
.plp-steps__num { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--plp-blue); color: #fff; font-size: 22.5px; line-height: 22.5px; font-weight: 900; }
.plp-steps__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-bottom: 64px; }
.plp-steps__item:last-child .plp-steps__body { padding-bottom: 48px; }
.plp .plp-steps__title { font-size: 24px; line-height: 28.8px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--plp-navy); }
.plp .plp-steps__body p { font-size: 16px; line-height: 25.6px; color: var(--plp-text); }

/* 3c What's available */
.plp-products .plp-block__inner { display: flex; flex-direction: column; gap: 24px; padding: 64px 0 32px; }
.plp .plp-products__list { display: flex; flex-direction: column; gap: 32px; padding: 0 8px; }
.plp-products__item { display: flex; flex-direction: column; }
.plp .plp-products__art { flex: 0 0 auto; width: 250px; height: 211.111px; }
.plp-products__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 24px 0; border-radius: 20px; }
.plp .plp-products__body .plp-pill { margin-bottom: 14px; }
.plp .plp-products__title { font-size: 22px; line-height: 24.64px; font-weight: 700; letter-spacing: 0; color: var(--plp-navy); }
.plp .plp-products__text { padding-bottom: 8px; font-size: 16px; line-height: 25.6px; color: var(--plp-text); }
.plp-products__cta { display: flex; justify-content: center; margin-top: 8px; padding: 0 8px; }
.plp .plp-products__cta .plp-btn { width: 100%; }

/* 3d Before you buy */
.plp-qa__inner { padding-bottom: 32px; }
.plp .plp-qa__title { padding-bottom: 12px; border-bottom: 1px solid var(--plp-rule); }
.plp-qa__item { display: flex; flex-direction: column; gap: 12px; padding: 24px 8px; border-bottom: 1px solid var(--plp-rule); }
.plp-qa__item:last-child { border-bottom: 0; }
.plp .plp-qa__q, .plp .plp-qa__a { display: flex; gap: 12px; }
.plp .plp-qa__q { align-items: center; }
.plp .plp-qa__a { align-items: flex-start; }
.plp-qa__item:not(.is-open) .plp-qa__a { display: none; }
.plp-qa__mark { display: flex; flex: 0 0 45px; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; background: #1695ca; color: #fff; font-size: 26px; line-height: 22px; font-weight: 700; }
.plp-qa__mark--a { background: var(--plp-a); }
.plp .plp-qa__toggle { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; background: none; font-size: 20px; line-height: 26px; font-weight: 400; text-align: left; color: #1695ca; cursor: pointer; }
.plp .plp-qa__toggle:hover { color: var(--plp-blue-dark); }
.plp .plp-qa__toggle:focus-visible { outline: 2px solid var(--plp-blue) !important; outline-offset: 4px; border-radius: 2px; }
.plp .plp-qa__text { flex: 1 1 auto; min-width: 0; padding-top: 1px; font-size: 16px; line-height: 22px; color: var(--plp-text); }

/* ==========================================================================
   4. Client review
   ========================================================================== */
.plp-review { position: relative; isolation: isolate; overflow: hidden; padding: 32px 0 144px; background: var(--plp-sky); }
.plp-review__bg { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 60.95%; }
.plp .plp-review__img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 81% 100%; }
.plp-review__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.plp .plp-review__card { display: flex; flex-direction: column; gap: 24px; width: 100%; padding: 32px 32px 24px; border-radius: 16px; background: rgba(255, 255, 255, .8); }
.plp .plp-review__quote p { padding-left: 8px; font-size: 20px; line-height: 26px; font-style: italic; letter-spacing: 1px; color: var(--plp-tone); }
.plp .plp-review__by { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid var(--plp-tone); }
.plp-review__avatar { display: flex; flex: 0 0 56px; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 28px; background: var(--plp-blue); color: #fff; font-size: 20px; line-height: 20px; font-weight: 900; letter-spacing: .4px; }
.plp-review__who { display: flex; flex: 1 1 0; flex-direction: column; gap: 6px; min-width: 0; }
.plp-review__name { font-size: 20px; line-height: 19.6px; font-weight: 700; color: var(--plp-blue); }
.plp-review__sub { font-size: 16px; line-height: 18px; font-weight: 700; letter-spacing: -.28px; color: var(--plp-ink); }
.plp .plp-review__rating { display: none; align-items: center; gap: 0 7px; color: #191919; white-space: nowrap; }
.plp .plp-review__rating:hover { color: #191919; }
.plp .plp-review__rating:focus-visible { outline: 2px solid var(--plp-blue) !important; outline-offset: 3px; }
.plp-review__label { font-size: 23px; line-height: 35px; }
.plp-review__score { font-size: 20px; line-height: 35px; color: #3a3a3a; }
.plp-review__score strong { font-weight: 700; color: #191919; }
.plp .plp-review__tp { width: 126px; height: 41px; margin-left: -5px; }
.plp-review__stats { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.plp .plp-stat { display: inline-flex; align-items: center; gap: 16px; padding: 4px 32px 4px 4px; border-radius: 43px; background: rgba(255, 255, 255, .8); white-space: nowrap; }
.plp-stat__value { display: inline-flex; align-items: center; gap: 4.04px; padding: 4.04px 16.16px; border-radius: 999px; background: var(--plp-navy); color: #fff; font-size: 20px; line-height: 1.2; font-weight: 900; letter-spacing: 2.4px; }
.plp-stat__plus { font-size: 25px; letter-spacing: 3px; }
.plp-stat__label { font-size: 18px; line-height: 1.2; font-weight: 700; text-transform: uppercase; color: var(--plp-ink); }

/* ==========================================================================
   5. Callback
   ========================================================================== */
.plp-callback { padding: 30px 0 80px; background: var(--plp-navy); color: #fff; }
.plp-callback__row { display: flex; flex-direction: column; gap: 32px; }
.plp-callback__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 21.4px; min-width: 0; padding-top: 20px; }
.plp .plp-callback__title { font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: 0; color: #fff; }
.plp .plp-callback__text { font-size: 18px; line-height: 27.9px; color: rgba(255, 255, 255, .82); }
.plp-person--callback { flex-direction: column; align-items: flex-start; width: 100%; max-width: 420px; padding: 24px 8px 0; border-top: 1px solid rgba(255, 255, 255, .2); }
.plp-card--callback { min-width: 0; padding: 24px; border-radius: 12px; background: #fff; box-shadow: 0 20px 30px rgba(0, 0, 0, .25); color: var(--plp-navy); }
.plp .plp-card__title { margin-bottom: 18px; font-size: 26px; line-height: 32px; font-weight: 900; color: var(--plp-navy); }

/* ==========================================================================
   Forms (guide download and callback)
   ========================================================================== */
.plp-form { position: relative; }
.plp-form__fields { display: flex; flex-direction: column; gap: 16px; }
.plp-form__fields--grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.plp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.plp .plp-field__label { display: block; margin: 0; font-size: 13px; line-height: 15.6px; font-weight: 700; letter-spacing: .26px; color: var(--plp-navy); }
.plp .plp-field__control {
  display: block;
  width: 100%;
  height: auto;
  min-height: 48px;
  margin: 0;
  padding: 13.25px 14px;
  border: 1px solid var(--plp-rule);
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
  color: var(--plp-navy);
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 19.5px;
  font-weight: 400;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.plp .plp-field__control::placeholder { color: var(--plp-placeholder); opacity: 1; }
.plp .plp-field__control:focus { outline: none; border-color: var(--plp-blue) !important; box-shadow: 0 0 0 3px rgba(21, 149, 202, .25) !important; }
.plp-field__select { position: relative; display: block; }
.plp-field__select::after { content: ''; position: absolute; top: 50%; right: 16px; width: 14px; height: 9px; margin-top: -4.5px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%230D364A' stroke-width='2'/%3E%3C/svg%3E") no-repeat; }
.plp .plp-field--select .plp-field__control { padding-right: 38px; cursor: pointer; }
.plp .plp-field.is-invalid .plp-field__control { border-color: var(--plp-error) !important; }
.plp .plp-field.is-invalid .plp-field__control:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .2) !important; }
.plp .plp-field__error { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--plp-error); }
.plp .plp-form__submit { width: 100%; }
.plp .plp-form__status { margin-top: 16px; padding: 12px 14px; border-radius: 8px; font-size: 14px; line-height: 1.5; }
/* the live region is always in the page (so it is announced); empty, it takes no space */
.plp .plp-form__status:empty { margin: 0; padding: 0; }
.plp .plp-form__status--success { background: #e7f6ec; color: #14532d; }
.plp .plp-form__status--error { background: #fdecea; color: #7a1d14; }
.plp .plp-form__note { font-size: 13px; line-height: 19.5px; color: var(--plp-muted); }
.plp .plp-form__note a { color: var(--plp-brand); text-decoration: underline; text-underline-position: from-font; }
.plp .plp-form__note a:focus-visible { outline: 2px solid var(--plp-blue) !important; outline-offset: 2px; }
.plp-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* guide form: inset labels, rounder inputs, taller button */
.plp-form--guide .plp-field { padding-top: 4px; }
.plp-form--guide .plp-field:first-child { padding-top: 12px; }
.plp .plp-form--guide .plp-field__label { padding: 0 8px; line-height: 16.9px; letter-spacing: 0; }
.plp .plp-form--guide .plp-field__control { min-height: 46px; padding: 12.25px 14px; border-radius: 12px; }
.plp .plp-form--guide .plp-form__submit { margin-top: 32px; }

/* callback form: one column below 600, button and note 24 apart */
.plp .plp-form--callback .plp-form__submit { margin-top: 28px; }
.plp .plp-form--callback .plp-form__note { margin-top: 24px; }

/* ==========================================================================
   600 - 767
   ========================================================================== */
@media (min-width: 600px) {
  .plp .plp-hero__title { font-size: 74px; line-height: 75px; }
  /* "transfer, sorted." is ~538px at 74px against a 536px column at 600: keep
     the designed four lines (it overhangs into the 32px gutter by a few px) */
  .plp-hero__line { white-space: nowrap; }
  .plp .plp-hero__text p { font-size: 20px; line-height: 31px; }
  .plp .plp-hero__text p + p { margin-top: 31px; }
  .plp-hero__cta, .plp-hero__cta .plp-btn { width: auto; }
  /* 301.674 as designed; wider than 648 the photo grows just enough for the
     cut-out (2.0432 x the frame, from the 32px gutter) to reach the screen edge */
  .plp-hero__media { width: max(301.674px, calc((100vw - 32px) / 2.0432)); }
  .plp-hero__band-row.plp-wrap { align-items: flex-start; padding: 24px 32px; }
  .plp-hero__band .plp-btn { width: auto; }

  .plp .plp-guide__title { padding: 0; font-size: 43px; line-height: 52px; text-wrap: wrap; }
  .plp-guide__row { align-items: center; }
  .plp-guide__intro, .plp-guide__side { width: 500px; }

  .plp .plp-why__foot .plp-btn { width: auto; }
  .plp .plp-products__list { padding: 0; }
  .plp-products__body { padding: 24px; }
  .plp-products__cta { padding: 0; }
  .plp .plp-products__cta .plp-btn { max-width: 320px; }

  .plp .plp-review__quote p { font-size: 30px; line-height: 40px; }
  .plp .plp-review__rating { display: inline-flex; flex: 0 0 100%; }
  .plp-review__stats { flex-direction: row; flex-wrap: wrap; }
  .plp .plp-review__img { object-position: 90% 100%; }

  .plp .plp-callback__title { font-size: 44px; line-height: 48px; }
  .plp-person--callback { flex-direction: row; align-items: center; padding: 24px 8px; }
  .plp-card--callback { padding: 36px; }
  .plp-form__fields--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plp-field--full { grid-column: 1 / -1; }
  .plp .plp-form--callback .plp-form__submit { margin-top: 20px; }
  /* the two-column form has an empty last grid row in Figma: 36.8px more white under the note */
  .plp .plp-form--callback .plp-form__note { margin: 16px 0 36.8px; }
}

/* ==========================================================================
   768 - 991
   ========================================================================== */
@media (min-width: 768px) {
  /* hero: copy 450 + photo slice side by side; at 768 the photo runs off
     the right edge, from about 851 its corners and the cut-out show */
  .plp-hero__row { flex-direction: row; align-items: flex-start; padding-bottom: 56px; }
  .plp-hero__copy { flex: 0 0 450px; width: 450px; }
  .plp .plp-hero__title { font-size: 55px; line-height: 64px; }
  .plp .plp-hero__text p { font-size: 18px; line-height: 28px; }
  .plp .plp-hero__text p + p { margin-top: 28px; }
  .plp-hero__media { width: 320.742px; aspect-ratio: 320.742 / 750.382; margin: 4.67px 0; }
  .plp-hero__frame { border-radius: 16px; }
  .plp .plp-hero__photo { object-position: 81.4% 50%; }
  .plp .plp-hero__cutout { left: 90.56%; top: -.6224%; width: 168.45%; height: 101.246%; }
  .plp-hero__band { padding: 0 32px; }
  .plp-hero__band-row.plp-wrap { flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; }

  .plp-guide { padding: 64px 32px; }
  .plp-guide .plp-wrap { max-width: 600px; }
  .plp .plp-guide__title { max-width: none; }
  .plp-guide__row { align-items: stretch; padding: 0 32px 0 0; }
  .plp-guide__intro, .plp-guide__side { width: auto; }

  .plp-block .plp-wrap { padding: 0 32px; }
  .plp .plp-why .plp-h2 { line-height: 35.84px; letter-spacing: -.64px; }
  .plp-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plp-why__foot { flex-direction: row; align-items: center; }
  .plp .plp-why__foot p { order: 0; flex: 1 1 0; max-width: 585px; }
  .plp .plp-why__foot .plp-btn { flex: 0 0 auto; }

  .plp-steps__inner { border-bottom: 1px solid var(--plp-rule); }
  .plp-steps__list { flex-direction: row; }
  .plp-steps__item { display: flex; flex: 1 1 0; flex-direction: column; gap: 16px; min-width: 0; }
  .plp-steps__item:not(:last-child)::after { left: 46px; right: -2px; top: 22px; bottom: auto; width: auto; height: 4px; }
  .plp-steps__body { padding: 0 32px 64px 0; }
  .plp-steps__item:last-child .plp-steps__body { padding-bottom: 64px; }

  .plp .plp-products__list { gap: 24px; }
  .plp-products__item { flex-direction: row; align-items: flex-start; gap: 18px; }
  .plp-products__body { flex: 1 1 auto; }
  .plp .plp-products__title { line-height: 26px; }
  .plp .plp-products__text { max-width: 560px; }
  .plp-products__cta { margin-top: 0; }

  .plp-review { min-height: 753px; }
  .plp-review__bg { height: 88.92%; }
  .plp .plp-review__img { object-position: 87% 100%; }
  .plp .plp-review__rating { flex: 0 0 auto; margin-left: auto; }

  .plp-callback { padding: 48px 0 80px; }
  .plp-callback .plp-wrap { max-width: 664px; }
  .plp .plp-callback__title { text-wrap: balance; }
  .plp-person--callback { max-width: none; margin-top: 32.59px; }
}

/* ==========================================================================
   992 - 1199
   ========================================================================== */
@media (min-width: 992px) {
  .plp-guide .plp-wrap { max-width: 1200px; }
  .plp-guide__row { flex-direction: row; align-items: flex-start; }
  .plp-guide__intro, .plp-guide__side { flex: 1 1 0; }

  .plp .plp-products .plp-h2, .plp .plp-qa .plp-h2 { line-height: 35.84px; letter-spacing: -.64px; }
  .plp .plp-products__title { line-height: 24.64px; }

  .plp-review { min-height: 0; padding: 32px 0 196px; }
  .plp-review__bg { top: 0; height: auto; }
  .plp .plp-review__img { object-position: 89.5% 50%; }
  .plp .plp-review__card { width: auto; max-width: 773.55px; }
  .plp .plp-review__quote p { max-width: 709.55px; }

  .plp-callback .plp-wrap { max-width: 1200px; }
  .plp-callback__row { flex-direction: row; align-items: flex-start; }
  .plp-callback__copy { flex: 0 0 420px; width: 420px; }
  .plp .plp-callback__title { text-wrap: wrap; }
  .plp-card--callback { flex: 1 1 0; }
  .plp-form__fields--grid { grid-template-columns: minmax(0, 1fr); }
  .plp-field--full { grid-column: auto; }
  .plp .plp-form--callback .plp-form__submit { margin-top: 28px; }
  .plp .plp-form--callback .plp-form__note { margin: 24px 0 0; }
}

/* ==========================================================================
   >= 1200
   ========================================================================== */
@media (min-width: 1200px) {
  .plp-hero__copy { flex-basis: 603px; width: 603px; }
  .plp .plp-hero__title { font-size: 74px; line-height: 75px; }
  .plp .plp-hero__text p { font-size: 20px; line-height: 31px; }
  .plp .plp-hero__text p + p { margin-top: 31px; }
  .plp-hero__media { width: 495.782px; aspect-ratio: 495.782 / 803; margin: 5px 0; }
  .plp .plp-hero__photo { object-position: 50% 50%; }
  /* on screens past ~2400px the photo's own right edge comes into view: fade it out */
  .plp .plp-hero__cutout { left: 87.740%; top: -.6227%; width: 116.584%; height: 101.245%; -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); }
  .plp-hero__band { padding: 0; }

  .plp-guide { padding: 64px 0; }
  .plp .plp-guide__title { padding: 0 52px; }
  .plp-guide__row { justify-content: center; padding-right: 32px; }
  .plp-guide__intro, .plp-guide__side { flex: 0 0 500px; width: 500px; }

  .plp-block .plp-wrap { padding: 0 20px; }
  .plp-why .plp-block__inner, .plp-products .plp-block__inner { max-width: 996px; margin: 0 auto; }
  .plp .plp-products__head, .plp .plp-products__list { width: 892px; margin: 0 auto; }
  .plp .plp-products__list { gap: 18px; }
  .plp-products__cta { margin-top: -6px; }
  .plp .plp-products__title { letter-spacing: -.22px; }
  .plp-qa__inner { max-width: 790px; margin: 0 auto; }
  .plp .plp-qa__text { max-width: 600px; }

  .plp-review { padding: 104px 0 164px; }
  .plp-review .plp-wrap { padding: 0; }
  .plp .plp-review__img { object-position: 50% 50%; }

  .plp-callback { padding: 80px 0; }
  .plp-callback__row { display: grid; grid-template-columns: minmax(0, 477fr) minmax(0, 549fr); gap: 110px; }
  .plp-callback__copy { width: auto; }
  .plp .plp-callback__title { max-width: 527px; letter-spacing: -.88px; line-height: 47.52px; }
  .plp .plp-callback__text { max-width: 459.36px; }
  .plp-form__fields--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plp-field--full { grid-column: 1 / -1; }
  .plp .plp-form--callback .plp-form__submit { margin-top: 20px; }
  .plp .plp-form--callback .plp-form__note { margin: 16px 0 36.8px; }
}

@media (prefers-reduced-motion: reduce) {
  .plp .plp-btn, .plp .plp-field__control { transition: none; }
  .plp .plp-btn:active { transform: none; }
}