/* =========================================================
  REDOVAR — PRICING
  Developed by Cavendish Pierre-Louis
  https://cavendishpierrelouis.io
========================================================= */


/* =========================================================
  PAGE VARIABLES
========================================================= */

:root {
 --blue:
   #0B369A;

 --blue-hover:
   #092F86;
 
 --terra:
   #C34811;

 --terra-hover:
   #A93D0D;

 --black:
   #111111;

 --text:
   #171717;

 --muted:
   #6B6B68;

 --soft:
   #8B8B86;

 --surface:
   #F7F7F5;

 --surface-alt:
   #F2F2EF;

 --stone:
   #F2F2EF

 --white:
   #FFFFFF;

 --radius:
   4px;

 --max:
   1480px;

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

 --header-h:
   76px;

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


/* =========================================================
  RESET
========================================================= */

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


html {
 scroll-behavior:
   smooth;
}


body {
 margin:
   0;

 min-width:
   320px;

 overflow-x:
   hidden;

 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)
     +
     20px
   );
}


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


a {
 color:
   inherit;
}


button,
input,
select {
 font:
   inherit;
}


/* =========================================================
  SHARED SHELL
========================================================= */

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

 margin-inline:
   auto;

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


/* =========================================================
  GLOBAL SECTION TITLE SYSTEM
========================================================= */

main h2 {
 margin:
   0;

 color:
   var(--text);

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

 line-height:
   .96;

 letter-spacing:
   -.055em;

 font-weight:
   500;
}


/* =========================================================
  QUIET REVEALS
========================================================= */

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

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


/* =========================================================
  HERO
========================================================= */

.pricing-hero {
 position:
   relative;

 min-height:
   clamp(
     520px,
     48vw,
     620px
   );

 overflow:
   hidden;

 isolation:
   isolate;

 background:
   var(--black);

 color:
   #F5F5F3;
}


.pricing-hero h1 span {
 display:
   block;

 white-space:
   nowrap;
}


/* =========================================================
  HERO MEDIA
========================================================= */

.pricing-hero-media {
 position:
   absolute;

 z-index:
   -3;

 inset:
   0;

 overflow:
   hidden;

 background:
   var(--black);
}


.pricing-hero-media img {
 width:
   100%;

 height:
   100%;

 display:
   block;

 object-fit:
   cover;

 object-position:
   center
   50%;

 transform:
   scale(
     1.018
   );

 transition:
   transform
   1800ms
   var(--pricing-ease);
}


.pricing-hero.is-ready
.pricing-hero-media img {
 transform:
   scale(
     1.001
   );
}


/* =========================================================
  HERO OVERLAY
========================================================= */

.pricing-hero-overlay {
 position:
   absolute;

 z-index:
   -2;

 inset:
   0;

 pointer-events:
   none;

}


/* =========================================================
  HERO CONTENT
========================================================= */

.pricing-hero-content {
 position:
   relative;

 z-index:
   2;

 min-height:
   clamp(
     520px,
     48vw,
     620px
   );

 padding-top:
   calc(
     var(--header-h)
     +
     40px
   );

 padding-bottom:
   56px;

 display:
   flex;

 align-items:
   center;

 justify-content:
   center;

 text-align:
   center;
}


.pricing-hero-copy {
 width:
   min(
     100%,
     1040px
   );

 margin-inline:
   auto;

 display:
   flex;

 flex-direction:
   column;

 align-items:
   center;

 justify-content:
   center;
}


/* =========================================================
  HERO TITLE
========================================================= */

.pricing-hero h1 {
 display:
   block;

 visibility:
   visible;

 opacity:
   1;

 margin:
   0
   auto;

 max-width:
   1040px;

 color:
   #6B6B68;;

 font-size:
   clamp(
     60px,
     6.3vw,
     96px
   );

 line-height:
   .92;

 letter-spacing:
   -.064em;

 font-weight:
   500;

 text-align:
   center;

 transform:
   none;
}


/* =========================================================
  HERO COPY
========================================================= */

.pricing-hero-copy > p {
 visibility:
   visible;

 opacity:
   1;

 margin:
   28px
   auto
   0;

 max-width:
   650px;

 color:
   rgba(
     245,
     245,
     243,
     .72
   );

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

 line-height:
   1.66;

 text-align:
   center;

 transform:
   none;
}


/* =========================================================
  PLANS
========================================================= */

.plans-section {
 --pricing-card-1-x:
   -18px;

 --pricing-card-2-x:
   -7px;

 --pricing-card-3-x:
   7px;

 --pricing-card-4-x:
   18px;

 padding:
   clamp(
     124px,
     11vw,
     188px
   )
   0;

 background:
   #FFFFFF;
}


