/* ───────────────────────── Rushd marketing — foundations ───────────────────────── */
:root {
  --navy:      #14304C;
  --navy-700:  #1B3D5F;
  --navy-800:  #122E47;
  --navy-900:  #0E2238;
  --gold:      #B0894B;
  --gold-soft: #C9A86A;
  --gold-deep: #97713A;
  --cream:     #FBF8F2;
  --cream-2:   #F4EEE3;
  --paper:     #FFFFFF;
  --ink:       #16283A;
  --ink-2:     #43556A;
  --ink-3:     #6B7C8E;
  --line:      rgba(20,48,76,0.12);
  --line-soft: rgba(20,48,76,0.07);

  /* themeable */
  --accent:        var(--gold);
  --accent-soft:   var(--gold-soft);
  --accent-deep:   var(--gold-deep);
  --accent-ink:    #FFFFFF;
  --page-bg:       var(--cream);
  --alt-bg:        var(--paper);
  --display-weight: 700;
  --h1-size: clamp(2.6rem, 5.6vw, 4.9rem);

  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 72px);
}

/* visual directions ------------------------------------------------------ */
[data-direction="bold"] {
  --page-bg: #F3F1EC;
  --alt-bg: var(--paper);
  --display-weight: 800;
  --h1-size: clamp(2.8rem, 6.2vw, 5.6rem);
}
[data-direction="warm"] {
  --page-bg: #F7F0E4;
  --alt-bg: #FCF8F1;
  --cream-2: #EFE5D3;
  --line: rgba(120,86,40,0.16);
  --line-soft: rgba(120,86,40,0.09);
}

/* accents ---------------------------------------------------------------- */
[data-accent="royal"] {
  --accent: #1E40AF;   --accent-soft: #5C8CFF;  --accent-deep: #15307F;
}
[data-accent="evergreen"] {
  --accent: #1F6B4F;   --accent-soft: #3E9B76;  --accent-deep: #14503A;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[dir="rtl"] body, [dir="rtl"] { font-family: "IBM Plex Sans Arabic", var(--font-body); }
[dir="rtl"] .display, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: "IBM Plex Sans Arabic", var(--font-display); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--accent-ink); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.display, h1, h2, h3 { font-family: var(--font-display); color: var(--ink); margin: 0; }
.eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent-deep);
  display: inline-flex; align-items: center; gap: 10px;
}
[dir="rtl"] .eyebrow { letter-spacing: 0; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); display: inline-block; }
.section { padding-block: clamp(64px, 9vw, 132px); }

/* buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.98rem;
  padding: 14px 26px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
  white-space: nowrap; line-height: 1;
}
.btn .arr { transition: transform .2s ease; }
[dir="rtl"] .btn .arr { transform: scaleX(-1); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--accent) 70%, black); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--accent) 70%, black); }
.btn-primary:hover .arr { transform: translateX(3px); }
[dir="rtl"] .btn-primary:hover .arr { transform: translateX(-3px) scaleX(-1); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { transform: translateY(-2px); background: var(--navy-700); }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { transform: translateY(-2px); }
.btn-lg { padding: 17px 32px; font-size: 1.05rem; }

/* top beta strip --------------------------------------------------------- */
.beta-strip {
  background: var(--navy-900); color: #EAF0F6;
  font-family: var(--font-display); font-size: 0.84rem; font-weight: 500;
  text-align: center; padding: 9px 16px;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
}
.beta-strip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-soft); box-shadow: 0 0 0 0 rgba(201,168,106,.6); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(201,168,106,.55)} 70%{box-shadow:0 0 0 7px rgba(201,168,106,0)} 100%{box-shadow:0 0 0 0 rgba(201,168,106,0)} }
.beta-strip a { color: var(--gold-soft); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.beta-strip a:hover { color: #fff; }

/* nav -------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--page-bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 18px; }
.nav-logo img { height: 50px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; color: var(--ink-2); transition: color .15s; }
.nav-links a:hover { color: var(--accent-deep); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.lang-toggle {
  display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
  font-family: var(--font-display); font-weight: 600; font-size: 0.8rem;
}
.lang-toggle button { border: 0; background: transparent; padding: 7px 13px; cursor: pointer; color: var(--ink-3); transition: all .15s; }
.lang-toggle button.on { background: var(--navy); color: #fff; }
.nav-burger { display: none; background: none; border: 0; cursor: pointer; color: var(--ink); }
@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
}

/* hero ------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(56px, 8vw, 104px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { font-size: var(--h1-size); font-weight: var(--display-weight); line-height: 1.02; letter-spacing: -0.025em; }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--accent-deep); }
[dir="rtl"] .hero h1 { letter-spacing: 0; line-height: 1.18; }
.hero-sub { font-size: 1.18rem; color: var(--ink-2); max-width: 30em; margin-top: 26px; }
.hero-cta { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.hero-meta { margin-top: 30px; display: flex; gap: 26px; flex-wrap: wrap; color: var(--ink-3); font-size: 0.9rem; font-family: var(--font-display); font-weight: 500; }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta .tick { color: var(--accent); }

/* hero visual — layered product shot */
.hero-visual { position: relative; }
.hero-card {
  border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  background: #fff; box-shadow: 0 40px 80px -40px rgba(14,34,56,0.42), 0 8px 24px -12px rgba(14,34,56,0.18);
}
.hero-card img { width: 100%; display: block; }
.hero-float {
  position: absolute; bottom: -26px; inset-inline-start: -28px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 50px -24px rgba(14,34,56,0.4); padding: 14px 18px;
  display: flex; align-items: center; gap: 13px; max-width: 260px;
}
@media (max-width: 940px) { .hero-float { inset-inline-start: 8px; } }
.hero-float .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, white); color: var(--accent-deep); flex: none; }
.hero-float b { font-family: var(--font-display); font-size: 0.92rem; color: var(--ink); display: block; }
.hero-float small { color: var(--ink-3); font-size: 0.8rem; }
.hero-halo { position: absolute; inset: auto; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%); top: -120px; inset-inline-end: -120px; z-index: -1; filter: blur(6px); }

/* trust band ------------------------------------------------------------- */
.trust { border-block: 1px solid var(--line-soft); background: var(--alt-bg); }
.trust-inner { display: flex; align-items: center; gap: clamp(20px,5vw,64px); padding-block: 26px; flex-wrap: wrap; justify-content: center; }
.trust-inner span { font-family: var(--font-display); font-weight: 600; color: var(--ink-3); font-size: 0.92rem; letter-spacing: 0.01em; }
.trust-inner .lbl { color: var(--ink-3); font-weight: 500; opacity: .7; }

