/* ============================================================
   MoodChanger · Athletes — cinematic redesign
   Visual language adapted from getcarv.com (motion reference)
   Palette: white-forward · MoodChanger yellow accent · deep navy ink
   ============================================================ */

:root{
  --ink:#0a1a22;          /* deep cinematic navy-black */
  --ink-brand:#0d2430;    /* MoodChanger navy */
  --ink-2:#102c38;
  --ink-3:#16384696;
  --paper:#ffffff;
  --paper-2:#f4f6f5;      /* warm off-white */
  --paper-3:#e9ece9;
  --line-d:rgba(255,255,255,.14);
  --line-l:#e5e8e4;
  --muted-d:rgba(255,255,255,.64);
  --muted-d2:rgba(255,255,255,.46);
  --muted-l:#5b6a70;
  --muted-l2:#8a979c;
  --yellow:#FDE035;
  --yellow-deep:#E9C81F;
  --caipo:#9d52eb;
  --ease:cubic-bezier(.22,.7,.3,1);
  --ease-out:cubic-bezier(.16,.84,.34,1);
  --maxw:1280px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Schibsted Grotesk",system-ui,sans-serif;
  font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{margin:0; font-weight:500; line-height:1.02; letter-spacing:-.025em}
p{margin:0}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
ul{margin:0; padding:0; list-style:none}
.wrap{width:min(var(--maxw),90vw); margin-inline:auto}

/* ---------- shared label ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.8em;
  font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted-l);
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--yellow); display:block; transform-origin:left}
.on-dark .eyebrow, .eyebrow.light{color:var(--muted-d2)}

/* ---------- scroll progress ---------- */
.progress{position:fixed; top:0; left:0; height:2px; width:0; background:var(--yellow); z-index:1000; transition:width .1s linear}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{position:fixed; inset:0 0 auto 0; z-index:900; transition:background .45s var(--ease), box-shadow .45s var(--ease), border-color .45s}
.site-header::after{content:""; position:absolute; inset:0; border-bottom:1px solid transparent; transition:border-color .45s; pointer-events:none}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:24px; width:min(var(--maxw),92vw); margin-inline:auto; padding:22px 0; transition:padding .45s var(--ease)}
.site-header.scrolled{background:rgba(10,26,34,.78); backdrop-filter:blur(18px) saturate(1.2)}
.site-header.scrolled::after{border-color:var(--line-d)}
.site-header.scrolled .header-row{padding:13px 0}

