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


: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;


  --section-space:
    clamp(
      112px,
      11vw,
      176px
    );


  --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;
}




img
{
  display:block;
}




a
{
  color:inherit;
}




button
{
  font:inherit;
}




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




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


.care-main
{
  width:100%;


  overflow:clip;


  background:
    var(--white);
}




/* =========================================================
   Shell
========================================================= */


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


  margin-inline:auto;


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




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


.care-hero
{
  position:relative;


  isolation:isolate;


  min-height:
    clamp(
      590px,
      50vw,
      720px
    );


  padding:
    calc(
      var(--header-h)
      +
      clamp(
        72px,
        7vw,
        108px
      )
    )
    0
    clamp(
      132px,
      13vw,
      188px
    );


  overflow:hidden;


  background-color:
    var(--terra);


  background-image:
    linear-gradient(
      90deg,
      rgba(24,128,63,.98) 0%,
      rgba(24,128,63,.96) 29%,
      rgba(24,128,63,.83) 48%,
      rgba(24,128,63,.40) 68%,
      rgba(24,128,63,.08) 86%,
      rgba(24,128,63,0) 100%
    ),
    url("../../assets/images/redovar-care.PNG");


  background-repeat:
    no-repeat;


  background-position:
    center,
    center right;


  background-size:
    cover,
    cover;


  color:
    var(--white);
}




/* =========================================================
   Hero bottom curve
========================================================= */


.care-hero::after
{
  content:"";


  position:absolute;


  z-index:1;


  left:50%;
  bottom:-72px;


  width:116%;
  height:108px;


  background:
    var(--white);


  border-radius:
    50%
    50%
    0
    0
    /
    100%
    100%
    0
    0;


  transform:
    translateX(-50%);


  pointer-events:none;
}




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


.care-hero-inner
{
  position:relative;


  z-index:2;


  min-height:100%;


  display:flex;


  align-items:center;
  justify-content:center;
}




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


.care-hero-copy
{
  width:
    min(
      100%,
      920px
    );


  margin-inline:auto;


  display:flex;


  flex-direction:column;


  align-items:center;


  text-align:center;
}




.care-lockup
{
  min-height:42px;


  margin:
    0
    0
    28px;


  display:inline-flex;


  align-items:center;
  justify-content:center;


  gap:10px;


  color:
    var(--white);


  font-size:
    clamp(
      24px,
      2.2vw,
      34px
    );


  line-height:1;


  letter-spacing:-.032em;


  font-weight:550;
}




.care-lockup img
{
  width:38px;
  height:38px;


  object-fit:contain;
}




.care-hero h1
{
  max-width:880px;


  margin:0;


  color:
    var(--white);


  font-size:
    clamp(
      58px,
      6.5vw,
      98px
    );


  line-height:.94;


  letter-spacing:-.064em;


  font-weight:500;


  text-wrap:balance;
}




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


.care-hero-toggle
{
  width:38px;
  height:38px;


  margin-top:
    clamp(
      40px,
      5vw,
      62px
    );


  padding:0;


  display:grid;


  place-items:center;


  border:0;


  border-radius:999px;


  background:
    rgba(
      255,
      255,
      255,
      .90
    );


  color:
    var(--text);


  box-shadow:
    0
    8px
    26px
    rgba(
      17,
      17,
      17,
      .08
    );


  cursor:pointer;


  transition:
    transform
    220ms
    var(--ease),
    background-color
    160ms
    ease;
}




.care-hero-toggle:hover,
.care-hero-toggle:focus-visible
{
  background:
    var(--white);


  outline:none;


  transform:
    translateY(-2px);
}




.care-hero-toggle:active
{
  transform:
    translateY(0);
}




.care-hero-toggle img
{
  width:16px;
  height:16px;


  object-fit:contain;


  transition:
    transform
    320ms
    var(--ease);
}




.care-hero-toggle[aria-expanded="true"] img
{
  transform:
    rotate(180deg);
}




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


.care-hero-reveal
{
  width:
    min(
      100%,
      760px
    );


  display:grid;


  grid-template-rows:0fr;


  opacity:0;


  margin-top:0;


  transition:
    grid-template-rows
    520ms
    var(--ease),
    opacity
    280ms
    ease,
    margin-top
    520ms
    var(--ease);
}