/* section heading -------------------------------------------------------- */
.sec-head { max-width: 40rem; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head h2 { font-size: clamp(2rem, 3.6vw, 3.05rem); font-weight: var(--display-weight); letter-spacing: -0.02em; line-height: 1.08; margin-top: 16px; }
[dir="rtl"] .sec-head h2 { letter-spacing: 0; line-height: 1.3; }
.sec-head p { font-size: 1.1rem; color: var(--ink-2); margin-top: 18px; }

/* how it works ----------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 30px; }
.step-num { font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; color: var(--accent-deep); letter-spacing: 0.1em; }
.step-line { height: 2px; background: linear-gradient(90deg, var(--accent), transparent); margin: 14px 0 22px; border-radius: 2px; }
.step h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; }
.step p { color: var(--ink-2); margin-top: 12px; font-size: 1.02rem; }
.step .ic { width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 13%, var(--alt-bg)); color: var(--accent-deep); display: grid; place-items: center; margin-bottom: 4px; }

/* feature blocks --------------------------------------------------------- */
.feature-band { background: var(--alt-bg); border-block: 1px solid var(--line-soft); }
.feature-band.navy { background: var(--navy-900); color: #E7EEF5; border-color: transparent; }
.feature-band.navy h2, .feature-band.navy .display { color: #fff; }
.feature-band.navy .sec-head p { color: #AFC0D2; }
.feature-band.navy .eyebrow { color: var(--gold-soft); }
.feature-band.navy .eyebrow::before { background: var(--gold-soft); }

.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,72px); align-items: center; }
.feat-grid.flip .feat-media { order: -1; }
@media (max-width: 920px) { .feat-grid { grid-template-columns: 1fr; } .feat-grid.flip .feat-media { order: 0; } }
.feat-list { display: grid; gap: 4px; margin-top: 30px; }
.feat-item { display: flex; gap: 15px; padding: 16px 0; border-top: 1px solid var(--line); }
.navy .feat-item { border-color: rgba(255,255,255,0.1); }
.feat-item:last-child { border-bottom: 1px solid var(--line); }
.navy .feat-item:last-child { border-color: rgba(255,255,255,0.1); }
.feat-item .fic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.navy .feat-item .fic { background: rgba(201,168,106,0.16); color: var(--gold-soft); }
.feat-item b { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; display: block; color: inherit; }
.feat-item p { color: var(--ink-2); margin-top: 3px; font-size: 0.97rem; }
.navy .feat-item p { color: #A9BCCF; }

.feat-media { display: flex; flex-direction: column; gap: 16px; }
.feat-shot { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 24px 50px -34px rgba(14,34,56,0.42); background:#fff; }
.navy .feat-shot { border-color: rgba(255,255,255,0.12); box-shadow: 0 26px 60px -34px rgba(0,0,0,0.6); }
.feat-shot img { width: 100%; display:block; }
.feat-shot-cap { padding: 9px 14px; display:flex; align-items:center; gap:8px; border-top: 1px solid var(--line-soft); font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; color: var(--ink-3); }
.navy .feat-shot-cap { border-color: rgba(255,255,255,0.1); color: #A9BCCF; }
.feat-shot-cap .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* privacy callout -------------------------------------------------------- */
.privacy { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px,5vw,64px); align-items: center; }
@media (max-width: 880px){ .privacy { grid-template-columns: 1fr; } }
.privacy-card { background: var(--alt-bg); border: 1px solid var(--line); border-radius: 18px; padding: clamp(24px,3vw,38px); }
.privacy-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.privacy-row:first-child { border-top: 0; }
.privacy-row .pic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.privacy-row .pic.no { background: var(--cream-2); color: var(--ink-3); }
.privacy-row .pic.yes { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-deep); }
.privacy-row b { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; }
.privacy-row span { color: var(--ink-3); font-size: 0.86rem; }
.privacy-row .tag { margin-inline-start: auto; font-family: var(--font-display); font-size: 0.74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
[dir="rtl"] .privacy-row .tag { letter-spacing: 0; }

/* preview gallery -------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.shot { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background:#fff; box-shadow: 0 26px 56px -34px rgba(14,34,56,0.4); }
.shot img { width: 100%; display: block; }
.shot-cap { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line-soft); }
.shot-cap b { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.shot-cap span { font-size: 0.8rem; color: var(--ink-3); }
.shot.big { grid-column: span 7; }
.shot.sml { grid-column: span 5; }
.shot.half { grid-column: span 6; }
@media (max-width: 820px){ .shot.big,.shot.sml,.shot.half { grid-column: span 12; } }

/* CTA -------------------------------------------------------------------- */
.cta-band { background: var(--navy-900); color: #fff; position: relative; overflow: hidden; }
.cta-band .wrap { position: relative; z-index: 1; text-align: center; }
.cta-glow { position: absolute; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(176,137,75,0.32), transparent 68%); top: -260px; left: 50%; transform: translateX(-50%); }
.cta-band h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); font-weight: var(--display-weight); color: #fff; letter-spacing: -0.02em; line-height: 1.06; }
[dir="rtl"] .cta-band h2 { letter-spacing: 0; line-height: 1.3; }
.cta-band p { color: #B3C4D5; font-size: 1.15rem; max-width: 34rem; margin: 22px auto 0; }
.cta-row { display: flex; gap: 14px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }

/* footer ----------------------------------------------------------------- */
.footer { background: var(--navy-900); color: #9FB2C6; border-top: 1px solid rgba(255,255,255,0.08); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-block: clamp(48px,6vw,76px); }
@media (max-width: 820px){ .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.footer-brand img { height: 58px; margin-bottom: 18px; }
.footer-brand p { color: #8DA1B6; font-size: 0.95rem; max-width: 26em; }
.footer h4 { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #6E8299; margin: 0 0 16px; }
[dir="rtl"] .footer h4 { letter-spacing: 0; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer a { color: #AFC0D2; font-size: 0.95rem; }
.footer a:hover { color: #fff; }
.footer-bot { border-top: 1px solid rgba(255,255,255,0.08); padding-block: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.85rem; color: #7E92A8; }
.footer-bot .mail { color: var(--gold-soft); font-weight: 600; }

/* ICF / standards section ------------------------------------------------ */
.icf-layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .icf-layers { grid-template-columns: 1fr; } }
.icf-layer { position: relative; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 26px 24px; }
.icf-layer.primary { border-color: var(--gold-soft); background: rgba(201,168,106,0.08); }
.icf-badge { position: absolute; top: -11px; inset-inline-start: 24px; background: var(--gold-soft); color: var(--navy-900); font-family: var(--font-display); font-weight: 700; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
[dir="rtl"] .icf-badge { letter-spacing: 0; }
.icf-top { display: flex; align-items: center; justify-content: space-between; }
.icf-ic { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: rgba(201,168,106,0.16); color: var(--gold-soft); }
.icf-n { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: rgba(255,255,255,0.22); }
.icf-layer h3 { color: #fff; font-size: 1.3rem; font-weight: 700; margin-top: 18px; }
.icf-fw { display: block; margin-top: 6px; font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; color: var(--gold-soft); }
.icf-layer p { color: #A9BCCF; font-size: 0.96rem; margin-top: 12px; }
.icf-sec { margin-top: 40px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 22px 26px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; }
.icf-sec-lbl { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-soft); }
[dir="rtl"] .icf-sec-lbl { letter-spacing: 0; }
.icf-chips { display: flex; gap: 12px; flex-wrap: wrap; }
.icf-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 500; font-size: 0.86rem; color: #C7D5E3; }
.icf-chip svg { color: var(--gold-soft); }
.icf-foot { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.icf-note { font-size: 0.86rem; color: #8DA1B6; max-width: 40em; }

/* reveal animation ------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in { opacity: 1; transform: none; }
}

/* contact ---------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px,5vw,72px); align-items: start; }
@media (max-width: 860px){ .contact-grid { grid-template-columns: 1fr; } }
.contact-info h1 { font-size: clamp(2.3rem,4.6vw,3.6rem); font-weight: var(--display-weight); letter-spacing: -0.02em; line-height: 1.04; }
[dir="rtl"] .contact-info h1 { letter-spacing: 0; line-height: 1.25; }
.contact-info p { color: var(--ink-2); font-size: 1.12rem; margin-top: 20px; max-width: 30em; }
.contact-channel { display: flex; gap: 15px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); }
.contact-channel:first-of-type { margin-top: 30px; }
.contact-channel .cic { width: 44px; height: 44px; border-radius: 11px; flex:none; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-deep); }
.contact-channel b { font-family: var(--font-display); font-weight: 600; display: block; }
.contact-channel a, .contact-channel span { color: var(--ink-2); }
.contact-channel a:hover { color: var(--accent-deep); }
.form-card { background: var(--alt-bg); border: 1px solid var(--line); border-radius: 18px; padding: clamp(24px,3vw,40px); box-shadow: 0 30px 60px -40px rgba(14,34,56,0.34); }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; margin-bottom: 8px; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--paper); font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  transition: border .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field textarea { resize: vertical; min-height: 120px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px){ .field-row { grid-template-columns: 1fr; } }
.form-note { font-size: 0.84rem; color: var(--ink-3); margin-top: 6px; }
.form-sent { text-align: center; padding: 30px 10px; }
.form-sent .ok { width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-deep); display: grid; place-items: center; margin: 0 auto 16px; }

/* ═══════════════ multi-page additions ═══════════════ */

/* nav — grouped dropdowns ------------------------------------------------ */
.nav-group { position: relative; }
.nav-group > button {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; color: var(--ink-2);
  padding: 8px 0; transition: color .15s;
}
.nav-group > button:hover, .nav-group.open > button { color: var(--accent-deep); }
.nav-group > button svg { transition: transform .18s ease; }
.nav-group.open > button svg { transform: rotate(180deg); }
.nav-menu {
  display: none;
  position: absolute; top: calc(100% + 14px); inset-inline-start: -20px; min-width: 300px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 30px 60px -28px rgba(14,34,56,0.35); padding: 10px; z-index: 60;
  gap: 2px;
}
.nav-group.open .nav-menu { display: grid; }
.nav-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-menu a { display: flex; gap: 12px; align-items: flex-start; padding: 11px 13px; border-radius: 11px; transition: background .14s; }
.nav-menu a:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.nav-menu .mic { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-deep); }
.nav-menu b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.94rem; color: var(--ink); }
.nav-menu span { display: block; font-size: 0.82rem; color: var(--ink-3); line-height: 1.45; }
.nav-links > a.on, .nav-group.active > button { color: var(--accent-deep); }

.nav-drawer { display: none; }
@media (max-width: 880px) {
  .nav-drawer.open { display: block; position: fixed; inset: 0; z-index: 80; background: var(--page-bg); overflow-y: auto; padding: 22px var(--pad) 60px; }
  .nav-drawer-top { display: flex; align-items: center; justify-content: space-between; height: 62px; }
  .nav-drawer h5 { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink-3); margin: 26px 0 10px; }
  .nav-drawer a { display: block; padding: 11px 0; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; border-bottom: 1px solid var(--line-soft); }
}

/* sub-page hero ---------------------------------------------------------- */
.phero { padding-block: clamp(52px, 7vw, 96px) clamp(34px, 4vw, 56px); position: relative; overflow: hidden; }
.phero.navy { background: var(--navy-900); color: #DCE7F1; }
.phero.navy h1 { color: #fff; }
.phero.navy p { color: #AFC0D2; }
.phero.navy .eyebrow { color: var(--gold-soft); }
.phero.navy .eyebrow::before { background: var(--gold-soft); }
.phero h1 { font-size: clamp(2.3rem, 5vw, 4rem); font-weight: var(--display-weight); letter-spacing: -0.025em; line-height: 1.04; margin-top: 18px; }
[dir="rtl"] .phero h1 { letter-spacing: 0; line-height: 1.2; }
.phero h1 em { font-style: italic; font-weight: 500; color: var(--accent-deep); }
.phero.navy h1 em { color: var(--gold-soft); }
.phero p { font-size: 1.16rem; color: var(--ink-2); max-width: 36em; margin-top: 22px; }
.phero-inner { max-width: 46rem; }
.phero-cta { display: flex; gap: 13px; margin-top: 32px; flex-wrap: wrap; }
.phero-halo { position: absolute; width: 520px; height: 520px; border-radius: 50%; top: -230px; inset-inline-end: -140px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }

/* breadcrumb ------------------------------------------------------------- */
.crumbs { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 0.82rem; color: var(--ink-3); font-weight: 500; }
.crumbs a:hover { color: var(--accent-deep); }
.navy .crumbs { color: #8DA1B6; }

/* stat strip ------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
@media (max-width: 780px){ .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--alt-bg); padding: 26px 24px; }
.navy .stats, .phero.navy .stats { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.14); }
.navy .stat { background: var(--navy-900); }
.stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3.2vw, 2.5rem); letter-spacing: -0.03em; color: var(--accent-deep); line-height: 1; }
.navy .stat b { color: var(--gold-soft); }
.stat span { display: block; margin-top: 10px; font-size: 0.88rem; color: var(--ink-3); line-height: 1.5; }
.navy .stat span { color: #9FB2C6; }

/* generic card grid ------------------------------------------------------ */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cards.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 940px){ .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px){ .cards, .cards.two { grid-template-columns: 1fr; } }
.card {
  background: var(--alt-bg); border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 28px 54px -34px rgba(14,34,56,0.34); border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); }
.card .cic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px;
  background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-deep); }
.card h3 { font-size: 1.22rem; font-weight: 700; letter-spacing: -0.01em; }
.card p { color: var(--ink-2); margin-top: 10px; font-size: 0.99rem; }
.navy .card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
.navy .card h3 { color: #fff; }
.navy .card p { color: #A9BCCF; }
.navy .card .cic { background: rgba(201,168,106,0.16); color: var(--gold-soft); }

/* pull quote ------------------------------------------------------------- */
.quote { max-width: 46rem; margin-inline: auto; text-align: center; }
.quote blockquote {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.32; letter-spacing: -0.015em; margin: 0; color: var(--ink);
}
[dir="rtl"] .quote blockquote { letter-spacing: 0; line-height: 1.6; }
.navy .quote blockquote { color: #fff; }
.quote .mark { font-family: var(--font-display); font-size: 3.4rem; color: var(--accent-soft); line-height: 1; display: block; margin-bottom: 6px; }
.quote cite { display: block; margin-top: 24px; font-style: normal; font-family: var(--font-display); font-weight: 600; font-size: 0.94rem; color: var(--ink-3); }
.navy .quote cite { color: #9FB2C6; }

/* tier / pricing cards --------------------------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1080px){ .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .tiers { grid-template-columns: 1fr; } }
.tier {
  position: relative; background: var(--alt-bg); border: 1px solid var(--line); border-radius: 18px;
  padding: 28px 24px; display: flex; flex-direction: column; gap: 4px; height: 100%;
}
.tier.feature { border-color: var(--accent); box-shadow: 0 30px 62px -38px color-mix(in srgb, var(--accent) 70%, black); }
.tier-flag { position: absolute; top: -11px; inset-inline-start: 24px; background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 0.64rem; letter-spacing: .09em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
[dir="rtl"] .tier-flag { letter-spacing: 0; }
.tier h3 { font-size: 1.35rem; font-weight: 700; }
.tier .best { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
[dir="rtl"] .tier .best { letter-spacing: 0; }
.tier .who { color: var(--ink-2); font-size: 0.95rem; margin-top: 2px; }
.tier .price { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.02em; color: var(--ink); margin-top: 18px; line-height: 1.1; }
.tier .price small { display: block; font-weight: 500; font-size: 0.8rem; letter-spacing: 0; color: var(--ink-3); margin-top: 5px; }
.tier ul { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 11px; }
.tier li { display: flex; gap: 10px; font-size: 0.93rem; color: var(--ink-2); line-height: 1.5; }
.tier li svg { flex: none; margin-top: 3px; color: var(--accent); }
.tier li em { font-style: normal; display: block; color: var(--ink-3); font-size: 0.84rem; }
.tier .tier-cta { margin-top: auto; padding-top: 22px; }

/* two-column split (image + copy) ---------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px,5vw,72px); align-items: center; }
.split.flip .split-media { order: -1; }
@media (max-width: 920px){ .split { grid-template-columns: 1fr; } .split.flip .split-media { order: 0; } }
.split h2 { font-size: clamp(1.9rem,3.4vw,2.8rem); letter-spacing: -0.02em; line-height: 1.1; margin-top: 16px; }
[dir="rtl"] .split h2 { letter-spacing: 0; line-height: 1.32; }
.split p.lead { font-size: 1.08rem; color: var(--ink-2); margin-top: 16px; max-width: 34em; }
.navy .split p.lead { color: #AFC0D2; }
.shot-frame { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #fff;
  box-shadow: 0 34px 70px -40px rgba(14,34,56,0.44); }
.navy .shot-frame { border-color: rgba(255,255,255,0.12); }

/* numbered process list --------------------------------------------------- */
.plist { display: grid; gap: 0; margin-top: 30px; }
.pstep { display: flex; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); }
.pstep:last-child { border-bottom: 1px solid var(--line); }
.navy .pstep { border-color: rgba(255,255,255,0.1); }
.pstep .pn { font-family: var(--font-display); font-weight: 800; font-size: 0.82rem; letter-spacing: .1em; color: var(--accent-deep); flex: none; width: 34px; padding-top: 4px; }
.navy .pstep .pn { color: var(--gold-soft); }
.pstep b { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; display: block; }
.pstep p { color: var(--ink-2); margin-top: 5px; font-size: 0.99rem; }
.navy .pstep p { color: #A9BCCF; }

/* blog ------------------------------------------------------------------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 940px){ .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .post-grid { grid-template-columns: 1fr; } }
.post {
  display: flex; flex-direction: column; background: var(--alt-bg); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.post:hover { transform: translateY(-3px); box-shadow: 0 30px 58px -36px rgba(14,34,56,0.35); border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); }
.post-thumb { aspect-ratio: 16/9; background: linear-gradient(150deg, var(--navy) 0%, var(--navy-900) 100%); position: relative; overflow: hidden; }
.post-thumb .glow { position: absolute; width: 240px; height: 240px; border-radius: 50%; top: -90px; inset-inline-start: -60px;
  background: radial-gradient(circle, rgba(201,168,106,0.42), transparent 68%); }
.post-thumb .kicker { position: absolute; inset-inline-start: 20px; bottom: 18px; font-family: var(--font-display);
  font-weight: 700; font-size: 0.66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); }
[dir="rtl"] .post-thumb .kicker { letter-spacing: 0; }
.post-thumb .glyph { position: absolute; inset-inline-end: 18px; top: 16px; color: rgba(201,168,106,0.5); }
.post-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.post-body h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.28; }
.post-body p { color: var(--ink-2); font-size: 0.96rem; margin-top: 11px; flex: 1; }
.post-meta { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-family: var(--font-display); font-size: 0.8rem; color: var(--ink-3); font-weight: 500; }
.post-meta .sep { opacity: .45; }
.post.wide { grid-column: span 3; flex-direction: row; }
.post.wide .post-thumb { flex: 0 0 46%; aspect-ratio: auto; }
.post.wide .post-body { padding: clamp(26px,3vw,44px); justify-content: center; }
.post.wide .post-body h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.16; }
.post.wide .post-body p { font-size: 1.05rem; flex: none; }
@media (max-width: 940px){ .post.wide { grid-column: span 2; } }
@media (max-width: 780px){ .post.wide { flex-direction: column; } .post.wide .post-thumb { aspect-ratio: 16/9; } }
@media (max-width: 640px){ .post.wide { grid-column: span 1; } }

.topics { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.topic { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-2); cursor: pointer; background: var(--alt-bg); transition: all .15s; }
.topic:hover { border-color: var(--accent); color: var(--accent-deep); }
.topic.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* article ---------------------------------------------------------------- */
.article { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: clamp(36px,5vw,72px); align-items: start; }
@media (max-width: 940px){ .article { grid-template-columns: 1fr; } }
.prose { max-width: 40rem; }
.prose > * + * { margin-top: 22px; }
.prose p { font-size: 1.09rem; color: var(--ink-2); line-height: 1.75; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); font-weight: 700; letter-spacing: -0.018em; line-height: 1.2; margin-top: 46px; }
[dir="rtl"] .prose h2 { letter-spacing: 0; }
.prose h3 { font-size: 1.22rem; font-weight: 700; margin-top: 34px; }
.prose ul, .prose ol { padding-inline-start: 22px; color: var(--ink-2); display: grid; gap: 10px; font-size: 1.05rem; }
.prose li { line-height: 1.7; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose blockquote { margin: 34px 0; padding: 22px 26px; border-inline-start: 3px solid var(--accent);
  background: var(--alt-bg); border-radius: 0 14px 14px 0; font-family: var(--font-display); font-weight: 500;
  font-size: 1.14rem; color: var(--ink); line-height: 1.5; }
[dir="rtl"] .prose blockquote { border-radius: 14px 0 0 14px; }
.prose .callout { background: var(--alt-bg); border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px; }
.prose .callout b { font-family: var(--font-display); display: block; margin-bottom: 8px; }
.prose .callout p { font-size: 1rem; margin-top: 0; }
.toc { position: sticky; top: 108px; border-inline-start: 1px solid var(--line); padding-inline-start: 22px; }
.toc h4 { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
[dir="rtl"] .toc h4 { letter-spacing: 0; }
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.toc a { font-size: 0.92rem; color: var(--ink-2); line-height: 1.45; }
.toc a:hover { color: var(--accent-deep); }
.article-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--font-display); font-size: 0.88rem; color: var(--ink-3); font-weight: 500; }
.article-share { display: flex; gap: 9px; margin-top: 30px; }
.share-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-3); transition: all .15s; }
.share-btn:hover { border-color: var(--accent); color: var(--accent-deep); }

/* comparison table -------------------------------------------------------- */
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--alt-bg); }
.cmp th, .cmp td { text-align: start; padding: 16px 20px; border-top: 1px solid var(--line); font-size: 0.97rem; }
.cmp thead th { border-top: 0; font-family: var(--font-display); font-weight: 700; font-size: 0.76rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); background: color-mix(in srgb, var(--accent) 6%, transparent); }
[dir="rtl"] .cmp thead th { letter-spacing: 0; }
.cmp td:first-child { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.cmp td { color: var(--ink-2); }
.cmp .yes { color: var(--accent-deep); font-weight: 600; }
.cmp-scroll { overflow-x: auto; }

/* faq --------------------------------------------------------------------- */
.faq { display: grid; gap: 0; max-width: 48rem; margin-inline: auto; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; background: none; border: 0;
  cursor: pointer; padding: 22px 0; text-align: start; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: var(--ink); }
.faq-q svg { flex: none; color: var(--accent-deep); transition: transform .2s ease; }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { color: var(--ink-2); font-size: 1rem; padding-bottom: 24px; max-width: 44em; }

/* logo / brand-swap strip -------------------------------------------------- */
.swap { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(20px,4vw,48px); align-items: center; }
@media (max-width: 780px){ .swap { grid-template-columns: 1fr; } }
.swap-card { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 28px 60px -40px rgba(14,34,56,0.4); }
.navy .swap-card { border-color: rgba(255,255,255,0.14); }
.swap-lbl { padding: 12px 18px; border-top: 1px solid var(--line-soft); font-family: var(--font-display); font-weight: 600;
  font-size: 0.82rem; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.swap-arrow { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); margin-inline: auto; }
[dir="rtl"] .swap-arrow svg { transform: scaleX(-1); }

/* misc -------------------------------------------------------------------- */
.section.tight { padding-block: clamp(48px, 6vw, 84px); }
.center { text-align: center; }
.mini-note { font-size: 0.84rem; color: var(--ink-3); margin-top: 18px; }
.navy .mini-note { color: #8DA1B6; }
.badge-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  padding: 7px 14px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-deep); }
.navy .pill { background: rgba(201,168,106,0.16); color: var(--gold-soft); }


/* late additions ---------------------------------------------------------- */
.feature-band .lead-p { color: var(--ink-2); }
.feature-band.navy .lead-p { color: #AFC0D2; }
.privacy-row .tag.tag-yes { color: var(--accent-deep); }
.phero .stats .stat { background: var(--alt-bg); }
.phero.navy .stat { background: rgba(255,255,255,0.03); }
.phero.navy .stat b { color: var(--gold-soft); }
.phero.navy .stat span { color: #9FB2C6; }
.phero.navy .stats { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.14); }
.phero .crumbs span:last-child { color: var(--ink); font-weight: 600; }
.phero.navy .crumbs span:last-child { color: #fff; }


/* long-copy bands: top-align and let the media column follow the read --------- */
.split { align-items: start; }
.feat-grid { align-items: start; }


/* trust band → role pills ------------------------------------------------- */
.trust-band { border-block: 1px solid var(--line); background: var(--page-bg); }
.trust-band .wrap { padding-block: clamp(26px, 3.4vw, 40px); }
.trust-rail { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 34px); flex-wrap: wrap; }
.trust-lbl {
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); flex: none;
}
[dir="rtl"] .trust-lbl { letter-spacing: 0; }
.trust-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.trust-pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px 10px 14px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--paper);
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--ink);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
[dir="rtl"] .trust-pill { padding: 10px 14px 10px 18px; }
.trust-pill:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 16px 32px -22px rgba(14,34,56,0.4); }
.trust-pill .tp-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-deep); }
.trust-pill.role { background: var(--navy); border-color: var(--navy); color: #fff; }
.trust-pill.role .tp-ic { background: rgba(201,168,106,0.22); color: var(--gold-soft); }
.trust-pill.role:hover { border-color: var(--navy); }
@media (max-width: 640px) { .trust-pill { font-size: 0.88rem; padding: 9px 14px; } }


/* nav login + slim conversion strip ---------------------------------------- */
.nav-login {
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--ink-2);
  padding: 8px 4px; transition: color .15s; white-space: nowrap;
}
.nav-login:hover { color: var(--accent-deep); }
@media (max-width: 880px) { .nav-login { display: none; } }

.cta-slim { border-block: 1px solid var(--line); background: var(--page-bg); }
.cta-slim .wrap {
  padding-block: clamp(30px, 3.6vw, 46px);
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.cta-slim h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 2.1vw, 1.62rem);
  letter-spacing: -0.018em; line-height: 1.2; }
[dir="rtl"] .cta-slim h3 { letter-spacing: 0; }
.cta-slim p { color: var(--ink-2); font-size: 1rem; margin-top: 7px; max-width: 42em; }
.cta-slim .acts { display: flex; gap: 12px; flex-wrap: wrap; flex: none; }


/* nav overflow guards ------------------------------------------------------ */
.nav-logo { flex: none; }
.nav-logo img { flex: none; width: auto; }
.nav-right { flex: none; }
.nav-links { min-width: 0; flex-wrap: wrap; }
@media (max-width: 1220px) {
  .nav-links { gap: 16px; }
  .nav-links > a, .nav-group > button { font-size: 0.9rem; }
  .nav-inner .btn-primary { padding-inline: 18px; }
}
@media (max-width: 1060px) and (min-width: 881px) {
  .nav-links { gap: 11px; }
  .nav-links > a, .nav-group > button { font-size: 0.83rem; }
  .nav-login { font-size: 0.83rem; }
  .nav-inner { gap: 14px; }
  .nav-right { gap: 12px; }
  .nav-inner .btn-primary { padding-inline: 14px; font-size: 0.86rem; }
  .nav-inner .btn-primary .arr { display: none; }
}


/* three-plan pricing grid -------------------------------------------------- */
.tiers.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .tiers.three { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; } }
.tier .hrs { display: grid; gap: 8px; margin-top: 18px; padding: 16px 0 0; border-top: 1px solid var(--line); }
.tier .hrs div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tier .hrs b { font-family: var(--font-display); font-weight: 800; font-size: 1.28rem; letter-spacing: -0.02em; color: var(--accent-deep); }
.tier .hrs span { font-size: 0.86rem; color: var(--ink-3); font-weight: 500; text-align: end; }

.freebar {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 26px; border-radius: 999px; margin-bottom: clamp(28px, 3.4vw, 44px);
  background: var(--navy); color: #fff; text-align: center;
}
.freebar .fb-pill {
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: .13em;
  text-transform: uppercase; padding: 6px 13px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); flex: none;
}
[dir="rtl"] .freebar .fb-pill { letter-spacing: 0; }
.freebar p { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; margin: 0; color: #fff; }
.freebar p em { font-style: normal; color: var(--gold-soft); }


/* prominent per-plan meter ------------------------------------------------- */
.tier .hrs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 20px; padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 14px; overflow: hidden;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.tier .hrs > div {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 4px; padding: 18px 12px 16px; text-align: center;
}
.tier .hrs > div + div { border-inline-start: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); }
.tier .hrs b {
  font-family: var(--font-display); font-weight: 800; font-size: 2.15rem; line-height: 1;
  letter-spacing: -0.03em; color: var(--accent-deep);
}
.tier .hrs span {
  font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; line-height: 1.35;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); text-align: center;
}
[dir="rtl"] .tier .hrs span { letter-spacing: 0; }
.tier .hrs-note {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; color: var(--accent-deep);
  margin-top: 10px; text-align: center;
}
.tier .hrs-note svg { flex: none; }

/* top-up bundles ----------------------------------------------------------- */
.cmp td.num, .cmp th.num { text-align: end; font-variant-numeric: tabular-nums; }
.cmp td.num { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.cmp td.rate { text-align: end; font-size: 0.86rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.topup-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.topup-head h3 { font-size: 1.15rem; font-weight: 700; }
.topup-head span { font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; color: var(--ink-3); }


/* ═══════════ hero v2 — animated feature stage ═══════════ */
.hero-stage { position: relative; }
.hero-shot {
  position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  background: #fff; box-shadow: 0 40px 80px -40px rgba(14,34,56,0.42), 0 8px 24px -12px rgba(14,34,56,0.18);
}
.hero-shot img { width: 100%; display: block; }
.hero-shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(14,34,56,0.10) 100%);
}

.hero-pop {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 11px 15px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,0.94); border: 1px solid var(--line);
  box-shadow: 0 18px 38px -20px rgba(14,34,56,0.42), 0 2px 6px -2px rgba(14,34,56,0.14);
  backdrop-filter: blur(6px);
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--ink);
  opacity: 0; will-change: transform, opacity;
}
.hero-pop .pic {
  width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-deep);
}
.hero-pop.dark { background: var(--navy); border-color: var(--navy); color: #fff; }
.hero-pop.dark .pic { background: rgba(201,168,106,0.22); color: var(--gold-soft); }

.hero-pop.l { inset-inline-start: -7%; animation: heroPopL 10s cubic-bezier(.22,.7,.3,1) infinite; }
.hero-pop.r { inset-inline-end: -7%; animation: heroPopR 10s cubic-bezier(.22,.7,.3,1) infinite; }
.hero-pop.s1 { top: 9%; }
.hero-pop.s2 { top: 33%; }
.hero-pop.s3 { top: 57%; }
.hero-pop.s4 { top: 81%; }
.hero-pop.d1 { animation-delay: 0s; }
.hero-pop.d2 { animation-delay: 2.5s; }
.hero-pop.d3 { animation-delay: 5s; }
.hero-pop.d4 { animation-delay: 7.5s; }
.hero-pop.r.d1 { animation-delay: 1.25s; }
.hero-pop.r.d2 { animation-delay: 3.75s; }
.hero-pop.r.d3 { animation-delay: 6.25s; }
.hero-pop.r.d4 { animation-delay: 8.75s; }

@keyframes heroPopL {
  0%   { opacity: 0; transform: translate3d(-18px, 8px, 0) scale(.94); }
  4%   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  20%  { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  26%  { opacity: 0; transform: translate3d(-10px, -8px, 0) scale(.97); }
  100% { opacity: 0; transform: translate3d(-18px, 8px, 0) scale(.94); }
}
@keyframes heroPopR {
  0%   { opacity: 0; transform: translate3d(18px, 8px, 0) scale(.94); }
  4%   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  20%  { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  26%  { opacity: 0; transform: translate3d(10px, -8px, 0) scale(.97); }
  100% { opacity: 0; transform: translate3d(18px, 8px, 0) scale(.94); }
}

@media (max-width: 1180px) {
  .hero-pop { font-size: 0.82rem; padding: 9px 13px; }
  .hero-pop.l { inset-inline-start: -3%; }
  .hero-pop.r { inset-inline-end: -3%; }
}
@media (max-width: 620px) {
  .hero-pop { font-size: 0.76rem; padding: 8px 11px; gap: 8px; }
  .hero-pop .pic { width: 24px; height: 24px; }
  .hero-pop.l { inset-inline-start: 2%; }
  .hero-pop.r { inset-inline-end: 2%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-pop { animation: none; opacity: 1; }
  .hero-pop.s2, .hero-pop.s4 { display: none; }
}


/* hero v2.1 — calmer float, gold ring on entry ---------------------------- */
.hero-pop { transform-origin: center center; }
.hero-pop::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  animation: heroRing 10s ease-out infinite; animation-delay: inherit;
}
.hero-pop.l { animation-name: heroPopLv2; animation-duration: 10s; animation-timing-function: cubic-bezier(.16,.84,.24,1); }
.hero-pop.r { animation-name: heroPopRv2; animation-duration: 10s; animation-timing-function: cubic-bezier(.16,.84,.24,1); }

@keyframes heroPopLv2 {
  0%   { opacity: 0; transform: translate3d(-26px, 10px, 0) scale(.9); }
  5%   { opacity: 1; transform: translate3d(0, 0, 0) scale(1.03); }
  9%   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  15%  { opacity: 1; transform: translate3d(0, -5px, 0) scale(1); }
  22%  { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  28%  { opacity: 0; transform: translate3d(-12px, -14px, 0) scale(.96); }
  100% { opacity: 0; transform: translate3d(-26px, 10px, 0) scale(.9); }
}
@keyframes heroPopRv2 {
  0%   { opacity: 0; transform: translate3d(26px, 10px, 0) scale(.9); }
  5%   { opacity: 1; transform: translate3d(0, 0, 0) scale(1.03); }
  9%   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  15%  { opacity: 1; transform: translate3d(0, -5px, 0) scale(1); }
  22%  { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  28%  { opacity: 0; transform: translate3d(12px, -14px, 0) scale(.96); }
  100% { opacity: 0; transform: translate3d(26px, 10px, 0) scale(.9); }
}
@keyframes heroRing {
  0%, 3%  { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  12%     { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); }
  100%    { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-pop::before { animation: none; box-shadow: none; }
}


/* ═══════════ audience cards ═══════════ */
.cards.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .cards.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .cards.four { grid-template-columns: 1fr; } }

.aud {
  display: flex; flex-direction: column; gap: 0; position: relative;
  background: var(--alt-bg); border: 1px solid var(--line); border-radius: 16px;
  padding: 30px 26px 26px; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.aud::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); opacity: 0; transition: opacity .2s ease;
}
.aud:hover { transform: translateY(-4px); box-shadow: 0 30px 58px -34px rgba(14,34,56,0.34);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.aud:hover::before { opacity: 1; }
.aud .aic {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 20px;
  background: linear-gradient(158deg, var(--navy), var(--navy-900)); color: var(--gold-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 22px -12px rgba(16,24,44,.5);
}
.aud.gold .aic { background: linear-gradient(158deg, #C9A86A, #A8863F); color: #fff; }
.aud h3 { font-size: 1.22rem; font-weight: 700; letter-spacing: -0.01em; }
.aud p { color: var(--ink-2); font-size: 0.97rem; margin-top: 9px; flex: 1; }
.aud .go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 20px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; color: var(--accent-deep);
}
.aud .go svg { transition: transform .18s ease; }
.aud:hover .go svg { transform: translateX(4px); }
[dir="rtl"] .aud:hover .go svg { transform: translateX(-4px) scaleX(-1); }
[dir="rtl"] .aud .go svg { transform: scaleX(-1); }

.proof-row {
  display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap; margin-top: clamp(30px, 3.4vw, 44px);
  padding-top: clamp(26px, 3vw, 36px); border-top: 1px solid var(--line);
}
.proof-row span {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--ink-3);
}
.proof-row svg { color: var(--accent-deep); flex: none; }


/* ═══════════ before / after comparison ═══════════ */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.6vw, 30px); align-items: stretch; }
@media (max-width: 900px) { .vs { grid-template-columns: 1fr; } }

.vs-col {
  position: relative; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid var(--line); background: var(--alt-bg);
}
.vs-col.after {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  box-shadow: 0 34px 70px -40px rgba(14,34,56,0.36);
}
.vs-head { padding: 26px 28px 22px; border-bottom: 1px solid var(--line); }
.vs-col.after .vs-head { background: linear-gradient(158deg, var(--navy), var(--navy-900)); border-bottom-color: transparent; }
.vs-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
[dir="rtl"] .vs-tag { letter-spacing: 0; }
.vs-col.after .vs-tag { color: var(--gold-soft); }
.vs-head h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em; margin-top: 12px; }
[dir="rtl"] .vs-head h3 { letter-spacing: 0; }
.vs-col.after .vs-head h3 { color: #fff; }
.vs-head p { font-size: 0.94rem; color: var(--ink-3); margin-top: 8px; }
.vs-col.after .vs-head p { color: #A9BCCF; }

.vs-rows { display: grid; }
.vs-row { display: flex; align-items: flex-start; gap: 13px; padding: 15px 28px; border-top: 1px solid var(--line-soft); }
.vs-row:first-child { border-top: 0; }
.vs-row .rt { flex: 1; min-width: 0; }
.vs-row b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--ink); line-height: 1.35; }
.vs-row span { display: block; font-size: 0.86rem; color: var(--ink-3); margin-top: 3px; line-height: 1.45; }
.vs-mark { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; margin-top: 2px; }
.vs-col.before .vs-mark { background: color-mix(in srgb, var(--ink-3) 14%, transparent); color: var(--ink-3); }
.vs-col.after .vs-mark { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-deep); }

.vs-tools { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 28px 24px; margin-top: auto; border-top: 1px solid var(--line-soft); }
.vs-tool {
  font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; color: var(--ink-3);
  padding: 6px 12px; border-radius: 8px; border: 1px dashed var(--line); background: var(--paper);
}
.vs-foot { padding: 22px 28px 26px; margin-top: auto; border-top: 1px solid rgba(255,255,255,0.1);
  background: color-mix(in srgb, var(--accent) 8%, transparent); }
.vs-col.after .vs-foot { border-top-color: var(--line-soft); }
.vs-foot .one {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--accent-deep);
}
.vs-foot p { font-size: 0.88rem; color: var(--ink-2); margin-top: 9px; }


/* comparison v2 — roomier rows now that there are fewer of them ----------- */
.vs-row { padding: 19px 28px; }
.vs-row b { font-size: 1.02rem; }
.vs-row span { font-size: 0.9rem; margin-top: 4px; }


/* ═══════════ why Rushd — three pillars ═══════════ */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 30px); }
@media (max-width: 940px) { .why { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; } }

