/* ============================================================
   Fashion Flow — marketing site
   Palette is taken straight from the logo: red, cyan, blue,
   green, amber, purple. Red leads, the rest appear in small
   doses. The ">" chevron from the logo is the signature mark.
   ============================================================ */

:root{
  /* ink + paper */
  --ink:#0E1116;
  --ink-2:#414A59;
  --ink-3:#6E7787;
  --paper:#FAFAFB;
  --paper-2:#F2F3F7;
  --card:#FFFFFF;
  --line:#E4E6EC;
  --line-2:#EDEFF4;

  /* brand, from the wordmark */
  --red:#EE1C25;
  --cyan:#00AEEF;
  --blue:#0072CE;
  --green:#00A651;
  --amber:#FFC20E;
  --purple:#7B2D8E;

  /* the dark app UI shown inside the mockups */
  --app-bg:#0B0E13;
  --app-card:#141922;
  --app-card-2:#1A2029;
  --app-line:#252C38;
  --app-txt:#E9EDF3;
  --app-dim:#87909F;
  --app-cyan:#22B8F5;

  /* type */
  --display:"Bricolage Grotesque",Georgia,serif;
  --body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --deva:"Noto Sans Devanagari","Plus Jakarta Sans",system-ui,sans-serif;

  /* fluid type */
  --fs-xs:clamp(.75rem,.72rem + .12vw,.8125rem);
  --fs-sm:clamp(.875rem,.85rem + .15vw,.9375rem);
  --fs-base:clamp(1rem,.96rem + .2vw,1.0625rem);
  --fs-lg:clamp(1.0625rem,1rem + .35vw,1.25rem);
  --fs-h3:clamp(1.5rem,1.25rem + 1.1vw,2.125rem);
  --fs-h2:clamp(1.9rem,1.45rem + 2.1vw,3.15rem);
  --fs-h1:clamp(2.6rem,1.8rem + 3.6vw,4.75rem);

  /* space */
  --sp-1:clamp(.5rem,.45rem + .25vw,.75rem);
  --sp-2:clamp(.75rem,.65rem + .5vw,1.125rem);
  --sp-3:clamp(1rem,.85rem + .75vw,1.5rem);
  --sp-4:clamp(1.5rem,1.2rem + 1.5vw,2.5rem);
  --sp-5:clamp(2.25rem,1.8rem + 2.2vw,3.75rem);
  --sp-6:clamp(3.5rem,2.6rem + 4.5vw,7rem);

  --r-sm:10px; --r:14px; --r-lg:22px; --r-xl:30px;
  --sh-1:0 1px 2px rgba(14,17,22,.05);
  --sh-2:0 6px 20px -6px rgba(14,17,22,.10);
  --sh-3:0 24px 60px -20px rgba(14,17,22,.22);
  --sh-app:0 40px 90px -30px rgba(14,17,22,.45);

  --ease:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.3,.5,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px}
/* No overflow-x on body. It turns body into a scroll container,
   which stops the sticky header from sticking. Each section that
   can overspill clips its own contents instead. */
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:var(--fs-base);line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
html[data-lang="hi"] body{font-family:var(--deva);line-height:1.75}
html[data-lang="hi"] .h1,html[data-lang="hi"] .h2,html[data-lang="hi"] .h3,
html[data-lang="hi"] .hero__title{font-family:var(--deva);letter-spacing:0}
/* Devanagari does not take tracking or capitals the way Latin does */
html[data-lang="hi"] .eyebrow,html[data-lang="hi"] .tag,
html[data-lang="hi"] .foot__col h4{letter-spacing:.01em;text-transform:none;font-family:var(--deva)}
html[data-lang="hi"] .note,html[data-lang="hi"] .cta__note{letter-spacing:0;font-family:var(--deva)}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;line-height:1.06;letter-spacing:-.028em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
address{font-style:normal}

:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:6px}
:focus:not(:focus-visible){outline:none}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

/* ---------- layout ---------- */
.wrap{width:min(1200px,calc(100% - 2.5rem));margin-inline:auto}
.wrap--narrow{width:min(780px,calc(100% - 2.5rem))}
.sec{padding-block:var(--sp-6);position:relative}
/* A very faint crosshatch, the weight of a woven fabric rather than
   a pattern anyone is meant to consciously notice. */
.sec--alt{
  background:
    repeating-linear-gradient(45deg,rgba(14,17,22,.025) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(-45deg,rgba(14,17,22,.02) 0 1px,transparent 1px 6px),
    var(--paper-2);
}

/* ---------- the seam ----------
   A running stitch along the top edge of every section, as if the
   page were sewn together rather than just stacked. One shared SVG
   tile, tinted with the thread color, low opacity so it reads as
   texture rather than decoration fighting the content. */
.sec::before,.cta::before{
  content:"";position:absolute;top:0;left:0;right:0;height:11px;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12'%3E%3Cg fill='none' stroke='rgb(238,28,37)' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 6 H10'/%3E%3Cpath d='M16 3 L20 9 M20 3 L16 9'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:center;background-size:28px 12px;
  opacity:.4;pointer-events:none;
}
.cta::before{opacity:.55}
/* rem, not ch: these wrappers sit at body size while the heading
   inside them is three times bigger, so ch measures the wrong font */
.sec__h{max-width:min(46rem,100%);margin-bottom:var(--sp-5)}
.sec__h--center{margin-inline:auto;text-align:center;max-width:min(52rem,100%)}
.sec__sub{color:var(--ink-3);font-size:var(--fs-lg);margin-top:var(--sp-2)}

.h1{font-size:var(--fs-h1)}
.h2{font-size:var(--fs-h2)}
.h3{font-size:var(--fs-h3)}

/* the signature chevron, lifted from the logo */
.chev{width:.62em;height:.62em;flex:none;border-right:2.5px solid currentColor;border-top:2.5px solid currentColor;transform:rotate(45deg);transition:transform .25s var(--ease)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;margin:0 0 var(--sp-2);
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
.sec__h--center .eyebrow{justify-content:center}
.eyebrow--center{justify-content:center;display:flex}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:46px;padding:.7rem 1.3rem;border-radius:999px;
  background:var(--ink);color:#fff;font-weight:600;font-size:var(--fs-sm);
  box-shadow:var(--sh-2);transition:transform .22s var(--spring),box-shadow .22s var(--ease),background .22s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-3);background:#000}
.btn:hover .chev{transform:rotate(45deg) translate(2px,-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--lg{min-height:56px;padding:.95rem 1.8rem;font-size:var(--fs-base)}
.btn--sm{min-height:42px;padding:.55rem 1.1rem}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--ghost:hover{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--ink-3),var(--sh-2)}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:#fff}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(250,250,251,.82);backdrop-filter:blur(14px) saturate(180%);border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease)}
.nav.is-stuck{border-bottom-color:var(--line);background:rgba(250,250,251,.94)}
.nav__inner{display:flex;align-items:center;gap:var(--sp-3);height:88px}
.nav__brand img{height:79px;width:auto}
@media (max-width:560px){.nav__brand img{height:79px}}
.nav__links{display:flex;gap:var(--sp-3);margin-left:auto;font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);white-space:nowrap}
.nav__links a{position:relative;padding:.35rem 0}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--red);transition:width .28s var(--ease)}
.nav__links a:hover::after{width:100%}
.nav__right{display:flex;align-items:center;gap:.85rem;margin-left:auto}
.nav__links + .nav__right{margin-left:0}

