/* ReSOLVE Facilities — site styles */
*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; font-family: var(--rf-font-sans); color: var(--rf-fg-2); background: #fff; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.rf-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* Header — logo, language, primary CTA, hamburger */
.rf-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.94); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--rf-border-2); }
.rf-header__row { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.rf-header__logo { height: 48px; display: block; }
.rf-header__right { display: flex; align-items: center; gap: 10px; }

.rf-lang { display: inline-flex; align-items: center; position: relative; }
.rf-lang__btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; color: var(--rf-fg-3); font-size: 14px; font-weight: 500; padding: 8px 10px; border-radius: 8px; }
.rf-lang__btn:hover { background: var(--rf-slate-50); color: var(--rf-fg-2); }
.rf-lang__btn svg, .rf-lang__btn i { width: 16px; height: 16px; }
.rf-lang__menu { position: absolute; top: 100%; right: 0; margin-top: 4px; background: #fff; border-radius: 12px; padding: 6px; box-shadow: var(--rf-shadow-lg); border: 1px solid var(--rf-border-2); display: none; min-width: 130px; z-index: 100; }
.rf-lang--open .rf-lang__menu { display: block; }
.rf-lang__menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; padding: 8px 10px; border-radius: 8px; color: var(--rf-fg-2); font-size: 14px; font-weight: 500; }
.rf-lang__menu button:hover { background: var(--rf-slate-50); }

.rf-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 14px; border: 0; transition: background .15s, color .15s, transform .1s; white-space: nowrap; }
.rf-btn--primary { background: var(--rf-primary); color: #fff; }
.rf-btn--primary:hover { background: var(--rf-primary-hover); }
.rf-btn--secondary { background: #fff; color: var(--rf-primary); box-shadow: inset 0 0 0 1px var(--rf-primary); }
.rf-btn--secondary:hover { background: var(--rf-teal-50); }
.rf-btn--lg { padding: 14px 22px; font-size: 15px; }
.rf-btn .arr { font-size: 16px; line-height: 1; }

/* Hamburger — always visible */
.rf-hamburger { background: var(--rf-slate-50); border: 1px solid var(--rf-border-2); border-radius: 10px; width: 40px; height: 40px; display: inline-flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; padding: 0; }
.rf-hamburger:hover { background: var(--rf-teal-50); border-color: var(--rf-teal-300); }
.rf-hamburger span { display: block; width: 18px; height: 2px; background: var(--rf-fg-2); border-radius: 2px; }

/* Desktop inline navigation — hidden by default; shown at >=1001px.
   Mobile and tablet continue to use the hamburger + slide-out drawer. */
.rf-header__nav { display: none; }
.rf-header__nav a {
  position: relative;
  font-size: 15px; font-weight: 600;
  color: var(--rf-fg-2);
  padding: 6px 2px;
  transition: color .15s;
}
.rf-header__nav a:hover { color: var(--rf-primary); }
.rf-header__nav a::after {
  content: ''; position: absolute; left: 2px; right: 2px; bottom: 0;
  height: 2px; border-radius: 2px; background: var(--rf-primary);
  transform: scaleX(0); transform-origin: left; transition: transform .18s;
}
.rf-header__nav a:hover::after { transform: scaleX(1); }
@media (min-width: 1001px) {
  .rf-header__nav { display: flex; align-items: center; gap: 30px; }
  .rf-hamburger { display: none; }
}

/* Drawer */
.rf-drawer { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.rf-drawer.is-open { pointer-events: auto; }
.rf-drawer__scrim { position: absolute; inset: 0; background: rgba(15,30,38,0.45); opacity: 0; transition: opacity .25s; }
.rf-drawer.is-open .rf-drawer__scrim { opacity: 1; }
.rf-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: 360px; max-width: 92vw; background: #fff; box-shadow: -20px 0 60px -20px rgba(15,40,50,0.25); transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; padding: 24px; gap: 24px; }
.rf-drawer.is-open .rf-drawer__panel { transform: translateX(0); }
.rf-drawer__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--rf-border-2); }
.rf-drawer__close { background: transparent; border: 0; padding: 8px; border-radius: 8px; color: var(--rf-fg-2); }
.rf-drawer__close:hover { background: var(--rf-slate-50); }
.rf-drawer__close svg, .rf-drawer__close i { width: 22px; height: 22px; }
.rf-drawer__nav { display: flex; flex-direction: column; gap: 4px; }
.rf-drawer__nav a { padding: 14px 12px; border-radius: 10px; font-size: 17px; font-weight: 500; color: var(--rf-fg-2); display: flex; align-items: center; justify-content: space-between; }
.rf-drawer__nav a:hover { background: var(--rf-slate-50); color: var(--rf-primary); }
.rf-drawer__ctas { display: grid; gap: 10px; }
.rf-drawer__ctas .rf-btn { justify-content: center; }
.rf-drawer__lang { display: flex; gap: 6px; padding-top: 16px; border-top: 1px solid var(--rf-border-2); flex-wrap: wrap; }
.rf-drawer__lang button { background: var(--rf-slate-50); border: 1px solid var(--rf-border-2); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--rf-fg-2); }
.rf-drawer__lang button:hover { background: var(--rf-teal-50); border-color: var(--rf-teal-300); }

