/* =========================================================
   Redovar Care · Get coverage
   Developed by Cavendish Pierre-Louis
   https://cavendishpierrelouis.io
========================================================= */




/* =========================================================
   Page variables
========================================================= */


:root
{
  --blue:
    #0B369A;


  --blue-hover:
    #092F86;


  --terra:
    #C34811;


  --terra-hover:
    #A93D0D;


  --care-green:
    #26853B;


  --care-green-dark:
    #1F7133;


  --black:
    #111111;


  --text:
    #171717;


  --muted:
    #6B6B68;


  --soft:
    #8B8B86;


  --border:
    #E7E7E3;


  --border-strong:
    #D9D9D4;


  --surface:
    #F7F7F5;


  --surface-alt:
    #F2F2EF;


  --white:
    #FFFFFF;


  --radius:
    4px;


  --max:
    1480px;


  --gutter:
    clamp(
      22px,
      4.4vw,
      72px
    );


  --header-h:
    76px;


  --local-nav-h:
    72px;


  --ease:
    cubic-bezier(
      .22,
      .72,
      .22,
      1
    );
}




/* =========================================================
   Reset
========================================================= */


*,
*::before,
*::after
{
  box-sizing:
    border-box;
}




html
{
  scroll-behavior:
    smooth;
}




body
{
  margin:
    0;


  min-width:
    320px;


  overflow-x:
    clip;


  background:
    var(--white);


  color:
    var(--text);


  font-family:
    "Onest",
    "Helvetica Neue",
    Arial,
    sans-serif;


  -webkit-font-smoothing:
    antialiased;


  text-rendering:
    optimizeLegibility;
}




main
{
  overflow:
    clip;
}




section
{
  scroll-margin-top:
    calc(
      var(--header-h)
      +
      var(--local-nav-h)
      +
      24px
    );
}




h1,
h2,
h3,
p
{
  text-wrap:
    pretty;
}




a
{
  color:
    inherit;
}




button,
input,
select
{
  font:
    inherit;
}




img
{
  display:
    block;
}




[hidden]
{
  display:
    none
    !important;
}




::selection
{
  background:
    rgba(
      11,
      54,
      154,
      .14
    );
}




/* =========================================================
   Main
========================================================= */


.coverage-main
{
  width:
    100%;


  padding-top:
    var(--header-h);


  background:
    var(--white);
}




/* =========================================================
   Shared shell
========================================================= */


.coverage-shell
{
  width:
    min(
      100%,
      var(--max)
    );


  margin-inline:
    auto;


  padding-inline:
    var(--gutter);
}




/* =========================================================
   Local navigation
========================================================= */


.coverage-local-nav
{
  position:
    sticky;


  z-index:
    80;


  top:
    var(--header-h);


  width:
    100%;


  background:
    rgba(
      247,
      247,
      245,
      .96
    );


  border-bottom:
    1px
    solid
    rgba(
      23,
      23,
      23,
      .08
    );


  -webkit-backdrop-filter:
    blur(
      18px
    );


  backdrop-filter:
    blur(
      18px
    );
}




.coverage-local-nav-inner
{
  min-height:
    var(--local-nav-h);


  display:
    flex;


  align-items:
    center;


  justify-content:
    space-between;


  gap:
    28px;
}




.coverage-local-brand
{
  display:
    inline-flex;


  align-items:
    center;


  gap:
    9px;


  color:
    var(--text);


  font-size:
    clamp(
      20px,
      1.55vw,
      24px
    );


  line-height:
    1;


  letter-spacing:
    -.03em;


  font-weight:
    550;


  text-decoration:
    none;
}




.coverage-local-brand img
{
  width:
    24px;


  height:
    24px;


  flex:
    0
    0
    24px;


  object-fit:
    contain;


  object-position:
    center;
}




.coverage-local-brand span
{
  display:
    block;
}




