/* ==========================================================================
   Refka website styles
   One file, in this order:
     1. Design tokens (the only place colors, fonts and radii are defined)
     2. Base
     3. Layout: nav, mobile menu, hero, sections, footer
     4. Components: buttons, cards, chips, forms, dialogs
     5. Sections: proof, problem, steps, features, member app, referral,
        pricing, payback, FAQ
     6. Phone demos: member phone (hero) and owner app (features)
     7. Language layers: Arabic, CJK, Thai, Devanagari, RTL
     8. Responsive overrides, smallest last
     9. Reduced motion
   Rule: use a token. A raw color value belongs in section 1 only.
   ========================================================================== */

/* 1. DESIGN TOKENS ======================================================== */
:root {
  /* brand (from the logo: teal to gold) */
  --p: #0D6B6E;          /* teal: buttons, fills */
  --p2: #0b5f62;         /* teal, pressed/hover fill */
  --p-txt: #14B8BD;      /* teal as text on dark: 8.2:1 */
  --p-soft: #5dcdd1;     /* light teal: small labels, dots */
  --p-pale: #8fe3e6;     /* palest teal: chips, notes */
  --a: #C9973A;          /* gold */
  --a-soft: #e3b766;     /* light gold: numbers inside the owner app */
  --p-bright: #0f9ea3;   /* end of teal gradients */
  --on-accent: #fff;     /* text on teal fills, white text */
  --on-gold: #1d1405;    /* text on gold fills */

  /* surfaces, darkest to lightest */
  --bg: #080808;
  --footer-bg: #040404;
  --s1: #0F0F0F;
  --card: #111111;
  --s2: #161616;
  --raised: #1E1E1E;     /* cards inside the phone demos */
  --bd: #1E1E1E;
  --bd2: #2A2A2A;
  --bd-footer: #181818;

  /* text */
  --t1: #F0F0EE;         /* headings and strong text */
  --t2: #B4B4AC;         /* body copy: 9.6:1 on bg */
  --t3: #A2A29A;         /* labels and fine print: 7.6:1 on bg, 7:1 on cards */
  --t-footer: #A8A8A0;
  --t-off: #6f6f68;      /* large display text only (step numbers): 3:1+, never body or label text */
  --ink: #111;           /* text on the white WhatsApp bubble */
  --ink-mute: #555;
  --paper-hover: #eee;

  /* status */
  --ok: #3ccf8e;
  --warn: #f0b34a;
  --bad: #ef6461;
  --err: #f0938c;        /* form error text */
  --err-line: #e0736b;   /* form error border */
  --on-ok: #053;         /* text on status fills */
  --on-warn: #3a2500;

  /* WhatsApp's own colors (only for WhatsApp elements) */
  --wa-green: #25D366;
  --wa-out: #0f4d3a;

  /* phone frames in the demos */
  --device-body: #050505;
  --device-ring: #121212;
  --device-edge: #2c2c2c;
  --device-bar: #070707;

  /* tints of the brand colors */
  --p-tint-08: rgba(13,107,110,.08);
  --p-tint-10: rgba(13,107,110,.10);
  --p-tint-15: rgba(13,107,110,.15);
  --p-tint-20: rgba(13,107,110,.20);
  --p-line-25: rgba(13,107,110,.25);
  --p-line-30: rgba(13,107,110,.30);
  --p-line-40: rgba(13,107,110,.40);
  --p-line-50: rgba(13,107,110,.50);
  --a-tint-08: rgba(201,151,58,.08);
  --a-tint-10: rgba(201,151,58,.10);
  --a-line-25: rgba(201,151,58,.25);
  --a-line-40: rgba(201,151,58,.40);

  /* type: families. Each language swaps these two tokens (section 7), nothing else. */
  --font-brand: 'Sora', 'Inter', sans-serif;   /* wordmark and prices: always Sora */
  --font-display: 'Sora', 'Inter', sans-serif; /* headings, buttons, labels */
  --font-body: 'Inter', sans-serif;            /* running text */
  --arabic: 'IBM Plex Sans Arabic', 'Inter', sans-serif;

  /* type: one scale. Phone mockups keep their own small sizes (they draw a phone screen). */
  --fs-xs: 12px;     /* uppercase labels, badges */
  --fs-sm: 13px;     /* meta, fine print, footer legal */
  --fs-md: 15px;     /* controls, lists, small body */
  --fs-card: 16px;   /* text inside cards */
  --fs-body: 17px;   /* running text */
  --fs-lead: 19px;   /* intro paragraphs, card titles */
  --fs-lg: 22px;     /* small headings */
  --fs-xl: 28px;     /* dialog titles, panel headings */
  --fs-num: 40px;    /* big numbers in cards */
  --fs-h2: clamp(28px, 3.5vw, 44px);
  --fs-h1: clamp(34px, 2.5vw + 24px, 56px);

  /* shape */
  --r-sm: 6px;       /* badges, small tags */
  --r-control: 10px; /* buttons, inputs, selects, chips in rows */
  --r-card: 16px;    /* cards */
  --r-panel: 20px;   /* panels that hold cards */
  --r-pill: 100px;

  /* motion: name the property, never `all`. fast = hover/press feedback, base = component state,
     slow = content arriving, ambient = slow photo zoom. ease-std for state changes, ease-out for arrivals */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --dur-ambient: 600ms;
  --ease-std: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  /* layout */
  /* spacing: 4px base, 8px rhythm. Only these values; a raw px spacing outside phone demos is a bug */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-56: 56px;
  --sp-64: 64px;
  --sp-80: 80px;
  --sp-96: 96px;
  --container: 1200px;
  --gutter: 64px;
  --pad-x: max(var(--gutter), calc((100% - var(--container)) / 2));
}

/* 2. BASE ================================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.skip-link { position: absolute; top: -100px; inset-inline-start: var(--sp-16); z-index: 1000; background: var(--p); color: var(--on-accent); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); padding: var(--sp-12) var(--sp-16); border-radius: var(--r-control); text-decoration: none; }
.skip-link:focus { top: var(--sp-8); }
main:focus { outline: none; }
body { background: var(--bg); color: var(--t1); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.7; overflow-x: hidden; }
button, input, select, textarea { font-family: inherit; }
h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 800; line-height: 1.07; letter-spacing: -.03em; margin-bottom: var(--sp-24); }
h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 800; line-height: 1.1; letter-spacing: -.8px; margin-bottom: var(--sp-12); }
.lang-x:focus-visible, .modal-close:focus-visible, button:focus-visible, a:focus-visible,
select:focus-visible { outline: 2px solid var(--p-txt); outline-offset: 2px; }

.js .fade { opacity: 0; transform: translateY(var(--sp-16)); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
/* Sections start hidden only when boot.js has run (class .js); without JavaScript everything shows. */
.js .fade.in { opacity: 1; transform: none; }
.d1 { transition-delay: 80ms; } .d2 { transition-delay: 160ms; } .d3 { transition-delay: 240ms; } .d4 { transition-delay: 320ms; }

/* 3. LAYOUT =============================================================== */

/* nav (the header only: the footer has its own <nav class="f-links">) */
body > nav:not(.mob-menu) {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad-x); height: 64px;
  background: rgba(8,8,8,.94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--bd);
}
.logo { display: flex; align-items: center; gap: var(--sp-8); text-decoration: none; min-height: 44px; }
.logo-name, .f-logo-name { font-family: var(--font-brand); font-weight: 800; color: var(--t1); letter-spacing: -.01em; }
.logo-name { font-size: 18px; }
.f-logo-name { font-size: 15px; }
.nav-links { display: flex; gap: var(--sp-32); list-style: none; }
.nav-links a { font-size: var(--fs-md); font-weight: 500; color: var(--t2); text-decoration: none; transition: color var(--dur-fast) var(--ease-std); }
.nav-links a:hover { color: var(--t1); }
.nav-right { display: flex; align-items: center; gap: var(--sp-8); }

/* language picker */
.lang-wrap { position: relative; }
.lang-btn-nav {
  background: transparent; border: 1px solid var(--bd); border-radius: 6px;
  color: var(--t2); font-size: var(--fs-sm); font-weight: 700; padding: var(--sp-8) var(--sp-12); min-height: 40px;
  cursor: pointer; font-family: var(--font-display); display: flex; align-items: center; gap: var(--sp-4);
}
.lang-btn-nav:hover { border-color: var(--p-txt); color: var(--t1); }
.lang-caret { font-size: 10px; opacity: .6; }
.lang-overlay {
  display: none; position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.75); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}
.lang-overlay.open { display: flex; }
.lang-panel {
  background: var(--bg); border: 1.5px solid var(--bd); border-radius: var(--r-card);
  padding: var(--sp-32) var(--sp-32); max-width: 600px; width: 92%; max-height: 80vh;
  overflow-y: auto; position: relative;
}
.lang-x {
  position: absolute; top: 14px; inset-inline-end: 16px;
  background: var(--s1); border: 1px solid var(--bd); color: var(--t2);
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  font-size: 15px; line-height: 28px; text-align: center;
}
.lang-x:hover { color: var(--t1); }
.lang-reg {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--t3); margin: var(--sp-20) 0 var(--sp-8); padding-bottom: var(--sp-8); border-bottom: 1px solid var(--bd);
}
.lang-reg:first-child { margin-top: 0; }
.lang-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-8); margin-bottom: var(--sp-4); }
.lang-opt {
  background: transparent; border: 1px solid var(--bd); border-radius: var(--r-control);
  padding: var(--sp-8) var(--sp-12); font-size: var(--fs-md); color: var(--t2); cursor: pointer;
  text-align: start; font-family: inherit; transition: background-color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.lang-opt:hover { background: var(--s1); color: var(--t1); border-color: var(--p); }
.lang-opt.on { background: var(--p); color: var(--on-accent); border-color: var(--p); font-weight: 600; }

/* mobile menu */
.burger {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: var(--sp-4);
  width: 44px; height: 44px; padding: var(--sp-8) var(--sp-12); margin-inline-end: calc(-1 * var(--sp-8));
  background: none; border: none; cursor: pointer;
}
.burger span { display: block; width: 22px; height: 1.5px; background: var(--t1); border-radius: 2px; }
.mob-menu {
  display: none; position: fixed; inset: 0; z-index: 199;
  background: var(--bg); padding: var(--sp-80) var(--sp-32) var(--sp-32); flex-direction: column; gap: var(--sp-24);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.mob-menu.open { display: flex; }
.mob-menu a { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--t1); text-decoration: none; border-bottom: 1px solid var(--bd); padding-bottom: var(--sp-16); }
.mob-cta { background: var(--p) !important; color: var(--on-accent) !important; text-align: center; border-radius: var(--r-control); border: none !important; padding: var(--sp-16) !important; }

/* hero */
#hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: var(--sp-48); align-items: center;
  padding: var(--sp-96) var(--pad-x) var(--sp-80); min-height: 88vh;
}
#canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .6; }
.hero-text { position: relative; z-index: 1; }
.hero-chip {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  background: var(--p-tint-10); border: 1px solid var(--p-line-25);
  color: var(--p-pale); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
  padding: var(--sp-8) var(--sp-16); border-radius: var(--r-pill); margin-bottom: var(--sp-24);
}
.hero-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--p-soft); flex-shrink: 0; animation: blink 2s ease infinite; }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.3; } }
h1 .c-teal { color: var(--p-txt); }
h1 .c-gold { color: var(--a); }
.hero-body { font-size: var(--fs-lead); color: var(--t2); max-width: 480px; line-height: 1.82; margin-bottom: var(--sp-40); }
.hero-body strong { color: var(--t1); font-weight: 600; }
.ctas { display: flex; gap: var(--sp-12); flex-wrap: wrap; align-items: center; }
.hero-note { margin-top: var(--sp-16); font-size: var(--fs-md); color: var(--t2); }
.hero-note b { color: var(--a); font-weight: 600; }
.hero-devices { position: relative; z-index: 1; display: flex; gap: var(--sp-32); justify-content: center; align-items: flex-start; text-align: start; }
.hero-phone { position: relative; z-index: 1; display: flex; justify-content: center; }
.dev { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); }
.dev-cap {
  display: inline-flex; align-items: center; gap: var(--sp-8); white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--t1);
  background: var(--card); border: 1px solid var(--bd2); padding: var(--sp-8) var(--sp-16); border-radius: var(--r-pill);
}
.cap-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.cap-dot.gold { background: var(--a); }
.cap-dot.teal { background: var(--p-txt); }