.pillar {
  position: relative; display: flex; flex-direction: column; padding: 34px 30px 32px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--alt-bg); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pillar:hover { transform: translateY(-4px); box-shadow: 0 32px 62px -36px rgba(14,34,56,0.34);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); }
.pillar-n {
  font-family: var(--font-display); font-weight: 800; font-size: 0.76rem; letter-spacing: .18em;
  color: var(--accent-deep); opacity: .75;
}
[dir="rtl"] .pillar-n { letter-spacing: 0; }
.pillar .pic {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; margin: 20px 0 22px;
  background: linear-gradient(158deg, var(--navy), var(--navy-900)); color: var(--gold-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 24px -14px rgba(16,24,44,.5);
}
.pillar h3 { font-size: 1.32rem; font-weight: 700; letter-spacing: -0.014em; line-height: 1.24; }
[dir="rtl"] .pillar h3 { letter-spacing: 0; }
.pillar p { color: var(--ink-2); font-size: 1rem; margin-top: 11px; }
.pillar ul { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.pillar li { display: flex; gap: 10px; font-size: 0.92rem; color: var(--ink-2); line-height: 1.5; }
.pillar li svg { flex: none; margin-top: 3px; color: var(--accent); }

.why-cta {
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  margin-top: clamp(34px, 4vw, 52px); text-align: center;
}
.why-cta p { font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; color: var(--ink-2); margin: 0; }


/* hero → next section divider -------------------------------------------- */
.hero-rule { position: relative; }
.hero-rule span {
  display: block; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.hero-rule::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 5px var(--page-bg);
}

.footer-bot .beta-note {
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  color: var(--gold-soft); opacity: .92;
}


/* before/after — lock row heights so the two columns stay in step --------- */
.vs-rows { display: grid; grid-auto-rows: 1fr; }
.vs-row { align-items: center; }
.vs-mark { margin-top: 0; }


/* footer CTA pair ---------------------------------------------------------- */
.footer-brand .f-cta { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 22px; }
.footer-brand .f-cta .btn { font-size: 0.9rem; }


/* before/after — align both columns by construction (head / rows / foot) --- */
.vs { grid-template-rows: auto 1fr auto; }
@supports (grid-template-rows: subgrid) {
  .vs-col { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; }
}
@supports not (grid-template-rows: subgrid) {
  .vs-head { min-height: 172px; }
}
.vs-tools, .vs-foot { margin-top: 0; }


/* nav v3 — plain dropdown, links pushed toward the CTA -------------------- */
.nav-links.push { margin-inline-start: auto; margin-inline-end: clamp(14px, 2vw, 30px); }
.nav-menu.plain { min-width: 232px; padding: 8px; }
.nav-menu.plain a { display: block; padding: 10px 14px; }
.nav-menu.plain b { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.nav-menu.plain a:hover b { color: var(--accent-deep); }


/* ═══════════ outcomes band ═══════════ */
.oc { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 32px); }
@media (max-width: 940px) { .oc { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; } }
.oc-item {
  position: relative; padding: 28px 26px 26px; border-radius: 16px;
  background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.13);
}
.oc-item b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 3.6vw, 2.9rem); line-height: 1; letter-spacing: -0.03em; color: var(--gold-soft);
}
.oc-item h3 { font-size: 1.12rem; font-weight: 700; color: #fff; margin-top: 16px; letter-spacing: -0.01em; }
[dir="rtl"] .oc-item h3 { letter-spacing: 0; }
.oc-item p { color: #A9BCCF; font-size: 0.95rem; margin-top: 8px; line-height: 1.55; }
.oc-note {
  margin-top: clamp(26px, 3vw, 38px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.86rem; color: #8DA1B6; text-align: center;
}


/* ═══════════ pricing v3 — price-led plans ═══════════ */
.plans { display: grid; grid-template-columns: 1fr 1fr 0.82fr; gap: clamp(18px, 2.2vw, 26px); align-items: stretch; }
@media (max-width: 1080px) { .plans { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; } }

.plan {
  position: relative; display: flex; flex-direction: column; padding: 32px 28px 28px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--alt-bg);
}
.plan.feature { border-color: var(--accent); box-shadow: 0 32px 66px -38px color-mix(in srgb, var(--accent) 62%, black); }
.plan .who { font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-3); }
[dir="rtl"] .plan .who { letter-spacing: 0; }
.plan h3 { font-size: 1.62rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 10px; }
[dir="rtl"] .plan h3 { letter-spacing: 0; }
.plan .amt { display: flex; align-items: baseline; gap: 8px; margin-top: 20px; }
.plan .amt b { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 4.4vw, 3.4rem);
  line-height: 1; letter-spacing: -0.035em; color: var(--ink); }
.plan .amt span { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--ink-3); }
.plan .sub { font-size: 0.88rem; color: var(--ink-3); margin-top: 10px; }