.coverage-local-signin
{
  min-height:
    40px;


  padding:
    0
    16px;


  display:
    inline-flex;


  align-items:
    center;


  justify-content:
    center;


  border-radius:
    var(--radius);


  background:
    var(--blue);


  color:
    var(--white);


  font-size:
    12px;


  line-height:
    1;


  font-weight:
    600;


  text-decoration:
    none;


  transition:
    background-color
    160ms
    ease,
    transform
    160ms
    ease;
}




.coverage-local-signin:hover,
.coverage-local-signin:focus-visible
{
  background:
    var(--blue-hover);


  outline:
    none;
}




.coverage-local-signin:active
{
  transform:
    translateY(
      1px
    );
}




/* =========================================================
   Hero
========================================================= */


.coverage-hero
{
  min-height:
    clamp(
      390px,
      34vw,
      485px
    );


  display:
    flex;


  align-items:
    stretch;


  background:
    var(--surface);
}




.coverage-hero-grid
{
  width:
    100%;


  display:
    grid;


  grid-template-columns:
    minmax(
      0,
      1.16fr
    )
    minmax(
      340px,
      .84fr
    );


  gap:
    clamp(
      42px,
      5vw,
      86px
    );


  align-items:
    center;


  padding-top:
    clamp(
      48px,
      5vw,
      68px
    );


  padding-bottom:
    clamp(
      52px,
      5.4vw,
      74px
    );
}




/* =========================================================
   Hero copy
========================================================= */


.coverage-hero-copy
{
  width:
    100%;


  min-width:
    0;
}




.coverage-hero h1
{
  margin:
    0;


  color:
    var(--text);


  font-size:
    clamp(
      42px,
      3.75vw,
      58px
    );


  line-height:
    .98;


  letter-spacing:
    -.052em;


  font-weight:
    500;


  white-space:
    nowrap;


  text-wrap:
    nowrap;
}




.coverage-hero-copy > p
{
  max-width:
    510px;


  margin:
    24px
    0
    0;


  color:
    var(--muted);


  font-size:
    clamp(
      15px,
      1.25vw,
      18px
    );


  line-height:
    1.58;


  letter-spacing:
    -.012em;


  font-weight:
    400;
}




/* =========================================================
   Hero action
========================================================= */


.coverage-hero-action
{
  min-height:
    46px;


  margin-top:
    30px;


  padding:
    0
    19px;


  display:
    inline-flex;


  align-items:
    center;


  justify-content:
    center;


  border-radius:
    var(--radius);


  background:
    var(--blue);


  color:
    var(--white);


  font-size:
    12px;


  line-height:
    1;


  font-weight:
    600;


  text-decoration:
    none;


  transition:
    background-color
    160ms
    ease,
    transform
    160ms
    ease;
}




.coverage-hero-action:hover,
.coverage-hero-action:focus-visible
{
  background:
    var(--blue-hover);


  outline:
    none;
}




.coverage-hero-action:active
{
  transform:
    translateY(
      1px
    );
}




/* =========================================================
   Hero visual
========================================================= */


.coverage-hero-visual
{
  position:
    relative;


  min-height:
    clamp(
      260px,
      26vw,
      370px
    );


  display:
    grid;


  place-items:
    center;


  overflow:
    hidden;
}




.coverage-hero-visual img
{
  width:
    min(
      100%,
      500px
    );


  max-height:
    370px;


  display:
    block;


  object-fit:
    contain;


  object-position:
    center;


  user-select:
    none;


  -webkit-user-drag:
    none;
}




/* =========================================================
   Coverage builder section
========================================================= */


.coverage-builder-section
{
  padding:
    clamp(
      104px,
      9vw,
      154px
    )
    0;


  background:
    var(--white);
}




/* =========================================================
   Builder panel
========================================================= */


.coverage-builder-panel
{
  width:
    min(
      100%,
      1040px
    );


  margin-inline:
    auto;


  padding:
    clamp(
      42px,
      5.5vw,
      72px
    );


  border-radius:
    var(--radius);


  background:
    var(--surface);
}




/* =========================================================
   Builder heading
========================================================= */


.coverage-builder-heading
{
  width:
    min(
      100%,
      720px
    );


  margin:
    0
    auto;


  text-align:
    center;
}




