:root{
  --ink:        #0B2B3A;   /* deep lagoon – text & dark sections */
  --ink-2:      #12405A;
  --aqua: #2563eb;   /* primary brand */
  --aqua-deep: #0d8bf0;
  --aqua-soft:  #D6F5F2;
  --citrus: #0dcaf0;   /* call-to-action */
  --citrus-deep: #0dcaf0;
  --coral: #0d9bf0;   /* junk / warning */
  --mist:       #F2F8F8;
  --line:       #DCE9EA;
  --muted:      #5C7480;
  --white:      #FFFFFF;
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;
  --shadow-soft: 0 18px 40px -18px rgba(11,43,58,.25);
  --shadow-pop:  0 30px 60px -20px rgba(8,143,138,.45);
  --ease: cubic-bezier(.22,.9,.3,1);
}

*{ -webkit-font-smoothing: antialiased; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Figtree',system-ui,sans-serif;
  color:var(--ink); background:var(--white);
  font-size:1.0625rem; line-height:1.65;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display-font{
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing:-.02em;
  line-height:1.08;
  /* color:var(--ink); */
}
h1{ font-weight:800; font-size:clamp(2.4rem,5.2vw,4.1rem); }
h2{ font-weight:800; font-size:clamp(1.9rem,3.6vw,2.9rem); }
h3{ font-weight:700; font-size:1.25rem; }
p{color: #a7c9dc;}
a{ color:var(--aqua-deep); cursor: pointer; }
section{ position:relative; }
.sec-pad{ padding:110px 0; }
.lead-narrow{ max-width:620px; }
.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; font-size:.95rem; color:var(--aqua-deep);
  background:var(--aqua-soft); padding:.35rem .9rem; border-radius:50px; margin-bottom:1.1rem;
}
.kicker .dot{ width:8px; height:8px; border-radius:50%; background:var(--aqua); box-shadow:0 0 0 4px rgba(15,185,177,.2); animation:pulseDot 2s infinite; }
:focus-visible{ outline:none; }

/* =========================================================
   BUTTONS – sweep fill, shine, arrow nudge, lift
   ========================================================= */
.btn-x{
  --bg:var(--citrus); --fg:var(--ink); --sweep:var(--ink); --fg-hover:#fff;
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:700; font-size:1rem; padding:.95rem 1.7rem;
  border-radius:60px; border:2px solid var(--bg);
  background:var(--bg); color:var(--fg); text-decoration:none;
  transition:color .45s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), border-color .45s var(--ease);
}
.btn-x::before{                       /* liquid sweep */
  content:""; position:absolute; z-index:-1; left:50%; top:100%;
  width:140%; aspect-ratio:1; border-radius:42%;
  background:var(--sweep); transform:translate(-50%,0) rotate(0deg);
  transition:top .6s var(--ease), transform 1.2s linear;
}
.btn-x::after{                        /* shine */
  content:""; position:absolute; top:0; left:-75%; width:50%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg); z-index:1; pointer-events:none;
}
.btn-x i{ transition:transform .35s var(--ease); }
.btn-x:hover{ color:var(--fg-hover); border-color:var(--sweep); transform:translateY(-3px); box-shadow:0 16px 30px -12px rgba(11,43,58,.45); }
.btn-x:hover::before{ top:-40%; transform:translate(-50%,0) rotate(160deg); }
.btn-x:hover::after{ animation:shine .9s var(--ease); }
.btn-x:hover i{ transform:translateX(5px); }
.btn-x:active{ transform:translateY(0) scale(.97); }

.btn-x.ghost{ --bg:transparent; --fg:var(--ink); --sweep:var(--aqua); --fg-hover:#fff; border-color:var(--line); }
.btn-x.aqua{ --bg:var(--aqua); --fg:#fff; --sweep:var(--ink); }
.btn-x.light{ --bg:#fff; --fg:var(--ink); --sweep:var(--citrus); --fg-hover:var(--ink); }
.btn-x.outline-light{ --bg:transparent; --fg:#fff; --sweep:#fff; --fg-hover:var(--ink); border-color:rgba(255,255,255,.35); }
.btn-x.sm{ padding:.6rem 1.2rem; font-size:.95rem; }
.btn-x.block{ width:100%; justify-content:center; }

.play-ring{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink); color:#fff; font-size:.85rem; position:relative;
}
.play-ring::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--aqua); animation:ripple 1.8s infinite; }
.btn-x.ghost:hover .play-ring{ background:#fff; color:var(--aqua-deep); }
.btn-x.ghost:hover .play-ring i{ transform:none; }

/* =========================================================
   TOP STRIP + NAVBAR
   ========================================================= */
.top-strip{ background:var(--ink); color:#cfe6ea; font-size:.88rem; padding:.5rem 0; }
.top-strip i{ color:var(--citrus); }
.navbar{ background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -18px rgba(11, 43, 58, .35);
  padding: .6rem 0; }

.navbar.scrolled {
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -18px rgba(11, 43, 58, .35);
  padding: .6rem 0;
}

.navbar.scrolled{ background:rgba(255,255,255,.85); backdrop-filter:blur(14px); box-shadow:0 10px 30px -18px rgba(11,43,58,.35); padding:.6rem 0; }
.brand{ 
  display:flex; align-items:center; gap:.65rem; 
  width: 200px; }

.brand img{
  width: 100%;
}

.brand-mark{
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--aqua),var(--aqua-deep)); color:#fff; font-size:1.25rem;
  box-shadow:0 8px 18px -8px rgba(8,143,138,.8); position:relative; overflow:hidden;
}
.brand-mark::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.6),transparent 70%); transform:translateX(-120%); animation:brandShine 4.5s infinite; }
.brand small{ display:block; font-family:'Figtree'; font-weight:600; font-size:.72rem; color:var(--muted); letter-spacing:.02em; margin-top:-3px; }
.navbar .nav-link{ color:var(--ink); font-weight:600; padding:.5rem .95rem !important; position:relative; }
.navbar .nav-link::after{
  content:""; position:absolute; left:.95rem; right:.95rem; bottom:.2rem; height:3px; border-radius:3px;
  background:var(--aqua); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);
}
.navbar .nav-link:hover::after,.navbar .nav-link.active::after{ transform:scaleX(1); transform-origin:left; }
.navbar-toggler{ border:none; box-shadow:none !important; font-size:1.7rem; color:var(--ink); }

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding:60px 0 120px; background:
  radial-gradient(900px 500px at 85% 10%, rgba(15,185,177,.16), transparent 60%),
  radial-gradient(700px 400px at -5% 90%, rgba(255,182,39,.14), transparent 60%),
  var(--mist); overflow:hidden; }