.meter { display: grid; gap: 1px; margin-top: 24px; border-radius: 14px; overflow: hidden;
  background: color-mix(in srgb, var(--accent) 26%, var(--line));
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); }
.meter div { background: color-mix(in srgb, var(--accent) 8%, var(--paper)); padding: 16px 18px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.meter b { font-family: var(--font-display); font-weight: 800; font-size: 1.62rem; line-height: 1;
  letter-spacing: -0.03em; color: var(--accent-deep); }
.meter span { font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; color: var(--ink-3); text-align: end; }
.meter small { display: block; font-weight: 500; font-size: 0.74rem; color: var(--ink-3); margin-top: 3px; }
.plan .pcta { margin-top: auto; padding-top: 26px; }
.plan .fine { font-size: 0.8rem; color: var(--ink-3); margin-top: 14px; line-height: 1.5; }

.plan.custom { background: linear-gradient(158deg, var(--navy), var(--navy-900)); border-color: var(--navy); }
.plan.custom .who { color: var(--gold-soft); }
.plan.custom h3, .plan.custom .amt b { color: #fff; }
.plan.custom .sub, .plan.custom .fine { color: #A9BCCF; }
.plan.custom ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }
.plan.custom li { display: flex; gap: 10px; font-size: 0.92rem; color: #C6D4E2; line-height: 1.5; }
.plan.custom li svg { flex: none; margin-top: 3px; color: var(--gold-soft); }

.incl { margin-top: clamp(30px, 3.4vw, 44px); padding: 28px 30px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--alt-bg); }
.incl h4 { font-family: var(--font-display); font-weight: 700; font-size: 0.74rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-3); }
[dir="rtl"] .incl h4 { letter-spacing: 0; }
.incl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px 26px; margin-top: 18px; }
@media (max-width: 860px) { .incl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .incl-grid { grid-template-columns: 1fr; } }
.incl-grid span { display: flex; gap: 9px; font-size: 0.93rem; color: var(--ink-2); line-height: 1.45; }
.incl-grid svg { flex: none; margin-top: 3px; color: var(--accent); }


/* pricing v3.1 — larger, more legible prices ----------------------------- */
.plan .amt { margin-top: 22px; align-items: baseline; flex-wrap: wrap; }
.plan .amt b {
  font-size: clamp(3.1rem, 5.4vw, 4.15rem);
  letter-spacing: -0.022em; color: var(--navy-900);
}
.plan .amt span { font-size: 1rem; font-weight: 600; color: var(--ink-3); }
.plan.custom .amt b { font-size: clamp(2.3rem, 3.6vw, 2.85rem); color: #fff; }

.meter b { font-size: 2.05rem; letter-spacing: -0.024em; }
.meter span { font-size: 0.86rem; }
.meter small { font-size: 0.76rem; margin-top: 4px; }

.plan h3 { font-size: 1.72rem; }


/* pricing v3.2 — bigger figures across the board ------------------------- */
.plan .amt b { font-size: clamp(3.6rem, 6.2vw, 4.9rem); }
.meter div { padding: 18px 20px; }
.meter b { font-size: clamp(2.5rem, 3.4vw, 3rem); letter-spacing: -0.03em; }
.meter span { font-size: 0.88rem; }


/* pricing v3.3 — figures set in rem so they do not shrink with the column - */
.plan .amt b { font-size: 5.6rem !important; line-height: .92; letter-spacing: -0.03em; }
.plan.custom .amt b { font-size: 3.4rem !important; }
.plan .amt span { font-size: 1.05rem; }
.meter div { padding: 20px; flex-direction: column; align-items: flex-start; gap: 6px; }
.meter b { font-size: 4rem !important; line-height: .9; letter-spacing: -0.035em; }
.meter span { font-size: 0.9rem; text-align: start; }
.meter small { font-size: 0.78rem; }
@media (max-width: 1180px) {
  .plan .amt b { font-size: 4.4rem !important; }
  .meter b { font-size: 3.2rem !important; }
}


/* pricing v3.4 — deterministic px sizes for the key figures -------------- */
.plan .amt b { font-size: 60px !important; }
.plan.custom .amt b { font-size: 38px !important; }
.meter b { font-size: 40px !important; }
@media (max-width: 1180px) {
  .plan .amt b { font-size: 52px !important; }
  .meter b { font-size: 36px !important; }
}


/* pricing v3.5 — figures dominate the card ------------------------------- */
.plan .amt b { font-size: 88px !important; line-height: .88; }
.plan .amt span { font-size: 1.15rem !important; }
.plan.custom .amt b { font-size: 48px !important; }
.meter b { font-size: 64px !important; line-height: .88; }

.meter small { font-size: 0.84rem !important; font-weight: 500; }
.meter div { padding: 22px 20px; gap: 8px; }
@media (max-width: 1180px) {
  .plan .amt b { font-size: 72px !important; }
  .meter b { font-size: 52px !important; }
}


/* pricing v3.6 — plan name, price and meter figures all at one size ------- */
.plan h3,
.plan .amt b,
.plan.custom .amt b,
.meter b {
  font-size: 34px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
.plan .amt { margin-top: 16px; }
.plan .amt span { font-size: 1rem !important; }
.meter b { color: var(--accent-deep) !important; }
.meter div { padding: 18px 20px; gap: 6px; }

.meter small { font-size: 0.82rem !important; font-weight: 500; }
@media (max-width: 1180px) {
  .plan h3, .plan .amt b, .plan.custom .amt b, .meter b { font-size: 30px !important; }
}


/* pricing v3.7 — "/ month" matches the plan name too --------------------- */
.plan .amt { align-items: baseline; gap: 10px; }
.plan .amt b,
.plan .amt span {
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: var(--navy-900) !important;
}
.plan.custom .amt b, .plan.custom .amt span { color: #fff !important; }
@media (max-width: 1180px) {
  .plan .amt b, .plan .amt span { font-size: 30px !important; }
}


/* pricing v3.8 — meter figures match the plan name / price size ---------- */
.meter b {
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}
@media (max-width: 1180px) { .meter b { font-size: 30px !important; } }


/* ═══════════════ RUSHD TOUR ═══════════════ */

/* pillar block ----------------------------------------------------------- */
.tour-block { border-top: 1px solid var(--line); }
.tour-block:first-of-type { border-top: 0; }
.tour-grid { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: clamp(34px, 4.6vw, 76px); align-items: center; }
.tour-grid.flip .tour-art { order: -1; }
@media (max-width: 980px) { .tour-grid { grid-template-columns: 1fr; } .tour-grid.flip .tour-art { order: 0; } }
.tour-copy .tnum {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 12px; background: linear-gradient(158deg, var(--navy), var(--navy-900));
  color: var(--gold-soft); font-family: var(--font-display); font-weight: 800; font-size: 0.86rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 22px -14px rgba(16,24,44,.5);
}
.tour-copy h2 { font-size: clamp(1.9rem, 3.3vw, 2.7rem); letter-spacing: -0.022em; line-height: 1.08; margin-top: 20px; }
[dir="rtl"] .tour-copy h2 { letter-spacing: 0; line-height: 1.32; }
.tour-copy h2 em { font-style: italic; font-weight: 500; color: var(--accent-deep); }
.tour-copy p.lead { font-size: 1.08rem; color: var(--ink-2); margin-top: 16px; }
.tour-copy ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }
.tour-copy li { display: flex; gap: 10px; font-size: 0.97rem; color: var(--ink-2); line-height: 1.5; }
.tour-copy li svg { flex: none; margin-top: 3px; color: var(--accent); }

.tour-art {
  position: relative; border-radius: 20px; padding: clamp(26px, 3vw, 40px); overflow: hidden;
  background: linear-gradient(158deg, var(--navy) 0%, var(--navy-900) 100%);
  box-shadow: 0 40px 80px -44px rgba(14,34,56,0.5);
}
.tour-art::before {
  content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  top: -180px; inset-inline-start: -120px;
  background: radial-gradient(circle, rgba(201,168,106,0.22), transparent 68%); pointer-events: none;
}
.tour-art.light { background: var(--alt-bg); border: 1px solid var(--line); box-shadow: 0 32px 66px -44px rgba(14,34,56,0.3); }
.tour-art.light::before { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 68%); }
.art-lbl {
  position: relative; font-family: var(--font-display); font-weight: 700; font-size: 0.66rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 24px; display: block;
}
[dir="rtl"] .art-lbl { letter-spacing: 0; }
.tour-art.light .art-lbl { color: var(--accent-deep); }

/* 1 — journey rail ------------------------------------------------------- */
.jrail { position: relative; display: grid; gap: 0; }
.jstep { position: relative; display: flex; gap: 16px; padding: 0 0 22px; }
.jstep:last-child { padding-bottom: 0; }
.jstep .jdot {
  position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: rgba(201,168,106,0.16); color: var(--gold-soft);
  border: 1px solid rgba(201,168,106,0.4);
}
.jstep::after {
  content: ""; position: absolute; inset-inline-start: 17px; top: 34px; bottom: 0; width: 1px;
  background: linear-gradient(180deg, rgba(201,168,106,0.5), rgba(201,168,106,0.12));
}
.jstep:last-child::after { display: none; }
.jstep b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: #fff; }
.jstep span { display: block; font-size: 0.88rem; color: #A9BCCF; margin-top: 4px; line-height: 1.5; }
.jstep .jrole {
  display: inline-block; margin-top: 8px; font-family: var(--font-display); font-weight: 700;
  font-size: 0.62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft);
  padding: 3px 9px; border-radius: 999px; background: rgba(201,168,106,0.14);
}
[dir="rtl"] .jstep .jrole { letter-spacing: 0; }

/* 2 — report mock -------------------------------------------------------- */
.rep { position: relative; display: grid; gap: 14px; }
.rep-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rep-kpi { padding: 16px 16px 14px; border-radius: 13px; background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.12); }
.rep-kpi b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.72rem; line-height: 1; letter-spacing: -0.03em; color: var(--gold-soft); }
.rep-kpi span { display: block; font-size: 0.74rem; color: #9FB2C6; margin-top: 7px; line-height: 1.35; }
.rep-panel { padding: 20px; border-radius: 14px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.12); }
.rep-panel .ph { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.rep-panel .ph b { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: #fff; }
.rep-panel .ph span { font-size: 0.72rem; color: #8DA1B6; }
.rep-bars { display: grid; gap: 11px; margin-top: 16px; }
.rep-bar span { display: flex; justify-content: space-between; font-size: 0.78rem; color: #A9BCCF; margin-bottom: 6px; }
.rep-bar span i { font-style: normal; color: var(--gold-soft); font-weight: 700; }
.rep-track { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; }
.rep-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #B98A33, #D8B463); }

/* 3 — translation diagram ------------------------------------------------ */
.trans { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 620px) { .trans { grid-template-columns: 1fr; } }
.tside { padding: 20px 18px; border-radius: 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13); }
.tside .tl { font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); }
[dir="rtl"] .tside .tl { letter-spacing: 0; }
.tside p { font-size: 0.95rem; color: #E4EAF1; margin-top: 12px; line-height: 1.55; }
.tside.ar p { font-family: 'IBM Plex Sans Arabic', var(--font-display), sans-serif; direction: rtl; text-align: right; }
.tmid { display: grid; place-items: center; gap: 8px; align-content: center; }
.tmid .tcirc {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 0 0 8px rgba(201,168,106,0.14);
}
.tmid span { font-family: var(--font-display); font-weight: 700; font-size: 0.62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); text-align: center; }
[dir="rtl"] .tmid span { letter-spacing: 0; }
.trans-foot { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.trans-foot i {
  font-style: normal; font-family: var(--font-display); font-weight: 600; font-size: 0.76rem;
  color: #C6D4E2; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
}

/* 4 — bot flow ----------------------------------------------------------- */
.bot { position: relative; display: grid; gap: 18px; }
.bot-tier { display: grid; gap: 9px; }
.bot-tier > b {
  font-family: var(--font-display); font-weight: 700; font-size: 0.64rem; letter-spacing: .16em;
  text-transform: uppercase; color: #8DA1B6;
}
[dir="rtl"] .bot-tier > b { letter-spacing: 0; }
.bot-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.bot-chips span {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.84rem; color: #E4EAF1;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.13);
}
.bot-chips span svg { color: var(--gold-soft); flex: none; }
.bot-core {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 15px;
  background: linear-gradient(158deg, rgba(201,168,106,0.2), rgba(201,168,106,0.08));
  border: 1px solid rgba(201,168,106,0.45);
}
.bot-core .bic { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.bot-core b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: #fff; }
.bot-core span { display: block; font-size: 0.85rem; color: #C6D4E2; margin-top: 3px; }
.bot-arrow { display: grid; place-items: center; color: rgba(201,168,106,0.6); }
.bot-guard {
  display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.2);
  font-size: 0.85rem; color: #A9BCCF; line-height: 1.5;
}
.bot-guard svg { flex: none; margin-top: 2px; color: var(--gold-soft); }

/* accordion — full feature list ------------------------------------------ */
.cat { border-top: 1px solid var(--line); }
.cat:last-of-type { border-bottom: 1px solid var(--line); }
.cat-q {
  display: flex; align-items: center; gap: 16px; width: 100%; background: none; border: 0; cursor: pointer;
  padding: 22px 4px; text-align: start;
}
.cat-q .cnum { font-family: var(--font-display); font-weight: 800; font-size: 0.78rem; letter-spacing: .12em; color: var(--accent-deep); flex: none; width: 28px; }
[dir="rtl"] .cat-q .cnum { letter-spacing: 0; }
.cat-q .ct { flex: 1; min-width: 0; }
.cat-q b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.14rem; color: var(--ink); }
.cat-q i { font-style: normal; display: block; font-size: 0.88rem; color: var(--ink-3); margin-top: 4px; }
.cat-q .ccount { font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; color: var(--ink-3); flex: none; }
.cat-q .cchev { flex: none; color: var(--accent-deep); transition: transform .2s ease; }
.cat.open .cat-q .cchev { transform: rotate(180deg); }
.cat-body { padding: 0 4px 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; }
@media (max-width: 780px) { .cat-body { grid-template-columns: 1fr; } }
.feat {
  padding: 16px 18px; border-radius: 13px; background: var(--alt-bg); border: 1px solid var(--line);
}
.feat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--ink); }
.feat p { font-size: 0.88rem; color: var(--ink-2); margin-top: 6px; line-height: 1.5; }
.feat .rl {
  display: inline-block; margin-top: 10px; font-family: var(--font-display); font-weight: 700;
  font-size: 0.6rem; letter-spacing: .14em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-deep);
}
[dir="rtl"] .feat .rl { letter-spacing: 0; }
.feat.soon { border-style: dashed; }
.feat.soon .rl { background: color-mix(in srgb, var(--ink-3) 12%, transparent); color: var(--ink-3); }
.acc-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.acc-tools button {
  font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; padding: 8px 16px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--alt-bg); color: var(--ink-2); cursor: pointer;
  transition: all .15s;
}
.acc-tools button:hover { border-color: var(--accent); color: var(--accent-deep); }