/* sections */
.sec { padding: var(--sp-80) var(--pad-x); }
.sec.alt { background: var(--s1); }
.sec.center { text-align: center; }
.sec.center .s-sub { margin: var(--sp-16) auto 0; }
.eye { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; color: var(--p-txt); letter-spacing: 2px; text-transform: uppercase; margin-bottom: var(--sp-12); display: flex; align-items: center; gap: var(--sp-8); }
.eye::after { content: ''; height: 1.5px; background: var(--bd); width: 36px; }
.sec.center .eye { justify-content: center; }
.sec.center .eye::after { display: none; }
.s-sub { font-size: var(--fs-lead); color: var(--t2); max-width: 600px; line-height: 1.82; }
.src { font-size: var(--fs-sm); color: var(--t3); margin-top: var(--sp-8); line-height: 1.5; }

/* footer (bottom padding keeps the floating WhatsApp button clear of the last line) */
footer { background: var(--footer-bg); padding: var(--sp-32) var(--pad-x) var(--sp-96); display: flex; flex-direction: column; gap: 0; }
.f-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-16); padding-bottom: var(--sp-20); }
.f-bottom { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-8); padding-top: var(--sp-16); border-top: 1px solid var(--bd-footer); }
.f-logo { display: inline-flex; align-items: center; gap: var(--sp-8); text-decoration: none; min-height: 44px; }
.f-links { display: flex; gap: var(--sp-16); flex-wrap: wrap; }
footer .f-links a { font-size: var(--fs-md); color: var(--t-footer); text-decoration: none; transition: color var(--dur-fast) var(--ease-std); }
.f-links a:hover { color: var(--t1); }
.f-contact { font-size: var(--fs-sm); color: var(--t3); margin-bottom: var(--sp-8); display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-8); align-items: center; }
.f-contact a { color: var(--p-txt); text-decoration: none; font-weight: 600; }
.f-contact a:hover { text-decoration: underline; }
.f-copy { font-size: var(--fs-sm); color: var(--t3); }
.f-legal { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.f-legal a { font-size: var(--fs-sm); color: var(--t-footer); text-decoration: none; transition: color var(--dur-fast) var(--ease-std); }
.f-legal a:hover { color: var(--t1); }
.f-legal-sep { font-size: var(--fs-sm); color: var(--t3); }

/* 4. COMPONENTS ========================================================== */

/* buttons: one shape, two sizes (default 48px, .lg 52px), one hover color */
.btn-teal, .btn-outline, .btn-sm-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); line-height: 1.25;
  min-height: 48px; padding: var(--sp-12) var(--sp-24); border-radius: var(--r-control); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std); text-decoration: none;
}
.btn-teal:active, .btn-outline:active, .btn-sm-outline:active { transform: scale(.98); }   /* press feedback */
.btn-teal { background: var(--p); color: var(--on-accent); border: 1.5px solid var(--p); }
.btn-teal:hover { background: var(--p2); border-color: var(--p2); }
.btn-outline, .btn-sm-outline { background: none; color: var(--t1); border: 1.5px solid var(--bd2); }
.btn-outline:hover, .btn-sm-outline:hover { border-color: var(--p-txt); color: var(--p-txt); }
.btn-sm-outline { white-space: nowrap; }
.btn-teal.lg, .btn-outline { font-size: var(--fs-body); min-height: 52px; padding: var(--sp-16) var(--sp-32); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-12); }
.chip { font-size: var(--fs-sm); color: var(--t2); background: var(--s2); border: 1px solid var(--bd); border-radius: var(--r-pill); padding: var(--sp-4) var(--sp-12); font-family: var(--font-display); font-weight: 500; }

/* dialogs: legal documents and the sign-up form */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.85); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  overflow-y: auto; padding: var(--sp-40) var(--sp-20);
}
.modal-overlay.open { display: flex; justify-content: center; align-items: flex-start; }
.modal-box {
  background: var(--s1); border: 1px solid var(--bd); border-radius: var(--r-card);
  width: 100%; max-width: 780px; padding: var(--sp-48) var(--sp-48);
  position: relative; color: var(--t2); font-family: var(--font-body);
  margin: auto;
}
.modal-close {
  position: absolute; top: 20px; inset-inline-end: 22px;
  background: var(--s2); border: 1px solid var(--bd2); color: var(--t3);
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  font-size: 18px; line-height: 34px; text-align: center; flex-shrink: 0;
}
.modal-close:hover { background: var(--raised); color: var(--t1); }
.modal-badge {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: var(--sp-4) var(--sp-8); border-radius: var(--r-sm); margin-bottom: var(--sp-16);
  background: var(--p-tint-15); color: var(--p-txt); border: 1px solid var(--p);
}
.modal-box h1 { font-size: var(--fs-xl); font-weight: 700; color: var(--t1); margin-bottom: var(--sp-8); line-height: 1.2; }
.modal-meta { font-size: var(--fs-sm); color: var(--t3); margin-bottom: var(--sp-40); }
.modal-legal-note { font-size: var(--fs-sm); color: var(--p-pale); margin: calc(-1 * var(--sp-24)) 0 var(--sp-32); }
.modal-box h2 {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--p-txt); margin: var(--sp-40) 0 var(--sp-12);
  padding-top: var(--sp-40); border-top: 1px solid var(--bd);
}
.modal-box h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.modal-box p { font-size: var(--fs-md); line-height: 1.75; color: var(--t2); margin-bottom: var(--sp-12); }
.modal-box a { color: var(--p-txt); text-decoration: underline; text-underline-offset: 2px; }
.modal-box ul { margin: var(--sp-8) 0 var(--sp-12) var(--sp-20); }
.modal-box li { font-size: var(--fs-md); line-height: 1.7; color: var(--t2); margin-bottom: var(--sp-4); }
.modal-box strong { color: var(--t1); }
.modal-tbl { width: 100%; border-collapse: collapse; margin: var(--sp-16) 0 var(--sp-20); font-size: var(--fs-sm); }
.modal-tbl th {
  background: var(--s2); border: 1px solid var(--bd); padding: var(--sp-8) var(--sp-12);
  text-align: start; color: var(--t3); font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.modal-tbl td { border: 1px solid var(--bd); padding: var(--sp-8) var(--sp-12); color: var(--t2); vertical-align: top; }
.modal-tbl tr:nth-child(even) td { background: var(--bg); }
.modal-tbl td strong { color: var(--t1); }
.modal-highlight {
  background: var(--p-tint-08); border-inline-start: 3px solid var(--p);
  padding: var(--sp-12) var(--sp-16); border-start-end-radius: var(--r-sm); border-end-end-radius: var(--r-sm); margin: var(--sp-16) 0;
}
.modal-highlight p { color: var(--p-pale); margin: 0; font-size: var(--fs-md); }
.modal-warning {
  background: var(--a-tint-08); border-inline-start: 3px solid var(--a);
  padding: var(--sp-12) var(--sp-16); border-start-end-radius: var(--r-sm); border-end-end-radius: var(--r-sm); margin: var(--sp-16) 0;
}
.modal-warning p { color: var(--a); margin: 0; font-size: var(--fs-md); }
.modal-footer-note {
  margin-top: var(--sp-40); padding-top: var(--sp-20); border-top: 1px solid var(--bd);
  font-size: var(--fs-sm); color: var(--t3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-8);
}

/* sign-up / contact form */
.su-box { max-width: 560px; padding: var(--sp-40) var(--sp-40) var(--sp-32); }
.su-box .su-title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--t1);
  line-height: 1.25; margin: 0 0 var(--sp-8); padding: 0; border: 0; padding-inline-end: var(--sp-40);
  text-transform: none; letter-spacing: -.3px; }
.su-box .su-sub { font-size: var(--fs-md); color: var(--t2); line-height: 1.65; margin-bottom: var(--sp-16); }
.su-box .su-plan { font-size: var(--fs-md); color: var(--t2); margin: calc(-1 * var(--sp-8)) 0 var(--sp-16); }
.su-box .su-plan b { color: var(--p-pale); }
.su-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.su-field { margin-bottom: var(--sp-16); }
.su-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
.su-field label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--t1); margin-bottom: var(--sp-8); }
.su-field input, .su-field select, .su-field textarea {
  width: 100%; background: var(--s1); color: var(--t1); border: 1.5px solid var(--bd2);
  border-radius: var(--r-control); padding: var(--sp-12) var(--sp-12); font-size: var(--fs-card); /* 16px minimum: stops iOS zoom-on-focus */
  font-family: inherit; min-height: 48px; transition: border-color var(--dur-fast) var(--ease-std);
}
.su-field textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.su-field input::placeholder { color: var(--t3); }
.su-field input:focus, .su-field select:focus, .su-field textarea:focus { outline: none; border-color: var(--p-txt); }
.su-field .bad { border-color: var(--err-line); }
.su-box .su-err { display: none; font-size: var(--fs-sm); color: var(--err); margin: var(--sp-4) 0 0; line-height: 1.4; }
.su-box .su-err.on { display: block; }
.su-box .su-consent { font-size: var(--fs-sm); color: var(--t3); line-height: 1.55; margin: var(--sp-4) 0 var(--sp-16); }
.su-box .su-consent a { color: var(--p-txt); }
.su-send { width: 100%; }
.su-send[disabled] { opacity: .7; cursor: wait; }
.su-box .su-status { font-size: var(--fs-md); margin: var(--sp-12) 0 0; min-height: 0; }
.su-box .su-status.err { color: var(--err); }
.su-done { text-align: center; padding: var(--sp-16) 0 var(--sp-8); }
.su-done .su-title { padding: 0; margin-bottom: var(--sp-8); }
.su-done .su-title:focus { outline: none; }
.su-check { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto var(--sp-16); display: flex; align-items: center;
  justify-content: center; font-size: 26px; color: var(--on-accent); background: var(--p); }
.su-done .btn-sm-outline { margin-top: var(--sp-8); }

/* WhatsApp chat button and bubble (WhatsApp's own green) */
.wa-fab {
  position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 8500;
  width: 58px; height: 58px; border-radius: 50%; background: var(--wa-green);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.45); transition: transform var(--dur-fast) var(--ease-std), bottom var(--dur-base) var(--ease-std), opacity var(--dur-base) var(--ease-std);
}
.wa-fab:hover { transform: scale(1.06); }
.js .wa-fab.away { opacity: 0; transform: scale(.6); pointer-events: none; }   /* phones: waits until the hero is scrolled past */
.wa-bubble {
  position: fixed; bottom: 90px; inset-inline-end: 20px; z-index: 8500; max-width: 260px;
  background: var(--on-accent); color: var(--ink); border-radius: var(--r-card); padding: var(--sp-12) var(--sp-16); padding-inline-end: var(--sp-40);
  font-size: var(--fs-md); line-height: 1.45; box-shadow: 0 10px 30px rgba(0,0,0,.45); transition: bottom var(--dur-base) var(--ease-std);
  animation: phIn var(--dur-slow) var(--ease-out);
}
.wa-bubble[hidden] { display: none; }
.wa-bubble a { color: var(--ink); text-decoration: none; font-weight: 600; }
.wa-x { position: absolute; top: 6px; inset-inline-end: 6px; width: 28px; height: 28px; border: 0; background: none; color: var(--ink-mute); cursor: pointer; font-size: 14px; border-radius: 50%; }
.wa-x:hover { background: var(--paper-hover); }

/* 5. SECTIONS ============================================================ */

/* proof bar */
#proof { background: var(--s1); border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); padding: var(--sp-24) var(--pad-x); text-align: center; }
.proof-stat { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lead); color: var(--t1); }

/* problem */
.prob-inner { max-width: 640px; margin: 0 auto; }
.prob-inner .src { margin-bottom: var(--sp-32); }
.big-stat { font-family: var(--font-display); font-size: clamp(80px,12vw,112px); font-weight: 800; color: var(--a); line-height: 1; letter-spacing: -4px; margin-bottom: var(--sp-4); }
.stat-label { font-size: var(--fs-lead); color: var(--t1); line-height: 1.6; margin-bottom: var(--sp-8); font-weight: 500; }

