/* ==========================================================================
   RECONNECTED — /join
   --------------------------------------------------------------------------
   The approved reference (ROBERT DATA/reconnected-join-reference.html) is the
   source of truth for layout: every width, height, radius, gap and section
   position below is taken from it unchanged. What changes is the brand — the
   reference's cool greys and Inter become Reconnected's warm neutrals, its
   deep green and Schibsted Grotesk.

   Colour has one job. Deep green carries the page; a brighter accessible
   green is the button and every positive state; pale sage marks the chosen
   plan; burgundy appears only on discounted prices and the few places that
   earn emphasis. Nothing is conveyed by colour alone — the chosen plan also
   carries a filled radio, and every meter has a word above it.

   Self-contained on purpose: /join is usually the first page of the visit,
   so it ships as one stylesheet rather than pulling in the member environment.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Tokens — the reference's roles, in Reconnected's colours
   -------------------------------------------------------------------------- */
:root{
  --ink:#1C1518;          /* dark charcoal headings */
  --muted:#4E4448;        /* muted warm grey body copy */
  --muted-2:#6C6165;      /* the smaller of the two greys */
  --line:#E7DCD5;
  --line-2:#D5C7BE;

  --paper:#FFFFFF;        /* cards */
  --page:#F7F1EC;         /* warm off-white ground */
  --sand:#EFE5DA;         /* warm beige secondary surface */
  --stone:#E4DACF;        /* warm stone */

  --green:#2E3D2A;        /* the existing Reconnected deep green */
  --green-bright:#4A6B3E; /* the accessible CTA green — 6.1:1 on white */
  --green-bright-h:#557A47;
  --sage:#E3EDD7;         /* pale sage — the offer ticket */
  --sage-pale:#F2F7EC;    /* pale sage — the selected plan */
  --sage-line:#8CA875;
  --sage-mid:#7C9C66;

  --burgundy:#9B3552;
  --burgundy-soft:#F8E9EC;

  --sans:'Schibsted Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  --radius:22px;
  --shadow:0 12px 34px rgba(46,61,42,.075);
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

button,input{font:inherit}
button{cursor:pointer; color:inherit}
img{display:block; max-width:100%}
h1,h2,h3{font-weight:800}

:focus-visible{outline:3px solid var(--green-bright); outline-offset:3px; border-radius:8px}

/* --------------------------------------------------------------------------
   2 · Slim header — wordmark, the reserved discount, one button. No nav.
   -------------------------------------------------------------------------- */
.topbar{
  position:sticky;
  z-index:20;
  top:0;
  min-height:58px;
  background:rgba(251,247,243,.96);
  border-bottom:1px solid rgba(46,61,42,.08);
  backdrop-filter:blur(12px);
}

.topbar-inner{
  width:min(1160px, calc(100% - 32px));
  min-height:58px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:20px;
}

/* The real Reconnected wordmark: the four-bar mark and the name. */
.wordmark{
  margin-right:auto;
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--ink);
  font-size:18px;
  font-weight:800;
  letter-spacing:-.022em;
}

.mark{display:flex; flex-direction:column; gap:2.5px; width:19px; flex:none}
.mark i{display:block; height:2px; border-radius:2px; background:var(--line-2)}
.mark i:nth-child(1){width:38%}
.mark i:nth-child(2){width:58%}
.mark i:nth-child(3){width:78%}
.mark i:nth-child(4){width:100%; background:var(--burgundy)}

.header-offer{
  display:flex;
  align-items:center;
  gap:16px;
  color:var(--muted);
  font-size:14px;
  font-weight:700;
}

.timer{
  /* Tabular figures give the colon a full digit advance in this face, so the
     clock reads "09 : 52". Proportional digits, with the width reserved so the
     header does not twitch each second. */
  min-width:70px;
  display:inline-block;
  text-align:center;
  color:var(--green-bright);
  font-variant-numeric:normal;
  font-size:25px;
  font-weight:700;
  letter-spacing:.02em;
}

/* --------------------------------------------------------------------------
   3 · The button and its pulse — one ring, expanding and fading out
   -------------------------------------------------------------------------- */
.top-cta,
.main-cta{
  position:relative;
  border:0;
  background:var(--green-bright);
  color:#fff;
  font-weight:800;
  letter-spacing:.01em;
  transition:background .3s ease-in-out, transform .2s ease-out;
  isolation:isolate;
}

.top-cta::after,
.main-cta::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border-radius:inherit;
  border:2px solid rgba(74,107,62,.36);
  animation:button-pulse 1.5s ease-out infinite;
}