.brand{display:flex; align-items:center; gap:13px}
.brand .mark{width:42px; height:42px; transition:transform .5s var(--ease)}
.brand:hover .mark{transform:rotate(-9deg) scale(1.07)}
.brand .word{display:flex; align-items:baseline; font-weight:600; font-size:1.32rem; letter-spacing:.005em; white-space:nowrap}
.brand .word .a{color:var(--yellow)}
/* default chrome = light text over dark hero */
.brand .word{color:#fff}
.nav{display:flex; align-items:center; gap:4px}
.nav > .item > a, .nav > .item > .trigger{
  display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border-radius:9px;
  font-size:.92rem; font-weight:500; color:rgba(255,255,255,.82); cursor:pointer; white-space:nowrap;
  transition:color .25s, background .25s; background:transparent; border:0; font-family:inherit;
}
.nav > .item > a:hover, .nav > .item:hover > .trigger{color:#fff; background:rgba(255,255,255,.08)}
.nav .item.active > a{color:#fff}
.nav .item.active > a::after{content:""; position:absolute; left:13px; right:13px; bottom:3px; height:2px; background:var(--yellow); border-radius:2px}
.nav .item{position:relative}
.nav .item.active > a{position:relative}
.chev{width:13px; height:13px; transition:transform .3s var(--ease)}
.nav .item.has-menu:hover .chev{transform:rotate(180deg)}

.caipo-pill{
  font-weight:700!important; letter-spacing:.18em; font-size:.78rem!important;
  border:1px solid rgba(157,82,235,.5); color:#cbb3ff!important;
  padding:8px 14px!important; border-radius:9px;
  box-shadow:0 0 18px rgba(157,82,235,.18), inset 0 0 14px rgba(157,82,235,.12);
}
.caipo-pill:hover{border-color:#cbb3ff; color:#fff!important; background:rgba(157,82,235,.16)!important}

/* dropdown */
.menu{
  position:absolute; top:calc(100% + 10px); left:0; min-width:230px;
  background:rgba(13,36,48,.9); backdrop-filter:blur(20px);
  border:1px solid var(--line-d); border-radius:14px; padding:8px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.7);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.3s var(--ease); z-index:50;
}
.menu.scroll{max-height:340px; overflow-y:auto}
.nav .item.has-menu:hover .menu, .nav .item.has-menu:focus-within .menu{opacity:1; visibility:visible; transform:none}
.menu a{display:block; padding:9px 13px; border-radius:9px; font-size:.9rem; color:var(--muted-d); transition:.2s}
.menu a:hover{background:rgba(253,224,53,.12); color:#fff}
.menu::-webkit-scrollbar{width:0}

/* burger */
.burger{display:none; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:11px; cursor:pointer; z-index:60}
.burger i{width:20px; height:2px; background:#fff; border-radius:2px; transition:.3s var(--ease)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink); color:#fff}
.hero-media{position:absolute; inset:-10% 0 -10% 0; will-change:transform}
.hero-media .fill{position:absolute; inset:0}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--ink)}
.hero::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(10,26,34,.42) 0%,
    rgba(10,26,34,.10) 24%,
    rgba(20,48,61,.42) 54%,
    rgba(31,62,77,.84) 80%,
    rgba(38,70,86,.96) 100%)}
.hero-inner{position:relative; z-index:2; width:min(var(--maxw),90vw); margin-inline:auto; padding:0 0 clamp(70px,12vh,150px)}
.hero h1{
  font-size:clamp(2.9rem,8.2vw,7rem); font-weight:500; line-height:.97; letter-spacing:-.035em;
  max-width:15ch; text-wrap:balance; text-shadow:0 2px 30px rgba(5,16,22,.5)}
.hero h1 .accent{color:var(--yellow); text-shadow:0 2px 26px rgba(5,16,22,.45)}
.hero .lede{margin-top:clamp(20px,3vh,34px); max-width:50ch; font-size:clamp(1.05rem,1.55vw,1.4rem); color:rgba(255,255,255,.94); font-weight:400; line-height:1.55; text-shadow:0 1px 16px rgba(5,16,22,.55)}
.hero .eyebrow{margin-bottom:26px}
.scrollcue{position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:.64rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.55)}
.scrollcue .track{width:1px; height:46px; background:rgba(255,255,255,.25); position:relative; overflow:hidden}
.scrollcue .track::after{content:""; position:absolute; top:-60%; left:0; width:100%; height:60%; background:var(--yellow); animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{top:-60%}100%{top:110%}}

/* ============================================================
   MEDIA PLACEHOLDER (premium, intentional)
   ============================================================ */