/* =========================================================
  PLAN HEAD
========================================================= */

.section-heading {
 max-width:
   860px;

 margin-bottom:
   clamp(
     58px,
     6vw,
     86px
   );
}


.section-heading h2 {
 max-width:
   760px;
}


.section-heading p {
 margin:
   22px
   0
   0;

 max-width:
   620px;

 color:
   var(--muted);

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

 line-height:
   1.68;
}

.pricing-devices-mobile-break {
  display: none;
}


/* =========================================================
  PRICING CARDS
========================================================= */

.pricing-cards {
 display:
   grid;

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

 gap:
   10px;

 align-items:
   stretch;
}


/* =========================================================
  CARD
========================================================= */

.pricing-card {
 --pricing-card-x:
   0px;

 --pricing-card-y:
   0px;

 min-height:
   410px;

 padding:
   clamp(
     28px,
     2.7vw,
     36px
   );

 display:
   flex;

 flex-direction:
   column;

 justify-content:
   space-between;

 gap:
   64px;

 overflow:
   hidden;

 border:
   0;

 border-radius:
   var(--radius);

 background:
   var(--surface);

 transform:
   translate3d(
     var(--pricing-card-x),
     var(--pricing-card-y),
     0
   );

 backface-visibility:
   hidden;

 will-change:
   transform;

 transition:
   transform
   90ms
   linear,
   background-color
   220ms
   ease;
}


.pricing-card:nth-child(1) {
 --pricing-card-x:
   var(--pricing-card-1-x);
}


.pricing-card:nth-child(2) {
 --pricing-card-x:
   var(--pricing-card-2-x);
}


.pricing-card:nth-child(3) {
 --pricing-card-x:
   var(--pricing-card-3-x);
}


.pricing-card:nth-child(4) {
 --pricing-card-x:
   var(--pricing-card-4-x);
}


.pricing-card:hover {
 --pricing-card-y:
   -3px;

 background:
   #F2F2EF;
}


/* =========================================================
  ENTERPRISE CARD
========================================================= */

.pricing-card--enterprise {
 background:
   var(--blue);

 color:
   #FFFFFF;
}


.pricing-card--enterprise:hover {
 background:
   var(--blue);
}


/* =========================================================
  CARD TOP
========================================================= */

.pricing-card-top {
 display:
   grid;

 align-content:
   start;
}


.pricing-card h3 {
 margin:
   0;

 color:
   var(--text);

 font-size:
   clamp(
     24px,
     2.1vw,
     31px
   );

 line-height:
   1;

 letter-spacing:
   -.04em;

 font-weight:
   500;
}


.pricing-card--enterprise h3 {
 color:
   #FFFFFF;
}


/* =========================================================
  CARD PRICE
========================================================= */

.pricing-card-price {
 margin-top:
   52px;

 display:
   grid;

 gap:
   8px;
}


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

 font-size:
   clamp(
     39px,
     3.2vw,
     50px
   );

 line-height:
   .94;

 letter-spacing:
   -.055em;

 font-weight:
   500;

 font-variant-numeric:
   tabular-nums;
}


.pricing-card-price span {
 color:
   var(--muted);

 font-size:
   11px;

 line-height:
   1.2;
}


.pricing-card--enterprise
.pricing-card-price strong {
 color:
   #FFFFFF;
}


.pricing-card--enterprise
.pricing-card-price span {
 color:
   rgba(
     255,
     255,
     255,
     .60
   );
}


/* =========================================================
  ACTIVE RANGE
========================================================= */

.pricing-card-range {
 margin:
   28px
   0
   0;

 color:
   var(--muted);

 font-size:
   12px;

 line-height:
   1.5;
}


.pricing-card--enterprise
.pricing-card-range {
 color:
   rgba(
     255,
     255,
     255,
     .68
   );
}


/* =========================================================
  CARD BOTTOM
========================================================= */

.pricing-card-bottom {
 display:
   grid;

 gap:
   18px;
}


/* =========================================================
  CARD ACTION
========================================================= */

.pricing-card-action {
 min-height:
   46px;

 width:
   100%;

 padding:
   0
   18px;

 display:
   inline-flex;

 align-items:
   center;

 justify-content:
   center;

 border:
   0;

 border-radius:
   var(--radius);

 background:
   #FFFFFF;

 color:
   var(--text);

 font-size:
   12px;

 line-height:
   1;

 font-weight:
   600;

 text-decoration:
   none;

 transition:
   background-color
   180ms
   ease,
   color
   180ms
   ease,
   transform
   180ms
   var(--pricing-ease);
}