.hero h1 .wash{ position:relative; white-space:nowrap; z-index:0; }
.hero h1 .wash::after{
  content:""; position:absolute; left:-2%; right:-2%; bottom:.08em; height:.32em; z-index:-1; border-radius:6px;
  background:linear-gradient(90deg,var(--aqua-soft),rgba(15,185,177,.45));
  transform-origin:left; animation:washIn 1.2s .8s var(--ease) both;
}
.hero p.lead{ font-size:1.18rem; max-width:540px; }
.trust-row{ display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:2rem; }
.trust-row span{ display:flex; align-items:center; gap:.5rem; font-weight:600; font-size:.95rem; color:var(--ink); }
.trust-row i{ width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#fff; color:var(--aqua-deep); box-shadow:var(--shadow-soft); }

/* App mockup */
.mock-wrap{ position:relative; padding:30px 10px; }
.app{
  background:#fff; border-radius:var(--r-lg); box-shadow:0 40px 80px -30px rgba(11,43,58,.45);
  display:grid; grid-template-columns:150px 1fr; overflow:hidden; position:relative; z-index:2;
  border:1px solid var(--line);
}
.app-side{ background:var(--ink); color:#a9c7cf; padding:18px 12px; font-size:.78rem; }
.app-side .logo{ color:#fff; font-weight:700; font-family:'Bricolage Grotesque'; display:flex; gap:.4rem; align-items:center; margin-bottom:16px; font-size:.9rem; }
.app-side .logo img{filter: brightness(0) invert(1);}

.app-side div.it{ padding:7px 9px; border-radius:9px; display:flex; gap:.5rem; align-items:center; margin-bottom:2px; }
.app-side div.it.on{ background:rgba(15,185,177,.18); color:#fff; }
.app-main{ padding:20px; }
.app-top{ display:flex; justify-content:space-between; align-items:center; font-size:.8rem; color:var(--muted); margin-bottom:12px; }
.app-top b{ color:var(--ink); font-size:.95rem; }
.dots span{ width:9px; height:9px; border-radius:50%; display:inline-block; background:var(--line); margin-left:4px; }

.scan-ring{
  --scan:0%;
  width:150px; height:150px; border-radius:50%; margin:0 auto; position:relative;
  background:conic-gradient(var(--aqua) var(--scan), var(--aqua-soft) 0);
  display:grid; place-items:center; animation:scanFill 3.2s 1s var(--ease) forwards;
}
.scan-ring::before{ content:""; position:absolute; inset:14px; border-radius:50%; background:#fff; }
.scan-ring::after{ content:""; position:absolute; inset:-8px; border-radius:50%; border:2px dashed rgba(15,185,177,.35); animation:spin 14s linear infinite; }
.scan-ring .val{ position:relative; text-align:center; }
.scan-ring .val b{ font-family:'Bricolage Grotesque'; font-size:1.9rem; display:block; line-height:1; }
.scan-ring .val small{ font-size:.72rem; color:var(--muted); }

.junk-list{ list-style:none; padding:0; margin:14px 0 0; font-size:.8rem; }
.junk-list li{ display:flex; align-items:center; gap:.55rem; padding:6px 0; border-bottom:1px dashed var(--line); }
.junk-list li:last-child{ border:none; }
.junk-list .ic{ width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-size:.75rem; }
.junk-list .bar{ flex:1; height:6px; background:var(--mist); border-radius:6px; overflow:hidden; }
.junk-list .bar i{ display:block; height:100%; border-radius:6px; width:0; animation:barGrow 1.4s var(--ease) forwards; }
.junk-list b{ min-width:52px; text-align:right; font-weight:700; color:var(--ink); }
.clean-btn{ margin-top:12px; width:100%; border:none; border-radius:12px; padding:.6rem; 
  font-weight:700; color:#fff; background:linear-gradient(90deg,var(--aqua),var(--aqua-deep)); 
  position:relative; overflow:hidden; display: flex;
  justify-content: center; }
.clean-btn::after{ content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45),transparent 65%); animation:sweep 2.6s infinite; }

.float-chip{
  position:absolute; z-index:3; background:#fff; border-radius:16px; padding:.7rem .95rem;
  box-shadow:var(--shadow-soft); display:flex; align-items:center; gap:.6rem; font-size:.82rem; font-weight:600;
}
.float-chip .ic{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center; font-size:1rem; }
.float-chip small{ display:block; font-weight:500; color:var(--muted); font-size:.72rem; }
.chip-a{ top:0; right:-10px; animation:floatY 5s ease-in-out infinite; }
.chip-b{ bottom:0; left:-20px; animation:floatY 6s 1s ease-in-out infinite; }
.chip-c{ top:42%; right:-34px; animation:floatY 5.5s .5s ease-in-out infinite; }

.blob{ position:absolute; border-radius:50%; filter:blur(2px); z-index:1; }
.blob.b1{ width:260px; height:260px; background:radial-gradient(circle at 30% 30%,var(--aqua),var(--aqua-deep)); top:-30px; right:-40px; opacity:.9; animation:morph 12s ease-in-out infinite; }
.blob.b2{ width:120px; height:120px; background:var(--citrus); bottom:-10px; left:20px; animation:morph 10s ease-in-out infinite reverse; }
.particle{ position:absolute; width:10px; height:10px; border-radius:3px; background:var(--coral); opacity:0; z-index:4; animation:sweepAway 4s infinite; }
.particle:nth-of-type(2){ background:var(--citrus); animation-delay:.8s; top:30%!important; }
.particle:nth-of-type(3){ background:var(--aqua); animation-delay:1.6s; top:60%!important; }
.particle:nth-of-type(4){ animation-delay:2.4s; top:75%!important; }

/* =========================================================
   FACT BAND
   ========================================================= */
.fact-band{ margin-top:-60px; position:relative; z-index:5; }
.fact-inner{ background:var(--ink); border-radius:var(--r-lg); padding:34px 20px; box-shadow:var(--shadow-soft); position:relative; overflow:hidden; }
.fact-inner::before{ content:""; position:absolute; inset:0; background:radial-gradient(500px 200px at 10% 0%,rgba(15,185,177,.35),transparent 70%); }
.fact{ display:flex; gap:1rem; align-items:center; justify-content:center; position:relative; }
.fact i{ font-size:1.9rem; color:var(--aqua); transition:transform .5s var(--ease); }
.fact:hover i{ transform:rotate(-12deg) scale(1.15); }
.fact b{ font-family:'Bricolage Grotesque'; font-size:1.6rem; color:#fff; display:block; line-height:1; }
.fact span{ color:#a9c7cf; font-size:.92rem; }
@media(min-width:992px){ .fact-col + .fact-col{ border-left:1px solid rgba(255,255,255,.12); } }

/* =========================================================
   FEATURES – bento grid
   ========================================================= */
.bento{ display:grid; gap:22px; grid-template-columns:repeat(12,1fr); }
.tile{
  grid-column:span 4; background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:30px; position:relative; overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.tile::before{ content:""; position:absolute; width:220px; height:220px; border-radius:50%; right:-110px; top:-110px; background:var(--accent,var(--aqua-soft)); opacity:.6; transition:transform .7s var(--ease); }
.tile:hover{ transform:translateY(-8px); box-shadow:var(--shadow-pop); border-color:transparent; }
.tile:hover::before{ transform:scale(1.6); }
.tile .ic{
  width:58px; height:58px; border-radius:17px; display:grid; place-items:center; font-size:1.55rem; margin-bottom:1.3rem;
  position:relative; background:var(--ink); color:var(--ic,var(--aqua)); transition:transform .5s var(--ease);
}
.tile:hover .ic{ transform:rotate(-8deg) scale(1.08); animation:wiggle .6s; }
.tile h3{ margin-bottom:.6rem; position:relative; }
.tile p{ position:relative; margin:0; font-size:1rem; }
.tile.wide{ grid-column:span 8; display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; background:linear-gradient(135deg,#fff 0%,var(--mist) 100%); }
.tile.tall{ grid-column:span 4; }
.mini-disk{ background:#fff; border-radius:var(--r-sm); padding:18px; box-shadow:var(--shadow-soft); position:relative; }
.mini-disk .row-d{ display:flex; justify-content:space-between; font-size:.85rem; font-weight:600; margin-bottom:6px; }
.mini-disk .track{ height:12px; background:var(--mist); border-radius:10px; overflow:hidden; margin-bottom:14px; display:flex; }
.mini-disk .track i{ height:100%; }
.legend{ display:flex; flex-wrap:wrap; gap:.8rem; font-size:.78rem; color:var(--muted); }
.legend span::before{ content:""; display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; background:var(--c); }

/* =========================================================
   COMPATIBILITY – CSS laptop
   ========================================================= */
.laptop{ position:relative; max-width:520px; margin:auto; }
.laptop .screen{
  aspect-ratio:16/10; border-radius:18px 18px 4px 4px; border:12px solid #1d2a31; border-bottom-width:16px;
  background:
    radial-gradient(60% 70% at 55% 55%, #4fd3ff 0%, transparent 60%),
    radial-gradient(45% 60% at 35% 45%, #1f6bff 0%, transparent 70%),
    radial-gradient(70% 80% at 65% 60%, #0a3cc2 0%, transparent 70%),
    linear-gradient(135deg,#0b2a6b,#08174a);
  position:relative; overflow:hidden;
}
.laptop .screen::before{ /* bloom petals */
  content:""; position:absolute; width:70%; aspect-ratio:1; left:15%; top:12%; border-radius:46% 54% 60% 40%/50% 40% 60% 50%;
  background:conic-gradient(from 30deg,rgba(120,220,255,.85),rgba(30,90,255,.6),rgba(150,230,255,.9),rgba(20,70,230,.5),rgba(120,220,255,.85));
  filter:blur(6px); animation:morph 14s ease-in-out infinite, spin 40s linear infinite;
}
.laptop .taskbar{ position:absolute; bottom:0; left:0; right:0; height:9%; background:rgba(255,255,255,.75); backdrop-filter:blur(6px); display:flex; justify-content:center; align-items:center; gap:6px; }
.laptop .taskbar i{ width:12px; height:12px; border-radius:3px; background:var(--ink-2); opacity:.7; }
.laptop .taskbar i:first-child{ background:#1f6bff; opacity:1; }
.laptop .base{ height:18px; margin:0 -7%; background:linear-gradient(#cfd8dc,#9aa8ae); border-radius:0 0 22px 22px; position:relative; }
.laptop .base::before{ content:""; position:absolute; width:18%; height:6px; left:41%; top:0; background:#8796a0; border-radius:0 0 8px 8px; }
.os-chip{
  display:flex; align-items:center; gap:.8rem; padding:1rem 1.2rem; border-radius:var(--r-sm);
  background:#fff; border:1px solid var(--line); font-weight:700; transition:all .4s var(--ease); height:100%;
}
.os-chip i{ font-size:1.5rem; color:#1f6bff; transition:transform .4s var(--ease); }
.os-chip:hover{ border-color:var(--aqua); transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.os-chip:hover i{ transform:scale(1.2) rotate(-6deg); }

/* =========================================================
   WHY – dark section
   ========================================================= */
.why{ background:var(--ink); overflow:hidden; }
.why h2{ color:#fff; }
.why p{ color:#a9c7cf; }
.why .kicker{ background:rgba(15,185,177,.15); color:var(--aqua); }
.why::before{ content:""; position:absolute; width:700px; height:700px; border-radius:50%; right:-250px; top:-250px; background:radial-gradient(circle,rgba(15,185,177,.25),transparent 65%); }
.benefit{
  display:flex; gap:1.1rem; padding:1.3rem; border-radius:var(--r-md); border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03); transition:all .45s var(--ease); height:100%;
}
.benefit:hover{ background:rgba(15,185,177,.12); border-color:rgba(15,185,177,.5); transform:translateX(6px); }
.benefit i{ flex:none; width:50px; height:50px; border-radius:15px; display:grid; place-items:center; font-size:1.35rem; background:var(--citrus); color:var(--ink); }
.benefit h3{ color:#fff; font-size:1.1rem; margin:.15rem 0 .3rem; }
.benefit p{ margin:0; font-size:.95rem; }

.health{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg); padding:30px; position:relative; }
.health h3{ color:#fff; }
.meter{ margin-bottom:22px; }
.meter .lab{ display:flex; justify-content:space-between; color:#cfe6ea; font-size:.92rem; margin-bottom:8px; font-weight:600; }
.meter .tr{ height:14px; border-radius:10px; background:rgba(255,255,255,.08); overflow:hidden; }
.meter .tr i{ display:block; height:100%; width:0; border-radius:10px; transition:width 1.8s var(--ease); }
.meter.before .tr i{ background:linear-gradient(90deg,var(--coral),#ff9b5b); }
.meter.after .tr i{ background:linear-gradient(90deg,var(--aqua),#5ee6c9); }
.health .note{ font-size:.8rem; color:#7fa2ad; margin:0; }

/* =========================================================
   HOW IT WORKS – progress timeline
   ========================================================= */
.how{
  background:
    radial-gradient(700px 380px at 50% 0%, rgba(15,185,177,.28), transparent 70%),
    radial-gradient(500px 300px at 0% 100%, rgba(255,182,39,.10), transparent 70%),
    linear-gradient(180deg,#0F3A4F 0%, var(--ink) 100%);
  overflow:hidden; padding-bottom:0;
}
.how h2{ color:#fff; }
.how p{ color:#a9c7cf; }
.how .kicker{ background:rgba(15,185,177,.15); color:var(--aqua); border:1px solid rgba(15,185,177,.4); }

/* 5-step row */
.hsteps{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin:56px 0 70px; }
.hstep{ flex:1; text-align:center; max-width:210px; }
.hicon{
  width:84px; height:84px; border-radius:50%; margin:0 auto 1.1rem; display:grid; place-items:center;
  font-size:2rem; color:#fff; position:relative;
  background:linear-gradient(145deg,var(--aqua),var(--aqua-deep));
  box-shadow:0 0 0 8px rgba(15,185,177,.14), 0 16px 30px -10px rgba(15,185,177,.7);
  transition:transform .5s var(--ease), background .5s var(--ease), color .5s, box-shadow .5s;
}
.hicon::after{ content:""; position:absolute; inset:-14px; border-radius:50%; border:2px dashed rgba(15,185,177,.45); opacity:0; transition:opacity .4s; animation:spin 10s linear infinite; }
.hstep:hover .hicon{ transform:translateY(-8px) rotate(-8deg); background:linear-gradient(145deg,var(--citrus),var(--citrus-deep)); color:var(--ink); box-shadow:0 0 0 8px rgba(255,182,39,.18), 0 20px 34px -10px rgba(255,182,39,.7); }
.hstep:hover .hicon::after{ opacity:1; border-color:rgba(255,182,39,.6); }
.hstep h3{ color:#fff; font-size:1.25rem; display:flex; justify-content:center; align-items:center; gap:.45rem; margin-bottom:.4rem; }
.hstep h3 .n{ width:24px; height:24px; border-radius:7px; background:var(--citrus); color:var(--ink); font-family:'Figtree'; font-weight:800; font-size:.8rem; display:grid; place-items:center; }
.hstep p{ font-size:.95rem; margin:0; }
.hsteps{ position:relative; }
.hrail{ position:absolute; left:10%; right:10%; top:40px; height:4px; border-radius:4px; background:rgba(255,255,255,.12); overflow:hidden; z-index:0; }
.hrail i{ display:block; height:100%; width:0; border-radius:4px; background:linear-gradient(90deg,var(--aqua),#5ee6c9 50%,var(--citrus)); box-shadow:0 0 12px rgba(94,230,201,.7); transition:width 2.4s var(--ease); }
.hsteps.go .hrail i{ width:100%; }
.hstep{ position:relative; z-index:1; }
.hicon{ background-color:var(--ink); }

/* Laptop + benefits stage */
.how-stage{ position:relative; padding-bottom:90px; }
.how-stage::before{ /* white swoosh behind the benefits */
  content:""; position:absolute; right:-40vw; left:52%; top:40px; bottom:0;
  background:var(--white); border-radius:220px 0 0 0;
}
.hl{ position:relative; z-index:2; }
.hl-screen{ background:#1d2a31; border-radius:22px 22px 6px 6px; padding:12px 12px 16px; box-shadow:0 40px 70px -30px rgba(0,0,0,.7); }
.hl-screen .app{ grid-template-columns:165px 1fr; border:none; box-shadow:none; border-radius:12px; }
.hl-base{ height:18px; margin:0 -6%; background:linear-gradient(#d5dde1,#97a6ad); border-radius:0 0 22px 22px; position:relative; }
.hl-base::before{ content:""; position:absolute; width:18%; height:6px; left:41%; top:0; background:#8796a0; border-radius:0 0 8px 8px; }
.dash-hero{ display:flex; gap:22px; align-items:center; background:var(--mist); border-radius:14px; padding:18px; }
.dash-hero .scan-ring{ width:118px; height:118px; flex:none; animation:scanTo85 2.6s var(--ease) forwards paused; }
.dash-hero .scan-ring::before{ inset:12px; }
.dash-hero .scan-ring .val b{ font-size:1.6rem; }
.how-stage.go .dash-hero .scan-ring{ animation-play-state:running; }
.dash-hero h4{ font-size:1.05rem; margin-bottom:.2rem; }
.dash-hero p{ font-size:.82rem; color:var(--muted); margin:0 0 .7rem; }
.dash-hero .clean-btn{ width:auto; padding:.45rem 1.1rem; margin:0; font-size:.85rem; }
.dash-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
.dash-tiles div{ background:var(--mist); border-radius:12px; padding:12px 6px; text-align:center; font-size:.75rem; color:var(--muted); transition:transform .4s var(--ease), background .4s; }
.dash-tiles div:hover{ transform:translateY(-4px); background:var(--aqua-soft); }
.dash-tiles i{ font-size:1.15rem; display:block; margin-bottom:4px; }
.dash-tiles b{ display:block; color:var(--ink); font-size:.85rem; }

.how-benefits{ position:relative; z-index:2; padding:80px 0 0 30px; }
.bitem{ display:flex; gap:1.1rem; align-items:center; padding:1rem 0; border-bottom:1px dashed var(--line); transition:transform .4s var(--ease); }
.bitem:last-child{ border-bottom:none; }
.bitem .bi-wrap{ flex:none; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; font-size:1.45rem; color:#fff;
  background:linear-gradient(145deg,var(--aqua),var(--aqua-deep)); box-shadow:0 0 0 6px var(--aqua-soft); transition:transform .5s var(--ease), background .5s; }
.bitem h3{ font-size:1.15rem; margin:0 0 .15rem; }
.bitem p{ margin:0; font-size:.95rem; color:var(--muted); }
.bitem:hover{ transform:translateX(8px); }
.bitem:hover .bi-wrap{ transform:rotate(-12deg) scale(1.08); background:linear-gradient(145deg,var(--citrus),var(--citrus-deep)); color:var(--ink); }

/* =========================================================
   BEFORE / AFTER
   ========================================================= */
.ba{ background:var(--mist); }
.ba-card{ border-radius:var(--r-lg); padding:28px; height:100%; position:relative; overflow:hidden; }
.ba-card.before{ background:#fff; border:1px solid var(--line); }
.ba-card.after{ background:linear-gradient(145deg,var(--aqua-deep),var(--ink)); color:#fff; }
.ba-card.after p,.ba-card.after li{ color:#d4f1ee; }
.ba-card .tag{ display:inline-block; font-weight:700; font-size:.82rem; padding:.3rem .8rem; border-radius:30px; margin-bottom:1rem; }
.before .tag{ background:#ffe5e1; color:#c9402f; }
.after .tag{ background:rgba(255,255,255,.15); color:#fff; }
.ba-card ul{ list-style:none; padding:0; margin:0 0 1.4rem; }
.ba-card li{ padding:.35rem 0; display:flex; gap:.6rem; align-items:center; }
.before li i{ color:var(--coral); } .after li i{ color:var(--citrus); }
.disk-mini{ background:rgba(11,43,58,.06); border-radius:var(--r-sm); padding:14px; font-size:.85rem; }
.after .disk-mini{ background:rgba(255,255,255,.1); }
.disk-mini .tr{ height:10px; border-radius:8px; background:rgba(11,43,58,.12); margin-top:8px; overflow:hidden; }
.after .disk-mini .tr{ background:rgba(255,255,255,.18); }
.disk-mini .tr i{ display:block; height:100%; border-radius:8px; }
.ba-arrow{ width:64px; height:64px; border-radius:50%; background:var(--citrus); display:grid; place-items:center; font-size:1.5rem; color:var(--ink); margin:auto; box-shadow:0 0 0 10px rgba(255,182,39,.2); animation:nudge 1.8s ease-in-out infinite; }

/* =========================================================
   PRICING
   ========================================================= */
.price{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:36px 30px; height:100%;
  position:relative; transition:transform .5s var(--ease), box-shadow .5s var(--ease); 
  display:flex; flex-direction:column;
}
.price:hover{ transform:translateY(-10px); box-shadow:var(--shadow-pop); }
.price .pi{ width:54px; height:54px; border-radius:16px; background:var(--aqua-soft); color:var(--aqua-deep); display:grid; place-items:center; font-size:1.4rem; margin-bottom:1.2rem; }
.price h3{ font-size:1.45rem; margin-bottom:.2rem; }
.price .sub{ font-size:.95rem; margin-bottom:1.3rem; }
.amount{ font-family:'Bricolage Grotesque'; font-weight:800; font-size:3.3rem; line-height:1; color:var(--ink); display:flex; align-items:flex-start; }
.amount sup{ font-size:1.4rem; top:0; margin-top:.45rem; margin-right:3px; }
.amount .c{ font-size:1.5rem; margin-top:.35rem; }
.once{ font-size:.88rem; color:var(--muted); margin:.4rem 0 1.6rem; }
.price ul{ list-style:none; padding:0; margin:1.6rem 0 0; }
.price li{ display:flex; gap:.65rem; padding:.42rem 0; font-size:.98rem; }
.price li i{ color:var(--aqua); font-size:1.1rem; }
.price.pop{ background:var(--ink); border-color:var(--ink); color:#fff; transform:scale(1.04); box-shadow:0 40px 70px -30px rgba(11,43,58,.7); }
.price.pop:hover{ transform:scale(1.04) translateY(-10px); }
.price.pop h3,.price.pop .amount{ color:#fff; }
.price.pop p,.price.pop .once,.price.pop li{ color:#cfe6ea; }
.price.pop .pi{ background:var(--citrus); color:var(--ink); }
.price.pop li i{ color:var(--citrus); }
.ribbon{ position:absolute; top:22px; right:22px; background:var(--citrus); color:var(--ink); font-weight:700; font-size:.8rem; padding:.35rem .85rem; border-radius:30px; animation:bob 2.4s ease-in-out infinite; }
.price-note{ font-size:.9rem; }
   .all-products-btn{
    --apb-pad: 6px;
    position:relative; isolation:isolate; overflow:hidden;
    display:inline-flex; align-items:center; gap:14px;
    padding:var(--apb-pad);
    border-radius:60px;
    background:var(--white);
    border:1.5px solid var(--line);
    box-shadow:0 14px 30px -18px rgba(11,43,58,.35);
    color:var(--ink); text-decoration:none;
    font-family:'Figtree',sans-serif; font-weight:700; font-size:1rem; line-height:1;
    transition:color .45s var(--ease), border-color .45s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
    border: 1px solid var(--aqua-deep);
  }
  
  /* dark fill that grows out from the arrow on hover */
  .all-products-btn::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:var(--ink);
    clip-path:circle(0 at calc(100% - 26px) 50%);
    transition:clip-path .65s var(--ease);
  }
  /* light streak that passes across on hover */
  .all-products-btn::after{
    content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; z-index:2;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-20deg); pointer-events:none;
  }
  
  /* left icon tile */
  .all-products-btn .apb-icon{
    flex:none; width:40px; height:40px; border-radius:50%;
    display:grid; place-items:center;
    background:var(--aqua-soft); color:var(--aqua-deep); font-size:1rem;
    transition:background .45s var(--ease), color .45s var(--ease), transform .5s var(--ease);
  }
  .all-products-btn .apb-text{ padding-right:4px; white-space:nowrap; }
  
  /* right arrow circle */
  .all-products-btn .apb-arrow{
    flex:none; width:40px; height:40px; border-radius:50%;
    display:grid; place-items:center; overflow:hidden;
    background:var(--ink); color:var(--citrus); font-size:1.05rem;
    transition:background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease);
  }
  .all-products-btn .apb-arrow i{ animation:apbNudge 2.4s ease-in-out infinite; }
  
  /* ---------- hover / focus ---------- */
  .all-products-btn:hover,
  .all-products-btn:focus-visible{
    color:#fff;
    border-color:var(--ink);
    transform:translateY(-3px);
    box-shadow:0 22px 40px -18px rgba(11,43,58,.6);
  }
  .all-products-btn:hover::before,
  .all-products-btn:focus-visible::before{ clip-path:circle(150% at calc(100% - 26px) 50%); }
  .all-products-btn:hover::after{ animation:apbShine .9s .15s var(--ease); }
  
  .all-products-btn:hover .apb-icon,
  .all-products-btn:focus-visible .apb-icon{
    background:rgba(255,255,255,.1); color:var(--citrus);
    transform:rotate(-90deg);
  }
  .all-products-btn:hover .apb-arrow,
  .all-products-btn:focus-visible .apb-arrow{
    background:var(--citrus); color:var(--ink);
    transform:scale(1.08);
  }
  /* arrow shoots out right and comes back in from the left */
  .all-products-btn:hover .apb-arrow i{ animation:apbSwap .6s var(--ease); }
  
  .all-products-btn:active{ transform:translateY(0) scale(.97); }
  .all-products-btn:focus-visible{ outline:3px solid var(--aqua); outline-offset:3px; }
  
  @media (max-width:575.98px){
    .all-products-btn{ width:100%; justify-content:space-between; }
  }
  
  /* ---------- keyframes ---------- */
  @keyframes apbNudge{
    0%,70%,100%{ transform:translateX(0); }
    80%{ transform:translateX(4px); }
    90%{ transform:translateX(-1px); }
  }
  @keyframes apbSwap{
    0%{   transform:translateX(0);     opacity:1; }
    45%{  transform:translateX(26px);  opacity:0; }
    46%{  transform:translateX(-26px); opacity:0; }
    100%{ transform:translateX(0);     opacity:1; }
  }
  @keyframes apbShine{ to{ left:130%; } }
  
  @media (prefers-reduced-motion:reduce){
    .all-products-btn, .all-products-btn *, .all-products-btn::before, .all-products-btn::after{
      animation:none !important; transition-duration:.01ms !important;
    }
  }

/* =========================================================
   FAQ
   ========================================================= */
#faq{
  overflow-x:clip;
}
.faq .accordion-item{ border:1px solid var(--line); border-radius:var(--r-md)!important; margin-bottom:14px; overflow:hidden; }
.faq .accordion-button{ font-family:'Bricolage Grotesque'; font-weight:700; font-size:1.1rem; color:var(--ink); padding:1.25rem 1.4rem; box-shadow:none; }
.faq .accordion-button:not(.collapsed){ background:var(--aqua-soft); color:var(--ink); }
.faq .accordion-button::after{ background-image:none; content:"\F64D"; font-family:'bootstrap-icons'; width:32px; height:32px; border-radius:50%; background:var(--mist); display:grid; place-items:center; font-size:1rem; transition:transform .4s var(--ease), background .3s; }
.faq .accordion-button:not(.collapsed)::after{ transform:rotate(45deg); background:var(--aqua); color:#fff; }
.faq .accordion-body{ color:var(--muted); padding:0 1.4rem 1.3rem; background:var(--aqua-soft); }
.placeholder-note{ background:#fff4dc; color:#8a5a00; padding:.1rem .4rem; border-radius:5px; font-size:.92em; }
@media (min-width:992px){
  .faq-layout{ align-items:flex-start; }   /* columns keep their own height */
  .faq-intro{
    position:sticky;
    top:110px;                             /* space below your sticky header */
  }
}
/* =========================================================
   CTA
   ========================================================= */
/* Full-width blue banner */
.cta-wide{
  position:relative; overflow:hidden; padding:34px 0 30px; margin-top:40px;
  background:
    radial-gradient(420px 320px at 64% 28%, rgba(94,230,201,.50), transparent 70%),
    radial-gradient(320px 260px at 57% 75%, rgba(15,185,177,.32), transparent 70%),
    linear-gradient(95deg,#071E3D 0%,#0A2F5C 40%,#0C4778 66%,#0A2A52 100%);
}
.cta-wide .container{ position:relative; z-index:3; }
.cta-glow{ /* mint swoosh behind the laptop */
  position:absolute; width:340px; height:560px; left:52%; top:-160px; border-radius:50%; z-index:1;
  background:linear-gradient(170deg,rgba(94,230,201,.85),rgba(15,185,177,.25) 55%,transparent 80%);
  filter:blur(28px); transform:rotate(28deg); animation:glowPulse 7s ease-in-out infinite;
}
.cta-desk{ /* blue reflective surface the laptop sits on */
  position:absolute; left:42%; right:-8%; bottom:-140px; height:250px; border-radius:50%; z-index:1;
  background:radial-gradient(ellipse at center,rgba(50,150,240,.6),rgba(20,90,170,.25) 45%,transparent 70%);
}
.cta-ribbons{ position:absolute; left:-40px; top:0; height:100%; width:340px; z-index:1; 
  overflow:visible; opacity: 0.4; }
.cta-ribbons path{ fill:none; stroke-linecap:round; transform-origin:0 50%; animation:sway 8s ease-in-out infinite; }
.cta-ribbons path:nth-child(2){ animation-delay:-2s; } .cta-ribbons path:nth-child(3){ animation-delay:-4s; }
.cta-plant{ position:absolute; right:-14px; bottom:0; height:92%; z-index:2; }
.cta-plant g{ transform-origin:50% 100%; animation:leafSway 6s ease-in-out infinite; }
.cta-plant g:nth-of-type(2){ animation-delay:-1.5s; } .cta-plant g:nth-of-type(3){ animation-delay:-3s; }

.cta-eyebrow{
  display:inline-block; font-weight:800; font-size:.95rem; letter-spacing:.09em; text-transform:uppercase; margin-bottom:.7rem;
  background:linear-gradient(90deg,#5EE6C9,var(--citrus)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cta-wide h2{ color:#fff; font-size:clamp(1.8rem,3vw,2.6rem); margin:0; }
.cta-wide p{ color:#c6dbef; font-size:1rem; max-width:560px; margin:.5rem 0 1.1rem; }
.cta-wide .btn-x{ padding:.75rem 1.7rem; font-size:1rem; border-radius:14px; }
.cta-wide .cta-eyebrow{ font-size:.8rem; margin-bottom:.35rem; }
.cta-wide .cta-pc{ max-width:300px; margin-left:auto; }
.cta-wide .cta-glow{ height:380px; top:-120px; }
.cta-wide .cta-desk{ height:150px; bottom:-90px; }
.cta-wide .btn-x::before{ background:#fff; }
.cta-wide .btn-x:hover{ color:var(--ink); border-color:#fff; box-shadow:0 18px 34px -12px rgba(255,182,39,.6); }

/* 3D laptop */
.cta-pc{ perspective:1300px; position:relative; z-index:3; }
.cta-pc-inner{ transform:rotateY(-18deg) rotateX(5deg); transform-style:preserve-3d; transition:transform .8s var(--ease); }
.cta-pc:hover .cta-pc-inner{ transform:rotateY(-6deg) rotateX(2deg) translateY(-6px); }
.cta-pc .scr{ background:#18212c; border-radius:16px 16px 4px 4px; padding:9px 9px 12px; box-shadow:0 30px 60px -20px rgba(0,0,0,.7); }
.cta-pc .ui{ background:#fff; border-radius:8px; display:grid; grid-template-columns:22% 1fr; overflow:hidden; aspect-ratio:16/10; font-size:.55rem; }
.cta-pc .side{ background:#f2f6f8; padding:9px 7px; border-right:1px solid var(--line); }
.cta-pc .side .lg{ display:flex; align-items:center; gap:4px; font-weight:800; color:var(--ink); margin-bottom:9px; }
.cta-pc .side .lg i{ color:var(--aqua); }
.cta-pc .side span{ display:block; height:5px; border-radius:4px; background:#d9e4e8; margin:0 0 8px; }
.cta-pc .side span.on{ background:var(--aqua); width:80%; }
.cta-pc .main{ padding:10px 12px; display:flex; flex-direction:column; }
.cta-pc .bar{ height:5px; width:40%; border-radius:4px; background:#e3ebee; margin-bottom:10px; }
.cta-pc .body{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; flex:1; }
.cta-pc .ringcol{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.cta-pc .scan-ring{ width:82px; height:82px; animation:scanTo85 2.6s var(--ease) forwards paused; }
.cta-pc .scan-ring::before{ inset:8px; }
.cta-pc .scan-ring::after{ inset:-5px; }
.cta-pc .scan-ring .val b{ font-size:.95rem; }
.cta-pc .scan-ring .val small{ font-size:.48rem; }
.cta-wide.go .cta-pc .scan-ring{ animation-play-state:running; }
.cta-pc .pill{ background:linear-gradient(90deg,var(--aqua),var(--aqua-deep)); color:#fff; font-weight:700; padding:3px 12px; border-radius:20px; }
.cta-pc .rows b{ display:block; color:var(--ink); font-size:.62rem; margin-bottom:5px; }
.cta-pc .rows div{ display:flex; align-items:center; gap:5px; padding:4px 0; border-bottom:1px dashed var(--line); color:var(--muted); }
.cta-pc .rows i{ width:7px; height:7px; border-radius:50%; flex:none; }
.cta-pc .rows em{ margin-left:auto; font-style:normal; font-weight:700; color:var(--ink); }
.cta-pc .chips{ display:flex; gap:6px; margin-top:8px; }
.cta-pc .chips span{ flex:1; background:var(--mist); border-radius:6px; padding:4px; text-align:center; color:var(--muted); }
.cta-pc .base{ height:13px; margin:0 -7%; background:linear-gradient(#e2e8eb,#93a3ab); border-radius:0 0 16px 16px; position:relative; }
.cta-pc .base::before{ content:""; position:absolute; width:18%; height:5px; left:41%; top:0; background:#8796a0; border-radius:0 0 6px 6px; }

/* handwritten note + arrow pointing to laptop */
.cta-note{ position:relative; color:#fff; font-family:'Caveat',cursive; font-size:2rem; line-height:1; transform:rotate(-5deg); padding-left:24px; }
.cta-note span{ display:block; opacity:0; transform:translateY(8px); }
.cta-note span:nth-child(3){ margin-left:-10px; }
.cta-wide.go .cta-note span{ animation:writeIn .6s var(--ease) forwards; }
.cta-wide.go .cta-note span:nth-child(3){ animation-delay:.35s; }
.cta-wide.go .cta-note span:nth-child(4){ animation-delay:.7s; }
.cta-note svg{ position:absolute; left:-60px; top:40px; width:70px; overflow:visible; }
.cta-note svg path{ stroke:#fff; stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:160; stroke-dashoffset:160; }
.cta-wide.go .cta-note svg path{ animation:draw 1.1s 1s var(--ease) forwards; }

/* =========================================================
   FOOTER
   ========================================================= */
footer{background:var(--ink);color: #2563eb;padding:80px 0 30px;}
footer .brand img{/* filter: brightness(0) invert(1); */}
footer h4{ color:#fff; font-size:1.05rem; margin-bottom:1.1rem; }
footer a{color:#a9c7cf;text-decoration:none;transition:color .3s, padding .3s;}
footer ul{ list-style:none; padding:0; }
footer li{ margin-bottom:.55rem; }
footer ul.links a:hover{ color:var(--citrus); padding-left:6px; }
footer .contact li{ display:flex; gap:.7rem; }
footer .contact i{ color:var(--aqua); }
.social a{ width:42px; height:42px; border-radius:50%; display:inline-grid; place-items:center; border:1px solid rgba(255,255,255,.15); margin-right:.4rem; transition:all .4s var(--ease); }
.social a:hover{ background:var(--citrus); color:var(--ink); border-color:var(--citrus); transform:translateY(-4px) rotate(8deg); }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:50px; padding-top:24px; font-size:.88rem; }
.disclaimer{ font-size:.82rem; color:#7fa2ad; }

/* Back to top */
#toTop{ position:fixed; right:22px; bottom:22px; width:52px; height:52px; border-radius:50%; border:none; background:var(--citrus); color:var(--ink); font-size:1.3rem; box-shadow:var(--shadow-soft); opacity:0; visibility:hidden; transform:translateY(20px); transition:all .4s var(--ease); z-index:99; }
#toTop.show{ opacity:1; visibility:visible; transform:none; }
#toTop:hover{ background:var(--ink); color:#fff; transform:translateY(-4px); }

/* =========================================================
   KEYFRAMES
   ========================================================= */
@keyframes shine{ to{ left:130%; } }
@keyframes ripple{ 0%{ transform:scale(.9); opacity:1; } 100%{ transform:scale(1.5); opacity:0; } }
@keyframes pulseDot{ 0%,100%{ box-shadow:0 0 0 0 rgba(15,185,177,.5);} 50%{ box-shadow:0 0 0 7px rgba(15,185,177,0);} }
@keyframes brandShine{ 0%,70%{ transform:translateX(-120%);} 85%,100%{ transform:translateX(120%);} }
@keyframes washIn{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
@keyframes scanFill{ to{ --scan:100%; } }
@keyframes scanTo85{ to{ --scan:85%; } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes barGrow{ to{ width:var(--w); } }
@keyframes sweep{ 0%{ transform:translateX(-100%);} 60%,100%{ transform:translateX(100%);} }
@keyframes floatY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }
@keyframes morph{
  0%,100%{ border-radius:42% 58% 63% 37%/45% 38% 62% 55%; }
  33%{ border-radius:63% 37% 41% 59%/58% 62% 38% 42%; }
  66%{ border-radius:37% 63% 52% 48%/38% 52% 48% 62%; }
}
@keyframes sweepAway{
  0%{ opacity:0; transform:translate(0,0) rotate(0); left:8%; top:45%; }
  15%{ opacity:1; }
  80%{ opacity:.9; }
  100%{ opacity:0; transform:translate(-160px,-60px) rotate(220deg) scale(.3); left:8%; }
}
@keyframes wiggle{ 0%,100%{ transform:rotate(-8deg) scale(1.08);} 50%{ transform:rotate(6deg) scale(1.08);} }
@keyframes nudge{ 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(8px);} }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }
@keyframes glowPulse{ 0%,100%{ opacity:.85; transform:rotate(28deg) scale(1);} 50%{ opacity:1; transform:rotate(22deg) scale(1.08);} }
@keyframes sway{ 0%,100%{ transform:skewY(0) translateY(0);} 50%{ transform:skewY(4deg) translateY(-10px);} }
@keyframes leafSway{ 0%,100%{ transform:rotate(0);} 50%{ transform:rotate(3deg);} }
@keyframes beam{ 0%,100%{ opacity:.6; transform:rotate(22deg) translateX(0);} 50%{ opacity:1; transform:rotate(22deg) translateX(-30px);} }
@keyframes writeIn{ to{ opacity:1; transform:none; } }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes rise{ 0%{ transform:translateY(0) scale(.6); opacity:0;} 20%{ opacity:1;} 100%{ transform:translateY(-520px) scale(1.1); opacity:0;} }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1199px){ .chip-c{ display:none; } }
@media(max-width:991px){
  .sec-pad{ padding:80px 0; }
  .navbar-collapse{ background:#fff; border-radius:var(--r-md); padding:1rem; margin-top:.7rem; 
    box-shadow:var(--shadow-soft); }
  .tile,.tile.tall{ grid-column:span 6; }
  .tile.wide{ grid-column:span 12; }
  .hsteps{ flex-direction:column; align-items:stretch; gap:26px; max-width:520px; margin-left:auto; margin-right:auto; }
  .hstep{ flex:none; max-width:none; display:grid; grid-template-columns:84px 1fr; column-gap:1.2rem; text-align:left; align-items:center; }
  .hstep .hicon{ margin:0; grid-row:span 2; }
  .hstep h3{ justify-content:flex-start; margin:0; align-self:end; }
  .hstep p{ align-self:start; }
  .hrail{ left:40px; right:auto; top:0; bottom:0; width:4px; height:auto; }
  .hrail i{ width:100%!important; height:0; transition:height 2.4s var(--ease); }
  .hsteps.go .hrail i{ height:100%; }
  .how-stage::before{ left:-40vw; top:auto; height:62%; border-radius:120px 0 0 0; }
  .how-benefits{ padding:50px 10px 0; }
  .price.pop{ transform:none; } .price.pop:hover{ transform:translateY(-10px); }
  .cta-wide .cta-pc{ max-width:320px; margin:6px auto 0; }
  .cta-pc-inner{ transform:none; }
  .cta-glow{ left:30%; top:auto; bottom:-200px; }
  .cta-desk{ left:0; right:0; }
  .ba-arrow{ transform:rotate(90deg); animation:none; }
}
@media(max-width:767px){
  .tile,.tile.tall,.tile.wide{ grid-column:span 12; }
  .tile.wide{ grid-template-columns:1fr; }
  .app{ grid-template-columns:1fr; }
  .app-side{ display:none; }
  .chip-a{ right:0; } .chip-b{ left:0; }
  .cta-wide{ padding:34px 0 40px; text-align:center; }
  .cta-wide p{ margin-left:auto; margin-right:auto; }
  .cta-plant,.cta-ribbons{ display:none; }
  .fact{ justify-content:flex-start; }
  .dash-hero{ flex-direction:column; text-align:center; }
  .dash-tiles{ grid-template-columns:repeat(2,1fr); }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .scan-ring{ --scan:100%; }
}

/****************Shop********************/
   
 
/* =========================================================
   SECTION
   ========================================================= */
   .tc-hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding:110px 0 150px;
    text-align:center;
    color:#fff;
    background: radial-gradient(520px 320px at 50% 0%, #0e3791f0, transparent 70%), radial-gradient(420px 300px at 8% 85%, #0dcaf06b, transparent 70%), radial-gradient(420px 300px at 92% 70%, rgba(255, 182, 39, .16), transparent 70%), linear-gradient(180deg, #0a4295 0%, #2563eb 100%);
    background-size:100% 100%, 140% 140%, 140% 140%, 100% 100%;
    animation:tcBgDrift 16s ease-in-out infinite alternate;
  }
   
  /* dotted grid that fades out towards the edges and slowly pans */
  .tc-hero::before{
    content:"";
    position:absolute;
    inset:-40px;
    z-index:-1;
    background-image: radial-gradient(rgba(255, 255, 255, .14) 1.2px, transparent 1.3px);
    background-size:26px 26px;
    -webkit-mask:radial-gradient(ellipse 60% 70% at 50% 40%, #000 30%, transparent 75%);
    mask:radial-gradient(ellipse 60% 70% at 50% 40%, #000 30%, transparent 75%);
    animation:tcGridPan 22s linear infinite;
  }
   
  /* white curved edge so the hero flows into the pricing cards below */
  .tc-hero::after{
    content:""; position:absolute; z-index:1;
    left:-15%; right:-15%; bottom:-70px; height:140px;
    background:var(--white);
    border-radius:50% 50% 0 0 / 100% 100% 0 0;
  }
   
  .tc-hero .container{ position:relative; z-index:2; }
   
  /* floating decor: an aqua ring (left) and a citrus orb (right) */
  .tc-hero .container::before,
  .tc-hero .container::after{
    content:""; position:absolute; z-index:-1; pointer-events:none; border-radius:50%;
  }
  .tc-hero .container::before{
    width:120px;
    height:120px;
    left:4%;
    top:10px;
    border: 2px dashed #0dcaf0;
    animation:tcSpin 18s linear infinite, tcFloat 7s ease-in-out infinite;
  }
  .tc-hero .container::after{
    width:70px;
    height:70px;
    right:7%;
    top:58%;
    display: none;
    background:radial-gradient(circle at 30% 30%, #0d8bf0, var(--citrus) 55%, var(--citrus-deep));
    box-shadow:0 0 0 12px rgba(255,182,39,.12), 0 20px 40px -10px rgba(255,182,39,.6);
    animation:tcFloat 6s ease-in-out infinite reverse;
  }
   
  /* =========================================================
     SITE BADGE
     ========================================================= */
  .tc-hero__site{
    display:flex; align-items:center; gap:.55rem;
    width:max-content; max-width:100%;
    margin:0 auto 1.4rem; padding:.45rem 1.05rem .45rem .55rem;
    border-radius:50px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(15,185,177,.45);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    color:#d8f3f0; font-family:'Figtree',sans-serif; font-weight:600; font-size:.95rem; line-height:1.2;
    box-shadow:0 0 0 0 rgba(15,185,177,.45);
    animation:tcDrop .8s var(--ease) both, tcPulse 3s 1.2s ease-in-out infinite;
  }
  .tc-icon{
    width:30px; height:30px; padding:6px; flex:none;
    border-radius:50%;
    background:var(--aqua);
    fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  }
  /* shield + tick draw themselves in */
  .tc-icon path{ stroke-dasharray:60; stroke-dashoffset:60; animation:tcDraw 1.2s .5s var(--ease) forwards; }
  .tc-icon path + path{ animation-delay:1.1s; }
   
  /* =========================================================
     TITLE
     ========================================================= */
  .tc-hero__title{
    position:relative; display:inline-block;
    margin:0 0 1.2rem;
    font-family:'Bricolage Grotesque',sans-serif;
    font-weight:800; font-size:clamp(2.8rem,7vw,5.2rem); line-height:1; letter-spacing:-.035em;
    color:#fff;
    animation:tcRise .9s .15s var(--ease) both;
  }
   
  /* main text: white with a light sweep passing through */
  .tc-hero__text{
    position:relative;
    z-index:1;
    background: linear-gradient(100deg, #fff 0%, #fff 42%, #0d6efdd9 48%, #0dcaf0 52%, #fff 58%, #fff 100%);
    background-size:300% 100%;
    background-position:100% 0;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:tcSweep 5s 1.2s ease-in-out infinite;
  }
   
  /* outlined echo of the title (uses data-text) drifting behind */
  .tc-hero__title::before{
    content:attr(data-text);
    position:absolute; inset:0; z-index:0;
    color:transparent;
    -webkit-text-stroke:1.5px rgba(94,230,201,.55);
    transform:translate(10px,10px);
    animation:tcEcho 6s 1s ease-in-out infinite;
    pointer-events:none;
  }
   
  /* citrus brush underline that draws in */
  .tc-hero__title::after{
    content:""; position:absolute; z-index:-1;
    left:4%; right:4%; bottom:-.12em; height:.16em;
    border-radius:20px;
    background:linear-gradient(90deg,var(--aqua),#5EE6C9 45%,var(--citrus));
    transform:scaleX(0); transform-origin:left;
    animation:tcUnderline 1s .9s var(--ease) forwards;
  }
   
  /* =========================================================
     LEDE
     ========================================================= */
  .tc-hero__lede{
    max-width:580px; margin:0 auto;
    color:#bcd6dd; font-size:1.15rem; line-height:1.65;
    animation:tcRise .9s .35s var(--ease) both;
  }
   
  /* =========================================================
     RESPONSIVE
     ========================================================= */
  @media (max-width:767.98px){
    .tc-hero{ padding:80px 0 110px; }
    .tc-hero::after{ bottom:-80px; height:120px; }
    .tc-hero .container::before{ width:70px; height:70px; left:2%; top:-20px; }
    .tc-hero .container::after{ width:40px; height:40px; right:4%; top:auto; bottom:-10px; }
    .tc-hero__title::before{ transform:translate(6px,6px); }
    .tc-hero__lede{ font-size:1.02rem; }
  }
   
  /* =========================================================
     KEYFRAMES
     ========================================================= */
  @keyframes tcBgDrift{
    from{ background-position:center, 0% 100%, 100% 0%, center; }
    to{   background-position:center, 30% 70%, 70% 30%, center; }
  }
  @keyframes tcGridPan{ to{ background-position:26px 52px; } }
  @keyframes tcSpin{ to{ rotate:360deg; } }
  @keyframes tcFloat{
    0%,100%{ transform:translateY(0); }
    50%{     transform:translateY(-16px); }
  }
  @keyframes tcDrop{
    from{ opacity:0; transform:translateY(-14px) scale(.95); }
    to{   opacity:1; transform:none; }
  }
  @keyframes tcPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(15,185,177,.45); }
    50%{     box-shadow:0 0 0 9px rgba(15,185,177,0); }
  }
  @keyframes tcDraw{ to{ stroke-dashoffset:0; } }
  @keyframes tcRise{
    from{ opacity:0; transform:translateY(28px); }
    to{   opacity:1; transform:none; }
  }
  @keyframes tcSweep{
    0%,30%{  background-position:100% 0; }
    70%,100%{ background-position:0% 0; }
  }
  @keyframes tcEcho{
    0%,100%{ transform:translate(10px,10px); opacity:.9; }
    50%{     transform:translate(-8px,6px);  opacity:.5; }
  }
  @keyframes tcUnderline{ to{ transform:scaleX(1); } }
   
  @media (prefers-reduced-motion:reduce){
    .tc-hero, .tc-hero *, .tc-hero::before, .tc-hero *::before, .tc-hero *::after{
      animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
    }
  }

.pricing-wrap{
  position:relative;
  padding:40px 0 20px;
  isolation:isolate;
}
.pricing-wrap .side-glow{
  position:absolute; z-index:0; pointer-events:none;
  width:380px; height:380px; border-radius:50%;
  filter:blur(70px); opacity:.55;
}
.pricing-wrap .side-glow.l{
  left:-140px; top:10%;
  background:radial-gradient(circle,var(--aqua) 0%,transparent 70%);
  animation:pcGlowL 12s ease-in-out infinite;
}
.pricing-wrap .side-glow.r{
  right:-140px; bottom:0;
  background:radial-gradient(circle,var(--citrus) 0%,transparent 70%);
  opacity:.4;
  animation:pcGlowR 14s ease-in-out infinite;
}
 
/* the custom <product> element is inline by default.
   The entrance animation runs here (not on .plan) so it
   never blocks the card's hover transform. */
.pricing-wrap product{ display:block; animation:pcRise .9s var(--ease) both; }
.pricing-wrap product:nth-child(2){ animation-delay:.12s; }
.pricing-wrap product:nth-child(3){ animation-delay:.24s; }
.pricing-wrap product:nth-child(4){ animation-delay:.36s; }
.pricing-wrap product:nth-child(5){ animation-delay:.48s; }
.pricing-wrap product:nth-child(6){ animation-delay:.60s; }
 
/* =========================================================
   CARD
   ========================================================= */
.pricing-wrap .plan{
  position:relative; isolation:isolate;
  height:100%;
  display:flex; flex-direction:column;
  padding:34px 30px 30px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 10px 30px -22px rgba(11,43,58,.35);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
 
/* soft corner bubble that grows on hover */
.pricing-wrap .plan::before{
  content:""; position:absolute; z-index:-1;
  width:230px; height:230px; border-radius:50%;
  right:-115px; top:-115px;
  background:var(--aqua-soft); opacity:.7;
  transition:transform .8s var(--ease);
}
.pricing-wrap .plan:hover{
  transform:translateY(-10px);
  border-color:transparent;
  box-shadow:var(--shadow-pop);
}
.pricing-wrap .plan:hover::before{ transform:scale(1.7); }
 
/* ---------- Head: icon + name ---------- */
.plan-head{p   display:flex;align-items:center;gap:16px;margin-bottom:22px;cursor:pointer;display: flex;}
.plan-ico{
  flex:none; position:relative;
  width:62px; height:62px; border-radius:18px;
  display:grid; place-items:center;
  background:var(--aqua-soft);
  transition:transform .5s var(--ease), background .5s var(--ease);
}
.plan-ico::after{          /* dashed orbit ring */
  content:""; position:absolute; inset:-7px; border-radius:22px;
  border:2px dashed rgba(15,185,177,.45);
  opacity:0; transition:opacity .4s;
  animation:pcSpin 12s linear infinite;
}
.plan-ico img{
  width:62%; height:62%; object-fit:contain; display:block;
  font-size:0; color:transparent;   /* hides alt text if the image is missing */
  animation:pcFloat 4s ease-in-out infinite;
}
.plan:hover .plan-ico{ transform:rotate(-8deg) scale(1.06); }
.plan:hover .plan-ico::after{ opacity:1; }
 
.product-name{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800; font-size:1.25rem; line-height:1.2; letter-spacing:-.015em;
  color:var(--ink); margin:0;
  transition:color .3s;
}
.plan-head:hover .product-name{ color:var(--aqua-deep); }
 
/* ---------- Price ---------- */
.pricing-wrap .price{
  /* reset in case another .price rule exists on the page */
  background:none; border:0; padding:0; box-shadow:none; height:auto; transform:none;
 
  position:relative; display:flex; align-items:flex-start; gap:2px;
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800; font-size:1.5rem; line-height:1;
  color:var(--ink);
  margin:0 0 6px;
  padding-bottom:18px;
  border-bottom:1px dashed var(--line);
  flex-direction: row;
}
.pricing-wrap .price span{
  font-size:3.2rem; letter-spacing:-.03em; margin-top:-.15rem;
  background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 40%,var(--aqua) 50%,var(--ink) 60%,var(--ink) 100%);
  background-size:250% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pricing-wrap .plan:hover .price span{ animation:pcShimmer 1.2s var(--ease); }
.pricing-wrap .price::after{
  content:"One-time payment";
  position:absolute; left:0; bottom:-2px; transform:translateY(100%);
  font-family:'Figtree',sans-serif; font-weight:500; font-size:.85rem; color:var(--muted);
  padding-top:6px;
}
 
/* ---------- Description ---------- */
.pricing-wrap .plan-copy{
  color:var(--muted); font-size:1rem; line-height:1.6;
  margin:34px 0 26px;
  flex:1;                         /* pushes the button to the bottom */
}
 
/* ---------- Benefits (if you re-enable them) ---------- */
.pricing-wrap .plan-benefits-title{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1rem;
  color:var(--ink); margin:0 0 10px;
}
.pricing-wrap .plan-benefits-list{ list-style:none; padding:0; margin:0 0 26px; }
.pricing-wrap .plan-benefits-list li{
  display:flex; gap:10px; padding:6px 0; font-size:.96rem; color:var(--muted);
  opacity:0; animation:pcItem .6s var(--ease) forwards;
}
.pricing-wrap .plan-benefits-list li:nth-child(1){ animation-delay:.5s; }
.pricing-wrap .plan-benefits-list li:nth-child(2){ animation-delay:.62s; }
.pricing-wrap .plan-benefits-list li:nth-child(3){ animation-delay:.74s; }
.pricing-wrap .plan-benefits-list li:nth-child(4){ animation-delay:.86s; }
.pricing-wrap .check{
  flex:none; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--aqua); color:#fff; font-size:.72rem; font-weight:800;
}
 
/* =========================================================
   BUY NOW BUTTON (.btn-yellow)
   ========================================================= */
.pricing-wrap .btn.btn-yellow{
  --bs-btn-color:var(--ink);
  --bs-btn-bg:var(--citrus);
  --bs-btn-border-color:var(--citrus);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--citrus);
  --bs-btn-hover-border-color:var(--ink);
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--ink);
  --bs-btn-active-border-color:var(--ink);
  --bs-btn-border-width:2px;
  --bs-btn-border-radius:60px;
  --bs-btn-font-weight:700;
  --bs-btn-padding-y:.9rem;
  --bs-btn-font-size:1.02rem;
 
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  width:100%; padding:.9rem 1.5rem;
  background:var(--citrus); color:var(--ink);
  border:2px solid var(--citrus); border-radius:60px;
  font-family:'Figtree',sans-serif; font-weight:700; font-size:1.02rem; line-height:1.2;
  cursor:pointer;
  transition:color .45s var(--ease), border-color .45s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
/* liquid fill */
.pricing-wrap .btn-yellow::before{
  content:""; position:absolute; z-index:-1; left:50%; top:100%;
  width:150%; aspect-ratio:1; border-radius:42%;
  background:var(--ink);
  transform:translate(-50%,0) rotate(0deg);
  transition:top .6s var(--ease), transform 1.2s linear;
}
/* shine streak */
.pricing-wrap .btn-yellow::after{
  content:""; position:absolute; top:0; left:-75%; width:50%; height:100%; z-index:1;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg); pointer-events:none;
}
/* the SVG arrow has white strokes inline – follow the text colour instead */
.pricing-wrap .btn-yellow svg path{ stroke:currentColor; }
.pricing-wrap .btn-yellow svg{ transition:transform .35s var(--ease); }
 
.pricing-wrap .btn-yellow:hover{
  color:#fff; background:var(--citrus); border-color:var(--ink);
  transform:translateY(-3px);
  box-shadow:0 16px 30px -12px rgba(11,43,58,.45);
}
.pricing-wrap .btn-yellow:hover::before{ top:-50%; transform:translate(-50%,0) rotate(160deg); }
.pricing-wrap .btn-yellow:hover::after{ animation:pcShine .9s var(--ease); }
.pricing-wrap .btn-yellow:hover svg{ transform:translateX(5px); }
.pricing-wrap .btn-yellow:active{ color:#fff; background:var(--ink); border-color:var(--ink); transform:translateY(0) scale(.97); }
.pricing-wrap .btn-yellow:focus-visible{ outline:3px solid var(--aqua); outline-offset:3px; box-shadow:none; }
 
/* =========================================================
   FEATURED CARD – the 2nd product in the loop
   (dark card, rotating gradient border, "Most popular" ribbon)
   ========================================================= */
.pricing-wrap product:nth-child(2) .plan{
  overflow:visible;
  background:var(--ink);
  border-color:transparent;
  box-shadow:0 40px 70px -30px rgba(11,43,58,.7);
}
/* rotating gradient border */
.pricing-wrap product:nth-child(2) .plan::before{
  width:auto; height:auto; inset:-2px;
  border-radius:calc(var(--r-lg) + 2px);
  opacity:1;
  background:conic-gradient(from var(--ring), var(--aqua), #5EE6C9, var(--citrus), var(--aqua));
  animation:pcRing 6s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:2px;
}
.pricing-wrap product:nth-child(2) .plan:hover::before{ transform:none; }
 
/* ribbon */
.pricing-wrap product:nth-child(2) .plan::after{
  content:"★ Most popular";
  position:absolute; top:-14px; right:24px;
  padding:.35rem .9rem; border-radius:30px;
  background:var(--citrus); color:var(--ink);
  font-family:'Figtree',sans-serif; font-weight:700; font-size:.8rem;
  box-shadow:0 10px 20px -10px rgba(255,182,39,.9);
  animation:pcBob 2.4s ease-in-out infinite;
}
 
.pricing-wrap product:nth-child(2) .plan-ico{ background:var(--citrus); }
.pricing-wrap product:nth-child(2) .plan-ico::after{ border-color:rgba(255,182,39,.55); }
.pricing-wrap product:nth-child(2) .product-name{ color:#fff; }
.pricing-wrap product:nth-child(2) .plan-head:hover .product-name{ color:var(--citrus); }
.pricing-wrap product:nth-child(2) .price{ color:#fff; border-color:rgba(255,255,255,.15); }
.pricing-wrap product:nth-child(2) .price span{
  background-image:linear-gradient(100deg,#fff 0%,#fff 40%,var(--citrus) 50%,#fff 60%,#fff 100%);
}
.pricing-wrap product:nth-child(2) .price::after,
.pricing-wrap product:nth-child(2) .plan-copy,
.pricing-wrap product:nth-child(2) .plan-benefits-list li{ color:#bcd6dd; }
.pricing-wrap product:nth-child(2) .plan-benefits-title{ color:#fff; }
.pricing-wrap product:nth-child(2) .check{ background:var(--citrus); color:var(--ink); }
.pricing-wrap product:nth-child(2) .btn-yellow::before{ background:#fff; }
.pricing-wrap product:nth-child(2) .btn-yellow:hover{ color:var(--ink); border-color:#fff; }
 
/* =========================================================
   DESCRIPTION LIST  (.plan-copy ul li)
   Also matches a <ul> placed right after .plan-copy, because a
   browser closes a <p> before a <ul> in server-rendered HTML.
   ========================================================= */
.pricing-wrap :is(.plan-copy ul, .plan-copy + ul){
  list-style:none; padding:0; margin:18px 0 0;
  display:grid; gap:10px;
}
.pricing-wrap :is(.plan-copy ul, .plan-copy + ul) li{
  position:relative;
  padding:11px 14px 11px 46px;
  border-radius:14px;
  background:var(--mist);
  border:1px solid transparent;
  color:var(--ink); font-size:.95rem; font-weight:500; line-height:1.45;
  opacity:0;
  animation:pcItem .6s var(--ease) forwards;
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
/* check badge */
.pricing-wrap :is(.plan-copy ul, .plan-copy + ul) li::before{
  content:""; position:absolute; left:12px; top:11px;
  width:22px; height:22px; border-radius:50%;
  background:var(--aqua) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat;
  box-shadow:0 0 0 4px rgba(15,185,177,.15);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
/* accent bar that grows on hover */
.pricing-wrap :is(.plan-copy ul, .plan-copy + ul) li::after{
  content:""; position:absolute; left:0; top:20%; bottom:20%; width:3px; border-radius:3px;
  background:linear-gradient(var(--aqua),var(--citrus));
  transform:scaleY(0); transition:transform .4s var(--ease);
}
.pricing-wrap :is(.plan-copy ul, .plan-copy + ul) li:hover{
  background:var(--aqua-soft);
  border-color:rgba(15,185,177,.35);
  transform:translateX(4px);
  box-shadow:0 10px 20px -16px rgba(8,143,138,.8);
}
.pricing-wrap :is(.plan-copy ul, .plan-copy + ul) li:hover::before{
  animation:pcCheck .5s var(--ease);
  box-shadow:0 0 0 6px rgba(15,185,177,.22);
}
.pricing-wrap :is(.plan-copy ul, .plan-copy + ul) li:hover::after{ transform:scaleY(1); }
 
/* staggered entrance */
.pricing-wrap :is(.plan-copy ul, .plan-copy + ul) li:nth-child(1){ animation-delay:.45s; }
.pricing-wrap :is(.plan-copy ul, .plan-copy + ul) li:nth-child(2){ animation-delay:.55s; }
.pricing-wrap :is(.plan-copy ul, .plan-copy + ul) li:nth-child(3){ animation-delay:.65s; }
.pricing-wrap :is(.plan-copy ul, .plan-copy + ul) li:nth-child(4){ animation-delay:.75s; }
.pricing-wrap :is(.plan-copy ul, .plan-copy + ul) li:nth-child(5){ animation-delay:.85s; }
.pricing-wrap :is(.plan-copy ul, .plan-copy + ul) li:nth-child(n+6){ animation-delay:.95s; }
 
/* featured (dark) card */
.pricing-wrap product:nth-child(2) :is(.plan-copy ul, .plan-copy + ul) li{
  background:rgba(255,255,255,.06);
  color:#d8eef1;
}
.pricing-wrap product:nth-child(2) :is(.plan-copy ul, .plan-copy + ul) li::before{
  background:var(--citrus) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2B3A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat;
  box-shadow:0 0 0 4px rgba(255,182,39,.18);
}
.pricing-wrap product:nth-child(2) :is(.plan-copy ul, .plan-copy + ul) li:hover{
  background:rgba(15,185,177,.16);
  border-color:rgba(94,230,201,.35);
  color:#fff;
}
 
/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width:992px){
  /* lift the featured card slightly above its neighbours */
  .pricing-wrap product:nth-child(2) .plan{ transform:scale(1.035); }
  .pricing-wrap product:nth-child(2) .plan:hover{ transform:scale(1.035) translateY(-10px); }
}
@media (max-width:767.98px){
  .pricing-wrap{ padding-top:24px; }
  .pricing-wrap .plan{ padding:30px 22px 24px; }
  .pricing-wrap .price span{ font-size:2.8rem; }
  .pricing-wrap .side-glow{ width:240px; height:240px; }
}
 
/* =========================================================
   KEYFRAMES
   ========================================================= */
@keyframes pcRise{
  from{ opacity:0; transform:translateY(40px) scale(.97); }
  to{   opacity:1; transform:none; }
}
@keyframes pcGlowL{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{     transform:translate(60px,40px) scale(1.15); }
}
@keyframes pcGlowR{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{     transform:translate(-50px,-50px) scale(1.2); }
}
@keyframes pcFloat{
  0%,100%{ transform:translateY(0); }
  50%{     transform:translateY(-4px); }
}
@keyframes pcSpin{ to{ transform:rotate(360deg); } }
@keyframes pcRing{ to{ --ring:360deg; } }
@keyframes pcBob{
  0%,100%{ transform:translateY(0); }
  50%{     transform:translateY(-4px); }
}
@keyframes pcShimmer{
  from{ background-position:100% 0; }
  to{   background-position:0% 0; }
}
@keyframes pcShine{ to{ left:130%; } }
@keyframes pcCheck{
  0%{ transform:scale(1) rotate(0); }
  45%{ transform:scale(1.25) rotate(-12deg); }
  100%{ transform:scale(1) rotate(0); }
}
@keyframes pcItem{
  from{ opacity:0; transform:translateX(-10px); }
  to{   opacity:1; transform:none; }
}
 
@media (prefers-reduced-motion:reduce){
  .pricing-wrap *, .pricing-wrap *::before, .pricing-wrap *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
/****************Shop********************/


/****************Product Details********************/

   .product-details-section{
    position:relative; isolation:isolate; overflow:hidden;
    min-height:80vh;
    display:flex; align-items:center;
    padding:110px 0 120px;
  }
     
  .product-details-section .luxe-container{
    position:relative; z-index:1;
    max-width:1200px; margin:0 auto;
    padding-left:20px; padding-right:20px;
  }
  .product-details-section product{ display:block; }
   
  /* =========================================================
     CARD
     ========================================================= */
  .product-content-wrapper{
    position:relative;
    isolation:isolate;
    padding:44px 48px 46px;
    border: none;
    border-radius:var(--r-lg);
    background: linear-gradient(160deg, #0d6efd26, #0dcaf008);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    box-shadow:0 50px 90px -40px rgba(0,0,0,.75);
    animation:pdRise .9s var(--ease) both;
    /* background:
      radial-gradient(560px 360px at 18% 15%, rgba(15,185,177,.32), transparent 70%),
      radial-gradient(480px 340px at 88% 85%, rgba(255,182,39,.16), transparent 70%),
      linear-gradient(160deg,#0F3A4F 0%, var(--ink) 60%, #082230 100%); */
    background-size:140% 140%, 140% 140%, 100% 100%;
    animation:pdBgDrift 18s ease-in-out infinite alternate;
  }
  /* rotating gradient border */
  .product-content-wrapper::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    border-radius:inherit;
    padding:1.5px;
    background:conic-gradient(from var(--pdRing), rgba(15,185,177,.9), rgba(94,230,201,.15), rgba(255,182,39,.85), rgba(15,185,177,.15), rgba(15,185,177,.9));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    animation:pdRing 8s linear infinite;
  }
  /* light beam that sweeps across the card every few seconds */
  .product-content-wrapper::after{
    content:""; position:absolute; inset:0; z-index:-1;
    border-radius:inherit; pointer-events:none;
    background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.07) 48%,rgba(94,230,201,.10) 52%,transparent 65%);
    background-size:250% 100%; background-position:120% 0;
    animation:pdBeam 7s 1.5s ease-in-out infinite;
  }
   
  /* ---------- Breadcrumb ---------- */
  .product-breadcrumb-wrapper{ margin-bottom:30px; animation:pdSlide .7s .2s var(--ease) both; }
  .product-breadcrumb{
    display:inline-flex !important; flex-wrap:wrap; gap:.55rem;
    padding:.4rem 1rem;
    border-radius:50px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    font-size:.92rem; font-weight:600; color:#7fa2ad;
  }
  .product-breadcrumb a{
    position:relative;
    color: var(--aqua);
    text-decoration:none;
    transition:color .3s;
  }
  .product-breadcrumb a::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:2px;
    background:var(--citrus); transform:scaleX(0); transform-origin:right;
    transition:transform .4s var(--ease);
  }
  .product-breadcrumb a:hover{ color:var(--citrus); }
  .product-breadcrumb a:hover::after{ transform:scaleX(1); transform-origin:left; }
  .product-breadcrumb a:focus-visible{ outline:2px solid var(--citrus); outline-offset:3px; border-radius:4px; }
  .product-breadcrumb li.active{
    color: #95a5af;
    max-width:46ch;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
   
  /* ---------- Image + title + price ---------- */
  /* let the image column size to the tile instead of a fixed 2/12 */
  .product-gallery-wrapper .row > .col-2{ flex:0 0 auto; width:auto; margin-right:14px; }
  .product-gallery-wrapper{
    padding-bottom:30px;
    border-bottom:1px dashed rgba(255,255,255,.14);
  }
  .product-gallery-wrapper .row > .col-10{ flex:1 1 0; width:auto; min-width:0; }
   
  .product-gallery-img{
    position:relative;
    width:108px;
    height:108px;
    border-radius:30px;
    display:grid;
    place-items:center;
    background: linear-gradient(145deg, #0d6efd, #0d8bf0 55%, var(--citrus-deep));
    box-shadow: 0 0 0 10px #316abe0a, 0 24px 40px -18px #074aad;
    animation:pdPop .8s .3s var(--ease) both;
  }
  .product-gallery-img::after{                 /* soft ripple ring */
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    border: 2px solid #0dcaf0;
    animation:pdRipple 2.8s 1.2s ease-out infinite;
  }
  .product-gallery-img img{
    width:60%; height:60%; object-fit:contain; display:block;
    font-size:0; color:transparent;            /* hides alt text if the image is missing */
    animation:pdFloat 4.5s ease-in-out infinite;
  }
   
  .product-title{
    font-family:'Bricolage Grotesque',sans-serif;
    font-weight:800; font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.05; letter-spacing:-.025em;
    margin:0 0 .7rem;
    animation:pdRise .8s .35s var(--ease) both;
  }
   
  .product-price-wrapper{
    flex-wrap:wrap;
    animation:pdRise .8s .45s var(--ease) both;
  }
  .product-price{
    display:inline-flex;
    align-items:flex-start;
    gap:2px;
    font-family:'Bricolage Grotesque',sans-serif;
    font-weight:800;
    font-size:1.6rem;
    line-height:1;
    color: #0b2b3a;
  }
  .product-price > span{
    font-size:3.1rem;
    letter-spacing:-.03em;
    margin-top:-.15rem;
    /* background:linear-gradient(100deg,#fff 0%,#fff 40%,#9ff2e4 47%,var(--citrus) 53%,#fff 60%,#fff 100%); */
    background-size:300% 100%;
    background-position:100% 0;
    -webkit-background-clip:text;
    background-clip:text;
    color: #0b2b3a;
    animation:pdSweep 5s 1.4s ease-in-out infinite;
  }
  /* "One-time payment" chip next to the price */
  .product-price-wrapper::after{
    content:"One-time payment";
    padding:.3rem .8rem;
    border-radius:30px;
    background: #0dcaf04a;
    border: 1px solid #0dcaf0b8;
    color: #2d458c;
    font-family:'Figtree',sans-serif;
    font-size:.82rem;
    font-weight:600;
  }
   
  /* ---------- Description ---------- */
  .product-content-wrapper .product-description.text-light{
    color:#bcd6dd !important;                  /* softer than Bootstrap's text-light */
    font-size:1.08rem; line-height:1.75;
    max-width:72ch;
    margin-top:28px !important;
    margin-bottom:34px;
    animation:pdRise .8s .55s var(--ease) both;
  }
  .product-content-wrapper .product-description.text-light p{
    color: #313136 !important;
  }
  /* service details list (if you re-enable .plan-copy) */
  .product-content-wrapper .plan-copy{ color:#bcd6dd; margin:0 0 30px; }
  .product-content-wrapper .plan-copy ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
  .product-content-wrapper .plan-copy li{
    position:relative; padding:11px 14px 11px 46px; border-radius:14px;
    background:rgba(255,255,255,.06); color:#d8eef1; font-weight:500;
    opacity:0; animation:pdSlide .6s var(--ease) forwards;
    transition:background .35s var(--ease), transform .35s var(--ease);
  }
  .product-content-wrapper .plan-copy li:nth-child(2){ animation-delay:.1s; }
  .product-content-wrapper .plan-copy li:nth-child(3){ animation-delay:.2s; }
  .product-content-wrapper .plan-copy li:nth-child(n+4){ animation-delay:.3s; }
  .product-content-wrapper .plan-copy li::before{
    content:""; position:absolute; left:12px; top:11px; width:22px; height:22px; border-radius:50%;
    background:var(--citrus) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2B3A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat;
  }
  .product-content-wrapper .plan-copy li:hover{ background:rgba(15,185,177,.16); transform:translateX(4px); }
   
  /* =========================================================
     CHECKOUT BUTTON (.btn-yellow) – same hover as the site
     ========================================================= */
  .product-cta-wrapper{ animation:pdRise .8s .65s var(--ease) both; }
   
  .product-cta-wrapper .btn.btn-yellow{
    --bs-btn-color:var(--ink); --bs-btn-bg:var(--citrus); --bs-btn-border-color:var(--citrus);
    --bs-btn-hover-color:var(--ink); --bs-btn-hover-bg:var(--citrus); --bs-btn-hover-border-color:#fff;
    --bs-btn-active-color:var(--ink); --bs-btn-active-bg:#fff; --bs-btn-active-border-color:#fff;
   
    position:relative; isolation:isolate; overflow:hidden;
    align-items:center; gap:.4rem;
    padding:1rem 2rem;
    background:var(--citrus); color:var(--ink);
    border:2px solid var(--citrus); border-radius:60px;
    font-family:'Figtree',sans-serif; font-weight:700; font-size:1.08rem; line-height:1.2;
    box-shadow:0 0 0 0 rgba(255,182,39,.55);
    animation:pdBtnPulse 2.8s 1.6s ease-in-out infinite;
    transition:color .45s var(--ease), border-color .45s var(--ease), transform .35s var(--ease);
  }
  .product-cta-wrapper .btn-yellow::before{       /* white liquid fill */
    content:""; position:absolute; z-index:-1; left:50%; top:100%;
    width:150%; aspect-ratio:1; border-radius:42%;
    background:#fff;
    transform:translate(-50%,0) rotate(0deg);
    transition:top .6s var(--ease), transform 1.2s linear;
  }
  .product-cta-wrapper .btn-yellow::after{        /* shine */
    content:""; position:absolute; top:0; left:-75%; width:50%; height:100%; z-index:1;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.6),transparent);
    transform:skewX(-20deg); pointer-events:none;
  }
  .product-cta-wrapper .btn-yellow svg path{ stroke:currentColor; }   /* arrow follows text colour */
  .product-cta-wrapper .btn-yellow svg{ transition:transform .35s var(--ease); }
   
  .product-cta-wrapper .btn-yellow:hover{
    color:var(--ink); background:var(--citrus); border-color:#fff;
    transform:translateY(-3px);
    animation:none;
    box-shadow:0 18px 34px -12px rgba(255,182,39,.65);
  }
  .product-cta-wrapper .btn-yellow:hover::before{ top:-50%; transform:translate(-50%,0) rotate(160deg); }
  .product-cta-wrapper .btn-yellow:hover::after{ animation:pdShine .9s var(--ease); }
  .product-cta-wrapper .btn-yellow:hover svg{ transform:translateX(5px); }
  .product-cta-wrapper .btn-yellow:active{ transform:translateY(0) scale(.97); }
  .product-cta-wrapper .btn-yellow:focus-visible{ outline:3px solid var(--aqua); outline-offset:3px; }
   
  /* secondary button (if you re-enable it) */
  .product-secondary-btn{
    width:max-content; padding:.9rem 1.8rem; border-radius:60px;
    background:transparent; color:#fff; border:2px solid rgba(255,255,255,.3);
    font-weight:700; transition:all .35s var(--ease);
  }
  .product-secondary-btn:hover{ border-color:var(--aqua); color:var(--aqua); transform:translateY(-2px); }
   
  /* =========================================================
     RESPONSIVE
     ========================================================= */
  @media (max-width:991.98px){
    .product-details-section{ padding:90px 0 90px; min-height:auto; }
    .product-content-wrapper{ padding:34px 30px 36px; }
  }
  @media (max-width:575.98px){
    .product-details-section{ padding:70px 0 70px; }
    .product-details-section::after{ width:90px; height:90px; top:4%; }
    .product-content-wrapper{ padding:26px 20px 28px; border-radius:22px; }
    .product-gallery-img{ width:76px; height:76px; border-radius:22px; }
    .product-gallery-wrapper .row > .col-2{ margin-right:4px; }
    .product-price > span{ font-size:2.5rem; }
    .product-breadcrumb li.active{ max-width:22ch; }
    .product-cta-wrapper .btn.btn-yellow{ width:100% !important; padding:1rem 1.2rem; }
  }
   
  /* =========================================================
     KEYFRAMES
     ========================================================= */
  @keyframes pdBgDrift{
    from{ background-position:0% 0%, 100% 100%, center; }
    to{   background-position:30% 30%, 70% 70%, center; }
  }
  @keyframes pdGridPan{ to{ background-position:26px 52px; } }
  @keyframes pdSpin{ to{ rotate:360deg; } }
  @keyframes pdFloat{
    0%,100%{ transform:translateY(0); }
    50%{     transform:translateY(-10px); }
  }
  @keyframes pdRise{
    from{ opacity:0; transform:translateY(30px); }
    to{   opacity:1; transform:none; }
  }
  @keyframes pdSlide{
    from{ opacity:0; transform:translateX(-16px); }
    to{   opacity:1; transform:none; }
  }
  @keyframes pdPop{
    0%{   opacity:0; transform:scale(.6) rotate(-12deg); }
    70%{  opacity:1; transform:scale(1.06) rotate(3deg); }
    100%{ transform:scale(1) rotate(0); }
  }
  @keyframes pdRipple{
    0%{   transform:scale(1);    opacity:.9; }
    100%{ transform:scale(1.35); opacity:0; }
  }
  @keyframes pdRing{ to{ --pdRing:360deg; } }
  @keyframes pdBeam{
    0%,40%{  background-position:120% 0; }
    80%,100%{ background-position:-20% 0; }
  }
  @keyframes pdSweep{
    0%,30%{  background-position:100% 0; }
    70%,100%{ background-position:0% 0; }
  }
  @keyframes pdBtnPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(255,182,39,.55); }
    50%{     box-shadow:0 0 0 12px rgba(255,182,39,0); }
  }
  @keyframes pdShine{ to{ left:130%; } }
   
  @media (prefers-reduced-motion:reduce){
    .product-details-section, .product-details-section *,
    .product-details-section::before, .product-details-section::after,
    .product-details-section *::before, .product-details-section *::after{
      animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
    }
  }

  :is(.product-description, .plan-copy) ul{
    list-style:none; margin:18px 0 0; padding:0;
    display:grid; gap:12px;
  }
  :is(.product-description, .plan-copy) ul li{
    position:relative;
    padding:4px 0 4px 40px;
    color:var(--ink); font-weight:500; line-height:1.55;
    opacity:0; animation:blIn .6s var(--ease) forwards;
    transition:transform .35s var(--ease), color .3s;
  }
  /* tick badge */
  :is(.product-description, .plan-copy) ul li::before{
    content:""; position:absolute; left:0; top:3px;
    width:26px; height:26px; border-radius:9px;
    background:var(--aqua) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;
    box-shadow:0 8px 16px -8px rgba(8,143,138,.8);
    transform:rotate(-8deg);
    transition:transform .45s var(--ease), background-color .35s;
  }
  /* soft ring that ripples out on hover */
  :is(.product-description, .plan-copy) ul li::after{
    content:""; position:absolute; left:0; top:3px;
    width:26px; height:26px; border-radius:9px;
    border:2px solid var(--aqua);
    opacity:0; pointer-events:none;
  }
  :is(.product-description, .plan-copy) ul li:hover{ transform:translateX(4px); }
  :is(.product-description, .plan-copy) ul li:hover::before{
    transform:rotate(0) scale(1.08);
    background-color:var(--citrus);
  }
  :is(.product-description, .plan-copy) ul li:hover::after{
    border-color:var(--citrus);
    animation:blRipple .7s var(--ease);
  }
  
  /* staggered entrance */
  :is(.product-description, .plan-copy) ul li:nth-child(1){ animation-delay:.10s; }
  :is(.product-description, .plan-copy) ul li:nth-child(2){ animation-delay:.18s; }
  :is(.product-description, .plan-copy) ul li:nth-child(3){ animation-delay:.26s; }
  :is(.product-description, .plan-copy) ul li:nth-child(4){ animation-delay:.34s; }
  :is(.product-description, .plan-copy) ul li:nth-child(5){ animation-delay:.42s; }
  :is(.product-description, .plan-copy) ul li:nth-child(n+6){ animation-delay:.50s; }
  
  /* on the dark product card */
  .product-content-wrapper :is(.product-description, .plan-copy) ul li{color: #313136 !important;}
  .product-content-wrapper :is(.product-description, .plan-copy) ul li:hover{color: #313136 !important;}
  .product-content-wrapper :is(.product-description, .plan-copy) ul li::before{
    background-color:var(--citrus);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2B3A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    box-shadow:0 8px 16px -8px rgba(255,182,39,.8);
  }
  .product-content-wrapper :is(.product-description, .plan-copy) ul li:hover::before{ background-color:var(--aqua); }
  
  @keyframes blIn{
    from{ opacity:0; transform:translateX(-12px); }
    to{   opacity:1; transform:none; }
  }
  @keyframes blRipple{
    from{ opacity:.9; transform:scale(1); }
    to{   opacity:0;  transform:scale(1.7); }
  }
  @media (prefers-reduced-motion:reduce){
    :is(.product-description, .plan-copy) ul li{ animation:none; opacity:1; }
  }


/****************Product Details********************/

/****************Check out CSS********************/

/* =========================================================
   CHECKOUT HEADER (.tc-hero) – scoped copy of hero.css
   ========================================================= */
/* =========================================================
   SECTION
   ========================================================= */
   main.checkout-page .tc-hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding:110px 0 150px;
    text-align:center;
    color:#fff;
    background: radial-gradient(520px 320px at 50% 0%, #0e3791f0, transparent 70%), radial-gradient(420px 300px at 8% 85%, #0dcaf06b, transparent 70%), radial-gradient(420px 300px at 92% 70%, rgba(255, 182, 39, .16), transparent 70%), linear-gradient(180deg, #0a4295 0%, #2563eb 100%);
    background-size:100% 100%, 140% 140%, 140% 140%, 100% 100%;
    animation:tcBgDrift 16s ease-in-out infinite alternate;
  }
   
  main.checkout-page .tc-hero::before{
    content:""; position:absolute; inset:-40px; z-index:-1;
    background-image:radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.3px);
    background-size:26px 26px;
    -webkit-mask:radial-gradient(ellipse 60% 70% at 50% 40%, #000 30%, transparent 75%);
            mask:radial-gradient(ellipse 60% 70% at 50% 40%, #000 30%, transparent 75%);
    animation:tcGridPan 22s linear infinite;
  }
   
  main.checkout-page .tc-hero::after{
    content:""; position:absolute; z-index:1;
    left:-15%; right:-15%; bottom:-70px; height:140px;
    background:var(--white);
    border-radius:50% 50% 0 0 / 100% 100% 0 0;
  }
   
  main.checkout-page .tc-hero .container{ position:relative; z-index:2; }
   
  main.checkout-page .tc-hero .container::before,
  main.checkout-page .tc-hero .container::after{
    content:""; position:absolute; z-index:-1; pointer-events:none; border-radius:50%;
  }
  main.checkout-page .tc-hero .container::before{
    width:120px; height:120px; left:4%; top:10px;
    border:2px dashed rgba(94,230,201,.45);
    animation:tcSpin 18s linear infinite, tcFloat 7s ease-in-out infinite;
  }
  main.checkout-page .tc-hero .container::after{
    width:70px; height:70px; right:7%; top:58%;
    background:radial-gradient(circle at 30% 30%, #0d8bf0, var(--citrus) 55%, var(--citrus-deep));
    box-shadow:0 0 0 12px rgba(255,182,39,.12), 0 20px 40px -10px rgba(255,182,39,.6);
    animation:tcFloat 6s ease-in-out infinite reverse;
  }
   
  main.checkout-page .tc-hero__site{
    display:flex; align-items:center; gap:.55rem;
    width:max-content; max-width:100%;
    margin:0 auto 1.4rem; padding:.45rem 1.05rem .45rem .55rem;
    border-radius:50px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(15,185,177,.45);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    color:#d8f3f0; font-family:'Figtree',sans-serif; font-weight:600; font-size:.95rem; line-height:1.2;
    box-shadow:0 0 0 0 rgba(15,185,177,.45);
    animation:tcDrop .8s var(--ease) both, tcPulse 3s 1.2s ease-in-out infinite;
  }
  main.checkout-page .tc-icon{
    width:30px; height:30px; padding:6px; flex:none;
    border-radius:50%;
    background:var(--aqua);
    fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  }
  main.checkout-page .tc-icon path{ stroke-dasharray:60; stroke-dashoffset:60; animation:tcDraw 1.2s .5s var(--ease) forwards; }
  main.checkout-page .tc-icon path + path{ animation-delay:1.1s; }
   
  main.checkout-page .tc-hero__title{
    position:relative; display:inline-block;
    margin:0 0 1.2rem;
    font-family:'Bricolage Grotesque',sans-serif;
    font-weight:800; font-size:clamp(2.8rem,7vw,5.2rem); line-height:1; letter-spacing:-.035em;
    color:#fff;
    animation:tcRise .9s .15s var(--ease) both;
  }
   
  main.checkout-page .tc-hero__text{
    position:relative; z-index:1;
    background:linear-gradient(100deg,#fff 0%,#fff 42%,#9ff2e4 48%,var(--citrus) 52%,#fff 58%,#fff 100%);
    background-size:300% 100%; background-position:100% 0;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:tcSweep 5s 1.2s ease-in-out infinite;
  }
   
  main.checkout-page .tc-hero__title::before{
    content:attr(data-text);
    position:absolute; inset:0; z-index:0;
    color:transparent;
    -webkit-text-stroke:1.5px rgba(94,230,201,.55);
    transform:translate(10px,10px);
    animation:tcEcho 6s 1s ease-in-out infinite;
    pointer-events:none;
  }
   
  main.checkout-page .tc-hero__title::after{
    content:""; position:absolute; z-index:-1;
    left:4%; right:4%; bottom:-.12em; height:.16em;
    border-radius:20px;
    background:linear-gradient(90deg,var(--aqua),#5EE6C9 45%,var(--citrus));
    transform:scaleX(0); transform-origin:left;
    animation:tcUnderline 1s .9s var(--ease) forwards;
  }
   
  main.checkout-page .tc-hero__lede{
    max-width:580px; margin:0 auto;
    color:#bcd6dd; font-size:1.15rem; line-height:1.65;
    animation:tcRise .9s .35s var(--ease) both;
  }
   
  /* =========================================================
     RESPONSIVE
     ========================================================= */
  @media (max-width:767.98px){
    main.checkout-page .tc-hero{ padding:80px 0 110px; }
    main.checkout-page .tc-hero::after{ bottom:-80px; height:120px; }
    main.checkout-page .tc-hero .container::before{ width:70px; height:70px; left:2%; top:-20px; }
    main.checkout-page .tc-hero .container::after{ width:40px; height:40px; right:4%; top:auto; bottom:-10px; }
    main.checkout-page .tc-hero__title::before{ transform:translate(6px,6px); }
    main.checkout-page .tc-hero__lede{ font-size:1.02rem; }
  }
   
  /* =========================================================
     KEYFRAMES
     ========================================================= */
  @keyframes tcBgDrift{
    from{ background-position:center, 0% 100%, 100% 0%, center; }
    to{   background-position:center, 30% 70%, 70% 30%, center; }
  }
  @keyframes tcGridPan{ to{ background-position:26px 52px; } }
  @keyframes tcSpin{ to{ rotate:360deg; } }
  @keyframes tcFloat{
    0%,100%{ transform:translateY(0); }
    50%{     transform:translateY(-16px); }
  }
  @keyframes tcDrop{
    from{ opacity:0; transform:translateY(-14px) scale(.95); }
    to{   opacity:1; transform:none; }
  }
  @keyframes tcPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(15,185,177,.45); }
    50%{     box-shadow:0 0 0 9px rgba(15,185,177,0); }
  }
  @keyframes tcDraw{ to{ stroke-dashoffset:0; } }
  @keyframes tcRise{
    from{ opacity:0; transform:translateY(28px); }
    to{   opacity:1; transform:none; }
  }
  @keyframes tcSweep{
    0%,30%{  background-position:100% 0; }
    70%,100%{ background-position:0% 0; }
  }
  @keyframes tcEcho{
    0%,100%{ transform:translate(10px,10px); opacity:.9; }
    50%{     transform:translate(-8px,6px);  opacity:.5; }
  }
  @keyframes tcUnderline{ to{ transform:scaleX(1); } }
   
  @media (prefers-reduced-motion:reduce){
    main.checkout-page .tc-hero,
  main.checkout-page .tc-hero *,
  main.checkout-page .tc-hero::before,
  main.checkout-page .tc-hero *::before,
  main.checkout-page .tc-hero *::after{
      animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
    }
  }
   
   
  /* =========================================================
     PAGE + LAYOUT
     ========================================================= */
  main.checkout-page{ background:var(--white); }
   
  main.checkout-page .tc-hero{ padding:90px 0 130px; }
   
  #prospect_checkout.tc-checkout{
    position:relative; z-index:3;
    margin-top:-80px; padding-bottom:100px;
  }
  #prospect_checkout.tc-checkout .luxe-container{
    max-width:1200px;
    /* margin:0 auto; */
    /* padding:0 20px; */
  }
   
  #prospect_checkout .checkout-wrapper{
    display:grid;
    grid-template-columns:minmax(0,1fr) 410px;
    gap:28px;
    align-items:start;
    counter-reset:co-step;          /* numbers the form sections 1, 2, 3 */
  }
  #prospect_checkout #checkout-main{ grid-column:1; display:flex; flex-direction:column; gap:22px; min-width:0; }
  #prospect_checkout .checkout-summary{ grid-column:2; grid-row:1; }
  #prospect_checkout .checkout-form-col{ display:flex; flex-direction:column; gap:22px; }
   
  #prospect_checkout .checkout-steps{
    display:flex; flex-wrap:wrap; align-items:center; gap:8px;
    width:max-content; max-width:100%;
    padding:8px; border-radius:50px;
    background:var(--white); border:1px solid var(--line);
    box-shadow:var(--shadow-soft);
    font-size:.78rem; font-weight:700; letter-spacing:.06em;
    animation:coDrop .7s .1s var(--ease) both;
  }
  #prospect_checkout .checkout-steps span:nth-child(odd){
    display:inline-flex; align-items:center; gap:6px;
    padding:.4rem .85rem; border-radius:30px;
    background:var(--aqua-soft); color:var(--aqua-deep);
  }
  #prospect_checkout .checkout-steps span:nth-child(odd):not(.active)::before{   /* finished steps get a tick */
    content:""; width:14px; height:14px; border-radius:50%;
    background:var(--aqua) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/9px no-repeat;
  }
  #prospect_checkout .checkout-steps span:nth-child(even){ color:#9db4bc; font-size:1rem; letter-spacing:0; }
  #prospect_checkout .checkout-steps span.active{
    background:var(--ink); color:#fff;
    position:relative;
    animation:coStepPulse 2.4s 1s ease-in-out infinite;
  }
  #prospect_checkout .checkout-steps span.active::before{
    content:""; width:8px; height:8px; border-radius:50%; background:var(--citrus);
    box-shadow:0 0 0 3px rgba(255,182,39,.3);
  }
   
  #prospect_checkout .checkout-section{
    position:relative;
    padding:32px 32px 14px;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:24px;
    box-shadow:0 14px 36px -24px rgba(11,43,58,.35);
    animation:coRise .8s var(--ease) both;
    transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
  }
  #prospect_checkout .checkout-form-col:first-child .checkout-section:nth-of-type(1){ animation-delay:.2s; }
  #prospect_checkout .checkout-form-col:first-child .checkout-section:nth-of-type(2){ animation-delay:.32s; }
  #prospect_checkout .checkout-form-col:last-child  .checkout-section{ animation-delay:.44s; }
   
  #prospect_checkout .checkout-section:focus-within{
    border-color:rgba(15,185,177,.55);
    box-shadow:0 22px 44px -26px rgba(8,143,138,.55);
  }
   
  #prospect_checkout .checkout-title{
    counter-increment:co-step;
    display:flex;
    align-items:center;
    gap:12px;
    font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size:1.35rem;
    letter-spacing:-.015em;
    color:var(--ink);
    margin:0 0 22px;
  }
  #prospect_checkout .checkout-title::before{
    content:counter(co-step);
    flex:none; width:34px; height:34px; border-radius:11px;
    display:grid; place-items:center;
    background:var(--ink); color:var(--citrus);
    font-size:.95rem; font-weight:800;
    transition:transform .45s var(--ease), background .45s var(--ease), color .45s;
  }
  #prospect_checkout .checkout-section:focus-within .checkout-title::before{
    background:var(--aqua); color:#fff; transform:rotate(-8deg) scale(1.06);
  }
   
  #prospect_checkout.tc-checkout .form-group{ margin-bottom:18px; }
  #prospect_checkout.tc-checkout .form-group label{
    display:block; margin-bottom:7px;
    font-size:.88rem; font-weight:600; color:var(--ink);
  }
   
  #prospect_checkout.tc-checkout .form-group input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
  #prospect_checkout.tc-checkout .form-group select{
    width:100%; height:52px;
    padding:0 16px;
    background:var(--mist);
    border:1.5px solid var(--line);
    border-radius:14px;
    font-family:'Figtree',sans-serif; font-size:1rem; color:var(--ink);
    outline:none;
    transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
  }
  #prospect_checkout.tc-checkout .form-group select{
    -webkit-appearance:none; appearance:none;
    padding-right:44px; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23088F8A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 16px center; background-size:16px;
  }
  #prospect_checkout.tc-checkout .form-group input:hover,
  #prospect_checkout.tc-checkout .form-group select:hover{ border-color:#bcd6da; }
  #prospect_checkout.tc-checkout .form-group input:focus,
  #prospect_checkout.tc-checkout .form-group select:focus{
    background-color:var(--white);
    border-color:var(--aqua);
    box-shadow:0 0 0 4px rgba(15,185,177,.16);
  }
  #prospect_checkout.tc-checkout .form-group:focus-within label{ color:var(--aqua-deep); }
   
  #prospect_checkout.tc-checkout .form-group :is(input,select):is(.error,.is-invalid,.has-error,[aria-invalid="true"]),
  #prospect_checkout.tc-checkout .form-group.has-error :is(input,select){
    border-color:var(--coral); background-color:#fff6f5;
    box-shadow:0 0 0 4px rgba(255,107,91,.14);
    animation:coShake .4s ease;
  }
  #prospect_checkout.tc-checkout :is(.error-message,.invalid-feedback,label.error,span.error,.error-msg){
    display:block; margin-top:6px;
    color:#d6402f; font-size:.84rem; font-weight:600;
  }
   
  #prospect_checkout .payment-icons-strip{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    margin:-6px 0 18px;
  }
  #prospect_checkout .payment-icons-strip img{ height:30px; width:auto; display:block; }
   
  #prospect_checkout .payment-options{ display:grid; gap:12px; margin-bottom:18px; }
  #prospect_checkout .payment-option{
    border:1.5px solid var(--line);
    border-radius:18px;
    background:var(--white);
    overflow:hidden;
    transition:border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
  }
  #prospect_checkout .payment-option:hover{ border-color:#bcd6da; }
  #prospect_checkout .payment-option:has(input[type="radio"]:checked){
    border-color: #0dcaf054;
    background: linear-gradient(180deg, #0dcaf03d, #fff 70%);
    box-shadow:0 16px 30px -22px rgba(8,143,138,.7);
  }
  #prospect_checkout .payment-option-header{
    display:flex; align-items:center; gap:14px;
    padding:16px 18px; margin:0; cursor:pointer;
    font-weight:700; color:var(--ink);
  }
  #prospect_checkout .payment-option-header img{ height:26px; width:auto; }
   
  #prospect_checkout.tc-checkout .payment-option-header input[type="radio"]{
    -webkit-appearance:none; appearance:none; flex:none;
    width:22px; height:22px; margin:0; border-radius:50%;
    border:2px solid #b5cbd0; background:#fff; cursor:pointer;
    display:grid; place-items:center;
    transition:border-color .3s var(--ease);
  }
  #prospect_checkout.tc-checkout .payment-option-header input[type="radio"]::after{
    content:""; width:10px; height:10px; border-radius:50%;
    background:var(--aqua); transform:scale(0);
    transition:transform .35s var(--ease);
  }
  #prospect_checkout.tc-checkout .payment-option-header input[type="radio"]:checked{ border-color:var(--aqua); }
  #prospect_checkout.tc-checkout .payment-option-header input[type="radio"]:checked::after{ transform:scale(1); animation:coPop .45s var(--ease); }
  #prospect_checkout.tc-checkout .payment-option-header input[type="radio"]:focus-visible{ outline:3px solid var(--citrus); outline-offset:2px; }
   
  #prospect_checkout .card-fields{
    padding:4px 18px 4px;
    border-top:1px dashed var(--line);
    padding-top:18px;
  }
  #prospect_checkout .payment-option:has(input:checked) .card-fields{ animation:coReveal .5s var(--ease) both; }
   
  #prospect_checkout .checkout-actions{
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    padding:4px 4px 0;
    animation:coRise .8s .55s var(--ease) both;
  }
  #prospect_checkout .checkout-actions .return-cart{
    display:inline-flex; align-items:center; gap:6px;
    padding:.8rem 1.2rem; border-radius:60px;
    color:var(--ink); font-weight:700; text-decoration:none;
    border:2px solid var(--line);
    transition:all .35s var(--ease);
  }
  #prospect_checkout .checkout-actions .return-cart:hover{
    border-color:var(--aqua); color:var(--aqua-deep);
    transform:translateX(-4px);
  }
   
  #prospect_checkout .checkout-actions .btn.btn-yellow{
    --bs-btn-color:var(--ink); --bs-btn-bg:var(--citrus); --bs-btn-border-color:var(--citrus);
    --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--citrus); --bs-btn-hover-border-color:var(--ink);
    --bs-btn-active-color:#fff; --bs-btn-active-bg:var(--ink); --bs-btn-active-border-color:var(--ink);
   
    position:relative; isolation:isolate; overflow:hidden;
    display:inline-flex; align-items:center; justify-content:center;
    padding:1rem 2.2rem;
    background:var(--citrus); color:var(--ink);
    border:2px solid var(--citrus); border-radius:60px;
    font-family:'Figtree',sans-serif; font-weight:800; font-size:1.08rem; line-height:1.2;
    box-shadow:0 0 0 0 rgba(255,182,39,.55);
    animation:coBtnPulse 2.8s 1.8s ease-in-out infinite;
    transition:color .45s var(--ease), border-color .45s var(--ease), transform .35s var(--ease);
  }
  #prospect_checkout .checkout-actions .btn-yellow::before{
    content:""; position:absolute; z-index:-1; left:50%; top:100%;
    width:150%; aspect-ratio:1; border-radius:42%;
    background:var(--ink);
    transform:translate(-50%,0) rotate(0deg);
    transition:top .6s var(--ease), transform 1.2s linear;
  }
  #prospect_checkout .checkout-actions .btn-yellow::after{
    content:""; position:absolute; top:0; left:-75%; width:50%; height:100%; z-index:1;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
    transform:skewX(-20deg); pointer-events:none;
  }
  #prospect_checkout .checkout-actions .btn-yellow svg{ margin-right:8px; transition:transform .4s var(--ease); }
  #prospect_checkout .checkout-actions .btn-yellow svg path{ stroke:currentColor; }      #prospect_checkout .checkout-actions .btn-yellow:hover{
    color:#fff; background:var(--citrus); border-color:var(--ink);
    transform:translateY(-3px);
    animation:none; box-shadow:0 18px 32px -12px rgba(11,43,58,.45);
  }
  #prospect_checkout .checkout-actions .btn-yellow:hover::before{ top:-50%; transform:translate(-50%,0) rotate(160deg); }
  #prospect_checkout .checkout-actions .btn-yellow:hover::after{ animation:coShine .9s var(--ease); }
  #prospect_checkout .checkout-actions .btn-yellow:hover svg{ transform:scale(1.2) rotate(-8deg); }
  #prospect_checkout .checkout-actions .btn-yellow:active{ transform:translateY(0) scale(.97); }
  #prospect_checkout .checkout-actions .btn-yellow:focus-visible{ outline:3px solid var(--aqua); outline-offset:3px; }
   
  #prospect_checkout .checkout-summary{
    position:sticky;
    top:100px;
    isolation:isolate;
    padding:30px 28px 26px;
    border-radius:var(--r-lg);
    background: radial-gradient(320px 200px at 100% 0%, rgba(15, 185, 177, .22), transparent 70%), #005b85;
    color:#d8eef1;
    box-shadow:0 40px 70px -30px rgba(11,43,58,.7);
    animation:coSlideIn .9s .25s var(--ease) both;
  }
  #prospect_checkout .checkout-summary::before{
    content:"";
    position:absolute;
    inset:-2px;
    z-index:-1;
    border-radius:calc(var(--r-lg) + 2px);
    padding:2px;
    background:conic-gradient(from var(--coRing), var(--aqua), #5EE6C9, var(--citrus), var(--aqua));
    -webkit-mask: linear-gradient(#012f74 0 0) content-box, linear-gradient(#002862 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    animation:coRingSpin 7s linear infinite;
  }
   
  #prospect_checkout .summary-title{
    font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size:1.4rem;
    color:#fff;
    letter-spacing:-.015em;
    margin:0 0 18px;
  }
   
  #prospect_checkout .summary-products{ display:grid; gap:10px; margin-bottom:20px; }
  #prospect_checkout .checkout-summary .summary-product{
    display:flex; align-items:center; gap:14px;
    padding:12px; border-radius:16px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  }
  #prospect_checkout .checkout-summary .summary-products .summary-product{ animation:coSlideIn .7s .5s var(--ease) both; }
  #prospect_checkout .checkout-summary .summary-product:hover{background: #29c8e866;transform:translateX(3px);}
   
  #prospect_checkout .checkout-summary .product-thumb{
    flex:none;
    width:54px;
    height:54px;
    border-radius:15px;
    display:grid;
    place-items:center;
    background: linear-gradient(145deg, #0d6efd, var(--citrus) 55%, var(--citrus-deep));
  }
  #prospect_checkout .checkout-summary .product-thumb img{
    width:62%; height:62%; object-fit:contain; display:block;
    font-size:0; color:transparent;
  }
  #prospect_checkout .checkout-summary .product-info{ flex:1; min-width:0; }
  #prospect_checkout .checkout-summary .product-info h4{
    margin:0; color:#fff;
    font-family:'Figtree',sans-serif; font-weight:700; font-size:.98rem; line-height:1.35;
  }
  #prospect_checkout .checkout-summary .summary-product > span:last-child{
    flex:none; font-weight:800; color:#fff; font-size:1.02rem;
  }
   
  #prospect_checkout .summary-crosssell{ margin-bottom:22px; }
  #prospect_checkout .summary-crosssell-title{
    display:flex; align-items:center; gap:8px;
    margin:0 0 10px;
    color:var(--citrus); font-size:.74rem; font-weight:800; letter-spacing:.1em;
  }
  #prospect_checkout .summary-crosssell-title::before{
    content:""; width:18px; height:2px; border-radius:2px; background:var(--citrus);
  }
  #prospect_checkout .checkout-summary .summary-crosssell .summary-product{
    cursor:pointer; margin:0;
    border:1.5px dashed rgba(255,182,39,.55);
    background:rgba(255,182,39,.06);
    animation:coGlow 2.6s 1.4s ease-in-out infinite;
  }
  #prospect_checkout .checkout-summary .summary-crosssell .summary-product:hover{ background:rgba(255,182,39,.12); }
  #prospect_checkout .checkout-summary .summary-crosssell .summary-product:has(.crosssell-check:checked){
    border-style:solid; border-color:var(--citrus);
    background:rgba(255,182,39,.14);
    animation:none;
  }
  #prospect_checkout .checkout-summary input[type="checkbox"]{
    -webkit-appearance:none; appearance:none; flex:none;
    width:22px; height:22px; margin:0;
    border-radius:7px; border:2px solid rgba(255,255,255,.35);
    background:transparent; cursor:pointer;
    transition:background .3s var(--ease), border-color .3s var(--ease);
  }
  #prospect_checkout .checkout-summary input[type="checkbox"]:checked{
    border-color:var(--citrus);
    background:var(--citrus) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2B3A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;
    animation:coPop .4s var(--ease);
  }
  #prospect_checkout .checkout-summary input[type="checkbox"]:focus,
  #prospect_checkout .checkout-summary input[type="checkbox"]:focus-visible{ box-shadow:0 0 0 4px rgba(255,182,39,.25); outline:none; }
  #prospect_checkout .checkout-summary input[type="checkbox"]:is(.error,.is-invalid,[aria-invalid="true"]){
    border-color:var(--coral); animation:coShake .4s ease;
  }
   
  #prospect_checkout .summary-totals{
    padding-top:16px;
    border-top:1px dashed rgba(255,255,255,.16);
  }
  #prospect_checkout .summary-line{
    display:flex; justify-content:space-between; align-items:center;
    padding:6px 0; font-size:.98rem; color:#bcd6dd;
  }
  #prospect_checkout .summary-line > span:last-child{ color:#fff; font-weight:600; }
  #prospect_checkout .summary-line .muted{ color:#7fa2ad; }
  #prospect_checkout .summary-total{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:12px;
    padding:16px 18px;
    border-radius:16px;
    background: #29dbff6e;
    border: 1px solid #1ed9ffe0;
  }
  #prospect_checkout .summary-total > span{ color:#fff; font-weight:700; font-size:1.05rem; }
  #prospect_checkout .final_amount strong{
    font-family:'Bricolage Grotesque',sans-serif;
    font-weight:800; font-size:1.9rem; line-height:1; letter-spacing:-.02em;
    background:linear-gradient(100deg,#fff 0%,#fff 40%,#9ff2e4 47%,var(--citrus) 53%,#fff 60%,#fff 100%);
    background-size:300% 100%; background-position:100% 0;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:coSweep 5s 1.5s ease-in-out infinite;
  }
   
  #prospect_checkout .checkout-summary .terms_cstm{ padding:0; }
  #prospect_checkout .checkout-summary .checkout-terms{ margin-top:18px !important; }
  #prospect_checkout .checkout-summary .checkout-terms .d-flex{
    padding:14px; border-radius:16px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
  }
  #prospect_checkout .checkout-summary .checkout-terms .form-check-label{
    margin:0 !important;
    color:#9fbcc4; font-size:.8rem; line-height:1.6; cursor:pointer;
  }
  #prospect_checkout .checkout-summary .checkout-terms .box{ display:block; font-size:.8rem; line-height:1.6; }
  #prospect_checkout .checkout-summary .checkout-terms strong{ color:#fff; }
  #prospect_checkout .checkout-summary .checkout-terms a{
    color:var(--aqua); font-weight:600; text-decoration:none;
    background:linear-gradient(var(--citrus),var(--citrus)) 0 100%/0 1.5px no-repeat;
    transition:color .3s, background-size .4s var(--ease);
  }
  #prospect_checkout .checkout-summary .checkout-terms a:hover{ color:var(--citrus); background-size:100% 1.5px; }
  #prospect_checkout .checkout-summary .checkout-terms .d-flex:has(#agreeTerms:checked){
    border-color:rgba(255,182,39,.4);
  }
   
  /* =========================================================
     RESPONSIVE
     ========================================================= */
  @media (max-width:991.98px){
    #prospect_checkout .checkout-wrapper{ grid-template-columns:1fr; }
    #prospect_checkout #checkout-main{ display:contents; }
    #prospect_checkout .checkout-form-col:nth-child(1){ order:1; }
    #prospect_checkout .checkout-summary{ order:2; grid-column:1; grid-row:auto; position:relative; top:auto; }
    #prospect_checkout .checkout-form-col:nth-child(2){ order:3; }
  }
  @media (max-width:575.98px){
    main.checkout-page .tc-hero{ padding:70px 0 110px; }
    #prospect_checkout.tc-checkout{ margin-top:-60px; padding-bottom:70px; }
    #prospect_checkout .checkout-section{ padding:24px 18px 8px; border-radius:20px; }
    #prospect_checkout .checkout-summary{ padding:24px 18px 20px; border-radius:22px; }
    #prospect_checkout .checkout-steps{ font-size:.7rem; gap:4px; }
    #prospect_checkout .checkout-steps span:nth-child(odd){ padding:.35rem .6rem; }
    #prospect_checkout .checkout-actions{ flex-direction:column-reverse; align-items:stretch; }
    #prospect_checkout .checkout-actions .btn.btn-yellow,
  #prospect_checkout .checkout-actions .return-cart{ width:100%; justify-content:center; }
  }
   
  /* =========================================================
     KEYFRAMES
     ========================================================= */
  @keyframes coRise{
    from{ opacity:0; transform:translateY(30px); }
    to{   opacity:1; transform:none; }
  }
  @keyframes coDrop{
    from{ opacity:0; transform:translateY(-12px); }
    to{   opacity:1; transform:none; }
  }
  @keyframes coSlideIn{
    from{ opacity:0; transform:translateX(30px); }
    to{   opacity:1; transform:none; }
  }
  @keyframes coReveal{
    from{ opacity:0; transform:translateY(-8px); }
    to{   opacity:1; transform:none; }
  }
  @keyframes coPop{
    0%{ transform:scale(.6); } 60%{ transform:scale(1.18); } 100%{ transform:scale(1); }
  }
  @keyframes coShake{
    0%,100%{ transform:translateX(0); }
    25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); }
  }
  @keyframes coStepPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(11,43,58,.35); }
    50%{     box-shadow:0 0 0 6px rgba(11,43,58,0); }
  }
  @keyframes coBtnPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(255,182,39,.55); }
    50%{     box-shadow:0 0 0 12px rgba(255,182,39,0); }
  }
  @keyframes coGlow{
    0%,100%{ box-shadow:0 0 0 0 rgba(255,182,39,0); }
    50%{     box-shadow:0 0 22px -4px rgba(255,182,39,.45); }
  }
  @keyframes coRingSpin{ to{ --coRing:360deg; } }
  @keyframes coSweep{
    0%,30%{  background-position:100% 0; }
    70%,100%{ background-position:0% 0; }
  }
  @keyframes coShine{ to{ left:130%; } }
   
  @media (prefers-reduced-motion:reduce){
    #prospect_checkout.tc-checkout *,
  #prospect_checkout.tc-checkout *::before,
  #prospect_checkout.tc-checkout *::after{
      animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
    }
  }
/****************Check out CSS********************/


/****************Terms CSS********************/

:is(.tc-chips,.tc-body) .tc-icon{
  width:18px; height:18px; padding:0; flex:none;
  background:none; border-radius:0;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.tc-body .tc-link{
  color:var(--aqua-deep); font-weight:600; text-decoration:none;
  background:linear-gradient(var(--citrus),var(--citrus)) 0 100% / 0 2px no-repeat;
  transition:color .3s, background-size .45s var(--ease);
}
.tc-body .tc-link:hover{ color:var(--ink); background-size:100% 2px; }
 
/* =========================================================
   MOBILE CHIPS (sticky, horizontally scrolling)
   ========================================================= */
.tc-chips{
  position:sticky; top:var(--tc-sticky-top); z-index:20;
  padding:10px 0;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.tc-chips__scroller{
  display:flex; gap:8px; margin:0; padding:2px 16px;
  list-style:none;
  overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 28px),transparent);
          mask:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 28px),transparent);
}
.tc-chips__scroller::-webkit-scrollbar{ display:none; }
.tc-chips__scroller li{ flex:none; scroll-snap-align:start; animation:tcChipIn .5s var(--ease) both; }
.tc-chips__scroller li:nth-child(2){ animation-delay:.04s; }
.tc-chips__scroller li:nth-child(3){ animation-delay:.08s; }
.tc-chips__scroller li:nth-child(4){ animation-delay:.12s; }
.tc-chips__scroller li:nth-child(n+5){ animation-delay:.16s; }
.tc-chips__link{
  display:block; padding:.45rem .95rem; border-radius:50px;
  background:var(--mist); border:1px solid var(--line);
  color:var(--ink); font-size:.88rem; font-weight:600; text-decoration:none; white-space:nowrap;
  transition:background .3s var(--ease), color .3s, border-color .3s;
}
.tc-chips__link:hover{ border-color:var(--aqua); color:var(--aqua-deep); }
.tc-chips__link:is(.is-active,.active,[aria-current="true"],[aria-current="location"]){
  background:var(--ink); border-color:var(--ink); color:#fff;
}
 
/* =========================================================
   LAYOUT
   ========================================================= */
.tc-body{ padding-top:64px; padding-bottom:110px; }
@media (max-width:991.98px){
  :root{ --tc-sticky-top:72px; }   /* mobile header is usually shorter */
  .tc-body{ padding-top:36px; padding-bottom:80px; }
}
 
/* =========================================================
   DESKTOP RAIL (sticky table of contents)
   ========================================================= */
.tc-body .tc-rail{
  position:sticky; top:var(--tc-sticky-top);
  padding:22px 18px 18px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow-soft);
  animation:tcRise .8s .1s var(--ease) both;
}
.tc-body .tc-rail__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 4px 16px;
  font-size:.82rem; font-weight:700; color:var(--muted);
}
.tc-body .tc-rail__count{
  padding:.2rem .65rem; border-radius:30px;
  background:var(--ink); color:#fff; font-weight:700; font-size:.8rem;
}
.tc-body .tc-rail__count [data-tc-count]{ color:var(--citrus); }
 
/* track: a vertical line behind the marks, with a filling progress bar */
.tc-body .tc-rail__track{ position:relative; }
.tc-body .tc-rail__track::before{
  content:""; position:absolute; left:17px; top:14px; bottom:14px; width:2px;
  background:var(--line); border-radius:2px;
}
.tc-body .tc-rail__fill{
  position:absolute; left:17px; top:14px; width:2px;
  height:var(--tc-progress,0%); max-height:calc(100% - 28px);
  background:linear-gradient(var(--aqua),var(--citrus));
  border-radius:2px;
  box-shadow:0 0 10px rgba(15,185,177,.6);
  transition:height .3s var(--ease);
}
/* no JS needed: in browsers with scroll-driven animations the
   bar fills as you read down the page */
@supports (animation-timeline: scroll()){
  .tc-body .tc-rail__fill{
    height:calc(100% - 28px);
    transform-origin:top; transform:scaleY(0);
    animation:tcFill linear both;
    animation-timeline:scroll(root);
  }
}
 
.tc-body .tc-rail__list{list-style:none;margin:0;/* padding: 20px!important; */position:relative;}
.tc-body .tc-rail__link{
  position:relative;
  display:flex; align-items:center; gap:12px;
  padding:.55rem .7rem .55rem 10px;
  border-radius:12px;
  color:var(--muted); font-size:.93rem; font-weight:600; line-height:1.3; text-decoration:none;
  transition:background .3s var(--ease), color .3s, transform .3s var(--ease);
}
.tc-body .tc-rail__mark{
  flex:none; position:relative; z-index:1;
  width:16px; height:16px; border-radius:50%;
  background:var(--white); border:2px solid #c3d6da;
  transition:border-color .3s, background .3s, transform .4s var(--ease);
}
.tc-body .tc-rail__link:hover{ color:var(--ink); background:var(--mist); transform:translateX(3px); }
.tc-body .tc-rail__link:hover .tc-rail__mark{ border-color:var(--aqua); transform:scale(1.15); }
 
/* sections already read (if your script marks them) */
.tc-body .tc-rail__link:is(.is-read,.is-done,.read) .tc-rail__mark{
  border-color:var(--aqua);
  background:var(--aqua) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/9px no-repeat;
}
/* current section */
.tc-body .tc-rail__link:is(.is-active,.active,[aria-current="true"],[aria-current="location"]){
  background:var(--aqua-soft); color:var(--ink);
}
.tc-body .tc-rail__link:is(.is-active,.active,[aria-current="true"],[aria-current="location"]) .tc-rail__mark{
  border-color:var(--citrus); background:var(--citrus);
  animation:tcMarkPulse 1.8s ease-in-out infinite;
}
 
.tc-body .tc-rail__top{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:14px; padding:.7rem 1rem;
  border-radius:14px; border:1.5px dashed var(--line);
  color:var(--ink); font-weight:700; font-size:.9rem; text-decoration:none;
  transition:border-color .3s, background .3s, color .3s;
}
.tc-body .tc-rail__top:hover{ border-style:solid; border-color:var(--aqua); background:var(--mist); color:var(--aqua-deep); }
.tc-body .tc-rail__top:hover .tc-icon{ animation:tcBounce .8s var(--ease) infinite; }
 
/* =========================================================
   CLAUSES
   ========================================================= */
.tc-body .tc-stream{ position:relative; }
 
.tc-body .tc-clause{
  display:grid; grid-template-columns:76px minmax(0,1fr); gap:10px 22px;
  padding:42px 0;
  border-bottom:1px dashed var(--line);
  scroll-margin-top:calc(var(--tc-sticky-top) + 20px);
  position:relative;
}
.tc-body .tc-clause:first-child{ padding-top:0; }
.tc-body .tc-clause:last-child{ border-bottom:0; }
 
/* reveal clauses as they scroll into view (where supported) */
@supports (animation-timeline: view()){
  .tc-body .tc-clause{
    animation:tcRise linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 40%;
  }
}
 
/* big outlined number that fills on hover / when linked to */
.tc-body .tc-clause__num{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800; font-size:2.6rem; line-height:1; letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1.5px var(--aqua);
  background:linear-gradient(135deg,var(--aqua),var(--citrus));
  -webkit-background-clip:text; background-clip:text;
  background-size:100% 0%; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .6s var(--ease);
  padding-top:2px;
}
.tc-body .tc-clause:hover .tc-clause__num,
.tc-body .tc-clause:target .tc-clause__num{ background-size:100% 100%; -webkit-text-stroke-color:transparent; }
 
.tc-body .tc-clause__title{
  font-size:clamp(1.45rem,2.4vw,1.85rem); font-weight:800;
  margin:4px 0 18px;
}
.tc-inventory__group p{
  color: #5c7480;
}

ul.tc-tags li{
  list-style-type: disc;
}

.tc-body .tc-clause__main > p{ color:var(--muted); line-height:1.75; margin:0 0 14px; 
  /* max-width:72ch;  */
}
.tc-body .tc-clause__main > p:last-child{ margin-bottom:0; }
.tc-body .tc-clause__main strong{ color:var(--ink); font-weight:700; }
 
/* flash the clause you jumped to */
.tc-body .tc-clause:target::before{
  content:""; position:absolute; inset:16px -22px; z-index:-1;
  border-radius:24px; background:var(--aqua-soft);
  animation:tcTarget 2.2s var(--ease) forwards;
}
 
/* lead paragraph */
.tc-body .tc-lead{
  color:var(--ink) !important; font-size:1.15rem; line-height:1.7; font-weight:500;
  padding-left:18px; border-left:3px solid var(--citrus);
}
 
/* ---------- Party card ---------- */
.tc-body .tc-party{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  margin:0 0 24px; padding:20px 22px;
  border-radius:20px;
  background:linear-gradient(135deg,var(--mist),#fff);
  border:1px solid var(--line);
  position:relative; overflow:hidden;
}
.tc-body .tc-party::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(var(--aqua),var(--citrus));
}
.tc-body .tc-party__name{
  display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:1.2rem; font-weight:800; color:var(--ink);
}
.tc-body .tc-party__addr{ margin:4px 0 0; font-style:normal; color:var(--muted); font-size:.95rem; }
.tc-body .tc-party__contacts{ display:flex; flex-wrap:wrap; gap:8px; }
.tc-body .tc-contact{
  display:inline-flex; align-items:center; gap:8px;
  padding:.5rem .95rem; border-radius:50px;
  background:var(--white); border:1px solid var(--line);
  color:var(--ink); font-weight:600; font-size:.9rem; text-decoration:none;
  transition:border-color .3s, color .3s, transform .3s var(--ease), box-shadow .3s;
}
.tc-body .tc-contact .tc-icon{ color:var(--aqua-deep); }
.tc-body .tc-contact:hover{
  border-color:var(--aqua); color:var(--aqua-deep);
  transform:translateY(-2px); box-shadow:0 10px 20px -14px rgba(8,143,138,.8);
}
 
/* ---------- Definitions ---------- */
.tc-body .tc-defs{
  margin:0; border:1px solid var(--line); border-radius:20px; overflow:hidden;
}
.tc-body .tc-defs__row{
  display:grid; grid-template-columns:minmax(150px,30%) 1fr; gap:16px;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
  transition:background .3s;
}
.tc-body .tc-defs__row:last-child{ border-bottom:0; }
.tc-body .tc-defs__row:nth-child(even){ background:var(--mist); }
.tc-body .tc-defs__row:hover{ background:var(--aqua-soft); }
.tc-body .tc-defs dt{
  display:flex; align-items:baseline; gap:10px;
  color:var(--ink); font-weight:700;
}
.tc-body .tc-defs dt::before{
  content:""; flex:none; width:8px; height:8px; border-radius:2px; background:var(--aqua);
  transform:rotate(45deg) translateY(-2px);
  transition:background .3s, transform .4s var(--ease);
}
.tc-body .tc-defs__row:hover dt::before{ background:var(--citrus); transform:rotate(225deg) translateY(2px); }
.tc-body .tc-defs dd{ margin:0; color:var(--muted); line-height:1.65; }
 
/* card descriptor value */
.tc-body .tc-descriptor{
  display:inline-block; padding:.05rem .55rem; border-radius:8px;
  background:var(--ink); color:var(--citrus);
  font-weight:700; font-size:.92em; letter-spacing:.03em;
}
 
/* ---------- Refund facts ---------- */
.tc-body .tc-facts{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  margin:0 0 22px;
}
.tc-body .tc-fact{
  position:relative; overflow:hidden;
  padding:22px 20px 20px;
  border-radius:20px; background:var(--white);
  border:1px solid var(--line);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.tc-body .tc-fact::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg,var(--aqua),#5EE6C9,var(--citrus),var(--aqua));
  background-size:300% 100%;
  animation:tcBar 6s linear infinite;
}
.tc-body .tc-fact:hover{ transform:translateY(-6px); box-shadow:var(--shadow-pop); border-color:transparent; }
.tc-body .tc-fact__value{
  display:block;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.75rem; line-height:1.1; letter-spacing:-.02em;
  color:var(--ink); margin-bottom:6px;
}
.tc-body .tc-fact:first-child .tc-fact__value{ color:var(--aqua-deep); }
.tc-body .tc-fact__label{ margin:0; color:var(--muted); font-size:.92rem; line-height:1.5; }
 
/* ---------- Support cards ---------- */
.tc-body .tc-support{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
  margin:0 0 22px;
}
.tc-body .tc-support__item{
  display:flex; gap:16px; align-items:flex-start;
  padding:20px; border-radius:20px;
  background:var(--mist); border:1px solid var(--line);
  transition:background .35s, border-color .35s, transform .35s var(--ease);
}
.tc-body .tc-support__item--wide{ grid-column:1 / -1; }
.tc-body .tc-support__item:hover{ background:#fff; border-color:var(--aqua); transform:translateY(-3px); }
.tc-body .tc-support__icon{
  flex:none; width:46px; height:46px; border-radius:14px;
  display:grid; place-items:center;
  background:var(--ink); color:var(--citrus);
  transition:transform .45s var(--ease), background .35s;
}
.tc-body .tc-support__icon .tc-icon{ width:22px; height:22px; }
.tc-body .tc-support__item:hover .tc-support__icon{ transform:rotate(-10deg) scale(1.06); background:var(--aqua); color:#fff; }
.tc-body .tc-support__label{
  display:block; font-size:.8rem; font-weight:700; color:var(--muted); margin-bottom:2px;
}
.tc-body .tc-support__value{
  display:inline-block; color:var(--ink); font-weight:700; font-size:1.05rem; text-decoration:none;
  word-break:break-word; transition:color .3s;
}
.tc-body .tc-support__value:hover{ color:var(--aqua-deep); }
.tc-body .tc-support__note{ margin:4px 0 0; font-size:.85rem; color:var(--aqua-deep); font-weight:600; }
.tc-body .tc-hours{
  display:grid; grid-template-columns:auto auto; justify-content:start; gap:4px 24px;
  margin:6px 0 0;
}
.tc-body .tc-hours dt{ color:var(--ink); font-weight:600; }
.tc-body .tc-hours dd{ margin:0; color:var(--muted); }
 
/* =========================================================
   CLOSING CTA (dark card, rotating border)
   ========================================================= */
.tc-body .tc-cta{
  position:relative; isolation:isolate;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-top:40px; padding:36px 38px;
  border-radius:var(--r-lg);
  background:
    radial-gradient(360px 220px at 100% 0%, rgba(15,185,177,.3), transparent 70%),
    radial-gradient(300px 200px at 0% 100%, rgba(255,182,39,.14), transparent 70%),
    var(--ink);
  box-shadow:0 40px 70px -30px rgba(11,43,58,.65);
}
.tc-body .tc-cta::before{
  content:""; position:absolute; inset:-2px; z-index:-1;
  border-radius:calc(var(--r-lg) + 2px); padding:2px;
  background:conic-gradient(from var(--tcRing), var(--aqua), #5EE6C9, var(--citrus), var(--aqua));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:tcRingSpin 7s linear infinite;
}
.tc-body .tc-cta__title{
  color:#fff; font-size:clamp(1.5rem,2.6vw,2rem); font-weight:800; margin:0 0 8px;
}
.tc-body .tc-cta__mail{
  display:inline-block; color:var(--citrus); font-weight:700; font-size:1.15rem; text-decoration:none;
  background:linear-gradient(var(--citrus),var(--citrus)) 0 100% / 0 2px no-repeat;
  transition:background-size .45s var(--ease);
}
.tc-body .tc-cta__mail:hover{ background-size:100% 2px; }
.tc-body .tc-cta__meta{ margin:10px 0 0; color:#a9c7cf; font-size:.92rem; max-width:52ch; }
.tc-body .tc-cta__meta .tc-link{ color:#fff; }
 
/* Email support button – site's liquid sweep */
.tc-body .tc-btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; gap:10px;
  padding:1rem 1.8rem; border-radius:60px;
  background:var(--citrus); color:var(--ink);
  border:2px solid var(--citrus);
  font-weight:800; text-decoration:none;
  box-shadow:0 0 0 0 rgba(255,182,39,.5);
  animation:tcBtnPulse 2.8s 1s ease-in-out infinite;
  transition:color .45s var(--ease), border-color .45s var(--ease), transform .35s var(--ease);
}
.tc-body .tc-btn::before{
  content:""; position:absolute; z-index:-1; left:50%; top:100%;
  width:160%; aspect-ratio:1; border-radius:42%;
  background:#fff;
  transform:translate(-50%,0) rotate(0deg);
  transition:top .6s var(--ease), transform 1.2s linear;
}
.tc-body .tc-btn::after{
  content:""; position:absolute; top:0; left:-75%; width:50%; height:100%; z-index:1;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-20deg); pointer-events:none;
}
.tc-body .tc-btn .tc-icon{ transition:transform .4s var(--ease); }
.tc-body .tc-btn:hover{
  color:var(--ink); border-color:#fff; transform:translateY(-3px);
  animation:none; box-shadow:0 18px 32px -12px rgba(255,182,39,.6);
}
.tc-body .tc-btn:hover::before{ top:-50%; transform:translate(-50%,0) rotate(160deg); }
.tc-body .tc-btn:hover::after{ animation:tcShine .9s var(--ease); }
.tc-body .tc-btn:hover .tc-icon{ transform:translateY(-2px) rotate(-8deg); }
 
/* focus states */
:is(.tc-chips,.tc-body) a:focus-visible{ outline:3px solid var(--citrus); outline-offset:3px; border-radius:10px; }
 
/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:767.98px){
  .tc-body .tc-clause{ grid-template-columns:1fr; gap:4px; padding:32px 0; }
  .tc-body .tc-clause__num{ font-size:2rem; }
  .tc-body .tc-clause:target::before{ inset:10px -12px; }
  .tc-body .tc-facts{ grid-template-columns:1fr; }
  .tc-body .tc-support{ grid-template-columns:1fr; }
  .tc-body .tc-defs__row{ grid-template-columns:1fr; gap:4px; }
  .tc-body .tc-party{ padding:18px; }
  .tc-body .tc-cta{ padding:28px 22px; }
  .tc-body .tc-btn{ width:100%; justify-content:center; }
}
 
/* =========================================================
   JS-DRIVEN MENU (terms.js)
   ========================================================= */
/* no inner scrollbar: on shorter screens the menu gets more compact instead */
.tc-body .tc-rail{ max-height:none; overflow:visible; }
@media (min-width:992px) and (max-height:760px){
  .tc-body .tc-rail{ padding:16px 14px 14px; }
  .tc-body .tc-rail__head{ margin-bottom:10px; }
  .tc-body .tc-rail__link{ padding:.36rem .6rem .36rem 10px; font-size:.86rem; }
  .tc-body .tc-rail__top{ margin-top:10px; padding:.5rem .9rem; }
}
@media (min-width:992px) and (max-height:640px){
  .tc-body .tc-rail__link{padding: 1.24rem .6rem 1.24rem 6px;font-size:.82rem;line-height:1.25;}
  .tc-body .tc-rail__mark{ width:14px; height:14px; }
}
/* the script sets the progress line's height exactly, so turn off the CSS-only version */
.tc-body .tc-rail.tc-js .tc-rail__fill{
  animation:none; transform:none;
  height:0; max-height:none;
  transition:height .35s var(--ease);
}
/* brief highlight on the section you jumped to */
.tc-body .tc-clause.is-target::before{
  content:""; position:absolute; inset:16px -22px; z-index:-1;
  border-radius:24px; background:var(--aqua-soft);
  animation:tcTarget 2.2s var(--ease) forwards;
}
.tc-body .tc-clause.is-target .tc-clause__num{ background-size:100% 100%; -webkit-text-stroke-color:transparent; }
@media (max-width:767.98px){
  .tc-body .tc-clause.is-target::before{ inset:10px -12px; }
}
 
/* =========================================================
   KEEP THE LEFT MENU PINNED
   ========================================================= */
/* "overflow-x:hidden" on the page stops sticky from working;
   "clip" looks the same and doesn't */
html, body{ overflow-x:clip; }
/* the menu column must run the full height of the terms */
.tc-body > .row > aside{ align-self:stretch; }

/* =========================================================
   KEYFRAMES
   ========================================================= */
@keyframes tcRise{
  from{ opacity:0; transform:translateY(28px); }
  to{   opacity:1; transform:none; }
}
@keyframes tcChipIn{
  from{ opacity:0; transform:translateX(16px); }
  to{   opacity:1; transform:none; }
}
@keyframes tcFill{ to{ transform:scaleY(1); } }
@keyframes tcMarkPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,182,39,.55); }
  50%{     box-shadow:0 0 0 7px rgba(255,182,39,0); }
}
@keyframes tcBounce{
  0%,100%{ transform:translateY(0); }
  50%{     transform:translateY(-4px); }
}
@keyframes tcTarget{
  0%{   opacity:0; transform:scale(.98); }
  20%{  opacity:1; transform:none; }
  100%{ opacity:0; }
}
@keyframes tcBar{ to{ background-position:300% 0; } }
@keyframes tcRingSpin{ to{ --tcRing:360deg; } }
@keyframes tcBtnPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,182,39,.5); }
  50%{     box-shadow:0 0 0 12px rgba(255,182,39,0); }
}
@keyframes tcShine{ to{ left:130%; } }
 
@media (prefers-reduced-motion:reduce){
  :is(.tc-chips,.tc-body) *,
  :is(.tc-chips,.tc-body) *::before,
  :is(.tc-chips,.tc-body) *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
@media (prefers-reduced-motion:reduce){
  .tc-body .tc-clause{ animation:none !important; }
}


/******************terms product price section******************/

.product_price{
  margin: 1.25rem 0 1.5rem;
}

.product_price product{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding: 1rem 1.25rem;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

/* thin brand accent on the left edge */
/* .product_price product::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--aqua), var(--citrus));
} */

.product_price product:hover{
  transform: translateY(-2px);
  border-color: var(--aqua-soft);
  box-shadow: var(--shadow-pop);
}

/* Product name – overrides the global light p color */
.product_price [data-attr-app="name"]{
  margin: 0;
  color: var(--ink);
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  line-height: 1.3;
}

/* Price pill */
.product_price product > span{
  margin-left: auto !important;   /* replaces .ms-3 so it right-aligns */
  display: inline-flex;
  align-items: baseline;
  gap: .1rem;
  padding: .45rem 1rem;
  border-radius: 50px;
  /* background: linear-gradient(135deg, var(--aqua), var(--aqua-deep)); */
  color: var(--ink);
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 600.product_price product !important;
  white-space: nowrap;
  /* box-shadow: 0 10px 22px -10px rgba(37,99,235,.6); */
}

.product_price [data-attr-app="price"]{
  font-size: 1.4rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Loading state while price is empty */
.product_price [data-attr-app="price"]:empty{
  display: inline-block;
  width: 3.2rem;
  height: 1.1rem;
  border-radius: 6px;
  vertical-align: middle;
  background: linear-gradient(90deg,
              rgba(255,255,255,.25) 0%,
              rgba(255,255,255,.6) 50%,
              rgba(255,255,255,.25) 100%);
  background-size: 200% 100%;
  animation: priceShimmer 1.2s linear infinite;
}

@keyframes priceShimmer{
  to{ background-position: -200% 0; }
}

/* Mobile: stack name above price */
@media (max-width: 480px){
  .product_price product{
    flex-direction: column;
    align-items: flex-start;
  }
  .product_price product > span{
    margin-left: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .product_price product,
  .product_price [data-attr-app="price"]:empty{
    transition: none;
    animation: none;
  }
}
   
/****************Terms CSS********************/


/* =========================================================
   COOKIE CONSENT POPUP CSS
   ========================================================= */
   #cookiePopup{
    position:fixed; z-index:1090;
    left:24px; bottom:24px;
    width:min(420px, calc(100vw - 32px));
    flex-direction:column;                 /* in case it's shown with display:flex */
    padding:24px 24px 22px;
    border-radius:var(--r-lg);
    background:
      radial-gradient(260px 160px at 100% 0%, rgba(15,185,177,.28), transparent 70%),
      radial-gradient(220px 140px at 0% 100%, rgba(255,182,39,.14), transparent 70%),
      var(--ink);
    color:#d8eef1;
    box-shadow:0 30px 70px -20px rgba(11,43,58,.65), 0 0 0 1px rgba(255,255,255,.06) inset;
    overflow:hidden; isolation:isolate;
    animation:ckIn .8s var(--ease) both;
  }
  
  /* animated gradient strip along the top */
  #cookiePopup::before{
    content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:1;
    background:linear-gradient(90deg,var(--aqua),#5EE6C9,var(--citrus),var(--aqua));
    background-size:300% 100%;
    animation:ckBar 5s linear infinite;
  }
  /* slow-spinning dashed ring in the corner */
  #cookiePopup::after{
    content:""; position:absolute; z-index:-1;
    width:150px; height:150px; right:-55px; top:-55px;
    border-radius:50%;
    border:2px dashed rgba(94,230,201,.25);
    animation:ckSpin 18s linear infinite;
  }
  
  /* ---------- Content: cookie icon + heading + text ---------- */
  #cookiePopup .cookie_content{
    display:grid;
    grid-template-columns:52px 1fr;
    column-gap:16px;
    align-items:start;
  }
  #cookiePopup .cookie_content::before{          /* cookie badge */
    content:"";
    grid-row:span 2;
    width:52px; height:52px; border-radius:16px;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2B3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'/%3E%3Cpath d='M8.5 8.5v.01M16 15.5v.01M12 12v.01M11 17v.01M7 14v.01'/%3E%3C/svg%3E") center / 26px no-repeat,
      linear-gradient(145deg,#0d8bf0,var(--citrus) 55%,var(--citrus-deep));
    box-shadow:0 0 0 6px rgba(206, 239, 255, 0.12), 0 12px 24px -10px rgba(103, 213, 249, 0.7);
    animation:ckPop .7s .25s var(--ease) both, ckWiggle 4s 1.4s ease-in-out infinite;
  }
  #cookiePopup .cookie_content h4{
    font-family:'Bricolage Grotesque',sans-serif;
    font-weight:800; font-size:1.25rem; letter-spacing:-.015em; line-height:1.2;
    color:#fff; margin:2px 0 6px;
    animation:ckRise .6s .3s var(--ease) both;
  }
  #cookiePopup .cookie_content p{
    margin:0;
    color:#a9c7cf; font-size:.9rem; line-height:1.6;
    animation:ckRise .6s .4s var(--ease) both;
  }
  #cookiePopup .cookie_content a{
    color:var(--aqua); font-weight:600; text-decoration:none;
    background:linear-gradient(var(--citrus),var(--citrus)) 0 100% / 0 1.5px no-repeat;
    transition:color .3s, background-size .45s var(--ease);
  }
  #cookiePopup .cookie_content a:hover{ color:var(--citrus); background-size:100% 1.5px; }
  
  /* ---------- Buttons ---------- */
  #cookiePopup .cookieBtns{
    display:flex; gap:10px;
    margin-top:20px;
    animation:ckRise .6s .5s var(--ease) both;
  }
  #cookiePopup .cookieBtns button{
    position:relative; isolation:isolate; overflow:hidden;
    flex:1;
    padding:.8rem 1.2rem;
    border-radius:60px;
    font-family:'Figtree',sans-serif; font-weight:700; font-size:.95rem; line-height:1.2;
    cursor:pointer;
    transition:color .45s var(--ease), border-color .45s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  /* liquid fill that rises on hover */
  #cookiePopup .cookieBtns button::before{
    content:""; position:absolute; z-index:-1; left:50%; top:100%;
    width:160%; aspect-ratio:1; border-radius:42%;
    transform:translate(-50%,0) rotate(0deg);
    transition:top .6s var(--ease), transform 1.2s linear;
  }
  #cookiePopup .cookieBtns button:hover::before{ top:-60%; transform:translate(-50%,0) rotate(160deg); }
  #cookiePopup .cookieBtns button:hover{ transform:translateY(-2px); }
  #cookiePopup .cookieBtns button:active{ transform:translateY(0) scale(.96); }
  #cookiePopup .cookieBtns button:focus-visible{ outline:3px solid var(--aqua); outline-offset:3px; }
  
  /* Accept – citrus, fills white */
  #cookiePopup #acceptCookie{
    background:var(--citrus); color:var(--ink);
    border:2px solid var(--citrus);
    box-shadow:0 0 0 0 rgba(255,182,39,.5);
    animation:ckPulse 2.6s 1.6s ease-in-out infinite;
  }
  #cookiePopup #acceptCookie::before{ background:#fff; }
  #cookiePopup #acceptCookie:hover{
    border-color:#fff; animation:none;
    box-shadow:0 14px 26px -12px rgba(255,182,39,.7);
  }
  
  /* Decline – quiet outline, fills aqua-tinted */
  #cookiePopup #declineCookie{
    background:transparent; color:#d8eef1;
    border:2px solid rgba(255,255,255,.22);
  }
  #cookiePopup #declineCookie::before{ background:rgba(255,255,255,.1); }
  #cookiePopup #declineCookie:hover{ color:#fff; border-color:rgba(255,255,255,.5); }
  
  /* ---------- Mobile: full-width sheet at the bottom ---------- */
  @media (max-width:575.98px){
    #cookiePopup{
      left:12px; right:12px; bottom:12px; width:auto;
      padding:20px 18px 18px; border-radius:22px;
      animation-name:ckInMobile;
    }
    #cookiePopup .cookie_content{ grid-template-columns:44px 1fr; column-gap:12px; }
    #cookiePopup .cookie_content::before{ width:44px; height:44px; border-radius:14px; background-size:22px, auto; }
    #cookiePopup .cookie_content h4{ font-size:1.1rem; }
  }
  
  /* ---------- Keyframes ---------- */
  @keyframes ckIn{
    0%{   opacity:0; transform:translateY(40px) scale(.94); }
    60%{  opacity:1; transform:translateY(-6px) scale(1.01); }
    100%{ transform:none; }
  }
  @keyframes ckInMobile{
    from{ opacity:0; transform:translateY(100%); }
    to{   opacity:1; transform:none; }
  }
  @keyframes ckRise{
    from{ opacity:0; transform:translateY(10px); }
    to{   opacity:1; transform:none; }
  }
  @keyframes ckPop{
    0%{   opacity:0; transform:scale(.4) rotate(-40deg); }
    70%{  opacity:1; transform:scale(1.1) rotate(8deg); }
    100%{ transform:scale(1) rotate(0); }
  }
  @keyframes ckWiggle{
    0%,80%,100%{ transform:rotate(0); }
    85%{ transform:rotate(-12deg); }
    90%{ transform:rotate(10deg); }
    95%{ transform:rotate(-5deg); }
  }
  @keyframes ckBar{ to{ background-position:300% 0; } }
  @keyframes ckSpin{ to{ transform:rotate(360deg); } }
  @keyframes ckPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(255,182,39,.5); }
    50%{     box-shadow:0 0 0 9px rgba(255,182,39,0); }
  }
  
  @media (prefers-reduced-motion:reduce){
    #cookiePopup, #cookiePopup *, #cookiePopup *::before, #cookiePopup::before, #cookiePopup::after{
      animation:none !important; transition-duration:.01ms !important;
    }
  }

  /**********************Contact page design***********************/