.coverage-builder-heading h2
{
  margin:
    0;


  color:
    var(--text);


  font-size:
    clamp(
      30px,
      3.2vw,
      48px
    );


  line-height:
    .98;


  letter-spacing:
    -.052em;


  font-weight:
    500;
}




/* =========================================================
   Selection
========================================================= */


.coverage-selection
{
  width:
    min(
      100%,
      640px
    );


  margin:
    clamp(
      46px,
      5vw,
      66px
    )
    auto
    0;


  display:
    grid;


  gap:
    14px;
}




/* =========================================================
   Field
========================================================= */


.coverage-field
{
  display:
    grid;


  gap:
    9px;
}




.coverage-field-label
{
  padding-left:
    2px;


  color:
    var(--muted);


  font-size:
    11px;


  line-height:
    1.2;


  font-weight:
    500;
}




/* =========================================================
   Select
========================================================= */


.coverage-select-wrap,
.coverage-quantity-control
{
  position:
    relative;


  width:
    100%;
}




.coverage-select,
.coverage-quantity-select,
.coverage-quantity-input
{
  width:
    100%;


  height:
    64px;


  padding:
    0
    52px
    0
    18px;


  border:
    1px
    solid
    var(--border-strong);


  border-radius:
    var(--radius);


  outline:
    none;


  background-color:
    var(--white);


  color:
    var(--text);


  font-size:
    16px;


  line-height:
    1;


  letter-spacing:
    -.015em;


  font-weight:
    450;


  transition:
    border-color
    160ms
    ease,
    box-shadow
    160ms
    ease,
    background-color
    160ms
    ease;
}




.coverage-select,
.coverage-quantity-select
{
  appearance:
    none;


  -webkit-appearance:
    none;


  cursor:
    pointer;


  background-image:
    url("../../../../assets/icons/down-arrow-backup-2-svgrepo-com.svg");


  background-repeat:
    no-repeat;


  background-position:
    right
    19px
    center;


  background-size:
    12px
    12px;
}




.coverage-select:hover,
.coverage-quantity-select:hover,
.coverage-quantity-input:hover
{
  border-color:
    #C9C9C4;
}




.coverage-select:focus-visible,
.coverage-quantity-select:focus-visible,
.coverage-quantity-input:focus-visible
{
  border-color:
    var(--blue);


  box-shadow:
    0
    0
    0
    2px
    rgba(
      11,
      54,
      154,
      .10
    );
}




.coverage-select:disabled,
.coverage-quantity-select:disabled
{
  cursor:
    default;


  opacity:
    .55;


  background-color:
    #F1F1EE;
}




.coverage-quantity-input
{
  padding-right:
    18px;


  appearance:
    textfield;


  -moz-appearance:
    textfield;


  font-variant-numeric:
    tabular-nums;
}




.coverage-quantity-input::-webkit-outer-spin-button,
.coverage-quantity-input::-webkit-inner-spin-button
{
  margin:
    0;


  -webkit-appearance:
    none;
}




/* =========================================================
   Selection action
========================================================= */


.coverage-selection-action
{
  padding-top:
    18px;


  display:
    flex;


  align-items:
    center;


  justify-content:
    center;
}




/* =========================================================
   Continue
========================================================= */


.coverage-continue
{
  width:
    auto;


  min-width:
    118px;


  min-height:
    46px;


  padding:
    0
    20px;


  display:
    inline-flex;


  align-items:
    center;


  justify-content:
    center;


  flex:
    0
    0
    auto;


  border-radius:
    var(--radius);


  background:
    var(--blue);


  color:
    var(--white);


  font-size:
    12px;


  line-height:
    1;


  font-weight:
    600;


  text-decoration:
    none;


  white-space:
    nowrap;


  transition:
    background-color
    160ms
    ease,
    opacity
    160ms
    ease,
    transform
    160ms
    ease;
}




.coverage-continue:hover,
.coverage-continue:focus-visible
{
  background:
    var(--blue-hover);


  outline:
    none;
}




.coverage-continue:active
{
  transform:
    translateY(
      1px
    );
}