.pricing-card-action:hover,
.pricing-card-action:focus-visible {
 background:
   #ECECE8;

 transform:
   translateY(
     -2px
   );
}


.pricing-card--enterprise
.pricing-card-action {
 background:
   #FFFFFF;

 color:
   var(--blue);
}


.pricing-card--enterprise
.pricing-card-action:hover,
.pricing-card--enterprise
.pricing-card-action:focus-visible {
 background:
   #F2F4FA;

 color:
   var(--blue);
}


/* =========================================================
  FIRST YEAR
========================================================= */

.first-year-section {
 padding:
   clamp(
     124px,
     11vw,
     188px
   )
   0;

 background:
   var(--surface);
}


/* =========================================================
  FIRST YEAR GRID
========================================================= */

.first-year-layout {
 display:
   grid;

 grid-template-columns:
   minmax(
     320px,
     .72fr
   )
   minmax(
     520px,
     1.28fr
   );

 gap:
   clamp(
     84px,
     10vw,
     170px
   );

 align-items:
   start;
}


/* =========================================================
  FIRST YEAR STICKY COPY
========================================================= */

.first-year-copy {
 position:
   sticky;

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

 align-self:
   start;
}


.first-year-copy h2 {
 max-width:
   580px;
}


.first-year-copy p {
 margin:
   22px
   0
   0;

 max-width:
   430px;

 color:
   var(--muted);

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

 line-height:
   1.68;
}


/* =========================================================
  CALCULATOR

  BREAKDOWN MOTION:

  LEFT:
  -10px → 0px

  RIGHT:
  +10px → 0px
========================================================= */

.pricing-calculator {
 --calculator-breakdown-left-x:
   -10px;

 --calculator-breakdown-right-x:
   10px;

 min-width:
   0;

 padding:
   clamp(
     36px,
     4vw,
     54px
   );

 border-radius:
   var(--radius);

 background:
   #FFFFFF;
}


/* =========================================================
  CALCULATOR HEADER
========================================================= */

.calculator-header {
 display:
   flex;

 flex-direction:
   column;

 align-items:
   center;

 justify-content:
   center;

 gap:
   16px;

 text-align:
   center;
}


.calculator-label {
 color:
   var(--muted);

 font-size:
   12px;

 line-height:
   1.2;

 font-weight:
   500;
}


/* =========================================================
  QUANTITY CONTROL
========================================================= */

.calculator-input-wrap {
 width:
   156px;

 min-height:
   62px;
}


.pricing-quantity-select,
.pricing-quantity-custom {
 width:
   100%;

 height:
   62px;

 padding:
   0
   14px;

 border:
   0;

 border-radius:
   var(--radius);

 outline:
   0;

 background:
   var(--surface);

 color:
   var(--text);

 font-size:
   30px;

 line-height:
   1;

 letter-spacing:
   -.045em;

 font-weight:
   500;

 text-align:
   center;

 font-variant-numeric:
   tabular-nums;

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


.pricing-quantity-select {
 appearance:
   none;

 -webkit-appearance:
   none;

 cursor:
   pointer;

 padding-right:
   42px;

 padding-left:
   30px;

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

 background-repeat:
   no-repeat;

 background-position:
   right
   16px
   center;

 background-size:
   11px
   11px;
}


.pricing-quantity-select:hover,
.pricing-quantity-custom:hover {
 background-color:
   #EFEFEC;
}


.pricing-quantity-select:focus-visible,
.pricing-quantity-custom:focus-visible {
 box-shadow:
   0
   0
   0
   2px
   rgba(
     11,
     54,
     154,
     .12
   );
}


.pricing-quantity-custom {
 appearance:
   textfield;

 -moz-appearance:
   textfield;
}


/* =========================================================
  PRIMARY TOTAL
========================================================= */

.calculator-total {
 margin-top:
   clamp(
     44px,
     5vw,
     66px
   );

 display:
   grid;

 justify-items:
   center;

 gap:
   12px;

 text-align:
   center;
}


.calculator-total > span {
 color:
   var(--muted);

 font-size:
   12px;

 line-height:
   1;
}


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

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

 line-height:
   .9;

 letter-spacing:
   -.064em;

 font-weight:
   500;

 font-variant-numeric:
   tabular-nums;
}


/* =========================================================
  CALCULATOR BREAKDOWN
========================================================= */

.calculator-breakdown {
 margin-top:
   clamp(
     48px,
     5vw,
     68px
   );

 display:
   grid;

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

 gap:
   10px;
}


/* =========================================================
  CALCULATOR BREAKDOWN ITEM
========================================================= */

