<div class="w-full h-[456px] relative">
<picture class="">
<img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random=1 800w, https://picsum.photos/1000/500?random=1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random=1">
</picture>
<div class="absolute w-full h-full bg-gradient-to-t from-black/75"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 py-16 h-full flex items-end relative">
<h1 class="text-5xl font-bold text-white text-shadow-md">Private medical insurance</h1>
</div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6">
<div class="flex flex-col md:flex-row mt-24">
<div class="flex flex-col md:order-last md:pl-6 lg:pl-10 w-full md:w-[350px] lg:w-[450px] mb-10 md:mb-0 space-y-10">
<div class="bg-dark/10 rounded flex flex-col overflow-hidden" x-data="{target:App.Dayjs('2022-04-01T00:00:00')}" x-init="$nextTick(() => {
$refs.date.innerHTML = target.format('DD MMMM YYYY');
let update = function(){
let now = App.Dayjs();
let days = target.diff(now, 'day');
let hours = target.diff(now, 'hour');
let mins = target.diff(now, 'minute');
hours = hours - (days*24);
mins = mins - ((days*24*60)+(hours*60));
$refs.days.innerHTML = days < 10 ? '0'+days : days;
$refs.hours.innerHTML = hours < 10 ? '0'+hours : hours;
$refs.mins.innerHTML = mins < 10 ? '0'+mins : mins;
}
update();
setInterval(update,1000);
});">
<div class="flex-1 p-8 space-y-4 flex flex-col items-center">
<div class="text-sm opacity-50">Enrolment ends in</div>
<div class="flex text-4xl sm:text-5xl space-x-4">
<div class="flex flex-col items-center">
<div class="tabular-nums" x-ref="days">--</div>
<div class="text-sm uppercase opacity-50">Days</div>
</div>
<div class="">:</div>
<div class="flex flex-col items-center">
<div class="tabular-nums" x-ref="hours">--</div>
<div class="text-sm uppercase opacity-50">Hours</div>
</div>
<div class="">:</div>
<div class="flex flex-col items-center">
<div class="tabular-nums" x-ref="mins">--</div>
<div class="text-sm uppercase opacity-50">Minutes</div>
</div>
</div>
</div>
<div class="bg-dark/10 text-center p-3" x-ref="date"></div>
</div>
<div class="bg-blue-light rounded flex flex-col overflow-hidden">
<div class="p-6 sm:p-10 flex justify-between bg-green-light">
<h3 class="text-2xl font-bold text-dark">Apply for this benefit</h3>
</div>
<div class="p-6 sm:p-10 space-y-10">
<div class="prose max-w-none">
<p>You can select this benefit between <strong>1 Feb 2022</strong> and <strong>28 Feb 2022</strong>.</p>
<p>If you select this benefit reductions will be applied from the date you are enrolled. You will receive an email confirming this information</p>
</div>
<div x-data="{ open: false }" class="">
<!-- Trigger -->
<button type="button" class="btn btn-dark" x-on:click="open = true">Apply now</button>
<!-- Modal -->
<div x-show="open" style="display: none" x-on:keydown.escape.prevent.stop="open = false" role="dialog" aria-modal="true" x-id="['modal-title']" :aria-labelledby="$id('modal-title')" class="fixed inset-0 overflow-y-auto">
<!-- Overlay -->
<div x-show="open" x-transition.opacity class="fixed inset-0 bg-dark/50"></div>
<!-- Panel -->
<div x-show="open" x-transition x-on:click="open = false" class="relative min-h-screen flex items-center justify-center p-4">
<div x-on:click.stop x-trap.noscroll.inert="open" class="relative max-w-5xl w-full bg-light rounded-md shadow-lg overflow-y-auto">
<div class="bg-green-light p-4 sm:p-8 flex justify-between items-center">
<div class="">
<div class="text-sm uppercase opacity-50">You are applying for</div>
<h2 class="text-3xl font-bold" :id="$id('modal-title')">Private medical insurance</h2>
</div>
<div class="">
<button type="button" x-on:click="open = false" class="flex items-center rounded-sm bg-dark/50 border-2 border-transparent hover:bg-dark/60 focus:outline-none focus:ring-0 focus:border-light">
<div class="hidden md:block px-6 py-4 text-light font-bold">Cancel application</div>
<div class="p-2 sm:p-4 md:border-l border-green-light">
<div class="bg-light w-6 h-6 rounded-full flex justify-center items-center text-green"><i class="fas fa-times"></i></div>
</div>
</button>
</div>
</div>
<div class="flex flex-col md:flex-row">
<div class="flex-1 p-4 sm:p-8 flex flex-col">
<div class="flex items-center justify-between relative space-x-3 sm:px-6 my-10 sm:mb-20">
<div class="flex flex-col items-center space-y-2 relative">
<div class="bg-dark text-light w-12 h-12 rounded-full font-bold flex items-center justify-center text-2xl">1</div>
<div class="hidden sm:block absolute text-sm uppercase opacity-50 whitespace-nowrap -bottom-6">Your cover</div>
</div>
<div class="flex-1 border-t border-dark/20 w-full"></div>
<div class="flex flex-col items-center space-y-2 relative">
<div class="bg-dark/10 w-12 h-12 rounded-full font-bold flex items-center justify-center text-2xl">2</div>
<div class="hidden sm:block absolute text-sm uppercase opacity-50 whitespace-nowrap -bottom-6">Confirmation</div>
</div>
<div class="flex-1 border-t border-dark/20 w-full"></div>
<div class="flex flex-col items-center space-y-2 relative">
<div class="bg-dark/10 w-12 h-12 rounded-full font-bold flex items-center justify-center text-2xl">3</div>
<div class="hidden sm:block absolute text-sm uppercase opacity-50 whitespace-nowrap -bottom-6">Complete</div>
</div>
</div>
<form>
<h3 class="uppercase font-bold text-dark border-t border-dark/10 pt-3 mb-10">Form Section Heading</h3>
<div class="mb-6">
<fieldset class="space-y-6">
<legend class="font-bold">Checkbox selection label</legend>
<div class="relative flex items-start">
<div class="flex items-center h-6">
<input id="option-1" name="options" type="radio" class="h-8 w-8 text-blue border-dark/40">
</div>
<div class="ml-3">
<label for="option-1" class="">Option 1</label>
</div>
</div>
<div class="relative flex items-start">
<div class="flex items-center h-6">
<input id="option-2" name="options" aria-describedby="option-2-description" type="radio" class="h-8 w-8 text-blue border-dark/40 rounded-full cursor-pointer focus:outline-none focus:ring-1 focus:ring-blue focus:shadow-lg focus:border-blue">
</div>
<div class="ml-3">
<label for="option-2" class="">Option 2</label>
<p id="option-2-description" class="mt-2 text-sm">Get notified when someones posts a comment on a posting.</p>
</div>
</div>
<div class="relative flex items-start">
<div class="flex items-center h-6">
<input id="option-3" name="options" type="radio" class="h-8 w-8 text-blue border-red-600 rounded-full cursor-pointer focus:outline-none focus:ring-1 focus:ring-red-500 focus:shadow-lg focus:border-red-500">
</div>
<div class="ml-3">
<label for="option-3" class="">Option 3</label>
<p class="text-sm text-red-600" id="email-error">Error message</p>
</div>
</div>
<div class="relative flex items-start">
<div class="flex items-center h-6">
<input id="option-2" name="options" aria-describedby="option-2-description" type="radio" class="h-8 w-8 text-blue border-dark/40 rounded-full cursor-pointer focus:outline-none focus:ring-1 focus:ring-blue focus:shadow-lg focus:border-blue" disabled>
</div>
<div class="ml-3">
<label for="option-2" class="opacity-50">Option 2</label>
<p id="option-2-description" class="mt-2 text-sm">Get notified when someones posts a comment on a posting.</p>
</div>
</div>
</fieldset>
</div>
</form>
<div class="flex-1 flex items-end justify-between mt-10">
<button class="btn-outline btn-dark">Previous</button>
<button class="btn btn-dark">Next</button>
</div>
</div>
<div class="bg-dark/5 p-4 sm:p-8 md:w-[320px] space-y-6">
<h4 class="opacity-50 uppercase">Your selection</h4>
<div class="prose">
<p>You have selected <strong>VitalityHealth Business Healthcare Plan Single</strong> at an estimated monthly cost of <strong>£116.18</strong> to your employer.</p>
<p>Whilst there is no up-front cost to you, please note that this is classed as a benefit in kind for tax purposes. The tax cost to you for this and other benefits can be found <a href="#">here</a>.</p>
</div>
<div class="border-t border-dark/10 pt-6 pr-6">
<a href="#" class="flex items-center text-lg font-bold hover:opacity-90">
<div class="bg-green-light w-12 h-12 rounded-full flex items-center justify-center mr-3 text-light"><i class="fas fa-calculator fa-lg"></i></div>
<div class="flex-1 underline underline-offset-2 decoration-green-light">How does this affect me?</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex-1 md:border-r border-dark\20 md:pr-6 lg:pr-10 prose max-w-none">
<img src="/assets/img/logo-vitality.png" alt="Vitality logo" />
<p class="lead">With VitalityHealth you don’t have to claim on your medical insurance to be able to benefit from your policy.</p>
<p>There’s a range of discounts available through its partners. And there’s an added incentive to get healthier, with rewards that can be unlocked by being active every week. Rewards include free cinema tickets, free coffee, and discounted air fares.</p>
<p>The more points you earn, the bigger your rewards. Go to the Vitality website to see the current list of reward partners.</p>
<h5>Why choose private medical insurance?</h5>
<p>Private medical insurance (PMI) helps cover the cost of private medical treatment for an illness or injury, giving you access to treatment by a specialist at a time and a hospital that suits you.</p>
<h5>Advantages of PMI</h5>
<ul>
<li>No queues: waiting times on the NHS can exceed 18 weeks between referral and treatment. With PMI you won’t have to wait.</li>
<li>Peace of mind: if the worst happens, your treatment will be as quick as it can be.</li>
<li>Choice: you can choose your consultant and where you want to be treated.</li>
<li>Private room: you don’t have to worry about being on a mixed-gender ward.</li>
<li>Personal care: you won’t be kept waiting for hours to see your consultant and you will have more time to discuss your symptoms.</li>
</ul>
<div class="w-full max-w-3xl mb-10">
<h4 class="text-xl font-bold mb-10">FAQs about private medical insurance</h4>
<div x-data="{ active: 0 }" class="bg-blue/5 border-y border-black/10 divide-y divide-black/20">
<div x-data="{
id: 1,
get expanded() {
return this.active === this.id
},
set expanded(value) {
this.active = value ? this.id : null
},
}" role="region" class="">
<div>
<button x-on:click="expanded = !expanded" :aria-expanded="expanded" class="flex items-start justify-between w-full text-left font-bold px-5 sm:px-10 py-6">
<span>How much will it cost me?</span>
<span x-show="expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-up fa-lg"></i></span>
<span x-show="!expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-down fa-lg"></i></span>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="pb-6 px-5 sm:px-10 pr-10 sm:pr-20">You can add other members of your household to your policy. If you do decide to add dependants, their cost of membership will be deducted directly from your monthly salary. It will be listed on your payslip in the same area as your PAYE and national insurance deductions.</div>
</div>
</div>
<div x-data="{
id: 2,
get expanded() {
return this.active === this.id
},
set expanded(value) {
this.active = value ? this.id : null
},
}" role="region" class="">
<div>
<button x-on:click="expanded = !expanded" :aria-expanded="expanded" class="flex items-start justify-between w-full text-left font-bold px-5 sm:px-10 py-6">
<span>Can I add cover for my partner or family?</span>
<span x-show="expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-up fa-lg"></i></span>
<span x-show="!expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-down fa-lg"></i></span>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="pb-6 px-5 sm:px-10 pr-10 sm:pr-20">You can add other members of your household to your policy. If you do decide to add dependants, their cost of membership will be deducted directly from your monthly salary. It will be listed on your payslip in the same area as your PAYE and national insurance deductions.</div>
</div>
</div>
<div x-data="{
id: 3,
get expanded() {
return this.active === this.id
},
set expanded(value) {
this.active = value ? this.id : null
},
}" role="region" class="">
<div>
<button x-on:click="expanded = !expanded" :aria-expanded="expanded" class="flex items-start justify-between w-full text-left font-bold px-5 sm:px-10 py-6">
<span>Will I be covered for everything?</span>
<span x-show="expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-up fa-lg"></i></span>
<span x-show="!expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-down fa-lg"></i></span>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="pb-6 px-5 sm:px-10 pr-10 sm:pr-20">You can add other members of your household to your policy. If you do decide to add dependants, their cost of membership will be deducted directly from your monthly salary. It will be listed on your payslip in the same area as your PAYE and national insurance deductions.</div>
</div>
</div>
</div>
</div>
<h5>I have a muscular ache or pain</h5>
<img src="https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" alt="">
<p>Muscular aches and pains are very common, especially amongst office workers or anyone spending a lot of time sitting or looking at screens.</p>
<p>However, though the problem is a common one, it does still deserve your attention. If left untreated, musculoskeletal (MSK) issues could grow into a chronic issue that’s difficult to ignore. It’s therefore important for you to take prompt action if pain persists.</p>
<div class="w-full max-w-3xl mb-10">
<h4 class="text-xl font-bold mb-10">FAQs about private medical insurance</h4>
<div x-data="{ active: 0 }" class="bg-blue/5 border-y border-black/10 divide-y divide-black/20">
<div x-data="{
id: 1,
get expanded() {
return this.active === this.id
},
set expanded(value) {
this.active = value ? this.id : null
},
}" role="region" class="">
<div>
<button x-on:click="expanded = !expanded" :aria-expanded="expanded" class="flex items-start justify-between w-full text-left font-bold px-5 sm:px-10 py-6">
<span>How much will it cost me?</span>
<span x-show="expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-up fa-lg"></i></span>
<span x-show="!expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-down fa-lg"></i></span>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="pb-6 px-5 sm:px-10 pr-10 sm:pr-20">You can add other members of your household to your policy. If you do decide to add dependants, their cost of membership will be deducted directly from your monthly salary. It will be listed on your payslip in the same area as your PAYE and national insurance deductions.</div>
</div>
</div>
<div x-data="{
id: 2,
get expanded() {
return this.active === this.id
},
set expanded(value) {
this.active = value ? this.id : null
},
}" role="region" class="">
<div>
<button x-on:click="expanded = !expanded" :aria-expanded="expanded" class="flex items-start justify-between w-full text-left font-bold px-5 sm:px-10 py-6">
<span>Can I add cover for my partner or family?</span>
<span x-show="expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-up fa-lg"></i></span>
<span x-show="!expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-down fa-lg"></i></span>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="pb-6 px-5 sm:px-10 pr-10 sm:pr-20">You can add other members of your household to your policy. If you do decide to add dependants, their cost of membership will be deducted directly from your monthly salary. It will be listed on your payslip in the same area as your PAYE and national insurance deductions.</div>
</div>
</div>
<div x-data="{
id: 3,
get expanded() {
return this.active === this.id
},
set expanded(value) {
this.active = value ? this.id : null
},
}" role="region" class="">
<div>
<button x-on:click="expanded = !expanded" :aria-expanded="expanded" class="flex items-start justify-between w-full text-left font-bold px-5 sm:px-10 py-6">
<span>Will I be covered for everything?</span>
<span x-show="expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-up fa-lg"></i></span>
<span x-show="!expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-down fa-lg"></i></span>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="pb-6 px-5 sm:px-10 pr-10 sm:pr-20">You can add other members of your household to your policy. If you do decide to add dependants, their cost of membership will be deducted directly from your monthly salary. It will be listed on your payslip in the same area as your PAYE and national insurance deductions.</div>
</div>
</div>
</div>
</div>
<h5>I’ve found a lump</h5>
<img src="https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" alt="">
<p>While finding a lump on your body can be alarming, there is no need to panic, as the majority of breast and testicular lumps are benign. However, it’s still important that you seek prompt medical advice.</p>
<div class="w-full max-w-3xl mb-10">
<h4 class="text-xl font-bold mb-10">FAQs about private medical insurance</h4>
<div x-data="{ active: 0 }" class="bg-blue/5 border-y border-black/10 divide-y divide-black/20">
<div x-data="{
id: 1,
get expanded() {
return this.active === this.id
},
set expanded(value) {
this.active = value ? this.id : null
},
}" role="region" class="">
<div>
<button x-on:click="expanded = !expanded" :aria-expanded="expanded" class="flex items-start justify-between w-full text-left font-bold px-5 sm:px-10 py-6">
<span>How much will it cost me?</span>
<span x-show="expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-up fa-lg"></i></span>
<span x-show="!expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-down fa-lg"></i></span>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="pb-6 px-5 sm:px-10 pr-10 sm:pr-20">You can add other members of your household to your policy. If you do decide to add dependants, their cost of membership will be deducted directly from your monthly salary. It will be listed on your payslip in the same area as your PAYE and national insurance deductions.</div>
</div>
</div>
<div x-data="{
id: 2,
get expanded() {
return this.active === this.id
},
set expanded(value) {
this.active = value ? this.id : null
},
}" role="region" class="">
<div>
<button x-on:click="expanded = !expanded" :aria-expanded="expanded" class="flex items-start justify-between w-full text-left font-bold px-5 sm:px-10 py-6">
<span>Can I add cover for my partner or family?</span>
<span x-show="expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-up fa-lg"></i></span>
<span x-show="!expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-down fa-lg"></i></span>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="pb-6 px-5 sm:px-10 pr-10 sm:pr-20">You can add other members of your household to your policy. If you do decide to add dependants, their cost of membership will be deducted directly from your monthly salary. It will be listed on your payslip in the same area as your PAYE and national insurance deductions.</div>
</div>
</div>
<div x-data="{
id: 3,
get expanded() {
return this.active === this.id
},
set expanded(value) {
this.active = value ? this.id : null
},
}" role="region" class="">
<div>
<button x-on:click="expanded = !expanded" :aria-expanded="expanded" class="flex items-start justify-between w-full text-left font-bold px-5 sm:px-10 py-6">
<span>Will I be covered for everything?</span>
<span x-show="expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-up fa-lg"></i></span>
<span x-show="!expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-down fa-lg"></i></span>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="pb-6 px-5 sm:px-10 pr-10 sm:pr-20">You can add other members of your household to your policy. If you do decide to add dependants, their cost of membership will be deducted directly from your monthly salary. It will be listed on your payslip in the same area as your PAYE and national insurance deductions.</div>
</div>
</div>
</div>
</div>
<h5>I need to use a GP</h5>
<div class="relative w-full overflow-hidden aspect-w-16 aspect-h-9 mt-6">
<lite-youtube class="w-full max-w-full" videoid="MjW_qYx-SA8" params="api=1"></lite-youtube>
</div>
<p>Your Vitality private medical insurance can offer you quick access to a GP, which is particularly useful if you face long wait times to be seen at your local surgery.</p>
<p>Using the fully remote service, you can be connected with a registered doctor at your earliest convenience.</p>
<div class="w-full max-w-3xl mb-10">
<h4 class="text-xl font-bold mb-10">FAQs about private medical insurance</h4>
<div x-data="{ active: 0 }" class="bg-blue/5 border-y border-black/10 divide-y divide-black/20">
<div x-data="{
id: 1,
get expanded() {
return this.active === this.id
},
set expanded(value) {
this.active = value ? this.id : null
},
}" role="region" class="">
<div>
<button x-on:click="expanded = !expanded" :aria-expanded="expanded" class="flex items-start justify-between w-full text-left font-bold px-5 sm:px-10 py-6">
<span>How much will it cost me?</span>
<span x-show="expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-up fa-lg"></i></span>
<span x-show="!expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-down fa-lg"></i></span>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="pb-6 px-5 sm:px-10 pr-10 sm:pr-20">You can add other members of your household to your policy. If you do decide to add dependants, their cost of membership will be deducted directly from your monthly salary. It will be listed on your payslip in the same area as your PAYE and national insurance deductions.</div>
</div>
</div>
<div x-data="{
id: 2,
get expanded() {
return this.active === this.id
},
set expanded(value) {
this.active = value ? this.id : null
},
}" role="region" class="">
<div>
<button x-on:click="expanded = !expanded" :aria-expanded="expanded" class="flex items-start justify-between w-full text-left font-bold px-5 sm:px-10 py-6">
<span>Can I add cover for my partner or family?</span>
<span x-show="expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-up fa-lg"></i></span>
<span x-show="!expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-down fa-lg"></i></span>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="pb-6 px-5 sm:px-10 pr-10 sm:pr-20">You can add other members of your household to your policy. If you do decide to add dependants, their cost of membership will be deducted directly from your monthly salary. It will be listed on your payslip in the same area as your PAYE and national insurance deductions.</div>
</div>
</div>
<div x-data="{
id: 3,
get expanded() {
return this.active === this.id
},
set expanded(value) {
this.active = value ? this.id : null
},
}" role="region" class="">
<div>
<button x-on:click="expanded = !expanded" :aria-expanded="expanded" class="flex items-start justify-between w-full text-left font-bold px-5 sm:px-10 py-6">
<span>Will I be covered for everything?</span>
<span x-show="expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-up fa-lg"></i></span>
<span x-show="!expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-down fa-lg"></i></span>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="pb-6 px-5 sm:px-10 pr-10 sm:pr-20">You can add other members of your household to your policy. If you do decide to add dependants, their cost of membership will be deducted directly from your monthly salary. It will be listed on your payslip in the same area as your PAYE and national insurance deductions.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{> '@header'}}
<div class="max-w-7xl mx-auto px-4 sm:px-6">
<div class="flex flex-col md:flex-row mt-24">
<div class="flex flex-col md:order-last md:pl-6 lg:pl-10 w-full md:w-[350px] lg:w-[450px] mb-10 md:mb-0 space-y-10">
{{> '@countdown'}}
<div class="bg-blue-light rounded flex flex-col overflow-hidden">
<div class="p-6 sm:p-10 flex justify-between bg-green-light">
<h3 class="text-2xl font-bold text-dark">Apply for this benefit</h3>
</div>
<div class="p-6 sm:p-10 space-y-10">
<div class="prose max-w-none">
<p>You can select this benefit between <strong>1 Feb 2022</strong> and <strong>28 Feb 2022</strong>.</p>
<p>If you select this benefit reductions will be applied from the date you are enrolled. You will receive an email confirming this information</p>
</div>
{{> '@modal' open="false" btnText="Apply now"}}
</div>
</div>
</div>
<div class="flex-1 md:border-r border-dark\20 md:pr-6 lg:pr-10 prose max-w-none">
<img src="/assets/img/logo-vitality.png" alt="Vitality logo" />
<p class="lead">With VitalityHealth you don’t have to claim on your medical insurance to be able to benefit from your policy.</p>
<p>There’s a range of discounts available through its partners. And there’s an added incentive to get healthier, with rewards that can be unlocked by being active every week. Rewards include free cinema tickets, free coffee, and discounted air fares.</p>
<p>The more points you earn, the bigger your rewards. Go to the Vitality website to see the current list of reward partners.</p>
<h5>Why choose private medical insurance?</h5>
<p>Private medical insurance (PMI) helps cover the cost of private medical treatment for an illness or injury, giving you access to treatment by a specialist at a time and a hospital that suits you.</p>
<h5>Advantages of PMI</h5>
<ul>
<li>No queues: waiting times on the NHS can exceed 18 weeks between referral and treatment. With PMI you won’t have to wait.</li>
<li>Peace of mind: if the worst happens, your treatment will be as quick as it can be.</li>
<li>Choice: you can choose your consultant and where you want to be treated.</li>
<li>Private room: you don’t have to worry about being on a mixed-gender ward.</li>
<li>Personal care: you won’t be kept waiting for hours to see your consultant and you will have more time to discuss your symptoms.</li>
</ul>
{{> '@accordion'}}
<h5>I have a muscular ache or pain</h5>
<img src="https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" alt="">
<p>Muscular aches and pains are very common, especially amongst office workers or anyone spending a lot of time sitting or looking at screens.</p>
<p>However, though the problem is a common one, it does still deserve your attention. If left untreated, musculoskeletal (MSK) issues could grow into a chronic issue that’s difficult to ignore. It’s therefore important for you to take prompt action if pain persists.</p>
{{> '@accordion'}}
<h5>I’ve found a lump</h5>
<img src="https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" alt="">
<p>While finding a lump on your body can be alarming, there is no need to panic, as the majority of breast and testicular lumps are benign. However, it’s still important that you seek prompt medical advice.</p>
{{> '@accordion'}}
<h5>I need to use a GP</h5>
<div class="relative w-full overflow-hidden aspect-w-16 aspect-h-9 mt-6">
<lite-youtube class="w-full max-w-full" videoid="MjW_qYx-SA8" params="api=1"></lite-youtube>
</div>
<p>Your Vitality private medical insurance can offer you quick access to a GP, which is particularly useful if you face long wait times to be seen at your local surgery.</p>
<p>Using the fully remote service, you can be connected with a registered doctor at your earliest convenience.</p>
{{> '@accordion'}}
</div>
</div>
</div>
{
"image": "https://picsum.photos/1000/500?random=1"
}
No notes defined.