/* brandmax — pricing button + estimate modal. A separate sheet on purpose:
   everything here is chrome that sits OVER the page (button z 10, modal z 60,
   under the loader's 100) and none of it participates in the runway. Sizes are
   clamp()-based px, not the body's vw em — the modal must not inherit the
   page's design-width scale.

   The card's interior: a serif question over soft raised bubbles. Each of the
   four steps has its own hand-set arrangement (2×2 cards, three abreast, a
   growing pill stack, a pair of doors) but one shared surface and one shared
   answer — ink rising from the bottom edge on hover. */

/* THE BUTTON ------------------------------------------------------------- */

/* The chip rail, fixed opposite the wordmark and mirroring its insets. A row
   on anything wide enough; on the narrowest phones the row would run under
   the wordmark, so the chips stack down the right edge instead. */
.cta-w {
  position: fixed;
  top: max(20px, 1.5em);
  right: max(24px, 1.9em);
  z-index: 10;
  display: flex;
  align-items: stretch;
  gap: 10px;
}
@media only screen and (max-width: 479px) {
  .cta-w {
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 8px;
  }
}

/* A chip ruled in its own ink: 1px box, small caps label, solid fill; on
   hover an ellipse floods up from the bottom edge while the resting label
   launches upward and a second copy rolls in on the flood, wiped in by a
   clip-path. The palette is four dials so the talk chip can invert them:
   the white chip floods ink, the ink chip floods white, and each rests in
   the other's flooded state. */
.pricing-btn {
  --chip-bg: #fff;
  --chip-fg: #1d1d1d;
  --flood-bg: #1d1d1d;
  --flood-fg: #e3e5ea;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 400;
  font-size: clamp(13px, 0.9vw, 16px);
  /* the face ships one weight and synthetic bold has no dial — the same
     hairline the statement body wears, a quarter-pixel here, reads as a
     slightly heavier cut. currentColor re-resolves on the flood's light
     label, so both copies thicken alike. */
  -webkit-text-stroke: 0.02em currentColor;
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--chip-fg);

  padding: 0;
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.pricing-btn__outer {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 0.79em 1.14em;
  border-radius: 0.43em;
  background: var(--chip-bg);
}

/* The rule sits above the flood so the box never loses its edge. An inset
   shadow rather than a border: a 1px border draws its corner as two offset
   arcs and lands heavier through the curve, where the shadow's ring is one
   shape rastered with the box — even weight the whole way round. */
.pricing-btn__outer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  box-shadow: inset 0 0 0 1px var(--ring, currentColor);
  border-radius: inherit;
  pointer-events: none;
  /* the exit delay keeps the ink edge on the still-white chip until the
     drain starts taking the white away; entry re-zeroes it below */
  transition: box-shadow 0.45s ease 0.18s;
}

.pricing-btn__inner,
.pricing-btn__hover {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-btn__inner { position: relative; z-index: 2; }

.pricing-btn__text { display: block; }

/* No will-change anywhere in the chip: a promoted child forces the outer's
   rounded clip through a compositor mask, which is what was pixelating the
   corners at rest and the flood's silhouette mid-rise. These are short
   transitions — promotion for their duration is automatic and enough.

   BASE TRANSITIONS ARE THE EXIT. The hover rules below carry the entry
   timings; these fire when the pointer leaves, and they are SEQUENCED, not
   simultaneous: the flood's label wipes out first (0.22s), the flood drains
   behind it (from 0.18s), and the resting label comes home last (from
   0.3s), riding down through ground the flood has already ceded. Launched
   together, the drain drew the flood label onto its own retreating sheet
   while the returning label chopped in above the seam — two labels and a
   hard light/dark boundary at once, worst on the ink chip where both
   pairings are full-contrast. */
.pricing-btn__inner .pricing-btn__text {
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1) 0.3s;
}

/* the flood: an ellipse parked below the bottom edge, released on hover */
.pricing-btn__hover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--flood-bg);
  color: var(--flood-fg);
  clip-path: ellipse(80% 50% at 50% 152%);
  transition: clip-path 0.55s cubic-bezier(0.19, 1, 0.22, 1) 0.18s;
}