.calculator-breakdown-item {
 --calculator-breakdown-x:
   0px;

 min-width:
   0;

 min-height:
   156px;

 padding:
   clamp(
     22px,
     2.6vw,
     30px
   );

 display:
   flex;

 flex-direction:
   column;

 align-items:
   center;

 justify-content:
   space-between;

 gap:
   30px;

 border:
   0;

 border-radius:
   var(--radius);

 background:
   var(--surface);

 text-align:
   center;

 transform:
   translate3d(
     var(--calculator-breakdown-x),
     0,
     0
   );

 backface-visibility:
   hidden;

 will-change:
   transform;

 transition:
   transform
   90ms
   linear,
   background-color
   180ms
   ease;
}


.calculator-breakdown-item:nth-child(1) {
 --calculator-breakdown-x:
   var(--calculator-breakdown-left-x);
}


.calculator-breakdown-item:nth-child(2) {
 --calculator-breakdown-x:
   var(--calculator-breakdown-right-x);
}


.calculator-breakdown-item > div {
 display:
   grid;

 justify-items:
   center;

 gap:
   6px;
}


.calculator-breakdown-item
strong {
 color:
   var(--text);

 font-size:
   14px;

 line-height:
   1.25;

 font-weight:
   550;
}


.calculator-breakdown-item
small {
 color:
   var(--muted);

 font-size:
   10px;

 line-height:
   1.45;
}


.calculator-breakdown-item
> span {
 color:
   var(--text);

 font-size:
   clamp(
     22px,
     2vw,
     29px
   );

 line-height:
   1;

 letter-spacing:
   -.04em;

 font-weight:
   500;

 font-variant-numeric:
   tabular-nums;
}


/* =========================================================
  FOLLOWING YEARS
========================================================= */

.calculator-following {
 margin-top:
   clamp(
     42px,
     4.5vw,
     60px
   );

 display:
   flex;

 align-items:
   center;

 justify-content:
   center;

 gap:
   14px;

 text-align:
   center;
}


.calculator-following > span {
 color:
   var(--muted);

 font-size:
   12px;

 line-height:
   1.4;
}


.calculator-following > strong {
 color:
   var(--text);

 font-size:
   18px;

 line-height:
   1.2;

 letter-spacing:
   -.025em;

 font-weight:
   550;

 text-align:
   center;

 font-variant-numeric:
   tabular-nums;
}


/* =========================================================
  ENTERPRISE CALCULATOR MESSAGE
========================================================= */

.enterprise-calculator-message {
 width:
   min(
     100%,
     520px
   );

 margin:
   34px
   auto
   0;

 padding:
   24px;

 border-radius:
   var(--radius);

 background:
   var(--surface);

 text-align:
   center;
}


.enterprise-calculator-message[hidden] {
 display:
   none;
}


.enterprise-calculator-message strong {
 color:
   var(--text);

 font-size:
   14px;

 font-weight:
   550;
}


.enterprise-calculator-message p {
 margin:
   8px
   auto
   0;

 max-width:
   430px;

 color:
   var(--muted);

 font-size:
   11px;

 line-height:
   1.55;
}


/* =========================================================
  CALCULATOR ACTION
========================================================= */

.calculator-action-wrap {
 margin-top:
   38px;

 display:
   flex;

 align-items:
   center;

 justify-content:
   center;
}


.calculator-action {
 min-height:
   46px;

 padding:
   0
   22px;

 display:
   inline-flex;

 align-items:
   center;

 justify-content:
   center;

 border-radius:
   var(--radius);

 background:
   var(--blue);

 color:
   #FFFFFF;

 font-size:
   12px;

 line-height:
   1;

 font-weight:
   600;

 text-decoration:
   none;

 transition:
   background-color
   180ms
   ease,
   transform
   180ms
   var(--pricing-ease);
}


.calculator-action:hover,
.calculator-action:focus-visible {
 background:
   var(--blue-hover);
}


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


/* =========================================================
  OWNERSHIP
========================================================= */

.pricing-ownership {
 padding:
   clamp(
     124px,
     11vw,
     188px
   )
   0;

 background:
   #FFFFFF;
}


/* =========================================================
  OWNERSHIP PANEL

  TOP ROW:
  -10px → 0px

  BOTTOM ROW:
  +10px → 0px

  Scroll back upward and the movement reverses.
========================================================= */

.pricing-ownership-panel {
 --ownership-top-y:
   -10px;

 --ownership-bottom-y:
   10px;

 padding:
   clamp(
     46px,
     6vw,
     82px
   );

 display:
   grid;

 grid-template-columns:
   minmax(
     400px,
     1fr
   )
   minmax(
     440px,
     .92fr
   );

 gap:
   clamp(
     72px,
     9vw,
     150px
   );

 align-items:
   center;

 border-radius:
   var(--radius);

 background:
   #F2F2EF;
}