.top-cta:hover,
.main-cta:hover{background:var(--green-bright-h); transform:scale(1.012)}
.top-cta:active,
.main-cta:active{transform:scale(.98)}

.top-cta{width:240px; height:48px; border-radius:20px}

@keyframes button-pulse{
  0%{opacity:.55; transform:scale(1)}
  75%,100%{opacity:0; transform:scale(1.075,1.28)}
}

/* --------------------------------------------------------------------------
   4 · The narrow column. Deliberately narrow on desktop too.
   -------------------------------------------------------------------------- */
main{
  width:min(448px, calc(100% - 32px));
  margin:24px auto 64px;
}

/* --------------------------------------------------------------------------
   5 · Now / Your Goal
   -------------------------------------------------------------------------- */
.comparison{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:0 0 34px;
}

.state-card{
  overflow:hidden;
  background:var(--paper);
  border-radius:20px;
  box-shadow:var(--shadow);
}

.state-photo{
  position:relative;
  height:218px;
  overflow:hidden;
  background:var(--stone);
}

.state-photo img{width:100%; height:100%; object-fit:cover}

.state-label{
  position:absolute;
  inset:auto 0 0;
  padding:24px 12px 8px;
  color:#fff;
  background:linear-gradient(transparent, rgba(28,21,24,.66));
  text-align:center;
  font-size:20px;
  font-weight:800;
}

.state-card.goal .state-label{
  background:linear-gradient(transparent, rgba(38,58,32,.70));
}

.state-body{padding:17px 18px 19px}

.metric + .metric{margin-top:14px}
.metric strong{display:block; font-size:12px; line-height:1.25}
.metric span{color:var(--muted-2); font-size:12px}

.meter{height:5px; margin-top:8px; display:flex; gap:3px}
.meter i{flex:1; border-radius:999px; background:var(--stone)}
.meter.now i:first-child{background:var(--burgundy)}
.meter.goal i{background:var(--sage-mid)}
.meter.goal i:last-child{background:var(--stone)}

/* One continuous track with a fill and a thumb, not segments pretending to be
   one. Decorative: the words above it carry the meaning. */
.connection-slider{
  --fill:28%;
  --slider-color:var(--burgundy);
  position:relative;
  height:14px;
  margin-top:5px;
}

.connection-slider::before,
.connection-slider::after{
  content:"";
  position:absolute;
  left:0;
  top:5px;
  height:4px;
  border-radius:999px;
}

.connection-slider::before{width:100%; background:var(--stone)}
.connection-slider::after{width:var(--fill); background:var(--slider-color)}

.connection-slider span{
  position:absolute;
  z-index:1;
  left:var(--fill);
  top:1px;
  width:12px;
  height:12px;
  border:2px solid var(--paper);
  border-radius:50%;
  background:var(--slider-color);
  box-shadow:0 1px 3px rgba(28,21,24,.2);
  transform:translateX(-50%);
}

.connection-slider.goal{--fill:79%; --slider-color:var(--sage-mid)}

/* --------------------------------------------------------------------------
   6 · The 28-day headline
   -------------------------------------------------------------------------- */
.section-title{
  margin:0 auto 24px;
  text-align:center;
  font-size:clamp(28px, 6vw, 35px);
  line-height:1.08;
  letter-spacing:-.045em;
  text-wrap:balance;
}

.section-title .green{color:var(--green-bright)}

.subcopy{
  max-width:420px;
  margin:-10px auto 25px;
  color:var(--muted);
  text-align:center;
  font-size:15px;
}

/* --------------------------------------------------------------------------
   7 · The coupon — the reference component, in Reconnected's colours
   --------------------------------------------------------------------------
   One pale ticket with a semicircular cutout on each side, sitting at the
   height where the confirmation field begins. Geometry unchanged from
   reconnected-join-reference.html; only the palette is ours.
   -------------------------------------------------------------------------- */
.coupon{
  position:relative;
  margin:0 0 8px;
  padding:18px 13px 13px;
  background:var(--sage);
  border-radius:20px;
  box-shadow:0 8px 24px rgba(46,61,42,.06);
}

/* Painted in the page colour so they read as cut out of the ticket. */
.coupon::before,
.coupon::after{
  content:"";
  position:absolute;
  top:59px;              /* on the perforation, not a fraction of the height */
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--page);
  transform:translateY(-50%);
}
.coupon::before{left:-9px}
.coupon::after{right:-9px}

