@font-face {
  font-family: 'Schibsted';
  src: url('schibsted-grotesk.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #FBFBF9;
  --surface: #FFFFFF;
  --surface-2: #F4F4F1;
  --ink: #0B0C0E;
  --ink-2: #55595F;
  --ink-3: #8B9098;
  --hair: #E7E6E1;
  --hair-2: #D8D7D1;
  --accent: #4A55C9;
  --btn-bg: #0B0C0E;
  --btn-fg: #FFFFFF;
  --shadow-lift: 0 1px 1px rgba(11,12,14,.04), 0 8px 24px rgba(11,12,14,.06), 0 32px 64px rgba(11,12,14,.07);
  --dot: rgba(11,12,14,.14);
  --ok: #2E7D57;
  --bad: #B42318;
  --sans: 'Schibsted', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #08090A;
    --surface: #0F1112;
    --surface-2: #141718;
    --ink: #F4F5F6;
    --ink-2: #9AA0A7;
    --ink-3: #6B7178;
    --hair: #1D2022;
    --hair-2: #292D30;
    --accent: #8B93F8;
    --btn-bg: #F4F5F6;
    --btn-fg: #0B0C0E;
    --shadow-lift: 0 1px 1px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5), 0 40px 80px rgba(0,0,0,.55);
    --dot: rgba(244,245,246,.13);
    --ok: #6FD3A3;
    --bad: #F58E85;
  }
}

:root[data-theme="dark"] {
  --bg: #08090A; --surface: #0F1112; --surface-2: #141718;
  --ink: #F4F5F6; --ink-2: #9AA0A7; --ink-3: #6B7178;
  --hair: #1D2022; --hair-2: #292D30; --accent: #8B93F8;
  --btn-bg: #F4F5F6; --btn-fg: #0B0C0E;
  --shadow-lift: 0 1px 1px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5), 0 40px 80px rgba(0,0,0,.55);
  --dot: rgba(244,245,246,.13);
  --ok: #6FD3A3; --bad: #F58E85;
}

:root[data-theme="light"] {
  --bg: #FBFBF9; --surface: #FFFFFF; --surface-2: #F4F4F1;
  --ink: #0B0C0E; --ink-2: #55595F; --ink-3: #8B9098;
  --hair: #E7E6E1; --hair-2: #D8D7D1; --accent: #4A55C9;
  --btn-bg: #0B0C0E; --btn-fg: #FFFFFF;
  --shadow-lift: 0 1px 1px rgba(11,12,14,.04), 0 8px 24px rgba(11,12,14,.06), 0 32px 64px rgba(11,12,14,.07);
  --dot: rgba(11,12,14,.14);
  --ok: #2E7D57; --bad: #B42318;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

/* height:auto is load-bearing. The width/height attributes on <img> are kept for
   layout stability, but they also apply as presentational hints — without this,
   height="1480" renders literally as height:1480px and every screenshot stretches. */
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; font-weight: 700; letter-spacing: -0.028em; }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.shell { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 32px; }
.measure { max-width: 660px; }

/* ── Nav ─────────────────────────────────────── */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.masthead.stuck { border-bottom-color: var(--hair); }
.masthead .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
  gap: 24px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.glyph {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.04em;
  flex: none;
}
.navset { display: flex; align-items: center; gap: 8px; }
.navlink {
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .15s ease, background .15s ease;
}
.navlink:hover { color: var(--ink); background: var(--surface-2); }

/* Language switcher */
.langswitch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0 4px;
  padding: 2px;
  border: 1px solid var(--hair);
  border-radius: 8px;
}
.lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  text-decoration: none;
  transition: color .15s ease, background .15s ease;
}
.lang:hover { color: var(--ink); background: var(--surface-2); }
.lang.is-current { color: var(--btn-fg); background: var(--btn-bg); }

/* ── Buttons ─────────────────────────────────── */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 9px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.008em;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform .16s cubic-bezier(.2,.7,.3,1), opacity .16s ease, background .16s ease, border-color .16s ease;
}
.cta-solid { background: var(--btn-bg); color: var(--btn-fg); }
.cta-solid:hover { transform: translateY(-1px); opacity: .9; }
.cta-line { border-color: var(--hair-2); color: var(--ink); background: transparent; }
.cta-line:hover { border-color: var(--ink); transform: translateY(-1px); }
.cta-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.chev { transition: transform .16s ease; }
.cta:hover .chev { transform: translateX(3px); }

/* ── Hero ────────────────────────────────────── */
.hero { position: relative; padding: 84px 0 0; overflow: hidden; }
/* Load-bearing. .hero has no bottom padding because its lower air comes from the
   device trio below the copy. The studio hero has no trio, so without this the
   CTAs sit flush against the next section's top border. */
