/* ============================================================
   Resume4Pro — Services Page Styles
   ------------------------------------------------------------
   One shared stylesheet for all five services-page sections
   (page-header, process, pricing-selector, faq-section,
   cta-section). Load this on any page that uses ANY of those
   sections' markup — including the landing page, if you embed
   just the pricing-selector partial there.

   REQUIRES: the Sora font must be linked in the page <head>:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   (Swap for a self-hosted Sora woff2 if the production site avoids
   third-party font requests.)
   ============================================================ */

  .r4p-services{
    --primary:#2B4DFF;
    --primary-dark:#0B1240;
    --secondary:#007BFC;
    --white:#FFFFFF;
    --surface:#F3F5FB;
    --muted:#8A93BB;
    --border:#E3E7F5;
    /* Darker companion to --muted for small body-size secondary text. Brand slate #8A93BB is only ~2.7:1
       on the off-white background (WCAG AA needs 4.5:1), which is hard to read on a phone in daylight.
       #5B6491 is ~5.2:1. Keep --muted for decoration; use --muted-strong for text people must read. */
    --muted-strong:#5B6491;

    --primary-08: rgba(43,77,255,.08);
    --primary-12: rgba(43,77,255,.12);

    --radius-xl: 24px;
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-pill: 999px;

    --shadow-card: 0 24px 48px -28px rgba(11,18,64,.28);
    --shadow-card-lg: 0 32px 64px -24px rgba(11,18,64,.38);

    --ease: cubic-bezier(.22,1,.36,1);
  }

  /* ---- Base rules, SCOPED to this package's five sections only ----
     Nothing here targets html, body, * or bare a/button, so loading this
     stylesheet on the landing page cannot restyle the rest of the site.
     :where() keeps the specificity at zero so page-level CSS can still
     override anything. Each section carries its own font, colour and
     background, so it looks identical on any host page. */
  :where(.page-header, .process, .pricing-selector, .faq-section, .cta-section),
  :where(.page-header, .process, .pricing-selector, .faq-section, .cta-section) *,
  :where(.page-header, .process, .pricing-selector, .faq-section, .cta-section) *::before,
  :where(.page-header, .process, .pricing-selector, .faq-section, .cta-section) *::after{ box-sizing:border-box; }

  .page-header, .process, .pricing-selector, .faq-section, .cta-section{
    font-family:'Sora', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    background-color:var(--surface);
    color:var(--primary-dark);
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  :where(.page-header, .process, .pricing-selector, .faq-section, .cta-section) a{ color:inherit; }
  :where(.page-header, .process, .pricing-selector, .faq-section, .cta-section) button{ font-family:inherit; }
  :where(.page-header, .process, .pricing-selector, .faq-section, .cta-section) :focus-visible{ outline:3px solid var(--secondary); outline-offset:3px; border-radius:6px; }

  /* Touch: no 300ms tap delay / double-tap zoom on controls, and a soft brand-tinted tap flash */
  :where(.pricing-selector, .process, .faq-section, .cta-section) :is(a, button, [role="tab"]){
    touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(43,77,255,.12);
  }

  @media (prefers-reduced-motion: reduce){
    :where(.page-header, .process, .pricing-selector, .faq-section, .cta-section),
    :where(.page-header, .process, .pricing-selector, .faq-section, .cta-section) *,
    :where(.page-header, .process, .pricing-selector, .faq-section, .cta-section) *::before,
    :where(.page-header, .process, .pricing-selector, .faq-section, .cta-section) *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  }

  :where(.r4p-services) .wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

  /* ============ PAGE SECTION SHELLS ============ */
  /* This full prototype is now split into distinct <section> elements so the
     pricing tool (#pricing-selector) can be lifted out on its own -- see the
     big banner comment around that section further down for what to copy. */
  .page-header{ position:relative; overflow:hidden; padding:96px 0 8px; }
  .page-header::before,.page-header::after{ content:""; position:absolute; border-radius:50%; z-index:0; pointer-events:none; }
  .page-header::before{ width:520px; height:520px; top:-220px; left:-180px; background:radial-gradient(circle, rgba(43,77,255,.16), transparent 70%); }
  .page-header::after{ width:460px; height:460px; top:-160px; right:-160px; background:radial-gradient(circle, rgba(0,123,252,.14), transparent 70%); }
  .page-header > .wrap{ position:relative; z-index:1; }

  .process{ padding:16px 0 88px; }
  .pricing-selector{ padding:40px 0 64px; }
  .faq-section{ padding:24px 0 8px; }

  .cta-section{ position:relative; overflow:hidden; padding:56px 0 104px; }
  .cta-section::before{ content:""; position:absolute; width:460px; height:460px; bottom:-220px; right:-160px; border-radius:50%; background:radial-gradient(circle, rgba(0,123,252,.14), transparent 70%); z-index:0; pointer-events:none; }
  .cta-section > .wrap{ position:relative; z-index:1; }

  /* ============ HEADER ============ */
  :where(.r4p-services) .services-head{ text-align:center; max-width:700px; margin:0 auto 40px; }
  :where(.r4p-services) .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--primary); background:var(--primary-08); border:1px solid var(--primary-12); padding:7px 16px; border-radius:var(--radius-pill); margin-bottom:20px; }
  :where(.r4p-services) .eyebrow svg{ width:14px; height:14px; }
  :where(.r4p-services) .services-head h2{ font-size:clamp(28px, 3.6vw, 42px); font-weight:800; line-height:1.15; letter-spacing:-0.02em; margin:0 0 16px; color:var(--primary-dark); }
  :where(.r4p-services) .services-head p{ font-size:17px; line-height:1.65; color:var(--muted); margin:0; }

  /* ============ TRUST BAR ============ */
  :where(.r4p-services) .trust-bar{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 auto 56px; padding:0; max-width:920px; }
  :where(.r4p-services) .trust-bar li{ display:flex; align-items:center; gap:9px; background:var(--white); border:1px solid var(--border); padding:11px 18px; border-radius:var(--radius-pill); font-size:13.5px; font-weight:600; color:var(--primary-dark); box-shadow:0 10px 24px -18px rgba(11,18,64,.25); }
  :where(.r4p-services) .trust-bar svg{ width:17px; height:17px; color:var(--primary); flex-shrink:0; }

  /* ============ LEVEL LADDER (informational) ============ */
  :where(.r4p-services) .ladder-wrap{
    max-width:1020px; margin:0 auto 14px;
    background:var(--white); border:1px solid var(--border); border-radius:var(--radius-xl);
    padding:32px 28px 28px; box-shadow:var(--shadow-card);
  }
  :where(.r4p-services) .ladder-heading{ text-align:center; margin-bottom:28px; }
  :where(.r4p-services) .ladder-heading p{ font-size:15px; font-weight:700; color:var(--primary-dark); margin:0 0 4px; }
  :where(.r4p-services) .ladder-heading span.sub{ display:block; font-size:13px; font-weight:600; color:var(--muted); margin-top:2px; }

  :where(.r4p-services) .ladder{ position:relative; display:flex; justify-content:space-between; gap:4px; }
  :where(.r4p-services) .ladder__line{ position:absolute; top:28px; left:8.333%; right:8.333%; height:3px; background:var(--border); border-radius:3px; z-index:0; }
  :where(.r4p-services) .ladder__line-fill{ position:absolute; top:0; left:0; height:100%; width:0%; background:var(--primary); border-radius:3px; transition:width .45s var(--ease); }

  :where(.r4p-services) .ladder__node{
    position:relative; z-index:1; flex:1; min-width:0;
    display:flex; flex-direction:column; align-items:center; gap:7px;
    background:transparent; border:none; cursor:pointer; padding:4px 2px;
  }
  :where(.r4p-services) .ladder__dot{
    position:relative;
    width:56px; height:56px; border-radius:50%;
    background:var(--white); border:2px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:22px; transition:all .25s var(--ease);
    box-shadow:0 8px 20px -12px rgba(11,18,64,.2);
  }
  :where(.r4p-services) .ladder__node.is-active .ladder__dot{
    border-color:var(--primary); background:var(--primary);
    box-shadow:0 12px 26px -10px rgba(43,77,255,.55); transform:scale(1.1);
  }

  /* Always-visible selection indicator: empty ring (unselected) -> filled check (selected).
     This is a persistent affordance rather than a hover-only cue, so it works on touch too. */
  :where(.r4p-services) .ladder__select{
    position:absolute; bottom:-3px; right:-3px; width:19px; height:19px;
    background:var(--white); border:2px solid var(--border); color:transparent;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    transition:all .2s var(--ease);
  }
  :where(.r4p-services) .ladder__select svg{ width:9px; height:9px; }
  :where(.r4p-services) .ladder__node.is-active .ladder__select{
    background:var(--primary-dark); border-color:var(--primary-dark); color:var(--white); transform:scale(1);
  }

  :where(.r4p-services) .ladder__label{ font-size:12px; font-weight:700; color:var(--muted); text-align:center; line-height:1.25; max-width:100px; }
  :where(.r4p-services) .ladder__node.is-active .ladder__label{ color:var(--primary-dark); }
  :where(.r4p-services) .ladder__years{ font-size:11.5px; font-weight:800; color:var(--primary-dark); background:var(--surface); border:1px solid var(--border); padding:2px 9px; border-radius:var(--radius-pill); }
  :where(.r4p-services) .ladder__node.is-active .ladder__years{ color:var(--white); background:var(--primary); border-color:var(--primary); }

  /* Gentle "these are all clickable" wave cue until the person interacts once */
  :where(.r4p-services) .ladder.is-hinting .ladder__dot{ animation:ladderHint 2.4s ease-in-out infinite; animation-delay:var(--hint-delay, 0s); }
  @keyframes ladderHint{
    0%, 100%{ box-shadow:0 8px 20px -12px rgba(11,18,64,.2), 0 0 0 0 rgba(43,77,255,.35); }
    50%{ box-shadow:0 8px 20px -12px rgba(11,18,64,.2), 0 0 0 7px rgba(43,77,255,0); }
  }

  @media (max-width:900px){
    :where(.r4p-services) .ladder{ display:grid; grid-template-columns:repeat(3, 1fr); row-gap:24px; column-gap:6px; }
    :where(.r4p-services) .ladder__line{ display:none; }
    :where(.r4p-services) .ladder__label{ max-width:none; }
  }
  @media (max-width:420px){
    :where(.r4p-services) .ladder__dot{ width:48px; height:48px; font-size:19px; }
    :where(.r4p-services) .ladder__label{ font-size:10.5px; }
    :where(.r4p-services) .ladder__years{ font-size:10.5px; }
  }

  :where(.r4p-services) .bridge-note{ text-align:center; font-size:13.5px; color:var(--muted); max-width:520px; margin:26px auto 40px; line-height:1.6; }
  :where(.r4p-services) .bridge-note strong{ color:var(--primary-dark); }

  /* ============ TABS ============ */
  :where(.r4p-services) .tabs-row{ display:flex; justify-content:center; margin-bottom:44px; }
  :where(.r4p-services) .tabs{ display:inline-flex; gap:4px; background:var(--white); border:1px solid var(--border); padding:6px; border-radius:var(--radius-pill); box-shadow:0 10px 24px -18px rgba(11,18,64,.25); }
  :where(.r4p-services) .tab{ appearance:none; border:none; background:transparent; padding:12px 26px; border-radius:var(--radius-pill); font-weight:700; font-size:14.5px; color:var(--muted); cursor:pointer; transition:all .25s var(--ease); white-space:nowrap; }
  :where(.r4p-services) .tab[aria-selected="true"]{ background:var(--primary-dark); color:var(--white); box-shadow:0 12px 26px -12px rgba(11,18,64,.55); }
  @media (max-width:640px){ :where(.r4p-services) .tabs{ width:100%; } :where(.r4p-services) .tab{ flex:1; padding:12px 10px; font-size:13.5px; } }

  /* ============ DISCOUNT COUNTDOWN ============ */
  /* Read the comment above #price-countdown in html/03-pricing-selector.html
     and the countdown header comment in js/pricing-selector.js before changing
     what this claims or how it behaves -- it must keep telling the truth. */
  :where(.r4p-services) .price-countdown[hidden]{ display:none; }
  :where(.r4p-services) .price-countdown{
    position:relative; overflow:hidden;
    max-width:880px; margin:0 auto 40px;
    display:grid; grid-template-columns:1fr auto; align-items:center; gap:20px 32px;
    background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:20px 28px 20px 32px; box-shadow:0 14px 30px -20px rgba(11,18,64,.3);
  }
  :where(.r4p-services) .price-countdown::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--primary); }

  :where(.r4p-services) .price-countdown__info{ display:flex; align-items:center; gap:14px; min-width:0; }
  :where(.r4p-services) .price-countdown__badge{
    flex-shrink:0; width:44px; height:44px; border-radius:12px;
    background:var(--primary-08); color:var(--primary);
    display:flex; align-items:center; justify-content:center;
  }
  :where(.r4p-services) .price-countdown__badge svg{ width:22px; height:22px; }
  :where(.r4p-services) .price-countdown__title{ font-size:16px; font-weight:800; color:var(--primary-dark); margin:0 0 3px; line-height:1.3; }
  :where(.r4p-services) .price-countdown__title strong{ color:var(--primary); }
  :where(.r4p-services) .price-countdown__sub{ font-size:12.5px; line-height:1.5; color:var(--muted); margin:0; }

  :where(.r4p-services) .price-countdown__digits{ display:flex; align-items:flex-start; justify-content:center; gap:6px; }
  :where(.r4p-services) .price-countdown__unit{ display:flex; flex-direction:column; align-items:center; gap:5px; width:56px; }
  :where(.r4p-services) .price-countdown__num{
    display:block; width:100%; padding:9px 0; text-align:center; border-radius:var(--radius-md);
    background:var(--primary-dark); color:var(--white); transition:background .3s var(--ease);
    font-size:22px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums;
  }
  :where(.r4p-services) .price-countdown__unit-label{ font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
  :where(.r4p-services) .price-countdown__sep{ font-size:20px; font-weight:800; line-height:38px; color:var(--muted); opacity:.5; }

  /* Under 24h left: digit boxes switch from navy to brand blue. Brand colours only, no alarm red. */
  :where(.r4p-services) .price-countdown.is-urgent .price-countdown__num{ background:var(--primary); }

  /* Shown instead of the timer once the real expiry time has passed */
  :where(.r4p-services) .price-countdown__ended{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
  :where(.r4p-services) .price-countdown__ended[hidden]{ display:none; }
  :where(.r4p-services) .price-countdown__ended p{ margin:0; font-size:14px; line-height:1.5; color:var(--primary-dark); font-weight:600; }
  :where(.r4p-services) .price-countdown__refresh{
    appearance:none; border:none; cursor:pointer; background:var(--primary); color:var(--white);
    font-family:inherit; font-weight:700; font-size:13.5px; padding:11px 20px; border-radius:var(--radius-md);
    transition:background .2s var(--ease);
  }
  :where(.r4p-services) .price-countdown.is-ended{ grid-template-columns:1fr; }
  :where(.r4p-services) .price-countdown.is-ended .price-countdown__info,
  :where(.r4p-services) .price-countdown.is-ended .price-countdown__digits{ display:none; }

  /* Once the offer has really ended: hide the discount markup and stop stale-price purchases */
  .pricing-selector[data-offer-state="ended"] .price-was,
  .pricing-selector[data-offer-state="ended"] .price-save{ display:none; }
  .pricing-selector[data-offer-state="ended"] .plan-card__cta{ pointer-events:none; opacity:.45; }

  /* Laptop / tablet landscape: keep the horizontal layout but tighten it */
  @media (max-width:900px){
    :where(.r4p-services) .price-countdown{ padding:18px 22px 18px 26px; gap:16px 20px; }
    :where(.r4p-services) .price-countdown__unit{ width:50px; }
    :where(.r4p-services) .price-countdown__num{ font-size:20px; }
  }

  /* Tablet portrait and mobile: stack, centre, timer spans the full width */
  @media (max-width:720px){
    :where(.r4p-services) .price-countdown{ grid-template-columns:1fr; padding:22px 18px 20px; gap:18px; text-align:center; }
    :where(.r4p-services) .price-countdown::before{ top:0; left:0; right:0; bottom:auto; width:auto; height:4px; }
    :where(.r4p-services) .price-countdown__info{ flex-direction:column; gap:10px; }
    :where(.r4p-services) .price-countdown__digits{ width:100%; max-width:340px; margin:0 auto; gap:4px; }
    :where(.r4p-services) .price-countdown__unit{ flex:1; width:auto; min-width:0; }
    :where(.r4p-services) .price-countdown__num{ font-size:21px; padding:10px 0; }
    :where(.r4p-services) .price-countdown__sep{ width:8px; text-align:center; line-height:40px; }
    :where(.r4p-services) .price-countdown__ended{ flex-direction:column; text-align:center; }
    :where(.r4p-services) .price-countdown__refresh{ width:100%; }
  }
  @media (max-width:360px){
    :where(.r4p-services) .price-countdown{ padding:20px 12px 18px; }
    :where(.r4p-services) .price-countdown__num{ font-size:18px; padding:9px 0; }
    :where(.r4p-services) .price-countdown__title{ font-size:15px; }
  }

  /* ============ PANELS / 3-CARD GRID (original v1 style) ============ */
  :where(.r4p-services) .panel[hidden]{ display:none; }

  :where(.r4p-services) .cards{ display:grid; grid-template-columns:1fr; gap:22px; align-items:stretch; }
  @media (min-width:900px){ :where(.r4p-services) .cards{ grid-template-columns:repeat(3, 1fr); align-items:center; } }

  :where(.r4p-services) .plan-card{
    position:relative; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-xl);
    padding:34px 28px 30px; display:flex; flex-direction:column; box-shadow:var(--shadow-card);
    opacity:0; transform:translateY(18px);
    transition:opacity .5s var(--ease), transform .5s var(--ease), box-shadow .3s var(--ease);
  }
  :where(.r4p-services) .plan-card.in-view{ opacity:1; transform:translateY(0); }

  :where(.r4p-services) .plan-card--popular{ background:var(--primary-dark); border-color:var(--primary-dark); color:var(--white); }
  @media (min-width:900px){
    :where(.r4p-services) .plan-card--popular{ transform:scale(1.045) translateY(0); z-index:2; box-shadow:var(--shadow-card-lg); }
    :where(.r4p-services) .plan-card--popular.in-view{ transform:scale(1.045) translateY(0); }
    :where(.r4p-services) .plan-card--popular:not(.in-view){ transform:scale(1.045) translateY(18px); }
  }

  :where(.r4p-services) .plan-card--matched{ animation:matchPulse 1.6s var(--ease); }
  @keyframes matchPulse{
    0%{ box-shadow:0 0 0 0 rgba(43,77,255,.55); }
    100%{ box-shadow:0 0 0 14px rgba(43,77,255,0); }
  }

  :where(.r4p-services) .badge-popular{
    position:absolute; top:-14px; left:50%; transform:translateX(-50%);
    display:flex; align-items:center; gap:6px; background:var(--primary); color:var(--white);
    font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    padding:8px 16px; border-radius:var(--radius-pill); box-shadow:0 10px 20px -8px rgba(43,77,255,.7);
  }
  :where(.r4p-services) .badge-popular svg{ width:13px; height:13px; }

  :where(.r4p-services) .plan-card__name{ font-size:21px; font-weight:800; margin:6px 0 6px; }
  :where(.r4p-services) .plan-card__for{ font-size:14px; line-height:1.5; color:var(--muted); margin:0 0 6px; }
  :where(.r4p-services) .plan-card--popular .plan-card__for{ color:rgba(255,255,255,.7); }
  :where(.r4p-services) .plan-card__years{ display:inline-block; font-size:12px; font-weight:700; color:var(--primary); background:var(--primary-08); padding:3px 10px; border-radius:var(--radius-pill); margin-bottom:14px; }
  :where(.r4p-services) .plan-card--popular .plan-card__years{ color:var(--white); background:rgba(255,255,255,.16); }

  :where(.r4p-services) .plan-card__price{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin:8px 0 2px; }
  :where(.r4p-services) .price-was{ font-size:15px; color:var(--muted); text-decoration:line-through; text-decoration-color:var(--muted); }
  :where(.r4p-services) .plan-card--popular .price-was{ color:rgba(255,255,255,.55); text-decoration-color:rgba(255,255,255,.55); }
  :where(.r4p-services) .price-now{ font-size:38px; font-weight:800; letter-spacing:-0.01em; color:var(--primary-dark); }
  :where(.r4p-services) .plan-card--popular .price-now{ color:var(--white); }
  :where(.r4p-services) .price-now .price-cents{ font-size:.44em; font-weight:700; vertical-align:.62em; margin-left:1px; }
  :where(.r4p-services) .price-save{ font-size:12.5px; font-weight:700; color:var(--primary); background:var(--primary-08); padding:4px 10px; border-radius:var(--radius-pill); }
  :where(.r4p-services) .plan-card--popular .price-save{ color:var(--white); background:rgba(255,255,255,.16); }
  :where(.r4p-services) .price-note{ font-size:12.5px; color:var(--muted); margin:8px 0 22px; }
  :where(.r4p-services) .plan-card--popular .price-note{ color:rgba(255,255,255,.55); }

  :where(.r4p-services) .plan-card__inherit{ font-size:13px; font-weight:700; color:var(--primary-dark); margin:0 0 10px; }
  :where(.r4p-services) .plan-card--popular .plan-card__inherit{ color:rgba(255,255,255,.85); }

  :where(.r4p-services) .plan-card__features{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:11px; flex-grow:1; }
  :where(.r4p-services) .plan-card__features li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; line-height:1.5; }
  :where(.r4p-services) .feat-ico{ flex-shrink:0; width:20px; height:20px; border-radius:50%; background:var(--primary-08); color:var(--primary); display:flex; align-items:center; justify-content:center; margin-top:1px; }
  :where(.r4p-services) .feat-ico svg{ width:11px; height:11px; }
  :where(.r4p-services) .plan-card--popular .feat-ico{ background:rgba(255,255,255,.16); color:var(--white); }

  :where(.r4p-services) .plan-card__delivery{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--muted); border-top:1px solid var(--border); padding-top:16px; margin-bottom:18px; }
  :where(.r4p-services) .plan-card__delivery svg{ width:15px; height:15px; color:var(--primary); flex-shrink:0; }
  :where(.r4p-services) .plan-card--popular .plan-card__delivery{ color:rgba(255,255,255,.7); border-top-color:rgba(255,255,255,.15); }
  :where(.r4p-services) .plan-card--popular .plan-card__delivery svg{ color:var(--white); }

  :where(.r4p-services) .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; font-weight:700; font-size:15px; border:none; cursor:pointer; transition:all .2s var(--ease); }
  :where(.r4p-services) .plan-card__cta{ width:100%; padding:14px 20px; border-radius:var(--radius-md); background:var(--primary); color:var(--white) !important; margin-bottom:12px; }
  :where(.r4p-services) .plan-card--popular .plan-card__cta{ background:var(--white); color:var(--primary-dark) !important; }

  :where(.r4p-services) .plan-card__cta.is-loading,
  :where(.r4p-services) .plan-card__cta.is-added{ pointer-events:none; }
  :where(.r4p-services) .plan-card__cta.is-loading{ opacity:.85; cursor:wait; }
  :where(.r4p-services) .plan-card__cta.is-added{ animation:ctaPop .35s var(--ease); }
  @keyframes ctaPop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.035); } 100%{ transform:scale(1); } }

  :where(.r4p-services) .btn-spinner{
    display:inline-block; width:13px; height:13px;
    border:2px solid currentColor; border-right-color:transparent;
    border-radius:50%; margin-right:8px; vertical-align:-2px;
    opacity:.85; animation:btnSpin .6s linear infinite;
  }
  @keyframes btnSpin{ to{ transform:rotate(360deg); } }
  :where(.r4p-services) .cta-check{ margin-right:6px; vertical-align:-2px; }

  :where(.r4p-services) .plan-card__more{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--muted); text-decoration:none; }
  :where(.r4p-services) .plan-card__more svg{ width:13px; height:13px; transition:transform .2s var(--ease); }
  :where(.r4p-services) .plan-card--popular .plan-card__more{ color:rgba(255,255,255,.7); }

  :where(.r4p-services) .cross-sell{ text-align:center; max-width:640px; margin:32px auto 0; font-size:14px; line-height:1.6; color:var(--muted); }
  :where(.r4p-services) .cross-sell strong{ color:var(--primary-dark); }

  /* ============ OUR PROCESS ============ */
  :where(.r4p-services) .process-head{ text-align:center; max-width:640px; margin:0 auto 56px; }
  :where(.r4p-services) .process-head h2{ font-size:clamp(26px, 3.2vw, 38px); font-weight:800; color:var(--primary-dark); margin:0 0 14px; letter-spacing:-0.02em; }
  :where(.r4p-services) .process-head p{ font-size:16px; line-height:1.65; color:var(--muted); margin:0; }

  :where(.r4p-services) .process-carousel{ position:relative; display:flex; align-items:center; gap:14px; max-width:1180px; margin:0 auto; }
  :where(.r4p-services) .process-track-wrap{ overflow:hidden; flex:1; min-width:0; }
  :where(.r4p-services) .process-track{ display:flex; width:200%; transition:transform .45s var(--ease); }
  :where(.r4p-services) .process-page{ display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; width:50%; flex-shrink:0; position:relative; }
  :where(.r4p-services) .process-page::before{ content:""; position:absolute; top:180px; left:16.66%; right:16.66%; border-top:2px dashed var(--border); z-index:0; }

  :where(.r4p-services) .process-step{ text-align:center; position:relative; z-index:1; }
  :where(.r4p-services) .process-step__illustration{
    width:136px; height:136px; margin:0 auto 22px; border-radius:50%;
    background:var(--surface); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  :where(.r4p-services) .process-step__illustration svg{ width:98px; height:98px; }
  :where(.r4p-services) .process-step__badge{
    width:38px; height:38px; border-radius:50%; background:var(--primary); color:var(--white);
    font-weight:800; font-size:12.5px; display:flex; align-items:center; justify-content:center;
    margin:0 auto 18px; box-shadow:0 10px 20px -8px rgba(43,77,255,.55); position:relative; z-index:2;
  }
  :where(.r4p-services) .process-step__title{ font-size:16px; font-weight:800; color:var(--primary-dark); margin:0 0 8px; line-height:1.3; }
  :where(.r4p-services) .process-step__desc{ font-size:13.5px; line-height:1.6; color:var(--muted); margin:0; max-width:280px; margin-left:auto; margin-right:auto; }

  :where(.r4p-services) .process-arrow{
    flex-shrink:0; width:44px; height:44px; border-radius:50%;
    background:var(--white); border:1px solid var(--border); box-shadow:0 10px 24px -14px rgba(11,18,64,.3);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    color:var(--primary-dark); transition:all .2s var(--ease); padding:0;
  }
  :where(.r4p-services) .process-arrow[hidden]{ visibility:hidden; }
  :where(.r4p-services) .process-arrow svg{ width:18px; height:18px; }

  @media (max-width:900px){
    :where(.r4p-services) .process-carousel{ flex-direction:column; }
    :where(.r4p-services) .process-arrow{ display:none; }
    :where(.r4p-services) .process-track{ display:block; width:100%; transform:none !important; }
    :where(.r4p-services) .process-page{ width:100%; display:flex; flex-direction:column; gap:40px; }
    :where(.r4p-services) .process-page::before{ display:none; }
    :where(.r4p-services) .process-page + .process-page{ margin-top:40px; }
    :where(.r4p-services) .process-step__desc{ max-width:340px; }
  }

  /* ============ FAQ ============ */
  :where(.r4p-services) .faq{ max-width:760px; margin:0 auto; }
  :where(.r4p-services) .faq h3{ text-align:center; font-size:24px; font-weight:800; color:var(--primary-dark); margin:0 0 28px; }
  :where(.r4p-services) .faq-item{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); margin-bottom:12px; overflow:hidden; }
  :where(.r4p-services) .faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; background:transparent; border:none; text-align:left; padding:19px 24px; font-size:15.5px; font-weight:700; color:var(--primary-dark); cursor:pointer; }
  :where(.r4p-services) .faq-q__icon{ flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--primary-08); color:var(--primary); display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease); }
  :where(.r4p-services) .faq-q__icon svg{ width:13px; height:13px; }
  :where(.r4p-services) .faq-item[data-open="true"] .faq-q__icon{ transform:rotate(45deg); }
  :where(.r4p-services) .faq-a-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease); }
  :where(.r4p-services) .faq-item[data-open="true"] .faq-a-wrap{ grid-template-rows:1fr; }
  :where(.r4p-services) .faq-a-inner{ overflow:hidden; }
  :where(.r4p-services) .faq-a{ margin:0; padding:0 24px 20px; font-size:14.5px; line-height:1.65; color:var(--muted); }

  /* ============ CTA BANNER ============ */
  :where(.r4p-services) .cta-banner{ margin:72px auto 0; max-width:1000px; background:linear-gradient(120deg, var(--primary-dark) 0%, var(--primary) 100%); border-radius:var(--radius-xl); padding:44px 40px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px; color:var(--white); box-shadow:var(--shadow-card-lg); }
  :where(.r4p-services) .cta-banner__text h3{ font-size:24px; font-weight:800; margin:0 0 8px; color: var(--white); }
  :where(.r4p-services) .cta-banner__text p{ font-size:15px; line-height:1.6; color:rgba(255,255,255,.78); margin:0; max-width:440px; }
  :where(.r4p-services) .cta-banner__actions{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
  :where(.r4p-services) .cta-banner .btn{ background:var(--white); color:var(--primary-dark); padding:15px 26px; border-radius:var(--radius-md); font-size:15px; }
  :where(.r4p-services) .cta-banner__note{ display:flex; align-items:center; gap:7px; font-size:13px; color:rgba(255,255,255,.75); }
  :where(.r4p-services) .cta-banner__note svg{ width:14px; height:14px; }

  @media (max-width:640px){
    :where(.r4p-services) .services{ padding:64px 0 72px; }
    :where(.r4p-services) .tabs{ width:100%; max-width:100%; }
    :where(.r4p-services) .cta-banner{ padding:32px 24px; }
    :where(.r4p-services) .cta-banner__actions{ align-items:stretch; width:100%; }
    :where(.r4p-services) .cta-banner .btn{ width:100%; }
  }


  /* =====================================================================
     MOBILE-FIRST POLISH  (90%+ of visitors are on phones)
     Everything below refines the rules above. Order matters: keep this
     block after the base rules.
     ===================================================================== */

  /* ---- Readability: small secondary text uses the darker slate ---- */
  :where(.r4p-services) .services-head p, :where(.r4p-services) .process-head p, :where(.r4p-services) .process-step__desc, :where(.r4p-services) .ladder-heading span.sub,
  :where(.r4p-services) .bridge-note, :where(.r4p-services) .plan-card__for, :where(.r4p-services) .price-note, :where(.r4p-services) .plan-card__delivery,
  :where(.r4p-services) .cross-sell, :where(.r4p-services) .faq-a, :where(.r4p-services) .price-countdown__sub, :where(.r4p-services) .plan-card__more{ color:var(--muted-strong) !important; }
  :where(.r4p-services) .ladder__label, :where(.r4p-services) .tab, :where(.r4p-services) .price-countdown__unit-label{ color:var(--muted-strong); }
  :where(.r4p-services) .tab[aria-selected="true"]{ color:var(--white); }
  :where(.r4p-services) .ladder__node.is-active .ladder__label{ color:var(--primary-dark); }

  /* ---- Tap targets: at least 44px for touch, on any screen size ---- */
  :where(.r4p-services) .tab{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  :where(.r4p-services) .plan-card__more{ min-height:44px; }
  :where(.r4p-services) .plan-card__cta{ min-height:50px; }
  :where(.r4p-services) .faq-q{ min-height:56px; }
  :where(.r4p-services) .price-countdown__unit-label{ font-size:11px; }
  :where(.r4p-services) .ladder__years{ font-size:12px; }

  /* Cards jump into view with a little air above them (the badge hangs 14px above the card).
     Set --r4p-sticky-offset on :root if the landing page has a sticky header. */
  /* 52px = 14px badge overhang + ~18px fade-in slide (the card is still shifted down while the scroll is measured) + breathing room */
  :where(.r4p-services) .plan-card{ scroll-margin-top:calc(var(--r4p-sticky-offset, 0px) + 52px); }
  :where(.r4p-services) .ladder.is-hinting .ladder__dot{ animation-iteration-count:4; }

  /* ---- Touch press feedback (replaces hover on phones) ---- */
  :where(.r4p-services) .plan-card__cta:not(.is-loading):not(.is-added):active{ transform:scale(.985); }
  :where(.r4p-services) .tab:active{ transform:scale(.97); }
  :where(.r4p-services) .ladder__node:active .ladder__dot{ transform:scale(.93); }
  :where(.r4p-services) .faq-q:active{ background:var(--surface); }
  :where(.r4p-services) .process-arrow:active, :where(.r4p-services) .price-countdown__refresh:active, :where(.r4p-services) .cta-banner .btn:active{ transform:scale(.97); }
  :where(.r4p-services) .plan-card__more:active{ color:var(--primary); }

  /* =========================== PROCESS: vertical timeline (tablet + phone) =========================== */
  @media (max-width:900px){
    :where(.r4p-services) .process-head{ margin-bottom:28px; }
    :where(.r4p-services) .process-head h2{ font-size:26px; }
    :where(.r4p-services) .process-head p{ font-size:15px; }
    :where(.r4p-services) .process-carousel{ display:block; max-width:520px; }
    :where(.r4p-services) .process-track-wrap{ overflow:visible; }
    :where(.r4p-services) .process-track{ display:block; width:100%; transform:none !important; }
    :where(.r4p-services) .process-page{ display:block; width:100%; margin:0; position:static; }
    :where(.r4p-services) .process-page + .process-page{ margin-top:0; }
    :where(.r4p-services) .process-page::before{ display:none; }

    :where(.r4p-services) .process-step{
      display:grid; grid-template-columns:40px minmax(0,1fr);
      grid-template-areas:"badge illus" "badge title" "badge desc";
      column-gap:16px; text-align:left; position:relative; padding-bottom:30px;
    }
    :where(.r4p-services) .process-step::before{ content:""; position:absolute; left:19px; top:44px; bottom:4px; border-left:2px dashed var(--border); z-index:0; }
    :where(.r4p-services) .process-page:last-child .process-step:last-child{ padding-bottom:0; }
    :where(.r4p-services) .process-page:last-child .process-step:last-child::before{ display:none; }

    :where(.r4p-services) .process-step__badge{ grid-area:badge; margin:0; align-self:start; }
    :where(.r4p-services) .process-step__illustration{ grid-area:illus; width:96px; height:96px; margin:0 0 12px; justify-self:start; }
    :where(.r4p-services) .process-step__illustration svg{ width:72px; height:72px; }
    :where(.r4p-services) .process-step__title{ grid-area:title; margin:0 0 6px; font-size:16.5px; }
    :where(.r4p-services) .process-step__desc{ grid-area:desc; margin:0; max-width:none; font-size:14.5px; line-height:1.6; }
  }

  /* =========================== PHONES (<= 640px) =========================== */
  @media (max-width:640px){
    :where(.r4p-services) .wrap{ padding:0 16px; }
    .page-header{ padding:52px 0 4px; }
    .process{ padding:26px 0 52px; }
    .pricing-selector{ padding:20px 0 44px; }
    .faq-section{ padding:8px 0 0; }
    .cta-section{ padding:36px 0 60px; }

    /* Header */
    :where(.r4p-services) .services-head{ margin-bottom:22px; }
    :where(.r4p-services) .eyebrow{ font-size:12px; padding:6px 14px; margin-bottom:14px; }
    :where(.r4p-services) .services-head h2{ font-size:27px; line-height:1.18; margin-bottom:12px; }
    :where(.r4p-services) .services-head p{ font-size:15.5px; line-height:1.6; }

    /* Trust bar: compact 2 x 2 grid instead of four full-width pills */
    :where(.r4p-services) .trust-bar{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 auto 6px; max-width:none; }
    :where(.r4p-services) .trust-bar li{ font-size:12px; line-height:1.3; padding:10px 12px; gap:8px; border-radius:14px; }
    :where(.r4p-services) .trust-bar svg{ width:16px; height:16px; }

    /* Ladder */
    :where(.r4p-services) .ladder-wrap{ padding:22px 10px 18px; border-radius:20px; }
    :where(.r4p-services) .ladder-heading{ margin-bottom:18px; }
    :where(.r4p-services) .ladder-heading p{ font-size:15px; }
    :where(.r4p-services) .ladder-heading span.sub{ font-size:12.5px; padding:0 6px; }
    :where(.r4p-services) .ladder{ row-gap:14px; column-gap:2px; }
    :where(.r4p-services) .ladder__node{ min-height:44px; padding:6px 2px; border-radius:14px; }
    :where(.r4p-services) .ladder__dot{ width:52px; height:52px; font-size:22px; }
    :where(.r4p-services) .ladder__label{ font-size:12px; line-height:1.25; }
    :where(.r4p-services) .ladder__years{ font-size:12px; padding:2px 8px; }
    :where(.r4p-services) .bridge-note{ font-size:13px !important ; margin:16px auto 24px; padding:0 4px; }

    /* Tabs: full-width segmented control */
    :where(.r4p-services) .tabs-row{ margin-bottom:22px; }
    :where(.r4p-services) .tabs{ width:100%; padding:5px; }
    :where(.r4p-services) .tab{ flex:1; min-width:0; padding:0 4px; font-size:13.5px; }

    /* Countdown: compact stacked card, timer front and centre */
    :where(.r4p-services) .price-countdown{ padding:18px 14px 16px; gap:12px; margin-bottom:22px; }
    :where(.r4p-services) .price-countdown__badge{ display:none; }
    :where(.r4p-services) .price-countdown__info{ gap:0; }
    :where(.r4p-services) .price-countdown__title{ font-size:15px; margin-bottom:4px; }
    :where(.r4p-services) .price-countdown__sub{ font-size:12.5px; }
    :where(.r4p-services) .price-countdown__digits{ max-width:320px; }
    :where(.r4p-services) .price-countdown__num{ font-size:22px; padding:9px 0; }

    /* Pricing cards */
    :where(.r4p-services) .cards{ gap:20px; }
    :where(.r4p-services) .plan-card{ padding:26px 20px 20px; border-radius:22px; }
    :where(.r4p-services) .plan-card__name{ font-size:20px; margin-top:4px; }
    :where(.r4p-services) .plan-card__for{ font-size:14px !important; min-height:0; }
    :where(.r4p-services) .price-now{ font-size:34px; }
    :where(.r4p-services) .price-was{ font-size:14px; }
    :where(.r4p-services) .price-note{ margin:6px 0 16px; margin-bottom: 8px !important; }
    :where(.r4p-services) .plan-card__inherit{ font-size: 13px !important; margin-top: 10px; margin-bottom: 10px !important; }
    :where(.r4p-services) .plan-card__features{ gap:10px; margin-bottom:16px; }
    :where(.r4p-services) .plan-card__features li{ font-size:14.5px; line-height:1.5; }
    :where(.r4p-services) .plan-card__delivery{ padding-top:14px; margin-bottom:14px; }
    :where(.r4p-services) .plan-card__cta{ min-height:52px; font-size:15.5px; border-radius:14px; margin-bottom:4px; }
    :where(.r4p-services) .plan-card__more{ font-size:13px; }
    :where(.r4p-services) .cross-sell{ font-size:13.5px; margin-top:22px; padding:0 4px; }

    /* Process timeline on phones: no illustrations, just badge + title + text.
       Saves roughly 130px per step. Tablet and desktop keep the illustrations. */
    :where(.r4p-services) .process-head{ margin-bottom:22px; }
    :where(.r4p-services) .process-step__illustration{ display:none; }
    :where(.r4p-services) .process-step{
      grid-template-columns:36px minmax(0,1fr);
      grid-template-areas:"badge title" "badge desc";
      column-gap:14px; padding-bottom:22px;
    }
    :where(.r4p-services) .process-step::before{ left:17px; top:42px; bottom:6px; }
    :where(.r4p-services) .process-step__badge{ width:36px; height:36px; font-size:12px; }
    :where(.r4p-services) .process-step__title{ font-size:16px; line-height:1.3; padding-top:7px; margin:0 0 4px; }
    :where(.r4p-services) .process-step__desc{ font-size:14px; line-height:1.55; }

    /* FAQ */
    :where(.r4p-services) .faq h3{ font-size:22px; margin-bottom:18px; }
    :where(.r4p-services) .faq-item{ border-radius:16px; margin-bottom:10px; }
    :where(.r4p-services) .faq-q{ padding:14px 16px; font-size:15px; line-height:1.4; gap:12px; }
    :where(.r4p-services) .faq-q__icon{ width:28px; height:28px; }
    :where(.r4p-services) .faq-a{ padding:0 16px 18px; font-size:14.5px; }

    /* Closing CTA */
    :where(.r4p-services) .cta-banner{ border-radius:22px; padding:28px 20px; gap:20px; margin-top:0; } /* section padding already spaces it; the old 72px margin doubled the gap */
    :where(.r4p-services) .cta-banner__text h3{ font-size:22px; }
    :where(.r4p-services) .cta-banner__text p{ font-size:14.5px; }
    :where(.r4p-services) .cta-banner .btn{ min-height:52px; font-size:15.5px; }
  }

  /* =========================== SMALL PHONES (<= 360px) =========================== */
  @media (max-width:360px){
    :where(.r4p-services) .services-head h2{ font-size:25px; }
    :where(.r4p-services) .trust-bar li{ font-size:12px; padding:9px 10px; }
    :where(.r4p-services) .tab{ font-size:12.5px; }
    :where(.r4p-services) .plan-card{ padding:24px 16px 18px; }
    :where(.r4p-services) .price-now{ font-size:32px; }
    :where(.r4p-services) .price-countdown__num{ font-size:20px; }
    :where(.r4p-services) .price-countdown__digits{ gap:3px; }
  }

  /* Landscape phones: keep the section from feeling cramped */
  @media (max-height:480px) and (orientation:landscape){
    .page-header{ padding-top:32px; }
    :where(.r4p-services) .plan-card__price {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin: 8px 0 2px;
      justify-content: space-around;
    }
  }

  /* =====================================================================
     HOVER: mouse devices only. On phones a :hover style "sticks" after a
     tap (buttons stay recoloured, cards stay lifted), so none of these
     apply on touch screens.
     ===================================================================== */
  @media (hover:hover) and (pointer:fine){
    :where(.r4p-services) .ladder__node:hover .ladder__dot{
    border-color:var(--primary); transform:translateY(-3px) scale(1.04);
    box-shadow:0 14px 26px -12px rgba(43,77,255,.4);
  }
    :where(.r4p-services) .ladder__node:hover .ladder__select{ border-color:var(--primary); transform:scale(1.12); }
    :where(.r4p-services) .price-countdown__refresh:hover{ background:var(--secondary); }
    :where(.r4p-services) .plan-card__cta:hover{ background:var(--secondary); transform:translateY(-1px); }
    :where(.r4p-services) .plan-card--popular .plan-card__cta:hover{ background:var(--surface); }
    :where(.r4p-services) .plan-card__cta.is-loading:hover{ transform:none; }
    :where(.r4p-services) .plan-card__cta.is-added:hover{ transform:none; }
    :where(.r4p-services) .plan-card__more:hover{ color:var(--primary); }
    :where(.r4p-services) .plan-card__more:hover svg{ transform:translateX(3px); }
    :where(.r4p-services) .plan-card--popular .plan-card__more:hover{ color:var(--white); }
    :where(.r4p-services) .process-arrow:hover{ background:var(--primary); color:var(--white); border-color:var(--primary); }
    :where(.r4p-services) .cta-banner .btn:hover{ background:var(--surface); transform:translateY(-1px); }
  }

  /* ============ DELIVERY TIMELINE DROPDOWN ============ */
  :where(.r4p-services) .plan-card__delivery{ flex-direction:column; align-items:stretch; gap:8px; }
  :where(.r4p-services) .plan-card__delivery-fallback{ font-weight:600; }
  :where(.r4p-services) .plan-card__delivery-label{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--primary-dark); }
  :where(.r4p-services) .plan-card__delivery-label svg{ width:15px; height:15px; color:var(--primary); flex-shrink:0; }
  :where(.r4p-services) .plan-card__delivery-select{
    appearance:none; -webkit-appearance:none; width:100%; min-height:48px; margin:0;
    padding:0 40px 0 14px; border-radius:var(--radius-md);
    border:1.5px solid var(--border); background-color:var(--white); color:var(--primary-dark);
    font-family:inherit; font-size:14.5px; font-weight:600; line-height:1.2; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B4DFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
    text-overflow:ellipsis; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  }
  :where(.r4p-services) .plan-card__delivery-select:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(43,77,255,.16); }
  :where(.r4p-services) .plan-card__delivery-select option{ color:var(--primary-dark); background:var(--white); }
  /* 16px stops iOS Safari zooming the page when the select is tapped */
  @media (max-width:900px), (pointer:coarse){ :where(.r4p-services) .plan-card__delivery-select{ font-size:16px; } }

  :where(.r4p-services) .plan-card--popular .plan-card__delivery-label{ color:rgba(255,255,255,.9); }
  :where(.r4p-services) .plan-card--popular .plan-card__delivery-label svg{ color:var(--white); }
  :where(.r4p-services) .plan-card--popular .plan-card__delivery-select{
    background-color:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); color:var(--white);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
  :where(.r4p-services) .plan-card--popular .plan-card__delivery-select:focus{ border-color:var(--white); box-shadow:0 0 0 3px rgba(255,255,255,.22); }

  :where(.r4p-services) .price-fee-line{
    margin:-6px 0 16px; padding:9px 12px; border-radius:var(--radius-md);
    font-size:13px; font-weight:700; line-height:1.4; color:var(--primary); background:var(--primary-08);
  }
  :where(.r4p-services) .price-fee-line[hidden]{ display:none; }
  :where(.r4p-services) .plan-card--popular .price-fee-line{ color:var(--white); background:rgba(255,255,255,.14); }