.coupon__top{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:0 0 13px;
  font-size:15px;
  font-weight:800;
  line-height:1.25;
  text-align:center;
  text-decoration:none;          /* never a link, never underlined */
}

/* The perforation runs the full width of the ticket, between the two notches. */
.coupon__divider{
  height:1px;
  margin:0 -13px 12px;
  border-top:1px dashed rgba(70,105,57,.35);
}

.tag-icon{
  width:24px;
  height:24px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:8px 11px 11px 8px;
  background:var(--green-bright);
  color:#fff;
  transform:rotate(45deg);
}
.tag-icon svg{width:11px; height:9px; transform:rotate(-45deg)}

/* The white field. It confirms the offer and nothing else — the countdown
   lives in the header, once, so there is only ever one clock to trust. */
.coupon__row{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:7px 14px;
  background:var(--paper);
  border:1.5px solid var(--sage-line);
  border-radius:13px;
}

.applied{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  font-size:12px;
  font-weight:800;
  letter-spacing:.035em;
  line-height:1.2;
  text-align:center;
}

.checkdot{
  width:16px;
  height:16px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--green-bright);
  color:#fff;
}
.checkdot svg{width:9px; height:7px}

/* --------------------------------------------------------------------------
   8 · The two focus pills
   -------------------------------------------------------------------------- */
.focus-pills{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:24px;
}

.focus-pill{
  min-height:52px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  background:rgba(255,255,255,.72);
  border-radius:12px;
}

.focus-pill .glyph{width:21px; height:21px; flex:none; color:var(--green-bright)}
.focus-pill .glyph svg{width:100%; height:100%; display:block}
.focus-pill small{display:block; color:var(--muted-2); font-size:10px}
.focus-pill strong{display:block; font-size:12px}

/* --------------------------------------------------------------------------
   9 · The three plans, stacked. Never columns.
   -------------------------------------------------------------------------- */