/* Hero — phone mockup */
.rf-hero__mock--phone { display: flex; align-items: center; justify-content: center; gap: 20px; perspective: 1200px; padding: 20px 0; }
.phone-real { width: 280px; max-width: 100%; aspect-ratio: 900/1670; background: #0c1a22; border-radius: 36px; padding: 8px; box-shadow: 0 30px 80px -30px rgba(15,40,50,0.45), 0 0 0 1px rgba(255,255,255,0.1); position: relative; flex-shrink: 0; }
.phone-real__notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 100px; height: 26px; background: #0c1a22; border-radius: 0 0 16px 16px; z-index: 3; }
.phone-real__screen { width: 100%; height: 100%; background: #fff; border-radius: 28px; overflow: hidden; position: relative; }
.phone-real__screen img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; background: #f7f9fa; }
.phone-real--hero { width: 300px; }
.phone-real--hero-side, .phone-real--hero-side2 { transform: scale(0.86); opacity: 0.85; }
.phone-real--hero-side { transform: scale(0.86) translateY(20px) rotateY(8deg); }
.phone-real--hero-side2 { transform: scale(0.86) translateY(20px) rotateY(-8deg); order: -1; }
.phone-real--mobile { width: 320px; }

/* Phone stack (used in 'tower' feature) */
.phone-stack { display: flex; align-items: center; justify-content: center; gap: -40px; position: relative; min-height: 420px; }
.phone-real--stack { width: 200px; }
.phone-real--s0 { transform: translateY(0) rotate(-4deg); z-index: 2; }
.phone-real--s1 { transform: translateX(-30px) translateY(-10px); z-index: 3; box-shadow: 0 40px 80px -20px rgba(15,40,50,0.5), 0 0 0 1px rgba(255,255,255,0.1); }
.phone-real--s2 { transform: translateX(-60px) translateY(0) rotate(4deg); z-index: 2; }
.rf-hero { background: linear-gradient(180deg, #f0f5f5 0%, #f6f7f9 60%); padding: 88px 0 40px; }
.rf-hero__title { max-width: 920px; margin-bottom: 18px; }
.rf-hero__sub { font-size: 22px; font-weight: 600; color: var(--rf-teal-700); margin-bottom: 24px; max-width: 720px; }
.rf-hero__body { font-size: 17px; color: var(--rf-fg-3); max-width: 560px; margin-bottom: 32px; line-height: 1.55; }
.rf-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 56px; }
.rf-hero__mock { margin-top: 40px; }

/* Browser window mock */
.mock-window { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(15,40,50,0.35), 0 0 0 1px var(--rf-border-2); }
.mock-window__bar { background: linear-gradient(180deg, #f4f7f8, #e9eef0); padding: 10px 14px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--rf-border-2); }
.mock-dot { width: 11px; height: 11px; border-radius: 50%; }
.mock-dot--r { background: #ff5f57; } .mock-dot--y { background: #febc2e; } .mock-dot--g { background: #28c840; }
.mock-window__url { margin-left: 14px; font-family: var(--rf-font-mono); font-size: 12px; color: var(--rf-fg-4); background: #fff; border-radius: 6px; padding: 4px 12px; flex: 1; max-width: 360px; }

/* Hero Dashboard */
.mock-dash { display: grid; grid-template-columns: 64px 1fr; min-height: 480px; }
.mock-dash__nav { background: var(--rf-teal-950); padding: 18px 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mock-dash__brand { width: 36px; height: 36px; border-radius: 8px; background: var(--rf-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; margin-bottom: 8px; }
.mock-dash__nav-item { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); }
.mock-dash__nav-item.is-active { background: rgba(255,255,255,0.08); color: #fff; }
.mock-dash__nav-item svg, .mock-dash__nav-item i { width: 18px; height: 18px; }
.mock-dash__nav-item--bottom { margin-top: auto; }
.mock-dash__body { padding: 20px 24px; background: #fafbfc; }
.mock-dash__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; }
.mock-dash__crumb { font-family: var(--rf-font-mono); font-size: 11px; color: var(--rf-teal-600); letter-spacing: .04em; text-transform: uppercase; }
.mock-dash__title { font-size: 18px; font-weight: 700; color: var(--rf-teal-900); margin-top: 4px; }
.mock-dash__filter { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--rf-fg-3); background: #fff; border: 1px solid var(--rf-border-2); border-radius: 8px; padding: 6px 10px; }
.mock-dash__filter svg, .mock-dash__filter i { width: 13px; height: 13px; }
.mock-dash__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.mock-kpi { background: #fff; border: 1px solid var(--rf-border-2); border-radius: 12px; padding: 14px; }
.mock-kpi--accent { background: linear-gradient(180deg, #fff 0%, #fdf2e8 100%); border-color: #f1cba4; }
.mock-kpi__l { font-size: 11px; color: var(--rf-fg-4); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.mock-kpi__n { font-size: 24px; font-weight: 800; color: var(--rf-teal-900); margin-top: 4px; line-height: 1; }
.mock-kpi__d { font-size: 11px; margin-top: 6px; font-weight: 600; }
.mock-kpi__d--up { color: #1c8460; }
.mock-kpi__d--down { color: #b8430b; }
.mock-dash__row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; margin-bottom: 14px; }
.mock-card { background: #fff; border: 1px solid var(--rf-border-2); border-radius: 12px; padding: 14px; }
.mock-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--rf-fg-2); }
.mock-tag { font-size: 10px; background: var(--rf-teal-100); color: var(--rf-teal-700); padding: 3px 8px; border-radius: 4px; font-weight: 600; letter-spacing: .04em; }
.mock-chart { width: 100%; height: 110px; }
.mock-donut { display: grid; grid-template-columns: 100px 1fr; gap: 12px; align-items: center; }
.mock-donut__svg { width: 100px; height: 100px; transform: rotate(-90deg); }
.mock-donut__legend { display: grid; gap: 6px; font-size: 11px; color: var(--rf-fg-3); }
.mock-donut__legend .dot, .tower__legend .dot, .phone-cam__ai-tags .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.mock-dash__table { background: #fff; border: 1px solid var(--rf-border-2); border-radius: 12px; overflow: hidden; }
.mock-row { display: grid; grid-template-columns: 60px 1.7fr 1.5fr 1fr 1fr; padding: 10px 14px; font-size: 12px; align-items: center; border-bottom: 1px solid var(--rf-border-2); }
.mock-row:last-child { border-bottom: 0; }
.mock-row--head { background: #f4f7f8; font-size: 10px; color: var(--rf-fg-4); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.pri { font-size: 10px; padding: 3px 8px; border-radius: 4px; font-weight: 600; display: inline-block; }
.pri--crit { background: #fbe1d3; color: #b8430b; }
.pri--high { background: #fdecd1; color: #936314; }
.pri--low  { background: #e3edec; color: #4d6463; }
.st { font-size: 10px; padding: 3px 8px; border-radius: 4px; font-weight: 600; display: inline-block; }
.st--prog { background: var(--rf-teal-100); color: var(--rf-teal-800); }
.st--open { background: #fdecd1; color: #936314; }
.st--done { background: #d4eadc; color: #1c6342; }

/* Section heads */
.rf-section { padding: 84px 0; }
.rf-section--tinted { background: var(--rf-slate-50); }
.rf-section--gradient { background: linear-gradient(180deg, #ffffff, #f0f5f5); }
.rf-section__head { margin-bottom: 48px; }
.rf-section__head--center { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; margin-bottom: 44px; }
.rf-section__head .rf-eyebrow { margin-bottom: 18px; }
.rf-section__title { margin-bottom: 12px; }
.rf-section__sub { font-size: 18px; color: var(--rf-fg-3); }

/* Problem */
.rf-problem-wrap { display: grid; gap: 32px; }
.rf-problem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rf-problem-card { background: #fff; border-radius: 16px; padding: 24px; border: 1px solid var(--rf-border-1); }
.rf-problem-card__icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--rf-amber-700); background: var(--rf-amber-100); margin-bottom: 16px; }
.rf-problem-card__icon svg, .rf-problem-card__icon i { width: 22px; height: 22px; }
.rf-problem-card h3 { font-size: 17px; margin-bottom: 6px; color: var(--rf-fg-2); }
.rf-problem-card p { font-size: 14px; color: var(--rf-fg-3); }

/* Problem diagram: scattered → centralised */
.rf-problem-diagram { display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: stretch; background: #fff; border-radius: 20px; padding: 36px; border: 1px solid var(--rf-border-2); }
.rf-pd__col { display: flex; flex-direction: column; gap: 14px; align-items: center; padding: 16px; border-radius: 14px; }
.rf-pd__col--before { background: linear-gradient(180deg, #fdf2e8, #fff); border: 1px dashed #f1cba4; }
.rf-pd__col--after { background: linear-gradient(180deg, #ecf6f4, #fff); border: 1px solid var(--rf-teal-300); }
.rf-pd__label { font-family: var(--rf-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rf-amber-700); }
.rf-pd__label--good { color: var(--rf-teal-700); }
.rf-pd__channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.rf-pd__channel { background: #fff; border: 1px solid #f0d8be; border-radius: 10px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--rf-fg-3); font-weight: 500; }
.rf-pd__channel:nth-child(4) { grid-column: 1 / span 1; }
.rf-pd__channel svg, .rf-pd__channel i { width: 18px; height: 18px; color: var(--rf-amber-700); }
.rf-pd__person { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fff; border-radius: 12px; border: 1px solid var(--rf-border-2); margin-top: 4px; }
.rf-pd__person svg, .rf-pd__person i { width: 22px; height: 22px; color: var(--rf-amber-700); }
.rf-pd__person--good svg, .rf-pd__person--good i { color: var(--rf-teal-700); }
.rf-pd__person span { font-weight: 600; font-size: 14px; }
.rf-pd__person-tag { font-size: 11px; padding: 3px 8px; border-radius: 4px; background: #fbe1d3; color: #b8430b; font-weight: 600; margin-left: auto; }
.rf-pd__person-tag--good { background: #d4eadc; color: #1c6342; }
.rf-pd__arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--rf-teal-700); }
.rf-pd__arrow svg, .rf-pd__arrow i { width: 32px; height: 32px; }
.rf-pd__arrow span { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.rf-pd__hub { position: relative; width: 100%; aspect-ratio: 1.4/1; display: flex; align-items: center; justify-content: center; }
.rf-pd__hub-core { background: var(--rf-teal-700); color: #fff; border-radius: 14px; padding: 14px 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 12px 30px -10px rgba(15,80,80,0.4); z-index: 2; }
.rf-pd__hub-core svg, .rf-pd__hub-core i { width: 22px; height: 22px; }
.rf-pd__hub-core span { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.rf-pd__hub-pill { position: absolute; background: #fff; border: 1px solid var(--rf-teal-300); border-radius: 999px; padding: 6px 12px; font-size: 11px; font-weight: 600; color: var(--rf-teal-800); }
.rf-pd__hub-pill--1 { top: 8%; left: 4%; }
.rf-pd__hub-pill--2 { top: 12%; right: 4%; }
.rf-pd__hub-pill--3 { bottom: 12%; left: 50%; transform: translateX(-50%); }

/* Pillars */
.rf-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 16px; }
.rf-pillar { background: #fff; border-radius: 18px; padding: 32px 28px; box-shadow: var(--rf-shadow-card); border: 1px solid var(--rf-border-2); }
.rf-pillar__num { font-family: var(--rf-font-mono); font-size: 12px; font-weight: 600; color: var(--rf-teal-600); letter-spacing: .04em; }
.rf-pillar h3 { margin: 8px 0 10px; font-size: 22px; color: var(--rf-teal-900); }
.rf-pillar p { font-size: 15px; color: var(--rf-fg-3); line-height: 1.55; }

/* Features */
.rf-feature { background: #fff; border-radius: 20px; padding: 40px; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; border: 1px solid var(--rf-border-2); margin-bottom: 24px; align-items: center; }
.rf-feature__visual { background: linear-gradient(160deg, #ecf2f3 0%, #d8e3e6 100%); border-radius: 20px; padding: 32px; display: flex; align-items: center; justify-content: center; min-height: 520px; position: relative; overflow: hidden; }
.rf-feature__visual::before { content: ''; position: absolute; top: -30%; right: -20%; width: 70%; height: 80%; background: radial-gradient(closest-side, rgba(31,138,141,0.18), transparent); pointer-events: none; }
.rf-feature__visual::after { content: ''; position: absolute; bottom: -20%; left: -10%; width: 50%; height: 60%; background: radial-gradient(closest-side, rgba(236,130,64,0.12), transparent); pointer-events: none; }
.rf-feature__visual > * { position: relative; z-index: 1; }
.rf-feature--wide { grid-template-columns: 1.3fr 1fr; }
.rf-feature--wide .rf-feature__visual { padding: 40px 24px; min-height: 480px; }
.rf-feature__txt {  }
.rf-feature__icon-tile { width: 52px; height: 52px; border-radius: 12px; background: var(--rf-teal-100); color: var(--rf-teal-800); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.rf-feature__icon-tile.amber { background: var(--rf-amber-100); color: var(--rf-amber-700); }
.rf-feature__icon-tile svg, .rf-feature__icon-tile i { width: 26px; height: 26px; }
.rf-feature h3 { font-size: 28px; margin-bottom: 6px; color: var(--rf-teal-900); }
.rf-feature__sub { font-size: 15px; color: var(--rf-amber-700); font-weight: 600; margin-bottom: 16px; }
.rf-feature__sub.teal { color: var(--rf-teal-600); }
.rf-feature__body { font-size: 16px; color: var(--rf-fg-3); line-height: 1.6; margin-bottom: 22px; }
.rf-feature__steps { display: flex; flex-direction: column; gap: 10px; }
.rf-feature__step { display: flex; align-items: center; gap: 16px; background: var(--rf-slate-50); border-radius: 12px; padding: 14px 18px; }
.rf-feature__step-num { width: 32px; height: 32px; min-width: 32px; border-radius: 8px; background: var(--rf-teal-700); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.rf-feature__step span { font-size: 14px; color: var(--rf-fg-2); line-height: 1.5; }
/* Feature zigzag — alternate the visual to the right on flagged rows.
   Only on the 2-column desktop layout (>=1101px); stacked layout below. */
@media (min-width: 1101px) {
  .rf-feature--flip { grid-template-columns: 1.15fr 0.85fr; }
  .rf-feature--flip .rf-feature__visual { order: 2; }
}

/* Phone mockup (used by features 1, 2, 4, 5 + mobile section) */
.phone { width: 280px; max-width: 100%; aspect-ratio: 9/19; background: #0c1a22; border-radius: 36px; padding: 8px; box-shadow: 0 24px 60px -20px rgba(15,40,50,0.4); position: relative; }
.phone__notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 90px; height: 22px; background: #0c1a22; border-radius: 0 0 14px 14px; z-index: 3; }
.phone__screen { width: 100%; height: 100%; background: #f7f9fa; border-radius: 28px; display: flex; flex-direction: column; overflow: hidden; }
.phone__status { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px 6px; font-size: 12px; font-weight: 700; color: var(--rf-fg-2); }
.phone__status-icons { display: flex; gap: 4px; }
.phone__status-icons svg, .phone__status-icons i { width: 13px; height: 13px; color: var(--rf-fg-2); }
.phone__app-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px 12px; font-size: 14px; font-weight: 700; color: var(--rf-fg-2); }
.phone__app-head svg, .phone__app-head i { width: 18px; height: 18px; color: var(--rf-fg-3); }

/* Phone — Camera (Snap & Go) */
.phone-cam { flex: 1; display: flex; flex-direction: column; }
.phone-cam__view { flex: 1; background: linear-gradient(160deg, #2a3f4a 0%, #1a2a33 100%); position: relative; overflow: hidden; margin: 0 8px; border-radius: 16px; }
.phone-cam__crosshair { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; transform: translate(-50%, -50%); border: 2px solid rgba(255,255,255,0.25); border-radius: 50%; }
.phone-cam__crosshair::after { content: ''; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); }
.phone-cam__grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 33.33% 33.33%; }
.phone-cam__bracket { position: absolute; width: 18px; height: 18px; border-color: #ec8240; border-style: solid; }
.phone-cam__bracket--tl { top: 30%; left: 22%; border-width: 2px 0 0 2px; }
.phone-cam__bracket--tr { top: 30%; right: 22%; border-width: 2px 2px 0 0; }
.phone-cam__bracket--bl { bottom: 38%; left: 22%; border-width: 0 0 2px 2px; }
.phone-cam__bracket--br { bottom: 38%; right: 22%; border-width: 0 2px 2px 0; }
.phone-cam__ai { position: absolute; bottom: 12px; left: 12px; right: 12px; background: rgba(255,255,255,0.96); border-radius: 12px; padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; }
.phone-cam__ai > svg, .phone-cam__ai > i { width: 18px; height: 18px; color: #ec8240; flex-shrink: 0; margin-top: 2px; }
.phone-cam__ai-l { font-size: 10px; color: var(--rf-fg-4); text-transform: uppercase; font-weight: 700; letter-spacing: .04em; }
.phone-cam__ai-t { font-size: 13px; font-weight: 700; color: var(--rf-fg-2); margin-top: 2px; }
.phone-cam__ai-tags { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.phone-cam__ai-tags span { font-size: 10px; padding: 2px 8px; border-radius: 4px; background: var(--rf-teal-100); color: var(--rf-teal-800); font-weight: 600; }
.phone-cam__ai-tags .amb { background: var(--rf-amber-100); color: var(--rf-amber-700); }
.phone-cam__controls { display: flex; justify-content: space-around; align-items: center; padding: 18px 0 24px; }
.phone-cam__pill { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center; }
.phone-cam__pill svg, .phone-cam__pill i { width: 16px; height: 16px; color: var(--rf-fg-2); }
.phone-cam__shutter { width: 56px; height: 56px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(0,0,0,0.06), 0 0 0 6px #fff, 0 0 0 8px var(--rf-fg-2); }

/* Phone — Chat */
.phone__chat-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; border-bottom: 1px solid var(--rf-border-2); background: #fff; }
.phone__chat-head svg, .phone__chat-head i { width: 18px; height: 18px; color: var(--rf-fg-3); }
.phone__chat-meta { flex: 1; }
.phone__chat-title { font-size: 13px; font-weight: 700; color: var(--rf-fg-2); }
.phone__chat-sub { font-size: 11px; color: var(--rf-fg-4); margin-top: 2px; }
.phone__chat-sub .dot-live { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #1c8460; margin-right: 4px; }
.phone-chat { flex: 1; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; background: #f7f9fa; }
.phone-chat__day { text-align: center; font-size: 10px; color: var(--rf-fg-4); font-weight: 600; padding: 4px 0; }
.phone-chat__msg { display: flex; gap: 8px; max-width: 85%; }
.phone-chat__msg--out { align-self: flex-end; flex-direction: row-reverse; }
.phone-chat__avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--rf-teal-700); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; align-self: flex-end; }
.phone-chat__name { font-size: 10px; color: var(--rf-fg-4); margin-bottom: 3px; font-weight: 600; }
.phone-chat__bubble { background: #fff; border: 1px solid var(--rf-border-2); border-radius: 12px 12px 12px 2px; padding: 8px 12px; font-size: 12px; color: var(--rf-fg-2); line-height: 1.4; }
.phone-chat__bubble--out { background: var(--rf-teal-700); color: #fff; border-color: var(--rf-teal-700); border-radius: 12px 12px 2px 12px; }
.phone-chat__bubble--photo { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.phone-chat__photo { background: rgba(255,255,255,0.15); border-radius: 8px; height: 80px; display: flex; align-items: center; justify-content: center; }
.phone-chat__photo svg, .phone-chat__photo i { width: 26px; height: 26px; color: rgba(255,255,255,0.7); }
.phone-chat__bubble--photo span { font-size: 10px; opacity: 0.85; }
.phone-chat__input { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--rf-border-2); background: #fff; }
.phone-chat__input svg, .phone-chat__input i { width: 18px; height: 18px; color: var(--rf-fg-3); }
.phone-chat__input span { flex: 1; font-size: 12px; color: var(--rf-fg-4); background: var(--rf-slate-50); padding: 8px 12px; border-radius: 999px; }

/* Phone — List */
.phone-list__filters { display: flex; gap: 6px; padding: 4px 12px 10px; overflow-x: auto; }
.phone-list__chip { font-size: 11px; padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--rf-border-2); color: var(--rf-fg-3); white-space: nowrap; font-weight: 600; }
.phone-list__chip.is-active { background: var(--rf-teal-700); color: #fff; border-color: var(--rf-teal-700); }
.phone-list { flex: 1; padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.phone-list__item { display: grid; grid-template-columns: 4px 1fr; background: #fff; border: 1px solid var(--rf-border-2); border-radius: 12px; overflow: hidden; }
.phone-list__bar { background: var(--rf-fg-4); }
.phone-list__bar--crit { background: #d6512f; } .phone-list__bar--high { background: #ec8240; } .phone-list__bar--low { background: var(--rf-teal-300); }
.phone-list__body { padding: 10px 12px; }
.phone-list__row1 { display: flex; justify-content: space-between; align-items: center; }
.phone-list__id { font-family: var(--rf-font-mono); font-size: 10px; color: var(--rf-fg-4); font-weight: 600; }
.phone-list__title { font-size: 13px; font-weight: 700; color: var(--rf-fg-2); margin-top: 3px; }
.phone-list__meta { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--rf-fg-3); margin-top: 4px; }
.phone-list__meta svg, .phone-list__meta i { width: 11px; height: 11px; }
.phone-list__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.phone-list__sla { font-family: var(--rf-font-mono); font-size: 10px; color: var(--rf-fg-4); font-weight: 600; }
.phone-list__fab { position: absolute; bottom: 18px; right: 18px; width: 48px; height: 48px; border-radius: 14px; background: var(--rf-primary); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 24px -8px rgba(15,80,80,0.4); }
.phone-list__fab svg, .phone-list__fab i { width: 22px; height: 22px; }

/* Phone — Hierarchy tree */
.phone-tree { padding: 4px 12px; flex: 1; overflow: hidden; }
.phone-tree__node { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--rf-border-2); border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; }
.phone-tree__node--root { background: var(--rf-teal-700); border-color: var(--rf-teal-700); color: #fff; }
.phone-tree__node--root .phone-tree__t { color: #fff; }
.phone-tree__node--root .phone-tree__s { color: rgba(255,255,255,0.7); }
.phone-tree__icon { width: 32px; height: 32px; border-radius: 8px; background: var(--rf-slate-50); color: var(--rf-fg-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.phone-tree__icon.teal { background: rgba(255,255,255,0.15); color: #fff; }
.phone-tree__icon svg, .phone-tree__icon i { width: 16px; height: 16px; }
.phone-tree__t { font-size: 12px; font-weight: 700; color: var(--rf-fg-2); }
.phone-tree__s { font-size: 10px; color: var(--rf-fg-3); margin-top: 2px; }
.phone-tree__node > div { flex: 1; }
.phone-tree__node > svg, .phone-tree__node > i { width: 14px; height: 14px; color: var(--rf-fg-4); }
.phone-tree__child { padding-left: 16px; border-left: 2px solid var(--rf-border-2); margin-left: 16px; }
.phone-tree__grand { padding-left: 12px; margin-bottom: 6px; }
.phone-tree__leaf { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--rf-fg-3); padding: 6px 10px; background: var(--rf-slate-50); border-radius: 8px; margin-bottom: 4px; }
.phone-tree__leaf svg, .phone-tree__leaf i { width: 12px; height: 12px; color: var(--rf-fg-4); }
.phone-tree__leaf span:first-of-type { flex: 1; }
.phone-tree__pill { font-size: 10px; padding: 2px 8px; border-radius: 4px; background: var(--rf-teal-100); color: var(--rf-teal-800); font-weight: 600; }
.phone-rls { display: flex; align-items: center; gap: 10px; margin: 8px 12px 12px; padding: 10px 12px; background: var(--rf-teal-50); border: 1px solid var(--rf-teal-300); border-radius: 12px; }
.phone-rls > svg, .phone-rls > i { width: 22px; height: 22px; color: var(--rf-teal-700); flex-shrink: 0; }
.phone-rls__t { font-size: 12px; font-weight: 700; color: var(--rf-teal-900); }
.phone-rls__s { font-size: 11px; color: var(--rf-fg-3); margin-top: 2px; }

/* Tower (wide) — control tower mockup */
.mock-window--wide { width: 100%; }
.tower { background: #fafbfc; padding: 18px 20px; }
.tower__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 14px; }
.tower__crumb { font-family: var(--rf-font-mono); font-size: 10px; color: var(--rf-teal-600); letter-spacing: .04em; text-transform: uppercase; }
.tower__title { font-size: 16px; font-weight: 700; color: var(--rf-teal-900); margin-top: 4px; }
.tower__filters { display: flex; gap: 6px; }
.tower__chip { font-size: 11px; padding: 5px 10px; border-radius: 6px; background: #fff; border: 1px solid var(--rf-border-2); color: var(--rf-fg-3); font-weight: 600; }
.tower__chip.is-active { background: var(--rf-teal-700); color: #fff; border-color: var(--rf-teal-700); }
.tower__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.tower__kpi { background: #fff; border: 1px solid var(--rf-border-2); border-radius: 10px; padding: 12px; }
.tower__kpi.accent { background: linear-gradient(180deg, #fff 0%, #fdf2e8 100%); border-color: #f1cba4; }
.tower__kpi-l { font-size: 10px; color: var(--rf-fg-4); text-transform: uppercase; font-weight: 700; letter-spacing: .04em; }
.tower__kpi-n { font-size: 22px; font-weight: 800; color: var(--rf-teal-900); margin-top: 4px; line-height: 1; }
.tower__kpi-d { font-size: 10px; margin-top: 4px; font-weight: 600; }
.tower__kpi-d.up { color: #1c8460; } .tower__kpi-d.down { color: #b8430b; }
.tower__row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.tower__panel { background: #fff; border: 1px solid var(--rf-border-2); border-radius: 10px; padding: 12px; }
.tower__panel-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--rf-fg-2); }
.tower__panel-h svg, .tower__panel-h i { width: 14px; height: 14px; color: var(--rf-fg-4); }
.tower__chart { width: 100%; height: 100px; }
.tower__donut { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center; }
.tower__donut svg { width: 90px; height: 90px; transform: rotate(-90deg); }
.tower__legend { display: grid; gap: 5px; font-size: 10px; color: var(--rf-fg-3); }

/* Who-grid */
.rf-who-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.rf-who-card { background: var(--rf-slate-50); border-radius: 18px; padding: 28px 24px; text-align: center; transition: background .2s, transform .2s; }
.rf-who-card:hover { background: var(--rf-teal-50); transform: translateY(-3px); }
.rf-who-card__tile { width: 64px; height: 64px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--rf-teal-800); box-shadow: var(--rf-shadow-sm); }
.rf-who-card__tile svg, .rf-who-card__tile i { width: 28px; height: 28px; }
.rf-who-card h3 { font-size: 17px; margin-bottom: 6px; color: var(--rf-fg-2); }
.rf-who-card p { font-size: 14px; color: var(--rf-fg-3); }

/* Who cards — photo variant */
.rf-who-card--photo { padding: 0; background: #fff; border: 1px solid var(--rf-line); overflow: hidden; box-shadow: 0 1px 0 rgba(14,79,81,0.04); }
.rf-who-card--photo:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 22px 44px -28px rgba(14,79,81,0.28); }
.rf-who-card__photo { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--rf-slate-100); }
.rf-who-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.rf-who-card--photo:hover .rf-who-card__photo img { transform: scale(1.04); }
.rf-who-card__photo-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,46,48,0) 40%, rgba(11,46,48,0.55) 100%); }
.rf-who-card__chip { position: absolute; top: 14px; left: 14px; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.94); backdrop-filter: blur(8px); display: grid; place-items: center; color: var(--rf-teal-800); box-shadow: 0 6px 18px -8px rgba(11,46,48,0.4); }
.rf-who-card__chip svg, .rf-who-card__chip i { width: 22px; height: 22px; }
.rf-who-card__body { padding: 22px 22px 24px; text-align: left; }
.rf-who-card__body h3 { margin: 0 0 6px; }

/* Avatar photo support — testimonial + reviews */
.rf-quote__avatar img, .rf-review__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.rf-quote__avatar { overflow: hidden; padding: 0; }
.rf-review__avatar { overflow: hidden; padding: 0; }

/* Impact metrics */
.rf-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rf-metric { background: #fff; border-radius: 20px; padding: 40px 32px; border: 1px solid var(--rf-border-2); }
.rf-metric__n { font-size: clamp(40px, 4vw, 52px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--rf-teal-800); margin-bottom: 12px; }
.rf-metric__l { font-size: 16px; color: var(--rf-fg-3); }

/* Pricing */
.rf-billing { display: inline-flex; gap: 4px; background: var(--rf-slate-50); border: 1px solid var(--rf-border-2); border-radius: 10px; padding: 4px; margin-top: 24px; }
.rf-billing button { background: transparent; border: 0; padding: 8px 18px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--rf-fg-3); display: inline-flex; align-items: center; gap: 8px; }
.rf-billing button.is-active { background: #fff; color: var(--rf-fg-2); box-shadow: var(--rf-shadow-sm); }
.rf-billing em { font-style: normal; font-size: 11px; padding: 2px 6px; border-radius: 4px; background: #d4eadc; color: #1c6342; font-weight: 600; }
.rf-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.rf-tier { background: #fff; border: 1px solid var(--rf-border-2); border-radius: 20px; padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.rf-tier.is-popular { border-color: var(--rf-teal-700); box-shadow: 0 24px 60px -24px rgba(15,80,80,0.3); transform: translateY(-8px); }
.rf-tier__ribbon { position: absolute; top: -32px; left: 50%; transform: translateX(-50%); background: var(--rf-teal-700); color: #fff; font-size: 11px; font-weight: 700; padding: 6px 14px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.rf-tier__name { font-size: 20px; font-weight: 800; color: var(--rf-teal-900); }
.rf-tier__tag { font-size: 13px; color: var(--rf-fg-3); margin-top: -12px; min-height: 18px; }
.rf-tier__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--rf-border-2); }
.rf-tier__amount { font-size: 40px; font-weight: 800; color: var(--rf-teal-900); letter-spacing: -0.02em; line-height: 1; }
.rf-tier__per { font-size: 13px; color: var(--rf-fg-4); }
.rf-tier__cta { justify-content: center; width: 100%; }
.rf-tier__feats { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rf-tier__feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--rf-fg-2); line-height: 1.45; }
.rf-tier__feats li svg, .rf-tier__feats li i { width: 16px; height: 16px; min-width: 16px; color: var(--rf-teal-700); margin-top: 2px; }

/* Mobile section */
.rf-mobile-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.rf-mobile-bullets { display: grid; gap: 18px; margin: 28px 0 32px; }
.rf-mobile-bullet { display: flex; gap: 16px; align-items: flex-start; }
.rf-mobile-bullet__check { width: 28px; height: 28px; min-width: 28px; border-radius: 50%; background: var(--rf-teal-100); color: var(--rf-teal-800); display: flex; align-items: center; justify-content: center; }
.rf-mobile-bullet__check svg, .rf-mobile-bullet__check i { width: 16px; height: 16px; }
.rf-mobile-bullet h4 { font-size: 17px; margin-bottom: 4px; color: var(--rf-fg-2); }
.rf-mobile-bullet p { font-size: 15px; color: var(--rf-fg-3); }
.rf-mobile-mock { display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(160deg, var(--rf-teal-100) 0%, var(--rf-sage-100) 100%); border-radius: 28px; min-height: 560px; }

/* Footer */
.rf-footer { background: var(--rf-teal-950); color: #c5d6d4; padding: 72px 0 32px; }
.rf-footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.rf-footer__brand img { height: 36px; filter: brightness(0) invert(1); margin-bottom: 16px; }
.rf-footer__tag { font-size: 14px; line-height: 1.6; color: #8da3a1; max-width: 280px; }
.rf-footer h5 { font-size: 13px; font-weight: 700; color: #fff; margin: 0 0 14px; letter-spacing: .04em; text-transform: uppercase; }
.rf-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rf-footer__col a { font-size: 14px; color: #8da3a1; transition: color .15s; }
.rf-footer__col a:hover { color: #fff; }
.rf-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; flex-wrap: wrap; gap: 16px; }
.rf-footer__bottom p { font-size: 13px; color: #6a8482; }
.rf-footer__bottom .rf-lang__btn { color: #8da3a1; }

/* Responsive */
@media (max-width: 1100px) {
  .rf-feature, .rf-feature--wide { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px; }
  .rf-feature__visual { min-height: 0; padding: 32px; }
}
@media (max-width: 980px) {
  .rf-hero { padding-top: 48px; }
  .rf-pillars, .rf-who-grid, .rf-metrics, .rf-mobile-wrap, .rf-footer__top, .rf-pricing { grid-template-columns: 1fr 1fr; }
  .rf-section { padding: 64px 0; }
  .rf-tier.is-popular { transform: none; }
  .rf-problem-grid { grid-template-columns: repeat(2, 1fr); }
  .rf-problem-diagram { grid-template-columns: 1fr; }
  .rf-pd__arrow { transform: rotate(90deg); }
  .mock-dash { grid-template-columns: 56px 1fr; }
  .mock-dash__kpis { grid-template-columns: repeat(2, 1fr); }
  .mock-dash__row { grid-template-columns: 1fr; }
  .tower__kpis { grid-template-columns: repeat(2, 1fr); }
  .tower__row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rf-problem-grid, .rf-pillars, .rf-who-grid, .rf-metrics, .rf-mobile-wrap, .rf-footer__top, .rf-pricing { grid-template-columns: 1fr; }
  .rf-container { padding: 0 20px; }
  .rf-section { padding: 56px 0; }
  .rf-header__cta { display: none; }
}



/* ============ ABSTRACT MOCKUPS (language-neutral) ============ */
.abs-bar { display:inline-block; height:10px; background:#cdd9d8; border-radius:3px; vertical-align:middle; }
.abs-bar--accent { background:#0e4f51; height:10px; }
.abs-bar--light { background:#e8eef0; }
.abs-bar--bar { width:4px; height:14px; border-radius:2px; }
.abs-bar--crit { background:#ec8240; }
.abs-bar--high { background:#febc2e; }
.abs-bar--low  { background:#9bb3b1; }
.abs-pill { display:inline-block; width:38px; height:14px; border-radius:7px; background:#e8eef0; }
.abs-pill--lg { width:56px; height:22px; border-radius:11px; }
.abs-pill--teal { background:rgba(31,138,141,0.18); }
.abs-pill--amber { background:rgba(236,130,64,0.22); }
.abs-pill--crit { background:#fbe1d3; }
.abs-pill--high { background:#fdecd1; }
.abs-pill--low  { background:#e8eef0; }
.abs-pill--active { background:#0e4f51 !important; }
.abs-chip { width:48px; height:18px; border-radius:9px; background:#e8eef0; display:inline-block; }
.abs-chip--active { background:#0e4f51; }

/* Window chrome (desktop browser) */
.abs-window { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 30px 80px -30px rgba(15,40,50,0.35), 0 0 0 1px var(--rf-border-2); }
.abs-window__bar { background:linear-gradient(180deg,#f4f7f8,#e9eef0); padding:10px 14px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--rf-border-2); }
.abs-window__body { padding:0; }
.abs-dot--r,.abs-dot--y,.abs-dot--g { width:11px; height:11px; border-radius:50%; display:inline-block; }
.abs-dot--r { background:#ff5f57; } .abs-dot--y { background:#febc2e; } .abs-dot--g { background:#28c840; }

/* Tower dashboard */
.abs-tower { background:#fafbfc; padding:18px 20px; }
.abs-tower__head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.abs-tower__crumb { display:flex; flex-direction:column; gap:6px; }
.abs-tower__chips { display:flex; gap:6px; }
.abs-tower__kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px; }
.abs-kpi { background:#fff; border:1px solid var(--rf-border-2); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:6px; }
.abs-kpi--accent { background:linear-gradient(180deg,#fff,#fdf2e8); border-color:#f1cba4; }
.abs-kpi__l { width:60px; height:7px; background:#e8eef0; border-radius:3px; }
.abs-kpi__n { width:50px; height:14px; background:#0e4f51; border-radius:3px; }
.abs-kpi--accent .abs-kpi__n { background:#ec8240; }
.abs-kpi__d { width:40px; height:6px; border-radius:3px; }
.abs-kpi__d--up { background:#1c8460; }
.abs-kpi__d--down { background:#b8430b; }
.abs-tower__row { display:grid; grid-template-columns:1.4fr 1fr; gap:10px; margin-bottom:12px; }
.abs-panel { background:#fff; border:1px solid var(--rf-border-2); border-radius:10px; padding:12px; }
.abs-panel__h { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.abs-chart { width:100%; height:90px; }
.abs-donut { display:flex; gap:12px; align-items:center; }
.abs-donut svg { width:80px; height:80px; }
.abs-legend { display:grid; gap:6px; flex:1; }
.abs-legend > div { display:flex; align-items:center; gap:6px; }
.abs-legend .d { width:8px; height:8px; border-radius:50%; }
.abs-list { background:#fff; border:1px solid var(--rf-border-2); border-radius:10px; overflow:hidden; }
.abs-row { display:grid; grid-template-columns:8px 1.5fr 1fr 1fr; gap:12px; padding:10px 14px; align-items:center; border-bottom:1px solid var(--rf-border-2); }
.abs-row:last-child { border-bottom:0; }

/* Hero window */
.rf-hero__mock--abs { padding-top:24px; }
.rf-hero__abs-window { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 30px 80px -30px rgba(15,40,50,0.35), 0 0 0 1px var(--rf-border-2); }
.rf-hero__abs-bar { background:linear-gradient(180deg,#f4f7f8,#e9eef0); padding:10px 14px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--rf-border-2); }
.rf-hero__abs-bar .abs-dot-r,.rf-hero__abs-bar .abs-dot-y,.rf-hero__abs-bar .abs-dot-g { width:11px; height:11px; border-radius:50%; display:inline-block; }
.rf-hero__abs-bar .abs-dot-r { background:#ff5f57; } .rf-hero__abs-bar .abs-dot-y { background:#febc2e; } .rf-hero__abs-bar .abs-dot-g { background:#28c840; }
.rf-hero__abs-body { background:#fafbfc; }

/* Phone bezel */
.abs-phone { width:280px; max-width:100%; aspect-ratio:9/19; background:#0c1a22; border-radius:36px; padding:8px; box-shadow:0 30px 80px -30px rgba(15,40,50,0.45), 0 0 0 1px rgba(255,255,255,0.05); position:relative; margin:0 auto; }
.abs-phone__notch { position:absolute; top:8px; left:50%; transform:translateX(-50%); width:90px; height:22px; background:#0c1a22; border-radius:0 0 14px 14px; z-index:3; }
.abs-phone__screen { width:100%; height:100%; background:#fff; border-radius:28px; overflow:hidden; padding:36px 16px 16px; display:flex; flex-direction:column; gap:10px; }
.abs-phone__status { display:flex; justify-content:space-between; padding:0 6px; }
.abs-status-time { width:32px; height:6px; background:#0c1a22; border-radius:3px; }
.abs-status-icons { display:flex; gap:3px; }
.abs-status-icons span { width:6px; height:6px; background:#0c1a22; border-radius:50%; }
.abs-phone__head { display:flex; justify-content:space-between; align-items:center; padding:6px 6px 8px; border-bottom:1px solid var(--rf-border-2); }

/* Camera (snap & go) */
.abs-cam { display:flex; flex-direction:column; gap:10px; flex:1; }
.abs-cam__view { flex:1; background:linear-gradient(160deg,#1a2f33,#0c1a22); border-radius:12px; position:relative; overflow:hidden; min-height:260px; }
.abs-cam__crosshair { position:absolute; top:50%; left:50%; width:60px; height:60px; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,0.4); border-radius:6px; }
.abs-cam__crosshair::before, .abs-cam__crosshair::after { content:''; position:absolute; background:rgba(255,255,255,0.4); }
.abs-cam__crosshair::before { left:50%; top:-10px; bottom:-10px; width:1px; }
.abs-cam__crosshair::after { top:50%; left:-10px; right:-10px; height:1px; }
.abs-cam__bracket { position:absolute; width:18px; height:18px; border:2px solid #ec8240; }
.abs-cam__bracket--tl { top:14px; left:14px; border-right:0; border-bottom:0; }
.abs-cam__bracket--tr { top:14px; right:14px; border-left:0; border-bottom:0; }
.abs-cam__bracket--bl { bottom:14px; left:14px; border-right:0; border-top:0; }
.abs-cam__bracket--br { bottom:14px; right:14px; border-left:0; border-top:0; }
.abs-cam__ai { position:absolute; bottom:14px; left:14px; right:14px; background:rgba(255,255,255,0.96); border-radius:10px; padding:10px 12px; display:flex; gap:10px; }
.abs-cam__ai svg, .abs-cam__ai i { width:18px; height:18px; color:#ec8240; flex-shrink:0; margin-top:2px; }
.abs-cam__ai-body { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.abs-cam__tags { display:flex; gap:6px; margin-top:6px; }
.abs-cam__ctrl { display:flex; justify-content:space-around; align-items:center; padding:8px 0; }
.abs-cam__btn { width:34px; height:34px; border-radius:8px; background:#e8eef0; }
.abs-cam__shutter { width:54px; height:54px; border-radius:50%; background:#fff; border:4px solid #0c1a22; }

/* Chat */
.abs-chat { display:flex; flex-direction:column; gap:10px; flex:1; padding:6px 0; overflow:hidden; }
.abs-chat__day { width:64px; height:6px; background:#e8eef0; border-radius:3px; align-self:center; }
.abs-chat__msg { display:flex; gap:8px; align-items:flex-end; }
.abs-chat__msg--out { justify-content:flex-end; }
.abs-chat__avatar { width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#1f8a8d,#0e4f51); flex-shrink:0; }
.abs-chat__bubble { background:#f4f7f8; border-radius:12px 12px 12px 4px; padding:10px 12px; min-width:80px; min-height:18px; max-width:70%; }
.abs-chat__bubble::before { content:''; display:block; width:90px; height:6px; background:#cdd9d8; border-radius:3px; }
.abs-chat__bubble::after { content:''; display:block; width:60px; height:6px; background:#cdd9d8; border-radius:3px; margin-top:4px; }
.abs-chat__bubble--out { background:#0e4f51; border-radius:12px 12px 4px 12px; }
.abs-chat__bubble--out::before, .abs-chat__bubble--out::after { background:rgba(255,255,255,0.5); }
.abs-chat__bubble--sm { min-width:50px; }
.abs-chat__bubble--sm::after { display:none; }
.abs-chat__bubble--lg::before { width:110px; }
.abs-chat__bubble--lg::after { width:80px; }
.abs-chat__bubble--photo { padding:0; min-width:120px; min-height:90px; background:linear-gradient(135deg,#cdd9d8,#9bb3b1); display:flex; align-items:center; justify-content:center; }
.abs-chat__bubble--photo svg, .abs-chat__bubble--photo i { width:28px; height:28px; color:rgba(255,255,255,0.9); }
.abs-chat__bubble--photo::before, .abs-chat__bubble--photo::after { display:none; }
.abs-chat__input { display:flex; align-items:center; gap:8px; padding:8px 10px; border-top:1px solid var(--rf-border-2); margin:0 -16px -16px; padding:10px 16px; background:#fff; }
.abs-chat__input svg, .abs-chat__input i { width:16px; height:16px; color:var(--rf-fg-4); }

/* List feature */
.abs-listf { display:flex; flex-direction:column; gap:10px; flex:1; position:relative; }
.abs-listf__filters { display:flex; gap:6px; padding:4px 0; }
.abs-listf__items { display:flex; flex-direction:column; gap:8px; flex:1; overflow:hidden; }
.abs-listf__item { display:flex; gap:10px; background:#f4f7f8; border-radius:10px; padding:10px; }
.abs-listf__bar { width:4px; border-radius:2px; flex-shrink:0; }
.abs-listf__bar--crit { background:#ec8240; } .abs-listf__bar--high { background:#febc2e; } .abs-listf__bar--low { background:#9bb3b1; }
.abs-listf__body { flex:1; display:flex; flex-direction:column; }
.abs-listf__row { display:flex; justify-content:space-between; align-items:center; }
.abs-listf__fab { position:absolute; bottom:6px; right:6px; width:44px; height:44px; border-radius:50%; background:#0e4f51; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px -6px rgba(14,79,81,0.5); }
.abs-listf__fab svg, .abs-listf__fab i { width:22px; height:22px; }

/* Hierarchy tree */
.abs-tree { display:flex; flex-direction:column; gap:8px; flex:1; }
.abs-tree__node { display:flex; gap:10px; align-items:center; background:#f4f7f8; border-radius:10px; padding:10px 12px; }
.abs-tree__node--root { background:#0e4f51; color:#fff; }
.abs-tree__node--root .abs-tree__icon { background:rgba(255,255,255,0.15); color:#fff; }
.abs-tree__icon { width:28px; height:28px; border-radius:6px; background:#0e4f51; color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.abs-tree__icon svg, .abs-tree__icon i { width:14px; height:14px; }
.abs-tree__body { flex:1; display:flex; flex-direction:column; }
.abs-tree__node svg.lucide-chevron-down, .abs-tree__node i[data-lucide="chevron-down"], .abs-tree__node svg.lucide-chevron-right, .abs-tree__node i[data-lucide="chevron-right"] { width:14px; height:14px; color:var(--rf-fg-4); }
.abs-tree__child { padding-left:16px; display:flex; flex-direction:column; gap:8px; border-left:2px solid var(--rf-border-2); margin-left:14px; }
.abs-tree__leaves { display:flex; flex-direction:column; gap:6px; padding-left:14px; }
.abs-tree__leaf { display:flex; gap:8px; align-items:center; padding:8px 10px; background:#fff; border:1px solid var(--rf-border-2); border-radius:8px; }
.abs-tree__leaf svg, .abs-tree__leaf i { width:14px; height:14px; color:var(--rf-teal-700); flex-shrink:0; }
.abs-tree__leaf .abs-bar { flex:1; }
.abs-tree__rls { display:flex; gap:10px; align-items:flex-start; padding:10px; background:#fdf2e8; border-radius:10px; border:1px solid #f1cba4; margin-top:auto; }
.abs-tree__rls svg, .abs-tree__rls i { width:18px; height:18px; color:#ec8240; flex-shrink:0; margin-top:2px; }
.abs-tree__rls > div { display:flex; flex-direction:column; gap:4px; flex:1; }

/* Mobile section visual */
.rf-mobile-mock { display:flex; align-items:center; justify-content:center; padding:24px; background:linear-gradient(160deg, var(--rf-teal-100) 0%, var(--rf-sage-100) 100%); border-radius:28px; min-height:520px; }

/* Mobile stage — real-world backdrop with abstract phone overlaid */
.rf-mobile-stage { position: relative; border-radius: 28px; overflow: hidden; min-height: 560px; isolation: isolate; box-shadow: 0 30px 60px -30px rgba(11,46,48,0.35); }
.rf-mobile-stage__bg { position: absolute; inset: 0; }
.rf-mobile-stage__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rf-mobile-stage__bg-grad { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(11,46,48,0.78) 0%, rgba(31,138,141,0.45) 60%, rgba(236,130,64,0.18) 100%); }
.rf-mobile-stage .rf-mobile-mock { position: relative; z-index: 1; background: transparent; min-height: 560px; padding: 36px 24px; }
.rf-mobile-stage .rf-mobile-mock svg, .rf-mobile-stage .rf-mobile-mock > * { filter: drop-shadow(0 30px 50px rgba(0,0,0,0.35)); }

/* Problem diagram refinements (icons-only channels) */
.rf-pd__channel { padding:14px; aspect-ratio:1/1; }
.rf-pd__channel svg, .rf-pd__channel i { width:22px; height:22px; }
.rf-pd__bar { width:80px; height:8px; background:rgba(0,0,0,0.08); border-radius:3px; }
.rf-pd__bar--w1 { width:80px; }
.rf-pd__hub-pill { display:flex; align-items:center; justify-content:center; }
.rf-pd__hub-pill svg, .rf-pd__hub-pill i { width:18px; height:18px; }
.rf-pd__hub-core svg, .rf-pd__hub-core i { width:22px; height:22px; }
.rf-pd__person-tag { width:auto; min-width:24px; text-align:center; }

/* Minimal footer */
.rf-footer--minimal { padding:48px 0 28px; }
.rf-footer--minimal .rf-footer__row { display:flex; justify-content:space-between; align-items:flex-start; gap:32px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,0.08); flex-wrap:wrap; }
.rf-footer--minimal .rf-footer__brand { max-width:300px; }
.rf-footer--minimal .rf-footer__brand img { height:32px; margin-bottom:10px; }
.rf-footer__links { display:flex; gap:28px; flex-wrap:wrap; align-items:center; padding-top:6px; }
.rf-footer__links a { font-size:14px; color:#8da3a1; transition:color .15s; }
.rf-footer__links a:hover { color:#fff; }



/* ============ HERO POLISH ============ */
.rf-hero { position: relative; padding: 96px 0 56px; overflow: hidden; background: linear-gradient(180deg, #f4f8f8 0%, #f6f7f9 65%); }
.rf-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.rf-hero__blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; }
.rf-hero__blob--1 { width: 540px; height: 540px; top: -160px; right: -120px; background: radial-gradient(circle, rgba(31,138,141,0.45), transparent 70%); }
.rf-hero__blob--2 { width: 460px; height: 460px; bottom: -180px; left: -100px; background: radial-gradient(circle, rgba(236,130,64,0.32), transparent 70%); }
.rf-hero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(14,79,81,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(14,79,81,0.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 35%, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 35%, black 30%, transparent 75%); }
.rf-hero__inner { position: relative; }

.rf-hero__badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border-radius: 999px; background: rgba(255,255,255,0.85); border: 1px solid var(--rf-border-1); backdrop-filter: blur(8px); font-size: 13px; font-weight: 600; color: var(--rf-teal-800); margin-bottom: 28px; transition: transform .18s, box-shadow .18s; box-shadow: 0 6px 20px -8px rgba(14,79,81,0.18); }
.rf-hero__badge:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(14,79,81,0.28); }
.rf-hero__badge svg, .rf-hero__badge i { width: 14px; height: 14px; transition: transform .18s; }
.rf-hero__badge:hover svg { transform: translateX(2px); }
.rf-hero__badge-pulse { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--rf-amber-700); display: inline-block; }
.rf-hero__badge-pulse::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: var(--rf-amber-700); opacity: .4; animation: rf-pulse 1.6s ease-out infinite; }
@keyframes rf-pulse { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(1.7); opacity: 0; } }

.rf-hero__title { max-width: 880px; font-size: clamp(40px, 6.2vw, 76px); line-height: 1.02; letter-spacing: -0.025em; margin-bottom: 20px; }
.rf-hero__sub { font-size: clamp(18px, 1.8vw, 22px); color: var(--rf-teal-700); font-weight: 500; max-width: 640px; }
.rf-hero__body { max-width: 580px; margin-top: 18px; }
.rf-hero__ctas { margin-top: 32px; margin-bottom: 18px; }

.rf-btn--ghost { background: transparent; color: var(--rf-fg-2); border: 1px solid transparent; padding-left: 8px; }
.rf-btn--ghost:hover { color: var(--rf-teal-800); }
.rf-btn__play { width: 32px; height: 32px; border-radius: 50%; background: var(--rf-teal-100); color: var(--rf-teal-800); display: inline-flex; align-items: center; justify-content: center; margin-right: 4px; }
.rf-btn__play svg, .rf-btn__play i { width: 14px; height: 14px; fill: currentColor; }

.rf-hero__assure { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 56px; font-size: 13px; color: var(--rf-fg-3); font-weight: 500; }
.rf-hero__assure span { display: inline-flex; align-items: center; gap: 6px; }
.rf-hero__assure svg, .rf-hero__assure i { width: 14px; height: 14px; color: var(--rf-teal-700); }

/* Hero stage with floating notifications */
.rf-hero__stage { position: relative; }
.rf-hero__mock { margin-top: 0; }
.rf-hero__float { position: absolute; background: rgba(255,255,255,0.97); backdrop-filter: blur(8px); border-radius: 14px; box-shadow: 0 18px 44px -16px rgba(14,79,81,0.25), 0 0 0 1px var(--rf-border-2); padding: 12px 14px; display: flex; align-items: center; gap: 12px; min-width: 220px; z-index: 5; animation: rf-float 6s ease-in-out infinite; }
.rf-hero__float-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--rf-teal-100); color: var(--rf-teal-800); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rf-hero__float-icon svg, .rf-hero__float-icon i { width: 18px; height: 18px; }
.rf-hero__float-icon--ai { background: linear-gradient(135deg, #fde2cc, #fdf2e8); color: var(--rf-amber-700); }
.rf-hero__float-icon--ok { background: #d4eadc; color: #1c8460; }
.rf-hero__float-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rf-hero__float-title { font-size: 13px; font-weight: 700; color: var(--rf-fg-1); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rf-hero__float { min-width: 230px; }
.rf-hero__float--ai { min-width: 250px; }
.rf-hero__float-sub { font-size: 11px; color: var(--rf-fg-3); font-family: var(--rf-font-mono); letter-spacing: 0.01em; }
.rf-hero__float-tag { font-size: 10px; padding: 2px 7px; border-radius: 4px; font-weight: 700; }
.rf-hero__float-tag--crit { background: #fbe1d3; color: #b8430b; }
.rf-hero__float-tag--ok { background: #d4eadc; color: #1c6342; }
.rf-hero__float-dot { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; }
.rf-hero__float-dot--live { background: #ec8240; box-shadow: 0 0 0 0 rgba(236,130,64,0.6); animation: rf-pulse-dot 1.6s ease-out infinite; }
@keyframes rf-pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(236,130,64,0.5);} 70% { box-shadow: 0 0 0 12px rgba(236,130,64,0);} 100% { box-shadow: 0 0 0 0 rgba(236,130,64,0);} }
@keyframes rf-float { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-6px);} }
.rf-hero__float--photo { top: 14%; left: -16px; animation-delay: 0s; }
.rf-hero__float--ai    { top: 38%; right: -28px; animation-delay: 1.2s; }
.rf-hero__float--sla   { bottom: 12%; left: 8%; animation-delay: 2.4s; }
@media (max-width: 980px) { .rf-hero__float { display: none; } }

/* Trust strip */
.rf-trust { margin-top: 48px; padding: 28px 0 8px; display: flex; flex-direction: column; gap: 18px; align-items: center; opacity: 0.86; }
.rf-trust__label { font-family: var(--rf-font-mono); font-size: 11px; color: var(--rf-fg-4); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }
.rf-trust__logos { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; align-items: center; }
.rf-trust__logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--rf-fg-3); letter-spacing: -0.01em; filter: grayscale(1); transition: filter .2s, color .2s; }
.rf-trust__logo:hover { filter: grayscale(0); color: var(--rf-fg-2); }
.rf-trust__mark { width: 22px; height: 22px; border-radius: 6px; background: var(--rf-teal-700); display: inline-block; }
.rf-trust__mark--diamond { background: var(--rf-amber-700); transform: rotate(45deg); border-radius: 4px; }
.rf-trust__mark--circle { background: var(--rf-teal-500, #1f8a8d); border-radius: 50%; }
.rf-trust__mark--bars { background: linear-gradient(90deg, var(--rf-teal-700) 33%, transparent 33%, transparent 66%, var(--rf-teal-700) 66%); border-radius: 3px; }
.rf-trust__mark--tri { width: 0; height: 0; background: transparent; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 19px solid var(--rf-amber-700); border-radius: 0; }

/* ============ TESTIMONIAL ============ */
.rf-section--testimonial { background: linear-gradient(160deg, var(--rf-teal-950) 0%, #0a3a3c 100%); color: #fff; padding: 88px 0; position: relative; overflow: hidden; }
.rf-section--testimonial::before { content: ''; position: absolute; top: -120px; right: -120px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(236,130,64,0.18), transparent 70%); border-radius: 50%; pointer-events: none; }
.rf-section--testimonial::after { content: ''; position: absolute; bottom: -120px; left: -120px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(31,138,141,0.32), transparent 70%); border-radius: 50%; pointer-events: none; }
.rf-quote { max-width: 880px; margin: 0 auto; position: relative; z-index: 1; }
.rf-quote__mark { width: 48px; height: 48px; color: var(--rf-amber-700); margin-bottom: 24px; opacity: .9; }
.rf-quote__text { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.35; font-weight: 500; letter-spacing: -0.015em; color: #fff; margin: 0 0 32px; max-width: 820px; }
.rf-quote__author { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rf-quote__avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--rf-amber-700), #d97a3c); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; letter-spacing: 0.02em; }
.rf-quote__name { font-weight: 700; font-size: 17px; color: #fff; }
.rf-quote__role { font-size: 13px; color: #8da3a1; margin-top: 2px; }
.rf-quote__stats { display: flex; gap: 24px; margin-left: auto; padding-left: 24px; border-left: 1px solid rgba(255,255,255,0.15); }
.rf-quote__stats > div { display: flex; flex-direction: column; }
.rf-quote__stats strong { font-size: 24px; font-weight: 800; color: var(--rf-amber-700); letter-spacing: -0.02em; }
.rf-quote__stats span { font-size: 11px; color: #8da3a1; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
@media (max-width: 700px) { .rf-quote__stats { margin-left: 0; padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 16px; width: 100%; } }

/* ============ FAQ ============ */
.rf-faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.rf-faq__item { background: #fff; border: 1px solid var(--rf-border-2); border-radius: 14px; overflow: hidden; transition: border-color .18s, box-shadow .18s; }
.rf-faq__item[open] { border-color: var(--rf-teal-300); box-shadow: 0 8px 28px -16px rgba(14,79,81,0.22); }
.rf-faq__item summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 600; font-size: 16px; color: var(--rf-fg-1); }
.rf-faq__item summary::-webkit-details-marker { display: none; }
.rf-faq__plus { width: 20px; height: 20px; color: var(--rf-teal-700); transition: transform .25s; flex-shrink: 0; }
.rf-faq__item[open] .rf-faq__plus { transform: rotate(45deg); }
.rf-faq__body { padding: 0 24px 22px; color: var(--rf-fg-3); font-size: 15px; line-height: 1.65; max-width: 660px; }

/* ============ STICKY CTA ============ */
.rf-sticky { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(140%); z-index: 90; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s; opacity: 0; pointer-events: none; }
.rf-sticky.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.rf-sticky__inner { background: var(--rf-teal-950); color: #fff; border-radius: 100px; padding: 5px 5px 5px 18px; display: flex; align-items: center; gap: 14px; box-shadow: 0 22px 60px -18px rgba(14,79,81,0.55), 0 0 0 1px rgba(255,255,255,0.08); }
.rf-sticky__txt { display: flex; flex-direction: column; line-height: 1.2; }
.rf-sticky__txt strong { font-size: 14px; }
.rf-sticky__txt span { font-size: 12px; color: #8da3a1; margin-top: 2px; }
.rf-sticky .rf-btn--primary { padding: 8px 15px; font-size: 13px; }
@media (max-width: 600px) { .rf-sticky { left: 12px; right: 12px; transform: translateY(140%); } .rf-sticky.is-visible { transform: translateY(0); } .rf-sticky__inner { width: 100%; justify-content: space-between; padding: 8px 8px 8px 16px; } .rf-sticky__txt strong { font-size: 13px; } }

/* ============ MISC FIXES ============ */
.rf-eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; font-family: var(--rf-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rf-teal-700); background: var(--rf-teal-100); white-space: nowrap; }
.rf-eyebrow--amber { color: var(--rf-amber-700); background: var(--rf-amber-100); }

/* Pillar cards: add a subtle accent + icon space */
.rf-pillar { position: relative; overflow: hidden; }
.rf-pillar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--rf-teal-700), transparent); }
.rf-pillar:nth-child(2)::before { background: linear-gradient(90deg, var(--rf-amber-700), transparent); }
.rf-pillar:nth-child(3)::before { background: linear-gradient(90deg, #1f8a8d, transparent); }

/* Hero ::before/::after glow under window */
.rf-hero__abs-window { position: relative; }
.rf-hero__abs-window::before { content: ''; position: absolute; bottom: -30px; left: 8%; right: 8%; height: 30px; background: radial-gradient(ellipse at center, rgba(14,79,81,0.18), transparent 70%); filter: blur(12px); z-index: -1; }


/* ============ RATINGS / REVIEWS ============ */
.rf-section--ratings { background: linear-gradient(180deg, #ffffff 0%, var(--rf-cream-50) 100%); }
.rf-ratings { display: grid; grid-template-columns: 320px 1fr; gap: 48px; margin-top: 56px; align-items: start; }
/* When there are no approved reviews yet, the aggregate panel is hidden
   (see renderRatings) and the empty state spans the full width. */
.rf-ratings--solo { grid-template-columns: 1fr; }
@media (max-width: 900px) { .rf-ratings { grid-template-columns: 1fr; gap: 36px; } }
.rf-ratings__agg { background: #fff; border: 1px solid var(--rf-border-2); border-radius: 18px; padding: 28px; position: sticky; top: 92px; }
.rf-ratings__score { font-family: var(--rf-font-display); font-size: 64px; line-height: 1; font-weight: 700; color: var(--rf-teal-950); letter-spacing: -0.02em; }
.rf-ratings__stars { display: inline-flex; gap: 4px; margin-top: 12px; }
.rf-ratings__stars i { width: 20px; height: 20px; color: var(--rf-amber-700); fill: currentColor; }
.rf-ratings__count { display: flex; gap: 6px; align-items: baseline; margin-top: 10px; color: var(--rf-fg-3); font-size: 14px; }
.rf-ratings__count #rf-rating-count { font-weight: 700; color: var(--rf-fg-1); font-size: 16px; }
.rf-ratings__bars { display: grid; gap: 8px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--rf-border-2); }
.rf-rating-bar { display: grid; grid-template-columns: 14px 14px 1fr 32px; align-items: center; gap: 8px; font-size: 12px; color: var(--rf-fg-3); }
.rf-rating-bar__n { font-weight: 600; color: var(--rf-fg-2); }
.rf-rating-bar i { width: 12px; height: 12px; color: var(--rf-amber-700); fill: currentColor; }
.rf-rating-bar__track { height: 6px; background: var(--rf-bg-2); border-radius: 100px; overflow: hidden; }
.rf-rating-bar__fill { height: 100%; background: linear-gradient(90deg, var(--rf-amber-700), #f0a04b); border-radius: 100px; }
.rf-rating-bar__c { text-align: right; font-variant-numeric: tabular-nums; }

.rf-ratings__list { display: grid; gap: 16px; }
.rf-review { background: #fff; border: 1px solid var(--rf-border-2); border-radius: 16px; padding: 22px 24px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.rf-review:hover { border-color: var(--rf-teal-300); transform: translateY(-2px); box-shadow: 0 12px 32px -20px rgba(14,79,81,0.18); }
.rf-review__head { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; }
.rf-review__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--rf-teal-700), var(--rf-teal-950)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 16px; }
.rf-review__name { font-weight: 600; color: var(--rf-fg-1); font-size: 15px; }
.rf-review__role { font-size: 12px; color: var(--rf-fg-3); margin-top: 2px; }
.rf-review__stars { display: inline-flex; gap: 2px; }
.rf-review__stars i { width: 14px; height: 14px; color: #d8d8d8; fill: currentColor; }
.rf-review__stars i.is-on { color: var(--rf-amber-700); }
.rf-review__text { margin: 14px 0 8px; color: var(--rf-fg-2); line-height: 1.6; font-size: 14.5px; }
.rf-review__date { font-size: 12px; color: var(--rf-fg-3); }

/* Submit form */
.rf-ratings__form { margin-top: 56px; max-width: 760px; margin-left: auto; margin-right: auto; background: #fff; border: 1px solid var(--rf-border-2); border-radius: 20px; padding: 36px; box-shadow: 0 18px 48px -28px rgba(14,79,81,0.18); }
.rf-ratings__form-head h3 { font-family: var(--rf-font-display); font-size: 24px; color: var(--rf-teal-950); margin: 0 0 6px; letter-spacing: -0.01em; }
.rf-ratings__form-head p { color: var(--rf-fg-3); font-size: 14px; margin: 0 0 24px; }
.rf-ratings__field { display: grid; gap: 8px; margin-bottom: 18px; }
.rf-ratings__field label { font-size: 12px; font-weight: 600; color: var(--rf-fg-2); text-transform: uppercase; letter-spacing: 0.04em; }
.rf-ratings__field input, .rf-ratings__field textarea { font: inherit; padding: 12px 14px; border: 1px solid var(--rf-border-2); border-radius: 10px; background: var(--rf-bg-1); color: var(--rf-fg-1); transition: border-color .15s, background .15s; resize: vertical; font-family: inherit; }
.rf-ratings__field input:focus, .rf-ratings__field textarea:focus { outline: none; border-color: var(--rf-teal-700); background: #fff; box-shadow: 0 0 0 3px var(--rf-teal-100); }
.rf-ratings__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .rf-ratings__row2 { grid-template-columns: 1fr; } .rf-ratings__form { padding: 24px; } }
.rf-ratings__field--rate label { margin-bottom: 4px; }
.rf-stars-input { display: inline-flex; gap: 6px; transition: transform .25s; }
.rf-stars-input button { background: transparent; border: 0; padding: 6px; cursor: pointer; border-radius: 8px; transition: transform .12s, background .12s; }
.rf-stars-input button:hover { background: var(--rf-amber-100); }
.rf-stars-input button i, .rf-stars-input button svg { width: 28px; height: 28px; color: #d8d8d8; fill: currentColor; transition: color .12s, transform .12s; pointer-events: none; }
.rf-stars-input button.is-on i, .rf-stars-input button.is-on svg { color: var(--rf-amber-700); transform: scale(1.05); }

/* Inline SVG star — used everywhere (review list, aggregate, rating bars) */
.rf-svgstar { width: 14px; height: 14px; color: #d8d8d8; display: inline-block; vertical-align: middle; }
.rf-svgstar.is-on { color: var(--rf-amber-700); }
.rf-ratings__stars .rf-svgstar { width: 20px; height: 20px; }
.rf-ratings__stars .rf-svgstar.is-on { color: var(--rf-amber-700); }
.rf-rating-bar .rf-svgstar { width: 12px; height: 12px; }
.rf-review__stars .rf-svgstar { width: 14px; height: 14px; }

/* Empty state when no reviews exist yet */
.rf-ratings__empty {
  background: #fff;
  border: 1px dashed var(--rf-border-2);
  border-radius: 16px;
  padding: 36px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.rf-ratings__empty i, .rf-ratings__empty svg {
  width: 40px;
  height: 40px;
  color: var(--rf-fg-4);
}
.rf-ratings__empty p {
  margin: 0;
  font-size: 14.5px;
  color: var(--rf-fg-3);
  line-height: 1.5;
  max-width: 360px;
}
.rf-shake { animation: rf-shake .42s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes rf-shake { 10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(2px); } 30%,50%,70% { transform: translateX(-4px); } 40%,60% { transform: translateX(4px); } }
.rf-ratings__submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.rf-ratings__note { font-size: 12px; color: var(--rf-fg-3); }

/* Toast */
.rf-toast { position: fixed; left: 50%; top: 24px; transform: translate(-50%, -120%); background: var(--rf-teal-950); color: #fff; padding: 12px 22px; border-radius: 100px; font-size: 14px; font-weight: 600; box-shadow: 0 18px 48px -16px rgba(14,79,81,0.4); z-index: 200; transition: transform .35s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.rf-toast.is-visible { transform: translate(-50%, 0); }


/* ================================================================
   PROFESSIONAL POLISH PASS — clean, modern, eye-catching
   Additive overrides; no HTML changes required.
   ================================================================ */

/* Smooth global scroll + better selection color */
html { scroll-behavior: smooth; }
::selection { background: var(--rf-teal-200); color: var(--rf-teal-950); }

/* ---- Type refinements ---- */
body { font-feature-settings: 'ss01', 'cv11'; text-rendering: optimizeLegibility; }
.rf-section__title { font-size: clamp(34px, 4.2vw, 52px); letter-spacing: -0.025em; line-height: 1.05; color: var(--rf-teal-950); }
.rf-section__sub { font-size: 18px; line-height: 1.55; color: var(--rf-fg-3); max-width: 620px; }
.rf-section__head--center .rf-section__sub { margin-left: auto; margin-right: auto; }
.rf-section__head { margin-bottom: 56px; }
.rf-section__head--center { margin-bottom: 64px; }

/* Hero title gradient accent — splits last sentence with a teal→amber accent */
.rf-hero__title { font-weight: 800; letter-spacing: -0.03em; line-height: 1.0; color: var(--rf-teal-950); }
.rf-hero__sub { font-weight: 600; letter-spacing: -0.005em; }

/* Eyebrow chip — refined */
.rf-eyebrow { padding: 7px 14px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(14,79,81,0.08); }
.rf-eyebrow--amber { box-shadow: inset 0 0 0 1px rgba(194,91,31,0.12); }

/* ---- Header polish ---- */
.rf-header { border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s, background .2s; }
.rf-header.is-scrolled { border-bottom-color: var(--rf-border-2); box-shadow: 0 4px 24px -16px rgba(14,79,81,0.18); background: rgba(255,255,255,0.96); }
.rf-header__row { padding-top: 16px; padding-bottom: 16px; }
.rf-header__logo { height: 44px; transition: transform .2s; }
.rf-header__brand:hover .rf-header__logo { transform: scale(1.02); }

/* ---- Buttons — refined ---- */
.rf-btn { transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .25s ease; letter-spacing: -0.005em; }
.rf-btn--primary { background: var(--rf-teal-800); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 8px 18px -10px rgba(14,79,81,0.5); }
.rf-btn--primary:hover { background: var(--rf-teal-700); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 14px 26px -12px rgba(14,79,81,0.6); }
.rf-btn--primary:active { transform: translateY(0); }
.rf-btn--secondary { background: #fff; color: var(--rf-teal-800); box-shadow: inset 0 0 0 1px var(--rf-border-1), 0 4px 12px -6px rgba(14,79,81,0.12); }
.rf-btn--secondary:hover { background: var(--rf-teal-50); box-shadow: inset 0 0 0 1px var(--rf-teal-300), 0 8px 18px -8px rgba(14,79,81,0.18); transform: translateY(-1px); }
.rf-btn .arr { transition: transform .2s; }
.rf-btn:hover .arr { transform: translateX(3px); }
.rf-btn--lg { padding: 15px 24px; font-size: 15px; }

/* ---- Cards — softer, modern shadows + hover lift ---- */
.rf-problem-card,
.rf-pillar,
.rf-feature,
.rf-tier,
.rf-metric,
.rf-faq__item,
.rf-review,
.rf-who-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.rf-problem-card { border: 1px solid var(--rf-border-2); box-shadow: 0 1px 2px rgba(15,40,50,0.04); }
.rf-problem-card:hover { transform: translateY(-3px); border-color: var(--rf-teal-200); box-shadow: 0 18px 40px -24px rgba(14,79,81,0.22); }
.rf-pillar { box-shadow: 0 1px 3px rgba(15,40,50,0.04), 0 8px 24px -16px rgba(14,79,81,0.08); }
.rf-pillar:hover { transform: translateY(-4px); box-shadow: 0 1px 3px rgba(15,40,50,0.04), 0 22px 40px -20px rgba(14,79,81,0.18); }
.rf-tier:not(.is-popular):hover { transform: translateY(-4px); border-color: var(--rf-teal-200); box-shadow: 0 22px 44px -22px rgba(14,79,81,0.18); }
.rf-metric { background: linear-gradient(180deg, #fff 0%, #fafcfb 100%); transition: transform .25s, box-shadow .25s; }
.rf-metric:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -24px rgba(14,79,81,0.18); }
.rf-metric__n { background: linear-gradient(135deg, var(--rf-teal-800) 0%, var(--rf-teal-500) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---- Section rhythm — alternating, calmer ---- */
.rf-section { padding: 112px 0; position: relative; }
.rf-section--tinted { background: linear-gradient(180deg, #f6f8f8 0%, #f0f5f5 100%); }
.rf-section--gradient { background: linear-gradient(180deg, #ffffff 0%, #f3f7f7 100%); }
@media (max-width: 980px) { .rf-section { padding: 80px 0; } }

/* Subtle horizontal divider between adjacent sections */
.rf-section + .rf-section--tinted::before,
.rf-section--tinted + .rf-section::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 80px; height: 3px; border-radius: 100px;
  background: linear-gradient(90deg, transparent, var(--rf-teal-300), transparent);
  opacity: 0.6;
}

/* ---- Hero stage glow refinements ---- */
.rf-hero { padding: 104px 0 80px; }
.rf-hero__stage { margin-top: 56px; }
.rf-hero__abs-window { transition: transform .4s ease, box-shadow .4s ease; }
.rf-hero__abs-window:hover { transform: translateY(-4px); }
.rf-hero__float { transition: transform .3s ease; will-change: transform; }
.rf-hero__float:hover { animation-play-state: paused; transform: translateY(-4px) scale(1.02); }

/* ---- Trust strip ---- */
.rf-trust { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--rf-border-2); }

/* ---- Pricing popular tier accent ---- */
.rf-tier.is-popular { background: linear-gradient(180deg, #ffffff 0%, #f7fbfa 100%); border: 1px solid var(--rf-teal-700); box-shadow: 0 32px 64px -28px rgba(14,79,81,0.4), 0 0 0 1px rgba(14,79,81,0.06); }
.rf-tier.is-popular::after {
  content: ''; position: absolute; inset: -1px; border-radius: 20px; pointer-events: none;
  background: linear-gradient(180deg, rgba(31,138,141,0.4), transparent 40%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}

/* ---- FAQ refinement ---- */
.rf-faq__item { background: #fff; border-radius: 16px; }
.rf-faq__item:hover:not([open]) { border-color: var(--rf-teal-200); }
.rf-faq__item[open] { box-shadow: 0 14px 36px -22px rgba(14,79,81,0.28); }
.rf-faq__item summary { padding: 22px 26px; }

/* ---- Testimonial: tighter, more cinematic ---- */
.rf-section--testimonial { background: linear-gradient(160deg, #062c2e 0%, #0a3d3f 60%, #0e4f51 100%); }
.rf-quote__text { font-weight: 500; letter-spacing: -0.018em; }

/* ---- Pillar number — restyled ---- */
.rf-pillar__num { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--rf-teal-50); border-radius: 999px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rf-teal-700); border: 1px solid var(--rf-teal-100); }

/* ---- Scroll reveal animations ---- */
/* Gated by .rf-js-reveal on <html> — only hidden if JS confirms IntersectionObserver works.
   No JS / no IO / reduced-motion = visible by default (no flash, no broken page). */
@media (prefers-reduced-motion: no-preference) {
  .rf-js-reveal .rf-section__head,
  .rf-js-reveal .rf-problem-card,
  .rf-js-reveal .rf-pillar,
  .rf-js-reveal .rf-feature,
  .rf-js-reveal .rf-who-card,
  .rf-js-reveal .rf-metric,
  .rf-js-reveal .rf-tier,
  .rf-js-reveal .rf-faq__item,
  .rf-js-reveal .rf-review,
  .rf-js-reveal .rf-mobile-bullet,
  .rf-js-reveal .rf-quote {
    opacity: 0; transform: translateY(20px);
    transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
  }
  .rf-js-reveal .rf-reveal-on .rf-section__head,
  .rf-js-reveal .rf-reveal-on .rf-problem-card,
  .rf-js-reveal .rf-reveal-on .rf-pillar,
  .rf-js-reveal .rf-reveal-on .rf-feature,
  .rf-js-reveal .rf-reveal-on .rf-who-card,
  .rf-js-reveal .rf-reveal-on .rf-metric,
  .rf-js-reveal .rf-reveal-on .rf-tier,
  .rf-js-reveal .rf-reveal-on .rf-faq__item,
  .rf-js-reveal .rf-reveal-on .rf-review,
  .rf-js-reveal .rf-reveal-on .rf-mobile-bullet,
  .rf-js-reveal .rf-reveal-on .rf-quote { opacity: 1; transform: translateY(0); }
  /* Stagger children */
  .rf-js-reveal .rf-reveal-on .rf-problem-card:nth-child(2), .rf-js-reveal .rf-reveal-on .rf-pillar:nth-child(2), .rf-js-reveal .rf-reveal-on .rf-tier:nth-child(2), .rf-js-reveal .rf-reveal-on .rf-who-card:nth-child(2), .rf-js-reveal .rf-reveal-on .rf-metric:nth-child(2) { transition-delay: .08s; }
  .rf-js-reveal .rf-reveal-on .rf-problem-card:nth-child(3), .rf-js-reveal .rf-reveal-on .rf-pillar:nth-child(3), .rf-js-reveal .rf-reveal-on .rf-tier:nth-child(3), .rf-js-reveal .rf-reveal-on .rf-who-card:nth-child(3), .rf-js-reveal .rf-reveal-on .rf-metric:nth-child(3) { transition-delay: .16s; }
  .rf-js-reveal .rf-reveal-on .rf-problem-card:nth-child(4), .rf-js-reveal .rf-reveal-on .rf-who-card:nth-child(4) { transition-delay: .24s; }
}

/* ---- Drawer nav refinement ---- */
.rf-drawer__nav a { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }

/* ---- Footer polish ---- */
.rf-footer { background: linear-gradient(180deg, #062c2e 0%, #0a1f21 100%); }
.rf-footer__links a { font-weight: 500; transition: color .15s, transform .15s; }
.rf-footer__links a:hover { color: #fff; transform: translateY(-1px); }

/* ---- Form inputs polish ---- */
.rf-ratings__field input, .rf-ratings__field textarea { border-radius: 12px; transition: border-color .18s, box-shadow .18s, background .18s; }

/* ---- Sticky CTA refinement ---- */
.rf-sticky__inner { background: linear-gradient(180deg, #0a3d3f 0%, #062c2e 100%); border: 1px solid rgba(255,255,255,0.06); }

/* ---- Container max-width tightening ---- */
.rf-container { max-width: 1180px; }


/* ============================================================
   v2 — Realistic / IBM Maximo style overhaul
   ============================================================ */

/* ---- HERO: split-photo layout ---- */
.rf-hero--split { padding: 0; background: linear-gradient(180deg,#fff 0%, #f3f7f7 100%); }
.rf-hero--split .rf-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.rf-hero--split .rf-hero__bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 95% 10%, rgba(14,79,81,0.10), transparent 60%),
    radial-gradient(700px 400px at 5% 80%, rgba(236,130,64,0.06), transparent 65%);
}
.rf-hero--split .rf-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  /* Vertical only — horizontal padding comes from .rf-container (same element) */
  padding-top: 96px;
  padding-bottom: 80px;
  position: relative;
  z-index: 1;
}
.rf-hero--split .rf-hero__copy { max-width: 580px; }
.rf-hero--split .rf-hero__title { font-size: clamp(40px, 5.2vw, 64px); line-height: 1.04; letter-spacing: -0.025em; margin: 18px 0 18px; max-width: none; }
.rf-hero--split .rf-hero__sub { font-size: 19px; margin-bottom: 18px; }
.rf-hero--split .rf-hero__body { font-size: 16px; max-width: 520px; margin-bottom: 28px; }
.rf-hero--split .rf-hero__ctas { margin-bottom: 28px; }
.rf-hero--split .rf-hero__assure { display: flex; flex-wrap: wrap; gap: 18px 22px; font-size: 13px; color: var(--rf-fg-3); }
.rf-hero--split .rf-hero__assure span { display: inline-flex; align-items: center; gap: 6px; }
.rf-hero--split .rf-hero__assure i, .rf-hero--split .rf-hero__assure svg { width: 14px; height: 14px; color: var(--rf-teal-700); }

/* Hero photo + phone composite */
.rf-hero__stage {
  position: relative;
  margin: 0;
  min-height: 600px;
  border-radius: 24px;
  overflow: visible;
}
.rf-hero__photo {
  position: relative;
  height: 600px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 100px -40px rgba(15,40,50,0.45), 0 0 0 1px rgba(15,40,50,0.04);
  /* Brand-coloured placeholder visible while the JPG decodes — no white flash */
  background: linear-gradient(135deg, var(--rf-teal-900) 0%, var(--rf-teal-700) 100%);
}
.rf-hero__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---- Image placeholder for all photo containers (subtle brand bg, no animation) ---- */
.rf-who-card__photo,
.rf-pd-photo__img,
.rf-mobile-stage__bg,
.rf-pm__bg {
  background: linear-gradient(135deg, var(--rf-teal-100) 0%, var(--rf-bg-tint, #eef2f3) 100%);
}
.rf-hero__photo-grad {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(6,30,32,0.20) 0%, transparent 45%),
    linear-gradient(0deg, rgba(6,30,32,0.40) 0%, transparent 50%);
}
.rf-hero__phone {
  position: absolute;
  left: -56px;
  bottom: -32px;
  width: 240px;
  z-index: 3;
  /* Use transform for GPU compositing — prevents flicker on Safari iOS */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.rf-hero__phone-frame {
  background: #0c1a22;
  border-radius: 32px;
  padding: 8px;
  /* Shadow on the frame (a rectangle) is rock-solid on all browsers,
     unlike filter: drop-shadow on the transparent wrapper */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 30px 50px rgba(15,40,50,0.35),
    0 8px 16px rgba(15,40,50,0.2);
  position: relative;
}
.rf-hero__phone-frame img {
  width: 100%;
  display: block;
  border-radius: 24px;
  background: #f7f9fa;
}
.rf-hero__phone-notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 22px; background: #0c1a22; border-radius: 0 0 14px 14px; z-index: 2;
}

/* Override floating notification positions for the new stage */
.rf-hero--split .rf-hero__float--ai { top: 8%; right: -24px; left: auto; }
.rf-hero--split .rf-hero__float--sla { bottom: 30%; right: -36px; left: auto; }

/* Trust band — full-width */
.rf-trust-band { background: #fff; border-top: 1px solid var(--rf-border-2); border-bottom: 1px solid var(--rf-border-2); padding: 28px 0; position: relative; z-index: 1; }
.rf-trust-band .rf-trust { margin-top: 0; }

@media (max-width: 980px) {
  /* IMPORTANT: keep horizontal padding from .rf-container (the same element).
     Shorthand "0 X" would overwrite the container's 20px side padding. */
  .rf-hero--split .rf-hero__inner { grid-template-columns: 1fr; gap: 32px; padding-top: 72px; padding-bottom: 48px; }
  .rf-hero__stage { padding-left: 24px; padding-bottom: 24px; }
  .rf-hero__photo { height: 420px; }
  .rf-hero__phone { width: 180px; left: 8px; bottom: 0; }
}
@media (max-width: 640px) {
  /* On phones: clamp photo height proportionally to viewport, keep generous side margins,
     anchor phone inside the photo at the bottom-left so it never overflows. */
  .rf-hero--split .rf-hero__inner { padding-top: 48px; padding-bottom: 32px; gap: 24px; }
  .rf-hero__stage {
    padding: 0;
    margin: 0;
    min-height: 0 !important;
    height: auto;
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }
  .rf-hero__photo {
    /* Proportional height: never exceeds 48vh, never less than 280px */
    height: clamp(280px, 48vh, 380px);
    border-radius: 18px;
    width: 100%;
    max-width: 100%;
    box-shadow: 0 20px 50px -20px rgba(15,40,50,0.30), 0 0 0 1px rgba(15,40,50,0.04);
  }
  .rf-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
  .rf-hero__phone {
    width: 130px;
    left: 12px;
    bottom: 12px;
  }
  .rf-hero__phone-frame {
    border-radius: 22px;
    padding: 4px;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.08),
      0 14px 24px rgba(15,40,50,0.35),
      0 4px 8px rgba(15,40,50,0.2);
  }
  .rf-hero__phone-frame img { border-radius: 18px; }
  .rf-hero__phone-notch { width: 50px; height: 14px; top: 4px; border-radius: 0 0 8px 8px; }
}
@media (max-width: 380px) {
  .rf-hero__photo { height: clamp(240px, 42vh, 320px); border-radius: 16px; }
  .rf-hero__phone { width: 110px; left: 10px; bottom: 10px; }
}

/* ---- Hide old hero blobs/grid (split version doesn't use them) ---- */
.rf-hero--split .rf-hero__blob, .rf-hero--split .rf-hero__grid { display: none; }

/* ============================================================
   PROBLEM — photo before/after comparison
   ============================================================ */
.rf-pd-photo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 48px;
}
.rf-pd-photo__col {
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
}
.rf-pd-photo__img {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(15,40,50,0.35), 0 0 0 1px rgba(15,40,50,0.05);
}
.rf-pd-photo__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rf-pd-photo__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(120,40,20,0.45) 100%);
  mix-blend-mode: multiply;
}
.rf-pd-photo__col--before .rf-pd-photo__img { filter: saturate(0.85); }
.rf-pd-photo__shade--good {
  background: linear-gradient(180deg, transparent 0%, rgba(14,79,81,0.50) 100%);
}
.rf-pd-photo__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rf-pd-photo__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  font-size: 12px; font-weight: 600;
  color: var(--rf-fg-3);
  border: 1px solid var(--rf-border-2);
  box-shadow: 0 2px 8px rgba(15,40,50,0.04);
}
.rf-pd-photo__chip i, .rf-pd-photo__chip svg { width: 13px; height: 13px; color: var(--rf-amber-600, #ec8240); }
.rf-pd-photo__chip--good { background: var(--rf-teal-50); color: var(--rf-teal-800); border-color: var(--rf-teal-200, #cce5e6); }
.rf-pd-photo__chip--good i, .rf-pd-photo__chip--good svg { color: var(--rf-teal-700); }
.rf-pd-photo__label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.01em;
  width: fit-content;
}
.rf-pd-photo__label i, .rf-pd-photo__label svg { width: 16px; height: 16px; }
.rf-pd-photo__label--bad { background: #fbe1d3; color: #b8430b; }
.rf-pd-photo__label--good { background: var(--rf-teal-50); color: var(--rf-teal-800); }
.rf-pd-photo__arrow {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--rf-primary);
  color: #fff;
  box-shadow: 0 12px 28px -8px rgba(14,79,81,0.45);
}
.rf-pd-photo__arrow i, .rf-pd-photo__arrow svg { width: 22px; height: 22px; }

/* Hide the legacy diagram if any leftover renders */
.rf-problem-diagram { display: none; }

@media (max-width: 900px) {
  .rf-pd-photo { grid-template-columns: 1fr; gap: 20px; }
  .rf-pd-photo__arrow { transform: rotate(90deg); margin: 0 auto; }
}

/* ============================================================
   PHOTO-MOCK feature visuals (.rf-pm)
   ============================================================ */
.rf-pm {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--rf-teal-950);
  box-shadow: 0 30px 70px -30px rgba(15,40,50,0.4), 0 0 0 1px rgba(15,40,50,0.05);
}
.rf-pm--wide { aspect-ratio: 16/9; }
.rf-pm__bg { position: absolute; inset: 0; }
.rf-pm__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rf-pm__bg-grad {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(6,30,32,0.55) 0%, rgba(6,30,32,0.10) 50%),
    linear-gradient(0deg, rgba(6,30,32,0.50) 0%, transparent 60%);
}
.rf-pm__bg-grad--strong {
  background:
    linear-gradient(135deg, rgba(6,30,32,0.70) 0%, rgba(6,30,32,0.25) 60%),
    linear-gradient(0deg, rgba(6,30,32,0.55) 0%, transparent 65%);
}

/* Badge — top-left chip */
.rf-pm__badge {
  position: absolute;
  top: 18px; left: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 700;
  color: var(--rf-teal-800);
  letter-spacing: -0.01em;
  box-shadow: 0 6px 18px -4px rgba(15,40,50,0.25);
  z-index: 4;
}
.rf-pm__badge i, .rf-pm__badge svg { width: 14px; height: 14px; color: var(--rf-amber-600, #ec8240); }

/* Caption — bottom-left subtle text */
.rf-pm__caption {
  position: absolute;
  bottom: 18px; left: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  z-index: 4;
}
.rf-pm__caption-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rf-amber-600, #ec8240); box-shadow: 0 0 0 3px rgba(236,130,64,0.25); }

/* Phone inset (right-side) */
.rf-pm__phone {
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%) rotate(-3deg);
  width: 38%;
  max-width: 220px;
  z-index: 3;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.45));
}
.rf-pm__phone-frame {
  position: relative;
  background: #0c1a22;
  border-radius: 28px;
  padding: 7px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.rf-pm__phone-frame img { width: 100%; display: block; border-radius: 22px; background: #f7f9fa; }
.rf-pm__phone-notch {
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 70px; height: 18px; background: #0c1a22; border-radius: 0 0 12px 12px; z-index: 2;
}

/* KPIs overlay (used in the wide tower mock) */
.rf-pm__kpis {
  position: absolute;
  left: 6%; right: 6%; top: 22%;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  z-index: 3;
}
.rf-pm__kpi {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.6);
}
.rf-pm__kpi-l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rf-fg-4); }
.rf-pm__kpi-n { font-size: 22px; font-weight: 800; color: var(--rf-fg-1); letter-spacing: -0.02em; line-height: 1.05; }
.rf-pm__kpi-d { font-size: 11px; font-weight: 700; color: var(--rf-fg-4); }
.rf-pm__kpi-d--good { color: #1c8460; }
.rf-pm__chart {
  position: absolute;
  left: 6%; right: 6%; bottom: 8%;
  height: 22%;
  background: rgba(255,255,255,0.96);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.35);
  z-index: 3;
}
.rf-pm__chart svg { width: 100%; height: 100%; display: block; }

/* New tower dashboard — replaces the old kpi+chart overlay when .rf-pm--tower is set */
.rf-pm--tower .rf-pm__kpis,
.rf-pm--tower .rf-pm__chart { display: none !important; }
/* The tower panel header already reads "Torre de Controlo" — the floating
   badge only duplicates it, so hide it for this mockup at every size. */
.rf-pm--tower .rf-pm__badge { display: none; }
.rf-tower {
  position: absolute;
  left: 5%; right: 5%; top: 14%; bottom: 6%;
  background: rgba(255,255,255,0.97);
  border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(15,40,50,0.45), 0 0 0 1px rgba(15,40,50,0.08);
  padding: 16px 18px 14px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 12px;
  z-index: 3;
}
.rf-tower__head { display: flex; align-items: center; justify-content: space-between; }
.rf-tower__title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--rf-fg-2); }
.rf-tower__title i { width: 16px; height: 16px; color: var(--rf-teal-700); }
.rf-tower__live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #1c8460; padding: 3px 8px; background: #e6f5ee; border-radius: 999px; }
.rf-tower__dot { width: 6px; height: 6px; border-radius: 50%; background: #1c8460; box-shadow: 0 0 0 0 rgba(28,132,96,0.6); animation: rf-tower-pulse 1.6s infinite; }
@keyframes rf-tower-pulse { 0%{box-shadow:0 0 0 0 rgba(28,132,96,0.5);} 70%{box-shadow:0 0 0 6px rgba(28,132,96,0);} 100%{box-shadow:0 0 0 0 rgba(28,132,96,0);} }
.rf-tower__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rf-tower__kpi { background: #f5f7f8; border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; }
.rf-tower__kpi-l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rf-fg-4); font-weight: 600; }
.rf-tower__kpi-n { font-size: 16px; font-weight: 800; color: var(--rf-fg-1); letter-spacing: -0.01em; }
.rf-tower__kpi-d { font-size: 10px; font-weight: 700; color: var(--rf-fg-4); }
.rf-tower__kpi-d--good { color: #1c8460; }
.rf-tower__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; min-height: 0; }
.rf-tower__chart { background: #fafbfb; border-radius: 10px; padding: 10px; display: grid; grid-template-rows: auto 1fr; gap: 4px; min-height: 0; }
.rf-tower__chart-head { display: flex; justify-content: space-between; font-size: 11px; color: var(--rf-fg-4); font-weight: 600; }
.rf-tower__chart-pct { color: #1c8460; }
.rf-tower__chart svg { width: 100%; height: 100%; display: block; }
.rf-tower__feed { background: #fafbfb; border-radius: 10px; padding: 8px 10px; display: grid; grid-auto-rows: min-content; gap: 6px; min-height: 0; overflow: hidden; }
.rf-tower__feed-head { font-size: 11px; color: var(--rf-fg-4); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 2px; }
.rf-tower__row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: #fff; border: 1px solid rgba(15,40,50,0.06); }
.rf-tower__row-tag { font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.rf-tower__row-txt { font-size: 11.5px; color: var(--rf-fg-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-tower__row-time { font-size: 10.5px; color: var(--rf-fg-4); font-weight: 600; }
.rf-tower__row--crit .rf-tower__row-tag { background: #fde2e2; color: #b42318; }
.rf-tower__row--warn .rf-tower__row-tag { background: #fdecd1; color: #a36a07; }
.rf-tower__row--ok .rf-tower__row-tag { background: #e6f5ee; color: #1c8460; }
@media (max-width: 720px) {
  .rf-tower__grid { grid-template-columns: 1fr; }
  .rf-tower__kpis { grid-template-columns: repeat(2, 1fr); }
  .rf-tower { padding: 12px 12px 10px; }
}

/* Hierarchy/tree inset */
.rf-pm__tree {
  position: absolute;
  right: 5%; top: 50%; transform: translateY(-50%);
  width: 56%; max-width: 320px;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 20px 50px -15px rgba(0,0,0,0.40);
  border: 1px solid rgba(255,255,255,0.6);
  z-index: 3;
}
.rf-pm__tree-node {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--rf-slate-50);
  font-size: 12px; font-weight: 600; color: var(--rf-fg-2);
}
.rf-pm__tree-node i, .rf-pm__tree-node svg { width: 14px; height: 14px; color: var(--rf-teal-700); flex-shrink: 0; }
.rf-pm__tree-node em { margin-left: auto; font-style: normal; font-size: 10px; font-weight: 700; color: var(--rf-fg-4); }
.rf-pm__tree-node--root { background: var(--rf-teal-50); color: var(--rf-teal-800); }
.rf-pm__tree-node--active { background: var(--rf-primary); color: #fff; }
.rf-pm__tree-node--active i, .rf-pm__tree-node--active svg { color: #fff; }
.rf-pm__tree-node--active em { color: rgba(255,255,255,0.85); }
.rf-pm__tree-children { display: flex; flex-direction: column; gap: 4px; padding-left: 14px; border-left: 2px dashed var(--rf-border-2); margin-left: 12px; }
.rf-pm__tree-rls {
  margin-top: 6px;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  background: linear-gradient(135deg, #fde2cc, #fdf2e8);
  color: var(--rf-amber-700);
  font-size: 11px; font-weight: 700;
}
.rf-pm__tree-rls i, .rf-pm__tree-rls svg { width: 14px; height: 14px; }

/* Make the feature visual fit the existing rf-feature__visual slot fully */
.rf-feature__visual { padding: 0; background: transparent; box-shadow: none; }
.rf-feature__visual > .rf-pm { width: 100%; height: 100%; min-height: 360px; }
.rf-feature--wide .rf-feature__visual > .rf-pm { min-height: 420px; }

@media (max-width: 760px) {
  .rf-pm { aspect-ratio: 5/4; }
  .rf-pm__phone { right: 4%; width: 44%; }
  .rf-pm__kpis { grid-template-columns: repeat(2, 1fr); top: 28%; }
  .rf-pm__tree { width: 78%; }
}

/* ============================================================
   MOBILE section — phone with stickers in real-world bg
   ============================================================ */
.rf-mobile-phone {
  position: relative;
  width: 280px;
  margin: 0 auto;
  filter: drop-shadow(0 40px 60px rgba(15,40,50,0.45));
}
.rf-mobile-phone .rf-pm__phone-frame { padding: 9px; border-radius: 36px; }
.rf-mobile-phone .rf-pm__phone-frame img { border-radius: 28px; }
.rf-mobile-phone .rf-pm__phone-notch { width: 90px; height: 24px; top: 9px; }
.rf-mobile-phone__sticker {
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 44px -16px rgba(14,79,81,0.30), 0 0 0 1px rgba(15,40,50,0.04);
  font-family: var(--rf-font-sans);
  z-index: 3;
}
.rf-mobile-phone__sticker i, .rf-mobile-phone__sticker svg { width: 18px; height: 18px; padding: 8px; border-radius: 8px; background: var(--rf-teal-50); color: var(--rf-teal-700); box-sizing: content-box; }
.rf-mobile-phone__sticker > div { display: flex; flex-direction: column; line-height: 1.2; }
.rf-mobile-phone__sticker strong { font-size: 13px; color: var(--rf-fg-1); font-weight: 700; }
.rf-mobile-phone__sticker span { font-size: 11px; color: var(--rf-fg-3); font-family: var(--rf-font-mono); }
.rf-mobile-phone__sticker--1 { top: 14%; left: -90px; animation: rf-float 4s ease-in-out infinite; }
.rf-mobile-phone__sticker--2 { bottom: 16%; right: -80px; animation: rf-float 4s ease-in-out 1.5s infinite; }
.rf-mobile-phone__sticker--2 i, .rf-mobile-phone__sticker--2 svg { background: #d4eadc; color: #1c8460; }

@media (max-width: 760px) {
  .rf-mobile-phone__sticker--1 { left: -20px; }
  .rf-mobile-phone__sticker--2 { right: -10px; }
}

/* ============================================================
   Hero floating notifications — final positions for split layout
   ============================================================ */
.rf-hero--split .rf-hero__float { animation: rf-float 4.5s ease-in-out infinite; }

/* ================================================================
   v3 IMPROVEMENTS PASS — May 2026
   Hero spacing · Testimonial stats · Pricing emphasis · Full footer
   Ratings hierarchy · Reorganized flow
   ================================================================ */

/* ---- HERO: more breathing room between teal sub and slate body ---- */
.rf-hero--split .rf-hero__sub {
  margin-bottom: 24px;
  position: relative;
}
.rf-hero--split .rf-hero__sub::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 22px;
  background: linear-gradient(90deg, var(--rf-teal-700), transparent);
  border-radius: 2px;
}
.rf-hero--split .rf-hero__body { margin-top: 0; margin-bottom: 32px; line-height: 1.6; color: var(--rf-fg-2); }

/* ---- TESTIMONIAL: refactored stats with header label ---- */
.rf-quote__author { gap: 16px 24px; align-items: flex-start; padding-top: 6px; }
.rf-quote__id { display: flex; flex-direction: column; }
.rf-quote__stats {
  margin-left: auto;
  padding: 16px 22px;
  border-left: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 240px;
}
.rf-quote__stats-head {
  font-family: var(--rf-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--rf-amber-700);
}
.rf-quote__stats-row { display: flex; gap: 28px; }
.rf-quote__stats-row > div { display: flex; flex-direction: column; }
.rf-quote__stats strong {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
}
.rf-quote__stats span {
  font-size: 11px;
  color: #a8c2c0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
@media (max-width: 760px) {
  .rf-quote__stats {
    margin-left: 0;
    padding: 16px 18px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    width: 100%;
    margin-top: 8px;
  }
}

/* ---- PRICING: stronger "Recomendado" highlight ---- */
.rf-pricing { padding-top: 16px; }
.rf-tier {
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.rf-tier:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px -22px rgba(14,79,81,0.18);
}
.rf-tier.is-popular {
  background: linear-gradient(180deg, #ffffff 0%, #f8fcfc 100%);
  border-width: 2px;
  border-color: var(--rf-teal-700);
  box-shadow: 0 28px 70px -24px rgba(14,79,81,0.38), 0 0 0 1px rgba(14,79,81,0.06);
  transform: translateY(-12px);
  z-index: 2;
}
.rf-tier.is-popular:hover { transform: translateY(-16px); }
.rf-tier__ribbon {
  top: -16px;
  background: linear-gradient(135deg, var(--rf-teal-700) 0%, var(--rf-teal-900) 100%);
  font-size: 12px;
  padding: 8px 18px;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 10px 24px -10px rgba(14,79,81,0.45);
}
.rf-tier__ribbon::before {
  content: '★';
  font-size: 11px;
  color: var(--rf-amber-400, #f3a35a);
}
.rf-tier.is-popular .rf-tier__name { color: var(--rf-teal-700); }
.rf-tier.is-popular .rf-tier__amount { color: var(--rf-teal-700); }
@media (max-width: 980px) { .rf-tier.is-popular { transform: none; } .rf-tier.is-popular:hover { transform: translateY(-4px); } }

/* ---- FOOTER: full footer with cols ---- */
.rf-footer--full { padding: 80px 0 32px; }
.rf-footer--full .rf-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 3fr;
  gap: 64px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.rf-footer--full .rf-footer__brand img { height: 36px; filter: brightness(0) invert(1); margin-bottom: 16px; }
.rf-footer--full .rf-footer__tag { font-size: 14px; line-height: 1.6; color: #8da3a1; max-width: 300px; margin-bottom: 24px; }
.rf-footer__social { display: flex; gap: 10px; }
.rf-footer__social a {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c5d6d4;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
  position: relative;
}
.rf-footer__social i, .rf-footer__social svg { width: 18px; height: 18px; stroke-width: 2; }
/* Brand-coloured hover states */
.rf-footer__social a[aria-label="LinkedIn"]:hover {
  background: #0a66c2;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -6px rgba(10,102,194,0.5);
}
.rf-footer__social a[aria-label="Instagram"]:hover {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -6px rgba(220,39,67,0.5);
}
/* "Em construção" overlay */
.rf-footer__social--soon { cursor: not-allowed; opacity: 0.85; }
.rf-footer__social--soon::after {
  content: 'em breve';
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-family: var(--rf-font-mono);
  color: #6a8482;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.rf-footer__social--soon:hover::after { opacity: 1; }
.rf-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.rf-footer__col h5 { font-size: 12px; font-weight: 700; color: #fff; margin: 0 0 16px; letter-spacing: 0.08em; text-transform: uppercase; }
.rf-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.rf-footer__col a { font-size: 14px; color: #8da3a1; transition: color .15s; }
.rf-footer__col a:hover { color: #fff; }
.rf-footer--full .rf-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  flex-wrap: wrap;
  gap: 16px;
}
.rf-footer__bottom-right { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.rf-footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }
.rf-footer__legal a { font-size: 13px; color: #8da3a1; transition: color .15s; }
.rf-footer__legal a:hover { color: #fff; }
.rf-footer--full .rf-footer__bottom p { font-size: 13px; color: #6a8482; margin: 0; }

@media (max-width: 980px) {
  .rf-footer--full .rf-footer__top { grid-template-columns: 1fr; gap: 40px; }
  .rf-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
}
@media (max-width: 540px) {
  .rf-footer__cols { grid-template-columns: 1fr 1fr; }
  .rf-footer--full .rf-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---- RATINGS: improved aggregate hierarchy ---- */
.rf-ratings__agg {
  padding: 32px 28px;
  background: linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
  box-shadow: 0 8px 28px -20px rgba(14,79,81,0.12);
}
.rf-ratings__agg-top {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rf-border-2);
  margin-bottom: 22px;
}
.rf-ratings__agg-meta { display: flex; flex-direction: column; gap: 4px; }
.rf-ratings__score { font-size: 56px; font-weight: 800; color: var(--rf-teal-950); line-height: 1; }
.rf-ratings__stars { margin-top: 4px; }
.rf-ratings__count { margin-top: 2px; }
.rf-ratings__bars-head {
  font-family: var(--rf-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rf-fg-4);
  margin-bottom: 12px;
  font-weight: 600;
}
.rf-ratings__bars { padding-top: 0; border-top: 0; gap: 10px; }
.rf-rating-bar { grid-template-columns: 18px 14px 1fr 36px; }
.rf-rating-bar__track { height: 8px; background: var(--rf-bg-2); }
.rf-rating-bar__c { font-size: 12px; color: var(--rf-fg-3); }

/* ---- WHO: improved photo treatment ---- */
.rf-who-card { transition: transform .25s, box-shadow .25s, border-color .25s; }
.rf-who-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(14,79,81,0.22); }
.rf-who-card__chip {
  background: rgba(255,255,255,0.96);
  width: 44px;
  height: 44px;
}
.rf-who-card__chip svg, .rf-who-card__chip i { width: 22px; height: 22px; }

/* Compensate sticky CTA overlap on testimonial bottom */
.rf-section--testimonial { padding-bottom: 96px; }

/* ---- RATINGS form: error state ---- */
.rf-input-error { border-color: #c34a2c !important; background: #fef6f3 !important; box-shadow: 0 0 0 3px rgba(195,74,44,0.12) !important; }
.rf-input-error:focus { border-color: #c34a2c !important; }

/* ---- ROADMAP ---- */
.rf-roadmap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 16px;
}
.rf-rmp {
  position: relative;
  background: #fff;
  border: 1px solid var(--rf-border-2);
  border-radius: 18px;
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  overflow: hidden;
}
.rf-rmp::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rf-teal-500, #1f8a8d);
}
.rf-rmp--now::before { background: linear-gradient(90deg, var(--rf-amber-700), #f4b67a); }
.rf-rmp--next::before { background: linear-gradient(90deg, var(--rf-teal-700), var(--rf-teal-500, #1f8a8d)); }
.rf-rmp--later::before { background: linear-gradient(90deg, var(--rf-fg-4), var(--rf-border-2)); }
.rf-rmp:hover { transform: translateY(-4px); box-shadow: 0 18px 44px -22px rgba(14,79,81,0.22); border-color: var(--rf-teal-300); }
.rf-rmp__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rf-rmp__tag {
  font-family: var(--rf-font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.rf-rmp__tag--now { background: var(--rf-amber-100); color: var(--rf-amber-700); }
.rf-rmp__tag--next { background: var(--rf-teal-100); color: var(--rf-teal-700); }
.rf-rmp__tag--later { background: var(--rf-bg-2, #eef2f3); color: var(--rf-fg-3); }
.rf-rmp__period { font-family: var(--rf-font-mono); font-size: 12px; color: var(--rf-fg-3); font-weight: 600; letter-spacing: 0.04em; }
.rf-rmp__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--rf-teal-100);
  color: var(--rf-teal-800);
  display: grid;
  place-items: center;
  margin-top: 6px;
}
.rf-rmp--now .rf-rmp__icon { background: linear-gradient(135deg, #fde2cc, #fdf2e8); color: var(--rf-amber-700); }
.rf-rmp__icon i, .rf-rmp__icon svg { width: 22px; height: 22px; }
.rf-rmp__t { font-size: 19px; font-weight: 700; color: var(--rf-teal-950); margin: 0; line-height: 1.3; letter-spacing: -0.01em; }
.rf-rmp__d { font-size: 14.5px; color: var(--rf-fg-3); margin: 0; line-height: 1.55; }
@media (max-width: 980px) {
  .rf-roadmap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .rf-roadmap { grid-template-columns: 1fr; }
}

/* ---- LEGAL pages (Sobre, Privacidade, Termos, Cookies, Acessibilidade) ---- */
.rf-legal { padding: 64px 0 96px; background: linear-gradient(180deg, #ffffff 0%, var(--rf-slate-50, #f6f7f9) 100%); min-height: 70vh; }
.rf-legal__wrap { max-width: 820px; margin: 0 auto; }
.rf-legal__crumb { font-size: 13px; color: var(--rf-fg-3); margin-bottom: 16px; }
.rf-legal__crumb a { color: var(--rf-teal-700); }
.rf-legal__crumb a:hover { text-decoration: underline; }
.rf-legal h1 { font-family: var(--rf-font-display); font-size: clamp(32px, 4vw, 44px); color: var(--rf-teal-950); letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.1; }
.rf-legal__meta { font-family: var(--rf-font-mono); font-size: 12px; color: var(--rf-fg-4); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 32px; }
.rf-legal__intro { font-size: 17px; line-height: 1.6; color: var(--rf-fg-2); margin: 0 0 32px; padding: 20px 24px; background: #fff; border: 1px solid var(--rf-border-2); border-left: 3px solid var(--rf-teal-700); border-radius: 12px; }
.rf-legal__toc { background: #fff; border: 1px solid var(--rf-border-2); border-radius: 14px; padding: 20px 24px; margin: 0 0 40px; }
.rf-legal__toc h4 { font-family: var(--rf-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rf-fg-4); margin: 0 0 12px; font-weight: 700; }
.rf-legal__toc ol { padding-left: 20px; margin: 0; display: grid; gap: 6px; }
.rf-legal__toc a { color: var(--rf-fg-2); font-size: 14px; }
.rf-legal__toc a:hover { color: var(--rf-teal-700); }
.rf-legal section { margin-bottom: 40px; scroll-margin-top: 80px; }
.rf-legal h2 { font-family: var(--rf-font-display); font-size: 24px; color: var(--rf-teal-900); margin: 0 0 12px; letter-spacing: -0.01em; }
.rf-legal h3 { font-size: 17px; font-weight: 700; color: var(--rf-fg-1); margin: 24px 0 8px; }
.rf-legal p { font-size: 15.5px; line-height: 1.7; color: var(--rf-fg-2); margin: 0 0 14px; }
.rf-legal ul, .rf-legal ol { padding-left: 22px; margin: 0 0 14px; }
.rf-legal li { font-size: 15.5px; line-height: 1.7; color: var(--rf-fg-2); margin-bottom: 6px; }
.rf-legal a { color: var(--rf-teal-700); }
.rf-legal a:hover { text-decoration: underline; }
.rf-legal__contact { background: var(--rf-teal-100); border-radius: 14px; padding: 22px 26px; margin-top: 16px; }
.rf-legal__contact p { margin: 0; }
.rf-legal__contact strong { color: var(--rf-teal-900); }
.rf-legal__back { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; color: var(--rf-teal-700); font-weight: 600; }
.rf-legal__back:hover { text-decoration: underline; }
.rf-legal__back i, .rf-legal__back svg { width: 14px; height: 14px; }

/* About page hero */
.rf-about-hero { padding: 88px 0 56px; background: linear-gradient(180deg, #f4f8f8 0%, #ffffff 100%); text-align: center; }
.rf-about-hero h1 { font-size: clamp(36px, 5vw, 56px); margin-bottom: 16px; }
.rf-about-hero p { font-size: 18px; color: var(--rf-fg-3); max-width: 640px; margin: 0 auto; line-height: 1.6; }
.rf-about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 48px 0; }
.rf-about-card { background: #fff; border: 1px solid var(--rf-border-2); border-radius: 16px; padding: 24px; }
.rf-about-card__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--rf-teal-100); color: var(--rf-teal-800); display: grid; place-items: center; margin-bottom: 14px; }
.rf-about-card h3 { font-size: 17px; margin: 0 0 6px; color: var(--rf-teal-950); }
.rf-about-card p { font-size: 14.5px; color: var(--rf-fg-3); line-height: 1.6; margin: 0; }
@media (max-width: 760px) { .rf-about-grid { grid-template-columns: 1fr; } }

/* Pricing — 5-tier layout (Free / Starter / Growth / Enterprise / Custom) */
.rf-pricing--five {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  align-items: stretch;
}
.rf-pricing--five .rf-tier { padding: 28px 22px; gap: 14px; }
.rf-pricing--five .rf-tier__name { font-size: 18px; }
.rf-pricing--five .rf-tier__tag { font-size: 12px; min-height: 16px; }
.rf-pricing--five .rf-tier__amount { font-size: 34px; }
.rf-pricing--five .rf-tier__per { font-size: 12px; }
.rf-pricing--five .rf-tier__feats li { font-size: 13px; line-height: 1.4; }
.rf-pricing--five .rf-tier__feats li svg, .rf-pricing--five .rf-tier__feats li i { width: 14px; height: 14px; min-width: 14px; margin-top: 1px; }
/* Keep all five CTAs on a common baseline — reserve room for a 2-line plan
   tagline and a 2-line price (e.g. "Desde 4 EUR" + per-user unit). Applies
   to tablet/desktop only; the compact mobile layout cancels it below. */
@media (min-width: 641px) {
  .rf-pricing--five .rf-tier__tag { min-height: 34px; }
  .rf-pricing--five .rf-tier__price { min-height: 80px; align-content: flex-start; }
}
@media (max-width: 1240px) {
  .rf-pricing--five { grid-template-columns: repeat(3, 1fr); }
  .rf-pricing--five .rf-tier { padding: 32px 28px; gap: 18px; }
  .rf-pricing--five .rf-tier__amount { font-size: 40px; }
}
@media (max-width: 880px) {
  .rf-pricing--five { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .rf-pricing--five { grid-template-columns: 1fr; }
  .rf-pricing--five .rf-tier.is-popular { transform: none; }
  .rf-pricing--five .rf-tier.is-popular:hover { transform: translateY(-4px); }
}

/* Free tier CTA — subtle but clickable */
.rf-tier__cta--disabled {
  display: block;
  text-align: center;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--rf-fg-3);
  background: transparent;
  border: 1px dashed var(--rf-border-2);
  border-radius: 10px;
  font-style: italic;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.rf-tier__cta--disabled:hover {
  color: var(--rf-teal-700);
  border-color: var(--rf-teal-300);
  border-style: solid;
  background: var(--rf-teal-50, #f0f6f6);
}
.rf-tier--free { background: var(--rf-bg-tint, #fafbfc); }

/* About — manifesto closing tagline */
.rf-about-tagline {
  font-family: var(--rf-font-display);
  font-size: 22px !important;
  font-weight: 700;
  font-style: italic;
  color: var(--rf-teal-700) !important;
  text-align: center;
  letter-spacing: -0.01em;
  line-height: 1.4 !important;
  margin: 28px 0 8px !important;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--rf-teal-100) 0%, transparent 100%);
  border-left: 3px solid var(--rf-teal-700);
  border-radius: 0 12px 12px 0;
}


/* ================================================================
   v4 SENIOR DESIGNER POLISH PASS — May 2026
   ================================================================
   Audit findings and fixes:
   1. Header logo too small (44px) — bumped to 56px desktop / 48px mobile
   2. Header spacing tight — increased padding, refined CTA alignment
   3. Footer social icons — fixed sizing (was relying on lucide CSS that
      no longer applied after icon replacement)
   4. Inconsistent section padding — unified to a vertical rhythm scale
   5. Focus states missing on interactive elements — added accessible rings
   6. Card hover states inconsistent — unified lift + shadow + border
   7. Type tracking on big headlines — slightly tighter for marketing feel
   8. Section eyebrows — refined chip styling, better breathing room
   9. CTA buttons — refined hover, focus, active states
  10. Sticky CTA — slight refinement on shadow and position on mobile
  11. Mobile drawer — refined nav typography and spacing
  12. Empty states — refined styling
  13. Pricing card "Mais popular" ribbon — better z-index, position
  14. Selection color + scrollbar styling for polish
   ================================================================ */

/* ---- Header — logo enlargement & rhythm refinement ---- */
.rf-header { padding: 6px 0; }
.rf-header__logo { height: 56px; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.rf-header__brand:hover .rf-header__logo { transform: scale(1.04); }
/* Vertical padding only via longhand — horizontal padding stays inherited from
   .rf-container (32px desktop / 20px mobile) so the header aligns with every
   other section instead of touching the viewport edges. */
.rf-header__row { padding-top: 14px; padding-bottom: 14px; gap: 20px; }
.rf-header__right { gap: 14px; }
.rf-header.is-scrolled { background: rgba(255,255,255,0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
@media (max-width: 640px) {
  .rf-header__logo { height: 48px; }
  .rf-header__row { padding-top: 12px; padding-bottom: 12px; }
}

/* ---- Footer social icons — explicit SVG sizing (no lucide dependency) ---- */
.rf-footer__social a svg { width: 18px; height: 18px; flex-shrink: 0; display: block; }
.rf-footer__social a { padding: 0; }

/* ---- Universal focus rings (a11y + polish) ---- */
*:focus-visible { outline: 3px solid var(--rf-teal-500, #1f8a8d); outline-offset: 3px; border-radius: 4px; }
.rf-btn:focus-visible, a.rf-btn:focus-visible {
  outline: 3px solid var(--rf-teal-500, #1f8a8d);
  outline-offset: 4px;
}
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible {
  outline-offset: 2px;
}

/* ---- Section vertical rhythm — unified scale ---- */
.rf-section { padding: 88px 0; }
@media (max-width: 980px) { .rf-section { padding: 80px 0; } }
@media (max-width: 640px) { .rf-section { padding: 64px 0; } }
/* Hero has its own padding rules — leave alone */

/* ---- Section heads — better breathing ---- */
.rf-section__head { margin-bottom: 48px; }
.rf-section__head--center { margin-bottom: 56px; }
.rf-section__head .rf-eyebrow { margin-bottom: 22px; display: inline-block; }
.rf-section__head .rf-section__title { margin: 0 0 14px; }
.rf-section__head .rf-section__sub { margin-top: 0; }
@media (max-width: 640px) {
  .rf-section__head { margin-bottom: 48px; }
  .rf-section__head--center { margin-bottom: 52px; }
}

/* ---- Eyebrow chip — slightly more polished ---- */
.rf-eyebrow {
  padding: 7px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(14,79,81,0.10);
  background: rgba(14,79,81,0.04);
  color: var(--rf-teal-700);
}
.rf-eyebrow--amber {
  background: rgba(236,130,64,0.07);
  color: var(--rf-amber-700);
  box-shadow: inset 0 0 0 1px rgba(236,130,64,0.15);
}

/* ---- Headline rhythm — tighter tracking, better line-height ---- */
.rf-section__title {
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  font-weight: 800;
}
.rf-section__sub { font-size: 17px; line-height: 1.55; color: var(--rf-fg-3); max-width: 600px; }
.rf-section__head--center .rf-section__sub { margin-left: auto; margin-right: auto; }

/* ---- Buttons — refined hover, focus, press ---- */
.rf-btn {
  transition: background .18s, color .18s, border-color .18s, transform .12s cubic-bezier(.2,.8,.2,1), box-shadow .18s;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.rf-btn:hover { transform: translateY(-1px); }
.rf-btn:active { transform: translateY(0); }
.rf-btn--primary {
  box-shadow: 0 10px 24px -12px rgba(14,79,81,0.5), inset 0 1px 0 rgba(255,255,255,0.12);
}
.rf-btn--primary:hover {
  box-shadow: 0 14px 32px -10px rgba(14,79,81,0.55), inset 0 1px 0 rgba(255,255,255,0.15);
}
.rf-btn--secondary {
  border: 1.5px solid var(--rf-teal-700);
}
.rf-btn--secondary:hover {
  background: var(--rf-teal-700);
  color: #fff;
}

/* ---- Cards — unified hover treatment (problem, who, roadmap, faq, pricing) ---- */
.rf-problem-card, .rf-who-card, .rf-rmp, .rf-tier {
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
}
.rf-problem-card { padding: 26px 24px; border-radius: 18px; }
.rf-problem-card:hover {
  transform: translateY(-3px);
  border-color: var(--rf-teal-300);
  box-shadow: 0 18px 36px -22px rgba(14,79,81,0.18);
}
.rf-problem-card__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--rf-amber-100);
  color: var(--rf-amber-700);
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.rf-problem-card__icon i, .rf-problem-card__icon svg { width: 22px; height: 22px; }
.rf-problem-card h3 { font-size: 17px; font-weight: 700; color: var(--rf-teal-950); margin: 0 0 6px; }
.rf-problem-card p { font-size: 14.5px; color: var(--rf-fg-3); margin: 0; line-height: 1.55; }

/* ---- Pillar cards — solution section refinement ---- */
.rf-pillar {
  background: #fff;
  border: 1px solid var(--rf-border-2);
  border-radius: 18px;
  padding: 28px 24px;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
}
.rf-pillar:hover {
  transform: translateY(-3px);
  border-color: var(--rf-teal-300);
  box-shadow: 0 18px 36px -22px rgba(14,79,81,0.18);
}
.rf-pillar__num {
  font-family: var(--rf-font-mono);
  font-size: 12px;
  color: var(--rf-fg-4);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.rf-pillar h3 { font-size: 17px; font-weight: 700; color: var(--rf-teal-950); margin: 0 0 6px; }
.rf-pillar p { font-size: 14.5px; color: var(--rf-fg-3); margin: 0; line-height: 1.55; }

/* ---- Pricing — refined popular ribbon ---- */
.rf-tier.is-popular {
  z-index: 2;
}
.rf-tier__ribbon {
  font-size: 11px;
  padding: 7px 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ---- Sticky CTA — refined position and shadow ---- */
.rf-sticky { bottom: 28px; }
.rf-sticky__inner {
  background: linear-gradient(180deg, var(--rf-teal-900) 0%, var(--rf-teal-950) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 24px 56px -18px rgba(14,79,81,0.55), 0 1px 2px rgba(255,255,255,0.08) inset;
}
@media (max-width: 600px) {
  .rf-sticky { bottom: 16px; }
}

/* ---- Drawer (mobile menu) — refined typography ---- */
.rf-drawer__nav a {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 14px 0;
  border-bottom: 1px solid var(--rf-border-2);
  display: block;
  color: var(--rf-fg-1);
  transition: color .15s, padding-left .15s;
}
.rf-drawer__nav a:hover { color: var(--rf-teal-700); padding-left: 6px; }

/* ---- Reviews — refined empty state ---- */
.rf-ratings__empty {
  background: linear-gradient(180deg, #ffffff 0%, #fafcfc 100%);
  border: 1.5px dashed var(--rf-border-2);
  padding: 48px 32px;
}
.rf-ratings__empty i, .rf-ratings__empty svg {
  width: 44px;
  height: 44px;
  color: var(--rf-teal-300);
  margin-bottom: 4px;
}
.rf-ratings__empty p {
  font-size: 15px;
  color: var(--rf-fg-2);
  font-weight: 500;
}

/* ---- Pricing — disabled CTA refinement ---- */
.rf-tier__cta--disabled {
  font-size: 12.5px;
  padding: 13px 16px;
  letter-spacing: 0.01em;
}

/* ---- Selection + scrollbar polish ---- */
::selection { background: var(--rf-teal-200); color: var(--rf-teal-950); }
/* `overflow-x: clip` (not `hidden`) keeps the horizontal-overflow protection
   while preserving `position: sticky` on the header — `hidden` would create
   a new containing block and silently break the sticky behaviour. */
html { scroll-padding-top: 90px; overflow-x: clip; }
body { overflow-x: clip; }
@media (max-width: 640px) {
  /* Prevent any decorative element (phone, blobs, floating tags) from causing
     horizontal scroll on phones */
  .rf-hero, .rf-section, .rf-footer { overflow-x: clip; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- Custom scrollbar (subtle, brand-aligned) — desktop only ---- */
@media (hover: hover) and (pointer: fine) {
  html { scrollbar-width: thin; scrollbar-color: var(--rf-teal-300) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--rf-teal-300); border-radius: 100px; border: 2px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background: var(--rf-teal-500, #1f8a8d); background-clip: padding-box; border: 2px solid transparent; }
}

/* ---- FAQ refinements ---- */
.rf-faq__item summary { padding: 22px 26px; font-weight: 600; }
.rf-faq__item summary:hover { background: var(--rf-bg-tint, #f6f7f9); }
.rf-faq__item[open] summary { background: var(--rf-teal-100); color: var(--rf-teal-900); }
.rf-faq__body { padding: 0 26px 24px; }

/* ---- Final touches: Hero subtle entrance ---- */
.rf-hero--split .rf-hero__title,
.rf-hero--split .rf-hero__sub,
.rf-hero--split .rf-hero__body,
.rf-hero--split .rf-hero__ctas { animation: rf-fadeUp .65s cubic-bezier(.2,.8,.2,1) both; }
.rf-hero--split .rf-hero__title { animation-delay: 0.08s; }
.rf-hero--split .rf-hero__sub { animation-delay: 0.18s; }
.rf-hero--split .rf-hero__body { animation-delay: 0.28s; }
.rf-hero--split .rf-hero__ctas { animation-delay: 0.38s; }
@keyframes rf-fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }


/* ================================================================
   v5 — MOBILE COMPACTION PASS (May 2026)
   Goal: cut the mobile page from ~29 screens to ~16-18.
   Two levers: (1) compact the Features section, (2) tighten vertical
   rhythm site-wide on phones. Desktop is untouched.
   ================================================================ */
@media (max-width: 640px) {

  /* ---- Tighter section rhythm ---- */
  .rf-section { padding: 44px 0; }
  .rf-section__head { margin-bottom: 28px; }
  .rf-section__head--center { margin-bottom: 32px; }
  .rf-section__head .rf-eyebrow { margin-bottom: 14px; }
  .rf-section__head .rf-section__title { margin-bottom: 10px; }

  /* ---- FEATURES — aggressive compaction (was ~6.9 screens) ---- */
  .rf-feature, .rf-feature--wide {
    padding: 18px 16px;
    gap: 14px;
    margin-bottom: 14px;
    border-radius: 16px;
  }
  /* Smaller product mockups on phone */
  .rf-feature__visual > .rf-pm,
  .rf-feature--wide .rf-feature__visual > .rf-pm { min-height: 172px; }
  .rf-feature__icon-tile { width: 38px; height: 38px; border-radius: 9px; margin-bottom: 10px; }
  .rf-feature__icon-tile svg, .rf-feature__icon-tile i { width: 19px; height: 19px; }
  .rf-feature h3 { font-size: 20px; line-height: 1.2; margin-bottom: 4px; }
  .rf-feature__sub { font-size: 12.5px; margin-bottom: 8px; }
  .rf-feature__body { font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
  /* Condensed steps — flat numbered list, no heavy pills */
  .rf-feature__steps { gap: 0; }
  .rf-feature__step { padding: 8px 0; gap: 9px; border-radius: 0; background: transparent; border-top: 1px solid var(--rf-border-2); }
  .rf-feature__step:first-child { border-top: 0; padding-top: 0; }
  .rf-feature__step-num { width: 20px; height: 20px; min-width: 20px; border-radius: 5px; font-size: 10px; }
  .rf-feature__step span { font-size: 12.5px; line-height: 1.4; }

  /* ---- Trim other tall sections' internal gaps ---- */
  .rf-problem-grid { gap: 12px; }
  .rf-problem-wrap { gap: 28px; }
  .rf-pillars { gap: 14px; }
  .rf-who-grid { gap: 14px; }
  .rf-roadmap { gap: 14px; }
  .rf-metrics { gap: 14px; }
  .rf-pricing--five { gap: 14px; }
  .rf-mobile-bullets { gap: 14px; margin: 20px 0 24px; }

  /* Hero — slightly tighter so the fold gets to content faster */
  .rf-hero--split .rf-hero__inner { padding-top: 40px; padding-bottom: 28px; }
}

/* ================================================================
   v6 — MOBILE COMPACTION PASS 2 (May 2026)
   Para Quem 2-col · Problem before/after trim · Ratings empty state
   ================================================================ */
@media (max-width: 640px) {

  /* ---- PARA QUEM — 2-column grid (was 7 cards stacked = 3.5 screens) ---- */
  .rf-who-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .rf-who-card--photo { border-radius: 14px; }
  .rf-who-card__chip { width: 32px; height: 32px; border-radius: 9px; top: 9px; left: 9px; }
  .rf-who-card__chip svg, .rf-who-card__chip i { width: 16px; height: 16px; }
  .rf-who-card__body { padding: 12px 13px 14px; }
  .rf-who-card__body h3 { font-size: 14px; margin-bottom: 3px; line-height: 1.25; }
  .rf-who-card__body p { font-size: 12px; line-height: 1.4; }

  /* ---- PROBLEM — shorter before/after photos (was ~2.3 screens) ---- */
  .rf-pd-photo { gap: 14px; margin-top: 28px; }
  .rf-pd-photo__col { gap: 10px; }
  .rf-pd-photo__img { aspect-ratio: 16/10; border-radius: 14px; }
  .rf-pd-photo__chips { gap: 6px; }
  .rf-pd-photo__chip { font-size: 11px; padding: 4px 9px; }
  .rf-pd-photo__arrow { width: 38px; height: 38px; }

  /* ---- RATINGS — compact, especially the empty state ---- */
  .rf-ratings { gap: 20px; margin-top: 32px; }
  .rf-ratings__agg { padding: 20px; position: static; }
  .rf-ratings__empty { padding: 28px 20px; }
  .rf-ratings__empty i, .rf-ratings__empty svg { width: 34px; height: 34px; }
  .rf-ratings__empty p { font-size: 13.5px; }
  .rf-ratings__form { margin-top: 28px; padding: 22px 18px; }
  .rf-ratings__form-head h3 { font-size: 20px; }
  .rf-ratings__form-head p { font-size: 13px; margin-bottom: 18px; }
  .rf-ratings__field { margin-bottom: 14px; }
}

/* ================================================================
   v7 — MOBILE COMPACTION PASS 3 (May 2026)
   Per-section targets requested by client:
   Hero ~1 screen · Solução ~1 · Impacto 3 metrics in 1 screen ·
   Preços 2-col · Funcionalidades ≤4 screens · Problema 2 · Mobile 1
   ================================================================ */
@media (max-width: 640px) {

  /* ---- HERO — fit copy + CTAs in the first screen ---- */
  .rf-hero--split .rf-hero__inner { padding-top: 28px; padding-bottom: 22px; gap: 18px; }
  .rf-hero__badge { margin-bottom: 14px; padding: 5px 12px 5px 7px; font-size: 12px; }
  .rf-hero--split .rf-hero__title { font-size: 29px; line-height: 1.12; margin: 10px 0 10px; }
  .rf-hero--split .rf-hero__sub { font-size: 16px; margin-bottom: 14px; }
  .rf-hero--split .rf-hero__sub::after { margin-top: 14px; }
  .rf-hero--split .rf-hero__body { font-size: 14.5px; margin-bottom: 18px; }
  .rf-hero--split .rf-hero__ctas { margin-bottom: 16px; gap: 10px; }
  .rf-hero--split .rf-hero__assure { gap: 8px 18px; font-size: 12.5px; }
  .rf-hero__photo { height: clamp(200px, 30vh, 270px) !important; }

  /* ---- SOLUÇÃO — 3 pillars tighter ---- */
  .rf-pillar { padding: 16px 16px; }
  .rf-pillar__num { margin-bottom: 8px; }
  .rf-pillar h3 { font-size: 16px; }
  .rf-pillar p { font-size: 13.5px; }

  /* ---- IMPACTO — three result tiles visible in one screen ---- */
  .rf-metrics { gap: 10px; }
  .rf-metric { padding: 18px 18px; border-radius: 16px; }
  .rf-metric__n { font-size: 40px; margin-bottom: 4px; }
  .rf-metric__l { font-size: 13.5px; line-height: 1.4; }

  /* ---- PREÇOS — 2-column grid (last/odd card spans full width) ---- */
  .rf-pricing--five { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .rf-pricing--five .rf-tier:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .rf-pricing--five .rf-tier { padding: 18px 14px; gap: 10px; }
  .rf-pricing--five .rf-tier.is-popular { transform: none; }
  .rf-pricing--five .rf-tier__name { font-size: 16px; }
  .rf-pricing--five .rf-tier__tag { font-size: 11px; min-height: 14px; }
  .rf-pricing--five .rf-tier__amount { font-size: 28px; }
  .rf-pricing--five .rf-tier__per { font-size: 11px; }
  .rf-pricing--five .rf-tier__feats { gap: 7px; }
  .rf-pricing--five .rf-tier__feats li { font-size: 12px; line-height: 1.35; }
  .rf-pricing--five .rf-tier__feats li svg, .rf-pricing--five .rf-tier__feats li i { width: 13px; height: 13px; min-width: 13px; }
  .rf-pricing--five .rf-tier__cta { font-size: 13px; padding: 11px 12px; }
  .rf-pricing--five .rf-tier__cta--disabled { font-size: 11.5px; }
  .rf-tier__ribbon { font-size: 10px; padding: 5px 12px; top: -26px; }

  /* ---- FUNCIONALIDADES — final trim to stay under 4 screens ---- */
  .rf-feature__visual > .rf-pm,
  .rf-feature--wide .rf-feature__visual > .rf-pm { min-height: 104px; }
  .rf-feature { padding: 14px 13px; margin-bottom: 9px; gap: 11px; }
  .rf-feature h3 { font-size: 18px; }
  .rf-feature__sub { margin-bottom: 7px; }
  .rf-feature__body { font-size: 13.5px; margin-bottom: 9px; }
  .rf-feature__step { padding: 5px 0; }
  .rf-feature__step span { font-size: 12px; }
  .rf-feature__icon-tile { margin-bottom: 8px; }

  /* ---- PROBLEMA — keep under 2 screens ---- */
  .rf-problem-card { padding: 16px 16px; }
  .rf-problem-card__icon { width: 38px; height: 38px; margin-bottom: 10px; }
  .rf-problem-card h3 { font-size: 15px; }
  .rf-problem-card p { font-size: 13px; }
  .rf-pd-photo__img { aspect-ratio: 16/9; }
  .rf-pd-photo__label { font-size: 11px; }

  /* ---- MOBILE section — collapse to ~1 screen ---- */
  .rf-mobile-wrap { gap: 14px; }
  .rf-mobile-stage { min-height: 0 !important; }
  .rf-mobile-stage, .rf-mobile-stage .rf-mobile-mock { min-height: 240px !important; }
  .rf-mobile-stage .rf-mobile-mock { padding: 16px 14px !important; }
  .rf-mobile-phone { max-width: 168px; }
  .rf-mobile-bullets { gap: 8px; margin: 12px 0 14px; }
  .rf-mobile-bullet h4 { font-size: 14px; margin-bottom: 2px; }
  .rf-mobile-bullet p { font-size: 12.5px; line-height: 1.4; }
  .rf-mobile-bullet__check { width: 22px; height: 22px; min-width: 22px; }
  #mobile .rf-section__title { font-size: 24px; }
  #mobile .rf-section__sub { font-size: 14px; }
}

/* ================================================================
   v8 — "TORRE DE CONTROLO" MOCKUP — MOBILE FIX (May 2026)
   On phones the wide tower mockup was misconfigured: the floating
   badge overlapped the panel header (so "Torre de Controlo" showed
   twice) and the 16/9 box was too short, clipping the dashboard.
   Fix: drop the redundant badge, give the box a real mobile height,
   near-full-bleed the panel, and hide the activity feed so the KPIs
   + trend chart fit cleanly.
   ================================================================ */
@media (max-width: 640px) {
  /* The wide-feature visual carried a desktop-only min-height: 480px
     that survived on mobile (specificity beat the compaction rules),
     leaving the mock floating with big empty margins. Hug the mock. */
  .rf-feature--wide .rf-feature__visual { min-height: 0; padding: 0; }

  /* 16/9 was far too short for the dashboard — give it a real box
     tall enough for the header, 2x2 KPIs, the trend chart AND the
     activity feed (which was previously hidden). */
  .rf-feature__visual > .rf-pm--tower,
  .rf-feature--wide .rf-feature__visual > .rf-pm--tower {
    aspect-ratio: auto;
    height: auto;
    min-height: 510px;
  }

  /* Panel near-full-bleed inside a thin photo frame. */
  .rf-pm--tower .rf-tower {
    inset: 12px;
    padding: 13px 13px 12px;
    gap: 10px;
  }

  /* Activity feed restored — chart and feed stacked vertically. */
  .rf-pm--tower .rf-tower__grid { grid-template-columns: 1fr; gap: 8px; }
  .rf-pm--tower .rf-tower__feed { padding: 6px 9px; gap: 5px; }
  .rf-pm--tower .rf-tower__row  { padding: 5px 7px; }
  .rf-pm--tower .rf-tower__row-tag { font-size: 9px; padding: 2px 5px; }
  .rf-pm--tower .rf-tower__row-txt { font-size: 11px; }
  .rf-pm--tower .rf-tower__row-time { font-size: 10px; }

  /* Slightly tighter KPIs so all four read well in 2x2. */
  .rf-pm--tower .rf-tower__kpi { padding: 7px 9px; }
  .rf-pm--tower .rf-tower__kpi-n { font-size: 15px; }
}

/* ================================================================
   v9 — MOBILE COMPACTION PASS 4 (May 2026)
   Further tightening of Solução, Impacto, O Problema and the Mobile
   section. Pulls each panel ~15-25 % shorter on phones without
   compromising legibility. Desktop untouched.
   ================================================================ */
@media (max-width: 640px) {

  /* ---- SOLUÇÃO — three pillars, more compact ---- */
  .rf-pillars                          { gap: 10px; }
  .rf-pillar                           { padding: 14px 14px; }
  .rf-pillar__num                      { margin-bottom: 6px; }
  .rf-pillar h3                        { font-size: 15px; margin-bottom: 4px; }
  .rf-pillar p                         { font-size: 13px; line-height: 1.45; }

  /* ---- IMPACTO — three metric tiles, tighter ---- */
  .rf-metrics                          { gap: 8px; }
  .rf-metric                           { padding: 14px 12px; border-radius: 14px; }
  .rf-metric__n                        { font-size: 34px; margin-bottom: 2px; }
  .rf-metric__l                        { font-size: 12.5px; line-height: 1.35; }

  /* ---- O PROBLEMA — 4 cards + before/after photos ---- */
  .rf-problem-grid                     { gap: 10px; }
  .rf-problem-card                     { padding: 12px 13px; border-radius: 12px; }
  .rf-problem-card__icon               { width: 32px; height: 32px; margin-bottom: 8px; }
  .rf-problem-card__icon svg,
  .rf-problem-card__icon i             { width: 16px; height: 16px; }
  .rf-problem-card h3                  { font-size: 14px; margin-bottom: 3px; }
  .rf-problem-card p                   { font-size: 12.5px; line-height: 1.4; }
  .rf-pd-photo                         { margin-top: 18px; gap: 10px; }
  .rf-pd-photo__img                    { aspect-ratio: 21/10; border-radius: 12px; }
  .rf-pd-photo__arrow                  { width: 32px; height: 32px; }
  .rf-pd-photo__chip                   { font-size: 10.5px; padding: 3px 8px; }
  .rf-pd-photo__label                  { font-size: 10.5px; }

  /* ---- MOBILE section — phone mock + bullets, even tighter ---- */
  .rf-mobile-wrap                      { gap: 10px; }
  .rf-mobile-stage,
  .rf-mobile-stage .rf-mobile-mock     { min-height: 200px !important; }
  .rf-mobile-phone                     { max-width: 150px; }
  .rf-mobile-bullets                   { gap: 6px; margin: 8px 0 10px; }
  .rf-mobile-bullet h4                 { font-size: 13.5px; margin-bottom: 1px; }
  .rf-mobile-bullet p                  { font-size: 12px; line-height: 1.4; }
  .rf-mobile-bullet__check             { width: 20px; height: 20px; min-width: 20px; }
  #mobile .rf-section__title           { font-size: 22px; }
  #mobile .rf-section__sub             { font-size: 13px; }
}

/* ================================================================
   v10 — DRAWER FIT + UNIFORM RHYTHM + IMAGE TEXT (May 2026)
   Three coordinated mobile fixes:
   (1) Compact the hamburger drawer so it fits in one viewport on
       phones (was overflowing on iPhone SE / mini sizes), with a
       scroll fallback for very short screens.
   (2) Uniformize section titles and subtitles across all sections
       on mobile — the recent v9 left #mobile at 22px while the rest
       defaulted to clamp(34px, …) — too jarring.
   (3) Strengthen white captions and badges that sit over photos so
       they stay legible across the range of photo brightnesses.
   Desktop is untouched throughout.
   ================================================================ */
@media (max-width: 640px) {

  /* ---- (1) DRAWER — fit the full menu inside the viewport ---- */
  .rf-drawer__panel                    { padding: 18px; gap: 14px; overflow-y: auto; }
  .rf-drawer__head                     { padding-bottom: 10px; }
  .rf-drawer__head .rf-header__logo    { height: 38px; }
  .rf-drawer__close svg,
  .rf-drawer__close i                  { width: 20px; height: 20px; }
  .rf-drawer__nav                      { gap: 2px; }
  .rf-drawer__nav a                    { padding: 9px 10px; font-size: 15px; border-radius: 8px; }
  .rf-drawer__ctas                     { gap: 8px; }
  .rf-drawer__ctas .rf-btn--lg         { padding: 10px 16px; font-size: 14px; }
  .rf-drawer__lang                     { padding-top: 12px; gap: 5px; }
  .rf-drawer__lang button              { padding: 6px 9px; font-size: 12px; }

  /* ---- (2) UNIFORM SECTION HEADS — same scale across all sections ---- */
  .rf-section__title                   { font-size: 26px; line-height: 1.15; }
  .rf-section__sub                     { font-size: 14.5px; line-height: 1.5; }
  /* Override the #mobile-specific values from v7/v9 so they match the rest */
  #mobile .rf-section__title           { font-size: 26px; }
  #mobile .rf-section__sub             { font-size: 14.5px; }

  /* ---- (3) IMAGE TEXT — keep white captions legible on busy photos ---- */
  .rf-pm__caption {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.005em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.65), 0 0 8px rgba(0,0,0,0.45);
  }
  /* Strengthen the bottom-darkening gradient so captions read on any photo */
  .rf-pm__bg-grad {
    background:
      linear-gradient(135deg, rgba(6,30,32,0.55) 0%, rgba(6,30,32,0.10) 50%),
      linear-gradient(0deg, rgba(6,30,32,0.72) 0%, transparent 62%);
  }
  /* Floating badge over the photo gets the same shadow treatment */
  .rf-pm__badge                        { box-shadow: 0 6px 18px -4px rgba(0,0,0,0.4); }
}

/* ================================================================
   v11 — FOOTER COMPACT + O PROBLEMA HORIZONTAL CARDS (May 2026)
   - Mobile footer: 3 menu columns side-by-side (was 2+1 with orphan
     row), smaller typography, tighter spacing — overall footer is now
     ~40 % shorter on phones.
   - O Problema cards: icon now sits to the LEFT of the title + body
     (was icon-on-top stack) — each card is half the height it was.
   ================================================================ */
@media (max-width: 640px) {

  /* ---- FOOTER — compact, 3 columns in one row ---- */
  .rf-footer--full                     { padding: 44px 0 24px; }
  .rf-footer--full .rf-footer__top     { gap: 26px; padding-bottom: 26px; }
  .rf-footer--full .rf-footer__brand img { height: 28px; margin-bottom: 10px; }
  .rf-footer--full .rf-footer__tag     { font-size: 13px; line-height: 1.5; max-width: 100%; margin-bottom: 14px; }
  .rf-footer__social                   { gap: 8px; }
  .rf-footer__social a                 { width: 34px; height: 34px; border-radius: 8px; }
  .rf-footer__social i,
  .rf-footer__social svg               { width: 16px; height: 16px; }
  .rf-footer__cols                     { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .rf-footer__col h5                   { font-size: 10.5px; margin-bottom: 10px; letter-spacing: .06em; }
  .rf-footer__col ul                   { gap: 7px; }
  .rf-footer__col a                    { font-size: 12.5px; line-height: 1.35; }
  .rf-footer__bottom                   { padding-top: 16px; gap: 8px; }
  .rf-footer__bottom p                 { font-size: 11.5px; }

  /* ---- O PROBLEMA — icon LEFT, title+body stacked on the RIGHT ---- */
  .rf-problem-card {
    display: grid;
    grid-template-columns: 36px 1fr;
    column-gap: 12px;
    row-gap: 1px;
    align-items: center;
    padding: 12px 14px;
  }
  .rf-problem-card__icon {
    grid-row: 1 / span 2;
    width: 36px; height: 36px;
    margin-bottom: 0;
  }
  .rf-problem-card__icon svg,
  .rf-problem-card__icon i             { width: 18px; height: 18px; }
  .rf-problem-card h3                  { font-size: 14px; margin-bottom: 0; line-height: 1.25; }
  .rf-problem-card p                   { font-size: 12.5px; line-height: 1.4; margin-bottom: 0; }
}

/* ================================================================
   v12 — SOLUÇÃO + IMPACTO HORIZONTAL CARDS (May 2026)
   Brings these two sections in line with the v11 problem cards on
   phones, so all three sections share the same visual rhythm:
   item/number on the LEFT, title + body on the RIGHT. Each card is
   ~40 % shorter than the previous stacked layout.
   ================================================================ */
@media (max-width: 640px) {

  /* ---- SOLUÇÃO pillars: number tile LEFT, h3+p stacked RIGHT ---- */
  .rf-pillar {
    display: grid;
    grid-template-columns: 36px 1fr;
    column-gap: 12px;
    row-gap: 1px;
    align-items: center;
    padding: 12px 14px;
  }
  .rf-pillar__num {
    grid-row: 1 / span 2;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: var(--rf-teal-100);
    color: var(--rf-teal-800);
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 0;
  }
  .rf-pillar h3                        { font-size: 14px; margin: 0; line-height: 1.25; }
  .rf-pillar p                         { font-size: 12.5px; line-height: 1.4; margin: 0; }

  /* ---- IMPACTO metrics: big number LEFT, label RIGHT ----
     Fixes the "encostado à esquerda" look — the metric content was
     defaulting to left-aligned blocks in a full-width 1-col card. */
  .rf-metric {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    align-items: center;
    padding: 14px 18px;
    text-align: left;
  }
  .rf-metric__n {
    font-size: 32px;
    margin-bottom: 0;
    /* gradient text-fill from base rule is preserved */
  }
  .rf-metric__l {
    font-size: 13px;
    line-height: 1.35;
  }
}

/* ================================================================
   v13 — REFINED POLISH (May 2026)
   - Metric cards: when labels have different line counts (1 vs 2),
     the bottoms now align visually across all three cards on desktop.
     The number stays at top, the label is pushed to the bottom via
     a flexbox auto margin — cards read as a coherent set.
   - Pricing grid: small top breathing room so the floating popular
     ribbon (top: -32px) is clearly framed by the section.
   - Free-tier disabled CTA: slightly more refined styling so it
     reads as informational, not a broken button.
   ================================================================ */

/* (1) Metric card vertical alignment — desktop and tablet only.
   On mobile (≤640) v12 uses a horizontal grid layout instead. */
@media (min-width: 641px) {
  .rf-metric { display: flex; flex-direction: column; }
  .rf-metric__l { margin-top: auto; }
}

/* (2) Pricing grid — comfortable breathing room above the ribbon */
.rf-pricing--five { padding-top: 20px; }

/* (4) Footer lang button placement on mobile — keep the "PT" button anchored
   to the RIGHT of its row, regardless of whether the footer-bottom wraps.
   With the button always on the right side, the base menu rule (right: 0,
   extending left) is safe at every viewport width — no overflow either edge. */
@media (max-width: 640px) {
  .rf-footer__bottom-right { margin-left: auto; }
}

/* (3) Free-tier disabled CTA — informational pill, no fake-button look */
.rf-tier__cta--disabled {
  background: var(--rf-slate-50);
  color: var(--rf-fg-3);
  border: 1px dashed var(--rf-border-2);
  border-radius: 10px;
  padding: 10px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  pointer-events: none;
}

/* ================================================================
   USER MANUAL PAGE — manual.html
   Two-column layout: sticky TOC on the left, content cards on the
   right. Stacks below 980px. Matches the legal/roadmap page chrome.
   ================================================================ */
.rf-manual__pdf { margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; }
.rf-manual__pdf i, .rf-manual__pdf svg { width: 18px; height: 18px; }
.rf-manual__wrap { display: grid; grid-template-columns: 260px 1fr; gap: 56px; margin-top: 8px; align-items: start; }
.rf-manual__toc-wrap { position: relative; }
.rf-manual__toc { position: sticky; top: 110px; background: #fff; border: 1px solid var(--rf-border-2); border-radius: 14px; padding: 22px 20px; box-shadow: 0 1px 0 rgba(14,79,81,0.04); }
.rf-manual__toc-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--rf-fg-4); margin-bottom: 12px; }
.rf-manual__toc nav { display: flex; flex-direction: column; gap: 2px; }
.rf-manual__toc nav a { padding: 9px 11px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--rf-fg-2); text-decoration: none; transition: background .15s, color .15s; line-height: 1.35; }
.rf-manual__toc nav a:hover { background: var(--rf-slate-50); color: var(--rf-teal-700); }
.rf-manual__content { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.rf-manual__section { background: #fff; border: 1px solid var(--rf-border-2); border-radius: 16px; padding: 34px 38px; scroll-margin-top: 100px; }
.rf-manual__section-title { font-size: 24px; font-weight: 800; color: var(--rf-teal-900); letter-spacing: -0.01em; margin: 0 0 14px; line-height: 1.2; }
.rf-manual__section-body { font-size: 15.5px; line-height: 1.65; color: var(--rf-fg-2); }
.rf-manual__section-body p { margin: 0 0 12px; }
.rf-manual__section-body p:last-child { margin-bottom: 0; }
.rf-manual__section-body a { color: var(--rf-teal-700); text-decoration: underline; text-underline-offset: 2px; }
.rf-manual__section-body a:hover { color: var(--rf-teal-800); }
.rf-manual__section-body em { color: var(--rf-fg-3); font-style: italic; }
.rf-manual__section-body ul, .rf-manual__section-body ol { padding-left: 22px; margin: 0 0 12px; }
.rf-manual__section-body li { margin-bottom: 4px; }
.rf-manual__section-body h3 { font-size: 17px; font-weight: 700; margin: 18px 0 8px; color: var(--rf-teal-900); }
.rf-manual__section-body code { background: var(--rf-slate-50); padding: 2px 7px; border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; color: var(--rf-teal-800); }
@media (max-width: 980px) {
  .rf-manual__wrap { grid-template-columns: 1fr; gap: 22px; }
  .rf-manual__toc { position: static; }
}
@media (max-width: 640px) {
  .rf-manual__section { padding: 22px 20px; border-radius: 14px; }
  .rf-manual__section-title { font-size: 20px; }
  .rf-manual__wrap { gap: 16px; }
  .rf-manual__content { gap: 16px; }
}

/* ================================================================
   MANUAL HUB (manual.html) — language picker with 4 cards.
   The actual manual content lives at /manuals/manual-<lang>.html
   (and its PDF sibling) — this page is the front door.
   ================================================================ */
.rf-manual-hub {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
}
.rf-manual-card {
  background: #fff;
  border: 1px solid var(--rf-border-2);
  border-radius: 16px;
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  position: relative;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.rf-manual-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -20px rgba(15,80,80,0.28);
  border-color: var(--rf-teal-300, #6fa8aa);
}
.rf-manual-card.is-current {
  border-color: var(--rf-teal-700);
  box-shadow: 0 18px 40px -18px rgba(15,80,80,0.30);
}
.rf-manual-card__pill {
  position: absolute;
  top: -10px;
  background: var(--rf-teal-700);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
}
.rf-manual-card__flag { font-size: 38px; line-height: 1; }
.rf-manual-card__name {
  font-size: 18px; font-weight: 700;
  color: var(--rf-teal-900);
  letter-spacing: -0.005em;
}
.rf-manual-card__cta {
  width: 100%;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}
.rf-manual-card__cta i, .rf-manual-card__cta svg { width: 16px; height: 16px; }
.rf-manual-card__download {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--rf-fg-3);
  text-decoration: none;
  padding: 4px 6px;
  transition: color .15s;
}
.rf-manual-card__download:hover { color: var(--rf-teal-700); }
.rf-manual-card__download i, .rf-manual-card__download svg { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .rf-manual-hub { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
}
@media (max-width: 480px) {
  .rf-manual-hub { grid-template-columns: 1fr; max-width: 360px; }
}