.hero-lean { padding-bottom: 104px; }
.hero-field {
  position: absolute;
  inset: -80px 0 auto 0;
  height: 620px;
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 32%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 32%, #000 0%, transparent 72%);
  opacity: .7;
  pointer-events: none;
}
.hero-copy { position: relative; text-align: center; max-width: 780px; margin: 0 auto; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 13px 0 10px;
  border: 1px solid var(--hair);
  background: var(--surface);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  margin-bottom: 26px;
}
.tag .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

.hero h1 {
  font-size: clamp(42px, 6.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.042em;
  font-weight: 800;
  margin-bottom: 22px;
}
.hero h1 .soft { color: var(--ink-3); }
.hero-lede {
  font-size: clamp(17px, 1.5vw, 19.5px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 52ch;
  margin: 0 auto 34px;
}
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-3);
}

/* ── Device trio ─────────────────────────────── */
.stage { position: relative; margin-top: 64px; padding-bottom: 8px; }
.trio {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 26px;
}
.dev {
  position: relative;
  width: 236px;
  border-radius: 26px;
  background: var(--surface);
  border: 1px solid var(--hair);
  padding: 7px;
  box-shadow: var(--shadow-lift);
  flex: none;
}
.dev img { border-radius: 20px; width: 100%; height: auto; }
.dev-mid { width: 274px; z-index: 2; }
.dev-side { margin-bottom: 34px; opacity: .82; }

.hero-video {
  max-width: 900px;
  margin: 0 auto 48px;
  border-radius: 26px;
  background: var(--surface);
  border: 1px solid var(--hair);
  padding: 7px;
  box-shadow: var(--shadow-lift);
}
.hero-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 980;
  border-radius: 20px;
  background: #000;
}

/* ── Section chrome ──────────────────────────── */
/* The masthead is sticky at 66px, so an anchored section would otherwise land
   underneath it. Offsets every in-page jump target by header height plus air. */
section[id] { scroll-margin-top: 86px; }
.band { padding: 104px 0; }
.band-hair { border-top: 1px solid var(--hair); }
.band-fill { background: var(--surface-2); }

.kicker {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.band h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.034em;
  font-weight: 800;
}
.band-lede {
  margin-top: 14px;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 54ch;
}