.plans{margin:0 0 23px; padding:0; border:0; min-width:0}

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.plan-card{
  position:relative;
  min-height:108px;
  margin:0 0 10px;
  display:grid;
  grid-template-columns:24px minmax(0,1fr) 94px;
  align-items:center;
  gap:12px;
  padding:12px 12px 12px 18px;
  background:var(--paper);
  border:2px solid transparent;
  border-radius:20px;
  box-shadow:0 2px 10px rgba(46,61,42,.025);
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.plan-card:hover{border-color:var(--sage-line); transform:translateY(-1px)}

/* The selected state is written twice on purpose: :has() keeps the choice
   visible when the script has not run, the class is what the script sets. */
.plan-card.selected,
.plan-card:has(input:checked){
  background:var(--sage-pale);
  border-color:var(--green-bright);
  box-shadow:0 8px 22px rgba(74,107,62,.12);
}

.plan-card:has(input:focus-visible){
  outline:3px solid var(--green-bright);
  outline-offset:3px;
}

/* The ribbon carries the same 2px green border as the card and the card drops
   its top corners when chosen, so the two meet as one shape with no seam. */
.plan-card.popular{margin-top:30px}

.plan-card.popular.selected,
.plan-card.popular:has(input:checked){
  border-top-left-radius:0;
  border-top-right-radius:0;
}

.popular-ribbon{
  position:absolute;
  top:-28px;
  right:-2px;
  left:-2px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:2px solid var(--green-bright);
  border-bottom:0;
  border-radius:18px 18px 0 0;
  background:var(--green-bright);
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.01em;
}
.popular-ribbon svg{width:11px; height:11px}

.radio-ui{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border:2px solid var(--line-2);
  border-radius:50%;
  background:var(--page);
  transition:.2s ease;
}

.selected .radio-ui,
.plan-card:has(input:checked) .radio-ui{border-color:var(--green-bright); background:#fff}
.selected .radio-ui::after,
.plan-card:has(input:checked) .radio-ui::after{
  content:"";
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--green-bright);
}

.plan-copy{min-width:0}
.plan-copy h3{margin:0 0 2px; font-size:16px; line-height:1.15; letter-spacing:-.01em}
.plan-copy .benefit{display:block; margin:0 0 7px; color:var(--muted-2); font-size:11px; line-height:1.25}

/* The comparison price and the saving sit together on a quiet line; the figure
   she actually pays goes underneath, at the size the eye lands on first. */
.price-line{display:grid; justify-items:start; gap:2px}
.price-meta{display:flex; align-items:center; gap:6px}

.old-price{color:var(--muted-2); font-size:11px; text-decoration:line-through}

.new-price{
  color:var(--burgundy);
  font-size:23px;
  font-weight:900;
  line-height:1;
  letter-spacing:-.035em;
}

.discount{
  padding:2px 6px;
  border-radius:999px;
  background:var(--sage-pale);
  color:var(--green-bright);
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
}

.daily-price{
  min-height:68px;
  padding:9px 6px 7px;
  display:grid;
  place-content:center;
  background:var(--sand);
  border-radius:13px;
  text-align:center;
}

.daily-price strong{display:block; font-size:25px; line-height:1; letter-spacing:-.045em}
.daily-price small{display:block; margin-top:3px; color:var(--muted-2); font-size:10px}

.compare-note{
  margin:-8px 0 20px;
  color:var(--muted-2);
  text-align:center;
  font-size:10px;
}

/* --------------------------------------------------------------------------
   10 · The main call to action and everything stated next to it
   -------------------------------------------------------------------------- */
.main-cta{
  width:100%;
  height:56px;
  border-radius:20px;
  font-size:17px;
}

.selected-summary{
  margin:9px 0 0;
  color:var(--muted);
  text-align:center;
  font-size:12px;
  font-weight:700;
}

.terms{
  margin:17px 0 12px;
  color:var(--muted-2);
  font-size:10px;
  line-height:1.45;
}

.terms a{color:inherit; text-decoration:underline}

.safe{
  width:max-content;
  margin:0 auto 9px;
  padding:5px 10px;
  display:flex;
  align-items:center;
  gap:5px;
  background:var(--paper);
  border-radius:9px;
  font-size:11px;
  font-weight:700;
}
.safe svg{width:14px; height:14px; flex:none; color:var(--green-bright)}

.payment-icons{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
}

/* Trust indicators, never buttons. The scheme marks keep their own
   proportions inside a plain white chip. */
.payment-icon{
  width:46px;
  height:30px;
  padding:5px;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:7px;
  box-shadow:0 1px 2px rgba(28,21,24,.035);
  pointer-events:none;
}

/* Every chip is the same box; the mark inside is sized so a wide wordmark and
   a pair of circles read as the same weight rather than the same width. The
   generator sets the one dimension that binds; the other follows the mark's
   own ratio. */
.payment-icon img{
  display:block;
  max-width:36px;
  max-height:18px;
  object-fit:contain;
}

/* --------------------------------------------------------------------------
   11 · The sections below the fold
   -------------------------------------------------------------------------- */
.section{padding:58px 0 0}

.section h2{
  margin:0 0 22px;
  text-align:center;
  font-size:30px;
  line-height:1.1;
  letter-spacing:-.04em;
  text-wrap:balance;
}

.goal-list{margin:0; padding:0 8px; list-style:none}

.goal-list li{
  position:relative;
  padding:0 0 0 30px;
  font-size:16px;
}

.goal-list li + li{margin-top:16px}

.goal-list li .tick{
  position:absolute;
  left:0;
  top:2px;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--green-bright);
  color:#fff;
}
.goal-list li .tick svg{width:9px; height:7px}

.trust-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.trust-tile{
  min-height:78px;
  padding:12px;
  display:grid;
  place-items:center;
  background:#fff;
  border-radius:16px;
  text-align:center;
  font-size:13px;
  font-weight:800;
}

.trust-card,
.keep-card,
.guarantee{
  padding:24px;
  background:#fff;
  border-radius:22px;
  box-shadow:var(--shadow);
}

.trust-card{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:16px;
}

.big-icon{
  width:52px;
  height:52px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:var(--sage-pale);
  color:var(--green-bright);
}
.big-icon svg{width:25px; height:25px}

.trust-card h3,
.keep-card h3,
.guarantee h2{margin:0 0 7px; line-height:1.15}
.trust-card p,
.keep-card p,
.guarantee p{margin:0; color:var(--muted); font-size:14px}

.faq-icon{
  width:54px;
  height:54px;
  margin:0 auto 15px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#fff;
  color:var(--green-bright);
}
.faq-icon svg{width:25px; height:25px}

details{
  margin-bottom:8px;
  background:#fff;
  border-radius:18px;
}

summary{
  min-height:72px;
  padding:17px 52px 17px 19px;
  display:flex;
  align-items:center;
  position:relative;
  list-style:none;
  font-weight:800;
  cursor:pointer;
}

summary::-webkit-details-marker{display:none}

.chev{
  position:absolute;
  right:17px;
  top:50%;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:var(--sand);
  color:var(--muted);
  transform:translateY(-50%);
  transition:transform .22s ease;
}
.chev svg{width:10px; height:7px}
details[open] .chev{transform:translateY(-50%) rotate(180deg)}
details p{margin:0; padding:0 19px 18px; color:var(--muted); font-size:14px}