.coverage-continue[aria-disabled="true"]
{
  opacity:
    .32;


  pointer-events:
    none;
}




/* =========================================================
   Result
========================================================= */


.coverage-result
{
  width:
    min(
      100%,
      720px
    );


  margin:
    clamp(
      52px,
      5.5vw,
      72px
    )
    auto
    0;
}




/* =========================================================
   Plan
========================================================= */


.coverage-plan
{
  padding:
    0
    0
    clamp(
      34px,
      4vw,
      46px
    );


  display:
    grid;


  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;


  gap:
    46px;


  align-items:
    end;


  border-bottom:
    1px
    solid
    var(--border-strong);
}




.coverage-plan-copy
{
  min-width:
    0;
}




.coverage-plan-name-row
{
  display:
    flex;


  align-items:
    center;


  flex-wrap:
    wrap;


  gap:
    10px;
}




.coverage-plan-title
{
  margin:
    0;


  display:
    inline-flex;


  align-items:
    center;


  gap:
    8px;


  color:
    var(--text);


  font-size:
    clamp(
      22px,
      2.15vw,
      28px
    );


  line-height:
    1;


  letter-spacing:
    -.04em;


  font-weight:
    550;
}




.coverage-plan-title img
{
  width:
    24px;


  height:
    24px;


  flex:
    0
    0
    24px;


  object-fit:
    contain;


  object-position:
    center;
}




.coverage-plan-title span
{
  display:
    block;
}




/* =========================================================
   12 month badge
========================================================= */


.coverage-plan-badge
{
  min-height:
    22px;


  padding:
    0
    8px;


  display:
    inline-flex;


  align-items:
    center;


  justify-content:
    center;


  border-radius:
    4px;


  background:
    rgba(
      38,
      133,
      59,
      .10
    );


  color:
    var(--care-green-dark);


  font-size:
    9px;


  line-height:
    1;


  font-weight:
    600;
}




.coverage-plan-copy > p
{
  max-width:
    500px;


  margin:
    17px
    0
    0;


  color:
    var(--muted);


  font-size:
    14px;


  line-height:
    1.6;
}




/* =========================================================
   Plan price
========================================================= */


.coverage-plan-price
{
  min-width:
    150px;


  display:
    flex;


  flex-direction:
    column;


  align-items:
    flex-end;


  text-align:
    right;
}




.coverage-plan-price strong
{
  color:
    var(--text);


  font-size:
    clamp(
      42px,
      4vw,
      58px
    );


  line-height:
    .88;


  letter-spacing:
    -.06em;


  font-weight:
    500;


  font-variant-numeric:
    tabular-nums;
}




.coverage-plan-price span
{
  margin-top:
    11px;


  color:
    var(--muted);


  font-size:
    11px;


  line-height:
    1.3;


  white-space:
    nowrap;
}




/* =========================================================
   Calculation
========================================================= */


.coverage-calculation
{
  padding:
    clamp(
      30px,
      3.5vw,
      42px
    )
    0;


  border-bottom:
    1px
    solid
    var(--border-strong);
}




.coverage-calculation-row
{
  display:
    flex;


  align-items:
    center;


  justify-content:
    space-between;


  gap:
    30px;


  color:
    var(--muted);


  font-size:
    13px;


  line-height:
    1.4;
}




.coverage-calculation-total
{
  margin-top:
    28px;


  display:
    flex;


  align-items:
    flex-end;


  justify-content:
    space-between;


  gap:
    30px;
}




.coverage-calculation-total > span
{
  color:
    var(--text);


  font-size:
    14px;


  line-height:
    1.2;


  font-weight:
    550;
}




.coverage-calculation-total > strong
{
  color:
    var(--text);


  font-size:
    clamp(
      25px,
      2.4vw,
      34px
    );


  line-height:
    1;


  letter-spacing:
    -.04em;


  font-weight:
    500;


  text-align:
    right;


  font-variant-numeric:
    tabular-nums;
}




/* =========================================================
   Terms
========================================================= */