.tc-body .tc-aside{ position:relative; }

/* soft panel the three cards sit on */
.tc-body .tc-panel{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:18px;
  border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--mist),#fff 70%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  animation:chRise .8s var(--ease) both;
}
.tc-body .tc-panel::before{          /* drifting aqua glow */
  content:""; position:absolute; z-index:-1;
  width:340px; height:340px; right:-120px; top:-160px; border-radius:50%;
  background:radial-gradient(circle,rgba(15,185,177,.22),transparent 70%);
  animation:chDrift 12s ease-in-out infinite alternate;
}
.tc-body .tc-panel::after{           /* citrus glow, opposite corner */
  content:"";
  position:absolute;
  z-index:-1;
  width:280px;
  height:280px;
  left:-120px;
  bottom:-150px;
  border-radius:50%;
  background: radial-gradient(circle, #0d6efd17, transparent 70%);
  animation:chDrift 14s ease-in-out infinite alternate-reverse;
}

/* ---------- cards ---------- */
.tc-body .tc-channels{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;
}
.tc-body .tc-channel{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:26px 24px 24px;
  border-radius:22px;
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:0 12px 30px -24px rgba(11,43,58,.45);
  animation:chRise .7s var(--ease) both;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.tc-body .tc-channel:nth-child(1){ animation-delay:.15s; }
.tc-body .tc-channel:nth-child(2){ animation-delay:.27s; }
.tc-body .tc-channel:nth-child(3){ animation-delay:.39s; }

/* gradient bar that sweeps across the top on hover */
.tc-body .tc-channel::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;
  background: linear-gradient(90deg, var(--aqua), #0d6efdb0, var(--citrus));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .55s var(--ease);
}
/* soft circle in the corner that grows on hover */
.tc-body .tc-channel::after{
  content:""; position:absolute; right:-50px; bottom:-50px;
  width:150px; height:150px; border-radius:50%;
  background:var(--aqua-soft); opacity:.55;
  transition:transform .7s var(--ease), background .45s;
  z-index:0;
}
.tc-body .tc-channel > *{ position:relative; z-index:1; }

.tc-body .tc-channel:hover{
  transform:translateY(-8px);
  border-color:transparent;
  box-shadow:var(--shadow-pop);
}
.tc-body .tc-channel:hover::before{ transform:scaleX(1); }
.tc-body .tc-channel:hover::after{transform:scale(1.6);background: #0d6efd26;}

/* ---------- icon tile ---------- */
.tc-body .tc-channel__icon{
  position:relative;
  width:56px; height:56px; border-radius:18px;
  display:grid; place-items:center;
  background:var(--ink); color:var(--citrus);
  box-shadow:0 14px 24px -14px rgba(11,43,58,.8);
  transition:background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease);
}
.tc-body .tc-channel__icon::after{          /* ring that pulses out */
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:2px solid var(--aqua);
  animation:chRing 2.8s ease-out infinite;
}
.tc-body .tc-channel:nth-child(2) .tc-channel__icon::after{ animation-delay:.9s; }
.tc-body .tc-channel:nth-child(3) .tc-channel__icon::after{ animation-delay:1.8s; }

.tc-body .tc-channel__icon .tc-icon{
  width:26px; height:26px; padding:0; background:none; border-radius:0;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
/* each icon has its own little idle motion */
.tc-body .tc-channel:nth-child(1) .tc-icon{ animation:chRingPhone 3.2s ease-in-out infinite; transform-origin:50% 60%; }
.tc-body .tc-channel:nth-child(2) .tc-icon{ animation:chFloat 3s ease-in-out infinite; }
.tc-body .tc-channel:nth-child(3) .tc-icon{ animation:chBounce 2.6s ease-in-out infinite; transform-origin:50% 100%; }

.tc-body .tc-channel:hover .tc-channel__icon{
  background:var(--aqua); color:#fff;
  transform:rotate(-8deg) scale(1.06);
}

/* ---------- text ---------- */
.tc-body .tc-channel__body{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.tc-body .tc-channel__label{
  font-size:.82rem; font-weight:700; color:var(--aqua-deep);
}
.tc-body .tc-channel__value{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800; font-size:1.2rem; line-height:1.35; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none; font-style:normal;
  overflow-wrap:anywhere;
  transition:color .3s;
}
.tc-body a.tc-channel__value{
  width:max-content; max-width:100%;
  background:linear-gradient(var(--citrus),var(--citrus)) 0 100% / 0 2px no-repeat;
  transition:color .3s, background-size .45s var(--ease);
}
.tc-body a.tc-channel__value:hover{ color:var(--aqua-deep); background-size:100% 2px; }
.tc-body a.tc-channel__value:focus-visible{ outline:3px solid var(--citrus); outline-offset:3px; border-radius:6px; }

/* long email addresses: a little smaller so they break less */
.tc-body .tc-channel__value[href^="mailto:"]{ font-size:1.02rem; letter-spacing:-.015em; }

/* address: company on its own line, street in regular weight */
.tc-body address.tc-channel__value{
  font-family:'Figtree',sans-serif; font-weight:500; font-size:1rem; line-height:1.6;
  color:var(--muted);
}
.tc-body .tc-channel__company{
  display:block; margin-bottom:2px;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.2rem; line-height:1.35;
  color:var(--ink);
}

/* screen-reader-only status line (used for "copied" messages) */
.tc-body .tc-sr{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- responsive ---------- */
@media (max-width:991.98px){
  .tc-body .tc-channels{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tc-body .tc-channel:nth-child(3){ grid-column:1 / -1; }
}
@media (max-width:575.98px){
  .tc-body .tc-panel{ padding:12px; border-radius:22px; }
  .tc-body .tc-channels{ grid-template-columns:1fr; gap:12px; }
  .tc-body .tc-channel{ flex-direction:row; align-items:flex-start; gap:16px; padding:20px 18px; }
  .tc-body .tc-channel__icon{ flex:none; width:48px; height:48px; border-radius:15px; }
  .tc-body .tc-channel__value,
  .tc-body .tc-channel__company{ font-size:1.05rem; }
  .tc-body .tc-channel__value[href^="mailto:"]{ font-size:.95rem; }
}

/* ---------- keyframes ---------- */
@keyframes chRise{
  from{ opacity:0; transform:translateY(26px); }
  to{   opacity:1; transform:none; }
}
@keyframes chDrift{
  from{ transform:translate(0,0) scale(1); }
  to{   transform:translate(-40px,30px) scale(1.15); }
}
@keyframes chRing{
  0%{   transform:scale(1);    opacity:.8; }
  70%,100%{ transform:scale(1.45); opacity:0; }
}
@keyframes chRingPhone{
  0%,70%,100%{ transform:rotate(0); }
  74%{ transform:rotate(-14deg); }
  78%{ transform:rotate(12deg); }
  82%{ transform:rotate(-10deg); }
  86%{ transform:rotate(8deg); }
  90%{ transform:rotate(0); }
}
@keyframes chFloat{
  0%,100%{ transform:translateY(0); }
  50%{     transform:translateY(-3px); }
}
@keyframes chBounce{
  0%,60%,100%{ transform:translateY(0) scaleY(1); }
  70%{ transform:translateY(-5px) scaleY(1.04); }
  80%{ transform:translateY(0) scaleY(.94); }
  90%{ transform:translateY(-2px) scaleY(1); }
}

@media (prefers-reduced-motion:reduce){
  .tc-body .tc-panel, .tc-body .tc-panel *, .tc-body .tc-panel *::before, .tc-body .tc-panel *::after,
  .tc-body .tc-panel::before, .tc-body .tc-panel::after{
    animation:none !important; transition-duration:.01ms !important;
  }
}

  /**********************Contact page design***********************/

.checkout-terms{
  position: relative;
  padding-top: 10px;
}
.checkout-terms .error-message-inline{
  position: absolute;
  top:0;
}

.tc-tags{
  padding-left: 20px;
}