/* --------------------------------------------------------------------------
   12 · Reviews — examples, and every card says so
   -------------------------------------------------------------------------- */
.review{
  display:grid;
  grid-template-columns:112px 1fr;
  gap:14px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}

/* Deliberately not a face: a photograph here would read as a real customer,
   and there is not one yet. */
.review-photo{
  aspect-ratio:.88;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:var(--sage-pale);
  border:1px dashed var(--sage-line);
  color:var(--muted-2);
  text-align:center;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}

.example-badge{
  display:inline-block;
  margin-bottom:7px;
  padding:3px 6px;
  border-radius:5px;
  background:var(--burgundy-soft);
  color:var(--burgundy);
  font-size:8px;
  font-weight:900;
  letter-spacing:.04em;
}

.stars{display:flex; gap:2px; color:var(--burgundy)}
.stars svg{width:12px; height:12px}
.review h3{margin:5px 0 4px; font-size:14px}
.review blockquote{margin:0 0 8px; color:var(--muted); font-size:12px}
.review cite{font-size:11px; font-style:normal; font-weight:800}

.keep-card .mini-checks{
  margin:16px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
  font-size:13px;
  font-weight:700;
}

.mini-checks li{display:flex; align-items:center; gap:8px}
.mini-checks svg{width:11px; height:9px; flex:none; color:var(--green-bright)}

.repeat-offer{padding-top:62px}

.guarantee{
  margin-top:48px;
  display:grid;
  grid-template-columns:50px 1fr;
  gap:16px;
}

.shield{
  width:48px;
  height:54px;
  display:grid;
  place-items:center;
  color:#fff;
  background:var(--green-bright);
  clip-path:polygon(50% 0, 92% 15%, 92% 58%, 75% 82%, 50% 100%, 25% 82%, 8% 58%, 8% 15%);
}
.shield svg{width:17px; height:13px}

.guarantee h2{font-size:25px; text-align:left}
.guarantee a{display:inline-block; margin-top:16px; color:var(--green); font-size:13px; font-weight:800}

footer{
  padding:40px 16px 30px;
  color:var(--muted-2);
  text-align:center;
  font-size:11px;
}

footer nav{
  margin-bottom:10px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 14px;
}

footer a{color:inherit}

/* The warm-up mount for the checkout iframe — present, never seen. */
.warming{
  position:fixed; left:-9999px; top:0;
  width:520px; height:520px;
  opacity:0; pointer-events:none; overflow:hidden;
}

[hidden]{display:none !important}

/* --------------------------------------------------------------------------
   13 · Responsive — the reference's own breakpoints, unchanged
   -------------------------------------------------------------------------- */
@media (max-width:720px){
  .topbar-inner{gap:9px}
  .wordmark{font-size:16px}
  /* The reference drops this label to font-size:0 on a phone, which leaves a
     clock with nothing to explain it. It stays; the header button is what
     gives way instead, below. */
  .header-offer{gap:7px; font-size:11px}
  .header-offer .timer{font-size:20px; letter-spacing:.02em}
  .top-cta{width:auto; min-width:112px; height:42px; padding:0 16px; font-size:12px}
  main{margin-top:16px}
  .state-photo{height:176px}
  .state-body{padding:14px 12px 16px}
  .metric + .metric{margin-top:11px}
  .section{padding-top:50px}
}

/* Below this the wordmark, the message, the clock and a button do not fit on
   one row. The button goes: it is a shortcut to the offer further down, and
   the message is the thing worth keeping. */
@media (max-width:600px){
  .top-cta{display:none}
}

@media (max-width:430px){
  .header-offer{gap:6px; font-size:10px}
  .header-offer .timer{font-size:18px}
}

/* At the narrow end the four bars are what give way, not the words. The
   wordmark still reads as the wordmark. */
@media (max-width:380px){
  .topbar .mark{display:none}
  .header-offer{font-size:9.5px}
  .header-offer .timer{font-size:17px}
}

@media (max-width:390px){
  .state-photo{height:154px}
  .state-label{font-size:17px}
  .plan-card{grid-template-columns:22px minmax(0,1fr) 84px; gap:9px; padding-left:13px}
  .plan-copy h3{font-size:14px}
  .new-price{font-size:21px}
  .daily-price strong{font-size:22px}
  .review{grid-template-columns:94px 1fr}
  .guarantee{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}