.media{position:relative; overflow:hidden; background:linear-gradient(150deg,#13313e 0%,#0b1d26 60%,#0a1a22 100%)}
.media.light{background:linear-gradient(150deg,#eef1ee 0%,#e4e8e4 60%,#dde2dd 100%)}
.media .grain{position:absolute; inset:0; color:rgba(255,255,255,.16);
  background-image:radial-gradient(currentColor .9px, transparent 1.5px); background-size:9px 9px;
  -webkit-mask-image:radial-gradient(120% 120% at 70% 20%, #000 0%, transparent 72%);
          mask-image:radial-gradient(120% 120% at 70% 20%, #000 0%, transparent 72%)}
.media.light .grain{color:rgba(10,26,34,.14)}
.media .vig{position:absolute; inset:0; background:radial-gradient(120% 100% at 30% 100%, rgba(0,0,0,.4), transparent 60%)}
.media.light .vig{background:radial-gradient(120% 100% at 30% 100%, rgba(10,26,34,.08), transparent 60%)}
.media .glyph{position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.22)}
.media.light .glyph{color:rgba(10,26,34,.18)}
.media .glyph svg{width:64px; height:64px}
.media .tag{position:absolute; left:18px; bottom:16px; display:flex; align-items:center; gap:9px;
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.7);
  background:rgba(10,26,34,.42); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px);
  padding:6px 11px; border-radius:999px}
.media.light .tag{color:var(--muted-l); background:rgba(255,255,255,.6); border-color:var(--line-l)}
.media .tag .dot{width:6px; height:6px; border-radius:50%; background:var(--yellow)}
.media .idx{position:absolute; top:18px; left:20px; font-size:.86rem; font-weight:600; letter-spacing:.1em; color:rgba(255,255,255,.5)}
.media.light .idx{color:var(--muted-l2)}
/* zoom-on-reveal */
.media .zoom{position:absolute; inset:0; transform:scale(1.14); transition:transform 1.7s var(--ease)}
.media .zoom img{width:100%; height:100%; object-fit:cover; display:block}
.reveal.in .media .zoom{transform:scale(1)}

/* ============================================================
   SECTION SCAFFOLDING
   ============================================================ */
section{position:relative}
.band{padding:clamp(84px,12vw,168px) 0}
.band.dark{background:var(--ink); color:#fff}
.band.paper{background:var(--paper)}
.band.paper-2{background:var(--paper-2)}
.section-head{max-width:880px}
.section-head.center{margin-inline:auto; text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head h2{margin-top:22px; font-size:clamp(2rem,4.6vw,3.9rem); font-weight:500; letter-spacing:-.03em; text-wrap:balance}
.section-head .sub{margin-top:24px; font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--muted-l); max-width:62ch; line-height:1.6}
.band.dark .section-head .sub{color:var(--muted-d)}
.center .sub{margin-inline:auto}

/* ============================================================
   STATEMENT (AI-Powered Athletic Performance)
   ============================================================ */
.statement{display:grid; grid-template-columns:1fr; gap:clamp(40px,6vw,72px)}
.statement .statement-body{display:flex; flex-direction:column; gap:clamp(26px,4vw,46px)}
.statement .lead-line{font-size:clamp(1.7rem,3.4vw,3rem); font-weight:400; line-height:1.18; letter-spacing:-.025em; max-width:none; text-wrap:balance}
.statement .caipo-link{color:var(--caipo); font-weight:600; text-decoration:none; transition:color .25s}
.statement .caipo-link:hover{text-decoration:underline; text-underline-offset:3px}
.statement .lead-line .mk{background:linear-gradient(transparent 58%, rgba(253,224,53,.85) 58%); padding:0 .04em}
.statement .grid2{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(34px,5vw,64px); align-items:center}
.statement .body p{font-size:1.12rem; color:var(--muted-l); line-height:1.7}
.statement .body .caipo{color:var(--caipo); font-weight:600}
.signal{display:flex; align-items:flex-start; gap:14px; padding:22px 26px; border-radius:16px;
  background:var(--ink); color:#fff; font-weight:500; font-size:clamp(1.02rem,1.5vw,1.22rem); line-height:1.5}
.signal .ar{color:var(--yellow); font-weight:700; padding:0 .12em; font-size:1.1em; line-height:1}
.signal .pulse{flex:none; width:11px; height:11px; border-radius:50%; background:var(--yellow); margin-top:6px}

/* ============================================================
   FEATURE ROWS (editorial, alternating) — "Built for Athletic Excellence"
   ============================================================ */
/* carousel: one capability "page" at a time */
.feature-carousel{margin-top:clamp(48px,6vw,84px); position:relative; overflow:hidden}
.feature-track{display:flex; align-items:stretch; transition:transform .75s var(--ease); will-change:transform}
.feature-track > .feature{flex:0 0 100%; width:100%}
.carousel-nav{display:flex; align-items:center; justify-content:center; gap:22px; margin-top:clamp(40px,5vw,66px)}
.cbtn{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid var(--line-d); color:#fff; transition:.3s var(--ease)}
.cbtn svg{width:20px; height:20px}
.cbtn.prev:hover{border-color:var(--yellow); color:var(--yellow)}
.cbtn.next{background:var(--yellow); border-color:var(--yellow); color:var(--ink); box-shadow:0 14px 32px -14px rgba(253,224,53,.7)}
.cbtn.next:hover{transform:translateX(3px)}
.carousel-dots{display:flex; align-items:center; gap:10px}
.carousel-dots button{width:9px; height:9px; border-radius:50%; border:0; padding:0; cursor:pointer; background:rgba(255,255,255,.26); transition:.35s var(--ease)}
.carousel-dots button.on{background:var(--yellow); width:28px; border-radius:5px}
.feature{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,84px); align-items:center}
.feature .media{aspect-ratio:5/4; border-radius:22px; border:1px solid var(--line-d)}
.feature:nth-child(even) .media{order:2}
.feature .copy{max-width:30rem}
.feature .fnum{font-size:.82rem; font-weight:600; letter-spacing:.22em; color:var(--yellow-deep)}
.feature .ficon{width:54px; height:54px; border-radius:14px; background:rgba(253,224,53,.14); border:1px solid rgba(253,224,53,.3);
  display:grid; place-items:center; margin:20px 0 22px; transition:transform .5s var(--ease)}
.feature:hover .ficon{transform:translateY(-3px)}
.feature .ficon svg{width:26px; height:26px; color:var(--yellow-deep)}
.feature h3{font-size:clamp(1.6rem,2.8vw,2.4rem); font-weight:500; letter-spacing:-.028em}
.feature .desc{margin-top:16px; font-size:1.08rem; color:var(--muted-l); line-height:1.65}
.feature .points{margin-top:26px; display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line-l)}
.feature .points li{display:flex; align-items:center; gap:14px; padding:15px 0; border-bottom:1px solid var(--line-l); font-weight:500; font-size:1rem;
  opacity:0; transform:translateY(12px); transition:opacity .55s var(--ease), transform .55s var(--ease)}
.feature.show-points .points li{opacity:1; transform:none}
.feature.show-points .points li:nth-child(1){transition-delay:.12s}
.feature.show-points .points li:nth-child(2){transition-delay:.32s}
.feature.show-points .points li:nth-child(3){transition-delay:.52s}
.feature .points li .ck{flex:none; width:22px; height:22px; border-radius:7px; background:var(--yellow); display:grid; place-items:center; transform:scale(.6); transition:transform .45s var(--ease)}
.feature.show-points .points li .ck{transform:scale(1)}
.feature .points li .ck svg{width:13px; height:13px; color:var(--ink)}

/* dark variant feature (cinematic) */
.band.dark .feature .media{border-color:var(--line-d)}
.band.dark .feature .desc{color:var(--muted-d)}
.band.dark .feature .points{border-color:var(--line-d)}
.band.dark .feature .points li{border-color:var(--line-d)}

/* ============================================================
   TRACKING STEPS — "Athletic Performance Tracking"
   ============================================================ */
.track-grid{margin-top:clamp(54px,7vw,90px); display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,6vw,90px); align-items:start}
.track-aside{position:sticky; top:120px}
.track-aside .meter{margin-top:30px; display:flex; gap:7px}
.track-aside .meter span{height:4px; flex:1; background:var(--line-l); border-radius:2px; overflow:hidden; position:relative}
.track-aside .meter span::after{content:""; position:absolute; inset:0; background:var(--yellow); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease)}
.track-aside .meter span.on::after{transform:scaleX(1)}
.steps{display:flex; flex-direction:column}
.step{display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,40px); padding:clamp(26px,3vw,40px) 0; border-top:1px solid var(--line-l); align-items:center}
.step:first-child{border-top:0}
.step .n{font-size:clamp(2.4rem,4.4vw,3.6rem); font-weight:400; letter-spacing:-.04em; color:var(--paper-3); line-height:.9; transition:color .5s var(--ease)}
.step.in .n, .step:hover .n{color:var(--yellow)}
.step h4{font-size:clamp(1.5rem,2.7vw,2.15rem); font-weight:700; letter-spacing:-.02em}
.step p{margin-top:12px; color:var(--muted-l); font-size:1.06rem; line-height:1.6; max-width:52ch}

/* ============================================================
   CLOSING — "All Sports, All Levels"
   ============================================================ */
.closing{position:relative; min-height:78svh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; background:var(--ink); color:#fff}
.closing .closing-media{position:absolute; inset:-8% 0; will-change:transform}
.closing .closing-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--ink)}
.closing::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,26,34,.62), rgba(10,26,34,.5) 45%, rgba(10,26,34,.8)),
             radial-gradient(120% 90% at 50% 42%, rgba(10,26,34,.2), rgba(10,26,34,.75))}