/* Arabic-bearing labels: correct face, no tracking, regardless of page dir - */
.tside.ar .tl,
.tside.ar p,
[lang="ar"] {
  font-family: 'IBM Plex Sans Arabic', var(--font-display), sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.tside.ar .tl { direction: rtl; text-align: right; display: block; }


/* bigger brand mark in the nav and footer -------------------------------- */
.nav-inner { height: 104px; }
.nav-logo img { height: 74px !important; }
@media (max-width: 1060px) { .nav-logo img { height: 62px !important; } }
@media (max-width: 620px) { .nav-inner { height: 88px; } .nav-logo img { height: 56px !important; } }
.footer-brand img { height: 92px !important; width: auto; }
.nav-drawer-top img { height: 60px !important; }


/* required-field marker --------------------------------------------------- */
.field label .req { color: #C0392B; font-weight: 700; margin-inline-start: 3px; }
.contact-email {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 30px;
  padding: 16px 22px; border-radius: 14px; background: var(--alt-bg); border: 1px solid var(--line);
}
.contact-email .cic { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-deep); }
.contact-email a {
  font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; color: var(--ink);
}
.contact-email a:hover { color: var(--accent-deep); }


/* icon tiles: centre the glyph, ignore surrounding whitespace text nodes --- */
.vs-mark, .cic, .aic, .pic, .tp-ic, .jdot, .mic, .bic, .tcirc, .fic, .ic,
.contact-email .cic, .pillar .pic, .card .cic, .aud .aic, .form-sent .ok {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0;
  line-height: 0;
}
.vs-mark > svg, .cic > svg, .aic > svg, .pic > svg, .tp-ic > svg, .jdot > svg,
.mic > svg, .bic > svg, .tcirc > svg, .fic > svg, .ic > svg, .form-sent .ok > svg {
  display: block;
  flex: none;
}


/* fixed site header ------------------------------------------------------- */
.site-head { position: fixed; top: 0; inset-inline: 0; z-index: 60; }
.site-head .nav { position: static !important; }
.site-head-spacer { display: block; width: 100%; }


/* Rushd Tour — quiet emphasis in the nav --------------------------------- */
.nav-links a.tour-link { position: relative; }
.nav-links a.tour-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: scaleX(0.32); transform-origin: center;
  animation: tourUnderline 3.6s ease-in-out infinite;
}
.nav-links a.tour-link:hover::after,
.nav-links a.tour-link.on::after { animation: none; transform: scaleX(1); opacity: 1; }
@keyframes tourUnderline {
  0%, 100% { transform: scaleX(0.28); opacity: .55; }
  45%      { transform: scaleX(1);    opacity: 1; }
  70%      { transform: scaleX(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links a.tour-link::after { animation: none; transform: scaleX(1); opacity: .8; }
}


/* Rushd Tour — clearly noticeable pill treatment -------------------------- */
.nav-links a.tour-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 999px;
  color: var(--accent-deep) !important; font-weight: 600;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  overflow: hidden;
  animation: tourPulse 2.8s ease-in-out infinite;
}
.nav-links a.tour-link::after { display: none; }
.nav-links a.tour-link::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  transform: skewX(-18deg);
  animation: tourSheen 2.8s ease-in-out infinite;
  pointer-events: none;
}
.nav-links a.tour-link .tdot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none;
  animation: tourDot 2.8s ease-in-out infinite;
}
.nav-links a.tour-link:hover {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink) !important;
  animation: none;
}
.nav-links a.tour-link:hover .tdot { background: var(--accent-ink); animation: none; }
.nav-links a.tour-link.on { background: var(--navy); border-color: var(--navy); color: #fff !important; animation: none; }
.nav-links a.tour-link.on .tdot { background: var(--gold-soft); animation: none; }

@keyframes tourPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 42%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); }
}
@keyframes tourSheen {
  0%       { inset-inline-start: -50%; }
  55%,100% { inset-inline-start: 130%; }
}
@keyframes tourDot {
  0%, 100% { transform: scale(1); opacity: .75; }
  50%      { transform: scale(1.45); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links a.tour-link, .nav-links a.tour-link::before, .nav-links a.tour-link .tdot { animation: none; }
  .nav-links a.tour-link::before { display: none; }
}


/* Rushd Tour — no dot, one clean sheen pass with a rest between ---------- */
.nav-links a.tour-link .tdot { display: none !important; }
.nav-links a.tour-link { gap: 0; }
.nav-links a.tour-link::before {
  width: 38%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0) 15%,
    rgba(255,255,255,.78) 50%,
    rgba(255,255,255,0) 85%,
    transparent 100%);
  animation: tourSheenClean 4.2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes tourSheenClean {
  0%       { inset-inline-start: -45%; opacity: 0; }
  8%       { opacity: 1; }
  38%      { inset-inline-start: 118%; opacity: 1; }
  44%      { inset-inline-start: 118%; opacity: 0; }
  100%     { inset-inline-start: -45%; opacity: 0; }
}


/* Rushd Tour — plain link with a travelling gold underline (no box) ------- */
.nav-links a.tour-link {
  display: inline-flex; align-items: center; gap: 0;
  padding: 8px 2px; border-radius: 0;
  background: none !important; border: 0 !important;
  color: var(--ink-2) !important; font-weight: 600;
  overflow: visible; animation: none !important;
  box-shadow: none !important;
}
.nav-links a.tour-link::after {
  display: block !important; content: ""; position: absolute;
  left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  transform: none; opacity: 1; animation: none;
}
.nav-links a.tour-link::before {
  content: ""; position: absolute; top: auto; bottom: 2px; height: 2px; width: 34%;
  border-radius: 2px; background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent);
  transform: none; opacity: 1;
  animation: tourTravel 2.6s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes tourTravel {
  0%       { inset-inline-start: 0%;  width: 12%; opacity: .4; }
  20%      { opacity: 1; }
  50%      { inset-inline-start: 33%; width: 34%; opacity: 1; }
  80%      { opacity: 1; }
  100%     { inset-inline-start: 100%; width: 12%; opacity: .4; }
}
.nav-links a.tour-link:hover { color: var(--accent-deep) !important; }
.nav-links a.tour-link:hover::before { animation: none; inset-inline-start: 0; width: 100%; }
.nav-links a.tour-link.on { color: var(--accent-deep) !important; }
.nav-links a.tour-link.on::before { animation: none; inset-inline-start: 0; width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .nav-links a.tour-link::before { animation: none; inset-inline-start: 0; width: 100%; }
}


/* Rushd Tour — a compass glyph drifting behind the word ------------------- */
.nav-links a.tour-link { position: relative; isolation: isolate; }
.nav-links a.tour-link .tglyph {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 100%; height: 100%; z-index: -1;
  overflow: hidden; pointer-events: none;
  display: block;
}
.nav-links a.tour-link .tglyph svg {
  position: absolute; top: 50%; width: 22px; height: 22px;
  color: color-mix(in srgb, var(--accent) 55%, transparent);
  animation: tourDrift 5.4s linear infinite;
}
@keyframes tourDrift {
  0%   { inset-inline-start: -26px; transform: translateY(-50%) rotate(-25deg); opacity: 0; }
  12%  { opacity: .95; }
  50%  { transform: translateY(-50%) rotate(0deg); }
  86%  { opacity: .95; }
  100% { inset-inline-start: 100%; transform: translateY(-50%) rotate(25deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links a.tour-link .tglyph { display: none; }
}

/* compass glyph retired — the travelling underline is the emphasis */
.nav-links a.tour-link .tglyph { display: none !important; }


/* ═══════════ pain points ═══════════ */
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 26px); }
@media (max-width: 1000px) { .pains { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .pains { grid-template-columns: 1fr; } }
.pain {
  position: relative; padding: 26px 24px 24px; border-radius: 16px;
  background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.13);
}
.pain .pq {
  font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(216,180,99,.78);
}
[dir="rtl"] .pain .pq { letter-spacing: 0; }
.pain h3 { font-size: 1.1rem; font-weight: 700; color: #fff; margin-top: 12px; line-height: 1.3; }
.pain p { color: #A9BCCF; font-size: 0.93rem; margin-top: 9px; line-height: 1.55; }
.pain .fix {
  display: flex; gap: 9px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.89rem; color: #E4EAF1; line-height: 1.5;
}
.pain .fix svg { flex: none; margin-top: 3px; color: var(--gold-soft); }

/* ═══════════ ROI ═══════════ */
.roi { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.6vw, 30px); align-items: stretch; }
@media (max-width: 900px) { .roi { grid-template-columns: 1fr; } }
.roi-col {
  border-radius: 18px; border: 1px solid var(--line); background: var(--alt-bg);
  padding: 28px 28px 26px; display: flex; flex-direction: column;
}
.roi-col.after { border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  box-shadow: 0 32px 66px -40px rgba(14,34,56,0.32); }
.roi-col h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
[dir="rtl"] .roi-col h3 { letter-spacing: 0; }
.roi-col.after h3 { color: var(--accent-deep); }
.roi-lines { display: grid; gap: 0; margin-top: 18px; }
.roi-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-top: 1px solid var(--line-soft);
}
.roi-line:first-child { border-top: 0; }
.roi-line span { font-size: 0.95rem; color: var(--ink-2); }
.roi-line b { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); flex: none; white-space: nowrap; }
.roi-col.after .roi-line b { color: var(--accent-deep); }
.roi-total {
  margin-top: auto; padding-top: 20px; border-top: 2px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.roi-total span { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--ink-3); }
.roi-total b { font-family: var(--font-display); font-weight: 800; font-size: 2rem; letter-spacing: -0.03em; color: var(--ink); }
.roi-col.after .roi-total b { color: var(--accent-deep); }
.roi-gain {
  margin-top: clamp(24px, 3vw, 34px); padding: 24px 28px; border-radius: 16px;
  background: linear-gradient(158deg, var(--navy), var(--navy-900));
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.roi-gain b { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: -0.03em; color: var(--gold-soft); line-height: 1; }
.roi-gain p { color: #C6D4E2; font-size: 0.95rem; margin: 0; max-width: 46em; }


/* ═══════════ pricing hero — cost swap strip ═══════════ */
.swapstrip {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(18px, 2.4vw, 34px);
  align-items: stretch; margin-top: clamp(30px, 3.6vw, 46px);
}
@media (max-width: 880px) { .swapstrip { grid-template-columns: 1fr; } }
.ss-side {
  padding: 24px 26px; border-radius: 16px; border: 1px solid var(--line); background: var(--alt-bg);
  display: flex; flex-direction: column;
}
.ss-side.now { border-style: dashed; }
.ss-side.rushd {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--alt-bg));
  box-shadow: 0 28px 58px -38px rgba(14,34,56,0.3);
}
.ss-lbl {
  font-family: var(--font-display); font-weight: 700; font-size: 0.68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
[dir="rtl"] .ss-lbl { letter-spacing: 0; }
.ss-side.rushd .ss-lbl { color: var(--accent-deep); }
.ss-tools { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.ss-tools span {
  font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; color: var(--ink-3);
  padding: 5px 11px; border-radius: 8px; border: 1px dashed var(--line); background: var(--paper);
}
.ss-side.rushd .ss-tools span {
  border-style: solid; border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  color: var(--ink-2); background: var(--paper);
}
.ss-fig { margin-top: auto; padding-top: 18px; }
.ss-fig b {
  display: block; font-family: var(--font-display); font-weight: 800; font-size: 2.1rem;
  line-height: 1; letter-spacing: -0.03em; color: var(--ink);
}
.ss-side.rushd .ss-fig b { color: var(--accent-deep); }
.ss-fig span { display: block; font-size: 0.86rem; color: var(--ink-3); margin-top: 8px; line-height: 1.45; }
.ss-arrow {
  align-self: center; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); flex: none;
}
[dir="rtl"] .ss-arrow svg { transform: scaleX(-1); }
@media (max-width: 880px) { .ss-arrow { justify-self: center; transform: rotate(90deg); } }
.ss-gain {
  margin-top: clamp(18px, 2.2vw, 26px); padding: 20px 26px; border-radius: 14px;
  background: linear-gradient(158deg, var(--navy), var(--navy-900));
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.ss-gain b { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  letter-spacing: -0.03em; color: var(--gold-soft); line-height: 1; flex: none; }
.ss-gain p { color: #C6D4E2; font-size: 0.94rem; margin: 0; }


/* ═══════════ pricing hero — one honest saving line ═══════════ */
.saveline {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); flex-wrap: wrap;
  padding: clamp(24px, 3vw, 34px) clamp(26px, 3.4vw, 40px); border-radius: 18px;
  background: linear-gradient(158deg, var(--navy), var(--navy-900));
  box-shadow: 0 34px 70px -42px rgba(14,34,56,0.44);
}
.saveline .amt { flex: none; }
.saveline .amt b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 4.6vw, 3.5rem); line-height: 1; letter-spacing: -0.035em; color: var(--gold-soft);
}
.saveline .amt span {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(216,180,99,.72); margin-top: 10px;
}
[dir="rtl"] .saveline .amt span { letter-spacing: 0; }
.saveline .rule { width: 1px; align-self: stretch; background: rgba(255,255,255,0.16); flex: none; }
@media (max-width: 720px) { .saveline .rule { display: none; } }
.saveline .txt { flex: 1; min-width: 240px; }
.saveline .txt p { color: #D6E0EA; font-size: 1.04rem; margin: 0; line-height: 1.6; }
.saveline .txt small { display: block; color: #8DA1B6; font-size: 0.84rem; margin-top: 10px; }
.killed { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.killed span {
  font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; color: rgba(214,224,234,.62);
  text-decoration: line-through; text-decoration-color: rgba(201,168,106,.7);
  padding: 5px 11px; border-radius: 8px; background: rgba(255,255,255,0.06);
}


/* ═══════════ runtime text wrappers must never take label styling ═══════════
   The renderer wraps every interpolated value in <span class="sc-interp">.
   Any rule written for a sibling label span (.meter span, .stat span, …) was
   also matching that wrapper and shrinking the figure it sits inside. */
.sc-interp {
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  color: inherit !important;
  opacity: inherit !important;
  margin: 0 !important;
  display: inline !important;
}

/* label rules scoped to real children, belt-and-braces */
.saveline .amt > span { font-size: 0.72rem; }
.meter div > span { font-size: 0.95rem; }
.meter div > small { font-size: 0.82rem; }

/* AA contrast for the small uppercase label on navy */
.saveline .amt > span { color: rgba(216,180,99,.95); }


/* the saving figure must never read as a price — label sits above it ------ */
.saveline .amt > span.pre {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.74rem;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(216,180,99,.95); margin: 0 0 12px;
}
[dir="rtl"] .saveline .amt > span.pre { letter-spacing: 0; }
.saveline .amt b { margin: 0; }


/* ═══════════ text wrapper, high-specificity guard ═══════════
   Legacy label rules are written as ".parent span { … !important }", which is
   (0,1,1) and outranks a bare ".sc-interp". Match the wrapper through its
   figure element so the figure's own size always wins. */
.meter b .sc-interp, .meter b > span,
.saveline .amt b .sc-interp, .saveline .amt b > span,
.plan .amt b .sc-interp, .plan .amt b > span,
.stat b .sc-interp, .stat b > span,
.oc-item b .sc-interp, .oc-item b > span,
.rep-kpi b .sc-interp, .rep-kpi b > span,
.roi-line b .sc-interp, .roi-line b > span,
.jstep b .sc-interp, .jstep b > span,
.pain h3 .sc-interp, .pain h3 > span,
.tier .price .sc-interp,
.feat b .sc-interp, .feat b > span,
.privacy-row b .sc-interp {
  font: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  color: inherit !important;
  opacity: 1 !important;
}

/* labels, restated with the weight the legacy rules carried */
.meter div > span { font-size: 0.95rem !important; font-weight: 700; color: var(--ink-3); }
.meter div > small { font-size: 0.82rem !important; font-weight: 500; color: var(--ink-3); }


/* saving band — divider belongs to the column, so it cannot orphan -------- */
.saveline {
  display: grid !important; grid-template-columns: auto 1fr;
  align-items: center; gap: clamp(22px, 3vw, 40px);
}
.saveline .rule { display: none !important; }
.saveline .txt {
  min-width: 0;
  border-inline-start: 1px solid rgba(255,255,255,0.16);
  padding-inline-start: clamp(22px, 3vw, 40px);
}
@media (max-width: 880px) {
  .saveline { grid-template-columns: 1fr; }
  .saveline .txt { border-inline-start: 0; padding-inline-start: 0; }
}


/* saving band — cap the figure track so the copy keeps its width ---------- */
.saveline { grid-template-columns: minmax(0, 260px) 1fr !important; }

/* fixed header — reserve the height in CSS, before any JS measurement ---- */
.site-head-spacer { min-height: 145px; }
@media (max-width: 620px) { .site-head-spacer { min-height: 129px; } }


/* ═══════════ text wrapper must never take BOX styling either ═══════════
   Chip rules written as ".parent span { background; border; padding }" were
   also matching the runtime wrapper inside each chip, drawing a pill inside
   a pill. Reset every box property on the wrapper. */
.sc-interp {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: inherit !important;
  text-align: inherit !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  place-items: initial !important;
}

/* chip rules restated as direct children, so the wrapper cannot match */
.killed > span { text-decoration: line-through; text-decoration-color: rgba(201,168,106,.7); }


/* the "without Rushd" band: chips are what you pay for, not struck out ---- */
.saveline .amt > span.pre { color: rgba(216,180,99,.95); }
.killed > span { text-decoration: none; }
.saveline .killed > span { color: rgba(214,224,234,.78); }


/* "Without Rushd" band — sits close under the hero, label reads properly -- */
.phero:has(+ section .saveline) { padding-block-end: 0; }
.saveline-sect { padding-block: clamp(18px, 2vw, 26px) 0 !important; }
.saveline-sect .wrap > .saveline { margin-top: 0; }

.saveline .amt > span.pre {
  font-size: 1.05rem !important;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--gold-soft) !important;
  margin-bottom: 10px;
}
[dir="rtl"] .saveline .amt > span.pre { letter-spacing: 0; }
.saveline { padding-block: clamp(22px, 2.6vw, 30px); }


/* the hero's own bottom padding cannot be reached from here (separate mount),
   so lift the band instead — same cream ground, so the join is invisible */
.saveline-sect { padding-block-start: 0 !important; margin-top: -38px; }

.saveline-sect { padding-block-end: 16px !important; }


/* swapped: "Without Rushd" is the heading, the figure reads as a sentence -- */
.saveline .amt b { text-transform: none; letter-spacing: -0.025em; }
.saveline .amt > span.pre {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 1.04rem !important;
  font-weight: 700;
  color: var(--gold-soft) !important;
  margin: 12px 0 0 !important;
}


/* itemised spend, priced line by line ------------------------------------ */
.phero p:empty { display: none; }
.saveline .amt b { line-height: 1.05; }
.spend-out {
  display: flex; align-items: baseline; gap: 10px; margin-top: 14px;
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
}
.spend-out .minus { font-size: 1.7rem; color: rgba(216,180,99,.6); line-height: 1; }
.spend-out .fig { font-size: 1.95rem; color: var(--gold-soft); line-height: 1; }
.spend-out .per { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0; color: #8DA1B6; }
.spendlist { display: grid; gap: 0; }
.spendlist > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 11px 0; border-top: 1px solid rgba(255,255,255,0.12);
}
.spendlist > div:first-child { border-top: 0; }
.spendlist > div > span { font-size: 0.97rem; color: #D6E0EA; }
.spendlist > div > b {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--gold-soft);
  flex: none; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.spendlist > div.admin { border-top-width: 2px; border-top-color: rgba(255,255,255,0.22); margin-top: 6px; }
.spendlist > div.admin > span { color: #fff; font-weight: 600; }

.saveline .amt .per {
  display: block; margin-top: 10px; font-family: var(--font-display); font-weight: 600;
  font-size: 0.92rem; color: #8DA1B6; line-height: 1.4;
}
.saveline { grid-template-columns: minmax(0, 300px) 1fr !important; align-items: start !important; }
.saveline .txt { padding-block: 4px; }


/* the spend stated as one big sentence ----------------------------------- */
.saveline .amt .spend-say {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.25; letter-spacing: -0.02em; color: #fff;
}
[dir="rtl"] .saveline .amt .spend-say { letter-spacing: 0; line-height: 1.5; }
.saveline .amt .spend-say em {
  font-style: normal; display: block; font-weight: 800;
  font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -0.035em;
  color: var(--gold-soft); margin: 8px 0 6px;
}
[dir="rtl"] .saveline .amt .spend-say em { letter-spacing: 0; }
.saveline .amt .spend-say em .sc-interp { font: inherit !important; color: inherit !important; }
.saveline { grid-template-columns: minmax(0, 330px) 1fr !important; }


/* founding-member strip on the pricing page ------------------------------- */
.fstrip {
  margin-block-end: 26px; padding: 30px 34px; border-radius: 20px;
  background: linear-gradient(158deg, rgba(201,154,63,0.13), rgba(201,154,63,0.05));
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
}
.fstrip-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 18px; }
.fstrip-pill {
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep);
  padding: 8px 15px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.fstrip-top b { font-family: var(--font-display); font-weight: 700; font-size: 1.28rem; color: var(--ink); letter-spacing: -0.01em; }
.fstrip-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 26px; margin-block-start: 22px; }
.fstrip-perks > div { display: flex; gap: 11px; align-items: flex-start; }
.fstrip-perks svg { flex: none; margin-block-start: 3px; color: var(--accent-deep); }
.fstrip-perks span { font-size: 0.97rem; line-height: 1.45; color: var(--ink-2); font-weight: 500; }
.fstrip-foot { margin-block-start: 24px; display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }
.fstrip-foot a.fs-link { font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; color: var(--accent-deep); display: inline-flex; align-items: center; gap: 7px; }
.fstrip-foot a.fs-link:hover { color: var(--ink); }
@media (max-width: 620px) { .fstrip { padding: 24px 22px; } }


/* founding strip — contrast and a balanced 2×2 perk grid ------------------ */
.fstrip-pill {
  color: var(--accent-ink) !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
.fstrip-foot a.fs-link { color: var(--navy) !important; }
.fstrip-foot a.fs-link:hover { color: var(--accent-deep) !important; }
.fstrip-perks { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 620px) { .fstrip-perks { grid-template-columns: 1fr !important; } }


/* "Without Rushd" leads at display scale; the sentence sits under it ------ */
.saveline .amt .spend-hd {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.5rem, 4.4vw, 3.5rem); line-height: 1.02;
  letter-spacing: -0.035em; color: #fff; margin-block-end: 14px;
}
[dir="rtl"] .saveline .amt .spend-hd { letter-spacing: 0; line-height: 1.35; }
.saveline .amt .spend-say {
  font-size: clamp(1.05rem, 1.5vw, 1.24rem) !important;
  font-weight: 600 !important; line-height: 1.45 !important;
  letter-spacing: -0.01em !important; color: #D6E0EA !important;
}
.saveline .amt .spend-say em {
  display: inline !important; font-size: inherit !important;
  font-weight: 800 !important; letter-spacing: inherit !important;
  margin: 0 !important; color: var(--gold-soft) !important;
}


/* the spend headline now sits centred against the tool list -------------- */
.saveline { align-items: center !important; }
.saveline .amt { align-self: center; }


/* ═══════════ pricing: the two-card comparison deck ═══════════ */
.vsdeck {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px); align-items: stretch;
}
@media (max-width: 900px) { .vsdeck { grid-template-columns: 1fr; } }

.vscard {
  display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 38px); border-radius: 22px;
}
.vscard.out {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.16);
}
.vscard.in {
  background: linear-gradient(158deg, rgba(201,154,63,0.22), rgba(201,154,63,0.07));
  border: 1px solid color-mix(in srgb, var(--accent) 52%, transparent);
}