/* training together: photo mosaic under the problem statement */
.duo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; gap: var(--sp-12); margin-top: var(--sp-48); }
.duo { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--bd); background: var(--s2); }
.duo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-ambient) var(--ease-out); }   /* photos carry the Refka grade baked in: teal shadows, gold highlights, page-black blacks, grain */
.duo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); background: linear-gradient(180deg, transparent 50%, rgba(8,8,8,.55)), linear-gradient(90deg, var(--p-tint-10), transparent 40%); pointer-events: none; }
.duo:hover img { transform: scale(1.03); }
.duo-tag { position: absolute; inset-inline-start: var(--sp-16); bottom: var(--sp-16); z-index: 1; display: inline-flex; align-items: center; gap: var(--sp-8); padding: var(--sp-8) var(--sp-12); border-radius: var(--r-pill); background: rgba(8,8,8,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--p-line-40); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--t1); max-width: calc(100% - 2 * var(--sp-16)); line-height: 1.3; }
.duo-tag span { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; min-width: 0; }
.duo-tag .dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--p-txt); box-shadow: 0 0 0 3px var(--p-tint-20); }
.duo-tag.gold { border-color: var(--a-line-40); }
.duo-tag.gold .dot { background: var(--a); box-shadow: 0 0 0 3px var(--a-tint-10); }
.duo-a { grid-column: 1 / span 2; grid-row: 1; }
.duo-a img { object-position: center 30%; }
.duo-b { grid-column: 3; grid-row: 1 / span 2; }
.duo-b img { object-position: center 45%; }
.duo-c { grid-column: 4; grid-row: 1; }
.duo-c img { object-position: 30% 25%; }
.duo-d { grid-column: 1 / span 2; grid-row: 2; }
.duo-d img { object-position: center 30%; }
.duo-e { grid-column: 4; grid-row: 2; }
.duo-e img { object-position: 45% center; }

/* how it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--sp-48); border: 1.5px solid var(--bd); border-radius: var(--r-card); overflow: hidden; background: var(--card); }
.step { padding: var(--sp-32) var(--sp-32); border-inline-end: 1.5px solid var(--bd); }
.step:last-child { border-inline-end: none; }
.step-n { font-family: var(--font-display); font-size: var(--fs-num); font-weight: 800; color: var(--t-off); line-height: 1; margin-bottom: var(--sp-16); }
.step h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lead); line-height: 1.35; margin-bottom: var(--sp-8); }
.step p { font-size: var(--fs-card); color: var(--t2); line-height: 1.75; }
.step-tag { display: inline-block; margin-top: var(--sp-12); background: var(--p-tint-10); border: 1px solid var(--p-line-25); color: var(--p-pale); font-size: var(--fs-sm); font-weight: 700; font-family: var(--font-display); padding: var(--sp-4) var(--sp-12); border-radius: var(--r-pill); }

/* features: the owner side and the member side */
.eco-stack { display: grid; gap: var(--sp-16); margin-top: var(--sp-48); }
.eco-side { display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-16); border-radius: var(--r-panel); border: 1px solid var(--bd); }
.eco-side.owner { background: linear-gradient(180deg, rgba(201,151,58,.07), rgba(201,151,58,0) 45%); }
.eco-side.member { background: linear-gradient(180deg, var(--p-tint-10), rgba(13,107,110,0) 45%); }
.eco-side-h { display: flex; align-items: center; gap: var(--sp-8); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); letter-spacing: 1.5px; text-transform: uppercase; color: var(--t1); padding: var(--sp-2) var(--sp-4); }
.eco-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-16); }
.eco-card { background: var(--bg); border: 1.5px solid var(--bd); border-radius: var(--r-card); padding: var(--sp-32); transition: border-color var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-std); }
.eco-card:hover { border-color: var(--p-line-40); transform: translateY(-2px); }
.eco-icon { width: 40px; height: 40px; border-radius: var(--r-control); display: grid; place-items: center; background: var(--p-tint-15); border: 1px solid var(--p-line-30); color: var(--p-soft); margin-bottom: var(--sp-16); }
.eco-icon svg { width: 20px; height: 20px; }
.eco-card h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lead); line-height: 1.35; margin-bottom: var(--sp-8); }
.eco-card p { font-size: var(--fs-card); color: var(--t2); line-height: 1.75; }

/* what your members see */
.app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-12); margin-top: var(--sp-48); }
.app-card { background: var(--bg); border: 1.5px solid var(--bd); border-radius: var(--r-card); padding: var(--sp-24) var(--sp-20); position: relative; overflow: hidden; }
.app-card.core { border-color: var(--a-line-40); background: linear-gradient(160deg, rgba(201,151,58,.06), var(--bg) 60%); }
.tab-n { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 1.5px; color: var(--t3); margin-bottom: var(--sp-8); }
.app-card h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lead); margin-bottom: var(--sp-8); line-height: 1.35; }
.app-card p { font-size: var(--fs-card); color: var(--t2); line-height: 1.7; }
.core-b { position: absolute; top: 12px; inset-inline-end: 12px; background: var(--a-tint-10); border: 1px solid var(--a-line-25); color: var(--a); font-size: var(--fs-xs); font-weight: 700; font-family: var(--font-display); padding: var(--sp-2) var(--sp-8); border-radius: var(--r-pill); }

/* referral */
.ref-card { background: var(--card); border: 1.5px solid var(--bd); border-radius: var(--r-card); padding: var(--sp-48); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-48); align-items: center; margin-top: var(--sp-48); position: relative; overflow: hidden; }
.ref-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--p), var(--a)); }
.ref-card h3 { font-family: var(--font-display); font-size: clamp(22px, 2.5vw, var(--fs-xl)); font-weight: 800; margin-bottom: var(--sp-8); line-height: 1.3; }
.ref-card > div > p { font-size: var(--fs-body); color: var(--t2); line-height: 1.8; margin-bottom: var(--sp-24); }
.ref-steps { display: flex; flex-direction: column; gap: var(--sp-16); }
.ref-row { display: flex; align-items: flex-start; gap: var(--sp-12); }
.ref-dot { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: var(--p-tint-15); border: 1.5px solid var(--p); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 700; color: var(--p-pale); font-family: var(--font-display); margin-top: 1px; }
.ref-row p { font-size: var(--fs-card); color: var(--t2); padding-top: var(--sp-4); line-height: 1.65; }

/* pricing */
.trial-pill { display: inline-block; background: var(--a-tint-08); border: 1.5px solid rgba(201,151,58,.22); border-radius: var(--r-control); padding: var(--sp-12) var(--sp-20); margin-top: var(--sp-20); }
.trial-pill p { font-size: var(--fs-md); color: var(--t2); }
.trial-pill b { color: var(--a); font-weight: 700; }
.price-controls { display: flex; gap: var(--sp-12); margin-top: var(--sp-24); justify-content: flex-start; flex-wrap: wrap; align-items: center; max-width: 100%; min-width: 0; }
.billing-switch { display: flex; background: var(--s1); border: 1.5px solid var(--bd); border-radius: var(--r-control); overflow: hidden; }
.bi-btn { background: transparent; border: none; color: var(--t2); font-size: var(--fs-md); font-weight: 700; padding: var(--sp-8) var(--sp-16); min-height: 44px; cursor: pointer; font-family: var(--font-display); transition: background-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std); white-space: nowrap; }
.bi-btn.active { background: var(--p); color: var(--on-accent); }
.save-tag { background: rgba(201,151,58,.18); color: var(--a); font-size: var(--fs-xs); font-weight: 700; padding: var(--sp-2) var(--sp-8); border-radius: var(--r-sm); margin-inline-start: var(--sp-4); letter-spacing: .3px; }
.loc-pick { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-md); color: var(--t2); font-weight: 600; max-width: 100%; min-width: 0; }
.loc-pick select {
  background: var(--s1); color: var(--t1); border: 1.5px solid var(--bd2); border-radius: var(--r-control);
  padding: var(--sp-8) var(--sp-12); font-size: var(--fs-md); font-family: inherit; min-height: 44px; max-width: 100%; min-width: 0; cursor: pointer;
}
.loc-pick select:focus { outline: 2px solid var(--p-txt); outline-offset: 2px; }
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-16); margin-top: var(--sp-32); }
.p-card { background: var(--card); border: 1.5px solid var(--bd); border-radius: var(--r-card); padding: var(--sp-24); display: flex; flex-direction: column; min-width: 0; }
.p-card.featured { border-color: var(--p); background: linear-gradient(160deg, rgba(13,107,110,.07), var(--card)); position: relative; }
.p-card.enterprise { position: relative; }   /* neutral on purpose: only Growth is highlighted */
.p-pop { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--p); color: var(--on-accent); font-size: var(--fs-xs); font-weight: 700; font-family: var(--font-display); padding: var(--sp-4) var(--sp-16); border-radius: var(--r-pill); white-space: nowrap; }
.p-tier { font-family: var(--font-brand); font-size: var(--fs-sm); font-weight: 700; color: var(--t1); letter-spacing: 1.5px; margin-bottom: var(--sp-8); }
.p-price { font-family: var(--font-brand); font-size: var(--fs-num); font-weight: 800; line-height: 1; margin-bottom: var(--sp-4); display: flex; align-items: flex-start; gap: var(--sp-2); }   /* app.js fitText shrinks long words */
.p-price.word { font-size: var(--fs-xl); margin-bottom: var(--sp-8); }
.p-price sup { font-size: var(--fs-card); margin-top: var(--sp-8); font-weight: 600; }
.p-period { font-size: var(--fs-sm); color: var(--t2); margin-bottom: var(--sp-16); padding-bottom: var(--sp-16); border-bottom: 1px solid var(--bd); }
.p-members { font-size: var(--fs-md); color: var(--t1); margin-bottom: var(--sp-16); font-weight: 700; line-height: 1.45; display: flex; align-items: flex-start; gap: var(--sp-8); }
.p-members svg { width: 18px; height: 18px; margin-top: var(--sp-2); color: var(--p-txt); flex-shrink: 0; }
.p-feats { list-style: none; flex: 1; display: flex; flex-direction: column; gap: var(--sp-8); margin-bottom: var(--sp-16); }
.p-feats li { font-size: var(--fs-md); color: var(--t2); display: flex; align-items: flex-start; gap: var(--sp-8); line-height: 1.5; }
.p-feats li::before { content: '✓'; color: var(--p-txt); font-weight: 700; flex-shrink: 0; }
.p-card .btn-teal, .p-card .btn-sm-outline { width: 100%; text-align: center; white-space: normal; padding: var(--sp-12) var(--sp-16); }
.p-note { font-size: var(--fs-md); color: var(--t2); max-width: 720px; margin: var(--sp-16) 0 0; line-height: 1.6; }
.p-note a { color: var(--p-txt); text-decoration: none; }
.pay-row { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: var(--sp-8); margin: var(--sp-32) 0 0; }
.pay-lbl { font-size: var(--fs-md); color: var(--t2); font-weight: 600; }
.pm-chip { display: inline-flex; align-items: center; gap: var(--sp-8); padding: var(--sp-8) var(--sp-16); border: 1.5px solid var(--bd2); border-radius: var(--r-control); background: var(--card); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); color: var(--t1); }
.pm-chip svg { color: var(--p-txt); flex-shrink: 0; }
html:not(.cc-eg) .eg-only { display: none; }

/* payback */
.pb-eq { display: flex; align-items: stretch; justify-content: center; gap: var(--sp-16); margin: var(--sp-40) auto 0; flex-wrap: wrap; }
.pb-box { min-width: 240px; padding: var(--sp-24) var(--sp-24); border-radius: var(--r-card); background: var(--bg); border: 1.5px solid var(--p-line-50); display: flex; flex-direction: column; gap: var(--sp-8); align-items: center; }
.pb-box.gold { border-color: rgba(201,151,58,.55); }
.pb-k { font-size: var(--fs-md); color: var(--t2); font-weight: 600; }
.pb-v { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-num); line-height: 1.1; color: var(--t1); }
.pb-box.gold .pb-v { color: var(--a); }
.pb-sign { align-self: center; font-family: var(--font-display); font-size: var(--fs-num); color: var(--t3); }

