/* goal-cost — Section 5 "Our Goal" (Increase / Decrease deck + fleet photo cards)
   and Section 6 "Our Cost" (fleet-size pricing slider). Plain CSS, no frameworks. */

.gc-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.gd-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* ───────────────────────── Section 5 — the Increase / Decrease deck ─────────────────────────
   One wide active card (flex 7) with the other five tucked behind it as slim layered edges
   (the 21st.dev interactive-selector: flex-grow swap, ~0.7s ease, staggered slide-in).
   --d is each card's distance from the active one (set by js/goal-cost.js). */
.gd-deck{
  --slim:76px;          /* a tucked card's width */
  --ov:20px;            /* how far it tucks under its neighbour */
  --step:16px;          /* each card further back is this much shorter */
  --dur:.7s;
  --ease:cubic-bezier(.45,0,.2,1);
  --dir:1;
  position:relative;display:flex;align-items:center;width:100%;max-width:1080px;height:410px;margin:0 auto;
  outline:none;touch-action:pan-y;isolation:isolate;border-radius:28px;contain:layout style;
  -webkit-tap-highlight-color:transparent;
}
.gd-deck:focus-visible{outline:2px solid var(--cb-blue);outline-offset:10px}

.gd-card{
  --c:95,224,255;                                   /* CrashBot blue */
  --c-text:#7FE8FF;
  position:relative;flex:0 0 var(--slim);align-self:center;min-width:0;
  height:calc(100% - var(--d,0) * var(--step));
  border-radius:26px;overflow:hidden;cursor:pointer;
  background:linear-gradient(165deg,rgba(17,26,47,.98),rgba(7,10,21,.99) 62%);
  border:1px solid rgba(var(--c),.34);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);
  transition:flex var(--dur) var(--ease),height var(--dur) var(--ease),width var(--dur) var(--ease),margin var(--dur) var(--ease),
             border-color .55s ease,box-shadow .6s ease;
}
.gd-card.is-down{--c:255,104,110;--c-text:#FF8F94}  /* restrained coral, not an error red */
/* off screen the browser skips each card's contents; a card clips to its own box and takes its
   size from the deck, so nothing looks different */
.gd-card,.gf-media{content-visibility:auto}
.gd-card.is-after{margin-left:calc(var(--ov) * -1)}
.gd-card.is-before{margin-right:calc(var(--ov) * -1)}
/* cards further back sit a little darker */
.gd-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#02040b;pointer-events:none;z-index:3;
  opacity:calc(var(--d,0) * .085);transition:opacity var(--dur) var(--ease)}
/* fine top highlight in the card's colour */
.gd-card::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--c),.75),transparent);opacity:.25;transition:opacity .6s ease}

.gd-card:not(.is-active):hover{border-color:rgba(var(--c),.62)}
.gd-card.is-active{flex:7 1 0%;height:100%;cursor:default;border-color:rgba(var(--c),.6);
  box-shadow:0 0 0 1px rgba(var(--c),.08),0 0 46px -14px rgba(var(--c),.5),0 34px 70px -34px rgba(var(--c),.55),0 26px 50px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.1)}
.gd-card.is-down.is-active{border-color:rgba(var(--c),.5);
  box-shadow:0 0 0 1px rgba(var(--c),.06),0 0 44px -16px rgba(var(--c),.4),0 34px 70px -36px rgba(var(--c),.42),0 26px 50px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.1)}
.gd-card.is-active::before{opacity:.9}