.coverage-handoff
{
  padding-top:
    clamp(
      30px,
      3.5vw,
      40px
    );


  display:
    grid;


  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;


  align-items:
    center;


  column-gap:
    24px;


  row-gap:
    16px;
}




.coverage-result-action
{
  justify-self:
    end;


  display:
    flex;


  align-items:
    center;


  width:
    auto;
}




.coverage-terms-link
{
  color:
    var(--blue);


  font-size:
    13px;


  line-height:
    1.4;


  font-weight:
    550;


  text-decoration:
    none;


  transition:
    color
    150ms
    ease;
}




.coverage-terms-link:hover,
.coverage-terms-link:focus-visible
{
  color:
    var(--blue-hover);


  text-decoration:
    underline;


  text-underline-offset:
    3px;
}




.coverage-terms-link:focus-visible
{
  outline:
    none;
}




/* =========================================================
   Already covered
========================================================= */


.coverage-close
{
  padding:
    clamp(
      104px,
      9vw,
      152px
    )
    0;


  background:
    var(--blue);


  color:
    var(--white);
}




.coverage-close-inner
{
  display:
    flex;


  align-items:
    flex-end;


  justify-content:
    space-between;


  gap:
    60px;
}




.coverage-close-copy
{
  max-width:
    720px;
}




.coverage-close h2
{
  margin:
    0;


  color:
    var(--white);


  font-size:
    clamp(
      42px,
      4.7vw,
      68px
    );


  line-height:
    .96;


  letter-spacing:
    -.055em;


  font-weight:
    500;
}




.coverage-close-copy p
{
  margin:
    22px
    0
    0;


  color:
    rgba(
      255,
      255,
      255,
      .72
    );


  font-size:
    clamp(
      15px,
      1.2vw,
      17px
    );


  line-height:
    1.6;
}




/* =========================================================
   Already covered action
========================================================= */


.coverage-close-action
{
  min-height:
    46px;


  padding:
    0
    18px;


  display:
    inline-flex;


  align-items:
    center;


  justify-content:
    center;


  flex:
    0
    0
    auto;


  border-radius:
    var(--radius);


  background:
    var(--white);


  color:
    var(--blue);


  font-size:
    12px;


  line-height:
    1;


  font-weight:
    600;


  text-decoration:
    none;


  transition:
    background-color
    160ms
    ease,
    transform
    160ms
    ease;
}




.coverage-close-action:hover,
.coverage-close-action:focus-visible
{
  background:
    #F2F4FA;


  outline:
    none;
}




.coverage-close-action:active
{
  transform:
    translateY(
      1px
    );
}




/* =========================================================
   Focus
========================================================= */


.coverage-hero-action:focus-visible,
.coverage-local-signin:focus-visible,
.coverage-continue:focus-visible
{
  outline:
    2px
    solid
    rgba(
      11,
      54,
      154,
      .22
    );


  outline-offset:
    3px;
}




.coverage-close-action:focus-visible
{
  outline:
    2px
    solid
    rgba(
      255,
      255,
      255,
      .58
    );


  outline-offset:
    3px;
}




/* =========================================================
   Responsive · 1120
========================================================= */


@media (max-width:1120px)
{


  .coverage-hero-grid
  {
    grid-template-columns:
      minmax(
        0,
        1.1fr
      )
      minmax(
        300px,
        .9fr
      );


    gap:
      42px;
  }




  .coverage-hero h1
  {
    font-size:
      clamp(
        38px,
        4vw,
        48px
      );
  }


}




/* =========================================================
   Responsive · 900
========================================================= */


