/**
 * RP Fitness Online page (/online/, page 107). Loads on this page only, after
 * rp.css. Dark and premium overall, with deliberate rhythm: near-black, deep
 * navy and bright ivory/white product moments (the real app screens and the
 * member card). Red is a strike/CTA only. Feature moments show real app
 * screenshots in a matching phone frame. No invented data illustrations.
 * Animation: tasteful fade/rise only (transform/opacity, CLS 0), motion-safe,
 * JS-off safe.
 */
.rp-online{--dark:#001620;--navy:#002c41;--ivory:#F6F5EE;--red:#e4022e;--ink:#0a2233;--muted:#4a5157;--body:#c4cfd6;--mut:#93a4ae;--line:rgba(255,255,255,.13);margin:0;background:var(--dark);font-family:'Montserrat',Arial,sans-serif;color:var(--body);-webkit-font-smoothing:antialiased}
.rp-online .owrap{max-width:1180px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.rp-online section{padding:112px 0;background:var(--dark)}
.rp-online .h2{font-size:52px;font-weight:800;line-height:1.05;text-transform:uppercase;letter-spacing:.005em;color:#fff;margin:0}
.rp-online .h2 mark{background:transparent;color:var(--red)}
.rp-online .eb{color:var(--mut);font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;margin:0 0 16px}
.rp-online p{font-size:17px;line-height:1.7;color:var(--body)}
.rp-online .rule{width:60px;height:3px;background:var(--red);border:0;margin:0 auto 26px}
.rp-online .cbtn{margin-top:34px;display:flex;justify-content:center}
.rp-online .ohero .cbtn{justify-content:flex-start}

/* ---------- Background variants (rhythm) ---------- */
.rp-online .bg-navy{background:var(--navy)}
.rp-online .bg-ivory{background:var(--ivory)}
.rp-online .bg-white{background:#fff}
.rp-online .bg-ivory .h2,.rp-online .bg-white .h2{color:var(--ink)}
.rp-online .bg-ivory p,.rp-online .bg-white p{color:var(--muted)}
.rp-online .bg-ivory .eb,.rp-online .bg-white .eb{color:#5f676d}

/* ---------- Scroll-in reveal (JS + motion-safe only; visible otherwise) ---------- */
@media(prefers-reduced-motion:no-preference){
  html.rp-anim .rp-online .rp-reveal{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1)}
  html.rp-anim .rp-online .rp-reveal.rp-in{opacity:1;transform:none}
  /* Paired phones: second one settles just after the first */
  html.rp-anim .rp-online .rp-reveal-2{transition-delay:.16s}
  /* Icons: gentle scale-in instead of a big rise */
  html.rp-anim .rp-online .aicon.rp-reveal{transform:translateY(10px) scale(.9)}
  html.rp-anim .rp-online .aicon.rp-reveal.rp-in{transform:none}
  /* How-it-works spine: draw the segments down when the list enters view */
  html.rp-anim .rp-online .osteps-list.rp-draw .ostep::before{transform:scaleY(0);transform-origin:top;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
  html.rp-anim .rp-online .osteps-list.rp-draw.rp-in .ostep::before{transform:scaleY(1)}
}

/* ---------- Hero ---------- */
.rp-online .ohero.wp-block-cover{min-height:760px;align-items:flex-end;padding:0}
.rp-online .ohero .wp-block-cover__background{background:linear-gradient(to top,var(--dark) 0%,rgba(3,5,7,.9) 22%,rgba(3,5,7,.8) 46%,rgba(3,5,7,.66) 64%,rgba(3,5,7,.42) 100%) !important;opacity:1 !important}
.rp-online .ohero .wp-block-cover__inner-container{width:100%;max-width:1180px;margin:0 auto;padding:0 24px 78px;box-sizing:border-box}
.rp-online .ohero .eb{color:#e7edf1;margin-bottom:18px}
.rp-online .oh1{color:#fff;font-size:80px;font-weight:800;line-height:1;text-transform:uppercase;letter-spacing:0;margin:0;max-width:940px}
.rp-online .ohsub{color:#e2e9ed;font-size:19px;line-height:1.5;margin:22px 0 32px;max-width:600px}

/* ---------- Phone section (Stop guessing) ---------- */
.rp-online .opocket{text-align:center;padding-bottom:92px}
.rp-online .opocket .plead{font-size:18px;line-height:1.6;color:var(--muted);margin:20px auto 0;max-width:620px}
.rp-online .opocket-phones{margin:48px auto 0}
.rp-online .opocket-phones img{display:block;width:100%;max-width:1040px;height:auto;margin:0 auto;filter:drop-shadow(0 24px 44px rgba(0,44,65,.24))}

/* ---------- The case (navy, centred) ---------- */
.rp-online .ocase{text-align:center}
.rp-online .ocase .owrap{max-width:860px}
.rp-online .ocase p{font-size:19px;line-height:1.72;margin:24px auto 0;max-width:740px}

/* ---------- Sound familiar (photo, text over) ---------- */
.rp-online .osound.wp-block-cover{min-height:600px;align-items:center;padding:110px 0}
.rp-online .osound .wp-block-cover__background{background:linear-gradient(to bottom,var(--navy) 0%,rgba(4,7,9,.89) 14%,rgba(4,7,9,.89) 86%,var(--dark) 100%) !important;opacity:1 !important}
.rp-online .osound .wp-block-cover__inner-container{width:100%;max-width:820px;margin:0 auto;padding:0 24px;text-align:center;box-sizing:border-box}
.rp-online .osound .h2{margin:0 0 30px}
.rp-online .osound .sline{font-size:21px;line-height:1.5;color:#eef2f5;font-weight:600;margin:0 auto 14px;max-width:680px}
.rp-online .osound .spay{font-size:31px;line-height:1.28;color:#fff;font-weight:800;margin:38px auto 0;max-width:720px}
.rp-online .osound .spay mark{background:transparent;color:var(--red)}
.rp-online .osound .ssup{font-size:18px;line-height:1.6;color:#c7d2d9;font-weight:500;margin:16px auto 0;max-width:600px}

/* ---------- Feature moments (real app screens in a matching frame) ---------- */
.rp-online .feat .eb{margin-bottom:14px}
.rp-online .feat .h2{font-size:44px;text-align:left}
.rp-online .feat-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:70px;align-items:center;max-width:1080px;margin:0 auto}
.rp-online .feat-grid.rev .feat-app{order:-1}
.rp-online .feat-txt p{margin:20px 0 0;max-width:460px}
.rp-online .feat-app{margin:0}

/* Section 4 variant: centred lede over a matched pair of phones (overview first, detail second) */
.rp-online .feat-two .feat-lede{max-width:720px;margin:0 auto;text-align:center}
.rp-online .feat-two .feat-lede .h2{text-align:center}
.rp-online .feat-two .feat-lede p{margin:20px auto 0;max-width:540px}
.rp-online .feat-two .feat-pair{display:flex;justify-content:center;align-items:flex-start;gap:52px;max-width:720px;margin:56px auto 0}
.rp-online .feat-two .feat-pair .feat-app{flex:0 1 290px}
.rp-online .feat-two .appcap{margin-top:20px}

/* shared phone frame: every app screen matches */
.rp-online .appframe{width:100%;max-width:290px;margin:0 auto;border:11px solid #141c23;border-radius:40px;overflow:hidden;background:#141c23;box-shadow:0 34px 66px rgba(0,0,0,.5);position:relative;line-height:0}
.rp-online .appframe img{display:block;width:100%;height:auto}
.rp-online .appframe .play{position:absolute;left:50%;top:17%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:var(--red);box-shadow:0 8px 22px rgba(0,0,0,.45);z-index:2}
.rp-online .appframe .play::after{content:"";position:absolute;left:56%;top:50%;transform:translate(-50%,-50%);border-left:19px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.rp-online .appcap{text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:18px 0 0}
.rp-online .bg-ivory .appcap,.rp-online .bg-white .appcap{color:#6b7278}

/* ---------- Coaching chat (stylised example, not a screenshot) ---------- */
.rp-online .chat{max-width:430px;margin:0}
.rp-online .chat-note{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:0 0 16px}
.rp-online .chat-b{max-width:84%;padding:12px 16px;border-radius:15px;font-size:15px;line-height:1.45;margin:0 0 11px}
.rp-online .chat-in{background:var(--ivory);color:var(--navy);border-bottom-left-radius:4px}
.rp-online .chat-out{background:var(--red);color:#fff;margin-left:auto;border-bottom-right-radius:4px}

/* ---------- Also inside (honest text, no fabricated data) ---------- */
.rp-online .also{text-align:center}
.rp-online .also .h2{text-align:center}
.rp-online .also .alead{margin:20px auto 0;max-width:640px;font-size:18px}
.rp-online .also-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1000px;margin:52px auto 0}
.rp-online .also-item h3{font-size:18px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.01em;margin:0 0 9px}
.rp-online .also-item p{font-size:15.5px;line-height:1.6;color:var(--body);margin:0 auto;max-width:300px}
.rp-online .also-item .aicon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin:0 auto 20px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03)}
.rp-online .also-item .aicon svg{width:30px;height:30px;color:#dbe4ea}

/* ---------- Meet Richard (photo + text) ---------- */
.rp-online .ocoach .owrap{max-width:1080px}
.rp-online .coach-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:64px;align-items:center}
.rp-online .coach-photo{margin:0;border-radius:20px;overflow:hidden;aspect-ratio:4/5}
.rp-online .coach-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 2%}
.rp-online .coach-txt .eb{color:var(--mut);margin:0 0 16px}
.rp-online .coach-txt .rule-l{width:60px;height:3px;background:var(--red);border:0;margin:0 0 24px}
.rp-online .coach-txt .h2{text-align:left;margin:0}
.rp-online .coach-txt p{font-size:18px;line-height:1.72;margin:22px 0 0;max-width:560px}
.rp-online .coach-txt a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.rp-online .coach-txt a:hover{color:var(--red)}

/* ---------- How it works ---------- */
.rp-online .osteps .h2{text-align:center;margin-bottom:50px}
.rp-online .osteps-list{position:relative;max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
.rp-online .ostep{position:relative;display:flex;gap:24px;align-items:flex-start}
/* Vertical spine: each step draws a segment down to the next circle centre */
.rp-online .ostep:not(:last-child)::before{content:"";position:absolute;left:23px;top:24px;width:2px;height:calc(100% + 52px);background:rgba(228,2,46,.42);z-index:0}
.rp-online .ostep p.ostep-n{position:relative;z-index:1;flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;line-height:1;margin:0}
.rp-online .ostep p{margin:11px 0 0;font-size:17px;line-height:1.65;color:var(--body)}

/* ---------- Full-bleed training band ---------- */
.rp-online .oband.wp-block-cover{min-height:520px;padding:0}
.rp-online .oband .wp-block-cover__background{background:transparent !important;opacity:1 !important}

/* ---------- Pricing ---------- */
.rp-online .oprice{text-align:center}
.rp-online .oprice .owrap{max-width:780px}
.rp-online .oframe{font-size:18px;line-height:1.72;margin:22px auto 34px;max-width:620px}
.rp-online .price{font-size:64px;font-weight:800;color:#fff;margin:0;line-height:1}
.rp-online .price span{font-size:18px;font-weight:600;color:var(--mut);margin-left:8px}
.rp-online .pstd{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:12px 0 0}
.rp-online .omember{background:#fff;border:2px solid var(--red);border-radius:18px;padding:34px 30px;max-width:560px;margin:42px auto 0;text-align:center;box-shadow:0 0 46px rgba(228,2,46,.4),0 26px 64px rgba(0,0,0,.55)}
.rp-online .omember-label{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:0 0 14px}
.rp-online .omember-price{margin:0;line-height:1;display:flex;align-items:baseline;justify-content:center;gap:16px;flex-wrap:wrap}
.rp-online .omember-price .was{font-size:30px;font-weight:600;color:#676d73;text-decoration:line-through}
.rp-online .omember-price .now{font-size:62px;font-weight:800;color:var(--navy)}
.rp-online .omember-price .per{font-size:17px;font-weight:600;color:#5a6168}
.rp-online .omember-code{margin:18px 0 0;font-size:15px;color:var(--ink)}
.rp-online .omember-code b{display:inline-block;background:var(--red);color:#fff;padding:4px 11px;border-radius:6px;letter-spacing:.06em;font-weight:800}
.rp-online .omember-save{margin:12px 0 0;font-size:14px;font-weight:800;color:var(--red)}

/* ---------- FAQ ---------- */
.rp-online .ofaq .h2{text-align:center;margin-bottom:10px}
.rp-online .faq-wrap{max-width:820px;margin:44px auto 0}
.rp-online .faq-item{border-bottom:1px solid var(--line);padding:0;margin:0}
.rp-online .faq-item:first-of-type{border-top:1px solid var(--line)}
.rp-online .faq-q{font-size:19px;font-weight:700;color:#fff;margin:0;line-height:1.4}
.rp-online .faq-q button{display:block;width:100%;text-align:left;background:none;border:0;margin:0;padding:26px 44px 26px 0;font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;cursor:pointer;position:relative}
.rp-online .faq-q button::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:26px;font-weight:400;color:var(--red)}
.rp-online .faq-item.open .faq-q button::after{content:"–"}
.rp-online .faq-q button:focus{outline:none}
.rp-online .faq-q button:focus-visible,.rp-online .faq-q button.rp-kb-focus:focus{outline:2px solid #fff;outline-offset:-3px;border-radius:6px}
.rp-online .faq-a{font-size:16px;line-height:1.7;color:var(--body);margin:0;padding:0 44px 28px 0}
.rp-online .faq-a a{color:#fff;text-decoration:underline}
.rp-online.js .faq-a{display:none}
.rp-online.js .faq-item.open .faq-a{display:block}

/* ---------- Final CTA ---------- */
.rp-online .octa.wp-block-cover{min-height:540px;align-items:center;padding:120px 0}
/* Final CTA overlay. Lightened from .88/.92 to .78/.82 so the shoulder-press
   photograph reads through, while keeping the page's deliberately dark
   identity. Worst-case contrast (overlay composited over a pure white image
   pixel) is 10.79:1 for the white heading and 8.79:1 for the paragraph, so
   there is a wide margin over the 4.5:1 AA floor. Do not go below about .70,
   where the worst case falls to 7.97:1 and keeps shrinking. */
.rp-online .octa .wp-block-cover__background{background:linear-gradient(to bottom,var(--navy) 0%,rgba(4,7,9,.78) 14%,rgba(4,7,9,.82) 100%) !important;opacity:1 !important}
.rp-online .octa .wp-block-cover__inner-container{width:100%;max-width:820px;margin:0 auto;padding:0 24px;text-align:center;box-sizing:border-box}
.rp-online .octa .h2{color:#fff}
.rp-online .octa p{color:#e2e9ed;font-size:19px;line-height:1.6;margin:18px auto 30px;max-width:600px}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .rp-online section{padding:68px 0}
  .rp-online .h2{font-size:32px}
  .rp-online .feat .h2{font-size:30px;text-align:center}
  .rp-online .oh1{font-size:44px}
  .rp-online .ohsub{font-size:16px;margin:16px 0 24px}
  .rp-online .ohero.wp-block-cover{min-height:600px}
  .rp-online .ohero .wp-block-cover__inner-container{padding:0 22px 48px}
  .rp-online .opocket{padding-bottom:56px}
  .rp-online .opocket-phones{margin-top:34px}
  .rp-online .opocket-phones img{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
  .rp-online .ocase p{font-size:17px}
  .rp-online .osound.wp-block-cover{min-height:480px;padding:68px 0}
  .rp-online .osound .sline{font-size:18px}
  .rp-online .osound .spay{font-size:23px;margin-top:28px}
  .rp-online .osound .ssup{font-size:16px}
  .rp-online .feat-grid{grid-template-columns:1fr;gap:34px;text-align:center}
  .rp-online .feat-grid.rev .feat-app{order:0}
  .rp-online .feat-txt p{margin-left:auto;margin-right:auto}
  .rp-online .feat-two .feat-pair{flex-direction:column;align-items:center;gap:40px;margin-top:38px}
  .rp-online .chat{margin:0 auto}
  .rp-online .also-grid{grid-template-columns:1fr;gap:32px;max-width:360px}
  .rp-online .coach-grid{grid-template-columns:1fr;gap:32px}
  .rp-online .coach-photo{aspect-ratio:3/4;max-width:420px;margin:0 auto}
  .rp-online .coach-txt{text-align:center}
  .rp-online .coach-txt .rule-l{margin-left:auto;margin-right:auto}
  .rp-online .coach-txt .h2{text-align:center}
  .rp-online .coach-txt p{margin-left:auto;margin-right:auto}
  .rp-online .ostep p{font-size:16px}
  .rp-online .oband.wp-block-cover{min-height:320px}
  .rp-online .price{font-size:52px}
  .rp-online .omember-price .now{font-size:52px}
  .rp-online .omember-price .was{font-size:26px}
  .rp-online .faq-q{font-size:17px}
  .rp-online .faq-q button{padding-right:36px}
  .rp-online .octa.wp-block-cover{padding:68px 0;min-height:auto}
}