.lang{display:flex;background:var(--paper-2);border-radius:999px;padding:3px;box-shadow:inset 0 0 0 1px var(--line)}
.lang__btn{padding:.3rem .7rem;border-radius:999px;font-size:var(--fs-xs);font-weight:600;color:var(--ink-3);transition:.2s var(--ease)}
/* the pill itself stays compact, but the tappable area meets the
   44px minimum on a touch screen */
@media (max-width:820px){.lang__btn{padding:.62rem .7rem}}
.lang__btn.is-on{background:var(--card);color:var(--ink);box-shadow:var(--sh-1)}

.nav__cta-m{display:none}
.nav__burger{display:none;width:44px;height:44px;border-radius:var(--r-sm);flex-direction:column;justify-content:center;align-items:center;gap:5px}
.nav__burger span{width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.25s var(--ease)}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:var(--sp-5);padding-bottom:var(--sp-6);overflow:hidden}
.hero__glow{
  position:absolute;inset:-30% -10% auto;height:120%;pointer-events:none;z-index:0;
  background:
    radial-gradient(46rem 30rem at 78% 8%,rgba(0,174,239,.16),transparent 62%),
    radial-gradient(38rem 26rem at 12% 0%,rgba(238,28,37,.10),transparent 60%),
    radial-gradient(30rem 22rem at 60% 42%,rgba(123,45,142,.07),transparent 65%);
  animation:glowDrift 22s ease-in-out infinite alternate;
}
/* The same slow drift dresses up every other page's hero band, so
   the whole site reads as one animated system, not a hero that got
   the treatment while the rest of the pages sat still. */
.page-hero{position:relative;overflow:hidden}
.page-hero > .wrap{position:relative;z-index:1}
.page-glow{
  position:absolute;inset:-40% -10% auto;height:150%;pointer-events:none;z-index:0;
  background:
    radial-gradient(40rem 26rem at 20% 6%,rgba(0,174,239,.14),transparent 62%),
    radial-gradient(34rem 24rem at 82% 18%,rgba(238,28,37,.11),transparent 60%),
    radial-gradient(28rem 20rem at 55% 55%,rgba(123,45,142,.08),transparent 65%);
  animation:glowDrift 24s ease-in-out infinite alternate-reverse;
}
@keyframes glowDrift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-2%,2.5%) scale(1.06)}
  100%{transform:translate(2%,-1.5%) scale(1.02)}
}
@media (prefers-reduced-motion:reduce){.hero__glow,.page-glow{animation:none}}

/* a handful of soft dots drifting slowly upward through the glow,
   pure CSS so they cost nothing and need no JavaScript to exist */
.particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.particles i{
  position:absolute;bottom:-8%;width:6px;height:6px;border-radius:50%;
  background:var(--p-c,var(--cyan));opacity:0;animation:particleFloat var(--p-d,16s) linear infinite;
  animation-delay:var(--p-delay,0s);
}
.particles i:nth-child(1){left:8%; --p-c:var(--red); --p-d:14s; --p-delay:0s}
.particles i:nth-child(2){left:22%;--p-c:var(--cyan);--p-d:19s; --p-delay:2.5s; width:4px;height:4px}
.particles i:nth-child(3){left:38%;--p-c:var(--amber);--p-d:16s; --p-delay:5s}
.particles i:nth-child(4){left:57%;--p-c:var(--purple);--p-d:21s; --p-delay:1s; width:5px;height:5px}
.particles i:nth-child(5){left:74%;--p-c:var(--green);--p-d:17s; --p-delay:6.5s}
.particles i:nth-child(6){left:89%;--p-c:var(--cyan); --p-d:20s; --p-delay:3.5s; width:4px;height:4px}
@keyframes particleFloat{
  0%{opacity:0;transform:translateY(0) scale(.6)}
  10%{opacity:.5}
  85%{opacity:.35}
  100%{opacity:0;transform:translateY(-70vh) scale(1)}
}
@media (prefers-reduced-motion:reduce){.particles i{animation:none;opacity:0}}
@media (max-width:640px){.particles{display:none}}
.hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:var(--sp-5);align-items:center}
.hero__title{font-size:var(--fs-h1);letter-spacing:-.04em;margin-bottom:var(--sp-2)}
.hero__sub{font-size:var(--fs-lg);color:var(--ink-2);max-width:38ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--sp-3)}
.hero__trust{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:var(--sp-4);font-size:var(--fs-sm);color:var(--ink-3)}
.hero__trust li{display:flex;align-items:center;gap:.5rem}
.hero__trust li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green)}

.hero__art{position:relative}

/* All four slides stack in the same grid cell, so the container's
   height is simply the tallest of them and nothing jumps when the
   active one changes. Perspective sits here so the tilt on the
   slide inside still reads as 3D. */
