/* ==========================================================================
   Bigmate partnerships page: 2026 redesign
   Designed on the Claude Design canvas "Partnerships Page Redesign"
   (round 1: Hero A; round 2: the paths around a shared spine, the applying
   timeline, the systems as three plain lists; round 3: the paths card rising
   into the hero, a line from the paths into the timeline, and the proof card
   over the close), from the concepts in the ChatGPT partner draft. Loads
   after home-2026.css and reuses its .hp-hero, .hp-chip, .hp-gradient,
   .hp-section__title, .hp-btn-*, .hp-textlink and .hp-cta blocks; this file
   only adds what the page needs.
   Prefix: pt-
   ========================================================================== */

:root {
  --pt-tint: #f5f8fa;
  --pt-rule: #dde6f1;
  --pt-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* The two overhangs, as on the homepage: the paths card up into the hero,
     the proof card down over the close. The hero's foot and the CTA's head
     are sized from the same numbers, so they cannot drift apart. */
  --pt-lift: 170px;
  --pt-lift-gap: 48px;
  --pt-overhang: 140px;
  --pt-photo-h: 190px;
}

/* ----------------------------------------------------------- shells */
.pt-sec { position: relative; padding: var(--hp-section-y, 96px) 0; }
.pt-sec--tint { background: var(--pt-tint); }
/* The nav is sticky, so an anchor jump has to clear it. */
.pt-sec[id] { scroll-margin-top: calc(var(--nv-offset, 80px) + 16px); }
.pt-sec .hp-chip { margin-bottom: 0; }
.pt-sec .hp-chip + .pt-title { margin-top: 20px; }

/* A second line in the brand gradient, on its own line (the PAS .pd-d2 em). */
.pt-title em { display: block; width: fit-content; font-style: normal; font-weight: inherit; }

.pt-lead { margin: 22px 0 0; max-width: 58ch; color: var(--hp-body); font-size: 18px; line-height: 1.6; text-wrap: pretty; }

/* Heading on the left, a link or action on the right, bottoms aligned. */
.pt-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 40px; }
.pt-head-row .hp-textlink { margin-bottom: 6px; }

/* The one button on a light ground: the hub's selected filter pill
   (.sh-seg__btn[aria-pressed="true"]) as a link. */
.pt-btn-navy {
  display: inline-flex; align-items: center; gap: 9px;
  height: var(--hp-btn-h, 52px); padding: 0 26px;
  border-radius: var(--hp-radius-pill); background: var(--hp-navy);
  box-shadow: 0 6px 18px rgba(4, 19, 73, 0.18);
  color: #fff; font-size: 15.5px; font-weight: 600; white-space: nowrap;
  transition: transform 0.55s var(--pt-ease), box-shadow 0.55s ease;
}
.pt-btn-navy:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(4, 19, 73, 0.26); }
.pt-btn-navy:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 3px; }
.pt-btn-navy .hp-icon { font-size: 16px; transition: transform 0.5s var(--pt-ease); }
.pt-btn-navy:hover .hp-icon { transform: translateX(5px); }

/* ============================================================== HERO */
/* The homepage hero, ending on its headline: the paths card below rises
   into its foot, so the hero leaves room for the lift. Its ghost is a
   dragline; this page shows the rest of the fleet. */
.pt-hero.hp-hero { padding-bottom: calc(var(--pt-lift-gap) + var(--pt-lift)); }
.pt-hero .hp-hero__ghost { background-image: url(../images/partners/hero-ghost.webp); }

/* "Build what's missing." is 711px at 76px, 34px wider than the homepage's
   headline column, so this hero gives the headline more of the row. Only
   while the head is two columns: below 1100px the homepage stacks it, and
   this selector would otherwise out-rank that. */
@media (min-width: 1100px) {
  .pt-hero .hp-hero__head { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0 56px; }
}

/* The brand gradient on a dark ground (the PAS and hub heroes, not the
   homepage's flat ice). Block and fit-content, so the stops span the words. */