/* ── Principles ──────────────────────────────── */
.rules { margin-top: 56px; border-top: 1px solid var(--hair); }
.rule {
  display: grid;
  grid-template-columns: 56px 1fr 1.35fr;
  gap: 28px;
  align-items: start;
  padding: 30px 0;
  border-bottom: 1px solid var(--hair);
}
.rule-n {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  padding-top: 4px;
  letter-spacing: 0.02em;
}
.rule h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.022em; font-weight: 700; }
.rule p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* ── Catalog ─────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 52px; }
.card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  min-height: 232px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
a.card:hover {
  border-color: var(--hair-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.appicon {
  width: 52px; height: 52px;
  border-radius: 13px;
  border: 1px solid var(--hair);
  overflow: hidden;
  flex: none;
}
.appicon img { width: 100%; height: 100%; object-fit: cover; }
.appicon-soon {
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 20px;
  font-weight: 500;
}
.pill {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  color: var(--ink-2);
  background: var(--bg);
  white-space: nowrap;
}
.card h3 { font-size: 19.5px; letter-spacing: -0.024em; margin-bottom: 7px; font-weight: 700; }
.card p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.card-foot {
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.card-foot.dim { color: var(--ink-3); font-weight: 500; }

/* ── Closing ─────────────────────────────────── */
.closer { text-align: center; padding: 104px 0; }
.closer h2 { font-size: clamp(28px, 4vw, 46px); letter-spacing: -0.036em; margin-bottom: 16px; }
.closer p { font-size: 17.5px; color: var(--ink-2); max-width: 46ch; margin: 0 auto 30px; }
.closer .hero-actions { justify-content: center; }

/* ── Footer ──────────────────────────────────── */
.foot { border-top: 1px solid var(--hair); padding: 40px 0 56px; }
.foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.foot-nav { display: flex; gap: 24px; flex-wrap: wrap; }
.foot-nav a {
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  /* Browsers break long strings at "." and "@", so a tight footer split the
     address across two lines and it read as "contact@dessoapps . com". The
     container already wraps, so the whole link just moves to its own line. */
  white-space: nowrap;
  transition: color .15s ease;
}
.foot-nav a:hover { color: var(--ink); }
.foot-legal { margin-top: 26px; font-size: 13px; color: var(--ink-3); }

/* ── Contact ─────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 72px;
  align-items: start;
}
.contact-aside p { font-size: 16.5px; line-height: 1.62; color: var(--ink-2); margin-top: 14px; }
.contact-direct {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
}
.contact-direct span {
  display: block;
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 5px;
}
.contact-direct a {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--hair-2);
  padding-bottom: 2px;
  transition: border-color .15s ease, color .15s ease;
}
.contact-direct a:hover { color: var(--accent); border-color: var(--accent); }

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.006em;
  color: var(--ink-2);
}
.field input,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hair-2);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 148px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-3); }
.field input:hover,
.field textarea:hover { border-color: var(--ink-3); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Honeypot: reachable by bots, not by people or screen readers. Kept off-screen
   rather than display:none, which some bots specifically skip. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-note { font-size: 13px; color: var(--ink-3); max-width: 42ch; }
.form button[disabled] { opacity: .55; pointer-events: none; }

.status {
  font-size: 14.5px;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--hair-2);
  background: var(--surface);
}
.status[hidden] { display: none; }
.status.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 42%, transparent); }
.status.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 42%, transparent); }

/* ── Product page ────────────────────────────── */
.prose {
  font-size: 17.5px;
  line-height: 1.68;
  color: var(--ink-2);
  max-width: 62ch;
}
.prose strong { color: var(--ink); font-weight: 600; }

.panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 48px;
}
.panel {
  padding: 30px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 16px;
}
.panel h3 {
  font-size: 18.5px;
  letter-spacing: -0.024em;
  font-weight: 700;
  margin-bottom: 10px;
}
.panel p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

.notice {
  margin-top: 48px;
  padding: 26px 28px;
  border: 1px solid var(--hair-2);
  border-radius: 14px;
  background: var(--surface);
}
.notice h3 { font-size: 16.5px; letter-spacing: -0.02em; margin-bottom: 8px; font-weight: 700; }
.notice p { font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 64ch; }
.notice a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.notice a:hover { color: var(--accent); }

/* ── Policy documents ────────────────────────── */
.doc { padding: 56px 0 96px; }
.doc-head { margin-bottom: 34px; }
.doc h1 {
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.034em;
  font-weight: 800;
  margin: 12px 0 14px;
}
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
  font-size: 13px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* App switcher. Every policy page carries the same row, so a reader who lands
   on the wrong one can get to the right one without going back to the site. */
.policy-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
}
.policy-tab {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
a.policy-tab:hover { border-color: var(--ink-3); color: var(--ink); }
.policy-tab.is-current {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-fg);
}
.policy-tab.is-todo {
  color: var(--ink-3);
  border-style: dashed;
  cursor: default;
}

.doc-toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 34px 0 44px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 14px;
}
.doc-toc a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14.5px;
  padding: 6px 0;
  transition: color .15s ease;
}
.doc-toc a:hover { color: var(--accent); }

.doc section { margin-bottom: 42px; scroll-margin-top: 86px; }
.doc h2 {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair);
}
.doc h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin: 24px 0 8px;
  color: var(--ink);
}
.doc p { margin: 0 0 14px; max-width: 66ch; font-size: 16px; line-height: 1.68; color: var(--ink-2); }
.doc ul { margin: 0 0 14px; padding-left: 22px; max-width: 64ch; }
.doc li { margin-bottom: 8px; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a:not(.policy-tab) {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--hair-2);
}
.doc a:not(.policy-tab):hover { color: var(--accent); text-decoration-color: var(--accent); }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 4px 0 22px;
}
.fact {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 12px;
}
.fact dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 5px;
}
.fact dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }

.callout {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--hair-2);
  border-radius: 14px;
  margin: 4px 0 22px;
}
.callout .mark {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 2px;
}
.callout p { margin: 0; max-width: none; color: var(--ink); }

/* ── Reveal ──────────────────────────────────── */
.rise { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); }
.rise.seen { opacity: 1; transform: none; }

/* ── Responsive ──────────────────────────────── */
@media (max-width: 940px) {
  .rule { grid-template-columns: 40px 1fr; gap: 16px 20px; }
  .rule p { grid-column: 2; }
  .dev-side { display: none; }
  .dev-mid { width: 262px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .panels { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .shell { padding: 0 22px; }
  .band { padding: 76px 0; }
  .closer { padding: 76px 0; }
  .navlink.hide-sm { display: none; }
  .hero { padding-top: 56px; }
  .hero-lean { padding-bottom: 76px; }
  .stage { margin-top: 48px; }
  .foot-row { flex-direction: column; align-items: flex-start; }
  .field-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .rise { opacity: 1 !important; transform: none !important; }
}