/* FAQ */
.faq-list { max-width: 820px; margin-top: var(--sp-40); display: flex; flex-direction: column; gap: var(--sp-8); }
.faq { background: var(--card); border: 1.5px solid var(--bd); border-radius: var(--r-card); }
.faq[open] { border-color: var(--p-line-50); }
.faq summary { cursor: pointer; list-style: none; padding: var(--sp-16) var(--sp-20); padding-inline-end: var(--sp-48); position: relative; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body); color: var(--t1); line-height: 1.45; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; inset-inline-end: 20px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--p-txt); font-weight: 400; }
.faq[open] summary::after { content: '−'; }
.faq summary:focus-visible { outline: 2px solid var(--p-txt); outline-offset: 2px; border-radius: var(--r-card); }
.faq p { padding: 0 var(--sp-20) var(--sp-16); font-size: var(--fs-card); color: var(--t2); line-height: 1.75; }
.faq-more { margin-top: var(--sp-24); font-size: var(--fs-card); color: var(--t2); }
.faq-more a { color: var(--p-txt); text-decoration: none; font-weight: 600; }
.faq-more a:hover { text-decoration: underline; }

/* 6. PHONE DEMOS ========================================================= */

/* 6a. member phone (hero) */
.phone {
  width: 270px; height: 530px; background: var(--s2); border-radius: 40px;
  border: 1.5px solid var(--bd2);
  box-shadow: 0 0 0 8px var(--card), 0 40px 80px rgba(0,0,0,.5), 0 0 40px var(--p-tint-10);
  overflow: hidden; display: flex; flex-direction: column;
}
.ph-status { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px 4px; background: var(--s2); }
.ph-time { font-family: var(--font-display); font-weight: 700; font-size: 12px; }
.ph-body { flex: 1; padding: 0 12px 0; display: flex; flex-direction: column; gap: 8px; background: var(--s2); overflow: hidden; }
.ph-top { display: flex; justify-content: space-between; align-items: center; padding: 4px 0 4px; }
.ph-bell { width: 16px; height: 16px; color: var(--a); }
.ph-gym-name { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--p-soft); }
.ph-plan { background: linear-gradient(135deg, var(--p), var(--p-bright)); border-radius: 12px; padding: 12px 14px; color: var(--on-accent); }
.ph-plan-tag { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; opacity: .75; font-family: var(--font-display); margin-bottom: 3px; }
.ph-plan-title { font-family: var(--font-display); font-weight: 800; font-size: 15px; margin-bottom: 3px; }
.ph-plan-sub { font-size: 10.5px; opacity: .7; display: flex; gap: 8px; }
.ph-label { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; color: var(--t2); letter-spacing: .6px; padding: 2px 0; }
.ph-card { background: var(--raised); border: 1px solid var(--bd2); border-radius: 10px; padding: 10px 11px; display: flex; align-items: center; gap: 9px; }
.ph-av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--on-accent); }
.ph-av.sm { width: 26px; height: 26px; font-size: 11px; }
.ph-av.ph-photo { padding: 0; overflow: hidden; background: var(--raised); }
.ph-av.ph-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.ph-av.ph-photo.t { box-shadow: 0 0 0 1.5px var(--p-txt); }
.ph-av.ph-photo.g { box-shadow: 0 0 0 1.5px var(--a); }
.ph-info { flex: 1; }
.ph-name { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--t1); }
.ph-sub { font-size: 10.5px; color: var(--t2); margin-top: 1px; }
.ph-badge { background: var(--p-tint-15); border: 1px solid var(--p-line-30); color: var(--p-soft); font-size: 9.5px; font-weight: 700; font-family: var(--font-display); padding: 2px 7px; border-radius: var(--r-pill); white-space: nowrap; flex-shrink: 0; }
.ph-tabs { display: flex; border-top: 1px solid var(--bd); margin-top: auto; background: var(--s2); }
.ph-tab { flex: 1; padding: 9px 0 11px; text-align: center; font-size: 10px; font-weight: 600; font-family: var(--font-display); color: var(--t3); position: relative; cursor: pointer; transition: color var(--dur-base) var(--ease-std); }
.ph-tab.on { color: var(--p-txt); }
.ph-tab.on::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 2px; background: var(--p-txt); border-radius: 0 0 2px 2px; }

.ph-screen { position: relative; flex: 1; overflow: hidden; }
.ph-scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; visibility: hidden;
  transform: translateX(14px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
}
.ph-scene.live { opacity: 1; visibility: visible; transform: none; }
.ph-scene.out { opacity: 0; visibility: hidden; transform: translateX(-14px); }
.ph-scene.live .anim { animation: phIn .5s cubic-bezier(.16,1,.3,1) backwards; }
.ph-scene.live .anim.d1 { animation-delay: .10s }
.ph-scene.live .anim.d2 { animation-delay: .30s }
.ph-scene.live .anim.d3 { animation-delay: .50s }
.ph-scene.live .anim.d4 { animation-delay: .70s }
.ph-scene.live .anim.d5 { animation-delay: .90s }
.ph-scene.live .anim.d6 { animation-delay: 1.1s }
@keyframes phIn { from { opacity:0; transform: translateY(9px) } to { opacity:1; transform:none } }

/* matching: the connector between two member cards */
.ph-link { display: flex; align-items: center; gap: 6px; padding: 1px 0; justify-content: center; }
.ph-link i { height: 1px; width: 0; background: linear-gradient(90deg,var(--p),var(--a)); display: block; border-radius: 2px; }
.ph-scene.live .ph-link i { animation: linkGrow .55s ease .75s forwards }
@keyframes linkGrow { to { width: 52px } }
.ph-link b { font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .5px; color: var(--p-txt); white-space: nowrap; opacity: 0; }
.ph-scene.live .ph-link b { animation: phIn .4s ease 1.05s forwards }
.ph-badge.pop { opacity: 0 }
.ph-scene.live .ph-badge.pop { animation: badgePop .45s cubic-bezier(.34,1.56,.64,1) 1.25s forwards }
@keyframes badgePop { 0%{opacity:0;transform:scale(.5)} 100%{opacity:1;transform:scale(1)} }

/* AI plan: exercises typing in one by one */
.ph-ex { display: flex; align-items: center; gap: 7px; background: var(--raised); border: 1px solid var(--bd2); border-radius: 8px; padding: 7px 9px; }
.ph-ex .n { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; background: var(--p-tint-20); color: var(--p-soft); font-family: var(--font-display); font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ph-ex .t { flex: 1; font-size: 11px; color: var(--t1); font-weight: 500 }
.ph-ex .r { font-size: 10px; color: var(--t3); font-family: var(--font-display); font-weight: 600 }
.ph-gen { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--p-txt); font-family: var(--font-display); font-weight: 600; }
.ph-gen s { width: 5px; height: 5px; border-radius: 50%; background: var(--p); text-decoration: none; animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.35;transform:scale(.8)} 50%{opacity:1;transform:scale(1.2)} }
.ph-bar { height: 3px; background: var(--bd); border-radius: 2px; overflow: hidden }
.ph-bar u { display: block; height: 100%; width: 0; background: linear-gradient(90deg,var(--p),var(--p-bright)); border-radius: 2px }
.ph-scene.live .ph-bar u { animation: barFill 2.4s ease .3s forwards }
@keyframes barFill { to { width: 100% } }

/* store: product rows */
.ph-prod { display: flex; align-items: center; gap: 8px; background: var(--raised); border: 1px solid var(--bd2); border-radius: 9px; padding: 7px 9px; }
.ph-prod .ic { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--p-soft); background: var(--s2); border: 1px solid var(--bd2); }
.ph-prod .ic svg { width: 14px; height: 14px; }
.ph-prod .nm { flex: 1; font-size: 11.5px; color: var(--t1); font-weight: 500 }
.ph-prod .pr { font-size: 11px; color: var(--a); font-family: var(--font-display); font-weight: 700 }
.ph-prod.picked { border-color: var(--p-line-50); background: var(--p-tint-08) }
.ph-scene.live .ph-prod.picked { animation: pick .5s ease 1.2s backwards }
@keyframes pick { 0%{transform:scale(1)} 45%{transform:scale(1.035)} 100%{transform:scale(1)} }
.ph-toast { background: rgba(13,107,110,.14); border: 1px solid rgba(13,107,110,.32); border-radius: 9px; padding: 8px 10px; display: flex; align-items: center; gap: 7px; opacity: 0; }
.ph-scene.live .ph-toast { animation: phIn .45s ease 1.75s forwards }
.ph-toast .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--p-soft); flex-shrink: 0 }
.ph-toast .tx { font-size: 10.5px; color: var(--p-pale); line-height: 1.35 }

/* community: feed post and event */
.ph-post { background: var(--raised); border: 1px solid var(--bd2); border-radius: 10px; padding: 9px 10px; }
.ph-post .hd { display: flex; align-items: center; gap: 7px; margin-bottom: 6px }
.ph-post .bd { font-size: 11px; color: var(--t2); line-height: 1.45 }
.ph-react { display: flex; gap: 12px; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--bd2) }
.ph-react span { font-size: 10px; color: var(--t3); display: flex; align-items: center; gap: 4px }
.ph-react svg { width: 12px; height: 12px; }
.ph-react .cnt { font-family: var(--font-display); font-weight: 700; color: var(--p-txt) }
.ph-event { background: linear-gradient(135deg, rgba(201,151,58,.13), rgba(201,151,58,.05)); border: 1px solid rgba(201,151,58,.3); border-radius: 10px; padding: 9px 10px; display: flex; align-items: center; gap: 9px; }
.ph-event .cal { width: 32px; height: 32px; border-radius: 7px; flex-shrink: 0; background: rgba(201,151,58,.16); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ph-event .cal b { font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--a) }
.ph-event .cal i { font-size: 7.5px; color: var(--a); font-style: normal; letter-spacing: .4px }
.ph-event .inf { flex: 1; min-width: 0; }
.ph-event .inf .ph-name, .ph-event .inf .ph-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-event .go { font-size: 9px; font-family: var(--font-display); font-weight: 700; background: var(--a); color: var(--on-gold); padding: 4px 9px; border-radius: 5px; white-space: nowrap; }

/* scene dots */
.ph-dots { display: flex; gap: 5px; justify-content: center; padding: 7px 0 3px }
.ph-dots button { width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; background: var(--bd2); cursor: pointer; transition: background-color var(--dur-base) var(--ease-std), width var(--dur-base) var(--ease-std), border-radius var(--dur-base) var(--ease-std); }
.ph-dots button.on { background: var(--p); width: 18px; border-radius: 3px }

/* 6b. owner app (features): five owner pains, each drives one screen of the owner phone */
.oa-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.eco-side.oa {
  --oa-ok: var(--ok); --oa-warn: var(--warn); --oa-bad: var(--bad); --oa-gold: var(--a-soft); --oa-teal: var(--p-soft); --oa-mute: var(--t3);
  padding: var(--sp-24) var(--sp-32) var(--sp-32); position: relative; overflow: hidden;
  background: radial-gradient(520px 420px at 78% 50%, var(--p-tint-20), transparent 70%),
              linear-gradient(180deg, rgba(201,151,58,.07), rgba(201,151,58,0) 45%);
}
.ow-role { font-family: var(--font-display); font-weight: 700; font-size: 9.5px; color: var(--a); border: 1px solid var(--a-line-40); background: rgba(201,151,58,.12); padding: var(--sp-2) var(--sp-8); border-radius: var(--r-pill); }
.oa-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "head stage" "list stage"; column-gap: var(--sp-56); row-gap: var(--sp-8); align-items: center; margin-top: var(--sp-8); }
.oa-head { grid-area: head; align-self: end; }
.oa-list { grid-area: list; align-self: start; min-width: 0; }
.oa-stage { grid-area: stage; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; min-width: 0; }
.oa-h { font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -.8px; text-wrap: balance; margin-bottom: var(--sp-12); }
.oa-h em { font-style: normal; background: linear-gradient(90deg, var(--oa-teal), var(--oa-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.oa-sub { color: var(--t2); font-size: 17px; line-height: 1.7; max-width: 48ch; margin-bottom: var(--sp-24); }

/* pain list */
.oa-pains { list-style: none; display: grid; gap: var(--sp-8); }
.oa-pain { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--sp-16); align-items: start; width: 100%; text-align: start; background: transparent; border: 1px solid transparent; border-radius: 14px; padding: var(--sp-16) var(--sp-16); cursor: pointer; color: inherit; font: inherit; overflow: hidden; transition: background-color var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std); }
.oa-pain:hover { background: rgba(255,255,255,.025); }
.oa-pain:focus-visible { outline: 2px solid var(--p-txt); outline-offset: 2px; }
.oa-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--s2); border: 1px solid var(--bd2); color: var(--t3); transition: background-color var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std); }
.oa-ic svg { width: 18px; height: 18px; }
.oa-txt { min-width: 0; }
.oa-pain q { display: block; quotes: auto; font-size: var(--fs-md); color: var(--t3); font-style: italic; line-height: 1.5; margin-bottom: var(--sp-2); }
.oa-pain b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--t1); line-height: 1.4; }
.oa-pain small { display: block; font-size: 15px; color: var(--t2); line-height: 1.6; margin-top: var(--sp-4); max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-std), opacity var(--dur-slow) var(--ease-std); }
.oa-pain.on { background: var(--bg); border-color: var(--bd2); }
.oa-pain.on .oa-ic { background: rgba(13,107,110,.18); border-color: rgba(93,205,209,.45); color: var(--oa-teal); }
.oa-pain.on small { max-height: 120px; opacity: 1; }
.oa-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.oa-pain.on .oa-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--p), var(--a)); transform-origin: left; transform: scaleX(0); animation: oaFill var(--dur, 7s) linear forwards; }
.oa.paused .oa-pain.on .oa-bar::after { animation-play-state: paused; }
.oa.still .oa-bar { display: none; }
@keyframes oaFill { to { transform: scaleX(1); } }
.oa-foot { margin-top: var(--sp-24); display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-20); font-size: var(--fs-md); color: var(--t2); }
.oa-foot span::before { content: "✓"; color: var(--p-txt); font-weight: 700; margin-inline-end: var(--sp-8); }