.care-hero-reveal.is-visible
{
  grid-template-rows:1fr;


  opacity:1;


  margin-top:
    clamp(
      30px,
      3.2vw,
      44px
    );
}




.care-hero-reveal-inner
{
  min-height:0;


  overflow:hidden;


  display:flex;


  flex-direction:column;


  align-items:center;
}




.care-hero-reveal p
{
  max-width:980px;


  margin:0;


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


  font-size:
    clamp(
      16px,
      1.45vw,
      20px
    );


  line-height:1.62;


  letter-spacing:-.014em;


  font-weight:500;


  text-wrap:pretty;
}




/* =========================================================
   Primary button
========================================================= */


.care-primary-button
{
  min-height:46px;


  padding:
    0
    18px;


  display:inline-flex;


  align-items:center;
  justify-content:center;


  border-radius:
    var(--radius);


  background:
    var(--terra);


  color:
    var(--white);


  font-size:12px;


  line-height:1;


  font-weight:600;


  text-decoration:none;


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




.care-primary-button:hover,
.care-primary-button:focus-visible
{
  background:
    var(--terra-hover);


  outline:none;
}




.care-primary-button:active
{
  transform:
    translateY(1px);
}




.care-primary-button--hero
{
  margin-top:28px;
 background:
    var(--white);


  color:
    var(--care-green);

}




.care-primary-button--hero:hover,
.care-primary-button--hero:focus-visible
{
  background:
     var(--border-strong);
}




/* =========================================================
   Shared section headings
========================================================= */


.care-section-heading
{
  max-width:760px;


  margin-bottom:
    clamp(
      48px,
      5vw,
      74px
    );
}




.care-section-heading h2,
.care-plan-heading h2,
.care-support-copy h2
{
  margin:0;


  color:
    var(--text);


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


  line-height:.96;


  letter-spacing:-.055em;


  font-weight:500;


  text-wrap:balance;
}




.care-section-lead,
.care-plan-heading > p,
.care-support-copy > p
{
  max-width:660px;


  margin:
    24px
    0
    0;


  color:
    var(--muted);


  font-size:
    clamp(
      17px,
      1.55vw,
      21px
    );


  line-height:1.58;


  letter-spacing:-.014em;


  font-weight:400;


  text-wrap:pretty;
}




/* =========================================================
   Benefits
========================================================= */


.care-benefits
{
  margin-top:
    clamp(
      126px,
      10vw,
      168px
    );


  padding:
    var(--section-space)
    0;


  background:
    var(--surface);
}




.care-benefits-stage
{
  position:relative;


  width:100%;
}




.care-benefits-track
{
  width:100%;


  padding:
    0
    max(
      var(--gutter),
      calc(
        (100vw - var(--max)) / 2
        +
        var(--gutter)
      )
    )
    20px;


  display:flex;


  gap:
    clamp(
      16px,
      1.6vw,
      24px
    );


  overflow-x:auto;


  scroll-snap-type:
    x
    mandatory;


  scroll-padding-left:
    max(
      var(--gutter),
      calc(
        (100vw - var(--max)) / 2
        +
        var(--gutter)
      )
    );


  scrollbar-width:none;


  -webkit-overflow-scrolling:touch;
}




.care-benefits-track::-webkit-scrollbar
{
  display:none;
}




.care-benefits-track:focus-visible
{
  outline:
    2px
    solid
    rgba(
      11,
      54,
      154,
      .16
    );


  outline-offset:-2px;
}




/* =========================================================
   Benefit card
========================================================= */


.care-benefit-card
{
  flex:
    0
    0
    clamp(
      300px,
      29vw,
      430px
    );


  min-height:
    clamp(
      450px,
      42vw,
      560px
    );


  display:grid;


  grid-template-rows:
    minmax(
      250px,
      1fr
    )
    auto;


  overflow:hidden;


  scroll-snap-align:start;


  border-radius:
    var(--radius);


  background:
    var(--white);
}




/* =========================================================
   Benefit visual
========================================================= */


.care-benefit-visual
{
  position:relative;


  min-height:280px;


  overflow:hidden;


  background:
    var(--white);
}




.care-benefit-visual--image
{
  display:block;


  padding:0;
}




.care-benefit-visual--image img
{
  position:absolute;


  inset:0;


  width:100%;
  height:100%;


  max-width:none;
  max-height:none;


  object-fit:cover;


  object-position:center;


  display:block;
}




.care-benefit-visual--graphic
{
  display:flex;


  align-items:center;
  justify-content:center;


  padding:
    clamp(
      30px,
      3vw,
      44px
    );
}




/* =========================================================
   Accidental damage
========================================================= */


.care-damage-graphic
{
  width:
    min(
      100%,
      276px
    );


  min-height:270px;


  margin-inline:auto;


  display:grid;


  align-content:center;


  gap:
    clamp(
      19px,
      1.8vw,
      24px
    );
}




.care-damage-step
{
  width:100%;


  display:grid;


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


  gap:14px;


  align-items:center;
}




.care-damage-state
{
  position:relative;


  width:36px;
  height:36px;


  display:grid;


  place-items:center;
}




.care-damage-loader,
.care-damage-check,
.care-damage-logo
{
  position:absolute;


  inset:0;


  width:36px;
  height:36px;
}




.care-damage-loader
{
  object-fit:contain;


  opacity:0;


  transform:
    scale(.82)
    rotate(0deg);


  transition:
    opacity
    220ms
    ease,
    transform
    320ms
    var(--ease);
}




.care-damage-check
{
  overflow:visible;


  fill:none;


  stroke:
    var(--care-green);


  stroke-width:2.25;


  stroke-linecap:round;


  stroke-linejoin:round;


  opacity:0;


  transform:
    scale(.82);


  transition:
    opacity
    220ms
    ease,
    transform
    320ms
    var(--ease);
}




.care-damage-logo
{
  object-fit:contain;


  opacity:0;


  transform:
    scale(.78);


  transition:
    opacity
    260ms
    ease,
    transform
    380ms
    var(--ease);
}




.care-damage-text
{
  color:
    var(--text);


  font-size:
    clamp(
      37px,
      3.25vw,
      49px
    );


  line-height:.94;


  letter-spacing:-.052em;


  font-weight:500;


  white-space:nowrap;


  opacity:0;


  transform:
    translateX(14px);


  transition:
    opacity
    280ms
    ease,
    transform
    460ms
    var(--ease),
    color
    260ms
    ease;
}




.care-damage-step.is-loading
.care-damage-loader
{
  opacity:1;


  transform:
    scale(1)
    rotate(0deg);


  animation:
    care-loader-spin
    .95s
    linear
    infinite;
}




.care-damage-step.is-done
.care-damage-loader
{
  opacity:0;


  animation:none;
}




.care-damage-step.is-done
.care-damage-check
{
  opacity:1;


  transform:
    scale(1);
}




.care-damage-step.is-done
.care-damage-text
{
  opacity:1;


  transform:
    translateX(0);
}




.care-damage-step--covered
{
  margin-top:
    clamp(
      16px,
      2vw,
      24px
    );
}




.care-damage-step--covered
.care-damage-text
{
  color:
    var(--care-green);
}




.care-damage-step--covered.is-done
.care-damage-check
{
  opacity:0;
}




.care-damage-step--covered.is-done
.care-damage-logo
{
  opacity:1;


  transform:
    scale(1);
}




/* =========================================================
   Coverage period
========================================================= */


.care-period-graphic
{
  width:
    min(
      100%,
      330px
    );


  min-height:300px;


  margin-inline:auto;


  display:flex;


  flex-direction:column;


  align-items:center;
  justify-content:center;


  text-align:center;
}




.care-period-number
{
  width:100%;


  min-height:
    clamp(
      102px,
      10vw,
      138px
    );


  display:flex;


  align-items:center;
  justify-content:center;


  color:
    var(--text);


  font-size:
    clamp(
      112px,
      10vw,
      150px
    );


  line-height:.78;


  letter-spacing:-.075em;


  font-weight:500;


  font-variant-numeric:
    tabular-nums;


  text-align:center;


  transition:
    color
    420ms
    var(--ease),
    transform
    420ms
    var(--ease);
}




.care-period-number span
{
  display:block;


  min-width:2ch;


  text-align:center;
}




.care-period-graphic.is-complete
.care-period-number
{
  color:
    var(--care-green);


  transform:
    translateY(-2px);
}




.care-period-loader
{
  width:
    min(
      100%,
      214px
    );


  margin-top:
    clamp(
      28px,
      3vw,
      36px
    );


  display:grid;


  grid-template-columns:
    repeat(
      12,
      1fr
    );


  gap:5px;


  align-items:center;
}




.care-period-dash
{
  height:3px;


  border-radius:999px;


  background:#DEDEDA;


  transform:
    scaleX(.84);


  transform-origin:center;


  transition:
    background-color
    320ms
    ease,
    transform
    360ms
    var(--ease);
}




.care-period-dash.is-filled
{
  background:
    var(--care-green);


  transform:
    scaleX(1);
}




.care-period-label
{
  margin-top:16px;


  color:
    var(--muted);


  font-size:14px;


  line-height:1;


  letter-spacing:-.018em;


  font-weight:500;


  text-align:center;
}




/* =========================================================
   Start with Redovar
========================================================= */


.care-service-graphic
{
  width:
    min(
      100%,
      252px
    );


  min-height:270px;


  margin-inline:auto;


  display:grid;


  align-content:center;


  gap:
    clamp(
      22px,
      2vw,
      28px
    );
}




.care-service-step
{
  width:100%;


  display:grid;


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


  gap:14px;


  align-items:center;
}




.care-service-state
{
  position:relative;


  width:36px;
  height:36px;


  display:grid;


  place-items:center;
}




.care-service-loader,
.care-service-check
{
  position:absolute;


  inset:0;


  width:36px;
  height:36px;
}




.care-service-loader
{
  object-fit:contain;


  opacity:0;


  transform:
    scale(.82)
    rotate(0deg);


  transition:
    opacity
    220ms
    ease,
    transform
    320ms
    var(--ease);
}




.care-service-check
{
  overflow:visible;


  fill:none;


  stroke:
    var(--care-green);


  stroke-width:2.25;


  stroke-linecap:round;


  stroke-linejoin:round;


  opacity:0;


  transform:
    scale(.82);


  transition:
    opacity
    220ms
    ease,
    transform
    320ms
    var(--ease);
}




.care-service-text
{
  color:
    var(--text);


  font-size:
    clamp(
      37px,
      3.25vw,
      49px
    );


  line-height:.94;


  letter-spacing:-.052em;


  font-weight:500;


  white-space:nowrap;


  opacity:0;


  transform:
    translateX(14px);


  transition:
    opacity
    280ms
    ease,
    transform
    460ms
    var(--ease);
}




.care-service-step.is-loading
.care-service-loader
{
  opacity:1;


  transform:
    scale(1)
    rotate(0deg);


  animation:
    care-loader-spin
    .95s
    linear
    infinite;
}




.care-service-step.is-done
.care-service-loader
{
  opacity:0;


  animation:none;
}




.care-service-step.is-done
.care-service-check
{
  opacity:1;


  transform:
    scale(1);
}




.care-service-step.is-done
.care-service-text
{
  opacity:1;


  transform:
    translateX(0);
}




/* =========================================================
   Shared loader animation
========================================================= */


@keyframes care-loader-spin
{
  from
  {
    transform:
      scale(1)
      rotate(0deg);
  }


  to
  {
    transform:
      scale(1)
      rotate(360deg);
  }
}




/* =========================================================
   Benefit copy
========================================================= */


.care-benefit-copy
{
  min-height:176px;


  padding:
    28px
    30px
    34px;


  border-top:
    1px
    solid
    var(--border);
}




.care-benefit-copy h3
{
  margin:
    0
    0
    12px;


  color:
    var(--text);


  font-size:
    clamp(
      14px,
      1.1vw,
      16px
    );


  line-height:1.06;


  letter-spacing:-.035em;


  font-weight:700;
}




.care-benefit-copy p
{
  margin:0;


  color:
    var(--muted);


  font-size:15px;


  line-height:1.62;


  letter-spacing:-.008em;


  text-wrap:pretty;
}




/* =========================================================
   Carousel bar
========================================================= */


.care-carousel-bar
{
  width:
    min(
      100%,
      var(--max)
    );


  margin:
    18px
    auto
    0;


  padding-inline:
    var(--gutter);


  display:flex;


  align-items:center;


  justify-content:flex-end;


  gap:20px;
}




/* =========================================================
   Animation control
   Positioned above the cards at the top right
========================================================= */


.care-animation-controls
{
  position:absolute;


  z-index:8;


  top:-132px;


  right:
    max(
      var(--gutter),
      calc(
        (100vw - var(--max)) / 2
        +
        var(--gutter)
      )
    );


  display:flex;


  align-items:center;
  justify-content:center;
}













.care-animation-toggle
{
  position:relative;


  width:44px;
  height:44px;


  padding:0;


  display:grid;


  place-items:center;


  border:0;


  border-radius:999px;


  background:#EAEAE7;


  cursor:pointer;


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




.care-animation-toggle:hover,
.care-animation-toggle:focus-visible
{
  background:#DEDEDA;


  outline:none;
}




.care-animation-toggle:active
{
  transform:
    translateY(1px);
}




.care-animation-icon
{
  position:absolute;


  left:50%;
  top:50%;


  width:17px;
  height:17px;


  object-fit:contain;


  transform:
    translate(
      -50%,
      -50%
    );


  transition:
    opacity
    160ms
    ease,
    transform
    220ms
    var(--ease);
}




.care-animation-icon--play
{
  opacity:0;


  transform:
    translate(
      -50%,
      -50%
    )
    scale(.82);
}




.care-animation-icon--pause
{
  opacity:1;


  transform:
    translate(
      -50%,
      -50%
    )
    scale(1);
}




.care-animation-toggle.is-paused
.care-animation-icon--play
{
  opacity:1;


  transform:
    translate(
      -50%,
      -50%
    )
    scale(1);
}




.care-animation-toggle.is-paused
.care-animation-icon--pause
{
  opacity:0;


  transform:
    translate(
      -50%,
      -50%
    )
    scale(.82);
}




/* =========================================================
   Carousel controls
========================================================= */


.care-carousel-controls
{
  display:flex;


  align-items:center;


  justify-content:flex-end;


  gap:10px;
}




.care-carousel-controls button
{
  width:44px;
  height:44px;


  padding:0;


  display:grid;


  place-items:center;


  border:0;


  border-radius:999px;


  background:#EAEAE7;


  color:
    var(--text);


  cursor:pointer;


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




.care-carousel-controls button:hover,
.care-carousel-controls button:focus-visible
{
  background:#DEDEDA;


  outline:none;
}




.care-carousel-controls button:active
{
  transform:
    translateY(1px);
}




.care-carousel-controls button:disabled
{
  opacity:.34;


  cursor:default;
}




.care-carousel-controls img
{
  width:17px;
  height:17px;


  object-fit:contain;
}




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


.care-plan
{
  padding:
    var(--section-space)
    0;


  background:
    var(--white);
}




.care-plan-shell
{
  max-width:1220px;
}




.care-plan-heading
{
  max-width:760px;


  margin:
    0
    auto
    clamp(
      60px,
      7vw,
      96px
    );


  text-align:center;
}




.care-plan-heading > p
{
  margin-inline:auto;
}


.care-plan-mobile-copy
{
  display:none;
}




.care-plan-card
{
  width:
    min(
      100%,
      980px
    );


  margin-inline:auto;


  overflow:hidden;


  border-radius:
    var(--radius);


  background:
    var(--surface);
}




.care-plan-card-top
{
  min-height:260px;


  padding:
    clamp(
      36px,
      5vw,
      66px
    );


  display:grid;


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


  gap:54px;


  align-items:end;


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




.care-plan-card h3
{
  max-width:560px;


  margin:0;


  color:
    var(--text);


  font-size:
    clamp(
      30px,
      3.6vw,
      52px
    );


  line-height:1.02;


  letter-spacing:-.045em;


  font-weight:550;


  text-wrap:balance;
}




.care-price
{
  min-width:280px;


  display:flex;


  flex-direction:column;


  align-items:flex-end;


  text-align:right;
}




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


  font-size:
    clamp(
      82px,
      10vw,
      148px
    );


  line-height:.78;


  letter-spacing:-.075em;


  font-weight:500;
}




.care-price span
{
  margin-top:18px;


  color:
    var(--muted);


  font-size:16px;


  line-height:1.3;


  font-weight:500;
}




.care-plan-card-body
{
  padding:
    clamp(
      34px,
      4.6vw,
      58px
    );


  display:grid;


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


  gap:48px;


  align-items:end;
}




.care-plan-card-body ul
{
  margin:0;


  padding:0;


  display:grid;


  gap:22px;


  list-style:none;
}




.care-plan-card-body li
{
  display:grid;


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


  gap:12px;


  align-items:start;


  color:
    var(--text);


  font-size:16px;


  line-height:1.5;


  letter-spacing:-.008em;
}




.care-check
{
  color:
    var(--care-green);


  font-weight:600;
}




.care-plan-actions
{
  min-width:180px;


  display:grid;


  justify-items:start;


  gap:17px;
}




.care-text-link
{
  color:
    var(--blue);


  font-size:12px;


  line-height:1.3;


  font-weight:550;


  text-decoration:none;
}




.care-text-link:hover,
.care-text-link:focus-visible
{
  color:
    var(--terra);


  outline:none;
}




/* =========================================================
   Support
========================================================= */


.care-support
{
  padding:
    0
    0
    var(--section-space);


  background:
    var(--white);
}




.care-support-card
{
  min-height:
    clamp(
      430px,
      38vw,
      560px
    );


  padding:
    clamp(
      40px,
      6vw,
      84px
    );


  display:grid;


  grid-template-columns:
    minmax(
      0,
      1fr
    )
    minmax(
      300px,
      .86fr
    );


  gap:
    clamp(
      60px,
      8vw,
      120px
    );


  align-items:center;


  border-radius:
    var(--radius);


  background:
    var(--surface);
}




.care-support-copy
{
  max-width:620px;
}




.care-support-links
{
  margin-top:34px;


  display:flex;


  flex-wrap:wrap;


  gap:
    18px
    30px;
}




.care-support-links a
{
  display:inline-flex;


  align-items:center;


  gap:8px;


  color:
    var(--blue);


  font-size:13px;


  line-height:1.3;


  font-weight:550;


  text-decoration:none;
}




.care-support-links a img
{
  width:12px;
  height:12px;


  flex:
    0
    0
    12px;


  object-fit:contain;


  transition:
    transform
    220ms
    var(--ease);
}




.care-support-links a:hover,
.care-support-links a:focus-visible
{
  color:
    var(--terra);


  outline:none;
}




.care-support-links a:hover img,
.care-support-links a:focus-visible img
{
  transform:
    translateX(2px);
}




.care-support-mark
{
  min-height:300px;


  display:flex;


  align-items:center;
  justify-content:center;


  gap:13px;


  color:
    var(--text);


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


  line-height:1;


  letter-spacing:-.05em;


  font-weight:550;
}




.care-support-mark img
{
  width:
    clamp(
      72px,
      7vw,
      104px
    );


  height:
    clamp(
      72px,
      7vw,
      104px
    );


  object-fit:contain;
}




/* =========================================================
   FAQ
========================================================= */


.care-faq
{
  padding:
    var(--section-space)
    0;


  background:
    var(--surface);
}




.care-faq-grid
{
  display:grid;


  grid-template-columns:
    minmax(
      290px,
      430px
    )
    minmax(
      0,
      1fr
    );


  gap:
    clamp(
      70px,
      8vw,
      132px
    );


  align-items:start;
}




.care-faq-heading
{
  position:sticky;


  top:
    calc(
      var(--header-h)
      +
      44px
    );
}




.care-faq-heading h2
{
  margin:0;


  color:
    var(--text);


  font-size:
    clamp(
      46px,
      4.35vw,
      66px
    );


  line-height:.95;


  letter-spacing:-.058em;


  font-weight:500;
}




.care-faq-list
{
  display:grid;


  gap:12px;
}




.care-faq-item
{
  overflow:hidden;


  border-radius:
    var(--radius);


  background:
    var(--white);
}




.care-faq-item summary
{
  min-height:98px;


  padding:
    0
    26px
    0
    30px;


  display:grid;


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


  gap:24px;


  align-items:center;


  list-style:none;


  color:
    var(--text);


  font-size:16px;


  line-height:1.35;


  letter-spacing:-.012em;


  font-weight:550;


  cursor:pointer;
}




.care-faq-item summary::-webkit-details-marker
{
  display:none;
}




.care-faq-item summary:hover,
.care-faq-item summary:focus-visible
{
  outline:none;
}




.care-faq-item summary:focus-visible
{
  box-shadow:
    inset
    0
    0
    0
    2px
    rgba(
      11,
      54,
      154,
      .16
    );
}




.care-faq-control
{
  position:relative;


  width:40px;
  height:40px;


  display:grid;


  place-items:center;


  justify-self:end;


  border-radius:999px;


  background:
    var(--surface);
}




.care-faq-control::before,
.care-faq-control::after
{
  content:"";


  position:absolute;


  left:50%;
  top:50%;


  width:14px;
  height:1px;


  background:
    var(--soft);


  transform:
    translate(
      -50%,
      -50%
    );


  transition:
    transform
    220ms
    var(--ease),
    opacity
    180ms
    ease;
}




.care-faq-control::after
{
  transform:
    translate(
      -50%,
      -50%
    )
    rotate(90deg);
}




.care-faq-item[open]
.care-faq-control::after
{
  opacity:0;


  transform:
    translate(
      -50%,
      -50%
    )
    rotate(0);
}




.care-faq-answer
{
  padding:
    0
    90px
    34px
    30px;
}




.care-faq-answer p
{
  max-width:720px;


  margin:0;


  color:
    var(--muted);


  font-size:15px;


  line-height:1.68;


  letter-spacing:-.008em;


  text-wrap:pretty;
}




/* =========================================================
   Quiet reveal
========================================================= */


.care-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 450ms ease,
    transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.care-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}




/* =========================================================
   Compact desktop / tablet
========================================================= */


@media (max-width:1060px)
{


  .care-plan-card-top
  {
    grid-template-columns:
      1fr;


    align-items:start;
  }




  .care-price
  {
    min-width:0;


    align-items:flex-start;


    text-align:left;
  }




  .care-plan-card-body
  {
    grid-template-columns:
      1fr;
  }




  .care-support-card
  {
    grid-template-columns:
      1fr;


    gap:34px;
  }




  .care-support-mark
  {
    min-height:180px;


    justify-content:flex-start;
  }




  .care-faq-grid
  {
    grid-template-columns:
      minmax(
        250px,
        330px
      )
      minmax(
        0,
        1fr
      );


    gap:
      clamp(
        42px,
        6vw,
        70px
      );
  }


}




/* =========================================================
   Tablet
========================================================= */


@media (max-width:820px)
{


  .care-faq-grid
  {
    grid-template-columns:
      1fr;
  }




  .care-faq-heading
  {
    position:static;
  }




  .care-faq-heading h2 br
  {
    display:none;
  }




  .care-faq-heading h2
  {
    max-width:720px;


    font-size:
      clamp(
        42px,
        8.6vw,
        56px
      );


    line-height:.96;
  }


}




/* =========================================================
   Mobile
========================================================= */


@media (max-width:700px)
{

  .care-plan-desktop-copy
  {
    display:none;
  }


  .care-plan-mobile-copy
  {
    display:inline;
  }


    .care-animation-controls
  {
    top:-96px;
    right:var(--gutter);
  }


  .care-benefits
  {
    margin-top:94px;
  }




  .care-hero
  {
    min-height:560px;


    padding:
      calc(
        var(--header-h)
        +
        100px
      )
      0
      112px;


    background-position:
      center,
      62%
      center;
  }




  .care-hero::after
  {
    bottom:-76px;


    width:145%;
    height:106px;
  }




  .care-lockup
  {
    margin-bottom:32px;


    font-size:24px;
  }




  .care-lockup img
  {
    width:32px;
    height:32px;
  }




  .care-hero h1
  {
    font-size:
      clamp(
        50px,
        13vw,
        68px
      );
  }




  .care-hero-toggle
  {
    width:36px;
    height:36px;


    margin-top:32px;
  }


  .care-hero-toggle img
  {
    width:14px;
    height:14px;
  }




  .care-section-heading h2,
  .care-plan-heading h2,
  .care-support-copy h2
  {
    font-size:
      clamp(
        38px,
        10.5vw,
        54px
      );
  }




  .care-benefit-card
  {
    flex-basis:
      min(
        82vw,
        360px
      );


    min-height:470px;
  }




  .care-benefit-visual
  {
    min-height:250px;
  }




  .care-benefit-visual--graphic
  {
    padding:24px;
  }




  .care-damage-graphic
  {
    width:
      min(
        100%,
        236px
      );


    min-height:240px;


    gap:18px;
  }




  .care-damage-step
  {
    grid-template-columns:
      32px
      minmax(
        0,
        1fr
      );


    gap:12px;
  }




  .care-damage-state
  {
    width:32px;
    height:32px;
  }




  .care-damage-loader,
  .care-damage-check,
  .care-damage-logo
  {
    width:32px;
    height:32px;
  }




  .care-damage-text
  {
    font-size:
      clamp(
        32px,
        8.5vw,
        42px
      );
  }




  .care-damage-step--covered
  {
    margin-top:12px;
  }




  .care-period-graphic
  {
    min-height:270px;
  }




  .care-period-number
  {
    min-height:108px;


    font-size:
      clamp(
        100px,
        29vw,
        132px
      );
  }




  .care-period-loader
  {
    width:
      min(
        100%,
        190px
      );


    gap:4px;


    margin-top:26px;
  }




  .care-service-graphic
  {
    width:
      min(
        100%,
        236px
      );


    min-height:240px;


    gap:20px;
  }




  .care-service-step
  {
    grid-template-columns:
      32px
      minmax(
        0,
        1fr
      );


    gap:12px;
  }




  .care-service-state
  {
    width:32px;
    height:32px;
  }




  .care-service-loader,
  .care-service-check
  {
    width:32px;
    height:32px;
  }




  .care-service-text
  {
    font-size:
      clamp(
        32px,
        8.5vw,
        42px
      );
  }




  .care-benefit-copy
  {
    padding:
      24px
      24px
      30px;
  }




  .care-carousel-bar
  {
    margin-top:16px;
  }




  .care-animation-toggle,
  .care-carousel-controls button
  {
    width:42px;
    height:42px;
  }




  .care-plan-card-top
  {
    min-height:0;


    padding:
      34px
      28px;
  }




  .care-plan-card-body
  {
    padding:
      30px
      28px
      34px;
  }




  .care-price strong
  {
    font-size:
      clamp(
        78px,
        24vw,
        110px
      );
  }




  .care-plan-actions
  {
    width:100%;
  }




  .care-plan-actions
  .care-primary-button
  {
    width:100%;
  }




  .care-support-card
  {
    padding:
      34px
      28px;
  }




  .care-support-mark
  {
    min-height:130px;


    font-size:38px;
  }




  .care-support-mark img
  {
    width:68px;
    height:68px;
  }




  .care-faq-item summary
  {
    min-height:88px;


    padding:
      0
      18px
      0
      20px;


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


    gap:16px;


    font-size:15px;
  }




  .care-faq-answer
  {
    padding:
      0
      20px
      28px;
  }


}






/* =========================================================
   Small mobile
========================================================= */


@media (max-width:480px)
{


  .care-hero
  {
    min-height:530px;


    padding:
      calc(
        var(--header-h)
        +
        88px
      )
      0
      104px;
  }




  .care-hero-reveal p
  {
    font-size:15.5px;
  }




  .care-primary-button--hero
  {
    width:100%;
  }




  .care-plan-card h3
  {
    font-size:30px;
  }




  .care-support-links
  {
    display:grid;
  }




  .care-faq-heading h2
  {
    font-size:
      clamp(
        38px,
        10.5vw,
        50px
      );
  }


}




/* =========================================================
   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;
  }


}