/* =========================================================
  OWNERSHIP COPY
========================================================= */

.pricing-ownership-copy h2 {
 max-width:
   760px;
}


.pricing-ownership-copy p {
 margin:
   22px
   0
   0;

 max-width:
   540px;

 color:
   var(--muted);

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

 line-height:
   1.68;
}


/* =========================================================
  OWNERSHIP ACTION
========================================================= */

.pricing-ownership-action {
 min-height:
   46px;

 margin-top:
   34px;

 padding:
   0
   18px;

 display:
   inline-flex;

 align-items:
   center;

 justify-content:
   center;

 border-radius:
   var(--radius);

 background:
   var(--terra);

 color:
   #FFFFFF;

 font-size:
   12px;

 line-height:
   1;

 font-weight:
   600;

 text-decoration:
   none;

 transition:
   background-color
   180ms
   ease,
   transform
   180ms
   var(--pricing-ease);
}


.pricing-ownership-action:hover,
.pricing-ownership-action:focus-visible {
 background:
   var(--terra-hover);
}


.pricing-ownership-action:active {
 transform:
   translateY(
     1px
   );
}


/* =========================================================
  OWNERSHIP FACTS
========================================================= */

.pricing-ownership-facts {
 display:
   grid;

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

 gap:
   10px;
}


/* =========================================================
  OWNERSHIP FACT
========================================================= */

.pricing-ownership-fact {
 --ownership-motion-y:
   0px;

 --ownership-hover-y:
   0px;

 min-height:
   168px;

 padding:
   clamp(
     24px,
     2.8vw,
     32px
   );

 display:
   flex;

 flex-direction:
   column;

 align-items:
   flex-start;

 justify-content:
   space-between;

 gap:
   28px;

 border:
   0;

 border-radius:
   var(--radius);

 background:
   #FFFFFF;

 transform:
   translate3d(
     0,
     calc(
       var(--ownership-motion-y)
       +
       var(--ownership-hover-y)
     ),
     0
   );

 backface-visibility:
   hidden;

 will-change:
   transform;

 transition:
   transform
   90ms
   linear,
   background-color
   220ms
   ease;
}


.pricing-ownership-fact:nth-child(1),
.pricing-ownership-fact:nth-child(2) {
 --ownership-motion-y:
   var(--ownership-top-y);
}


.pricing-ownership-fact:nth-child(3),
.pricing-ownership-fact:nth-child(4) {
 --ownership-motion-y:
   var(--ownership-bottom-y);
}


.pricing-ownership-fact:hover {
 --ownership-hover-y:
   -2px;

 background:
   #FDFDFC;
}


.pricing-ownership-fact strong {
 color:
   var(--text);

 font-size:
   clamp(
     22px,
     1.9vw,
     30px
   );

 line-height:
   1;

 letter-spacing:
   -.04em;

 font-weight:
   500;

 white-space:
   nowrap;
}


.pricing-ownership-fact span {
 color:
   var(--muted);

 font-size:
   11px;

 line-height:
   1.4;
}


/* =========================================================
  BILLING STORY
========================================================= */

.billing-story-section {
 padding:
   clamp(
     124px,
     11vw,
     188px
   )
   0;

 overflow:
   hidden;

 background:
   var(--surface);
}


/* =========================================================
  BILLING HEAD
========================================================= */

.billing-story-head {
 margin-bottom:
   clamp(
     72px,
     8vw,
     116px
   );
}


.billing-story-head h2 {
 width:
   100%;

 max-width:
   780px;

 margin-inline:
   auto;

 text-align:
   center;
}


/* =========================================================
  BILLING GRID
========================================================= */

.billing-story-grid {
 display:
   grid;

 grid-template-columns:
   minmax(
     360px,
     .76fr
   )
   minmax(
     520px,
     1.24fr
   );

 gap:
   clamp(
     76px,
     9vw,
     150px
   );

 align-items:
   center;
}


/* =========================================================
  BILLING STORY LIST
========================================================= */

.billing-story-list {
 display:
   grid;

 align-self:
   center;
}


/* =========================================================
  BILLING STORY ITEM
========================================================= */

.billing-story-item {
 position:
   relative;

 min-height:
   126px;

 padding:
   0
   0
   0
   38px;

 display:
   flex;

 align-items:
   center;

 border:
   0;

 outline:
   0;

 background:
   transparent;

 color:
   #A4A4A0;

 text-align:
   left;

 cursor:
   pointer;

 transition:
   color
   220ms
   ease;
}