.hero__carousel{display:grid;perspective:1600px}
.hero__slide{grid-area:1/1;opacity:0;transform:scale(.985);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.hero__slide.is-on{opacity:1;transform:none;pointer-events:auto;z-index:1}

.hero__dots{display:flex;gap:.4rem;margin-top:var(--sp-3);position:relative;z-index:2}
.hero__dot{
  padding:.5rem .95rem;border-radius:999px;font-size:var(--fs-xs);font-weight:600;color:var(--ink-3);
  background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:.22s var(--ease);
}
.hero__dot:hover{color:var(--ink)}
.hero__dot.is-on{background:var(--ink);color:#fff;box-shadow:none}
.float{
  position:absolute;z-index:3;background:var(--card);border-radius:var(--r);padding:.7rem .95rem;
  box-shadow:var(--sh-3);border:1px solid var(--line-2);min-width:150px;
}
.float b{display:flex;align-items:center;gap:.4rem;font-family:var(--display);font-size:1.05rem;letter-spacing:-.02em}
.live-dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.live-dot::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;background:var(--green);opacity:.5;
  animation:liveDotPulse 1.8s ease-out infinite;
}
@keyframes liveDotPulse{0%{transform:scale(.4);opacity:.55}100%{transform:scale(1.8);opacity:0}}
@media (prefers-reduced-motion:reduce){.live-dot::after{animation:none;display:none}}
.float small{display:block;font-size:.72rem;color:var(--ink-3);line-height:1.35;margin-top:1px}
/* Hung off the corners so they read as notifications arriving,
   without covering the interface they are pointing at. */
.float--a{top:9%;left:-14%;border-left:3px solid var(--green)}
.float--b{top:9%;right:-12%;border-left:3px solid var(--cyan)}

/* ---------- marquee ---------- */
.marq{border-block:1px solid var(--line);background:var(--card);padding:.9rem 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* GSAP nudges this one with a scroll-speed skew. It carries no
   transform of its own, so the two never fight over the property. */
.marq__skew{width:max-content}
.marq__track{display:flex;align-items:center;gap:1.6rem;width:max-content;animation:slide 42s linear infinite}
.marq span{font-family:var(--display);font-size:clamp(.95rem,.85rem + .4vw,1.25rem);color:var(--ink-2);white-space:nowrap}
.marq .chev{width:.42rem;height:.42rem;border-width:2px;color:var(--red);opacity:.75}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- stats ---------- */
.stats{padding-block:var(--sp-5)}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2);margin-top:var(--sp-3)}
@media (max-width:640px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat-tile{text-align:center;padding:var(--sp-3) var(--sp-2);border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line)}
.stat-tile .num{display:block;font-family:var(--display);font-size:clamp(2rem,1.6rem + 1.8vw,3rem);letter-spacing:-.03em;color:var(--ink)}
.stat-tile .c-green2{color:#0F9D58}
.stat-tile .c-cyan2{color:var(--blue)}
.stat-tile .c-amber2{color:#B45309}
.stat-tile span{display:block;margin-top:.35rem;font-size:var(--fs-sm);color:var(--ink-3)}
.stats .note{margin-top:var(--sp-3)}

/* ---------- before / after comparison ---------- */
.compare-head{margin-top:var(--sp-5);max-width:min(46rem,100%)}
.compare-head .h3{margin:.5rem 0 .4rem}
.compare-head p:last-child{color:var(--ink-3)}

.compare{
  position:relative;margin-top:var(--sp-3);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-2);user-select:none;touch-action:pan-y;min-height:280px;
}
.compare__panel{position:absolute;inset:0;padding:var(--sp-4) var(--sp-3)}
.compare__panel--after{background:var(--card);z-index:1}
.compare__panel--before{
  z-index:2;
  background:
    repeating-linear-gradient(to bottom,transparent 0 34px,rgba(14,17,22,.06) 34px 35px),
    #FBF6EC;
}
.compare__list{display:grid;gap:.85rem;max-width:30rem;padding-top:2px}
.compare__list li{font-size:var(--fs-sm);line-height:1.5}
/* The "before" list sits in the left half, which is the half that
   stays uncovered as the handle moves right, so it stays put on the
   left. The "after" list lives in the same full-width panel but the
   half that stays uncovered is the RIGHT one, so it is pushed there
   instead of defaulting to the left edge, where the other panel
   would always be sitting on top of it. */
.compare__list--after{margin-left:auto}
.compare__list--after li{display:flex;gap:.65rem;align-items:flex-start;color:var(--ink-2)}
.compare__list--before li{color:#5B5142;padding-left:.1rem;text-decoration:line-through;text-decoration-color:rgba(238,28,37,.55);text-decoration-thickness:1.5px}
.tick{flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:rgba(0,166,81,.14);position:relative}
.tick::after{content:"";position:absolute;left:5px;top:4px;width:7px;height:4px;border-left:2px solid #0F9D58;border-bottom:2px solid #0F9D58;transform:rotate(-45deg)}

.compare__tag{
  position:absolute;top:14px;z-index:3;padding:.3rem .75rem;border-radius:999px;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.04em;color:#fff;pointer-events:none;
}
.compare__tag--l{left:14px;background:#8A7C5C}
.compare__tag--r{right:14px;background:var(--green)}

.compare__handle{
  position:absolute;top:0;bottom:0;z-index:2;width:44px;margin-left:-22px;
  display:flex;align-items:center;justify-content:center;gap:2px;pointer-events:none;
}
.compare__handle::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(14,17,22,.08)}
.compare__handle i{width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:var(--sh-2);display:grid;place-items:center;position:relative;z-index:1}
.compare__handle i:first-child{margin-right:-30px}
.compare__handle i.chev{border:0;width:34px;height:34px}
.compare__handle i.chev::before{content:"";display:block;width:7px;height:7px;border-right:2px solid var(--ink-2);border-top:2px solid var(--ink-2);transform:rotate(135deg)}
.compare__handle i.chev:last-child::before{transform:rotate(-45deg)}

.compare__range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:4;
  opacity:0;cursor:ew-resize;appearance:none;-webkit-appearance:none;
}
.compare__range::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%}
.compare__range::-moz-range-thumb{width:44px;height:100%;border:0;background:transparent}
.compare__range:focus-visible ~ .compare__handle i{outline:3px solid var(--red);outline-offset:2px}

@media (max-width:640px){
  .compare{min-height:420px}
  .compare__tag{top:auto;bottom:14px}
  .compare__tag--l{left:14px}.compare__tag--r{right:14px}
}

/* ---------- problem cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:var(--sp-2)}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-3);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:#D9DCE4}
/* a small cross stitch in the corner, like a maker's mark on a
   finished patch. Card and feature tiles share it. */
.card::after,.feat::after{
  content:"";position:absolute;top:16px;right:16px;width:13px;height:13px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='rgb(238,28,37)' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 2 L12 12M12 2 L2 12'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.14;pointer-events:none;transition:opacity .3s var(--ease);
}
.card:hover::after,.feat:hover::after{opacity:.3}
.card__n{font-family:var(--mono);font-size:var(--fs-xs);color:var(--red);letter-spacing:.08em}
.card h3{font-size:1.16rem;margin:.6rem 0 .5rem;letter-spacing:-.02em}
.card p{font-size:var(--fs-sm);color:var(--ink-3)}

/* A stitched spine running down the margin of the tour section,
   the way a bound book's pages are sewn along one edge. Purely
   decorative, so it is fine that it never depends on JavaScript
   to become visible. */
.thread-spine{
  position:absolute;top:70px;bottom:60px;left:max(18px,calc((100% - 1200px) / 2 + 6px));
  width:2px;z-index:0;opacity:.3;transform-origin:top;
  background-image:repeating-linear-gradient(to bottom,rgb(238,28,37) 0 6px,transparent 6px 15px);
}
@media (max-width:1080px){.thread-spine{display:none}}

/* ---------- tour ---------- */
.tour{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:var(--sp-5);align-items:center;padding-block:var(--sp-5)}
/* On a flipped row the screen moves to the left, so the wide
   column has to move with it or the mockup gets squeezed. */
.tour--flip{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.tour--flip .tour__txt{order:2}
.tour__txt .h3{margin:.6rem 0 var(--sp-2)}
.tour__txt > p{color:var(--ink-2);max-width:40ch}
.tag{display:inline-block;padding:.32rem .8rem;border-radius:999px;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.tag--red{background:var(--red)} .tag--purple{background:var(--purple)}
.tag--cyan{background:var(--blue)} .tag--green{background:var(--green)}
.tag--amber{background:#B45309}
.ticks{margin-top:var(--sp-3);display:grid;gap:.7rem}
.ticks li{position:relative;padding-left:1.6rem;font-size:var(--fs-sm);color:var(--ink-2)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;width:.42rem;height:.42rem;
  border-right:2.5px solid var(--red);border-top:2.5px solid var(--red);transform:rotate(45deg);
}

/* ============================================================
   The dark app UI, rebuilt in HTML so it stays sharp at any size
   ============================================================ */
.app{
  background:var(--app-bg);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-app);border:1px solid #1D242E;color:var(--app-txt);
  font-size:11px;line-height:1.45;
}
/* perspective sits on the parent so GSAP can drive the rotation
   without having to rebuild the whole transform string */
.app--tilt{transform:rotateY(-7deg) rotateX(2.5deg)}
.app__chrome{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#0A0D11;border-bottom:1px solid var(--app-line)}
.app__chrome i{width:8px;height:8px;border-radius:50%;background:#2C3440}
.app__chrome i:first-child{background:#3A2226}
.app__url{margin-left:8px;font-family:var(--mono);font-size:9.5px;color:#5C6675;background:#11151B;padding:3px 12px;border-radius:999px}
.app__body{display:grid;grid-template-columns:132px minmax(0,1fr)}
.app__body--flat{grid-template-columns:1fr}
.app__side{background:#0A0D11;border-right:1px solid var(--app-line);padding:12px 8px;display:flex;flex-direction:column;gap:2px}
.app__logo{font-family:var(--display);font-size:15px;letter-spacing:-.03em;padding:2px 8px 12px;color:#fff}
.app__logo b{color:var(--red)}
.s-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;color:var(--app-dim);font-size:10.5px}
.s-item i{width:12px;height:12px;border-radius:3.5px;background:#222A35;flex:none}
.s-item.is-on{background:var(--app-cyan);color:#04121A;font-weight:600}
.s-item.is-on i{background:rgba(4,18,26,.35)}
.app__main{padding:12px;display:grid;gap:10px;align-content:start}

.app__greet{display:flex;align-items:center;gap:9px;background:var(--app-card);border:1px solid var(--app-line);border-radius:var(--r);padding:9px 11px}
.app__greet b{display:block;font-size:11.5px}
.app__greet small{color:var(--app-dim);font-size:9.5px}
.app__greet .clock{margin-left:auto;font-family:var(--mono);font-size:14px;letter-spacing:-.02em}
.clock .g{color:#22C55E}.clock .o{color:#F97316}
.av{width:26px;height:26px;border-radius:8px;background:linear-gradient(140deg,var(--red),var(--purple));display:grid;place-items:center;font-size:9.5px;font-weight:700;color:#fff;flex:none}
.av--sm{width:22px;height:22px;border-radius:7px;font-size:8.5px}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat-row--4{grid-template-columns:repeat(4,1fr)}
.stat{background:var(--app-card);border:1px solid var(--app-line);border-radius:var(--r);padding:10px}
.stat small{display:block;color:var(--app-dim);font-size:9.5px;margin-bottom:4px}
.stat .num{font-family:var(--display);font-size:17px;letter-spacing:-.03em;display:block}
.stat .bar{display:flex;gap:2px;height:4px;margin-top:8px;border-radius:999px;overflow:hidden}
.stat .bar i{background:var(--app-cyan);border-radius:999px}
.stat .bar u{background:#F97316;border-radius:999px}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:6px;font-size:8.5px;color:var(--app-dim)}
.legend em{width:5px;height:5px;border-radius:50%;display:inline-block}
.c-b{background:var(--app-cyan)}.c-o{background:#F97316}
.c-orange{color:#F59E0B}.c-cyan{color:var(--app-cyan)}.c-green{color:#22C55E}
.c-purple{background:#8B5CF6}.c-amber{background:#F59E0B}

.app__grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:8px}
.app__grid--2{grid-template-columns:1.3fr 1fr}
.panel{background:var(--app-card);border:1px solid var(--app-line);border-radius:var(--r);padding:10px;min-height:96px}
.panel__h{display:flex;justify-content:space-between;align-items:baseline;font-size:10.5px;font-weight:600;margin-bottom:8px}
.panel__h span{color:var(--app-dim);font-size:9px;font-weight:400}
.spark{width:100%;height:62px}
.spark__line{stroke-dasharray:340;stroke-dashoffset:0}

.pipe{display:grid;gap:7px}
.pipe li{display:grid;grid-template-columns:52px 1fr 16px;align-items:center;gap:7px;font-size:9.5px;color:var(--app-dim)}
.pipe i{height:5px;border-radius:999px;background:#1E2530;position:relative;display:block}
.pipe i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--c,var(--app-cyan));border-radius:999px}
.pipe b{text-align:right;color:var(--app-txt);font-size:10px}

.cd{display:grid;gap:7px}
.cd li{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:9.5px;color:var(--app-dim);padding-bottom:6px;border-bottom:1px solid #1B222C}
.cd li:last-child{border:0;padding-bottom:0}
.cd b{font-family:var(--mono);font-size:10px;color:#22C55E;white-space:nowrap}
.cd b.late{color:var(--red)}

/* kanban */
.kan{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kan__col{background:#0E1219;border:1px solid var(--app-line);border-radius:var(--r);padding:8px;display:grid;gap:7px;align-content:start}
.kan__h{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600}
.kan__h em{width:6px;height:6px;border-radius:50%;display:inline-block}
.kan__h em.c-cyan{background:var(--app-cyan)}
.kan__h em.c-amber{background:#F59E0B}
.kan__h em.c-purple{background:#8B5CF6}
.kan__h em.c-green{background:#22C55E}
.kan__h b{margin-left:auto;color:var(--app-dim);font-weight:500;font-size:9.5px}
.kan__card{background:var(--app-card-2);border:1px solid var(--app-line);border-radius:9px;padding:8px}
.kan__card b{display:block;font-size:10.5px}
.kan__card small{display:block;color:var(--app-dim);font-size:9px;margin-top:1px}
.kan__f{display:flex;justify-content:space-between;align-items:center;margin-top:7px}
.kan__f u{text-decoration:none;font-family:var(--mono);font-size:9.5px}
.kan__card--done{border-color:#1E4C33}
.pill{padding:2px 7px;border-radius:999px;background:#222A35;color:var(--app-dim);font-size:8.5px;white-space:nowrap}
.pill--hot{background:#3A1A1C;color:#FB7185}
.pill--ok{background:#12351F;color:#4ADE80}

/* pos */
.pos{display:grid;grid-template-columns:1.35fr 1fr;gap:10px;padding:12px}
.pos__search{background:var(--app-card);border:1px solid var(--app-line);border-radius:9px;padding:8px 11px;color:#5C6675;font-size:10px;margin-bottom:8px}
.pos__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.pos__it{background:var(--app-card);border:1px solid var(--app-line);border-radius:10px;padding:9px;display:block;font-size:9.5px;color:var(--app-dim)}
.pos__it i{display:block;width:100%;height:26px;border-radius:6px;background:var(--c);opacity:.22;margin-bottom:7px}
.pos__it b{display:block;color:var(--app-txt);font-family:var(--mono);font-size:10px;margin-top:3px}
.pos__cart{background:var(--app-card);border:1px solid var(--app-line);border-radius:var(--r);padding:10px;display:grid;gap:9px;align-content:start}
.pos__cust{display:flex;align-items:center;gap:8px}
.pos__cust b{display:block;font-size:10.5px}
.pos__cust small{color:var(--app-dim);font-size:9px}
.pos__lines{display:grid;gap:6px;border-block:1px solid var(--app-line);padding-block:9px}
.pos__lines li{display:flex;justify-content:space-between;font-size:10px;color:var(--app-dim)}
.pos__lines em{font-style:normal;color:#5C6675}
.pos__lines b{color:var(--app-txt);font-family:var(--mono);font-weight:500}
.pos__tot{display:flex;justify-content:space-between;align-items:baseline;font-size:10.5px}
.pos__tot b{font-family:var(--display);font-size:19px;letter-spacing:-.03em}
.pos__pay{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.pos__pay span{text-align:center;padding:5px 0;border-radius:7px;background:#1A2029;color:var(--app-dim);font-size:9px}
.pos__pay .is-on{background:var(--app-cyan);color:#04121A;font-weight:600}
.pos__btn{background:var(--app-cyan);color:#04121A;text-align:center;padding:9px;border-radius:9px;font-weight:700;font-size:11px}

/* customers */
.cust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cust__c{background:var(--app-card);border:1px solid var(--app-line);border-radius:var(--r);padding:10px}
.cust__c b{display:block;font-size:10.5px;margin-top:7px}
.cust__c small{display:block;color:var(--app-dim);font-size:9px}
.cust__t{margin-top:7px}
.cust__m{display:flex;gap:12px;margin-top:8px;padding-top:8px;border-top:1px solid var(--app-line)}
.cust__m span{font-size:8.5px;color:var(--app-dim)}
.cust__m b{display:block;font-family:var(--mono);font-size:10px;color:var(--app-txt);margin:0}

/* ---------- shared inner-page bits ---------- */
.nav__links a.is-current{color:var(--ink);font-weight:700}
.nav__links a.is-current::after{width:100%}

.page-hero{padding-top:var(--sp-5)}
.page-hero__title{margin:.6rem 0 var(--sp-2)}
.page-hero__sub{color:var(--ink-2);font-size:var(--fs-lg);max-width:44ch;margin-inline:auto}

.tour--single{grid-template-columns:1fr;max-width:52rem;margin-inline:auto}
.tour--single .tour__txt > p{max-width:none;margin-top:.85rem}

.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-2)}
.team-card{text-align:center;background:var(--card);border:1px dashed var(--line);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-2)}
.team-card__ph{display:inline-grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--paper-2);margin-bottom:var(--sp-2)}
.team-card__ph svg{width:34px;height:34px;fill:none;stroke:var(--ink-3);stroke-width:1.5}
.team-card h3{font-size:1rem;letter-spacing:-.01em;margin-bottom:.2rem}
.team-card p{font-size:var(--fs-sm);color:var(--ink-3)}

/* ---------- blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-3)}
.blog-card{
  position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.blog-card:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.blog-card__shot{
  display:block;aspect-ratio:16/10;position:relative;
  background:linear-gradient(155deg,color-mix(in srgb,var(--c,var(--red)) 18%,var(--paper-2)),var(--paper-2));
}
.blog-card__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blog-card__shot svg{position:absolute;inset:0;margin:auto;width:26%;height:26%;fill:none;stroke:var(--c,var(--red));stroke-width:1.3;opacity:.55}
.blog-card__meta{display:flex;gap:.6rem;align-items:center;padding:var(--sp-3) var(--sp-3) 0;font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-3)}
.blog-card__meta .tag{padding:.22rem .6rem;font-size:10px}
.blog-card h3{padding:.6rem var(--sp-3) 0;font-size:1.12rem;letter-spacing:-.02em;line-height:1.3}
.blog-card h3 a{color:var(--ink)}
.blog-card h3 a:hover{color:var(--red)}
.blog-card p{padding:0 var(--sp-3);margin-top:.5rem;font-size:var(--fs-sm);color:var(--ink-3);flex:1}
.blog-card__link{display:flex;align-items:center;gap:.4rem;margin:var(--sp-2) var(--sp-3) var(--sp-3);font-size:var(--fs-sm);font-weight:600;color:var(--ink);width:fit-content}
.blog-card__link .chev{width:.5rem;height:.5rem;border-width:2px}

/* the article itself: comfortable reading measure, real typography */
.article{max-width:42rem;margin-inline:auto}
.article__meta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-3);margin-bottom:var(--sp-2)}
.article__cover{
  aspect-ratio:16/8;border-radius:var(--r-lg);overflow:hidden;margin:var(--sp-3) 0 var(--sp-4);
  background:linear-gradient(155deg,rgba(238,28,37,.14),var(--paper-2));position:relative;box-shadow:var(--sh-2);
}
.article__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.article__body{font-size:1.08rem;line-height:1.75;color:var(--ink-2)}
.article__body h2{font-family:var(--display);font-size:1.5rem;letter-spacing:-.02em;color:var(--ink);margin:2.2em 0 .6em}
.article__body h3{font-family:var(--display);font-size:1.2rem;letter-spacing:-.01em;color:var(--ink);margin:1.8em 0 .5em}
.article__body p{margin:0 0 1.3em}
/* The site-wide reset above (ul,ol{list-style:none}) drops markers
   everywhere by design — every other list on the site supplies its
   own bullet, a checkmark or similar. An article body is real prose
   though, so this is the one place that puts native bullets/numbers
   back; display:grid also would have silently suppressed them even
   with list-style restored (grid and flex containers never render
   ::marker), so spacing between items comes from li margin instead
   of a grid/flex gap. */
.article__body ul,.article__body ol{margin:0 0 1.3em;padding-left:1.4em;list-style:revert}
.article__body li{padding-left:.2em;margin-bottom:.5em}
.article__body li:last-child{margin-bottom:0}
.article__body a{color:var(--red);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px}
.article__body a:hover{color:#C8151C}
.article__body a[target="_blank"]::after{content:" ↗";font-size:.8em}
.article__body blockquote{
  margin:1.8em 0;padding:.2em 0 .2em 1.2em;border-left:3px solid var(--red);
  font-family:var(--display);font-size:1.2rem;letter-spacing:-.01em;color:var(--ink);
}
.article__body strong{color:var(--ink);font-weight:700}
.article__cta{
  margin-top:var(--sp-5);padding:var(--sp-4);border-radius:var(--r-lg);background:var(--ink);color:#fff;
  display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;justify-content:space-between;
}
.article__cta p{margin:0;font-size:var(--fs-base);max-width:34ch}
.article__back{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:var(--fs-sm);margin-bottom:var(--sp-3)}
.article__back .chev{transform:rotate(-135deg);width:.5rem;height:.5rem;border-width:2px}

/* ---------- product detail page ---------- */
.prod-detail__media{margin:var(--sp-4) 0;text-align:left;display:grid;gap:var(--sp-3)}
.prod-detail__gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-2)}
.prod-detail__gallery:has(.prod-detail__shot--empty){grid-template-columns:1fr}
.prod-detail__videos{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.prod-detail__shot,.prod-detail__video{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;position:relative;box-shadow:var(--sh-2)}
/* A real screenshot is a <button> (so it's keyboard reachable and has
   a proper click semantics), the empty placeholder stays a plain
   <div> — this resets the button chrome back to look identical. */
.prod-detail__shot{display:block;width:100%;border:0;padding:0;background:var(--paper-2);font:inherit;cursor:zoom-in}
.prod-detail__shot img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .3s var(--ease)}
.prod-detail__shot:hover img{transform:scale(1.03)}
.prod-detail__shot:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.prod-detail__shot--empty,.prod-detail__video--empty{
  display:grid;place-items:center;gap:.6rem;text-align:center;padding:var(--sp-3);
  background:linear-gradient(155deg,var(--paper-2),var(--card));color:var(--ink-3);cursor:default;
}
.prod-detail__shot--empty svg{width:38px;height:38px;fill:none;stroke:var(--ink-3);stroke-width:1.3;opacity:.6}
.prod-detail__shot--empty p{font-size:var(--fs-xs);max-width:20ch}
.prod-detail__video--empty span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--card);box-shadow:var(--sh-1)}
.prod-detail__video--empty svg{width:24px;height:24px;fill:none;stroke:var(--ink-3);stroke-width:1.3}
.prod-detail__video--empty p{font-size:var(--fs-xs);max-width:20ch}
.prod-detail__video iframe{width:100%;height:100%;border:0;display:block}
.prod-detail__ticks{max-width:44rem;margin:0 auto var(--sp-3);text-align:left}
[data-product-root] .hero__cta,[data-solution-root] .hero__cta{justify-content:center;margin-top:var(--sp-2);flex-wrap:wrap}
@media (max-width:760px){.prod-detail__gallery{grid-template-columns:1fr}.prod-detail__videos{grid-template-columns:1fr}}

/* ---------- lightbox (full-size screenshot view) ---------- */
.lightbox{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:var(--sp-3);
  background:rgba(10,10,14,0);transition:background .25s var(--ease);
}
/* A class selector beats the browser's own [hidden] rule on
   specificity — without this, "hidden" would stop hiding anything
   the moment .lightbox also sets its own display, the same bug the
   admin panel's gate/app switch already ran into once. */
.lightbox[hidden]{display:none}
.lightbox.is-open{background:rgba(10,10,14,.88)}
.lightbox__img{
  max-width:min(1100px,92vw);max-height:88vh;width:auto;height:auto;border-radius:var(--r-md);
  box-shadow:0 20px 60px rgba(0,0,0,.5);opacity:0;transform:scale(.94);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.lightbox.is-open .lightbox__img{opacity:1;transform:scale(1)}
.lightbox__close{
  position:fixed;top:var(--sp-3);right:var(--sp-3);width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;
  color:#fff;opacity:0;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease),background .2s var(--ease);
}
.lightbox.is-open .lightbox__close{opacity:1;transform:translateY(0)}
.lightbox__close:hover{background:rgba(255,255,255,.22)}
.lightbox__close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lightbox__close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (prefers-reduced-motion:reduce){
  .lightbox,.lightbox__img,.lightbox__close{transition:none}
}

/* ---------- pricing page ---------- */
.cycle-toggle{
  position:relative;display:inline-flex;gap:.25rem;margin-top:var(--sp-3);padding:.3rem;background:var(--paper-2);
  border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);
}
/* JS positions this under whichever button is active and slides it
   there on change. Until JS runs, it has no width and the plain
   per-button background below (never removed) is what shows the
   active state, so nothing depends on this existing. */
.cycle-toggle__pill{
  position:absolute;top:.3rem;bottom:.3rem;left:.3rem;width:0;border-radius:999px;
  background:var(--ink);z-index:0;transition:transform .35s var(--spring),width .35s var(--spring);
}
.cycle-btn{
  position:relative;z-index:1;display:flex;align-items:center;gap:.4rem;padding:.55rem 1.1rem;border-radius:999px;
  font-size:var(--fs-sm);font-weight:600;color:var(--ink-3);transition:color .2s var(--ease),background .2s var(--ease);
}
.cycle-btn.is-on{background:var(--ink);color:#fff}
/* once JS has the pill correctly placed, it takes over as the only
   active-state background so the two never visibly overlap */
.cycle-toggle.has-pill .cycle-btn.is-on{background:transparent;color:#fff}
.cycle-btn em{
  font-style:normal;font-size:10px;font-weight:700;padding:.15rem .4rem;border-radius:999px;
  background:rgba(0,166,81,.16);color:#0F9D58;
}
.cycle-btn.is-on em{background:rgba(255,255,255,.18);color:#8CF0B8}

.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.tier-card{
  position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-3);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.tier-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.tier-card--hi{border-color:var(--ink);box-shadow:var(--sh-3)}
.tier-card--hi:hover{transform:translateY(-6px)}
.tier-card__badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--red);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  padding:.35rem .8rem;border-radius:999px;box-shadow:var(--sh-1);
}
.tier-card h3{font-size:1.3rem;letter-spacing:-.02em}
.tier-card__tag{color:var(--ink-3);font-size:var(--fs-sm);margin-top:.3rem;min-height:2.6em}
.tier-card__price{display:flex;align-items:baseline;gap:.35rem;margin:var(--sp-2) 0 var(--sp-3)}
.tier-card__price b{font-family:var(--display);font-size:2.1rem;letter-spacing:-.03em}
.tier-card__price span{color:var(--ink-3);font-size:var(--fs-sm)}
.tier-card__price small{display:block;color:var(--ink-3);font-size:var(--fs-xs);margin-top:.15rem}
.tier-card .btn{width:100%}
.tier-card__inc{margin-top:var(--sp-3);padding-top:var(--sp-2);border-top:1px solid var(--line-2);font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.tier-card__list{margin-top:.7rem;display:grid;gap:.55rem}
.tier-card__list li{position:relative;padding-left:1.3rem;font-size:var(--fs-sm);color:var(--ink-2)}
.tier-card__list li::before{content:"";position:absolute;left:0;top:.45em;width:7px;height:4px;border-left:2px solid #0F9D58;border-bottom:2px solid #0F9D58;transform:rotate(-45deg)}

.addon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-2)}
.addon-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-3);border-top:3px solid var(--c)}
.addon-card h3{font-size:1.02rem;letter-spacing:-.01em}
.addon-card__price{margin-top:.5rem;font-family:var(--display);font-size:1.5rem;letter-spacing:-.02em}
.addon-card__price span{font-family:var(--body);font-size:var(--fs-xs);font-weight:400;color:var(--ink-3);margin-left:.2rem}
.addon-card__btn{display:block;margin-top:var(--sp-2);font-size:var(--fs-sm);font-weight:600;color:var(--c)}
.addon-card__btn:hover{text-decoration:underline}

@media (max-width:900px){.tier-grid{grid-template-columns:1fr}.tier-card--hi{order:-1}}
/* Three buttons with a discount chip each stop fitting in one row
   well before the tier cards do, so they stack instead of wrapping
   into an odd two-plus-one line. */
@media (max-width:520px){
  .cycle-toggle{display:grid;grid-template-columns:1fr;gap:.4rem;width:100%;background:none;box-shadow:none;padding:0}
  .cycle-btn{justify-content:space-between;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);width:100%}
  .cycle-btn.is-on{box-shadow:none}
  /* the sliding pill only makes sense in the single-row layout */
  .cycle-toggle__pill{display:none}
  .cycle-toggle.has-pill .cycle-btn.is-on{background:var(--ink)}
}

/* ---------- contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-3);align-items:start}
.contact-grid__form{margin-top:0}
.contact-grid__side{display:grid;gap:var(--sp-2)}
.info-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-3)}
.info-card h3{font-size:1rem;letter-spacing:-.01em;margin-bottom:.6rem}
.info-card p{color:var(--ink-2);font-size:var(--fs-sm)}
.info-list{display:grid;gap:.7rem}
.info-list li{display:flex;justify-content:space-between;gap:1rem;font-size:var(--fs-sm);border-top:1px solid var(--line-2);padding-top:.6rem}
.info-list li:first-child{border-top:0;padding-top:0}
.info-list span{color:var(--ink-3)}
.info-list b{font-weight:600;text-align:right}
.map-card{padding:0;overflow:hidden}
.map-card h3{padding:var(--sp-3) var(--sp-3) 0}
.map-embed{margin-top:var(--sp-2);aspect-ratio:4/3}
.map-embed iframe{width:100%;height:100%;border:0;display:block}
.map-embed--empty{
  display:grid;place-items:center;gap:.6rem;text-align:center;padding:var(--sp-3);
  background:var(--paper-2);color:var(--ink-3);
}
.map-embed--empty svg{width:34px;height:34px;fill:none;stroke:var(--ink-3);stroke-width:1.4}
.map-embed--empty p{font-size:var(--fs-xs);max-width:22ch}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* ---------- products ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--sp-3)}
.prod-card{
  position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.prod-card:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.prod-card__shot{
  display:block;aspect-ratio:16/10;background:linear-gradient(155deg,color-mix(in srgb,var(--c) 16%,var(--paper-2)),var(--paper-2));
  position:relative;
}
.prod-card__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.prod-card__shot-link{position:absolute;inset:0;z-index:1}
.prod-card__zoom{
  position:absolute;top:.6rem;right:.6rem;width:34px;height:34px;border-radius:50%;z-index:2;
  background:rgba(10,10,20,.72);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;
  color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25);transition:background .2s var(--ease),transform .2s var(--ease);
}
.prod-card__zoom:hover{background:rgba(10,10,20,.9);transform:scale(1.08)}
.prod-card__zoom:focus-visible{outline:2px solid #fff;outline-offset:2px}
.prod-card__zoom svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.prod-card__shot--empty{display:grid;place-items:center}
.prod-card__shot--empty svg{width:30%;height:30%;fill:none;stroke:var(--c);stroke-width:1.4;opacity:.55}
.prod-card h3{padding:var(--sp-3) var(--sp-3) 0;font-size:1.15rem;letter-spacing:-.02em}
.prod-card h3 a{color:var(--ink)}
.prod-card h3 a:hover{color:var(--c)}
.prod-card__tag{padding:0 var(--sp-3);margin-top:.3rem;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.03em;color:var(--c)}
.prod-card > p:not(.prod-card__tag){padding:0 var(--sp-3);margin-top:.6rem;font-size:var(--fs-sm);color:var(--ink-3);flex:1}
.prod-card__link{
  display:flex;align-items:center;gap:.4rem;margin:var(--sp-2) var(--sp-3) var(--sp-3);
  font-size:var(--fs-sm);font-weight:600;color:var(--ink);width:fit-content;
}
.prod-card__link .chev{width:.5rem;height:.5rem;border-width:2px;transition:transform .2s var(--ease)}
.prod-card:hover .prod-card__link .chev{transform:rotate(45deg) translate(2px,-2px)}

/* ---------- features ---------- */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:var(--sp-2)}
.feat{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-3);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.feat:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.feat__i{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:color-mix(in srgb,var(--c) 12%,transparent);margin-bottom:var(--sp-2)}
.feat__i svg{width:21px;height:21px;fill:none;stroke:var(--c);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feat h3{font-size:1.08rem;letter-spacing:-.02em;margin-bottom:.4rem}
.feat p{font-size:var(--fs-sm);color:var(--ink-3)}
.feat__list{margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--line-2);display:grid;gap:.5rem}
.feat__list li{position:relative;padding-left:1.1rem;font-size:var(--fs-xs);color:var(--ink-2)}
.feat__list li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;border-radius:50%;background:var(--c)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-3);counter-reset:s}
.steps li{position:relative;padding-top:var(--sp-3);border-top:2px solid var(--line)}
.steps li::after{content:"";position:absolute;top:-2px;left:0;width:0;height:2px;background:var(--red);transition:width .8s var(--ease)}
.steps li.is-in::after{width:100%}
.steps__n{font-family:var(--mono);font-size:var(--fs-xs);color:var(--red)}
.steps h3{font-size:1.14rem;letter-spacing:-.02em;margin:.5rem 0 .5rem}
.steps p{font-size:var(--fs-sm);color:var(--ink-3)}

/* ---------- quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:var(--sp-2)}
.quote{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-3);position:relative}
.quote::before{content:"";position:absolute;top:var(--sp-3);right:var(--sp-3);width:.55rem;height:.55rem;border-right:3px solid var(--red);border-top:3px solid var(--red);transform:rotate(45deg);opacity:.35}
.quote blockquote{margin:0 0 var(--sp-3);font-size:var(--fs-base);color:var(--ink-2)}
.quote figcaption{display:grid;grid-template-columns:auto 1fr;gap:0 .7rem;align-items:center}
.quote figcaption .av{grid-row:span 2;background:var(--paper-2);color:var(--ink-3)}
.quote figcaption b{font-size:var(--fs-sm)}
.quote figcaption small{font-size:var(--fs-xs);color:var(--ink-3)}
[data-placeholder] .quote{border-style:dashed;background:transparent}

/* the auto-scrolling version JS swaps in on wide screens; the plain
   grid above stays the truth for phones and for no-JS visitors */
.quotes--marquee{
  display:block;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.quotes__track{display:flex;gap:var(--sp-2);width:max-content;animation:quotesScroll 32s linear infinite}
.quotes__track.is-paused{animation-play-state:paused}
.quotes__track .quote{width:min(380px,80vw);flex:none}
@keyframes quotesScroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.quotes__track{animation:none}}
/* A generic marker for "admin, replace this" text that isn't inside
   the footer or the testimonial cards, where their own rules above
   already do this job. */
.is-placeholder{position:relative;padding-left:1.1rem}
.is-placeholder::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--amber)}
.note{margin-top:var(--sp-3);text-align:center;font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-3);letter-spacing:.04em}

/* ---------- write to us ---------- */
.form{margin-top:var(--sp-4);display:grid;gap:1rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form__field{display:grid;gap:.4rem;font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.form__field input,.form__field textarea{
  font:inherit;font-weight:400;padding:.8rem .95rem;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);resize:vertical;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
  /* Below 16px, Safari on iPhone zooms the whole page in the moment
     this is focused — not a design choice, just how iOS decides
     whether text is "readable" without help. This overrides the
     smaller size inherited from .form__field so tapping in never
     yanks the viewport around. */
  font-size:max(16px,var(--fs-base));
}
.form__field input:focus,.form__field textarea:focus{
  outline:none;border-color:var(--ink-3);box-shadow:0 0 0 3px rgba(14,17,22,.06);
}
.form__submit{justify-self:start;margin-top:.25rem}
.form__submit:disabled{opacity:.6;cursor:default;transform:none}
.form__status{min-height:1.2em;font-size:var(--fs-sm);font-weight:600}
.form__status.is-ok{color:#0F9D58}
.form__status.is-fail{color:var(--red)}
@media (max-width:640px){.form__row{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq{display:grid;gap:.6rem}
.faq__i{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .25s var(--ease)}
.faq__i[open]{border-color:#D3D7E0;box-shadow:var(--sh-1)}
.faq__i summary{
  display:flex;align-items:center;gap:1rem;padding:1.05rem var(--sp-3);cursor:pointer;list-style:none;
  font-weight:600;font-size:var(--fs-base);letter-spacing:-.01em;
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{content:"";margin-left:auto;flex:none;width:.5rem;height:.5rem;border-right:2.5px solid var(--red);border-top:2.5px solid var(--red);transform:rotate(135deg);transition:transform .28s var(--ease)}
.faq__i[open] summary::after{transform:rotate(-45deg)}
.faq__i p{padding:0 var(--sp-3) 1.15rem;color:var(--ink-3);font-size:var(--fs-sm);max-width:62ch}

/* ---------- final cta ---------- */
.cta{padding-block:var(--sp-6);background:var(--ink);color:#fff;position:relative;overflow:hidden}
.cta__inner{position:relative;z-index:1;text-align:center;display:grid;justify-items:center;gap:var(--sp-2)}
/* pointer-events:none matters here, not just for tidiness: a
   position:absolute sibling always paints above position:static
   content in the same stacking context regardless of z-index, so
   without it this decorative layer silently ate every click on the
   WhatsApp button and heading beneath it — the same reason every
   other glow/particle layer on the site (.hero__glow, .page-glow,
   .particles) already carries this property. */
.cta__glow{position:absolute;inset:-60% -20% auto;height:200%;z-index:0;pointer-events:none;background:radial-gradient(34rem 20rem at 50% 12%,rgba(238,28,37,.28),transparent 62%),radial-gradient(30rem 18rem at 78% 40%,rgba(0,174,239,.20),transparent 60%)}
.cta p{color:rgba(255,255,255,.72);max-width:46ch}
.cta .btn{margin-top:var(--sp-2)}
.cta__note{font-family:var(--mono);font-size:var(--fs-xs);color:rgba(255,255,255,.45);letter-spacing:.05em}

/* ---------- scroll progress ---------- */
/* A static, empty 0-width bar with no JavaScript: invisible and
   harmless, never a grey box waiting for a script. JS only ever
   grows the fill; it never has to reveal the bar itself. */
.scrollbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:210;pointer-events:none}
.scrollbar__fill{
  display:block;height:100%;width:0%;transform-origin:left;
  background:linear-gradient(90deg,var(--red),var(--purple) 55%,var(--cyan));
}
@media (prefers-reduced-motion:reduce){.scrollbar__fill{transition:none}}

/* ---------- back to top ---------- */
/* A plain link to #top, so it works with no JavaScript at all.
   JavaScript only adds the fade in/out based on scroll position;
   without it the button just sits there, always clickable. */
.totop{
  position:fixed;right:var(--sp-3);bottom:var(--sp-3);z-index:90;
  width:48px;height:48px;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;box-shadow:var(--sh-3);
}
.totop:hover{background:#C8151C}
.totop .chev{width:.85rem;height:.85rem;border-width:2.5px;transform:rotate(-45deg);color:#fff}
/* Only fade it in on scroll once JS is confirmed running. With no
   JavaScript the plain rule above applies and the button is simply
   there the whole time, which is still a correct, clickable state. */
.js .totop{
  opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--spring),background .2s var(--ease);
}
.js .totop.is-on{opacity:1;transform:none;pointer-events:auto}
@media (max-width:560px){.totop{right:var(--sp-2);bottom:var(--sp-2);width:44px;height:44px}}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:rgba(255,255,255,.7);padding-top:var(--sp-5);border-top:1px solid rgba(255,255,255,.08)}
.foot__inner{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:var(--sp-3);padding-bottom:var(--sp-4)}
/* The wordmark has black letters in it, so on a dark footer it
   sits on its own light chip rather than being forced to white. */
.foot__brand img{height:42px;width:auto;background:#fff;padding:10px 15px;border-radius:12px}
.foot__brand p{margin-top:var(--sp-2);font-size:var(--fs-sm);max-width:32ch;color:rgba(255,255,255,.5)}
.foot__col{display:grid;gap:.55rem;align-content:start}
/* On a phone, a 25px line of text with 9px between lines is a real
   miss-tap risk with a thumb — this doesn't change how the footer
   looks, only how much of it responds to a tap. */
@media (max-width:560px){.foot__col a,.foot__col address{padding:.45rem 0}}
.foot__col h4{font-size:var(--fs-xs);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:.3rem}
.foot__col a,.foot__col address{font-size:var(--fs-sm);transition:color .2s var(--ease)}
.foot__col a:hover{color:#fff}
/* scoped to the footer: elsewhere this washed out white would be
   inherited by testimonial names sitting on a light background */
.foot [data-placeholder]{color:rgba(255,255,255,.32);font-style:italic}
.foot__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;padding-block:var(--sp-2);border-top:1px solid rgba(255,255,255,.08);font-size:var(--fs-xs);color:rgba(255,255,255,.38)}

/* ---------- page transitions ---------- */
/* Deliberately NOT keyed off html.js, which is set synchronously in
   <head> whether or not the deferred scripts that follow ever
   actually finish. Keyed off body.pt instead, a class main.js adds
   itself right before it starts the fade, with a fallback timer in
   the same breath. That way the only way for the body to ever be
   hidden is for the script that guarantees to reveal it again to
   already be running. If main.js never runs at all, body.pt never
   gets added, and the default (fully visible, no transition) is
   exactly what a visitor with no JavaScript sees. */
body.pt{opacity:0;transition:opacity .32s var(--ease)}
body.pt.is-ready{opacity:1}
body.pt.is-leaving{opacity:0}

/* ============================================================
   Reveals
   ------------------------------------------------------------
   The hidden starting state only exists once JavaScript has set
   html.js, and it is undone by a plain CSS transition when the
   element gets .is-in. So with no JavaScript, a blocked CDN or a
   stalled animation frame, every word on this page is still
   readable. GSAP is used for the extras on top, never to make
   content appear.
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(26px)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal{transition:opacity .7s var(--ease),transform .7s var(--ease)}

.js [data-tour] .tour__txt,
.js [data-tour] .tour__art{opacity:0;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-tour] .tour__txt{transform:translateX(-30px)}
.js [data-tour] .tour__art{transform:translateX(30px);transition-delay:.12s}
.js [data-tour].tour--flip .tour__txt{transform:translateX(30px)}
.js [data-tour].tour--flip .tour__art{transform:translateX(-30px)}
.js [data-tour].is-in .tour__txt,
.js [data-tour].is-in .tour__art{opacity:1;transform:none}

/* Once the row stacks there is no side to come in from, and a
   sideways offset would push the page wider than the screen. */
@media (max-width:1080px){
  .js [data-tour] .tour__txt,
  .js [data-tour] .tour__art,
  .js [data-tour].tour--flip .tour__txt,
  .js [data-tour].tour--flip .tour__art{transform:translateY(26px)}
}

/* The hero screen keeps its own tilt, so the entrance moves the
   column around it rather than overwriting that transform. */
.js .hero__copy > *{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .hero__art{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:.18s}
.js .float{opacity:0;transform:translateY(12px) scale(.94);transition:opacity .55s var(--ease),transform .55s var(--spring)}
.js .hero.is-in .hero__copy > *,
.js .hero.is-in .hero__art,
.js .hero.is-in .float{opacity:1;transform:none}
.js .hero.is-in .hero__copy > *:nth-child(1){transition-delay:.05s}
.js .hero.is-in .hero__copy > *:nth-child(2){transition-delay:.13s}
.js .hero.is-in .hero__copy > *:nth-child(3){transition-delay:.21s}
.js .hero.is-in .hero__copy > *:nth-child(4){transition-delay:.29s}
.js .hero.is-in .hero__copy > *:nth-child(5){transition-delay:.37s}
.js .hero.is-in .float:nth-of-type(1){transition-delay:.75s}
.js .hero.is-in .float:nth-of-type(2){transition-delay:.87s}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .hero__inner{grid-template-columns:1fr;gap:var(--sp-4)}
  .hero__sub{max-width:52ch}
  .app--tilt{transform:none}
  .float--a{left:0} .float--b{right:0}
  .tour{grid-template-columns:1fr;gap:var(--sp-3)}
  .tour--flip .tour__txt{order:0}
  .app__grid{grid-template-columns:1fr 1fr}
  .app__grid .panel:first-child{grid-column:span 2}
}
@media (max-width:820px){
  .nav__links{display:none}
  .nav__burger{display:flex}
  .nav.is-open .nav__links{
    display:grid;position:absolute;top:88px;left:0;right:0;gap:0;white-space:normal;
    background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--sh-2);
  }
  .nav.is-open .nav__links a{padding:1rem var(--sp-3);border-top:1px solid var(--line-2)}
  .nav.is-open .nav__links a::after{display:none}
  /* the header button gets tight next to the menu icon, so on a
     phone the call to action moves into the menu itself */
  .nav__right > .btn{display:none}
  .nav.is-open .nav__cta-m{display:block;color:var(--red);font-weight:700}
  .app__body{grid-template-columns:1fr}
  .app__side{display:none}
  .stat-row,.stat-row--4{grid-template-columns:repeat(2,1fr)}
  .app__grid,.app__grid--2{grid-template-columns:1fr}
  .app__grid .panel:first-child{grid-column:auto}
  .kan{grid-template-columns:repeat(2,1fr)}
  .pos{grid-template-columns:1fr}
  .cust{grid-template-columns:repeat(2,1fr)}
  .foot__inner{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .hero__cta .btn{width:100%}
  .float{display:none}
  .stat-row,.stat-row--4,.cust,.pos__grid{grid-template-columns:1fr 1fr}
  .kan{grid-template-columns:1fr}
  .kan__col:nth-child(n+3){display:none}
  .foot__inner{grid-template-columns:1fr}
}

/* ============================================================
   Motion preferences
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important;scroll-behavior:auto !important}
  .marq__track{animation:none}
  .js .reveal,
  .js [data-tour] .tour__txt,.js [data-tour] .tour__art,
  .js .hero__copy > *,.js .hero__art,.js .float{opacity:1 !important;transform:none !important}
  .js .steps li::after{width:100% !important}
}

/* Printed pages do not need the dark mockups bleeding ink */
@media print{
  .app,.cta,.foot{box-shadow:none}
  .nav,.marq,.hero__glow,.cta__glow{display:none}
}