.pt-hero__accent {
  display: block; width: fit-content; padding-bottom: 2px;
  background: linear-gradient(95deg, var(--hp-ice) 0%, var(--hp-cyan) 38%, var(--hp-blue-bright) 72%, var(--hp-violet) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ================================================== THE TWO PATHS */
/* The card rises into the hero (the PAS page's lifted photo card). The
   section needs flow-root or the negative margin collapses through it and
   drags the tint up over the hero. Only the card is lifted. */
.pt-sec--lifted { display: flow-root; padding-top: 0; }
.pt-paths-wrap { position: relative; z-index: 2; margin-top: calc(-1 * var(--pt-lift)); }

/* Two paths either side of a navy spine that carries what they share, so
   the shared terms are said once. Each path is its own <article>, topped by
   the photograph that used to be its door in the hero. */
.pt-paths {
  display: grid; grid-template-columns: minmax(0, 1fr) 290px minmax(0, 1fr);
  border-radius: var(--hp-radius); overflow: hidden;
  background: #fff; box-shadow: var(--hp-sh-lg);
}
.pt-path { display: flex; flex-direction: column; scroll-margin-top: calc(var(--nv-offset, 80px) + 16px); }
.pt-path__photo { position: relative; height: var(--pt-photo-h); overflow: hidden; background: var(--hp-navy); }
.pt-path__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pt-path--channel .pt-path__photo img { object-position: 50% 42%; }
.pt-path--engineering .pt-path__photo img { object-position: 50% 38%; }
.pt-path__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 16, 47, 0.1) 20%, rgba(2, 16, 47, 0.9) 100%); }
.pt-path__head { position: absolute; left: 44px; right: 44px; bottom: 24px; z-index: 1; }
.pt-path__kicker { margin: 0; color: var(--hp-ice); font-size: var(--hp-label); font-weight: 700; letter-spacing: var(--hp-label-track); text-transform: uppercase; }
.pt-path__title { margin: 8px 0 0; color: #fff; font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -0.8px; }
.pt-path__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 12px 44px 40px; }
.pt-path__label { margin: 26px 0 12px; color: var(--hp-muted); font-size: var(--hp-label); font-weight: 600; letter-spacing: var(--hp-label-track); text-transform: uppercase; }
.pt-path__foot { margin-top: auto; padding-top: 32px; }

/* Who it suits: examples, not a closed list. */
.pt-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pt-tags li {
  display: inline-flex; align-items: center; height: 32px; padding: 0 13px;
  border-radius: var(--hp-radius-pill); background: var(--hp-chip-bg); border: 1px solid var(--hp-chip-line);
  color: var(--hp-navy); font-size: 13.5px; font-weight: 600; white-space: nowrap;
}

/* How it works: three label and answer pairs on a thin rail. */
.pt-rail { margin: 0; }
.pt-rail > div { position: relative; padding: 0 0 18px 26px; }
.pt-rail > div:last-child { padding-bottom: 0; }
.pt-rail > div::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 10px;
  border: 2px solid var(--hp-blue); border-radius: 50%; background: #fff; box-sizing: border-box;
}
.pt-rail > div:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: 16px; bottom: -2px; width: 2px; background: var(--hp-line); }
.pt-rail dt { color: var(--hp-blue); font-size: var(--hp-label); font-weight: 700; letter-spacing: var(--hp-label-track); text-transform: uppercase; }
.pt-rail dd { margin: 4px 0 0; color: var(--hp-ink); font-size: 16.5px; font-weight: 500; line-height: 1.45; }

/* The spine runs the card's full height; its list starts level with the
   paths' first label, under the photographs. */
/* Its top sits on the hero's navy, so a hairline of ice keeps the card's
   edge visible across it. */
.pt-spine { position: relative; display: flex; flex-direction: column; padding: calc(var(--pt-photo-h) + 38px) 32px 40px; background: var(--hp-navy); box-shadow: inset 0 1px 0 rgba(143, 230, 245, 0.3); color: #fff; overflow: hidden; }
.pt-spine::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 40% at 50% 30%, rgba(26, 206, 225, 0.2), transparent 70%); }
.pt-spine > * { position: relative; }
.pt-spine__k { margin: 0; color: var(--hp-ice); font-size: var(--hp-label); font-weight: 700; letter-spacing: var(--hp-label-track); text-transform: uppercase; }
.pt-spine__list { display: flex; flex-direction: column; gap: 20px; margin: 22px 0 0; padding: 0; list-style: none; }
.pt-spine__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -0.2px; }
.pt-spine__list svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--hp-ice); }