.vs-tag {
  align-self: flex-start; font-family: var(--font-display); font-weight: 700;
  font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 8px 15px; border-radius: 999px;
  color: #D6E0EA; background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
}
.vs-tag.gold { color: #22160A; background: var(--gold-soft); border-color: var(--gold-soft); }

.vscard .vs-say {
  margin: 20px 0 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.7rem, 2.7vw, 2.35rem); line-height: 1.1;
  letter-spacing: -0.03em; color: #fff;
}
[dir="rtl"] .vscard .vs-say { letter-spacing: 0; line-height: 1.4; }
.vscard .vs-say em {
  font-style: normal; font-weight: 800; color: var(--gold-soft);
  font-size: inherit; letter-spacing: inherit;
}
.vscard.in .vs-say em { color: #fff; }
.vscard .vs-say .sc-interp { font: inherit !important; color: inherit !important; }

.vscard .spendlist { margin-block-start: 26px; }
.vslist { margin-block-start: 26px; display: grid; gap: 0; }
.vslist > div {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0; border-top: 1px solid rgba(255,255,255,0.16);
}
.vslist > div:first-child { border-top: 0; }
.vslist svg { flex: none; margin-block-start: 2px; color: var(--gold-soft); }
.vslist > div > span { font-size: 0.97rem; line-height: 1.45; color: #EAF1F7; }

.vs-jump {
  margin-block-start: auto; padding-block-start: 28px;
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  color: #fff; text-align: center;
}
.vs-jump svg { animation: vsNudge 2.2s ease-in-out infinite; }
.vs-jump:hover { color: var(--gold-soft); }
@keyframes vsNudge {
  0%, 100% { transform: translateY(0); opacity: .8; }
  50%      { transform: translateY(7px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .vs-jump svg { animation: none; } }

#plans { scroll-margin-block-start: 170px; }


/* the two cards must read as opposites, not siblings --------------------- */
.vscard.out {
  background: rgba(6,16,28,0.42) !important;
  border-color: rgba(255,255,255,0.14) !important;
}
.vscard.out .vs-say { color: #C3D2DF !important; }
.vscard.out .vs-say em { color: #fff !important; }
.vscard.out .spendlist > div > span { color: #9DB0C2; }
.vscard.out .spendlist > div > b { color: #C3D2DF; }
.vscard.out .spendlist > div.admin > span { color: #E4ECF3; }

/* with-Rushd: a paper card on the navy ground — maximum separation */
.vscard.in {
  background: var(--paper) !important;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important;
  box-shadow: 0 40px 80px -44px rgba(0,0,0,0.55);
}
.vscard.in .vs-tag.gold { color: #fff; background: var(--accent-deep); border-color: var(--accent-deep); }
.vscard.in .vs-say { color: var(--ink) !important; }
.vscard.in .vs-say em { color: var(--accent-deep) !important; }
.vscard.in .vslist > div { border-top-color: var(--line); }
.vscard.in .vslist svg { color: var(--accent-deep); }
.vscard.in .vslist > div > span { color: var(--ink-2) !important; font-weight: 500; }
.vscard.in .vslist > div > span b { font-weight: 700; color: var(--ink); }
.vscard.in .vs-jump { color: var(--navy); }
.vscard.in .vs-jump:hover { color: var(--accent-deep); }


/* Without Rushd — this is the card that should stop you ------------------ */
.vscard.out {
  position: relative; overflow: hidden;
  background: rgba(10,22,38,0.62) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  box-shadow: 0 40px 80px -46px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.10);
}
.vscard.out::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px;
  background: linear-gradient(180deg, #E4ECF3, rgba(228,236,243,0.15));
}
.vscard.out .vs-tag {
  color: #0A1626 !important; background: #E4ECF3 !important; border-color: #E4ECF3 !important;
}
.vscard.out .vs-say {
  font-size: clamp(1.85rem, 3vw, 2.6rem) !important;
  color: #EAF1F7 !important;
}
.vscard.out .vs-say em {
  color: #fff !important;
  border-block-end: 3px solid rgba(255,255,255,0.55); padding-block-end: 2px;
}
.vscard.out .spendlist > div > span { color: #B6C6D6; }
.vscard.out .spendlist > div > b {
  color: #fff; text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.45); text-decoration-thickness: 2px;
}
.vscard.out .spendlist > div.admin > b { text-decoration: none; color: #fff; }
.vscard.out .spendlist > div.admin > span { color: #fff; }


/* keep the original card colours; the strikethrough alone does the work --- */
.vscard.out {
  background: rgba(6,16,28,0.42) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: none !important;
}
.vscard.out::before { display: none !important; }
.vscard.out .vs-tag {
  color: #D6E0EA !important; background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.22) !important;
}
.vscard.out .vs-say { color: #C3D2DF !important; }
.vscard.out .vs-say em { color: #fff !important; border-block-end: 0; padding-block-end: 0; }
.vscard.out .spendlist > div > span { color: #9DB0C2; }
.vscard.out .spendlist > div > b {
  color: #C3D2DF;
  text-decoration: line-through;
  text-decoration-color: rgba(195,210,223,0.55); text-decoration-thickness: 2px;
}
.vscard.out .spendlist > div.admin > b { text-decoration: none; }
.vscard.out .spendlist > div.admin > span { color: #E4ECF3; }


/* restore the highlighted card; strike line simply inherits the text ----- */
.vscard.out {
  background: rgba(10,22,38,0.62) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  box-shadow: 0 40px 80px -46px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
.vscard.out::before { display: block !important; }
.vscard.out .vs-tag {
  color: #0A1626 !important; background: #E4ECF3 !important; border-color: #E4ECF3 !important;
}
.vscard.out .vs-say { color: #EAF1F7 !important; }
.vscard.out .vs-say em {
  color: #fff !important;
  border-block-end: 3px solid rgba(255,255,255,0.55) !important; padding-block-end: 2px !important;
}
.vscard.out .spendlist > div > span { color: #B6C6D6; }
.vscard.out .spendlist > div > b {
  color: #fff;
  text-decoration: line-through;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: 2px;
}
.vscard.out .spendlist > div.admin > b { text-decoration: none; color: #fff; }
.vscard.out .spendlist > div.admin > span { color: #fff; }


/* Without Rushd — paper card with a gold border, matching its neighbour -- */
.vscard.out {
  background: var(--paper) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent) !important;
  box-shadow: 0 40px 80px -44px rgba(0,0,0,0.45) !important;
}
.vscard.out::before { display: none !important; }
.vscard.out .vs-tag {
  color: #fff !important; background: var(--navy) !important; border-color: var(--navy) !important;
}
.vscard.out .vs-say { color: var(--ink) !important; }
.vscard.out .vs-say em {
  color: var(--ink) !important;
  border-block-end: 0 !important; padding-block-end: 0 !important;
}
.vscard.out .spendlist > div { border-top-color: var(--line); }
.vscard.out .spendlist > div > span { color: var(--ink-2); }
.vscard.out .spendlist > div > b {
  color: var(--ink-3);
  text-decoration: line-through; text-decoration-color: currentColor !important;
  text-decoration-thickness: 2px;
}
.vscard.out .spendlist > div.admin {
  border-top-color: var(--ink); border-top-width: 2px;
}
.vscard.out .spendlist > div.admin > span { color: var(--ink); font-weight: 700; }
.vscard.out .spendlist > div.admin > b { text-decoration: none; color: var(--ink); }


/* ═══════════ legal documents (privacy, terms) ═══════════ */
.legal-updated {
  margin-block-start: 18px !important;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem !important;
  letter-spacing: 0.04em; color: var(--gold-soft) !important;
}
.legal-wrap {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(34px, 5vw, 74px); align-items: start;
}
@media (max-width: 940px) { .legal-wrap { grid-template-columns: 1fr; } }

.legal-toc { position: sticky; top: 178px; }
@media (max-width: 940px) {
  .legal-toc {
    position: static; padding: 22px 24px; border-radius: 16px;
    background: var(--alt-bg); border: 1px solid var(--line);
  }
}
.legal-toc-t {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-3); margin-block-end: 16px;
}
.legal-toc a {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 0; font-size: 0.9rem; line-height: 1.4; color: var(--ink-2);
  border-block-start: 1px solid var(--line);
}
.legal-toc a:first-of-type { border-block-start: 0; }
.legal-toc a b {
  flex: none; min-width: 1.5em; font-family: var(--font-display);
  font-weight: 700; font-size: 0.8rem; color: var(--accent-deep);
}
.legal-toc a:hover { color: var(--navy); }

.legal-body { max-width: 72ch; }
.legal-sect { scroll-margin-block-start: 170px; }
.legal-sect + .legal-sect { margin-block-start: 54px; padding-block-start: 46px; border-block-start: 1px solid var(--line); }
.legal-sect h2 {
  display: flex; gap: 14px; align-items: baseline;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.2;
  letter-spacing: -0.02em; color: var(--ink); margin: 0 0 22px;
}
.legal-sect h2 .legal-num { flex: none; color: var(--accent-deep); font-weight: 800; }
.legal-block + .legal-block { margin-block-start: 4px; }
.legal-body h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: -0.005em; color: var(--navy); margin: 26px 0 10px;
}
.legal-body p {
  margin: 0 0 14px; font-size: 1rem; line-height: 1.72; color: var(--ink-2);
  text-wrap: pretty;
}
.legal-body p.legal-caps {
  font-size: 0.92rem; line-height: 1.68; letter-spacing: 0.005em;
  color: var(--ink); font-weight: 500;
  padding: 20px 22px; border-radius: 14px;
  background: var(--alt-bg); border: 1px solid var(--line);
}
.legal-body ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 9px; }
.legal-body ul li {
  position: relative; padding-inline-start: 22px;
  font-size: 1rem; line-height: 1.62; color: var(--ink-2);
}
.legal-body ul li::before {
  content: ""; position: absolute; inset-inline-start: 4px; top: 0.68em;
  width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 72%, transparent);
}


/* legal links in the footer bottom bar ----------------------------------- */
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.footer-legal a { font-size: 0.88rem; color: #A9BCCF; }
.footer-legal a:hover { color: var(--gold-soft); }


/* social links ----------------------------------------------------------- */
.social { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.social a {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  color: #EAF0F6; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.social a:hover {
  color: #22160A; background: var(--gold-soft); border-color: var(--gold-soft);
  transform: translateY(-2px);
}
.footer-brand .social { margin-block-start: 24px; }

/* on light grounds (contact page) */
.social.on-light a {
  color: var(--navy); background: var(--alt-bg); border-color: var(--line);
}
.social.on-light a:hover {
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent);
}
.social-t {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-3); margin-block-end: 14px;
}


/* the lockup now sits on the footer ground with no backing plate --------- */
.footer-brand img {
  height: 84px !important;
  margin-inline-start: -6px;
  background: none;
  mix-blend-mode: normal;
}


/* form submission error ---------------------------------------------------- */
.form-err {
  margin-block-start: 16px; padding: 14px 16px; border-radius: 12px;
  font-size: 0.94rem; line-height: 1.5; font-weight: 500;
  color: #7A2318; background: #FCEDEA; border: 1px solid #E8C0B8;
}
.form-card .btn[disabled] { opacity: 0.62; pointer-events: none; }


/* the founding strip on the navy Get Started band ------------------------ */
.saveline-sect .fstrip {
  background: linear-gradient(158deg, rgba(201,154,63,0.22), rgba(201,154,63,0.07));
  border-color: color-mix(in srgb, var(--accent) 46%, transparent);
}
.saveline-sect .fstrip-top b { color: #fff; }
.saveline-sect .fstrip-perks span { color: #DDE6EE; }
.saveline-sect .fstrip-perks svg { color: var(--gold-soft); }


/* founding strip on navy — full-contrast ink ----------------------------- */
.saveline-sect .fstrip-pill {
  color: #22160A !important; background: var(--gold-soft) !important;
  border-color: var(--gold-soft) !important;
}
.saveline-sect .fstrip-top b { color: #FFFFFF !important; }
.saveline-sect .fstrip-perks span { color: #F2F6FA !important; font-weight: 500; }
.saveline-sect .fstrip-perks svg { color: var(--gold-soft) !important; }


/* the strip sits on the CREAM band, not navy — dark ink, not white ------- */
.saveline-sect .fstrip {
  background: linear-gradient(158deg, rgba(201,154,63,0.15), rgba(201,154,63,0.05)) !important;
  border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
}
.saveline-sect .fstrip-top b { color: var(--ink) !important; }
.saveline-sect .fstrip-perks span { color: var(--ink-2) !important; font-weight: 500; }
.saveline-sect .fstrip-perks svg { color: var(--accent-deep) !important; }
.saveline-sect .fstrip-pill {
  color: #FFFFFF !important; background: var(--accent-deep) !important;
  border-color: var(--accent-deep) !important;
}


/* ═══════ CTA label that alternates between two phrases ═══════
   Both phrases occupy the same grid cell, so the button is sized to the
   wider of the two and never reflows as they swap. */
.cta-cycle { display: inline-grid; vertical-align: middle; }
.cta-cycle > span {
  grid-area: 1 / 1; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  animation: ctaCycle 7s ease-in-out infinite;
}
.cta-cycle > span:nth-child(2) { animation-delay: 3.5s; }
@keyframes ctaCycle {
  0%      { opacity: 0; transform: translateY(6px); }
  6%, 44% { opacity: 1; transform: translateY(0); }
  50%     { opacity: 0; transform: translateY(-6px); }
  100%    { opacity: 0; transform: translateY(-6px); }
}
/* hovering pauses the swap so the label can be read and clicked */
.btn:hover .cta-cycle > span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .cta-cycle > span { animation: none; opacity: 0; }
  .cta-cycle > span:first-child { opacity: 1; }
}


/* ═══════ CTA label morph: the button resizes to whichever phrase shows ═══════
   Both phrases stay in normal flow but the hidden one is collapsed to zero
   width with overflow hidden, so the button width animates between the short
   and long label instead of being padded out to the wider one. */
.cta-cycle { display: inline-flex; align-items: center; vertical-align: middle; }
.cta-cycle > span {
  grid-area: auto;
  display: inline-flex; align-items: center;
  white-space: nowrap; overflow: hidden;
  max-width: 0; opacity: 0;
  animation: ctaMorph 8s cubic-bezier(.65,0,.35,1) infinite;
}
.cta-cycle > span:nth-child(2) { animation-delay: 4s; }
@keyframes ctaMorph {
  0%        { max-width: 0;    opacity: 0; }
  7%        { max-width: 40ch; opacity: 1; }
  43%       { max-width: 40ch; opacity: 1; }
  50%       { max-width: 0;    opacity: 0; }
  100%      { max-width: 0;    opacity: 0; }
}
/* hovering holds the current phrase so it can be read and clicked */
.btn:hover .cta-cycle > span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .cta-cycle > span { animation: none; max-width: 40ch; opacity: 0; }
  .cta-cycle > span:first-child { opacity: 1; }
  .cta-cycle > span:nth-child(2) { max-width: 0; }
}

/* the button itself eases as its width changes */
.btn:has(.cta-cycle) { transition: background .16s ease, filter .16s ease, transform .16s ease; }


/* ═══════ CTA label: fixed-size button, phrases cross-fade in place ═══════
   Both phrases share one grid cell, so the button is sized once to the wider
   of the two and NOTHING in the layout shifts as they swap. */
.cta-cycle { display: inline-grid; align-items: center; justify-items: center; vertical-align: middle; }
.cta-cycle > span {
  grid-area: 1 / 1;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; overflow: visible;
  max-width: none !important;
  opacity: 0;
  animation: ctaFade 8s ease-in-out infinite;
}
.cta-cycle > span:nth-child(2) { animation-delay: 4s; }
@keyframes ctaFade {
  0%       { opacity: 0; }
  5%, 45%  { opacity: 1; }
  50%      { opacity: 0; }
  100%     { opacity: 0; }
}
.btn:hover .cta-cycle > span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .cta-cycle > span { animation: none; opacity: 0; }
  .cta-cycle > span:first-child { opacity: 1; }
}


/* ═══════════ savings teaser card ═══════════ */
.savecard {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 22px 34px; justify-content: space-between;
  padding: clamp(26px, 3vw, 38px); border-radius: 22px;
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 40px 80px -46px rgba(0,0,0,0.42);
}
.savecard .sc-copy { min-width: 0; flex: 1 1 340px; }
.savecard .sc-eyebrow {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-deep);
}
[dir="rtl"] .savecard .sc-eyebrow { letter-spacing: 0; }
.savecard .sc-copy b {
  display: block; margin-block-start: 12px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.18;
  letter-spacing: -0.02em; color: var(--ink);
}
.savecard .sc-copy p {
  margin: 12px 0 0; font-size: 1rem; line-height: 1.6; color: var(--ink-2); max-width: 54ch;
}
.savecard .btn { flex: none; }

/* ═══════════ comparison dialog ═══════════ */
.vsmodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 22px; }
.vsmodal-scrim {
  position: absolute; inset: 0; background: rgba(6,16,28,0.68);
  backdrop-filter: blur(3px); animation: vsFade .18s ease-out;
}
.vsmodal-panel {
  position: relative; width: min(1180px, 100%); max-height: calc(100vh - 44px);
  overflow: auto; -webkit-overflow-scrolling: touch;
  padding: clamp(20px, 2.6vw, 34px);
  border-radius: 26px; background: var(--alt-bg);
  border: 1px solid var(--line);
  box-shadow: 0 60px 120px -50px rgba(0,0,0,0.6);
  animation: vsRise .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes vsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vsRise { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }

.vsmodal-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  margin-block-end: 24px;
}
.vsmodal-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  color: var(--navy); background: #fff; cursor: pointer;
  padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.vsmodal-back:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
[dir="rtl"] .vsmodal-back svg { transform: scaleX(-1); }
.vsmodal-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem); letter-spacing: -0.015em; color: var(--ink);
}

/* inside the dialog the ground is light, so both cards are paper */
.vsmodal .vscard.out,
.vsmodal .vscard.in { background: #fff !important; }
.vsmodal .vscard.out { border-color: var(--line) !important; box-shadow: none !important; }

.vsmodal-foot {
  margin-block-start: 26px; padding-block-start: 22px;
  border-block-start: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px;
}
@media (max-width: 620px) { .vsmodal-foot .btn { width: 100%; justify-content: center; } }


/* navy button variant --------------------------------------------------- */
.btn-navy {
  background: linear-gradient(158deg, #1B3E63, #16304E);
  color: #F4F1E9; border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.btn-navy:hover { filter: brightness(1.12); color: #fff; }
.btn-navy:active { transform: translateY(1px); }


/* ═══════ savings card: a headline with weight, a button that invites ═══════ */
.savecard {
  position: relative; overflow: hidden;
  background:
    radial-gradient(760px 340px at 12% -30%, rgba(201,154,63,0.14), transparent 70%),
    var(--paper);
}
.savecard::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 18%, transparent));
}
.savecard .sc-copy b {
  font-size: clamp(1.55rem, 2.9vw, 2.3rem) !important;
  line-height: 1.1 !important; letter-spacing: -0.03em !important;
}
/* the figure carries the argument, so it is set in the accent */
.savecard .sc-copy b em {
  font-style: normal; color: var(--accent-deep);
  box-shadow: inset 0 -0.36em 0 color-mix(in srgb, var(--accent) 24%, transparent);
}
[dir="rtl"] .savecard .sc-copy b { letter-spacing: 0 !important; line-height: 1.4 !important; }

/* button: a soft pulse at rest, a sheen sweep on hover */
.savecard .btn-navy {
  position: relative; overflow: hidden;
  animation: scPulse 3.4s ease-in-out infinite;
}
.savecard .btn-navy::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: -60%; width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.30), transparent);
  transform: skewX(-18deg); pointer-events: none;
  transition: inset-inline-start .55s cubic-bezier(.3,0,.4,1);
}
.savecard .btn-navy:hover::after { inset-inline-start: 120%; }
.savecard .btn-navy:hover { animation-play-state: paused; }
@keyframes scPulse {
  0%, 100% { box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 0 0 0 color-mix(in srgb, var(--accent) 46%, transparent); }
  55%      { box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .savecard .btn-navy { animation: none; }
  .savecard .btn-navy::after { display: none; }
}


/* two actions on the savings card --------------------------------------- */
.savecard .sc-btns { flex: none; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 620px) {
  .savecard .sc-btns { width: 100%; }
  .savecard .sc-btns .btn { width: 100%; justify-content: center; }
}

/* founding-terms dialog -------------------------------------------------- */
.vsmodal-panel.narrow { width: min(720px, 100%); }
.terms-lead {
  margin: 0 0 24px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.18;
  letter-spacing: -0.02em; color: var(--ink); text-wrap: pretty;
}
[dir="rtl"] .terms-lead { letter-spacing: 0; line-height: 1.45; }
.terms-list { display: grid; gap: 0; }
.terms-list > div {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 0; border-block-start: 1px solid var(--line);
}
.terms-list > div:first-child { border-block-start: 0; padding-block-start: 0; }
.terms-list svg { flex: none; margin-block-start: 3px; color: var(--accent-deep); }
.terms-list > div > span { font-size: 1.02rem; line-height: 1.55; color: var(--ink-2); font-weight: 500; }


/* the section no longer tucks a navy deck under the hero ----------------- */
.saveline-sect { margin-block-start: 0 !important; }


/* savings card: quiet money line, loud invitation ------------------------ */
.savecard .sc-kicker {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(0.95rem, 1.3vw, 1.08rem); line-height: 1.4;
  letter-spacing: 0.005em; color: var(--ink-2);
}
.savecard .sc-kicker em {
  font-style: normal; font-weight: 800; color: var(--accent-deep);
  box-shadow: inset 0 -0.34em 0 color-mix(in srgb, var(--accent) 26%, transparent);
}
.savecard .sc-copy b {
  margin-block-start: 10px !important;
  font-size: clamp(1.45rem, 2.7vw, 2.15rem) !important;
  line-height: 1.08 !important; letter-spacing: -0.032em !important;
  color: var(--navy) !important;
}
.savecard .sc-copy b em {
  font-style: normal; color: var(--accent-deep); box-shadow: none;
}
[dir="rtl"] .savecard .sc-kicker { letter-spacing: 0; }


/* ═══════ founding benefits ticker — all seven, one line at a time ═══════
   Seven absolutely-stacked items share one rail, each visible for 3s of a
   21s cycle, so every benefit shows on the first screen without the card
   growing. */
.fticker {
  margin-block-start: 22px; padding-block-start: 20px;
  border-block-start: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
}
.ft-flag {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  font-family: var(--font-display); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #7A2318; background: #FCEDEA; border: 1px solid #EFCFC8;
  padding: 7px 13px; border-radius: 999px;
}
[dir="rtl"] .ft-flag { letter-spacing: 0; }
.ft-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #C0392B; flex: none;
  animation: ftBlink 1.8s ease-in-out infinite;
}
@keyframes ftBlink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.ft-rail {
  position: relative; flex: 1 1 300px; min-width: 0;
  min-height: 3.2em; display: flex; align-items: center;
}
.ft-item {
  position: absolute; inset-inline: 0; top: 50%;
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 1rem; line-height: 1.45; font-weight: 600; color: var(--ink);
  opacity: 0; transform: translateY(calc(-50% + 8px));
  animation: ftCycle 21s ease-in-out infinite;
}
.ft-item svg { flex: none; margin-block-start: 3px; color: var(--accent-deep); }
.ft-item:nth-child(1) { animation-delay: 0s; }
.ft-item:nth-child(2) { animation-delay: 3s; }
.ft-item:nth-child(3) { animation-delay: 6s; }
.ft-item:nth-child(4) { animation-delay: 9s; }
.ft-item:nth-child(5) { animation-delay: 12s; }
.ft-item:nth-child(6) { animation-delay: 15s; }
.ft-item:nth-child(7) { animation-delay: 18s; }
@keyframes ftCycle {
  0%     { opacity: 0; transform: translateY(calc(-50% + 8px)); }
  2.5%   { opacity: 1; transform: translateY(-50%); }
  12%    { opacity: 1; transform: translateY(-50%); }
  14.3%  { opacity: 0; transform: translateY(calc(-50% - 8px)); }
  100%   { opacity: 0; transform: translateY(calc(-50% - 8px)); }
}
.savecard:hover .ft-item { animation-play-state: paused; }

.ft-all {
  flex: none; cursor: pointer; background: none; border: 0; padding: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 0.92rem;
  color: var(--navy); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.ft-all:hover { color: var(--accent-deep); }

@media (prefers-reduced-motion: reduce) {
  .ft-item { animation: none; position: relative; opacity: 1; transform: none; top: auto; }
  .ft-item:not(:first-child) { display: none; }
  .ft-dot { animation: none; opacity: 1; }
  .ft-rail { min-height: 0; }
}


/* founding discount: full price struck, founding price beside it -------- */
.plan .amt { flex-wrap: wrap; align-items: baseline; gap: 10px; }
.plan .amt s.was {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  color: var(--ink-3); text-decoration: line-through;
  text-decoration-color: currentColor; text-decoration-thickness: 2px;
}
.plan.feature .amt s.was { color: rgba(255,255,255,0.6); }
.cmp .num s, .cmp .rate s {
  color: var(--ink-3); font-weight: 500; margin-inline-end: 7px;
  text-decoration: line-through; text-decoration-thickness: 2px;
}


/* struck full price reads as a markdown, in a theme-tuned red ------------ */
.plan .amt s.was {
  color: #A33A2B !important;
  text-decoration-color: #C0392B !important;
  text-decoration-thickness: 2.5px !important;
}
.plan.feature .amt s.was {
  color: #F0A79A !important;
  text-decoration-color: #E8836F !important;
}
.plan .amt span { flex: none; }
.plan .amt .per-note {
  display: block; width: 100%;
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.02em; color: var(--accent-deep);
  margin-block-start: 4px;
}
.plan.feature .amt .per-note { color: var(--gold-soft); }


/* "for founding members only" is a quiet footnote, not a badge ----------- */
.plan .amt .per-note {
  font-family: var(--font-body, inherit) !important;
  font-weight: 500 !important; font-size: 0.82rem !important;
  letter-spacing: 0 !important; color: var(--ink-3) !important;
}
.plan.feature .amt .per-note { color: rgba(255,255,255,0.62) !important; }


/* one strike line: the runtime text wrapper was drawing a second ---------- */
.plan .amt s.was .sc-interp,
.plan .amt s.was > span,
.cmp s .sc-interp, .cmp s > span {
  text-decoration: none !important;
}

/* founding note matches the plan's descriptor size ----------------------- */
.plan .amt .per-note { font-size: 0.72rem !important; }


/* match the plan feature lines: 0.82rem / 500 --------------------------- */
.plan .amt .per-note {
  font-size: 0.82rem !important; font-weight: 500 !important;
  color: #6B7C8E !important;
}
.plan.feature .amt .per-note { color: rgba(255,255,255,0.66) !important; }


/* the note's inner text wrapper was matching the 30px price rule --------- */
.plan .amt .per-note .sc-interp,
.plan .amt .per-note > span {
  font: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: normal !important;
  color: inherit !important;
}


/* explicit, maximally specific: the note text is 13.12px / 500 ----------- */
.plan .amt span.per-note,
.plan .amt span.per-note span.sc-interp,
.plan .amt span.per-note > span,
.plan.feature .amt span.per-note,
.plan.feature .amt span.per-note span.sc-interp {
  font-size: 13.12px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  line-height: 1.45 !important;
}


/* the Scale card is cream, not navy — the note takes the same ink -------- */
.plan.feature .amt span.per-note,
.plan.feature .amt span.per-note span.sc-interp,
.plan.feature .amt span.per-note > span { color: #6B7C8E !important; }
.plan.feature .amt s.was,
.plan.feature .amt s.was span.sc-interp {
  color: #A33A2B !important; text-decoration-color: #C0392B !important;
}


/* struck price: red text, line centred through it ------------------------ */
.plan .amt s.was,
.plan .amt s.was span.sc-interp,
.plan.feature .amt s.was,
.plan.feature .amt s.was span.sc-interp {
  color: #C0392B !important;
}
.plan .amt s.was {
  text-decoration: none !important;
  position: relative; display: inline-block;
}
.plan .amt s.was::after {
  content: ""; position: absolute; inset-inline: -2px; top: 50%;
  height: 2.5px; border-radius: 2px; background: #C0392B;
  transform: translateY(-50%);
}


/* "view feature list" under each plan CTA -------------------------------- */
.pcta { display: grid; gap: 12px; justify-items: center; }
.feat-link {
  cursor: pointer; background: none; border: 0; padding: 2px 0;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
  color: var(--navy); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.feat-link:hover { color: var(--accent-deep); }

/* the included grid inside the dialog ----------------------------------- */
.vsmodal .incl-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px 34px;
}
.vsmodal .incl-grid > span {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 1rem; line-height: 1.5; color: var(--ink-2); font-weight: 500;
}
.vsmodal .incl-grid svg { flex: none; margin-block-start: 4px; color: var(--accent-deep); }


/* ═══════ limited-time flag: a spark that draws the eye ═══════ */
.ft-flag {
  position: relative; overflow: hidden;
  animation: ftGlow 2.6s ease-in-out infinite;
}
/* light sweeps across the pill, left to right, then rests */
.ft-flag::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: -40%;
  width: 38%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  transform: skewX(-20deg);
  animation: ftSpark 3.8s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes ftGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.30); }
  55%      { box-shadow: 0 0 0 8px rgba(192,57,43,0); }
}
@keyframes ftSpark {
  0%        { inset-inline-start: -40%; opacity: 0; }
  8%        { opacity: 1; }
  34%       { inset-inline-start: 115%; opacity: 1; }
  40%, 100% { inset-inline-start: 115%; opacity: 0; }
}
.savecard:hover .ft-flag,
.savecard:hover .ft-flag::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ft-flag { animation: none; }
  .ft-flag::after { display: none; }
}


/* ticker: every benefit starts from the same top line, whatever its length */
.ft-rail { align-items: flex-start; min-height: 3em; }
.ft-item {
  top: 0 !important; bottom: auto;
  transform: translateY(7px) !important;
  animation-name: ftCycleTop !important;
}
@keyframes ftCycleTop {
  0%     { opacity: 0; transform: translateY(7px); }
  2.5%   { opacity: 1; transform: translateY(0); }
  12%    { opacity: 1; transform: translateY(0); }
  14.3%  { opacity: 0; transform: translateY(-7px); }
  100%   { opacity: 0; transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  .ft-item { transform: none !important; animation: none !important; }
}


/* founding ticker in the home hero (navy ground) ------------------------- */
.hero-founding { margin-block-start: 28px; max-width: 640px; }
.hero-founding .fticker {
  margin-block-start: 0; padding: 20px 22px;
  border-block-start: 0; border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  align-items: flex-start;
}
.hero-founding .ft-item { color: #F2F6FA; }
.hero-founding .ft-item svg { color: var(--gold-soft); }
.hero-founding .ft-rail { flex-basis: 100%; }
.hero-founding .ft-acts { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.hero-founding .ft-all { color: #fff; text-decoration-color: rgba(216,180,99,0.8); }
.hero-founding .ft-all:hover { color: var(--gold-soft); }
.hero-founding:hover .ft-item,
.hero-founding:hover .ft-flag,
.hero-founding:hover .ft-flag::after { animation-play-state: paused; }


/* hero ticker: the hero sits on a light ground, so the ink must be dark -- */
.hero-founding .fticker {
  background: var(--paper) !important;
  border-color: color-mix(in srgb, var(--accent) 38%, transparent) !important;
  box-shadow: 0 26px 56px -40px rgba(0,0,0,0.35);
}
.hero-founding .ft-item,
.hero-founding .ft-item span.sc-interp { color: var(--ink) !important; }
.hero-founding .ft-item svg { color: var(--accent-deep) !important; }


/* hero founding line: no panel — just the flag and the rotating benefit -- */
.hero-founding .fticker {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; display: block;
}
.hero-founding .ft-rail { margin-block-start: 14px; }
.hero-founding .ft-item { font-weight: 600; }


/* add-on tables: struck full price in the same red as the plans ---------- */
.cmp s,
.cmp s span.sc-interp {
  color: #C0392B !important;
  text-decoration: none !important;
}
.cmp s {
  position: relative; display: inline-block;
}
.cmp s::after {
  content: ""; position: absolute; inset-inline: -1px; top: 50%;
  height: 1.6px; border-radius: 2px; background: #C0392B;
  transform: translateY(-50%);
}


/* add-on tables: a price may never break across lines -------------------- */
.cmp { min-width: max-content; }
.cmp td.num, .cmp .rate, .cmp s, .cmp th.num { white-space: nowrap; }
/* the struck price and the founding price sit on one line, with a gap */
.cmp td.num s { margin-inline-end: 8px; }


/* force it past the earlier table rules --------------------------------- */
.cmp-scroll { overflow-x: auto; }
table.cmp { min-width: max-content !important; width: auto !important; }
table.cmp td.num, table.cmp td.num s, table.cmp td.num span,
table.cmp td.rate, table.cmp .rate, table.cmp th { white-space: nowrap !important; }


/* two benefits held on screen, the rest cycling beneath ------------------ */
.ft-pinned { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-block: 12px 4px; }
.ft-pin {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.98rem;
  line-height: 1.35; color: var(--ink);
}
.ft-pin svg { flex: none; color: var(--accent-deep); }
.ft-rail { border-top: 1px solid var(--line); padding-block-start: 10px; }


/* five rotating items — retime the cycle from seven ---------------------- */
.ft-item { animation-duration: 15s !important; }
.ft-item:nth-child(1) { animation-delay: 0s !important; }
.ft-item:nth-child(2) { animation-delay: 3s !important; }
.ft-item:nth-child(3) { animation-delay: 6s !important; }
.ft-item:nth-child(4) { animation-delay: 9s !important; }
.ft-item:nth-child(5) { animation-delay: 12s !important; }
.ft-item:nth-child(6), .ft-item:nth-child(7) { display: none !important; }
@keyframes ftCycleTop {
  0%    { opacity: 0; transform: translateY(7px); }
  3%    { opacity: 1; transform: translateY(0); }
  17%   { opacity: 1; transform: translateY(0); }
  20%   { opacity: 0; transform: translateY(-7px); }
  100%  { opacity: 0; transform: translateY(-7px); }
}


/* the two card actions stack, See All Benefits beneath See Your Savings -- */
.sc-btns { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.sc-btns .btn { justify-content: center; white-space: nowrap; }


/* See All Benefits — white, same size and shape as its neighbour --------- */
.sc-btns .sc-alt {
  background: #fff !important;
  color: var(--navy) !important;
  border: 1px solid var(--line) !important;
}
.sc-btns .sc-alt:hover {
  background: var(--paper) !important;
  border-color: var(--accent) !important;
  color: var(--accent-deep) !important;
}


/* ═════════════════════════════════════════════════════════════════════════
   MOBILE PASS — true phone widths (≤ 560px), plus a global overflow guard
   ════════════════════════════════════════════════════════════════════════ */

/* 1 ── grid tracks must be allowed to shrink below their content.
       "1fr" is really "minmax(auto,1fr)", so a long word or a wide image
       forces the track wider than the screen and the whole page scrolls. */
.cards, .cards.two, .cards.four, .steps, .why, .oc, .pains, .plans, .tiers,
.tiers.three, .icf-layers, .post-grid, .stats, .incl-grid, .cat-body,
.feat-grid, .split, .privacy, .contact-grid, .hero-grid, .footer-grid,
.vs, .vsdeck, .fstrip-perks, .trans, .article, .swap, .field-row {
  grid-auto-columns: minmax(0, 1fr);
}
.cards > *, .steps > *, .why > *, .oc > *, .pains > *, .plans > *, .tiers > *,
.icf-layers > *, .post-grid > *, .stats > *, .feat-grid > *, .split > *,
.privacy > *, .contact-grid > *, .hero-grid > *, .footer-grid > *,
.vs > *, .vsdeck > *, .trans > *, .article > *, .swap > *, .field-row > * {
  min-width: 0;
}

/* body-level guard: a stray decorative halo must never scroll the page */
body { overflow-x: clip; }
.phero, .hero, .feature-band, .section { overflow-x: clip; }

/* long unbroken strings (emails, URLs) wrap instead of pushing */
p, li, span, b, td, th, .feat b, .terms-list > div > span { overflow-wrap: anywhere; }

/* media never exceeds its box */
img, svg, video, table { max-width: 100%; }

/* ── 2 ── phone layout ─────────────────────────────────────────────────── */
@media (max-width: 560px) {

  .wrap { padding-inline: 18px; }
  .section { padding-block: clamp(38px, 10vw, 56px); }

  /* header: a compact bar, and the spacer must match it exactly */
  .nav-inner { height: 72px; }
  .nav-logo img { height: 46px !important; }
  .site-head-spacer { min-height: 72px; }
  .beta-strip { font-size: 0.76rem; padding-block: 7px; }

  /* type: keep the display scale readable but stop it dominating */
  .hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.08; }
  .phero h1 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); line-height: 1.1; }
  h2 { font-size: clamp(1.6rem, 6.6vw, 2rem) !important; line-height: 1.15; }
  .hero-sub, .phero p { font-size: 1rem; }

  /* every call to action goes full width — thumb-sized, no side-by-side */
  .hero-cta, .phero-cta, .cta-band-btns, .why-cta, .sc-btns, .vsmodal-foot {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  }
  .hero-cta .btn, .phero-cta .btn, .cta-band-btns .btn,
  .why-cta .btn, .sc-btns .btn, .vsmodal-foot .btn {
    width: 100%; justify-content: center;
  }
  .btn, .btn-lg { min-height: 48px; }

  /* the animated hero pills sit inside the frame on a narrow screen */
  .hero-pop.l { inset-inline-start: 0; }
  .hero-pop.r { inset-inline-end: 0; }
  .hero-pop { font-size: 0.72rem; padding: 7px 10px; max-width: 68%; white-space: normal; }
  .hero-pop .pic { width: 22px; height: 22px; }
  .hero-pop svg { width: 12px; height: 12px; }

  /* savings card: stack, and let the figure breathe */
  .savecard { padding: 24px 20px 24px 24px; gap: 18px; }
  .savecard .sc-copy { flex: 1 1 100%; }
  .savecard .sc-btns { width: 100%; }

  /* comparison cards */
  .vscard { padding: 22px 20px; }
  .vscard .vs-say { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }

  /* plans */
  .plan { padding: 26px 22px 24px; }
  .plan .amt b { font-size: clamp(2rem, 9vw, 2.6rem); }
  .tier .hrs { grid-template-columns: 1fr; }
  .tier .hrs > div + div { border-top: 1px solid var(--line); border-inline-start: 0; }

  /* tables scroll horizontally rather than squashing */
  .cmp-scroll { -webkit-overflow-scrolling: touch; margin-inline: -18px; padding-inline: 18px; }
  .cmp { min-width: 460px; }
  .cmp th, .cmp td { padding: 13px 14px; font-size: 0.9rem; }

  /* dialogs fill the screen */
  .vsmodal-panel, .vsmodal-panel.narrow { width: 100%; max-height: 92dvh; border-radius: 18px; }
  .vsmodal-body { padding: 22px 20px; }
  .vsmodal-head { padding: 20px 20px 0; }

  /* footer: one column, links comfortably tappable */
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-col a { padding-block: 4px; display: inline-block; }
  .footer-legal { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-brand img { height: 68px !important; }

  /* forms */
  .field input, .field select, .field textarea { font-size: 16px; }  /* stops iOS zoom */

  /* founding strip + ticker */
  .fstrip { padding: 22px 18px; }
  .fticker { padding: 16px 16px; }
  .ft-pin, .ft-item { font-size: 0.9rem; }
  .contact-email { width: 100%; }
  .contact-email a { font-size: 0.98rem; }
}

/* ── 3 ── very narrow (≤ 380px) ────────────────────────────────────────── */
@media (max-width: 380px) {
  .wrap { padding-inline: 15px; }
  .nav-logo img { height: 42px !important; }
  .hero h1 { font-size: 1.85rem; }
  .savecard .sc-copy b { font-size: 1.4rem !important; }
  .hero-pop { max-width: 78%; }
}


/* the beta strip is gone, so the reserved header height is nav-only ------ */
@media (max-width: 620px) and (min-width: 561px) {
  .site-head-spacer { min-height: 88px; }
}
@media (min-width: 621px) { .site-head-spacer { min-height: 104px; } }

/* burger must be a real touch target */
@media (max-width: 560px) {
  .nav-burger { width: 46px; height: 46px; }
}


/* pinned benefits on the navy hero ground -------------------------------- */
.hero-founding .ft-pin { color: #fff; }
.hero-founding .ft-pin svg { color: var(--gold-soft); }
.hero-founding .ft-rail { border-block-start-color: rgba(255,255,255,0.18); }


/* CTA label crossfade: outgoing and incoming must overlap, never meet at 0 */
@keyframes ctaFade {
  0%    { opacity: 1; }
  42%   { opacity: 1; }
  50%   { opacity: 0; }
  92%   { opacity: 0; }
  100%  { opacity: 1; }
}
.cta-cycle > span { animation-duration: 9s !important; }
.cta-cycle > span:nth-child(1) { animation-delay: 0s !important; }
.cta-cycle > span:nth-child(2) { animation-delay: -4.5s !important; }


/* hero ticker sits on the cream ground — ink, not white ------------------ */
.hero-founding .ft-pin { color: var(--ink) !important; }
.hero-founding .ft-pin svg { color: var(--accent-deep) !important; }
.hero-founding .ft-rail { border-block-start-color: var(--line) !important; }

/* the pitch reads first, the buttons close it --------------------------- */
.hero-copy { display: flex; flex-direction: column; }
.hero-copy .hero-founding { order: 1; margin-block-start: 26px; }
.hero-copy .hero-cta { order: 2; margin-block-start: 26px; }


/* hero order now lives in the markup — drop the flex-order shim ---------- */
.hero-copy { display: block; }
.hero-copy .hero-founding { order: 0; margin-block-start: 26px; }
.hero-copy .hero-cta { order: 0; margin-block-start: 28px; }


/* hero ticker is now flag + two benefits only — tighten it -------------- */
.hero-founding .ft-pinned { margin-block: 12px 0; }
.hero-founding .fticker { padding-block: 18px; }
.hero-copy .hero-cta { margin-block-start: 22px; }


/* ── mobile finalisation ────────────────────────────────────────────────
   flex-basis participates in min-content, so a 340px basis forces the
   savings card 44px wider than a 390px phone can show. */
@media (max-width: 620px) {
  .savecard .sc-copy { flex: 1 1 100% !important; min-width: 0 !important; }
  .savecard { padding-inline: 20px 18px !important; }
  .fticker { padding-inline: 16px !important; }
  .ft-flag { white-space: normal; }
  .sc-btns .btn { white-space: normal; }

  /* the two-card comparison stacks well before 900px on a phone */
  .vsdeck { gap: 16px; }
  .vscard { padding: 20px 18px !important; }

  /* modals: full-height sheet, scrollable body */
  .vsmodal { padding: 12px; align-items: flex-end; }
  .vsmodal-panel { max-height: 88dvh; display: flex; flex-direction: column; }
  .vsmodal-body { overflow-y: auto; }

  /* tour: category rows and feature cards */
  .cat-q { padding-inline: 4px; gap: 10px; }
  .cat-q h3 { font-size: 1.02rem; }
  .feat { padding: 14px 15px; }

  /* discover pages */
  .oc-item, .pillar, .pain, .card, .aud { padding: 22px 20px; }

  /* legal pages */
  .prose h2 { font-size: 1.35rem; }
  .prose { font-size: 0.97rem; }
}

/* nav drawer must clear the fixed header and scroll on short screens */
.nav-drawer { max-height: 100dvh; overflow-y: auto; }


/* nav bar on a phone: logo + a compact CTA + burger, all on one line ----- */
@media (max-width: 480px) {
  .nav-inner { gap: 10px; }
  .nav-inner .btn-primary {
    font-size: 0.82rem; padding: 10px 14px; min-height: 40px;
  }
  .nav-inner .btn-primary .arr { display: none; }
  .nav-burger { width: 42px; height: 42px; margin-inline-start: -4px; }
}
@media (max-width: 360px) {
  .nav-inner .btn-primary { font-size: 0.76rem; padding: 9px 11px; }
  .nav-logo img { height: 38px !important; }
}


/* closing band buttons stack full-width on a phone ----------------------- */
@media (max-width: 560px) {
  .cta-row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .cta-row .btn { width: 100%; justify-content: center; }
}


/* price qualifier is load-bearing copy — must clear 4.5:1 ---------------- */
.plan .amt .per-note { color: var(--ink-2) !important; }
.plan.feature .amt .per-note { color: rgba(255,255,255,0.82) !important; }

/* the two card actions must be a matched pair, not ragged ---------------- */
.savecard .sc-btns { align-items: stretch !important; }
.savecard .sc-btns .btn { width: 100%; justify-content: center; }


/* three equal plan columns (Explorer / Starter / Scale) ------------------ */
.plans.three-even { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .plans.three-even { grid-template-columns: minmax(0, 1fr); } }