.billing-story-item:hover,
.billing-story-item:focus-visible {
 color:
   #696965;
}


.billing-story-item.is-complete {
 color:
   #747470;
}


.billing-story-item.is-active {
 color:
   var(--text);
}


/* =========================================================
  BILLING STORY COPY
========================================================= */

.billing-story-copy {
 min-width:
   0;

 display:
   grid;

 gap:
   0;
}


.billing-story-item
.billing-story-copy
> strong {
 color:
   inherit;

 font-size:
   clamp(
     27px,
     3vw,
     42px
   );

 line-height:
   1;

 letter-spacing:
   -.046em;

 font-weight:
   500;
}


/* =========================================================
  BILLING DESCRIPTION
========================================================= */

.billing-story-description {
 max-width:
   470px;

 max-height:
   0;

 margin-top:
   0;

 overflow:
   hidden;

 opacity:
   0;

 color:
   var(--muted);

 font-size:
   13px;

 line-height:
   1.6;

 transform:
   translateY(
     -4px
   );

 transition:
   max-height
   480ms
   var(--pricing-ease),
   margin-top
   420ms
   var(--pricing-ease),
   opacity
   220ms
   ease,
   transform
   480ms
   var(--pricing-ease);
}


.billing-story-item.is-active
.billing-story-description {
 max-height:
   90px;

 margin-top:
   13px;

 opacity:
   1;

 transform:
   none;
}


/* =========================================================
  BROKEN VERTICAL STATUS RAIL
========================================================= */

.billing-story-rail {
 position:
   absolute;

 top:
   0;

 bottom:
   0;

 left:
   0;

 width:
   4px;

 display:
   flex;

 flex-direction:
   column;

 align-items:
   center;

 justify-content:
   space-around;

 pointer-events:
   none;
}


.billing-story-rail
.status-dash {
 width:
   3px;

 height:
   7px;

 flex:
   0
   0
   7px;

 display:
   block;

 border-radius:
   999px;

 background:
   #D3D3CE;

 opacity:
   .9;

 transition:
   background-color
   110ms
   linear,
   opacity
   110ms
   linear;
}


.billing-story-rail
.status-dash.is-on {
 background:
   var(--terra);

 opacity:
   1;
}


/* =========================================================
  BILLING VISUAL
========================================================= */

.billing-story-visual {
 position:
   relative;

 width:
   100%;

 min-height:
   clamp(
     520px,
     52vw,
     760px
   );

 display:
   grid;

 place-items:
   center;

 overflow:
   hidden;
}


/* =========================================================
  BILLING IMAGE
========================================================= */

.billing-story-image {
 position:
   absolute;

 inset:
   0;

 width:
   min(
     100%,
     850px
   );

 height:
   100%;

 max-height:
   760px;

 margin:
   auto;

 display:
   grid;

 place-items:
   center;

 opacity:
   0;

 visibility:
   hidden;

 pointer-events:
   none;

 user-select:
   none;

 transform:
   translate3d(
     0,
     10px,
     0
   )
   scale(
     .992
   );

 transform-origin:
   center;

 transition:
   opacity
   520ms
   ease,
   visibility
   520ms
   ease,
   transform
   720ms
   var(--pricing-ease);

 will-change:
   opacity,
   transform;
}


.billing-story-image.is-active {
 z-index:
   2;

 opacity:
   1;

 visibility:
   visible;

 transform:
   translate3d(
     0,
     0,
     0
   )
   scale(
     1
   );
}


.billing-story-image:not(.is-active) {
 z-index:
   1;
}


.billing-story-image img {
 width:
   100%;

 height:
   100%;

 display:
   block;

 object-fit:
   contain;

 object-position:
   center;

 user-select:
   none;

 -webkit-user-drag:
   none;
}


/* =========================================================
  FINAL
========================================================= */

.pricing-final {
 padding:
   clamp(
     132px,
     12vw,
     202px
   )
   0;

 background:
   var(--blue);

 color:
   #FFFFFF;
}


/* =========================================================
  FINAL INNER
========================================================= */

.pricing-final-inner {
 display:
   flex;

 align-items:
   flex-end;

 justify-content:
   space-between;

 gap:
   60px;
}


.pricing-final h2 {
 max-width:
   780px;

 color:
   #FFFFFF;
}


.pricing-final h2 span {
 display:
   block;
}


/* =========================================================
  FINAL ACTIONS
========================================================= */

.pricing-final-actions {
 display:
   flex;

 align-items:
   center;

 gap:
   10px;

 flex-shrink:
   0;
}