.closing .inner{position:relative; z-index:2; width:min(760px,90vw); padding:80px 0}
.closing h3{font-size:clamp(2.2rem,5.4vw,4.4rem); font-weight:500; letter-spacing:-.03em; text-shadow:0 2px 30px rgba(5,16,22,.55)}
.closing p{margin-top:24px; font-size:clamp(1.08rem,1.5vw,1.32rem); color:rgba(255,255,255,.9); line-height:1.65; max-width:54ch; margin-inline:auto; text-shadow:0 1px 18px rgba(5,16,22,.6)}
.closing p + p{margin-top:18px; color:rgba(255,255,255,.6); font-size:1.02rem}
.closing .seal{display:inline-flex; align-items:center; gap:9px; margin-bottom:30px; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--yellow)}
.closing .seal svg{width:15px; height:15px}
.closing-rule{display:block; width:64px; height:3px; background:var(--yellow); margin:0 auto 30px; border-radius:2px}
.closing h3 .accent{color:var(--yellow)}
.closing .privacy{display:inline-flex; align-items:center; gap:11px; justify-content:center}
.closing .privacy .lock{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:9px;
  background:rgba(253,224,53,.16); border:1px solid rgba(253,224,53,.42); color:var(--yellow); flex:none}
.closing .privacy .lock svg{width:15px; height:15px}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--ink); color:var(--muted-d2); border-top:1px solid var(--line-d)}
.footer-inner{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; padding:clamp(60px,8vw,96px) 0}
.footer-inner .brand .word{color:#fff; font-size:1.2rem}
.footer-inner .lk{color:var(--yellow); font-weight:500}
.footer-inner .lk:hover{color:#fff}
.footer-inner p{font-size:.95rem}
.footer-inner .caipo{color:var(--caipo); font-weight:600}
.footer-inner .fine{max-width:54ch; color:var(--muted-d2); font-size:.9rem; line-height:1.6}

/* back home floating */
.backhome{position:fixed; left:20px; bottom:20px; z-index:800; display:inline-flex; align-items:center; gap:9px;
  background:rgba(10,26,34,.8); backdrop-filter:blur(12px); border:1px solid var(--line-d); color:#fff;
  padding:11px 17px; border-radius:999px; font-size:.86rem; font-weight:500;
  box-shadow:0 16px 36px -18px rgba(0,0,0,.6); opacity:0; transform:translateY(14px); transition:.5s var(--ease)}
.backhome.show{opacity:1; transform:none}
.backhome:hover{border-color:var(--yellow); color:var(--yellow)}
.backhome svg{width:15px; height:15px}

/* ============================================================
   REVEAL UTILITIES
   ============================================================ */
.reveal{opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal[data-rev="left"]{transform:translateX(-44px)}
.reveal[data-rev="right"]{transform:translateX(44px)}
.reveal[data-rev="left"].in, .reveal[data-rev="right"].in{transform:none}
.reveal[data-rev="fade"]{transform:none}
.rule{height:1px; background:var(--line-l); transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease)}
.band.dark .rule{background:var(--line-d)}
.reveal.in .rule, .rule.in{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important; transform:none!important; transition:none}
  .media .zoom{transform:none!important}
  .scrollcue .track::after, .signal .pulse{animation:none}
  .feature .points li{opacity:1!important; transform:none!important}
  .feature .points li .ck{transform:none!important}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .statement .grid2{grid-template-columns:1fr; align-items:start}
  .feature{grid-template-columns:1fr; gap:30px}
  .feature:nth-child(even) .media{order:0}
  .feature .media{aspect-ratio:16/10}
  .feature .copy{max-width:none}
  .track-grid{grid-template-columns:1fr; gap:36px}
  .track-aside{position:static}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav{position:fixed; inset:0 0 0 auto; width:min(86vw,360px); background:rgba(10,26,34,.97); backdrop-filter:blur(20px);
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:2px; padding:96px 16px 40px;
    transform:translateX(100%); transition:transform .5s var(--ease); overflow-y:auto; border-left:1px solid var(--line-d)}
  body.nav-open .nav{transform:none}
  .nav > .item{width:100%}
  .nav > .item > a, .nav > .item > .trigger{width:100%; font-size:1rem; padding:13px 14px}
  .nav .item.active > a::after{display:none}
  .menu{position:static; opacity:1; visibility:visible; transform:none; background:transparent; border:0; box-shadow:none;
    padding:0 0 6px 14px; max-height:none}
  .menu.scroll{max-height:none}
  .menu a{color:var(--muted-d2)}
  .chev{display:none}
  .burger{display:flex}
  body.nav-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .burger i:nth-child(2){opacity:0}
  body.nav-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .caipo-pill{box-shadow:none}
  .backhome{left:14px; bottom:14px}
}