/* colour wash: the selector's background-size shift, without a photo */
.gd-glow{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(70% 85% at 50% 100%,rgba(var(--c),.15),transparent 70%),radial-gradient(55% 60% at 50% 0%,rgba(255,255,255,.035),transparent 70%);
  background-repeat:no-repeat;background-position:50% 100%;background-size:100% 135%;opacity:.55;
  transition:background-size var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.gd-card.is-active .gd-glow{background-size:100% 100%;opacity:1}

/* the rising / falling trajectory line across the lower half */
.gd-traj{position:absolute;left:0;bottom:0;width:100%;height:52%;z-index:1;pointer-events:none;overflow:visible;
  opacity:0;transition:opacity .3s ease;filter:drop-shadow(0 0 6px rgba(var(--c),.55))}
.gd-traj .gd-line{fill:none;stroke:url(#gdLineUp);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;
  transition:stroke-dashoffset 0s linear .35s}
.gd-traj .gd-area{fill:url(#gdAreaUp);opacity:0;transition:opacity .3s ease}
.is-down .gd-traj .gd-line{stroke:url(#gdLineDown)}
.is-down .gd-traj .gd-area{fill:url(#gdAreaDown)}
.gd-card.is-active .gd-traj{opacity:.9;transition:opacity .4s ease .3s}
.gd-card.is-active .gd-line{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s cubic-bezier(.5,.05,.2,1) .4s}
.gd-card.is-active .gd-area{opacity:1;transition:opacity 1s ease 1s}

/* a tucked card shows only its round icon, centred in the part that is visible */
.gd-tab{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none;
  transition:opacity .35s ease .3s}
.gd-card.is-after .gd-tab{padding-left:var(--ov)}
.gd-card.is-before .gd-tab{padding-right:var(--ov)}
.gd-card.is-active .gd-tab{opacity:0;transition:opacity .2s ease}
.gd-tab-ico{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--c-text);
  background:radial-gradient(circle at 50% 30%,rgba(var(--c),.16),rgba(8,12,24,.9) 72%);
  border:1.5px solid rgba(var(--c),.5);box-shadow:0 0 18px -5px rgba(var(--c),.6),inset 0 1px 0 rgba(255,255,255,.1);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s ease,box-shadow .3s ease}
.gd-card:not(.is-active):hover .gd-tab-ico{transform:scale(1.08);border-color:rgba(var(--c),.9)}
.gd-tab-ico svg,.gd-ico svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gd-tab-ico svg{width:20px;height:20px}

/* the active card's centred content */
.gd-body{position:absolute;left:50%;top:47%;z-index:2;width:calc(var(--aw,720px) - 72px);max-width:640px;
  display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) translateX(calc(var(--dir) * 26px));
  transition:opacity .25s ease,transform .45s ease}
.gd-card.is-active .gd-body{opacity:1;transform:translate(-50%,-50%);pointer-events:auto;
  transition:opacity .6s ease .32s,transform .8s cubic-bezier(.2,.7,.2,1) .28s}
.gd-label{display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 15px;border-radius:100px;
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1;
  color:var(--c-text);background:rgba(var(--c),.07);border:1px solid rgba(var(--c),.32)}
.gd-label svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gd-ico{margin-top:24px;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;color:var(--c-text);
  background:radial-gradient(circle at 50% 30%,rgba(var(--c),.2),rgba(var(--c),.03) 72%);
  border:1px solid rgba(var(--c),.45);box-shadow:0 0 38px -8px rgba(var(--c),.6),inset 0 1px 0 rgba(255,255,255,.14)}
.gd-ico svg{width:34px;height:34px;stroke-width:1.6;filter:drop-shadow(0 0 6px rgba(var(--c),.55))}
.gd-title{margin-top:20px;font-size:clamp(28px,3.4vw,44px);color:#fff;letter-spacing:-.035em;line-height:1.06}
.gd-text{margin-top:12px;max-width:42ch;color:var(--muted);font-size:17px;line-height:1.55;text-wrap:balance}
.gd-nw{white-space:nowrap}

/* arrows + dots */
.gd-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:34px}
.gd-arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--gline);background:rgba(255,255,255,.035);color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,color .2s,transform .14s}
.gd-arrow:hover{background:rgba(95,224,255,.12);border-color:rgba(95,224,255,.45);color:var(--cb-blue)}
.gd-arrow:active{transform:scale(.9)}
.gd-arrow svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gd-dots{display:flex;align-items:center}
.gd-dot{--c:95,224,255;position:relative;width:17px;height:30px;padding:0;border:0;background:none;cursor:pointer;transition:width .35s cubic-bezier(.2,.7,.2,1)}
.gd-dot.is-down{--c:255,104,110}
.gd-dot::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:4px;transform:translate(-50%,-50%);
  background:#2F3542;transition:width .35s cubic-bezier(.2,.7,.2,1),background .3s}
.gd-dot:hover::before{background:#454D5C}
.gd-dot.on{width:32px}
.gd-dot.on::before{width:22px;background:#2F3542}

/* while js/goal-cost.js sets the deck up at page load: no transitions */
.gd-boot .gd-card,.gd-boot .gd-card::before,.gd-boot .gd-card::after,.gd-boot .gd-glow,.gd-boot .gd-tab,.gd-boot .gd-tab-ico,.gd-boot .gd-body,
.gd-boot .gd-dot,.gd-boot .gd-dot::before{transition:none!important}  /* (the line still draws itself in) */
/* first view: cards wait off-stage until the deck scrolls in (js adds/removes this) */
.gd-deck.gd-wait .gd-card{opacity:0}

/* ───────────────────────── Built for fleets at every stage — the two photo cards ───────────────────────── */
.gf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:1112px;margin:0 auto}
.gf-card{position:relative;isolation:isolate;min-width:0;border-radius:26px;aspect-ratio:16/10.4;min-height:330px;background:#060a16}
.gf-media{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:0}
.gf-media picture,.gf-media img{display:block;width:100%;height:100%}
.gf-media img{object-fit:cover;object-position:78% 50%;filter:brightness(.86) contrast(1) saturate(.95);transform:scale(1.015);
  transition:filter .6s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.gf-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,10,24,.95) 0%,rgba(5,10,24,.88) 32%,rgba(6,14,32,.58) 52%,rgba(6,14,32,.12) 72%,rgba(6,14,32,0) 86%),
             linear-gradient(0deg,rgba(4,8,18,.5),rgba(4,8,18,0) 38%)}
/* a class after :hover, not "img": a tag there restyles every image in any hovered element */
.gf-card:hover .gf-img{filter:brightness(1.05) contrast(1.09) saturate(1.04);transform:scale(1.04)}
.gf-card>.spot-glow{z-index:1}
.gf-content{position:relative;z-index:2;height:100%;width:60%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:46px 0 36px 40px}
.gf-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--cb-blue);
  background:rgba(95,224,255,.08);border:1px solid rgba(95,224,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  transition:background .55s ease,border-color .55s ease,box-shadow .55s ease}
.gf-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:filter .55s ease}
.gf-label{margin-top:20px;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cb-blue);transition:text-shadow .55s ease}
.gf-title{margin-top:10px;font-size:clamp(24px,2.5vw,31px);color:#fff;letter-spacing:-.03em;line-height:1.08}
.gf-text{margin-top:12px;max-width:31ch;color:#C2CDDC;font-size:15.5px;line-height:1.62}
/* border + halo live on their own layer, so they keep their easing while the shared tilt
   (window.CBTilt) drives the card's transform */
.gf-ring{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;
  border:1px solid rgba(95,224,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 56px -32px rgba(0,0,0,.95),0 0 30px -16px rgba(95,224,255,.3);
  transition:border-color .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s cubic-bezier(.2,.7,.2,1)}
.gf-large .gf-ring{border-color:rgba(95,224,255,.17);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 56px -32px rgba(0,0,0,.95),0 0 30px -18px rgba(95,224,255,.22)}
.gf-card:hover .gf-ring{border-color:rgba(130,232,255,.5)}

/* ───────────────────────── Section 6 — Our Cost ───────────────────────── */
/* the title is the cue (Kaiya, 2 Oct 2026): "Tell us your fleet size" with the bobbing arrow */
#cost .gc-title .gc-tri{display:inline-block;vertical-align:middle;margin-left:.32em;width:.42em;height:.36em;position:relative;top:-.04em}
.gc-tri{flex:none;width:14px;height:12px;fill:var(--cb-blue);filter:drop-shadow(0 0 5px rgba(95,224,255,.5));animation:gcBob 2.6s ease-in-out infinite;animation-play-state:paused}
.gc-live .gc-tri{animation-play-state:running}
@keyframes gcBob{0%,100%{transform:translateY(-1px)}50%{transform:translateY(3px)}}
#cost .gc-title .gc-tri{animation-name:gcBobL}
@keyframes gcBobL{0%,100%{transform:translateY(-.04em)}50%{transform:translateY(.12em)}}

.gc-grid{display:grid;grid-template-columns:1.14fr .86fr;gap:20px;max-width:1000px;margin:0 auto;align-items:stretch}
.gc-card{position:relative;border-radius:28px;padding:36px 38px 38px;
  background:linear-gradient(160deg,rgba(20,30,54,.64),rgba(7,11,24,.78));border:1px solid var(--gline);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08);
  /* saturate only: behind the cards is just the page's smooth gradient, where an 18px blur
     changes nothing you can see but costs a full blur pass on every scrolled frame */
  -webkit-backdrop-filter:saturate(150%);backdrop-filter:saturate(150%)}
.gc-main{display:flex;flex-direction:column;border-color:rgba(95,224,255,.26);
  box-shadow:0 30px 70px -36px rgba(0,0,0,.85),0 0 54px -26px rgba(95,224,255,.5),inset 0 1px 0 rgba(255,255,255,.12)}
.gc-main::before{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(95,224,255,.7),transparent);pointer-events:none}
.gc-main,.gc-inc{border-color:rgba(95,224,255,.26);
  box-shadow:0 30px 70px -36px rgba(0,0,0,.85),0 0 54px -26px rgba(95,224,255,.5),inset 0 1px 0 rgba(255,255,255,.12)}
.gc-inc::before{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(95,224,255,.7),transparent);pointer-events:none}
.gc-h{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}

/* the slider: a tall hit area around a slim track */
.gc-slider{--p:9.6%;position:relative;height:52px;margin:20px 0 2px;cursor:pointer;touch-action:pan-y;outline:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.gc-track{position:absolute;left:0;right:0;top:50%;height:8px;margin-top:-4px;border-radius:99px;background:#222B3B;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.65),0 1px 0 rgba(255,255,255,.05)}
.gc-fill{position:absolute;left:0;top:0;bottom:0;width:var(--p);border-radius:inherit;
  background:linear-gradient(90deg,var(--cb-blue-deep),var(--cb-blue));box-shadow:0 0 14px rgba(95,224,255,.5)}
.gc-thumb{position:absolute;top:50%;left:var(--p);width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 3.5px,transparent 4px),linear-gradient(150deg,#A6F0FF,var(--cb-blue) 52%,var(--cb-blue-deep));
  border:2px solid rgba(225,250,255,.92);
  box-shadow:0 0 0 5px rgba(95,224,255,.13),0 0 22px rgba(95,224,255,.75),0 4px 10px rgba(0,0,0,.5);
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease}
.gc-slider:hover .gc-thumb,.gc-slider.is-drag .gc-thumb{transform:scale(1.1);box-shadow:0 0 0 8px rgba(95,224,255,.16),0 0 30px rgba(95,224,255,.9),0 4px 10px rgba(0,0,0,.5)}
.gc-slider:focus-visible .gc-thumb{box-shadow:0 0 0 4px #0a1020,0 0 0 6px var(--cb-blue),0 0 30px rgba(95,224,255,.9)}
.gc-slider.is-drag{cursor:grabbing}
.gc-slider.is-jump .gc-fill{transition:width .28s cubic-bezier(.2,.7,.2,1)}
.gc-slider.is-jump .gc-thumb{transition:left .28s cubic-bezier(.2,.7,.2,1),transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease}

.gc-count{text-align:center;margin-top:6px;color:var(--muted);font-size:18px;font-weight:600;letter-spacing:-.005em}
.gc-num{color:#fff;font-size:32px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-right:2px}
.gc-sep{height:1px;margin:26px 0 22px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15) 20%,rgba(255,255,255,.15) 80%,transparent)}

/* the price, with the 21st.dev digit spring (js/goal-cost.js) */
.gc-price{position:relative;display:flex;align-items:baseline;justify-content:center;height:84px;line-height:84px;white-space:nowrap}
.gc-price>span{display:inline-block} /* the digit springs get a layer while they run; no standing will-change */
.gc-cur,.gc-d{font-family:var(--display);font-size:clamp(52px,5.6vw,70px);font-weight:700;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.gc-cur{margin-right:2px}
.gc-per{margin-left:10px;font-size:19px;font-weight:500;color:var(--muted)}
.gc-vat{font-size:.78em;font-weight:500;color:var(--muted-2);letter-spacing:0;white-space:nowrap}
.gc-word{font-family:var(--display);font-size:clamp(38px,4.4vw,52px);font-weight:700;letter-spacing:-.035em;color:#fff;margin:0 .17em}
.gc-note{margin-top:8px;text-align:center;color:var(--muted);font-size:15.5px}
.gc-cta.btn{width:100%;justify-content:center;margin-top:28px;padding:15px 22px;font-size:16.5px;font-weight:700;border-radius:16px}
.gc-cta.btn-primary:hover{transform:scale(1.02)!important}

.gc-inc{display:flex;flex-direction:column}
.gc-inc .gc-h{margin-bottom:10px}
.gc-list{list-style:none;display:flex;flex-direction:column;flex:1;justify-content:space-between}
.gc-list li{display:flex;align-items:center;gap:14px;padding:15px 0;color:#C8D2E0;font-size:16px;line-height:1.4}
.gc-list li+li{border-top:1px solid rgba(255,255,255,.065)}
.gc-list li:last-child{padding-bottom:0}
.gc-check{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--cb-blue);
  background:radial-gradient(circle at 50% 30%,rgba(95,224,255,.2),rgba(95,224,255,.05) 75%);border:1px solid rgba(95,224,255,.42);
  box-shadow:0 0 14px -4px rgba(95,224,255,.55),inset 0 1px 0 rgba(255,255,255,.12)}
.gc-check svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ───────────────────────── responsive ───────────────────────── */
@media (max-width:1080px){
  .gf-grid{grid-template-columns:minmax(0,1fr);max-width:720px}
  .gf-card{aspect-ratio:16/8.6}
}
@media (max-width:900px){
  .gc-grid{grid-template-columns:minmax(0,1fr);max-width:560px}
}
/* Phones held upright (and tall narrow windows): the deck stands up and the photo cards
   put the photo on top. A phone on its side keeps the wide layouts (css/fit.css). */
@media (max-width:760px) and (orientation:portrait),(max-width:760px) and (min-height:561px){
  /* the deck stands up: the active card full width, the others as a short stack of icon edges */
  .gd-deck{--slim:48px;--ov:12px;--step:14px;flex-direction:column;height:calc(352px + 5 * (var(--slim) - var(--ov)));border-radius:22px}
  .gd-card{flex:0 0 var(--slim);height:auto;width:calc(100% - var(--d,0) * var(--step));border-radius:22px}
  .gd-card.is-active{height:auto;width:100%}
  .gd-card.is-after{margin-left:0;margin-top:calc(var(--ov) * -1)}
  .gd-card.is-before{margin-right:0;margin-bottom:calc(var(--ov) * -1)}
  .gd-card.is-after .gd-tab{padding-left:0;padding-top:var(--ov)}
  .gd-card.is-before .gd-tab{padding-right:0;padding-bottom:var(--ov)}
  .gd-tab-ico{width:30px;height:30px;border-width:1px}
  .gd-tab-ico svg{width:15px;height:15px}
  .gd-body{width:calc(var(--aw,340px) - 36px);top:43%}
  .gd-ico{margin-top:16px;width:58px;height:58px}
  .gd-ico svg{width:26px;height:26px}
  .gd-title{margin-top:14px;font-size:26px}
  .gd-text{font-size:15.5px;margin-top:9px}
  .gd-traj{height:31%}
  .gd-nav{margin-top:26px;gap:10px}

  .gf-card{aspect-ratio:auto;min-height:440px}
  .gf-media img{object-position:72% 0%;height:62%}
  .gf-media::after{background:linear-gradient(180deg,rgba(5,10,24,0) 0%,rgba(5,10,24,.15) 30%,rgba(5,10,24,.86) 56%,rgba(5,10,24,.97) 72%)}
  .gf-content{width:100%;justify-content:flex-end;padding:26px 24px 28px}
  .gf-text{max-width:none;font-size:15px}
}
@media (max-width:760px){
  .gc-card{padding:28px 22px 28px;border-radius:24px}
  .gc-price{height:72px;line-height:72px}
  .gc-cur,.gc-d{font-size:56px}
  .gc-word{font-size:38px}
  .gc-per{font-size:17px}
  .gc-list li{font-size:15.5px}
}
@media (max-width:380px){
  .gc-word{font-size:33px}
  .gc-cur,.gc-d{font-size:50px}
}

/* reduced motion: a still deck (the line already drawn), no springs, no bob */
@media (prefers-reduced-motion:reduce){
  .gd-card,.gd-card *,.gd-card::before,.gd-card::after,.gd-dot,.gd-dot::before,.gf-media img,.gf-ring,.gf-ico,.gc-thumb,.gc-fill{transition:none!important}
  .gd-card.is-active .gd-line{stroke-dashoffset:0}
  .gc-tri{animation:none}
}