.pricing-final-actions a {
 min-height:
   46px;

 padding:
   0
   18px;

 display:
   inline-flex;

 align-items:
   center;

 justify-content:
   center;

 border-radius:
   var(--radius);

 font-size:
   12px;

 line-height:
   1;

 font-weight:
   600;

 text-decoration:
   none;

 transition:
   background-color
   180ms
   ease,
   color
   180ms
   ease,
   border-color
   180ms
   ease,
   transform
   180ms
   var(--pricing-ease);
}


.pricing-final-actions a:active {
 transform:
   translateY(
     1px
   );
}


.pricing-final-primary {
 background:
   #FFFFFF;

 color:
   var(--blue);
}


.pricing-final-primary:hover,
.pricing-final-primary:focus-visible {
 background:
   #F2F4FA;
}


.pricing-final-secondary {
 border:
   1px
   solid
   rgba(
     255,
     255,
     255,
     .40
   );

 background:
   transparent;

 color:
   #FFFFFF;
}


.pricing-final-secondary:hover,
.pricing-final-secondary:focus-visible {
 border-color:
   rgba(
     255,
     255,
     255,
     .78
   );

 background:
   rgba(
     255,
     255,
     255,
     .06
   );
}


/* =========================================================
  FOCUS
========================================================= */

.pricing-card-action:focus-visible,
.calculator-action:focus-visible,
.pricing-ownership-action:focus-visible,
.pricing-final-actions a:focus-visible,
.billing-story-item:focus-visible {
 outline:
   2px
   solid
   rgba(
     11,
     54,
     154,
     .24
   );

 outline-offset:
   3px;
}


.pricing-final-actions a:focus-visible,
.pricing-card--enterprise
.pricing-card-action:focus-visible {
 outline-color:
   rgba(
     255,
     255,
     255,
     .55
   );
}


/* =========================================================
  RESPONSIVE — 1080
========================================================= */

@media (max-width: 1080px) {

 .plans-section {
   --pricing-card-1-x:
     0px;

   --pricing-card-2-x:
     0px;

   --pricing-card-3-x:
     0px;

   --pricing-card-4-x:
     0px;
 }


 .pricing-cards {
   grid-template-columns:
     repeat(
       2,
       minmax(
         0,
         1fr
       )
     );
 }


 .pricing-card {
   min-height:
     370px;
 }


 .pricing-ownership-panel {
   grid-template-columns:
     minmax(
       340px,
       .9fr
     )
     minmax(
       390px,
       1.1fr
     );

   gap:
     60px;
 }


 .billing-story-grid {
   grid-template-columns:
     minmax(
       320px,
       .86fr
     )
     minmax(
       420px,
       1.14fr
     );

   gap:
     70px;
 }


 .billing-story-visual {
   min-height:
     560px;
 }

}


/* =========================================================
  RESPONSIVE — 900
========================================================= */

@media (max-width: 900px) {

 .pricing-ownership-panel,
 .billing-story-grid {
   grid-template-columns:
     1fr;
 }


 .pricing-ownership-panel {
   gap:
     58px;
 }


 .pricing-ownership-facts {
   max-width:
     720px;
 }


 .billing-story-grid {
   gap:
     54px;
 }


 .billing-story-visual {
   min-height:
     520px;
 }

}


/* =========================================================
  RESPONSIVE — 760
========================================================= */

@media (max-width: 760px) {

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


 /* =======================================================
   HERO
 ======================================================== */

 .pricing-hero,
 .pricing-hero-content {
   min-height:
     560px;
 }


 .pricing-hero-content {
   padding-top:
     calc(
       var(--header-h)
       +
       38px
     );

   padding-bottom:
     54px;
 }


 .pricing-hero h1 {
   font-size:
     clamp(
       50px,
       13.5vw,
       70px
     );
 }


 .pricing-hero-copy > p {
   max-width:
     480px;
 }


 .pricing-hero-media img {
   object-position:
     55%
     center;
 }


 /* =======================================================
   PLANS
 ======================================================== */

 .pricing-cards {
   grid-template-columns:
     1fr;
 }


 .pricing-card {
   min-height:
     340px;

   gap:
     54px;
 }


 /* =======================================================
   FIRST YEAR
 ======================================================== */

 .first-year-layout {
   grid-template-columns:
     1fr;

   gap:
     56px;
 }


 .first-year-copy {
   position:
     static;

   top:
     auto;
 }


 .calculator-total > strong {
   font-size:
     clamp(
       52px,
       13vw,
       72px
     );
 }


 /* =======================================================
   OWNERSHIP MOTION OFF
 ======================================================== */

 .pricing-ownership-panel {
   --ownership-top-y:
     0px;

   --ownership-bottom-y:
     0px;

   padding:
     42px
     32px;
 }


 .pricing-ownership-facts {
   gap:
     10px;
 }


 .pricing-ownership-fact {
   min-height:
     148px;
 }


 /* =======================================================
   BILLING
 ======================================================== */

 .billing-story-item {
   min-height:
     112px;
 }


 .billing-story-item
 .billing-story-copy
 > strong {
   font-size:
     clamp(
       24px,
       7vw,
       32px
     );
 }


 .billing-story-visual {
   min-height:
     430px;
 }


 .billing-story-image {
   max-height:
     430px;
 }


 /* =======================================================
   FINAL
 ======================================================== */

 .pricing-final-inner {
   align-items:
     flex-start;

   flex-direction:
     column;

   gap:
     44px;
 }

}