/* ============================================== HOW APPLYING WORKS */
/* Four numbered points on one line; the reply time sits on the stretch
   between applying and hearing back. The line runs centre to centre of the
   end columns: each column is (100% - 3 gaps) / 4, so half of one is /8. */
.pt-apply__aside { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding-bottom: 6px; }
.pt-apply__aside p { margin: 0; color: var(--hp-body); font-size: 16px; }

.pt-timeline-wrap { position: relative; margin-top: 64px; }
.pt-timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.pt-timeline::before {
  content: ""; position: absolute; top: 22px; height: 2px;
  left: calc((100% - 84px) / 8); right: calc((100% - 84px) / 8);
  background: linear-gradient(90deg, #36C6F0 0%, #059DFF 52%, #9A9BFF 100%);
}
.pt-timeline li { position: relative; text-align: center; }
.pt-timeline__num {
  display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 0 auto;
  border-radius: 50%; background: var(--hp-navy); box-shadow: 0 0 0 6px #fff;
  color: var(--hp-ice); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pt-timeline h3 { margin: 22px 0 0; color: var(--hp-ink); font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.4px; }
.pt-timeline p { margin: 8px auto 0; max-width: 28ch; color: var(--hp-body); font-size: 15.5px; line-height: 1.55; text-wrap: pretty; }
.pt-timeline__time {
  position: absolute; left: -14px; top: 23px; transform: translate(-50%, -50%);
  padding: 4px 12px; border: 1px solid var(--pt-rule); border-radius: var(--hp-radius-pill); background: #fff;
  color: var(--hp-blue-deep); font-size: 12.5px; font-weight: 700; white-space: nowrap;
}

/* The relay: one line from the foot of the spine, across the seam, into the
   timeline between steps 2 and 3. The spine is the card's centre and the
   shell's centre, so both halves sit at 50%. The upper half hangs from the
   card to the section's foot; the lower half rises from the timeline and is
   clipped at its own section's top. A wide-screen device: below 1100px the
   spine becomes a band and the timeline turns, so both halves go. */
.pt-paths-wrap::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 2px; margin-left: -1px;
  height: var(--hp-section-y, 96px); background: linear-gradient(180deg, #1ACEE1 0%, #059DFF 100%);
}
.pt-sec--relay { overflow: clip; }
.pt-relay { position: absolute; z-index: 1; left: 50%; bottom: calc(100% - 23px); width: 2px; height: 640px; margin-left: -1px; background: #059DFF; }
.pt-relay::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: #059DFF; box-shadow: 0 0 0 5px #fff;
}

/* ============================================================ THE SYSTEMS */
/* Every system by name, grouped as on the solutions page; the details are
   one click away there. */
.pt-lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 52px; align-items: start; }
.pt-list__head { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 2px solid var(--hp-ink); }
.pt-list__thumb { flex: 0 0 auto; width: 56px; height: 56px; border-radius: var(--hp-radius-sm); object-fit: cover; }
.pt-list__name { margin: 0; color: var(--hp-ink); font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.4px; }
.pt-list__count { margin: 3px 0 0; color: var(--hp-blue); font-size: 13.5px; font-weight: 700; }
.pt-list__items { margin: 6px 0 0; padding: 0; list-style: none; }
.pt-list__items a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; color: var(--hp-ink); font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -0.2px; transition: color 0.2s ease; }
.pt-list__items a:hover { color: var(--hp-blue-deep); }
.pt-list__items a:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 2px; border-radius: 4px; }
.pt-list__items .hp-icon { flex: 0 0 auto; color: var(--hp-blue); font-size: 15px; transition: transform 0.4s var(--pt-ease); }
.pt-list__items a:hover .hp-icon { transform: translateX(4px); }

/* ===================================================== WHAT PARTNERS GET */
.pt-outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 40px; margin: 52px 0 0; padding: 0; list-style: none; }
.pt-outcomes li { padding-top: 22px; border-top: 1px solid var(--pt-rule); }
.pt-outcomes h3 { margin: 0; color: var(--hp-ink); font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -0.45px; }
.pt-outcomes p { margin: 10px 0 0; color: var(--hp-body); font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }

/* =================================================================== FAQ */
/* The PAS page's accordion (.pd-faq), native <details>, no script. */
.pt-faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.pt-faq__head { position: sticky; top: calc(var(--nv-offset, 80px) + 32px); }
.pt-faq__lead { margin: 22px 0 0; color: var(--hp-body); font-size: 16px; line-height: 1.6; }
.pt-faq__lead a { color: var(--hp-blue); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pt-faq__lead a:hover { color: var(--hp-ink); }
.pt-faq { border-bottom: 1px solid var(--pt-rule); interpolate-size: allow-keywords; }
.pt-faq__item { border-top: 1px solid var(--pt-rule); }
.pt-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; }
.pt-faq__item summary::-webkit-details-marker { display: none; }
.pt-faq__item summary:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 4px; border-radius: 6px; }
.pt-faq__item h3 { margin: 0; color: var(--hp-ink); font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -0.3px; transition: color 0.2s ease; }
.pt-faq__item summary:hover h3 { color: var(--hp-blue); }
.pt-faq__icon { position: relative; flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid var(--pt-rule); border-radius: 50%; transition: background-color 0.25s ease, border-color 0.25s ease; }
.pt-faq__icon::before,
.pt-faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; border-radius: 1px; background: var(--hp-ink); transition: transform 0.3s var(--pt-ease), background-color 0.25s ease; }
.pt-faq__icon::after { transform: rotate(90deg); }
.pt-faq__item summary:hover .pt-faq__icon { border-color: var(--hp-blue); }
.pt-faq__item[open] .pt-faq__icon { border-color: var(--hp-ink); background: var(--hp-ink); }
.pt-faq__item[open] .pt-faq__icon::before,
.pt-faq__item[open] .pt-faq__icon::after { background: #fff; }
.pt-faq__item[open] .pt-faq__icon::after { transform: rotate(0deg); }
.pt-faq__item p { margin: 0; padding: 0 56px 26px 0; max-width: 64ch; color: var(--hp-body); font-size: 16px; line-height: 1.65; text-wrap: pretty; }
.pt-faq__item p a { color: var(--hp-blue); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pt-faq__item p a:hover { color: var(--hp-ink); }
.pt-faq__item::details-content { block-size: 0; overflow: clip; transition: block-size 0.35s var(--pt-ease), content-visibility 0.35s allow-discrete; }
.pt-faq__item[open]::details-content { block-size: auto; }

/* ========================================================= THE BRIDGE */
/* The proof card closes the FAQ on the FAQ's ground and hangs over the CTA
   (the PAS page's .pd-case). Only the card is lifted: if the section sat
   above the CTA, its ground would cover the CTA's top and the overlap would
   vanish. */
.pt-bridge { background: var(--pt-tint); }
.pt-proof {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 56px; align-items: center;
  margin-bottom: calc(-1 * var(--pt-overhang)); padding: 32px 40px;
  border-radius: var(--hp-radius); background: #fff; box-shadow: var(--hp-sh-lg);
}
.pt-proof__k { margin: 0; color: var(--hp-muted); font-size: var(--hp-label); font-weight: 600; letter-spacing: var(--hp-label-track); text-transform: uppercase; }
/* Mixed PNG, SVG and white-ground JPEG logos: greyscale, then multiply so the
   JPEG's white box drops out on the white card. */
.pt-proof__logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 22px; align-items: center; margin-top: 22px; }
.pt-proof__logos img { display: block; width: 100%; height: 36px; object-fit: contain; object-position: left center; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; opacity: 0.78; }
.pt-proof dl { margin: 0; }
.pt-proof dl div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-top: 1px solid var(--hp-line); }
.pt-proof dl div:first-child { border-top: 0; }
.pt-proof dt { color: var(--hp-blue); font-size: var(--hp-label); font-weight: 700; line-height: 1.5; letter-spacing: var(--hp-label-track); text-transform: uppercase; }
.pt-proof dd { margin: 0; color: var(--hp-ink); font-size: 14.5px; line-height: 1.5; }

/* =================================================================== CTA */
/* The site's closing block; the photograph is an excavator, framed on it.
   It opens lower by the overhang so the proof card lands in its top. */