/* the phone */
.oa-phone { width: 340px; max-width: 100%; height: 690px; border-radius: 48px; background: var(--device-body); border: 1.5px solid var(--device-edge); box-shadow: 0 0 0 7px var(--device-ring), 0 0 0 8px var(--bd2), 0 40px 90px -20px rgba(0,0,0,.9), 0 0 80px -10px rgba(13,107,110,.35); position: relative; overflow: hidden; display: flex; flex-direction: column; color: var(--t1); font-size: 12px; line-height: 1.45; text-align: start; }
.oa-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 104px; height: 30px; background: var(--device-body); border-radius: 20px; z-index: 5; }
.oa-status { display: flex; justify-content: space-between; align-items: center; padding: 16px 28px 0; height: 46px; font-family: var(--font-display); font-size: 12px; font-weight: 700; flex-shrink: 0; }
.oa-status svg { opacity: .7; }
.oa-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 20px 12px; flex-shrink: 0; }
.oa-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.oa-brand b { font-family: var(--font-brand); font-weight: 800; font-size: 14px; display: block; line-height: 1.2; }
.oa-brand i { font-style: normal; font-size: 10px; color: var(--oa-mute); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oa-screens { position: relative; flex: 1; min-height: 0; }
.oa-scr { position: absolute; inset: 0; padding: 4px 18px 16px; display: flex; flex-direction: column; gap: 10px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s var(--dur-slow); }
.oa-scr.on { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.oa-ttl { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -.3px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; line-height: 1.25; }
.oa-ttl small { font-family: var(--font-body); font-size: 11px; color: var(--oa-mute); font-weight: 500; letter-spacing: 0; text-align: end; }
.oa-lbl { font-family: var(--font-display); font-size: 9.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--oa-mute); display: block; }
.oa-box { background: var(--s2); border: 1px solid var(--bd); border-radius: 16px; padding: 11px 13px; }
.oa-num { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oa-pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap; flex-shrink: 0; }
.oa-pill.ok { background: rgba(60,207,142,.12); color: var(--oa-ok); border: 1px solid rgba(60,207,142,.3); }
.oa-pill.warn { background: rgba(240,179,74,.12); color: var(--oa-warn); border: 1px solid rgba(240,179,74,.3); }
.oa-pill.bad { background: rgba(239,100,97,.12); color: var(--oa-bad); border: 1px solid rgba(239,100,97,.3); }
.oa-pill.tl { background: var(--p-tint-20); color: var(--oa-teal); border: 1px solid rgba(93,205,209,.3); }
.oa-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bd2); }
.oa-av.lg { width: 46px; height: 46px; }
.oa-ini { display: grid; place-items: center; width: 30px; height: 30px; background: linear-gradient(135deg, var(--p), var(--a)); font-family: var(--font-display); font-weight: 800; font-size: 12px; color: var(--on-accent); }
.oa-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.oa-grow { flex: 1; min-width: 0; }
.oa-nm { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oa-mt { font-size: 10.5px; color: var(--oa-mute); display: block; }
.oa-toast { position: absolute; left: 14px; right: 14px; bottom: 14px; background: rgba(18,40,32,.97); border: 1px solid rgba(60,207,142,.35); border-radius: 14px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; box-shadow: 0 12px 30px rgba(0,0,0,.5); z-index: 2; }
.oa-toast b { font-family: var(--font-display); display: block; font-size: 11.5px; }
.oa-toast span span { color: var(--oa-mute); font-size: 10.5px; display: block; }
.oa-tk { width: 24px; height: 24px; border-radius: 50%; background: var(--oa-ok); color: var(--on-ok); display: grid; place-items: center; flex-shrink: 0; font-weight: 800; font-size: 13px; }
.oa-toast.amber { background: rgba(45,34,14,.97); border-color: rgba(240,179,74,.4); }
.oa-toast.amber .oa-tk { background: var(--oa-warn); color: var(--on-warn); }
.oa-tabs { display: flex; border-top: 1px solid var(--bd); padding: 8px 6px 22px; flex-shrink: 0; background: var(--device-bar); }
.oa-tab { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 3px; font-family: var(--font-display); font-size: 9px; font-weight: 600; color: var(--t3); transition: color var(--dur-base) var(--ease-std); text-align: center; }
.oa-tab > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oa-tab svg { width: 18px; height: 18px; }
.oa-tab.on { color: var(--oa-teal); }

/* entrances: everything rests in its final state; showing a screen replays them */
.oa-scr.on .oa-in { animation: oaRise .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0s); }
.oa-scr.on .oa-pop { animation: oaPop .45s cubic-bezier(.2,1.4,.4,1) both; animation-delay: var(--d, 0s); }
@keyframes oaRise { from { opacity: 0; transform: translateY(10px); } }
@keyframes oaPop { from { opacity: 0; transform: translateY(14px) scale(.96); } }

/* S0 today */
.oa-big { font-size: 30px; line-height: 1.1; letter-spacing: -.8px; margin: 4px 0 2px; }
.oa-up { color: var(--oa-ok); font-size: 11px; font-weight: 600; }
.oa-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oa-duo .oa-num { font-size: 22px; }
.oa-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--oa-ok); margin-inline-end: 5px; vertical-align: middle; animation: oaPing 1.6s infinite; }
@keyframes oaPing { 0% { box-shadow: 0 0 0 0 rgba(60,207,142,.6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(60,207,142,0); } }
.oa-chart { display: flex; align-items: flex-end; gap: 4px; height: 44px; margin-top: 8px; }
.oa-chart i { flex: 1; height: var(--h); border-radius: 3px 3px 1px 1px; background: rgba(93,205,209,.28); transform-origin: bottom; }
.oa-chart i.pk { background: linear-gradient(var(--oa-gold), var(--p)); }
.oa-scr.on .oa-chart i { animation: oaGrow .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 40ms + .3s); }
@keyframes oaGrow { from { transform: scaleY(.05); } }
.oa-axis { display: flex; justify-content: space-between; font-size: 9px; color: var(--t3); margin-top: 4px; }
.oa-need { display: grid; gap: 6px; }
.oa-need .oa-row { background: var(--s2); border: 1px solid var(--bd); border-radius: 12px; padding: 8px 12px; font-size: 12px; }
.oa-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.oa-dot.ok { background: var(--oa-ok); } .oa-dot.warn { background: var(--oa-warn); } .oa-dot.bad { background: var(--oa-bad); }

/* S1 front desk */
.oa-scan { position: relative; height: 84px; flex-shrink: 0; border-radius: 16px; border: 1px dashed rgba(93,205,209,.35); display: grid; place-items: center; overflow: hidden; background: repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 2px, transparent 2px 8px); }
.oa-qr { width: 50px; height: 50px; border-radius: 8px; background: conic-gradient(from 90deg at 30% 30%, var(--t1) 25%, transparent 0) 0 0 / 12px 12px, var(--bd2); opacity: .85; }
.oa-beam { position: absolute; left: 10%; right: 10%; height: 2px; top: 50%; opacity: 0; background: var(--oa-teal); box-shadow: 0 0 14px 3px rgba(93,205,209,.6); }
.oa-scr.on .oa-beam { animation: oaBeam 1.1s ease-in-out 2 alternate both; }
@keyframes oaBeam { 0% { top: 12%; opacity: 1; } 100% { top: 88%; opacity: 1; } }
.oa-st { display: grid; margin-top: 8px; }
.oa-st .oa-pill { grid-area: 1 / 1; justify-self: start; }
.oa-st .s1 { opacity: 0; }
.oa-scr.on .oa-st .s1 { animation: oaOut 4.2s both; }
.oa-scr.on .oa-st .s2 { animation: oaIn 4.2s both; }
@keyframes oaOut { 0%, 30% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes oaIn { 0%, 30% { opacity: 0; } 36%, 100% { opacity: 1; } }
.oa-renew { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: linear-gradient(90deg, var(--p), var(--p-bright)); border-radius: 12px; padding: 10px 14px; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; }
.oa-scr.on .oa-renew { animation: oaRise .5s both 1.6s, oaPress .3s ease 2.7s; }
@keyframes oaPress { 50% { transform: scale(.96); filter: brightness(1.25); } }
.oa-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.oa-m { text-align: center; border: 1px solid var(--bd2); border-radius: 10px; padding: 7px 4px; font-size: 10.5px; font-weight: 600; color: var(--oa-mute); line-height: 1.25; overflow-wrap: anywhere; }
.oa-m.pick { border-color: var(--oa-teal); color: var(--t1); background: var(--p-tint-20); }
.oa-scr.on .oa-m.pick { animation: oaRise .45s both 3s, oaPick .45s both 3.6s; }
@keyframes oaPick { from { border-color: var(--bd2); background: transparent; color: var(--oa-mute); } }
.oa-rule { font-size: 10.5px; color: var(--oa-mute); display: flex; gap: 6px; align-items: flex-start; }
.oa-rule svg { flex-shrink: 0; margin-top: 2px; color: var(--oa-gold); }

/* S2 collect */
.oa-wa { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--bd); }
.oa-wa-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--wa-green); display: grid; place-items: center; flex-shrink: 0; }
.oa-chat { display: grid; gap: 7px; padding: 2px 0; }
.oa-bub { max-width: 86%; padding: 8px 11px; border-radius: 14px; font-size: 11.5px; line-height: 1.45; }
.oa-bub.out { justify-self: end; background: var(--wa-out); border-end-end-radius: 4px; }
.oa-bub.in { justify-self: start; background: var(--s2); border: 1px solid var(--bd); border-end-start-radius: 4px; }
.oa-lk { color: var(--oa-teal); text-decoration: underline; unicode-bidi: isolate; }
.oa-bub time { display: block; font-size: 9px; color: rgba(240,240,238,.45); text-align: end; margin-top: 2px; }
.oa-sys { justify-self: center; text-align: center; font-size: 10px; color: var(--oa-ok); background: rgba(60,207,142,.1); border: 1px solid rgba(60,207,142,.25); border-radius: var(--r-pill); padding: 3px 10px; font-weight: 600; }
.oa-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.oa-tri .oa-box { padding: 9px 6px; text-align: center; min-width: 0; }
.oa-tri .oa-num { font-size: 18px; display: block; }
.oa-tri .oa-num.gold { color: var(--oa-gold); font-size: 15px; line-height: 1.6; overflow: hidden; }   /* app.js shrinks long amounts to fit */