.pricing-btn__hover .pricing-btn__text {
  transform: translate(0, 0.5em);
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

/* the label on the flood carries its own reveal: the copy lives in the
   pseudo-element and is wiped in from below as the flood rises */
.pricing-btn__hover .pricing-btn__text::after {
  content: attr(data-text);
  position: relative;
  display: block;
  clip-path: inset(100% 0 0);
  /* exit: gone in a fifth of a second, eaten top-first just ahead of the
     drain's own descending edge */
  transition: clip-path 0.22s cubic-bezier(0.4, 0, 0.8, 0.4);
}

/* the same wipe as a real element, for a flood label that carries markup —
   attr() content can hold text only, and the talk chip's copy ends in an
   SVG. One of the two per chip, never both. */
.pricing-btn__reveal {
  position: relative;
  display: block;
  clip-path: inset(100% 0 0);
  transition: clip-path 0.22s cubic-bezier(0.4, 0, 0.8, 0.4);
}

@media (hover: hover) {
  .pricing-btn:hover .pricing-btn__inner .pricing-btn__text {
    transform: translate(0, -0.75em);
    transition: transform 0.4s cubic-bezier(0.55, -0.61, 0.73, 0.04);
  }
  .pricing-btn:hover .pricing-btn__hover {
    clip-path: ellipse(100% 70% at 50% 50%);
    transition:
      clip-path 0.8s cubic-bezier(0.86, 0, 0.07, 1),
      background-color 0.45s ease,
      color 0.45s ease;
  }
  .pricing-btn:hover .pricing-btn__hover .pricing-btn__text {
    transform: translate(0, 0);
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.35s;
  }
  .pricing-btn:hover .pricing-btn__hover .pricing-btn__text::after,
  .pricing-btn:hover .pricing-btn__hover .pricing-btn__reveal {
    clip-path: inset(0 0 0);
    transition: clip-path 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0.35s;
  }
}

/* clicked: js/pricing.js pins the filled state so the flood finishes before
   the sheet lifts — outside the hover gate on purpose, so a tap gets the same
   run. Mirrors the :hover declarations above exactly. */
.pricing-btn.is-filling .pricing-btn__inner .pricing-btn__text {
  transform: translate(0, -0.75em);
  transition: transform 0.4s cubic-bezier(0.55, -0.61, 0.73, 0.04);
}
.pricing-btn.is-filling .pricing-btn__hover {
  clip-path: ellipse(100% 70% at 50% 50%);
  transition:
    clip-path 0.8s cubic-bezier(0.86, 0, 0.07, 1),
    background-color 0.45s ease,
    color 0.45s ease;
}
.pricing-btn.is-filling .pricing-btn__hover .pricing-btn__text {
  transform: translate(0, 0);
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.35s;
}
.pricing-btn.is-filling .pricing-btn__hover .pricing-btn__text::after,
.pricing-btn.is-filling .pricing-btn__hover .pricing-btn__reveal {
  clip-path: inset(0 0 0);
  transition: clip-path 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0.35s;
}

.pricing-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
/* the ink chip's currentColor is paper — invisible as an outline on the
   light hero, so its focus ring states the ink outright like its neighbour */
.pricing-btn--ink:focus-visible { outline-color: #1d1d1d; }

/* THE TALK CHIP: the four dials swapped. It rests where the pricing chip's
   hover ends — ink under paper — and floods back to white, so the pair reads
   as one mechanism seen from both sides. A mailto, so it works script-free
   and is exempt from the noscript hide. */
.pricing-btn--ink {
  --chip-bg: #1d1d1d;
  /* a whisper under opaque: Chrome drops LCD subpixel smoothing for
     translucent text, and light-on-dark is where its colour fringing
     shows — the white chip's ink label keeps the subpixel crispness */
  --chip-fg: rgba(227, 229, 234, 0.99);
  --flood-bg: #fff;
  --flood-fg: #1d1d1d;

  /* No inner rule at rest: a paper ring inside an ink silhouette sits a
     thinned dark arc away from the paper backdrop, and the corners read as
     bitten where the two nearly touch. The rule this chip needs — an edge
     over the runway's dark scenes — hangs OUTSIDE the silhouette instead
     (below), where the light ground simply absorbs it. */
  --ring: transparent;
}

/* the outset rule: on __outer itself, so its own overflow cannot clip it */
.pricing-btn--ink .pricing-btn__outer {
  box-shadow: 0 0 0 1px rgba(227, 229, 234, 0.55);
}

/* The ink chip's flood is white, and a pale ring on a white chip dissolves
   over the hero's own white ridges — so the rule turns to ink with the
   flood, on the same 0.45s the flood's colours ride. The white chip keeps
   its rule as-is: its dark flood is its own edge. */
@media (hover: hover) {
  .pricing-btn--ink:hover { --ring: #1d1d1d; }
  .pricing-btn--ink:hover .pricing-btn__outer::after { transition-delay: 0s; }
}

/* the arrow rides the label as a glyph: em-sized, stroke in currentColor, so
   it changes voice with the copy it sits beside — light at rest, ink on the
   flood — and thickens with nothing (text-stroke passes over SVG). */
.talk-arrow {
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  margin-left: 0.42em;
}

/* MODAL SHELL ------------------------------------------------------------ */

/* A dialog card, not a sheet: the wrapper centres it and the site stays
   visible — dimmed and blurred — on every side. */
.pm-w {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.pm-w[hidden] { display: none; }

.pm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 11, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.pm-panel {
  --fg: #1d1d1d;
  --bg: #e3e5ea;

  position: relative;
  z-index: 1;
  width: min(820px, 100%);
  /* one size for every screen — steps with fewer rows and the result all
     live in the same box; only the viewport can shrink it */
  height: min(620px, calc(100vh - 32px));
  height: min(620px, calc(100dvh - 32px));
  border-radius: clamp(16px, 2vw, 22px);
  overflow: hidden;

  display: flex;
  flex-direction: column;

  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 30px 80px rgba(5, 6, 8, 0.5);

  font-family: "Helvetica Neue", "Nimbus Sans", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* the deal holds a full checkout: the box grows for that screen alone,
   wide enough that Stripe sets expiry and CVC abreast */
.pm-panel:has(.pm-deal) {
  width: min(980px, 100%);
  height: min(840px, calc(100vh - 32px));
  height: min(840px, calc(100dvh - 32px));
}

/* the contact face holds the whole conversation without a scroll: the box
   grows just enough that all four groups and the send stand in one view */
.pm-panel:has(.pm-contact) {
  height: min(768px, calc(100vh - 32px));
  height: min(768px, calc(100dvh - 32px));
}

/* background scroll is frozen while the card is up; everything the card holds
   fits without scrolling (the stage keeps an auto overflow only as a safety
   net for very short frames — with this scale it never engages) */
html.pm-lock {
  overflow: hidden;
  padding-right: var(--pm-sbw, 0px);   /* keep layout where the scrollbar was */
}

/* HEAD ------------------------------------------------------------------- */

.pm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(18px, 2.6vh, 26px) clamp(24px, 4vw, 56px) 0;
  flex-shrink: 0;
}

.pm-bar {
  display: block;
  width: clamp(90px, 11vw, 170px);
  height: 2px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  overflow: hidden;
}
.pm-bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pm-headbtns {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* the two icons: restart and close, bare glyphs with a generous hit area —
   quiet until the pointer finds them */
.pm-ico {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1;
  color: currentColor;
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.25s ease;
}
.pm-ico--restart { font-size: clamp(17px, 1.35vw, 20px); }
@media (hover: hover) {
  .pm-ico:hover { opacity: 1; }
}
.pm-ico:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* STAGE ------------------------------------------------------------------ */

/* A steady room: min-height sized to the four-option steps, so the card does
   not breathe between questions with fewer rows. */
.pm-stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: clamp(10px, 2vh, 22px) clamp(24px, 4vw, 56px) clamp(18px, 3vh, 30px);
}

.pm-step {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-block: auto;
}

.pm-question {
  font-family: "PP Grafier", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(27px, 3vw, 46px);
  line-height: 1.06;
  margin-bottom: clamp(24px, 4.6vh, 44px);
}

/* OPTIONS ---------------------------------------------------------------- */

/* One bubble family, four hand-set rooms. Every option is a soft raised
   bubble — a breath lighter than the panel, lit along its top edge like the
   keycap button — carrying one loud grotesk name and one quiet line beneath.
   Every bubble answers the same way: ink rises from the bottom edge and the
   type steps into the light. What changes is the architecture per question:

     quad   what are we building   2×2 cards, the 3D flagship bottom-right
     trio   project size           three cards abreast, S/M/L on a shelf
     tiers  creativity             a ladder, Standard at the top rung
     duo    timeline               two tall doors, one decision            */

.pm-opts {
  list-style: none;
  display: grid;
  gap: clamp(8px, 1.2vh, 12px);
}
.pm-opts li { display: flex; min-width: 0; }

.pm-opts--quad  { grid-template-columns: 1fr 1fr; }
.pm-opts--tiers { grid-template-columns: 1fr; }
.pm-opts--trio  { grid-template-columns: repeat(3, 1fr); }
.pm-opts--duo   { grid-template-columns: 1fr 1fr; }

/* the card: name up top, serif line resting on the floor */
.pm-row {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(14px, 2.6vh, 26px);
  padding: clamp(16px, 2.6vh, 22px) clamp(18px, 2vw, 26px);
  border: 0;
  border-radius: 20px;
  overflow: hidden;   /* clips the rising ink to the bubble */
  background: rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 6px 18px rgba(29, 29, 29, 0.05);
  color: currentColor;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pm-opts--quad .pm-row { min-height: clamp(108px, 19vh, 142px); }
.pm-opts--trio .pm-row { min-height: clamp(118px, 16vh, 152px); }

/* the ladder: four flat rungs read top to bottom, mild to MAX */
.pm-opts--tiers .pm-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(14px, 2.4vh, 19px) clamp(20px, 2.4vw, 30px);
}
.pm-opts--tiers .pm-desc { text-align: right; }

/* the doors: taller, calmer, bigger voice */
.pm-opts--duo .pm-row {
  min-height: clamp(150px, 30vh, 226px);
  border-radius: 24px;
}
.pm-opts--duo .pm-name { font-size: clamp(17px, 1.9vw, 27px); }

/* The fill is the chips' flood at card scale: an ellipse parked below the
   bottom edge, released on hover — a bowed waterline, not a flat sheet —
   on the chips' two curves (the slow-shouldered 0.86,0,0.07,1 rise, the
   decisive 0.19,1,0.22,1 drain) wound a shade quicker: an option under an
   aiming pointer answers faster than a chrome chip poses. As there, BASE
   TRANSITIONS ARE THE EXIT; the hover rules carry the entry. */
.pm-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fg);
  clip-path: ellipse(80% 50% at 50% 152%);
  transition: clip-path 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}

.pm-row > * { position: relative; }

/* The card carries real copy, so no second label rolls in on the water —
   the ink swap itself is the choreography, sequenced to the waterline.
   Exit: the drain starts fast, so the name (up top) is given back almost
   at once and the desc (on the floor) a beat later. */
.pm-row .pm-name { transition: color 0.25s ease 0.03s; }
.pm-row .pm-desc { transition: color 0.25s ease 0.11s, opacity 0.25s ease 0.11s; }

.pm-name {
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.45vw, 20px);
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-transform: uppercase;
}

.pm-desc {
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: 1.35;
  opacity: 0.5;
}

@media (hover: hover) {
  .pm-row:hover::before {
    clip-path: ellipse(100% 70% at 50% 50%);
    transition: clip-path 0.65s cubic-bezier(0.86, 0, 0.07, 1);
  }
  /* entry, read off the rise curve: it passes the card floor near 0.25s and
     the top near 0.37s — each swap is mid-fade as the water arrives */
  .pm-row:hover .pm-desc {
    color: var(--bg);
    opacity: 0.8;
    transition: color 0.22s ease 0.16s, opacity 0.22s ease 0.16s;
  }
  .pm-row:hover .pm-name {
    color: var(--bg);
    transition: color 0.22s ease 0.28s;
  }
}

/* The chosen bubble holds the filled state while the step leaves — the
   chips' is-filling move. Mirrors the :hover declarations above EXACTLY,
   and outside the hover gate on purpose: a hover-started flood continues
   seamlessly (same target, same clock — a retimed transition would not
   restart anyway, so agreeing with the running one is the only honest
   spec), and a touch tap gets the same run, given room by pick()'s hold. */
.pm-row.is-picked::before {
  clip-path: ellipse(100% 70% at 50% 50%);
  transition: clip-path 0.65s cubic-bezier(0.86, 0, 0.07, 1);
}
.pm-row.is-picked .pm-desc {
  color: var(--bg);
  opacity: 0.8;
  transition: color 0.22s ease 0.16s, opacity 0.22s ease 0.16s;
}
.pm-row.is-picked .pm-name {
  color: var(--bg);
  transition: color 0.22s ease 0.28s;
}

.pm-row:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* RESULT ----------------------------------------------------------------- */

/* the number, its weeks, one link. */
.pm-result {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-block: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pm-price {
  font-family: "PP Grafier", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(52px, 6.2vw, 94px);
  line-height: 1;
}

.pm-weeks {
  font-family: "PP Grafier", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(17px, 1.8vw, 26px);
  line-height: 1.1;
  opacity: 0.5;
  margin-top: 0.4em;
}

/* riding the weeks line, a whisper names what the figure measures */
.pm-weeks-cap {
  font-family: "At Aero Retina", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(9px, 0.75vw, 11px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;   /* under the weeks line's own 0.5 this lands near 0.35 */
  margin-left: 1.1em;
}

/* THE ENQUIRY ------------------------------------------------------------ */

/* Under the figures: the enquiry, four numbered groups — index chip, hairline,
   small-caps tag — with the modal's own bubble surface on every field. Groups
   past the first sleep at low opacity (and inert) until name and email hold
   up, so the form reads as a short conversation, not a wall of inputs. */
.pm-form {
  width: 100%;
  margin-top: clamp(30px, 5.4vh, 52px);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.6vh, 24px);
}

.pm-fg { transition: opacity 0.4s ease; }
.pm-fg.is-ghost { opacity: 0.28; }

.pm-fg-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(10px, 1.6vh, 14px);
}

.pm-fg-index {
  font-family: "At Aero Retina", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  line-height: 1;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(29, 29, 29, 0.22);
  border-radius: 6px;
}

.pm-fg-line {
  flex: 1;
  height: 1px;
  background: rgba(29, 29, 29, 0.1);
}

.pm-fg-tag {
  font-family: "At Aero Retina", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(9px, 0.75vw, 11px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.45;
}

.pm-fg-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* the company row carries three fields abreast */
.pm-fg-fields--trio { grid-template-columns: 1fr 1fr 1fr; }

/* the timeline pair wears whisper captions — Start / Estimated completion —
   so the two dates still read apart once values replace the placeholders */
.pm-fg-lab {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.pm-fg-cap {
  font-family: "At Aero Retina", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(8px, 0.65vw, 10px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.4;
  padding-left: clamp(12px, 1.05vw, 16px); /* sits on the field's text inset */
  transition: opacity 0.25s ease;
}

.pm-fg-lab:focus-within .pm-fg-cap { opacity: 0.7; }

.pm-field {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.3;
  color: #1d1d1d;
  width: 100%;
  min-width: 0;
  padding: 0.85em 1.05em;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 18px rgba(29, 29, 29, 0.05);
  transition: border-color 0.25s ease;
  -webkit-appearance: none;
  appearance: none;
}
.pm-field::placeholder { color: rgba(29, 29, 29, 0.42); opacity: 1; }
.pm-field:focus { outline: none; border-color: rgba(29, 29, 29, 0.55); }
.pm-field[readonly] { cursor: default; }
.pm-field[readonly]:focus { border-color: transparent; }

.pm-field--area {
  display: block;
  min-height: clamp(88px, 14vh, 128px);
  resize: none;
}

.pm-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(2px, 0.8vh, 8px);
}
.pm-form-foot .pm-again { margin-top: 0; }

/* the send: one solid ink pill closing the sheet's only journey */
.pm-send {
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #e3e5ea;
  background: #1d1d1d;
  border: 0;
  border-radius: 999px;
  padding: 0.9em 1.8em 0.95em;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.3s ease, filter 0.3s ease;
}

/* standing alone on the contact face, the send dozes and wakes like the
   cta pair does under the estimate */
.pm-send.is-ghost { opacity: 0.45; filter: saturate(0.5); }
@media (hover: hover) {
  .pm-send:hover { transform: translateY(-0.1em); }
}
.pm-send:active { transform: translateY(0.05em); }
.pm-send:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* the send and the offer travel as a pair on the foot's right end */
.pm-cta-pair {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

/* neither door opens until the enquiry is whole: the pair dozes in the
   sheet's own ghost voice, and wakes as the last field fills */
.pm-cta-pair.is-ghost { opacity: 0.45; filter: saturate(0.5); }

/* an early click answers by pointing at the first gap */
.pm-field.is-nag { outline: 2px solid rgba(178, 46, 28, 0.55); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .pm-field.is-nag { animation: pm-nag 0.3s ease; }
  @keyframes pm-nag {
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
  }
}

.pm-form-err {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #b02e1c;
  text-align: right;
  margin-top: 10px;
}
.pm-form-err a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

.pm-send:disabled { opacity: 0.6; cursor: default; }

/* the offer: the send's twin cast in cherry red. Same pill, same caps —
   white type on a deep warm fill, the surface lit along its top edge the
   way the sheet's own bubbles are. Wired to nothing yet, like the send. */
.pm-offer {
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1d1d1d;
  background: linear-gradient(#ff7a5c, #f2503a);
  border: 0;
  border-radius: 999px;
  padding: 0.9em 1.8em 0.95em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}
@media (hover: hover) {
  .pm-offer:hover { transform: translateY(-0.1em); filter: brightness(1.05); }
}
.pm-offer:active { transform: translateY(0.05em); filter: brightness(0.97); }
.pm-offer:focus-visible { outline: 2px solid #f2503a; outline-offset: 3px; }

/* the aside rides the foot's empty middle, in the sheet's own caption voice,
   a drawn stroke reaching for the offer — no extra rows, no borrowed airs */
.pm-nudge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;   /* hugs the pair from the middle's slack */
  margin-right: 4px;
  /* the note rides above the row's midline, tipped a hair, the way a hand
     drops an aside beside the thing it points at */
  transform: translateY(-13px) rotate(-2deg);
  transform-origin: 100% 50%;
}

.pm-nudge-text {
  font-family: "At Aero Retina", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(9px, 0.75vw, 11px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
  white-space: nowrap;
}

.pm-nudge-arrow {
  width: 38px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 12px;   /* the tail leaves from the text's baseline, then dives */
  overflow: visible;
  pointer-events: none;
}

.pm-nudge-arrow path {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

/* the line draws itself toward the pill once the sheet has settled,
   then the head flicks on */
.pm-nudge-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: pm-nudge-draw 0.6s cubic-bezier(0.65, 0, 0.35, 1) 1.05s forwards;
}
.pm-nudge-head {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: pm-nudge-draw 0.25s ease-out 1.62s forwards;
}
@keyframes pm-nudge-draw {
  to { stroke-dashoffset: 0; }
}

.pm-again {
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.02em;
  color: currentColor;
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: clamp(16px, 3vh, 24px);
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.25s ease;
}
@media (hover: hover) {
  .pm-again:hover { opacity: 1; }
}
.pm-again:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* THE DEAL --------------------------------------------------------------- */

/* The closing page splits the sheet's two jobs: on the left the order
   summary — a fifth numbered group with the coupon and the clock among its
   lines, and the CAD/USD choice above it — and on the right the checkout,
   a white card where Stripe's own UI mounts stock, looking like itself. */
.pm-deal {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-block: auto;
}

.pm-deal-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

/* the left pane is the invoice, drawn to hosted Checkout's anatomy:
   merchant circle, the due-today hero, the sell line and the clock, then
   plain line items in Stripe's own type. The site's serif sits this
   screen out — both panes speak Stripe. */
.pm-deal-left {
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, sans-serif;
  color: #30313d;
}

/* the way back sits where hosted Checkout puts it: top of the pane,
   plainly visible — nobody pays feeling cornered */
.pm-deal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin: 0 0 clamp(16px, 2.6vh, 26px);
  padding: 0;
  border: 0;
  background: transparent;
  font: 500 13.5px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, sans-serif;
  color: #30313d;
  opacity: 0.8;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) {
  .pm-deal-back:hover { opacity: 1; transform: translateX(-2px); }
}
.pm-deal-back:focus-visible { outline: 2px solid #30313d; outline-offset: 3px; }

.pm-mer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(18px, 3vh, 30px);
}
.pm-mer img { width: 28px; height: 28px; border-radius: 4px; display: block; }
.pm-mer span { font-size: 14px; font-weight: 500; }

.pm-inv-cap { font-size: 15px; color: #6d6e78; margin: 0; }

.pm-inv-hero {
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: #1a1a1e;
  margin: 2px 0 0;
  font-variant-numeric: tabular-nums;
}

.pm-inv-save { font-size: 14px; line-height: 1.5; margin: 10px 0 0; max-width: 36ch; }

/* what happens after the deposit, said before the deposit */
.pm-inv-next { font-size: 13px; line-height: 1.5; color: #6d6e78; margin: 5px 0 0; max-width: 40ch; }

/* line items: label left, amount right, no leaders — receipts don't dot */
.pm-inv {
  margin: clamp(18px, 3vh, 28px) 0 0;
  display: flex;
  flex-direction: column;
  gap: clamp(11px, 1.8vh, 14px);
}

.pm-inv-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 14px;
}
.pm-inv-row dt { display: flex; flex-direction: column; gap: 3px; font-weight: 400; }
.pm-inv-row dt small { font-size: 12px; color: #6d6e78; }
.pm-inv-row dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the coupon, printed the way Stripe prints one: gray chip, tag, code */
.pm-inv-row--off { align-items: center; }
.pm-inv-row--off dt { gap: 5px; }
.pm-coupon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: rgba(29, 29, 29, 0.07);
  border-radius: 7px;
  padding: 3px 9px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
}
.pm-coupon svg { width: 12px; height: 12px; display: block; opacity: 0.55; }

.pm-inv-row--total {
  margin-top: 2px;
  padding-top: clamp(11px, 1.8vh, 14px);
  border-top: 1px solid rgba(29, 29, 29, 0.14);
}
.pm-inv-row--total dt,
.pm-inv-row--total dd { font-weight: 600; font-size: 15px; }

.pm-inv-row--due dd { font-weight: 600; }

.pm-inv-row--later dt,
.pm-inv-row--later dd { color: #6d6e78; }

/* pay in CAD or USD: two price chips, a round flag naming each */
.pm-deal-cur {
  margin-top: clamp(14px, 2.4vh, 22px);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pm-cur-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid rgba(29, 29, 29, 0.12);
  border-radius: 12px;
  padding: 9px 14px;
  cursor: pointer;
  opacity: 0.55;
  /* stated, not inherited: an unstyled button's text is SYSTEM BLUE on iOS,
     and the amount span below has no color of its own */
  color: #1d1d1d;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.pm-cur-btn.is-on { border-color: rgba(29, 29, 29, 0.6); opacity: 1; }
@media (hover: hover) {
  .pm-cur-btn:hover:not(:disabled) { opacity: 1; }
}
.pm-cur-btn:disabled { cursor: default; opacity: 0.35; }
.pm-cur-btn:focus-visible { outline: 2px solid #1d1d1d; outline-offset: 2px; }
.pm-cur-flag {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}
.pm-cur-code {
  font-family: "At Aero Retina", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(8px, 0.7vw, 10px);
  letter-spacing: 0.08em;
  color: rgba(29, 29, 29, 0.45);
}
.pm-cur-btn span[data-pm-cur-amt] {
  font-family: "PP Grafier", Georgia, "Times New Roman", serif;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1;
}

/* the checkout card: a white Stripe surface. Everything inside is stock
   Stripe — the Link email field and the Payment Element draw themselves —
   and the card supplies only white, padding, and the pay button copied
   off checkout.stripe.com: #0570de, 6px corners, the amount in the label. */
.pm-pay-card {
  background: #fff;
  border-radius: 12px;
  padding: clamp(18px, 2vw, 26px);
  box-shadow: 0 6px 24px rgba(29, 29, 29, 0.08), 0 0 0 1px rgba(29, 29, 29, 0.05);
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, sans-serif;
}

.pm-pay-slot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 220px;   /* the elements' own skeletons load into this */
}

.pm-pay-err {
  font-size: 13px;
  line-height: 1.45;
  color: #df1b41;      /* Stripe's own danger red, plain text like theirs */
  text-align: left;
  margin: 0;
}

.pm-pay {
  width: 100%;
  font: 600 16px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, sans-serif;
  color: #fff;
  background: #0570de;
  border: 0;
  border-radius: 6px;
  padding: 13px 16px;
  cursor: pointer;
  margin-top: 2px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
@media (hover: hover) {
  .pm-pay:hover { background: #0463c4; }
}
.pm-pay:active { background: #05529e; }
.pm-pay:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(5, 112, 222, 0.4); }
.pm-pay:disabled { opacity: 0.55; cursor: default; }

.pm-pay-fine {
  font-size: 13px;
  color: #6d6e78;
  text-align: center;
  margin: 0;
}

/* "Powered by stripe | Terms Privacy" — the wordmark is Stripe's own path */
.pm-pay-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #87878f;
  font-size: 12px;
}
.pm-pay-powered { display: inline-flex; align-items: center; gap: 5px; }
.pm-pay-powered svg { display: block; margin-top: 1px; }
.pm-pay-sep { width: 1px; height: 14px; background: #d8d8dd; }
.pm-pay-legal a { color: inherit; text-decoration: none; }
@media (hover: hover) {
  .pm-pay-legal a:hover { color: #30313d; }
}
.pm-pay-legal a:focus-visible { outline: 2px solid #0570de; outline-offset: 2px; }

/* the word after the payment: one serif verdict, a quiet note, the door */
.pm-placed {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-block: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pm-placed-word {
  font-family: "PP Grafier", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(44px, 5.6vw, 84px);
  line-height: 1;
}

.pm-placed-note {
  font-family: "PP Grafier", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.45;
  opacity: 0.55;
  max-width: 44ch;
  margin-top: clamp(12px, 2vh, 18px);
}

.pm-placed .pm-send { margin-top: clamp(22px, 4vh, 34px); }

/* the sent mark: an ink disc springs in with one overshoot, then the
   check snaps out of it in the sheet's own gray — the Done button's two
   colours, popped the way a wallet confirms */
.pm-sent .pm-placed-word { font-size: clamp(34px, 4.4vw, 64px); }

.pm-sent-mark {
  width: clamp(56px, 8vh, 72px);
  height: auto;
  margin-bottom: clamp(16px, 3vh, 26px);
  overflow: visible;
}
.pm-sent-disc {
  fill: var(--fg, #1d1d1d);
  transform-origin: 50% 50%;
  transform: scale(0);
  animation: pm-sent-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s forwards;
}
.pm-sent-check {
  stroke: var(--bg, #e3e5ea);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: pm-sent-draw 0.28s cubic-bezier(0.3, 0.7, 0.4, 1) 0.6s forwards;
}
@keyframes pm-sent-pop {
  to { transform: scale(1); }
}
@keyframes pm-sent-draw {
  to { stroke-dashoffset: 0; }
}

/* FOOT ------------------------------------------------------------------- */

.pm-foot[hidden] { display: none; }   /* the result screen has no footer */

.pm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 clamp(24px, 4vw, 56px) clamp(16px, 2.6vh, 24px);
  flex-shrink: 0;
}

.pm-back {
  font-family: "At Aero Retina", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(9px, 0.75vw, 11px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: currentColor;
  background: transparent;
  border: 0;
  padding: 0.4em 0;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) {
  .pm-back:hover { opacity: 1; transform: translateX(-0.2em); }
}
.pm-back:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* keep the slot: hiding via display collapses the footer and shifts the hint
   (display beats the UA's [hidden] { display: none }) */
.pm-back[hidden] { display: inline-block; visibility: hidden; }

.pm-hint {
  font-family: "At Aero Retina", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(9px, 0.75vw, 11px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.35;
  text-align: right;
  margin-left: auto;   /* stays right even when Back is hidden on step one */
  transition: opacity 0.25s ease;
}
.pm-hint a {
  color: currentColor;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}
.pm-hint:has(a:hover) { opacity: 0.85; }
.pm-hint a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* THE CONTACT FACE ------------------------------------------------------- */

/* The same panel wearing its talk face: one screen, so the quote chrome —
   progress bar, restart, back — stands down (visibility keeps the header's
   height), and the footer's left end carries the WhatsApp lane instead.
   js/pricing.js toggles the class on [data-pricing-modal] per open. */
.pm-w.pm-mode-contact .pm-bar,
.pm-w.pm-mode-contact .pm-ico--restart { visibility: hidden; }
.pm-w.pm-mode-contact .pm-back { display: none; }

/* the fast lane: the hint's voice with the glyph, left of the footer */
.pm-wa {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: "At Aero Retina", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(9px, 0.75vw, 11px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.45;
  transition: opacity 0.25s ease;
}
.pm-w.pm-mode-contact .pm-wa { display: inline-flex; }
.pm-wa svg { width: 14px; height: 14px; flex: 0 0 auto; }
@media (hover: hover) {
  .pm-wa:hover { opacity: 1; }
}
.pm-wa:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* the line under the serif question — the reference's reassurance, kept */
.pm-contact-sub {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.5;
  opacity: 0.55;
  max-width: 34em;
}

/* One screen means the whole conversation should stand inside it: the
   question gives up half its air, the form starts straight under the sub
   and breathes a step tighter, and the textarea keeps a working height
   rather than a generous one. The estimate's own screens are untouched. */
.pm-contact .pm-question { margin-bottom: clamp(12px, 2.2vh, 20px); }
.pm-contact .pm-form { margin-top: 0; gap: clamp(14px, 2.4vh, 22px); }
.pm-contact .pm-field--area { min-height: clamp(70px, 10vh, 104px); }
@media (max-width: 700px) {
  /* two whispers on one narrow row: let the foot fold, hint under the lane */
  .pm-w.pm-mode-contact .pm-foot { flex-wrap: wrap; row-gap: 8px; }
}

/* the reassurance holding the foot's left end, in the tag's whisper */
.pm-form-note {
  font-family: "At Aero Retina", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(9px, 0.75vw, 11px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.35;
}

/* the budget range wears the field's bubble with a quiet chevron; while the
   placeholder option holds the value the select speaks in placeholder grey
   (`required` keeps it :invalid exactly that long) */
.pm-field--select {
  cursor: pointer;
  padding-right: 2.6em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231d1d1d' stroke-opacity='.45' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.05em center;
  background-size: 0.62em auto;
}
.pm-field--select:invalid { color: rgba(29, 29, 29, 0.42); }
.pm-field--select option { color: #1d1d1d; }

/* visually hidden live region for step announcements */
.pm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* NARROW FRAMES ---------------------------------------------------------- */

@media (max-width: 700px) {
  .pm-w { padding: 10px; }
  .pm-panel {
    border-radius: 14px;
    height: min(600px, calc(100dvh - 20px));
  }

  /* the four arrangements hold their desktop architecture — quad, shelf,
     ladder, doors — and shrink through the clamp() floors alone */

  /* the enquiry folds to one column; the foot keeps its two ends */
  .pm-fg-fields { grid-template-columns: 1fr; gap: 8px; }
  .pm-field { border-radius: 11px; }

  /* the offer slips under the send when the pair can't stand abreast */
  .pm-form-foot { flex-wrap: wrap; row-gap: 10px; }
  .pm-cta-pair { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }

  /* the aside keeps its desktop pose — tipped caps, drawn stroke — with
     the arrow mirrored so it dives down-left into the offer pill on the
     row below instead of reaching sideways */
  .pm-nudge {
    flex-direction: row-reverse;
    margin-right: 24px;
    transform: translateY(-2px) rotate(2deg);
    transform-origin: 0% 50%;
  }
  .pm-nudge-arrow { transform: scaleX(-1); }
  .pm-nudge-text { font-size: 10.5px; }

  /* the deal folds: invoice, then the checkout card, way back last; the
     merchant-and-hero block centers the way hosted Checkout's does */
  .pm-deal-grid { display: flex; flex-direction: column; gap: 0; }
  .pm-deal-left { display: contents; }
  .pm-mer { justify-content: center; }
  .pm-inv-cap, .pm-inv-hero, .pm-inv-save, .pm-inv-next { text-align: center; }
  .pm-inv-save, .pm-inv-next { margin-inline: auto; }
  .pm-deal-cur { justify-content: center; }
  .pm-pay-card { order: 5; margin-top: 22px; }
  .pm-deal-back { align-self: center; margin-bottom: 16px; }

  .pm-hint { max-width: 55%; }
}

/* the narrowest phones only: the architecture holds, but the name and the
   bubble's side padding yield just enough that STANDARD clears its shelf card */
@media (max-width: 360px) {
  .pm-row { padding-inline: 10px; }
  .pm-name { font-size: 12px; }
}

/* REDUCED MOTION --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* the button's and the option rows' hover states redeclare their
     transitions, so the blanket needs the weight to cover every phase of
     the flood — the offer's copy of the move included */
  .pricing-btn,
  .pricing-btn *,
  .pricing-btn *::after,
  .pm-row::before,
  .pm-row *,
  .pm-offer,
  .pm-offer * { transition: none !important; }

  .pm-bar-fill,
  .pm-fg,
  .pm-field,
  .pm-send,
  .pm-pay,
  .pm-back,
  .pm-ico { transition: none; }

  /* the arrow and the sent mark arrive drawn */
  .pm-nudge-line,
  .pm-nudge-head,
  .pm-sent-check {
    animation: none;
    stroke-dashoffset: 0;
  }
  .pm-sent-disc { animation: none; transform: scale(1); }
}