.pt-cta .hp-cta__bg img { object-position: 70% 50%; transform-origin: 70% 50%; }
@media (min-width: 1100px) {
  .pt-cta .hp-cta__inner { padding-top: calc(128px + var(--pt-overhang)); }
}

/* ============================================================ RESPONSIVE */
/* Between here and the homepage's 1099px stack, even 72px wraps the accent
   line onto a third; bounded below so the homepage's phone sizes still win. */
@media (min-width: 1100px) and (max-width: 1220px) {
  .pt-hero .hp-hero__title { font-size: 64px; letter-spacing: -2.4px; }
}

/* The spine leaves the middle and becomes a band under both paths; the
   relay goes with it, and the proof card stops overhanging (a wide-screen
   device, as on the homepage and the PAS page). */
@media (max-width: 1099px) {
  :root { --pt-lift: 120px; --pt-lift-gap: 36px; }
  .pt-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-path--channel { grid-column: 1; grid-row: 1; }
  .pt-path--engineering { grid-column: 2; grid-row: 1; border-left: 1px solid var(--hp-line); }
  .pt-spine { grid-column: 1 / -1; grid-row: 2; padding: 26px 44px; }
  .pt-spine__list { flex-direction: row; flex-wrap: wrap; gap: 14px 32px; margin-top: 16px; }
  .pt-spine__list li { font-size: 16.5px; }
  .pt-paths-wrap::after, .pt-relay { display: none; }
  .pt-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pt-faq__head { position: static; }
  .pt-bridge { padding-bottom: 72px; }
  .pt-proof { margin-bottom: 0; }
}

/* The timeline turns vertical, the lists and the proof card stack. */
@media (max-width: 940px) {
  /* One connector per step, from under its number to the next one, so the
     line stops at the last step however tall that step's text runs. */
  .pt-timeline-wrap { margin-top: 44px; }
  .pt-timeline { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pt-timeline::before { display: none; }
  .pt-timeline li { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 20px; text-align: left; }
  .pt-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 22px; top: 52px; bottom: -20px; width: 2px; border-radius: 1px; background: linear-gradient(180deg, #36C6F0 0%, #059DFF 60%, #9A9BFF 100%); }
  .pt-timeline__num { grid-row: 1 / span 3; margin: 0; }
  .pt-timeline h3 { margin-top: 10px; }
  .pt-timeline p { margin: 6px 0 0; max-width: none; }
  .pt-timeline__time { position: static; grid-column: 2; justify-self: start; transform: none; margin-top: 8px; }
  .pt-lists { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pt-proof { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  :root { --pt-lift: 72px; --pt-lift-gap: 28px; --pt-photo-h: 170px; }
  .pt-sec { padding: 72px 0; }
  .pt-sec--lifted { padding-top: 0; }
  .pt-lead { font-size: 17px; }
  .pt-head-row { flex-direction: column; align-items: flex-start; }
  .pt-head-row .hp-textlink { margin-bottom: 0; }
  .pt-paths { grid-template-columns: minmax(0, 1fr); }
  .pt-path--channel, .pt-path--engineering, .pt-spine { grid-column: auto; grid-row: auto; }
  .pt-path--engineering { border-left: 0; }
  .pt-path__head { left: 24px; right: 24px; bottom: 20px; }
  .pt-path__title { font-size: 26px; }
  .pt-path__body { padding: 8px 24px 32px; }
  .pt-spine { padding: 26px 24px; }
  .pt-spine__list { flex-direction: column; gap: 12px; }
  .pt-outcomes { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pt-proof { padding: 26px 22px 12px; }
  .pt-proof__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pt-proof dl div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pt-faq__item p { padding-right: 0; }
}

/* A button that no longer fits its column fills the row instead. */
@media (max-width: 420px) {
  .pt-btn-navy { width: 100%; justify-content: center; padding: 0 16px; font-size: 14.5px; white-space: normal; text-align: center; }
}

/* Landscape phones: the homepage shrinks its hero; the lift follows. */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --pt-lift: 72px; --pt-lift-gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .pt-btn-navy, .pt-btn-navy .hp-icon, .pt-list__items .hp-icon { transition: none; }
  .pt-btn-navy:hover { transform: none; }
  .pt-list__items a:hover .hp-icon { transform: none; }
  .pt-faq__item::details-content { transition: none; }
}