/* S3 cash drawer */
.oa-ways { display: grid; gap: 9px; }
.oa-way { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 11.5px; }
.oa-way > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oa-track { height: 7px; border-radius: 4px; background: var(--bd); overflow: hidden; }
.oa-track i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--c, var(--oa-teal)); transform-origin: left; }
.oa-scr.on .oa-track i { animation: oaWide .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d); }
@keyframes oaWide { from { transform: scaleX(0); } }
.oa-way .oa-num { font-size: 12px; }
.oa-count { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.oa-count .oa-num { font-size: 17px; display: block; }
.oa-box.short { border-color: rgba(240,179,74,.45); background: rgba(240,179,74,.07); }
.oa-box.short .oa-num { color: var(--oa-warn); }
.oa-log { display: grid; gap: 5px; font-size: 10.5px; color: var(--oa-mute); }
.oa-log div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--bd2); padding-bottom: 5px; }
.oa-log b { color: var(--t1); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* S4 members at risk */
.oa-risk { display: grid; gap: 7px; }
.oa-risk .oa-row { background: var(--s2); border: 1px solid var(--bd); border-radius: 14px; padding: 8px 11px; }
.oa-meter { width: 44px; height: 5px; border-radius: 3px; background: var(--bd2); overflow: hidden; flex-shrink: 0; }
.oa-meter i { display: block; height: 100%; width: var(--w); background: var(--c); }
.oa-flip { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; }
.oa-flip .oa-pill { grid-area: 1 / 3; justify-self: end; }
.oa-flip .p1 { opacity: 0; }
.oa-scr.on .oa-flip .p1 { animation: oaOut 4.4s both; }
.oa-scr.on .oa-flip .p2 { animation: oaIn 4.4s both; }
.oa-more { font-size: 11px; color: var(--oa-mute); text-align: center; }
.oa-pair { background: linear-gradient(135deg, rgba(13,107,110,.22), var(--a-tint-10)); border: 1px solid rgba(93,205,209,.3); border-radius: 16px; padding: 12px; display: grid; gap: 9px; }
.oa-duoav { display: flex; flex-shrink: 0; }
.oa-duoav .oa-av { width: 30px; height: 30px; border: 2px solid var(--device-body); }
.oa-duoav .oa-av + .oa-av { margin-inline-start: -10px; }
.oa-pair p { font-size: 11.5px; line-height: 1.45; }
.oa-pair p b { font-family: var(--font-display); }
.oa-nudge { background: var(--a); color: var(--on-gold); border-radius: 10px; padding: 9px; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 12px; }
.oa-scr.on .oa-nudge { animation: oaRise .5s both 1.4s, oaPress .3s ease 2.6s; }

/* 7. LANGUAGE LAYERS =====================================================
   A language changes the two font tokens; every element follows.
   The wordmark and the prices keep --font-brand (Sora) in every language. */

/* Arabic: one typeface; tracking off (letter-spacing breaks Arabic letter joining) */
html[lang="ar"] { --font-display: var(--arabic); --font-body: var(--arabic); }
html[lang="ar"] *, html[lang="ar"] *::before, html[lang="ar"] *::after { letter-spacing: 0 !important; }
html[lang="ar"] body { font-size: 18px; line-height: 1.85; }
html[lang="ar"] h1 { line-height: 1.35; font-weight: 700; }
html[lang="ar"] h2 { line-height: 1.45; font-weight: 700; }
html[lang="ar"] .eye, html[lang="ar"] .ph-label, html[lang="ar"] .p-tier,
html[lang="ar"] .eco-side-h, html[lang="ar"] .oa-lbl { text-transform: none; }
html[lang="ar"] .hero-body, html[lang="ar"] .s-sub { line-height: 1.9; }
html[lang="ar"] .step p, html[lang="ar"] .eco-card p, html[lang="ar"] .app-card p,
html[lang="ar"] .ref-row p, html[lang="ar"] .p-feats li { font-size: var(--fs-body); line-height: 1.8; }
html[lang="ar"] .eye, html[lang="ar"] .eco-side-h { font-size: var(--fs-md); }
html[lang="ar"] .faq p { font-size: var(--fs-body); line-height: 1.9; }
html[lang="ar"] .oa-lbl { font-size: 10.5px; }
html[lang="ar"] .oa-h { line-height: 1.45; font-weight: 700; }
html[lang="ar"] .oa-pain q { font-style: normal; font-size: var(--fs-card); quotes: "«" "»"; }
html[lang="ar"] .oa-pain small, html[lang="ar"] .oa-sub { font-size: var(--fs-body); line-height: 1.8; }

/* Hindi, Thai, Korean, Japanese, Chinese: Sora/Inter for Latin letters and digits,
   then the system font that ships with every phone and computer in that market */
html[lang="hi"] { --font-display: 'Sora', 'Inter', 'Kohinoor Devanagari', 'Nirmala UI', 'Noto Sans Devanagari', 'Mangal', sans-serif; --font-body: 'Inter', 'Kohinoor Devanagari', 'Nirmala UI', 'Noto Sans Devanagari', 'Mangal', sans-serif; }
html[lang="th"] { --font-display: 'Sora', 'Inter', 'Thonburi', 'Leelawadee UI', 'Noto Sans Thai', sans-serif; --font-body: 'Inter', 'Thonburi', 'Leelawadee UI', 'Noto Sans Thai', sans-serif; }
html[lang="ko"] { --font-display: 'Sora', 'Inter', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif; --font-body: 'Inter', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif; }
html[lang="ja"] { --font-display: 'Sora', 'Inter', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Meiryo', 'Noto Sans JP', sans-serif; --font-body: 'Inter', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Meiryo', 'Noto Sans JP', sans-serif; }
html[lang="zh-Hans"] { --font-display: 'Sora', 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; --font-body: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; }
html[lang="zh-Hant"] { --font-display: 'Sora', 'Inter', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif; --font-body: 'Inter', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif; }
html[lang="hi"] *, html[lang="th"] *, html[lang="ko"] *, html[lang="ja"] *,
html[lang="zh-Hans"] *, html[lang="zh-Hant"] * { letter-spacing: 0 !important; }
html[lang="hi"] h1, html[lang="th"] h1, html[lang="ko"] h1, html[lang="ja"] h1,
html[lang="zh-Hans"] h1, html[lang="zh-Hant"] h1 { line-height: 1.3; }

/* right-to-left */
[dir=rtl] .su-field input[dir=ltr] { text-align: right; }
[dir=rtl] .ph-link i { background: linear-gradient(270deg, var(--p), var(--a)); }
[dir="rtl"] .oa-pain.on .oa-bar::after { transform-origin: right; background: linear-gradient(270deg, var(--p), var(--a)); }
[dir="rtl"] .oa-track i { transform-origin: right; }

/* 8. RESPONSIVE ==========================================================
   Four widths only: 1240 (two-column pricing, stacked hero), 900 (tablet/phone:
   menu button, one column), 600 (small phones: form, legal), 480 (narrow phones).
   Plus one height query for phones held sideways. */
@media (min-width: 1241px) { .price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1240px) {
  #hero { grid-template-columns: 1fr; text-align: center; gap: var(--sp-48); min-height: auto; }
  .hero-text { max-width: 820px; margin: 0 auto; }
  .hero-body { margin-left: auto; margin-right: auto; }
  .ctas { justify-content: center; }
  .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oa-wrap { grid-template-columns: minmax(0, 1fr) 340px; column-gap: var(--sp-32); }
}
@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .nav-links, .nav-right .btn-teal { display: none; }
  .burger { display: flex; }
  #hero { padding-top: var(--sp-48); padding-bottom: var(--sp-40); }
  #proof { padding-top: var(--sp-20); padding-bottom: var(--sp-20); }
  .sec { padding-top: var(--sp-56); padding-bottom: var(--sp-56); }
  .steps { grid-template-columns: 1fr; }
  .step { border-inline-end: none; border-bottom: 1.5px solid var(--bd); padding: var(--sp-24); }
  .step:last-child { border-bottom: none; }
  .eco-cards { grid-template-columns: 1fr; }
  .eco-side { padding: var(--sp-16); }
  .app-grid { grid-template-columns: repeat(2, 1fr); }
  .ref-card { grid-template-columns: 1fr; padding: var(--sp-32) var(--sp-20); gap: var(--sp-24); }
  .price-grid { grid-template-columns: minmax(0, 1fr); }   /* one card per row; long words shrink (app.js fitText) */
  .price-controls { flex-direction: column; align-items: flex-start; }
  footer { padding-top: var(--sp-24); }
  .f-top { flex-direction: column; align-items: flex-start; gap: var(--sp-16); }
  .f-bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-8); }
  .oa-wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "list"; row-gap: var(--sp-24); }
  .eco-side.oa { padding: var(--sp-16) var(--sp-16) var(--sp-24); }
  .wa-bubble { display: none !important; }
  .duo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; gap: var(--sp-8); margin-top: var(--sp-40); }
  .duo-a { grid-column: 1 / span 2; grid-row: 1; }
  .duo-b { grid-column: 1; grid-row: 2 / span 2; }
  .duo-c { grid-column: 2; grid-row: 2; }
  .duo-e { grid-column: 2; grid-row: 3; }
  .duo-d { grid-column: 1 / span 2; grid-row: 4; }
}
@media (max-width: 600px) {
  .phone { width: 262px; height: 520px; }
  .lang-grid-3 { grid-template-columns: repeat(2,1fr); }
  .modal-box { padding: var(--sp-32) var(--sp-24); }
  .su-box { padding: var(--sp-32) var(--sp-20) var(--sp-24); }
  .su-two { grid-template-columns: 1fr; gap: 0; }
  .su-box .su-title { font-size: var(--fs-lg); }
  .f-legal-sep { display: none; }
  .f-legal { gap: var(--sp-8) var(--sp-16); }
  .pb-box { min-width: 0; width: 100%; }
  .pb-sign { width: 100%; text-align: center; line-height: 1; }
}
@media (max-width: 340px) {
  h1 { font-size: var(--fs-xl); }   /* Galaxy Fold cover screen (280 px) */
  #hero { grid-template-columns: minmax(0, 1fr); }
  .ctas .btn-teal, .ctas .btn-outline { white-space: normal; text-align: center; }
  .duo-b .duo-tag, .duo-e .duo-tag { display: none; }   /* narrow tiles: long single words (Trainingspartner) cannot fit */
}
@media (max-width: 480px) {
  .duo-tag { inset-inline-start: var(--sp-8); bottom: var(--sp-8); max-width: calc(100% - 2 * var(--sp-8)); padding: var(--sp-4) var(--sp-8); font-size: var(--fs-xs); }
  .ctas { flex-direction: column; align-items: stretch; }
  .hero-body { font-size: var(--fs-body); }
  .s-sub { font-size: var(--fs-body); }
  .proof-stat { font-size: var(--fs-body); }
  .big-stat { font-size: 70px; }
  .app-grid { grid-template-columns: 1fr; }
  .loc-pick { flex-direction: column; align-items: stretch; }
  .billing-switch { max-width: 100%; }
  .bi-btn { white-space: normal; padding: var(--sp-8) var(--sp-12); }
  .eco-side.oa { padding: var(--sp-16) var(--sp-8) var(--sp-20); border: none; background: radial-gradient(360px 420px at 50% 55%, rgba(13,107,110,.18), transparent 70%); }
  .eco-side.oa > .eco-side-h { padding-inline: var(--sp-8); }
  .oa-head { padding-inline: var(--sp-8); }
  .oa-pain { padding: var(--sp-12) var(--sp-8); gap: var(--sp-12); }
  .oa-pain b { font-size: var(--fs-card); }
  .oa-phone { border-radius: 44px; }
  .oa-way { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .duo-grid { grid-auto-rows: 140px; gap: var(--sp-8); }
}
@media (max-height: 520px) {
  .mob-menu { padding-top: var(--sp-64); gap: var(--sp-12); }
  .mob-menu a { font-size: var(--fs-lead); padding-bottom: var(--sp-8); }
}

/* 9. REDUCED MOTION ====================================================== */
@media (prefers-reduced-motion: reduce) {
  .js .fade { opacity: 1; transform: none; transition: none; }
  .btn-teal:active, .btn-outline:active, .btn-sm-outline:active, .eco-card:hover { transform: none; }
  .duo img { transition: none; }
  .duo:hover img { transform: none; }
  .ph-scene, .ph-scene.live .anim, .ph-link i, .ph-badge.pop,
  .ph-bar u, .ph-toast, .ph-prod.picked { animation: none !important; transition: none !important }
  .ph-scene.live .anim, .ph-badge.pop, .ph-toast { opacity: 1 !important }
  .ph-link i { width: 52px !important }
  .ph-bar u { width: 100% !important }
  .oa *, .oa *::before, .oa *::after { animation: none !important; transition: none !important; }
  .oa-st .s1, .oa-flip .p1 { opacity: 0 !important; }
}

/* v5: annual price anchor, payback referral line, mission strip, initials for members shown without a photo */
s.was { color: var(--t3); text-decoration-thickness: 2px; font-size: .42em; font-weight: 600; align-self: center; margin-inline-end: var(--sp-8); white-space: nowrap; }
.pb-ref { margin: var(--sp-24) auto 0; max-width: 560px; color: var(--t2); font-size: var(--fs-md); }
.pb-ref b { color: var(--a); }
.mission .eye { justify-content: center; }
.ms-vision { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4.4vw, 46px); line-height: 1.2; color: var(--t1); margin: 0 auto; max-width: 820px; }
.ms-mission { margin: var(--sp-16) auto 0; max-width: 640px; font-size: var(--fs-lead); color: var(--t2); line-height: 1.8; }
.ph-av.ph-photo.veil { background: linear-gradient(135deg, var(--p), var(--a)); }
.ph-av.ph-photo.veil img { display: none; }
.ph-av.ph-photo.veil::after { content: attr(data-ini); color: var(--on-accent); }

