/* ══════════════════════════════════════════════════════════════════════════ css/revenue-sharing.css — REVENUE SHARING (fw-rvs) /revenue-sharing, built 5 Oct 2026 as a hybrid information page (Manage › Partner With Us › For Doctors › Revenue Sharing). No form: every button opens Join as Doctor with ?from=revenue-sharing. ITS OWN PAGE, the fourth For Doctors sibling. Every device is about a SPLIT, so nothing is borrowed from the photo-led siblings: §1 the opening beside a SPLIT RING (the first plan's share) with its keys and the payout line; facts as a ruled definition row §2 promises on a ribbon, fade-divided §3 THE RATE CARD: a share dial per service (the doctor's % inside, the service glyph on its rim), what one patient brings you §4 THE WORKED EXAMPLE: a calculator; the lines with steppers beside a result ring holding the month's total, the split and the figures §5 yours and ours as two tinted halves, gradient badges, meeting at a split seal (the first plan's share) §6 the payout cycle on a 31-day MONTH BAR, steps pinned to their day §7 questions beside the pinned NEXT STEP panel (photo, words, Apply) PALETTE: blue is the doctor's share and the page's voice, pink is the network's share and the action. No inline styles. Never a class holding "fa-", "bi-" or "uil-". ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 00 · TOKENS & PRIMITIVES ══════════════════════════════════════════════════════════════ */ .fw-rvs-page{ --pad:28px; --ink:var(--dk-d); --you:var(--bl-d); --us:var(--pk); --line:color-mix(in srgb, var(--dk) 10%, transparent); --fade:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent); --fade-v:linear-gradient(180deg, transparent, var(--line) 14%, var(--line) 86%, transparent); --sec:clamp(30px, 5.4vh, 60px); --gap:clamp(28px, 5vw, 80px); --ease:cubic-bezier(.22,1,.36,1); --ease-pop:cubic-bezier(.34,1.56,.64,1); background:var(--wh); } .fw-rvs{display:block;position:relative;background:var(--wh)} .fw-rvs em{font-family:var(--ff);font-style:normal} .fw-rvs .fw-ico{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .fw-rvs-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)} .fw-rvs-sec{position:relative;padding:var(--sec) 0} .fw-rvs-sec::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;z-index:1;height:1px;background:var(--fade)} .fw-rvs-head{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(18px, 2.8vh, 30px)} .fw-rvs-head--row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:12px 40px;flex-wrap:wrap} .fw-rvs-head--row > div{display:flex;flex-direction:column;gap:8px;max-width:760px} .fw-rvs-head--row > .fw-rvs-sub{flex:1 1 320px;max-width:520px;text-align:right} .fw-rvs-head--center{align-items:center;text-align:center} .fw-rvs-head--center .fw-rvs-sub{max-width:640px} .fw-rvs-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bl-d)} .fw-rvs-eyebrow .fw-ico{width:16px;height:16px;flex:none} .fw-rvs-h2{margin:0;font-family:var(--ff);font-weight:600;color:var(--ink);font-size:clamp(26px, 4.2vh, 40px);line-height:1.12;letter-spacing:-.02em;text-wrap:balance} .fw-rvs-h3{margin:0;font-family:var(--ff);font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)} .fw-rvs-sub{margin:0;font-size:clamp(14.5px, 1.9vh, 16.5px);line-height:1.6;color:var(--g6);text-wrap:pretty} .fw-rvs-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 26px;border-radius:999px;background:var(--bl-d);color:var(--wh);font-size:15px;font-weight:600;transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease)} .fw-rvs-btn--pk{background:var(--pk-d);box-shadow:var(--pk-glow)} .fw-rvs-btn--pk:hover{background:var(--pk-dd);color:var(--wh);transform:translateY(-2px);box-shadow:var(--pk-glow-lg)} .fw-rvs-btn .bi-arrow-right,.fw-rvs-link .bi{transition:transform .25s var(--ease)} .fw-rvs-btn:hover .bi-arrow-right,.fw-rvs-link:hover .bi-arrow-right{transform:translateX(4px)} .fw-rvs-link{display:inline-flex;align-items:center;gap:8px;padding:0;background:none;font-size:14.5px;font-weight:600;color:var(--bl-d);transition:color .2s var(--ease)} .fw-rvs-link .fw-ico{width:18px;height:18px} .fw-rvs-link:hover{color:var(--pk-dd)} .fw-rvs-tile{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:14px;color:var(--bl-d);background:var(--bl-wash);transition:transform .35s var(--ease-pop)} .fw-rvs-tile .fw-ico{width:23px;height:23px} .fw-rvs-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .fw-rvs-spot{position:absolute;display:block;aspect-ratio:1;border-radius:50%;filter:blur(80px);animation:fw-rvs-drift 27s ease-in-out infinite} .fw-rvs-spot--b{top:4%;left:-6%;width:clamp(220px, 26vw, 420px);background:var(--bl-t)} .fw-rvs-spot--p{bottom:-10%;right:-4%;width:clamp(220px, 24vw, 400px);background:color-mix(in srgb, var(--pk) 10%, transparent);animation-duration:31s} @keyframes fw-rvs-drift{50%{transform:translate(26px, -20px) scale(1.06)}} .fw-rvs-note,.fw-rvs-fine{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:13.5px;line-height:1.55;color:var(--g6)} .fw-rvs-note .fw-ico,.fw-rvs-fine .fw-ico{width:16px;height:16px;flex:none;margin-top:2px;color:var(--bl-d)} .fw-rvs-fine{margin-top:clamp(12px, 2vh, 18px)} .fw-rvs-sample{margin-left:6px;padding:1px 9px;border-radius:999px;background:var(--go-l);color:var(--go-ink);font-size:12px;font-weight:700;white-space:nowrap} /* ══════════════════════════════════════════════════════════════ 01 · THE OPENING — beside the split ring ══════════════════════════════════════════════════════════════ */ .fw-rvs .fw-rvs-mast{position:relative;padding-bottom:clamp(24px, 4vh, 44px)} .fw-rvs-mast__grid{display:grid;grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr);align-items:center;gap:clamp(24px, 4vw, 72px)} .fw-rvs-mast__grid.is-one{grid-template-columns:minmax(0, 1fr)} .fw-rvs-mast__copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0} .fw-rvs-mast__copy .fw-crumb{margin-bottom:4px} .fw-rvs .fw-rvs-h1{margin:0;font-size:clamp(36px, 6.4vh, 64px);line-height:1.04;letter-spacing:-.035em;color:var(--ink);text-wrap:balance} .fw-rvs .fw-rvs-mast .fw-rvs-h1 span{display:block;-webkit-text-fill-color:transparent;background:linear-gradient(100deg, var(--bl-d) 15%, var(--pk-d) 85%);-webkit-background-clip:text;background-clip:text;color:transparent} .fw-rvs-lead{margin:0;max-width:620px;font-size:clamp(16px, 2.2vh, 19px);line-height:1.6;color:var(--g6);text-wrap:pretty} .fw-rvs-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:6px} /* facts: a ruled definition row, the figure under its label */ .fw-rvs-facts{position:relative;display:flex;flex-wrap:wrap;gap:0;margin:clamp(10px, 2vh, 22px) 0 0;padding:0} .fw-rvs-facts > div{position:relative;display:flex;flex-direction:column-reverse;gap:2px;padding:clamp(12px, 2vh, 16px) clamp(18px, 2.4vw, 34px) 0 0;margin-right:clamp(18px, 2.4vw, 34px)} .fw-rvs-facts > div + div::before{content:"";position:absolute;left:calc(clamp(18px, 2.4vw, 34px) * -1);top:clamp(12px, 2vh, 16px);bottom:4px;width:1px;background:var(--fade-v)} .fw-rvs-facts::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-rvs-facts dt{font-size:12.5px;font-weight:600;color:var(--g6)} .fw-rvs-facts dd{display:flex;align-items:center;gap:8px;margin:0;font-size:clamp(20px, 2.8vh, 26px);font-weight:700;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums} .fw-rvs-facts__ico{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;color:var(--bl-d);background:var(--bl-wash)} .fw-rvs-facts__ico .fw-ico{width:17px;height:17px} /* the ring */ .fw-rvs-ring{display:flex;flex-direction:column;align-items:center;gap:clamp(12px, 2vh, 18px);margin:0;min-width:0} .fw-rvs-ring__dial{position:relative;width:min(100%, clamp(240px, 42vh, 380px));aspect-ratio:1} .fw-rvs-ring__dial svg{display:block;width:100%;height:100%;transform:rotate(-90deg);filter:drop-shadow(0 18px 34px color-mix(in srgb, var(--bl-d) 18%, transparent))} .fw-rvs-ring__dial circle{fill:none;stroke-width:14} .fw-rvs-ring__us{stroke:color-mix(in srgb, var(--pk) 72%, var(--wh))} .fw-rvs-ring__you{stroke:var(--you);stroke-linecap:round;animation:fw-rvs-draw 1.4s var(--ease) both} @keyframes fw-rvs-draw{from{stroke-dasharray:0 100}} .fw-rvs-ring__mid{position:absolute;inset:18%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:50%;background:radial-gradient(circle, var(--wh) 60%, var(--bl-wash));text-align:center} .fw-rvs-ring__mid small{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g5)} .fw-rvs-ring__mid b{font-family:var(--ff);font-size:clamp(46px, 8vh, 76px);font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--you)} .fw-rvs-ring__mid b sup{font-size:.42em;top:-1.1em;margin-left:2px} .fw-rvs-ring__mid span{max-width:80%;font-size:14px;font-weight:600;color:var(--g7)} .fw-rvs-ring__keys{display:flex;flex-direction:column;gap:7px;width:100%;max-width:420px} .fw-rvs-ring__keys > span{display:flex;align-items:baseline;gap:8px;font-size:14px;line-height:1.45;color:var(--g6)} .fw-rvs-ring__keys i{flex:none;width:10px;height:10px;border-radius:50%;transform:translateY(1px)} .fw-rvs-ring__keys .is-you i{background:var(--you)} .fw-rvs-ring__keys .is-us i{background:var(--us)} .fw-rvs-ring__keys .is-you b{color:var(--you)} .fw-rvs-ring__keys .is-us b{color:var(--pk-dd)} .fw-rvs-ring__keys .is-eg{align-items:center;padding-top:7px;background:linear-gradient(var(--line), var(--line)) top / 100% 1px no-repeat;font-weight:600;color:var(--ink)} .fw-rvs-ring__keys .is-eg .fw-ico{width:17px;height:17px;flex:none;color:var(--mt-d)} .fw-rvs-ring__pay{display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 16px;border-radius:999px;background:var(--mt-l);color:var(--mt-ink);font-size:13.5px;font-weight:700} .fw-rvs-ring__pay .fw-ico{width:17px;height:17px} /* ══════════════════════════════════════════════════════════════ 02 · OUR PROMISES — a ribbon ══════════════════════════════════════════════════════════════ */ .fw-rvs-promise{position:relative;padding:clamp(14px, 2.4vh, 22px) 0;background:linear-gradient(90deg, var(--bl-wash), color-mix(in srgb, var(--pk) 5%, var(--wh)))} .fw-rvs-promise__list{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:12px 0;margin:0;list-style:none} .fw-rvs-promise__list li{position:relative;display:flex;align-items:center;gap:12px;padding:0 clamp(14px, 1.8vw, 26px)} .fw-rvs-promise__list li:first-child{padding-left:0} .fw-rvs-promise__list li + li::before{content:"";position:absolute;left:0;top:10%;bottom:10%;width:1px;background:var(--fade-v)} .fw-rvs-promise__ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;color:var(--pk-dd);background:var(--wh);box-shadow:0 6px 16px var(--pk-ring)} .fw-rvs-promise__ico .fw-ico{width:20px;height:20px} .fw-rvs-promise__list div{display:flex;flex-direction:column;min-width:0} .fw-rvs-promise__list b{font-size:14.5px;font-weight:700;color:var(--ink)} .fw-rvs-promise__list span{font-size:13px;line-height:1.45;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 03 · THE RATE CARD — a share dial for every service ══════════════════════════════════════════════════════════════ */ .fw-rvs-dials{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:0 clamp(20px, 3vw, 48px);margin:0;padding:0;list-style:none} .fw-rvs-dials li{position:relative;display:grid;grid-template-columns:78px minmax(0, 1fr);gap:16px;align-items:center;padding:clamp(12px, 1.9vh, 18px) 0} .fw-rvs-dials li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-rvs-dial{position:relative;width:78px;aspect-ratio:1} .fw-rvs-dial svg{display:block;width:100%;height:100%;transform:rotate(-90deg)} .fw-rvs-dial circle{fill:none;stroke-width:7} .fw-rvs-dial__us{stroke:color-mix(in srgb, var(--pk) 26%, var(--wh))} .fw-rvs-dial__you{stroke:var(--you);stroke-linecap:round;animation:fw-rvs-draw 1.2s var(--ease) both} .fw-rvs-dial > b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ff);font-size:21px;font-weight:700;letter-spacing:-.03em;color:var(--you);font-variant-numeric:tabular-nums} .fw-rvs-dial > b small{align-self:flex-start;margin:26px 0 0 1px;font-size:.55em} .fw-rvs-dial__ico{position:absolute;right:-6px;bottom:-4px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:var(--wh);background:linear-gradient(140deg, var(--bl), var(--bl-d));box-shadow:0 0 0 3px var(--wh), 0 6px 14px var(--bl-ring);transition:transform .35s var(--ease-pop)} .fw-rvs-dial__ico .fw-ico{width:16px;height:16px} .fw-rvs-dials li:hover .fw-rvs-dial__ico{transform:scale(1.12) rotate(-8deg)} .fw-rvs-dials__t{display:flex;flex-direction:column;gap:3px;min-width:0} .fw-rvs-dials__t .fw-rvs-h3{font-size:16.5px} .fw-rvs-dials__eg{margin:0;font-size:13.5px;color:var(--g6)} .fw-rvs-dials__eg b{font-size:17px;font-weight:700;color:var(--you);font-variant-numeric:tabular-nums} .fw-rvs-dials__cov{display:flex;align-items:flex-start;gap:6px;margin:2px 0 0;font-size:12.5px;line-height:1.4;color:var(--g5)} .fw-rvs-dials__cov .fw-ico{flex:none;width:14px;height:14px;margin-top:1px;color:var(--pk-d)} .fw-rvs-dials__cov span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* ══════════════════════════════════════════════════════════════ 04 · THE WORKED EXAMPLE — the lines beside the result ring ══════════════════════════════════════════════════════════════ */ .fw-rvs-worked{background:linear-gradient(180deg, var(--bl-wash), var(--wh) 85%)} .fw-rvs-worked .fw-rvs-eyebrow .fw-rvs-sample{margin-left:4px;letter-spacing:0;text-transform:none} .fw-rvs-calc{display:grid;grid-template-columns:minmax(0, 1.3fr) minmax(0, .7fr);gap:var(--gap);align-items:center} .fw-rvs-calc__lines{display:flex;flex-direction:column;gap:12px;min-width:0} .fw-rvs-calc__cols,.fw-rvs-calc__lines li{display:grid;grid-template-columns:minmax(0, 1fr) 150px 120px;gap:16px;align-items:center} .fw-rvs-calc__cols{padding-bottom:4px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g5)} .fw-rvs-calc__cols span:nth-child(2){text-align:center} .fw-rvs-calc__cols span:last-child{text-align:right} .fw-rvs-calc__lines ul{margin:0;padding:0;list-style:none} .fw-rvs-calc__lines li{position:relative;padding:10px 0} .fw-rvs-calc__lines li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-rvs-calc__lines li:hover .fw-rvs-tile{transform:translateY(-2px) rotate(-6deg)} .fw-rvs-calc__svc{display:flex;align-items:center;gap:14px;min-width:0} .fw-rvs-calc__svc > span:last-child{display:flex;flex-direction:column;gap:1px;min-width:0} .fw-rvs-calc__svc b{font-size:15.5px;font-weight:600;color:var(--ink)} .fw-rvs-calc__svc small{font-size:12.5px;color:var(--g6)} .fw-rvs-calc__svc small i{font-style:normal;margin:0 3px;color:var(--g4)} .fw-rvs-calc__svc small em{font-weight:700;color:var(--you)} .fw-rvs-step{display:grid;grid-template-columns:38px minmax(0, 1fr) 38px;align-items:center;height:42px;border-radius:999px;background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--bl-l2), 0 6px 16px color-mix(in srgb, var(--bl-d) 8%, transparent)} .fw-rvs-step button{display:grid;place-items:center;width:34px;height:34px;margin:0 2px;padding:0;border:0;border-radius:50%;background:var(--bl-wash);color:var(--bl-d);font-size:14px;cursor:pointer;transition:background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease)} .fw-rvs-step button:hover{background:var(--bl-d);color:var(--wh)} .fw-rvs-step button:active{transform:scale(.9)} .fw-rvs-step input{width:100%;min-width:0;height:36px;padding:0;border:0;background:transparent;text-align:center;font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield} .fw-rvs-step input::-webkit-inner-spin-button,.fw-rvs-step input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} .fw-rvs-step input:focus{outline:none} .fw-rvs-step:focus-within{box-shadow:inset 0 0 0 2px var(--bl), 0 6px 16px color-mix(in srgb, var(--bl-d) 8%, transparent)} .fw-rvs-calc__amt{text-align:right;font-size:17px;font-weight:700;color:var(--you);font-variant-numeric:tabular-nums} /* the result: a ring with the month's total inside, the split and the figures */ .fw-rvs-calc__out{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(12px, 2vh, 18px);min-width:0} .fw-rvs-calc__out::before{content:"";position:absolute;left:calc(var(--gap) / -2);top:4%;bottom:4%;width:1px;background:var(--fade-v)} .fw-rvs-calc__ring{position:relative;width:min(100%, clamp(210px, 33vh, 290px));aspect-ratio:1} .fw-rvs-calc__ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg);filter:drop-shadow(0 16px 30px color-mix(in srgb, var(--bl-d) 18%, transparent))} .fw-rvs-calc__ring circle{fill:none;stroke-width:11;transition:stroke-dasharray .6s var(--ease)} .fw-rvs-calc__mid{position:absolute;inset:16%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:50%;background:radial-gradient(circle, var(--wh) 62%, var(--bl-wash));text-align:center} .fw-rvs-calc__mid small{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g5)} .fw-rvs-calc__mid b{font-family:var(--ff);font-size:clamp(24px, 4vh, 34px);font-weight:700;line-height:1.05;letter-spacing:-.03em;color:var(--you);font-variant-numeric:tabular-nums} .fw-rvs-calc__mid span{font-size:13.5px;font-weight:600;color:var(--g6)} .fw-rvs-calc__mid b.is-bump,.fw-rvs-calc__tot dd.is-bump{animation:fw-rvs-bump .45s var(--ease-pop)} @keyframes fw-rvs-bump{40%{transform:scale(1.06)}} .fw-rvs-calc__keys{display:flex;gap:20px;margin:0;font-size:14px;color:var(--g6)} .fw-rvs-calc__keys > span{display:inline-flex;align-items:center;gap:7px} .fw-rvs-calc__keys i{width:10px;height:10px;border-radius:50%} .fw-rvs-calc__keys .is-you i{background:var(--you)} .fw-rvs-calc__keys .is-us i{background:var(--us)} .fw-rvs-calc__keys .is-you b{color:var(--you)} .fw-rvs-calc__keys .is-us b{color:var(--pk-dd)} .fw-rvs-calc__tot{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));width:100%;margin:0;padding-top:14px;background:linear-gradient(var(--line), var(--line)) top / 100% 1px no-repeat} .fw-rvs-calc__tot > div{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:0 8px;text-align:center} .fw-rvs-calc__tot > div + div::before{content:"";position:absolute;left:0;top:10%;bottom:10%;width:1px;background:var(--fade-v)} .fw-rvs-calc__tot dt{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;font-weight:600;line-height:1.3;color:var(--g5)} .fw-rvs-calc__tot dt .fw-ico{width:28px;height:28px;padding:6px;border-radius:50%;color:var(--bl-d);background:var(--bl-wash)} .fw-rvs-calc__tot .is-year dt .fw-ico{color:var(--mt-ink);background:var(--mt-l)} .fw-rvs-calc__tot dd{margin:0;font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} .fw-rvs-calc__pay{display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 16px;border-radius:999px;background:var(--mt-l);color:var(--mt-ink);font-size:13.5px;font-weight:700} .fw-rvs-calc__pay .fw-ico{width:17px;height:17px} /* ══════════════════════════════════════════════════════════════ 05 · YOURS AND OURS — two tinted halves meeting at the split ══════════════════════════════════════════════════════════════ */ .fw-rvs-split{background:linear-gradient(90deg, var(--bl-wash), var(--wh) 50%, color-mix(in srgb, var(--pk) 7%, var(--wh)))} .fw-rvs-split__grid{position:relative;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:calc(var(--gap) + 40px)} .fw-rvs-split__grid.is-one{grid-template-columns:minmax(0, 1fr)} .fw-rvs-split__grid:not(.is-one)::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:linear-gradient(180deg, transparent, var(--you) 20%, var(--us) 80%, transparent);opacity:.35} .fw-rvs-split__seal{position:absolute;left:50%;top:50%;z-index:2;display:flex;align-items:center;justify-content:center;gap:6px;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;background:var(--wh);box-shadow:0 0 0 6px color-mix(in srgb, var(--wh) 70%, transparent), 0 16px 34px color-mix(in srgb, var(--bl-d) 20%, transparent)} .fw-rvs-split__seal::before{content:"";position:absolute;inset:4px;border-radius:50%;padding:3px;background:conic-gradient(var(--you) 0 50%, var(--us) 50% 100%);-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .fw-rvs-split__seal b{font-family:var(--ff);font-size:22px;font-weight:700;letter-spacing:-.03em} .fw-rvs-split__seal b:first-child{color:var(--you)} .fw-rvs-split__seal b:last-child{color:var(--pk-dd)} .fw-rvs-split__seal i{width:1.5px;height:26px;background:var(--g2);transform:rotate(18deg)} .fw-rvs-split__seal--ico{color:var(--pk-dd)} .fw-rvs-split__seal--ico .fw-ico{width:32px;height:32px} .fw-rvs-split__col{display:flex;flex-direction:column;min-width:0} .fw-rvs-split__h{display:flex;align-items:center;gap:14px;margin-bottom:8px} .fw-rvs-split__h h3{margin:0;font-family:var(--ff);font-size:clamp(20px, 2.9vh, 25px);font-weight:600;color:var(--ink)} .fw-rvs-split__h p{margin:2px 0 0;font-size:13.5px;color:var(--g6)} .fw-rvs-split__badge{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:18px;color:var(--wh)} .fw-rvs-split__badge .fw-ico{width:28px;height:28px} .fw-rvs-split__col.is-yours .fw-rvs-split__badge{background:linear-gradient(140deg, var(--bl), var(--bl-d));box-shadow:0 12px 26px var(--bl-ring)} .fw-rvs-split__col.is-ours .fw-rvs-split__badge{background:linear-gradient(140deg, var(--pk), var(--pk-d));box-shadow:0 12px 26px var(--pk-ring)} .fw-rvs-split__list{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 clamp(16px, 2vw, 30px);margin:0;padding:0;list-style:none} .fw-rvs-split__list li{position:relative;display:grid;grid-template-columns:42px minmax(0, 1fr);gap:12px;align-items:start;padding:14px 0} .fw-rvs-split__list li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-rvs-split__ico{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;transition:transform .35s var(--ease-pop)} .fw-rvs-split__ico .fw-ico{width:21px;height:21px} .fw-rvs-split__col.is-yours .fw-rvs-split__ico{color:var(--bl-d);background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--bl-l2), 0 6px 14px var(--bl-ring)} .fw-rvs-split__col.is-ours .fw-rvs-split__ico{color:var(--pk-dd);background:var(--wh);box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--pk) 30%, var(--wh)), 0 6px 14px var(--pk-ring)} .fw-rvs-split__list li:hover .fw-rvs-split__ico{transform:translateY(-3px) rotate(-6deg)} .fw-rvs-split__list b{display:block;font-size:15px;font-weight:600;color:var(--ink)} .fw-rvs-split__list p{margin:3px 0 0;font-size:13.5px;line-height:1.55;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 06 · HOW YOU ARE PAID — the month bar ══════════════════════════════════════════════════════════════ */ .fw-rvs-pay{background:linear-gradient(180deg, var(--mt-wash), var(--wh))} .fw-rvs-month{margin-bottom:clamp(14px, 2.4vh, 24px)} .fw-rvs-month__days{display:grid;grid-template-columns:repeat(31, minmax(0, 1fr));gap:3px;margin:0;padding:0;list-style:none} .fw-rvs-month__days li{display:grid;place-items:center;height:34px;border-radius:8px;background:color-mix(in srgb, var(--mt) 12%, var(--wh));font-size:11.5px;font-weight:600;color:var(--g5);font-variant-numeric:tabular-nums} .fw-rvs-month__days li.is-on{background:var(--mt-d);color:var(--wh);font-weight:700;box-shadow:0 6px 14px var(--mt-ring);transform:translateY(-3px)} .fw-rvs-pay__steps{--n:4;display:grid;grid-template-columns:repeat(var(--n), minmax(0, 1fr));gap:clamp(18px, 2.6vw, 40px);margin:0;padding:0;list-style:none} .fw-rvs-pay__steps--1{--n:1}.fw-rvs-pay__steps--2{--n:2}.fw-rvs-pay__steps--3{--n:3}.fw-rvs-pay__steps--4{--n:4}.fw-rvs-pay__steps--5{--n:5} .fw-rvs-pay__steps li{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"day ico" "h h" "p p";align-items:center;gap:8px 12px;padding-top:14px} .fw-rvs-pay__steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg, var(--mt-d), transparent)} .fw-rvs-pay__day{grid-area:day;display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:56px;border-radius:12px;background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--mt-l2), 0 8px 18px var(--mt-ring);line-height:1} .fw-rvs-pay__day small{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mt-ink)} .fw-rvs-pay__day b{font-size:22px;font-weight:700;color:var(--ink)} .fw-rvs-pay__ico{grid-area:ico;display:grid;place-items:center;justify-self:start;width:38px;height:38px;border-radius:50%;color:var(--mt-ink);background:var(--mt-l)} .fw-rvs-pay__ico .fw-ico{width:20px;height:20px} .fw-rvs-pay__steps .fw-rvs-h3{grid-area:h} .fw-rvs-pay__steps p{grid-area:p;margin:0;font-size:14.5px;line-height:1.6;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 07 · QUESTIONS AND THE NEXT STEP — answers beside a pinned panel ══════════════════════════════════════════════════════════════ */ .fw-rvs-end{background:linear-gradient(180deg, var(--wh), color-mix(in srgb, var(--pk) 5%, var(--wh)))} .fw-rvs-end__grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--gap);align-items:stretch} .fw-rvs-end__grid.is-one{grid-template-columns:minmax(0, 1fr)} .fw-rvs-end__qa{min-width:0} .fw-rvs-end__side{position:relative;min-width:0} .fw-rvs-end__side::before{content:"";position:absolute;left:calc(var(--gap) / -2);top:0;bottom:0;width:1px;background:var(--fade-v)} .fw-rvs-qa details{position:relative} .fw-rvs-qa details + details::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-rvs-qa summary{display:flex;align-items:center;gap:14px;padding:13px 0;list-style:none;cursor:pointer;font-size:16px;font-weight:600;color:var(--ink);transition:color .2s var(--ease)} .fw-rvs-qa summary::-webkit-details-marker{display:none} .fw-rvs-qa summary > span:nth-child(2){flex:1} .fw-rvs-qa__ico{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;color:var(--bl-d);background:var(--bl-wash);transition:background .2s var(--ease), color .2s var(--ease)} .fw-rvs-qa__ico .fw-ico{width:17px;height:17px} .fw-rvs-qa summary .bi{flex:none;font-size:14px;color:var(--pk-d);transition:transform .3s var(--ease)} .fw-rvs-qa summary:hover,.fw-rvs-qa details[open] summary{color:var(--bl-d)} .fw-rvs-qa details[open] .fw-rvs-qa__ico{color:var(--wh);background:var(--bl-d)} .fw-rvs-qa details[open] summary .bi{transform:rotate(45deg)} .fw-rvs-qa p{margin:0 32px 14px 46px;font-size:15px;line-height:1.65;color:var(--g6)} /* the next step: the photograph shown whole with the words beside it, the actions below */ .fw-rvs-next{display:grid;grid-template-columns:auto minmax(0, 1fr);grid-template-areas:"pic t" "more more";gap:clamp(18px, 2vw, 28px);align-items:center} .fw-rvs-next.is-text{grid-template-columns:minmax(0, 1fr);grid-template-areas:"t" "more"} .fw-rvs-next__pic{grid-area:pic;position:relative;margin:0;height:clamp(260px, 38vh, 350px);aspect-ratio:4/5} .fw-rvs-next__pic img{display:block;width:100%;height:100%;object-fit:cover} .fw-rvs-next__pic figcaption{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;background:color-mix(in srgb, var(--wh) 92%, transparent);backdrop-filter:blur(6px);box-shadow:0 10px 26px color-mix(in srgb, var(--dk) 18%, transparent);font-size:13px;font-weight:700;color:var(--ink)} .fw-rvs-next__pic figcaption .fw-ico{width:17px;height:17px;color:var(--bl-d)} .fw-rvs-next__t{grid-area:t;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0} .fw-rvs-next__t .fw-rvs-h2{font-size:clamp(24px, 3.6vh, 32px)} .fw-rvs-next__t .fw-rvs-btn{margin-top:6px} .fw-rvs-next__more{grid-area:more;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 clamp(14px, 2vw, 26px);width:100%;margin:0;padding:0;list-style:none} .fw-rvs-next__more li{position:relative} .fw-rvs-next__more li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-rvs-next__more a{display:flex;align-items:center;gap:12px;padding:11px 0} .fw-rvs-next__more a > .fw-ico{flex:none;width:38px;height:38px;padding:9px;border-radius:50%;color:var(--wh);background:linear-gradient(135deg, var(--you), var(--pk-d));transition:transform .3s var(--ease-pop)} .fw-rvs-next__more a:hover > .fw-ico{transform:rotate(-8deg) scale(1.06)} .fw-rvs-next__more span{display:flex;flex-direction:column;line-height:1.3} .fw-rvs-next__more small{font-size:12px;font-weight:600;color:var(--g5)} .fw-rvs-next__more b{font-size:14.5px;font-weight:700;color:var(--bl-d);transition:color .2s var(--ease)} .fw-rvs-next__more a:hover b{color:var(--pk-dd)} /* ══════════════════════════════════════════════════════════════ 10 · RESPONSIVE (the phone is designed as an app) ══════════════════════════════════════════════════════════════ */ @media (max-width:1200px){ .fw-rvs-pay__steps{grid-template-columns:repeat(2, minmax(0, 1fr))} .fw-rvs-dials{grid-template-columns:repeat(3, minmax(0, 1fr))} .fw-rvs-split__list{grid-template-columns:minmax(0, 1fr)} .fw-rvs-calc__cols,.fw-rvs-calc__lines li{grid-template-columns:minmax(0, 1fr) 140px 104px} } @media (max-width:1024px){ .fw-rvs-mast__grid,.fw-rvs-calc,.fw-rvs-end__grid{grid-template-columns:minmax(0, 1fr)} .fw-rvs-head--row{align-items:flex-start} .fw-rvs-head--row > .fw-rvs-sub{text-align:left} .fw-rvs-calc__out::before,.fw-rvs-end__side::before{left:0;right:0;top:calc(var(--gap) / -2);bottom:auto;width:auto;height:1px;background:var(--fade)} .fw-rvs-dials{grid-template-columns:repeat(2, minmax(0, 1fr))} .fw-rvs-spot{filter:blur(50px)} } @media (max-width:767px){ .fw-rvs-split{background:linear-gradient(180deg, var(--bl-wash), var(--wh) 50%, color-mix(in srgb, var(--pk) 7%, var(--wh)))} .fw-rvs-split__grid{grid-template-columns:minmax(0, 1fr);gap:28px} .fw-rvs-split__grid::before,.fw-rvs-split__seal{display:none} .fw-rvs-next{grid-template-columns:minmax(0, 1fr);grid-template-areas:"pic" "t" "more"} .fw-rvs-next__pic{width:100%;height:auto} .fw-rvs-next__more{grid-template-columns:minmax(0, 1fr)} } @media (max-width:640px){ .fw-rvs-page{--pad:14px} .fw-rvs .fw-rvs-h1{font-size:clamp(32px, 9vw, 42px)} .fw-rvs-h2{font-size:clamp(24px, 6.6vw, 30px)} .fw-rvs-act .fw-rvs-btn,.fw-rvs-next__t .fw-rvs-btn{width:100%} .fw-rvs-facts > div{padding-right:14px;margin-right:14px} .fw-rvs-facts > div + div::before{left:-14px} .fw-rvs-facts dd{font-size:19px} /* promises: a swipe row of chips */ .fw-rvs-promise__list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;width:100%;margin-inline:0;padding:2px var(--pad);scrollbar-width:none} .fw-rvs-promise__list::-webkit-scrollbar{display:none} .fw-rvs-promise__list li{flex:0 0 78%;scroll-snap-align:start;padding:12px 14px;border-radius:16px;background:var(--wh)} .fw-rvs-promise__list li:first-child{padding-left:14px} .fw-rvs-promise__list li + li::before{display:none} /* the rate card: a swipe deck of dials */ .fw-rvs-dials{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(var(--pad) * -1);padding:4px var(--pad) 10px;scrollbar-width:none} .fw-rvs-dials::-webkit-scrollbar{display:none} .fw-rvs-dials li{flex:0 0 46%;scroll-snap-align:start;grid-template-columns:minmax(0, 1fr);justify-items:start;gap:12px;padding:16px 14px;border-radius:18px;background:linear-gradient(160deg, var(--bl-wash), var(--wh))} .fw-rvs-dials li::before{display:none} .fw-rvs-dials__cov{display:none} /* the calculator: each line as service, then stepper and amount; the result below */ .fw-rvs-calc__cols{display:none} .fw-rvs-calc__lines li{grid-template-columns:minmax(0, 1fr) auto;grid-template-areas:"svc svc" "step amt";gap:10px 12px} .fw-rvs-calc__svc{grid-area:svc} .fw-rvs-step{grid-area:step;width:150px;height:46px;grid-template-columns:42px minmax(0, 1fr) 42px} .fw-rvs-step button{width:38px;height:38px} .fw-rvs-calc__amt{grid-area:amt;font-size:18px} .fw-rvs-calc__ring{width:min(78vw, 260px)} /* the month bar: the steps only, each pinned with its day */ .fw-rvs-month{display:none} .fw-rvs-pay__steps{grid-template-columns:minmax(0, 1fr);gap:4px} .fw-rvs-pay__steps li{grid-template-columns:52px minmax(0, 1fr);grid-template-areas:"day h" "day p";padding:12px 0;column-gap:14px} .fw-rvs-pay__steps li::before{background:var(--fade);height:1px} .fw-rvs-pay__day{align-self:start} .fw-rvs-pay__ico{display:none} .fw-rvs-qa p{margin-right:0} .fw-rvs-fine{display:block} .fw-rvs-fine .fw-ico{display:inline-block;margin:0 6px 0 0;vertical-align:-3px} .fw-rvs-fine .fw-rvs-sample{display:inline-block;margin:6px 0 0} } @media (prefers-reduced-motion:reduce){ .fw-rvs-spot,.fw-rvs-ring__you,.fw-rvs-dial__you{animation:none} .fw-rvs-tile,.fw-rvs-calc__ring circle,.fw-rvs-split__ico{transition:none} }