@media (max-width:900px)
{


  .coverage-hero
  {
    min-height:
      0;
  }




  .coverage-hero-grid
  {
    grid-template-columns:
      1fr;


    gap:
      34px;


    padding-top:
      58px;


    padding-bottom:
      66px;
  }




  .coverage-hero-copy
  {
    max-width:
      720px;
  }




  .coverage-hero h1
  {
    font-size:
      clamp(
        46px,
        7vw,
        62px
      );


    white-space:
      normal;


    text-wrap:
      balance;
  }




  .coverage-hero-visual
  {
    min-height:
      300px;


    justify-items:
      center;
  }




  .coverage-hero-visual img
  {
    max-height:
      340px;
  }




  .coverage-builder-panel
  {
    padding:
      44px
      34px;
  }




  .coverage-plan
  {
    grid-template-columns:
      1fr;


    gap:
      28px;


    align-items:
      start;
  }




  .coverage-plan-price
  {
    align-items:
      flex-start;


    text-align:
      left;
  }




  .coverage-close-inner
  {
    align-items:
      flex-start;


    flex-direction:
      column;


    gap:
      34px;
  }


}




/* =========================================================
   Responsive · 700
========================================================= */


@media (max-width:700px)
{


  :root
  {
    --local-nav-h:
      62px;
  }




  .coverage-local-brand
  {
    font-size:
      19px;
  }




  .coverage-local-brand img
  {
    width:
      22px;


    height:
      22px;


    flex-basis:
      22px;
  }




  .coverage-local-signin
  {
    min-height:
      36px;


    padding-inline:
      13px;
  }




  .coverage-hero-grid
  {
    padding-top:
      48px;


    padding-bottom:
      58px;
  }




  .coverage-hero h1
  {
    font-size:
      clamp(
        42px,
        11.5vw,
        56px
      );


    line-height:
      .96;
  }




  .coverage-hero-copy > p
  {
    margin-top:
      22px;


    font-size:
      16px;
  }




  .coverage-hero-action
  {
    margin-top:
      28px;
  }




  .coverage-hero-visual
  {
    min-height:
      270px;
  }




  .coverage-builder-section
  {
    padding:
      88px
      0;
  }




  .coverage-builder-panel
  {
    padding:
      36px
      24px;
  }




  .coverage-builder-heading h2
  {
    font-size:
      clamp(
        38px,
        10vw,
        50px
      );
  }




  .coverage-selection
  {
    margin-top:
      42px;
  }




  .coverage-select,
  .coverage-quantity-select,
  .coverage-quantity-input
  {
    height:
      60px;
  }




  .coverage-plan-title img
  {
    width:
      22px;


    height:
      22px;


    flex-basis:
      22px;
  }




  .coverage-close
  {
    padding:
      90px
      0;
  }




  .coverage-close h2
  {
    font-size:
      clamp(
        38px,
        10.5vw,
        54px
      );
  }


}




/* =========================================================
   Responsive · 520
========================================================= */


@media (max-width:520px)
{


  .coverage-hero-grid
  {
    padding-top:
      42px;


    padding-bottom:
      52px;
  }




  .coverage-hero h1
  {
    font-size:
      clamp(
        40px,
        11.5vw,
        50px
      );
  }




  .coverage-hero-visual
  {
    min-height:
      240px;
  }




  .coverage-builder-panel
  {
    padding:
      32px
      20px;
  }




  .coverage-selection-action
  {
    padding-top:
      16px;
  }




  .coverage-calculation-row
  {
    align-items:
      flex-start;


    flex-direction:
      column;


    gap:
      7px;
  }




  .coverage-calculation-total
  {
    align-items:
      flex-start;


    flex-direction:
      column;


    gap:
      12px;
  }




  .coverage-calculation-total > strong
  {
    text-align:
      left;
  }




  .coverage-plan-name-row
  {
    align-items:
      center;
  }




  .coverage-handoff
  {
    grid-template-columns:
      1fr;
  }




  .coverage-result-action
  {
    width:
      auto;


    justify-self:
      end;
  }




  .coverage-result-action .coverage-continue
  {
    width:
      auto;
  }




  .coverage-close-action
  {
    width:
      100%;
  }


}




/* =========================================================
   Reduced motion
========================================================= */


@media (prefers-reduced-motion:reduce)
{


  html
  {
    scroll-behavior:
      auto;
  }




  *,
  *::before,
  *::after
  {
    animation-duration:
      .01ms
      !important;


    animation-iteration-count:
      1
      !important;


    transition-duration:
      .01ms
      !important;
  }


}