/* v5: real payment marks. They sit on a white plate in both themes, as card brands require. */
.pm-logos { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: 6px; background: #fff; flex-shrink: 0; }
.pm-logos img { display: block; height: 15px; width: auto; }
.pm-vf { display: block; width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; }
.cc-eg .oa-m[data-pm]::before { content: ""; display: block; margin: 0 auto 4px; height: 16px; border-radius: 4px; }
.cc-eg .oa-m[data-pm="1"]::before { width: 36px; background: #fff url(../images/pay/instapay.png) center / auto 11px no-repeat; }
.cc-eg .oa-m[data-pm="2"]::before { width: 16px; background: url(../images/pay/vodafone-cash.png) center / contain no-repeat; }
.cc-eg .oa-way [data-pm]::before { content: ""; display: inline-block; vertical-align: -3px; margin-inline-end: 5px; height: 14px; border-radius: 3px; }
.cc-eg .oa-way [data-pm="1"]::before { width: 30px; background: #fff url(../images/pay/instapay.png) center / auto 9px no-repeat; }
.cc-eg .oa-way [data-pm="2"]::before { width: 14px; background: url(../images/pay/vodafone-cash.png) center / contain no-repeat; }

.duo-d img { object-position: 50% 8%; }

.su-wa { display: inline-flex; justify-content: center; text-decoration: none; margin-block: var(--sp-16) var(--sp-8); }
.su-done a.su-wa, .su-done a.su-wa:hover { color: var(--on-accent); text-decoration: none; }

/* v5: the four Egyptian mobile wallets in one chip */
.pm-logos.pm-wallets { gap: 7px; }
.pm-logos.pm-wallets { height: 34px; padding: 0 10px; gap: 9px; }
.pm-logos.pm-wallets img { height: 24px; width: auto; }
.pm-logos.pm-wallets img[src$="etisalat-money.png"] { height: 26px; }
.pm-logos.pm-wallets img[src$="vodafone-cash.png"], .pm-logos.pm-wallets img[src$="orange.svg"] { border-radius: 4px; }

/* v5: footer in one line: identity and email on one side, legal links on the other */
footer { padding-top: var(--sp-24); }
.f-bottom { align-items: center; gap: var(--sp-12) var(--sp-24); }
.f-id { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-8); font-size: var(--fs-sm); color: var(--t3); margin: 0; }
.f-id a { color: var(--t-footer); text-decoration: none; transition: color var(--dur-fast) var(--ease-std); }
.f-id a:hover { color: var(--t1); }
@media (max-width: 900px) {
  .f-bottom { flex-direction: column; align-items: center; text-align: center; }
  .f-id, .f-legal { justify-content: center; }
}

/* ==========================================================================
   v5 MOTION LAYER. One curve for everything (expo out: fast start, soft landing),
   one direction (up), staged in the order the eye reads. Reduced motion: final state, no movement.
   ========================================================================== */
:root { --ease-expo: cubic-bezier(.16, 1, .3, 1); }

/* Reveal: a longer, softer rise than before */
.js .fade { transform: translateY(24px); transition: opacity .8s var(--ease-expo), transform 1s var(--ease-expo); }
.d1 { transition-delay: 90ms; } .d2 { transition-delay: 180ms; } .d3 { transition-delay: 270ms; } .d4 { transition-delay: 360ms; }

/* Primary buttons: a light sweep on hover; the hero button sweeps by itself now and then */
.btn-teal { position: relative; overflow: hidden; isolation: isolate; }
.btn-teal::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 48%, rgba(201,151,58,.18) 54%, transparent 70%);
  transform: translateX(-130%); transition: transform .9s var(--ease-expo); }
.btn-teal:hover::after { transform: translateX(130%); }
.btn-teal.lg::after { animation: sheen 7s var(--ease-expo) 2.5s infinite; }
@keyframes sheen { 0% { transform: translateX(-130%); } 14%, 100% { transform: translateX(130%); } }

/* Big numbers count up, then settle with a short gold glow */
.big-stat { font-variant-numeric: tabular-nums; }
.big-stat.counted { animation: statGlow 1.6s var(--ease-expo); }
@keyframes statGlow { 0% { text-shadow: 0 0 0 rgba(201,151,58,0); } 30% { text-shadow: 0 0 36px rgba(201,151,58,.55); } 100% { text-shadow: 0 0 0 rgba(201,151,58,0); } }

/* Three steps, one journey: a teal-to-gold line draws across them, the numbers light up in turn */
.steps { position: relative; }
.steps::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, var(--p), var(--p-txt) 45%, var(--a)); transform: scaleX(0); transform-origin: left center;
  transition: transform 1.8s var(--ease-expo) .25s; }
[dir="rtl"] .steps::before { transform-origin: right center; background: linear-gradient(270deg, var(--p), var(--p-txt) 45%, var(--a)); }
.steps.go::before { transform: scaleX(1); }
.step-n { background: linear-gradient(135deg, var(--p-txt), var(--a)); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .28; transition: opacity .9s var(--ease-expo); }
.steps.go .step-n { opacity: 1; }
.steps.go .step:nth-child(1) .step-n { transition-delay: .35s; }
.steps.go .step:nth-child(2) .step-n { transition-delay: .85s; }
.steps.go .step:nth-child(3) .step-n { transition-delay: 1.35s; }

/* Training-partner photos: each tile opens from its centre, the photo settles, then its chip arrives */
.js .duo-grid .duo { clip-path: inset(9% 9% 9% 9% round var(--r-card)); transition: clip-path 1.2s var(--ease-expo); }
.js .duo-grid .duo img { transform: scale(1.16); transition: transform 2s var(--ease-expo); }
.js .duo-grid .duo-tag { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-expo), transform .8s var(--ease-expo); }
.js .duo-grid.in .duo { clip-path: inset(0 round var(--r-card)); }
.js .duo-grid.in .duo img { transform: scale(1); }
.js .duo-grid.in .duo-tag { opacity: 1; transform: none; }
.duo-grid .duo-b, .duo-grid .duo-b img { transition-delay: .12s; }
.duo-grid .duo-c, .duo-grid .duo-c img { transition-delay: .24s; }
.duo-grid .duo-d, .duo-grid .duo-d img { transition-delay: .36s; }
.duo-grid .duo-e, .duo-grid .duo-e img { transition-delay: .48s; }
.duo-grid .duo-a .duo-tag { transition-delay: 1s; } .duo-grid .duo-b .duo-tag { transition-delay: 1.15s; } .duo-grid .duo-e .duo-tag { transition-delay: 1.3s; }
.js .duo-grid.in .duo:hover img { transform: scale(1.04); transition-duration: .7s; transition-delay: 0s; }

/* Pricing: the strike-through is drawn, the "2 months free" tag pops when annual is chosen */
s.was { text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat left 56% / 0% 2px; transition: background-size .55s var(--ease-expo) .3s; }
[dir="rtl"] s.was { background-position: right 56%; }
s.was.drawn { background-size: 100% 2px; }
.pv { font-variant-numeric: tabular-nums; }
#biAnnual.active .save-tag { animation: savePop .55s var(--ease-expo); }
@keyframes savePop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* Owner app, drawer: the counted cash climbs slower than expected, stops short, and the gap shows */
.oa-gap { background: var(--s2); border: 1px solid var(--bd); border-radius: 16px; padding: 10px 13px; display: grid; gap: 8px; }
.oa-gap-bar { height: 10px; border-radius: 6px; background: var(--bd); overflow: hidden; display: flex; }
.oa-gap-ok { display: block; width: var(--oa-okw, 95%); background: linear-gradient(90deg, var(--oa-teal), #3ccf8e); transform-origin: left center; }
[dir="rtl"] .oa-gap-ok { transform-origin: right center; background: linear-gradient(270deg, var(--oa-teal), #3ccf8e); }
.oa-gap-miss { display: block; flex: 1; background: repeating-linear-gradient(135deg, var(--oa-warn) 0 4px, rgba(240,179,74,.35) 4px 8px); }
.oa-gap-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 10.5px; color: var(--oa-mute); }
.oa-gap-row b { color: var(--oa-warn); font-size: 13px; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.oa-scr.on .oa-gap-ok { animation: oaWide 1.9s cubic-bezier(.3,.8,.3,1) both 1.25s; }
.oa-scr.on .oa-gap-miss { animation: gapIn .35s ease both 3.15s, gapBlink 1.1s ease 3.5s 2; }
.oa-scr.on .oa-gap-row b { animation: gapIn .35s ease both 3.15s; }
.oa-scr.on .oa-count .oa-box.short { animation: oaRise .5s cubic-bezier(.2,.7,.2,1) both 1.2s, oaShake .5s ease 3.15s, shortRing 1.6s ease 3.15s; }
@keyframes gapIn { from { opacity: 0; } }
@keyframes gapBlink { 50% { opacity: .35; } }
@keyframes oaShake { 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(1px); } }
@keyframes shortRing { 0% { box-shadow: 0 0 0 0 rgba(240,179,74,.55); } 100% { box-shadow: 0 0 0 10px rgba(240,179,74,0); } }
.oa-scr.on .oa-toast.amber { animation: oaPop .45s cubic-bezier(.2,1.4,.4,1) both 3.3s, shortRing 1.4s ease 3.75s; }
.oa.still .oa-gap-ok, .oa.still .oa-gap-miss, .oa.still .oa-gap-row b, .oa.still .oa-box.short, .oa.still .oa-toast.amber { animation: none; }

/* WhatsApp: in context under the prices and in step 1; on phones the button says "Ask us" once */
.wa-inline { margin-top: var(--sp-20); font-size: var(--fs-md); color: var(--t2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.wa-cta, .step-wa { display: inline-flex; align-items: center; gap: 6px; color: var(--wa-green); font-weight: 700; text-decoration: none; min-height: 44px; }
.wa-cta:hover, .step-wa:hover { text-decoration: underline; text-underline-offset: 3px; }
.step-wa { display: flex; width: fit-content; margin-top: var(--sp-8); font-size: var(--fs-sm); font-family: var(--font-display); }
.wa-hint { position: absolute; inset-inline-end: calc(100% + 10px); top: 50%; transform: translateY(-50%) scale(.85); white-space: nowrap;
  background: var(--on-accent); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md);
  padding: 7px 14px; border-radius: var(--r-pill); box-shadow: 0 8px 24px rgba(0,0,0,.4); opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease-expo), transform .5s var(--ease-expo); }
.wa-fab.hint .wa-hint { opacity: 1; transform: translateY(-50%) scale(1); }
.wa-fab.hint { animation: waRing 1.4s ease 2; }
@keyframes waRing { 0% { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 0 rgba(37,211,102,.55); } 100% { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 16px rgba(37,211,102,0); } }

@media (prefers-reduced-motion: reduce) {
  .js .fade, .js .duo-grid .duo, .js .duo-grid .duo img, .js .duo-grid .duo-tag, .step-n, .steps::before, s.was { transition: none; }
  .js .duo-grid .duo { clip-path: none; } .js .duo-grid .duo img { transform: none; } .js .duo-grid .duo-tag { opacity: 1; transform: none; }
  .steps::before { transform: scaleX(1); } .step-n { opacity: 1; }
  .btn-teal::after, .big-stat.counted, #biAnnual.active .save-tag, .wa-fab.hint { animation: none; }
}

/* v5: cash, the fourth way to pay Refka in Egypt: bills settle onto the stack, the coin drops in and catches the light */
.pm-logos.pm-cash { height: 34px; padding: 0 8px; background: var(--s2); border: 1px solid var(--p-line-25); }
.cash-ico { display: block; overflow: visible; }
.cash-ico .bill, .cash-ico .coin { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .cash-ico .bill-shine { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .cash-ico .b1 { animation: billIn 4.8s var(--ease-expo) infinite; }
  .cash-ico .b2 { animation: billIn2 4.8s var(--ease-expo) infinite; }
  .cash-ico .coin { animation: coinDrop 4.8s cubic-bezier(.3,1.5,.5,1) infinite; }
  .cash-ico .coin-shine { animation: coinShine 4.8s ease infinite; }
  .cash-ico .bill-shine { animation: billShine 4.8s ease-in-out infinite; }
  .pm-chip:hover .cash-ico .b1, .pm-chip:hover .cash-ico .b2, .pm-chip:hover .cash-ico .coin, .pm-chip:hover .cash-ico .coin-shine { animation-duration: 2.4s; }
}
@keyframes billIn { 0% { transform: translate(-10px,-8px) rotate(-10deg); opacity: 0; } 14%, 100% { transform: none; opacity: 1; } }
@keyframes billIn2 { 0%, 4% { transform: translate(-6px,-5px) rotate(-6deg); opacity: 0; } 18%, 100% { transform: none; opacity: 1; } }
@keyframes coinDrop { 0%, 20% { transform: translateY(-16px) scale(.6); opacity: 0; } 32% { transform: translateY(0) scale(1.08); opacity: 1; } 38%, 64% { transform: none; } 70% { transform: scaleX(.15); } 76%, 100% { transform: none; opacity: 1; } }
@keyframes billShine { 0%, 42% { transform: translateX(0); opacity: 0; } 46% { opacity: 1; } 60%, 100% { transform: translateX(52px); opacity: 0; } }
@keyframes coinShine { 0%, 40% { opacity: 0; } 46% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* v6: shorter page, one highlighted plan, swipe rails on phones, the phone as the hero ================== */

/* problem block opens with the industry number, then the 35% */
.proof-lead { max-width: 620px; margin: 0 auto var(--sp-40); padding-bottom: var(--sp-32); border-bottom: 1px solid var(--bd); }
.proof-lead .src { margin-bottom: 0; }

/* the payback math, folded into pricing */
.pb-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24) var(--sp-40); flex-wrap: wrap;
  margin: var(--sp-32) 0 var(--sp-24); padding: var(--sp-20) var(--sp-24); border-radius: var(--r-card);
  background: linear-gradient(90deg, var(--p-tint-10), var(--a-tint-08)); border: 1px solid var(--p-line-25); }
.pb-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.3; color: var(--t1); margin: 0; }
.pb-strip .pb-eq { margin: 0; flex-wrap: nowrap; gap: var(--sp-12); }
.pb-strip .pb-box { min-width: 0; padding: var(--sp-12) var(--sp-20); gap: var(--sp-4); }
.pb-strip .pb-k { font-size: var(--fs-sm); }
.pb-strip .pb-v { font-size: clamp(24px, 2.6vw, 32px); }
.pb-strip .pb-sign { font-size: 28px; }

/* referral, as one slim card under the prices */
.ref-strip { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16) var(--sp-32); flex-wrap: wrap;
  margin-top: var(--sp-40); padding: var(--sp-24) var(--sp-32); border-radius: var(--r-card); background: var(--card); border: 1px solid var(--bd2); }
.ref-strip::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: linear-gradient(180deg, var(--p-txt), var(--a)); }
.ref-strip h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg, 22px); margin: 0 0 var(--sp-4); }
.ref-strip p { margin: 0; color: var(--t2); font-size: var(--fs-md); line-height: 1.6; max-width: 60ch; }