/* =========================================================
  RESPONSIVE — 520
========================================================= */

@media (max-width: 520px) {

 .pricing-devices-mobile-break {
   display: inline;
 }

 .pricing-devices-desktop-break {
   display: none;
 }

 .pricing-devices-copy {
   white-space: nowrap;
   font-size: 14px;
   letter-spacing: -.012em;
 }

 /* =======================================================
   HERO
 ======================================================== */

 .pricing-hero,
 .pricing-hero-content {
   min-height:
     520px;
 }


 .pricing-hero h1 {
   font-size:
     clamp(
       46px,
       13vw,
       60px
     );
 }


 /* =======================================================
   CARDS
 ======================================================== */

 .pricing-card {
   min-height:
     320px;

   padding:
     26px;
 }


 /* =======================================================
   CALCULATOR
 ======================================================== */

 .pricing-calculator {
   --calculator-breakdown-left-x:
     0px;

   --calculator-breakdown-right-x:
     0px;

   padding:
     30px
     24px;
 }


 .calculator-header {
   align-items:
     center;

   justify-content:
     center;

   text-align:
     center;
 }


 .calculator-input-wrap {
   width:
     150px;
 }


 .calculator-breakdown {
   grid-template-columns:
     1fr;

   gap:
     10px;
 }


 .calculator-breakdown-item {
   min-height:
     138px;
 }


 .calculator-following {
   flex-direction:
     column;

   gap:
     8px;
 }


 .calculator-following > strong {
   text-align:
     center;
 }


 .calculator-action-wrap {
   justify-content:
     center;
 }


 .calculator-action {
   width:
     max-content;
 }


 /* =======================================================
   OWNERSHIP
 ======================================================== */

 .pricing-ownership-panel {
   padding:
     34px
     26px;
 }


 .pricing-ownership-facts {
   grid-template-columns:
     1fr
     1fr;

   gap:
     8px;
 }


 .pricing-ownership-fact {
   min-height:
     132px;

   padding:
     20px;
 }


 .pricing-ownership-fact strong {
   font-size:
     26px;
 }


 /* =======================================================
   BILLING
 ======================================================== */

 .billing-story-item {
   min-height:
     104px;

   padding-left:
     32px;
 }


 .billing-story-description {
   font-size:
     12px;
 }


 .billing-story-visual {
   min-height:
     360px;
 }


 .billing-story-image {
   max-height:
     360px;
 }


 /* =======================================================
   FINAL
 ======================================================== */

 .pricing-final-actions {
   width:
     100%;

   align-items:
     stretch;

   flex-direction:
     column;
 }


 .pricing-final-actions a {
   width:
     100%;
 }

}


/* =========================================================
  REDUCED MOTION
========================================================= */

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

 html {
   scroll-behavior:
     auto;
 }


 .pricing-reveal {
   opacity:
     1;

   transform:
     none;

   transition:
     none;
 }


 .pricing-hero h1,
 .pricing-hero-copy > p {
   opacity:
     1;

   visibility:
     visible;

   transform:
     none;

   transition:
     none;
 }


 .pricing-hero-media img {
   transform:
     none;

   transition:
     none;
 }


 .plans-section {
   --pricing-card-1-x:
     0px;

   --pricing-card-2-x:
     0px;

   --pricing-card-3-x:
     0px;

   --pricing-card-4-x:
     0px;
 }


 .pricing-calculator {
   --calculator-breakdown-left-x:
     0px;

   --calculator-breakdown-right-x:
     0px;
 }


 .pricing-ownership-panel {
   --ownership-top-y:
     0px;

   --ownership-bottom-y:
     0px;
 }


 .pricing-card,
 .pricing-card-action,
 .calculator-breakdown-item,
 .pricing-ownership-action,
 .pricing-ownership-fact,
 .billing-story-image,
 .billing-story-description,
 .status-dash {
   transition:
     none !important;
 }


 .billing-story-image {
   transform:
     none;
 }

}