/* closing statement with the last call to action */
.ms-cta { margin-top: var(--sp-32); display: flex; justify-content: center; }

/* hero: the phone is the hero. Bigger, turned slightly toward the text, lit from behind */
@media (min-width: 1241px) {
  .hero-devices { perspective: 1800px; }
  .dev-member { margin: var(--sp-48) var(--sp-48) var(--sp-56); }
  .dev-member .hero-phone { transform: rotateY(-12deg) rotateX(3deg) scale(1.24); transform-origin: 50% 40%;
    transition: transform 1.1s var(--ease-expo); will-change: transform; }
  [dir="rtl"] .dev-member .hero-phone { transform: rotateY(12deg) rotateX(3deg) scale(1.24); }
  .dev-member:hover .hero-phone { transform: rotateY(0) rotateX(0) scale(1.24); }
  .dev-member .dev-cap { position: relative; z-index: 2; margin-bottom: var(--sp-24); }
}
.dev-member { position: relative; }
.dev-member::before { content: ''; position: absolute; z-index: 0; inset: 18% -30% 8%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(20,184,189,.20), rgba(201,151,58,.07) 55%, transparent); filter: blur(10px); }
.dev-member .hero-phone { z-index: 1; }

/* phones and tablets: three groups of cards become swipe rails; the next card peeks in */
@media (max-width: 900px) {
  .rail { display: flex !important; gap: var(--sp-12); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: var(--sp-4) var(--gutter) var(--sp-16); }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { flex: 0 0 min(84%, 360px); scroll-snap-align: start; }
  .js .rail > .fade { opacity: 1; transform: none; }
  .price-grid.rail > .featured { order: -1; }   /* the plan most gyms pick comes first */
  .price-grid.rail { margin-top: var(--sp-24); padding-top: var(--sp-20); }   /* room for the "Most popular" badge */
  .eco-side.member .rail { margin-inline: calc(-1 * var(--sp-16)); padding-inline: var(--sp-16); scroll-padding-inline: var(--sp-16); }   /* stays inside its panel */
  .pb-strip { padding: var(--sp-16); }
  .pb-strip .pb-box { flex: 1; }
  .ref-strip { padding: var(--sp-20); }
  .ref-strip .btn-outline { width: 100%; }
}
@media (max-width: 480px) {
  .pb-strip .pb-eq { width: 100%; }
  .pb-strip .pb-k { font-size: var(--fs-xs); }
}
@media (prefers-reduced-motion: reduce) { .dev-member .hero-phone { transition: none; } }
/* a swipe rail must never widen its column: grid and flex children default to min-width:auto */
.eco-side, .eco-side > *, .rail { min-width: 0; }
@media (max-width: 900px) {
  .pb-strip { flex-direction: column; align-items: stretch; }
  .pb-strip .pb-eq { width: 100%; }
  .pb-strip .pb-box { flex: 1 1 0; min-width: 0; width: auto; padding: var(--sp-12); align-items: flex-start; text-align: start; }
  .pb-strip .pb-sign { width: auto; flex: 0 0 auto; }
  .pb-strip .pb-v { font-size: 24px; }
}

/* v7 PRE-LAUNCH CONVERSATION ==============================================================
   Every button opens one short chat with Refka. It looks and moves like WhatsApp on purpose:
   that is where the conversation continues. Bubbles rise in, Refka types before it speaks. */
.chat-box { max-width: 460px; padding: 0; display: flex; flex-direction: column; height: min(680px, calc(100dvh - 2 * var(--sp-40)));
  overflow: hidden; background: var(--bg); border-color: var(--bd2); box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 0 1px var(--p-line-25); }
.chat-head { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-16) var(--sp-16) var(--sp-12) var(--sp-20);
  background: linear-gradient(180deg, var(--s2), var(--s1)); border-bottom: 1px solid var(--bd); }
.chat-avatar { width: 40px; height: 40px; padding: 7px; border-radius: 50%; background: var(--card); border: 1px solid var(--p-line-30); flex-shrink: 0; }
.chat-who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; flex: 1; }
.chat-who b { font-family: var(--font-display); font-weight: 800; color: var(--t1); font-size: var(--fs-card); }
.chat-who small { font-size: var(--fs-sm); color: var(--ok); display: inline-flex; align-items: center; gap: 6px; }
.chat-who small::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(60,207,142,.18); }
.chat-x { margin-inline-start: auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--bd2); background: var(--s2); color: var(--t3); cursor: pointer; font-size: 16px; flex-shrink: 0; }
.chat-x:hover { color: var(--t1); }
.chat-log { flex: 1; overflow-y: auto; padding: var(--sp-20) var(--sp-16) var(--sp-12); display: flex; flex-direction: column; gap: var(--sp-8);
  background: radial-gradient(600px 300px at 50% 0%, var(--p-tint-08), transparent 70%), var(--bg); scroll-behavior: smooth; overscroll-behavior: contain; }
.cb { max-width: 84%; padding: 10px 14px; border-radius: 18px; font-size: var(--fs-md); line-height: 1.55; color: var(--t1);
  opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .35s var(--ease-expo), transform .5s var(--ease-expo); overflow-wrap: anywhere; }
.cb.in { opacity: 1; transform: none; }
.cb.bot { align-self: flex-start; background: var(--s2); border: 1px solid var(--bd2); border-end-start-radius: 6px; }
.cb.me { align-self: flex-end; background: var(--p); color: var(--on-accent); border-end-end-radius: 6px; font-weight: 600; }
.cb.typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.cb.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--t3); animation: chatDot 1s ease-in-out infinite; }
.cb.typing i:nth-child(2) { animation-delay: .15s; } .cb.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chatDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.cb.wa-preview { background: var(--wa-out); border: 1px solid rgba(37,211,102,.35); color: #e9fbe9; white-space: normal; font-size: var(--fs-sm); max-width: 92%; }
.cb.note { background: transparent; border: 1px dashed var(--p-line-40); color: var(--t2); font-size: var(--fs-sm); }
.chat-in { padding: var(--sp-12) var(--sp-16) var(--sp-8); border-top: 1px solid var(--bd); background: var(--s1); }
.chat-fields:empty { display: none; }
.chat-line { display: flex; gap: var(--sp-8); align-items: center; }
.chat-line input, .chat-ref { flex: 1; min-width: 0; height: 48px; padding: 0 var(--sp-16); border-radius: var(--r-pill); border: 1px solid var(--bd2);
  background: var(--card); color: var(--t1); font: 500 16px var(--font-body); outline: none; transition: border-color .2s; }
.chat-line input:focus, .chat-ref:focus { border-color: var(--p-txt); box-shadow: 0 0 0 3px var(--p-tint-20); }
.chat-line input[aria-invalid="true"] { border-color: var(--err-line); }
.chat-ref { width: 100%; height: 42px; margin-top: var(--sp-8); font-size: var(--fs-md); }
.chat-send { width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--p); color: var(--on-accent); cursor: pointer; display: grid; place-items: center; flex-shrink: 0;
  transition: transform .2s var(--ease-expo), background-color .2s; }
.chat-send:hover { background: var(--p-bright); transform: scale(1.05); }
[dir="rtl"] .chat-send svg { transform: scaleX(-1); }
.chat-chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.chat-chip { padding: 10px 16px; min-height: 44px; border-radius: var(--r-pill); border: 1px solid var(--p-line-50); background: var(--p-tint-10); color: var(--p-pale);
  font: 700 var(--fs-md) var(--font-display); cursor: pointer; transition: background-color .2s, transform .2s var(--ease-expo); }
.chat-chip:hover, .chat-chip:focus-visible { background: var(--p); color: var(--on-accent); transform: translateY(-1px); }
.chat-wa { width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--sp-8); background: var(--wa-green); color: #062d17; text-decoration: none; font-weight: 800; min-height: 52px; }
.chat-wa:hover { filter: brightness(1.06); }
.chat-err { color: var(--err); font-size: var(--fs-sm); min-height: 0; margin: 6px 4px 0; }
.chat-err:empty { display: none; }
.chat-consent { margin: 0; padding: 6px var(--sp-16) var(--sp-12); background: var(--s1); font-size: var(--fs-xs); color: var(--t3); line-height: 1.5; }
.chat-consent a { color: var(--p-txt); }
@media (max-width: 600px) {
  #signupModal.open { padding: 0; align-items: stretch; }
  .chat-box { max-width: none; height: 100dvh; border-radius: 0; border: none; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .cb { transition: none; opacity: 1; transform: none; } .cb.typing i { animation: none; } }
.chat-box a.chat-wa { background: var(--wa-green); color: #062d17; text-decoration: none; border: none; }
.chat-box a.chat-wa span { color: inherit; }
.chat-box .chat-consent { font-size: var(--fs-xs); color: var(--t3); margin: 0; line-height: 1.5; }
.chat-box .chat-err { font-size: var(--fs-sm); margin: 6px 4px 0; }