/* getarkaan.com. The page lives in the app's own night: deep green, off-white, and gold for
   "act" and "next". Type is the app's too (DM Sans, Tajawal, and Amiri for English headlines), served from
   here with the widgets' calligraphy, so the pages load nothing from anyone else.
   Logical properties only: every page runs in both directions. */

@font-face { font-family: "DM Sans"; src: url("fonts/dmsans-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0020-007E, U+00A0-017F, U+02BB-02BC, U+2010-2015, U+2018-201D, U+2022, U+2026, U+2032-2033, U+20AC, U+2122, U+2212; }
@font-face { font-family: "DM Sans"; src: url("fonts/dmsans-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0020-007E, U+00A0-017F, U+02BB-02BC, U+2010-2015, U+2018-201D, U+2022, U+2026, U+2032-2033, U+20AC, U+2122, U+2212; }
@font-face { font-family: "DM Sans"; src: url("fonts/dmsans-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0020-007E, U+00A0-017F, U+02BB-02BC, U+2010-2015, U+2018-201D, U+2022, U+2026, U+2032-2033, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Tajawal"; src: url("fonts/tajawal-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+200C-200F, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Tajawal"; src: url("fonts/tajawal-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+200C-200F, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Tajawal"; src: url("fonts/tajawal-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+200C-200F, U+FB50-FDFF, U+FE70-FEFC; }
/* English headlines, as on the App Store screenshots. Arabic is Tajawal throughout. */
@font-face { font-family: "Amiri"; src: url("fonts/amiri-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0020-007E, U+00A0-017F, U+02BB-02BC, U+2010-2015, U+2018-201D, U+2022, U+2026, U+2032-2033, U+20AC, U+2122, U+2212; }

:root {
  --night: #0b1512;
  --deep: #0f1c18;
  --tile: #12221d;
  --forest: #1a4d3f;
  --gold: #c4a14a;
  --gold-bright: #e3c77a;
  --on-gold: #17140a;
  --ink: #f5f5f0;
  --muted: #a3b3ab;
  --line: rgb(245 245 240 / 0.1);
  --glass: radial-gradient(120% 100% at 50% 0%, #1f5a4a, #123a30 58%, #0e231d);

  --font: "DM Sans", "Tajawal", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --display: "Amiri", Georgia, "Times New Roman", serif;
  --system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "DM Sans", "Tajawal", system-ui, sans-serif;
  --wrap: 1120px;
  --gutter: clamp(20px, 4vw, 48px);
  --band: clamp(80px, 11vw, 152px);
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --ring: 0.43;
  --day-bar: 0.5;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-block-size: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--night);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body:lang(ar) {
  line-height: 1.85;
}

h1,
h2,
h3,
p,
ol,
ul,
dl,
dd,
figure {
  margin: 0;
}

a {
  color: var(--gold-bright);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 6px;
}

main {
  flex: 1 0 auto;
}

.wrap {
  max-inline-size: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left));
}

/* Headlines: Amiri in English. Arabic stays in the text font, set bold, Latin words included. */
h1,
h2,
.step h3,
.tile h3 {
  font-family: var(--display);
  font-weight: 400;
  text-wrap: balance;
}
:is(h1, h2, h3):lang(ar) {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: 0;
}
.title {
  max-inline-size: 22ch;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(2.125rem, 1.3rem + 2.8vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.title:lang(ar) {
  max-inline-size: 24ch;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  line-height: 1.4;
}
.sub {
  margin-block-start: 18px;
  color: var(--muted);
  font-size: 1.125rem;
}
.fact {
  margin-block-start: 18px;
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--gold);
  color: var(--ink);
  font-size: 0.9375rem;
}

/* ---- The bar: a floating glass capsule, like the app's own tab bar ---------------------- */

.top {
  position: fixed;
  inset-block-start: max(12px, env(safe-area-inset-top));
  inset-inline: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  padding-inline: 12px;
  pointer-events: none;
}
.top-in {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 32px);
  max-inline-size: 100%;
  padding-block: 7px;
  padding-inline: 12px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgb(15 28 24 / 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 12px 32px -16px rgb(0 0 0 / 0.6);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.brand img {
  inline-size: 32px;
  block-size: 32px;
  border-radius: 8px;
}
.top-nav {
  display: flex;
  gap: clamp(14px, 2.2vw, 26px);
}
.top-nav a,
.lang {
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.top-nav a:hover,
.lang:hover {
  color: var(--ink);
}
.top-end {
  display: flex;
  align-items: center;
  gap: 14px;
}
.top-get,
.button {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--on-gold);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.top-get:hover,
.button:hover {
  background: var(--gold-bright);
}

.badge {
  display: inline-block;
  line-height: 0;
  border-radius: 10px;
}
.badge img {
  inline-size: auto;
  block-size: 56px;
}

/* ---- Phones: the app's real screens in a drawn frame ------------------------------------- */

.phone {
  container-type: inline-size;
  flex: none;
}
.phone-body {
  padding: 2.9cqw;
  border-radius: 17.4cqw;
  background: linear-gradient(145deg, #474d4a, #191d1c 22%, #0a0c0b 60%, #2f3432);
  box-shadow:
    inset 0 0 0 0.35cqw rgb(255 255 255 / 0.1),
    0 12cqw 22cqw -12cqw rgb(0 0 0 / 0.75);
}
.phone-screen {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1320 / 2868;
  overflow: hidden;
  border-radius: 14.6cqw;
  background: #101211;
}
/* The Dynamic Island: simulator screenshots leave it out. */
.phone-screen::after {
  content: "";
  position: absolute;
  inset-block-start: 1.5%;
  inset-inline-start: 35.75%;
  inline-size: 28.5%;
  block-size: 3.9%;
  border-radius: 999px;
  background: #000;
}
.phone-screen > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.phone figcaption {
  margin-block-start: 14px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9375rem;
}

.watch {
  container-type: inline-size;
}
.watch-body {
  position: relative;
  padding: 7cqw;
  border-radius: 27cqw;
  background: linear-gradient(145deg, #474d4a, #171a19 30%, #0a0c0b 70%, #2a2f2d);
  box-shadow:
    inset 0 0 0 0.6cqw rgb(255 255 255 / 0.1),
    0 18cqw 30cqw -16cqw rgb(0 0 0 / 0.8);
}
.watch-body::after {
  content: "";
  position: absolute;
  inset-block-start: 24%;
  inset-inline-end: -4.5cqw;
  inline-size: 5cqw;
  block-size: 17cqw;
  border-radius: 2cqw;
  background: linear-gradient(#3d4341, #1b1f1e);
}
.watch-body img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: 20cqw;
}

/* ---- Hero -------------------------------------------------------------------------------- */

.hero {
  padding-block-start: clamp(104px, 10vw, 136px);
  text-align: center;
  overflow: clip;
  background:
    radial-gradient(46% 30% at 50% 100%, rgb(227 199 122 / 0.26), transparent 72%),
    radial-gradient(86% 58% at 50% 104%, rgb(26 77 63 / 0.95), transparent 72%);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgb(245 245 240 / 0.04);
  color: var(--muted);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.pill i {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--gold-bright);
}
.pill [data-b="name"],
.pill [data-b="time"] {
  color: var(--ink);
  font-weight: 500;
}
.hero h1 {
  max-inline-size: 24ch;
  margin-block-start: 24px;
  margin-inline: auto;
  font-size: clamp(2.75rem, 1.4rem + 4vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.hero h1:lang(ar) {
  max-inline-size: 18ch;
  font-size: clamp(2.25rem, 1.2rem + 3.3vw, 3.75rem);
  line-height: 1.3;
  letter-spacing: 0;
}
.lede {
  max-inline-size: 44ch;
  margin-block-start: 24px;
  margin-inline: auto;
  color: var(--muted);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
}
.get {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-block-start: 32px;
}
.get-note {
  color: var(--muted);
  font-size: 0.9375rem;
}
.trio {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(12px, 2.6vw, 40px);
  block-size: clamp(330px, 47vw, 590px);
  margin-block-start: clamp(40px, 4.5vw, 64px);
  margin-inline: calc(-1 * var(--gutter));
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(#000 72%, transparent);
}
.trio .is-lead {
  inline-size: clamp(214px, 27vw, 318px);
}
.trio .is-side {
  inline-size: clamp(150px, 22.5vw, 264px);
  margin-block-start: clamp(36px, 6vw, 88px);
}
@media (prefers-reduced-motion: no-preference) {
  .trio .phone {
    animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .trio .is-side {
    animation-delay: 0.12s;
  }
  .trio .is-side:last-child {
    animation-delay: 0.2s;
  }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(40px); }
}

/* ---- The tour: the phone stays put and changes screen as each tab scrolls by ------------ */

.tour {
  padding-block-start: var(--band);
}
.tour-grid {
  margin-block-start: clamp(24px, 4vw, 48px);
}
.tour-stage {
  display: none;
}
.step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
  padding-block: clamp(32px, 5vw, 56px);
}
.step-text {
  max-inline-size: 33rem;
}
.step h3,
.tile h3 {
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
  line-height: 1.15;
}
.step h3:lang(ar),
.tile h3:lang(ar) {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.45;
}
.step-text > p:first-of-type,
.tile-text > p:not(.moon) {
  margin-block-start: 14px;
  color: var(--muted);
}
.step-phone {
  inline-size: clamp(220px, 28vw, 300px);
}
.stage-shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.stage-shot.is-on {
  opacity: 1;
}

@media (min-width: 860px) {
  .js .tour-grid {
    display: grid;
    grid-template-columns: minmax(0, 33rem) auto;
    justify-content: center;
    gap: clamp(56px, 10vw, 168px);
  }
  .js .tour-stage {
    --pw: min(330px, (100vh - 150px) * 0.45);
    display: block;
    position: sticky;
    inset-block-start: calc(50vh - var(--pw) * 1.1 + 28px);
    align-self: start;
    padding-block-end: 40px;
  }
  .js .tour-stage .phone {
    inline-size: var(--pw);
  }
  .js .step {
    display: flex;
    min-block-size: min(82vh, 780px);
    padding-block: 24px;
    opacity: 0.32;
    transition: opacity 0.4s ease;
  }
  .js .step.is-on {
    opacity: 1;
  }
  .js .step-phone {
    display: none;
  }
}

/* ---- Widgets: 1em is 10 points of a native widget, so one drawing fits every width. ----- */

.widgets {
  margin-block-start: var(--band);
  padding-block: var(--band);
  background: linear-gradient(var(--deep), var(--night));
  border-block-start: 1px solid var(--line);
}
.widgets-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(32px, 5vw, 88px);
}
.widgets-text .title {
  max-inline-size: 14ch;
  margin-inline: 0;
  text-align: start;
}
.picker-label {
  margin-block-start: 32px;
  color: var(--muted);
  font-size: 0.9375rem;
}
.picker-label b {
  color: var(--ink);
  font-weight: 500;
}
.picker {
  display: grid;
  grid-template-columns: repeat(5, 40px);
  gap: 12px;
  margin-block-start: 12px;
}
.swatch {
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid var(--deep);
  box-shadow: 0 0 0 1px var(--line);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.swatch[aria-checked="true"] {
  box-shadow: 0 0 0 2px var(--gold-bright);
}
.screens {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 36px);
}
.phone-ui {
  flex: 1 1 0;
  max-inline-size: 300px;
}
.phone-ui .phone-screen {
  background: linear-gradient(#08161c, #0e3531 34%, #2c6a58 58%, #b98a4c 86%, #e7b56c);
}
.ui {
  position: absolute;
  inset: 0;
  font-size: calc(100cqw / 40.2);
  font-family: var(--system);
  line-height: 1.25;
  color: #fff;
}
.status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  block-size: 5.4em;
  padding-block-start: 1.5em;
  padding-inline: 4.2em 3.4em;
}
.status b {
  font-size: 1.6em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.status svg {
  block-size: 1.3em;
  fill: #fff;
}
.home-grid {
  display: grid;
  grid-template-columns: repeat(2, 15.8em);
  justify-content: center;
  gap: 2.2em;
  margin-block-start: 2.6em;
}
.home-grid .w-m {
  grid-column: 1 / -1;
}
.home-search {
  position: absolute;
  inset-block-end: 3.4em;
  inset-inline: 0;
  inline-size: fit-content;
  margin-inline: auto;
  padding: 0.5em 1.1em;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.2);
  font-size: 1.2em;
}

.styled[data-style="graphite"] { --c1:#2c2c2e; --c2:#1c1c1e; --edge:rgb(255 255 255 / .08); --tx:#fff; --sec:60%; --ter:35%; --h1:#fff; --h2:#8c8c8c; --ac:#fff; --track:rgb(255 255 255 / .1); }
.styled[data-style="forest_gold"] { --c1:#1f5a4a; --c2:#123a30; --edge:rgb(255 255 255 / .1); --tx:#f5f5f0; --sec:62%; --ter:38%; --h1:#f3e3ae; --h2:#c4a14a; --ac:#c4a14a; --track:rgb(255 255 255 / .12); }
.styled[data-style="midnight"] { --c1:#18203a; --c2:#0b1020; --edge:rgb(255 255 255 / .08); --tx:#f2f4fa; --sec:60%; --ter:35%; --h1:#fff; --h2:#93a5cc; --ac:#8fb4ff; --track:rgb(255 255 255 / .1); }
.styled[data-style="ocean"] { --c1:#0f4c5c; --c2:#082f3b; --edge:rgb(255 255 255 / .1); --tx:#eaf6f7; --sec:60%; --ter:35%; --h1:#d9f3f2; --h2:#6cc5c9; --ac:#7dd3e8; --track:rgb(255 255 255 / .1); }
.styled[data-style="amethyst"] { --c1:#3b1f55; --c2:#22112f; --edge:rgb(255 255 255 / .1); --tx:#f5eefa; --sec:60%; --ter:35%; --h1:#f0ddff; --h2:#b58ae0; --ac:#d2a8ff; --track:rgb(255 255 255 / .1); }
.styled[data-style="mocha"] { --c1:#4a3426; --c2:#2a1d15; --edge:rgb(255 255 255 / .1); --tx:#f6ede4; --sec:60%; --ter:35%; --h1:#f2d9bc; --h2:#c99a6b; --ac:#e0a96d; --track:rgb(255 255 255 / .1); }
.styled[data-style="olive"] { --c1:#4f5a3c; --c2:#333b26; --edge:rgb(255 255 255 / .1); --tx:#f1f2e4; --sec:62%; --ter:38%; --h1:#e6e8c4; --h2:#b5be86; --ac:#c9d27a; --track:rgb(255 255 255 / .12); }
.styled[data-style="sand"] { --c1:#f7f1e5; --c2:#e8ddc8; --edge:rgb(0 0 0 / .06); --tx:#2b2620; --sec:62%; --ter:40%; --h1:#2b2620; --h2:#7a6a55; --ac:#9a6b2f; --track:rgb(0 0 0 / .1); }
.styled[data-style="rose"] { --c1:#f8e9ea; --c2:#ebd0d3; --edge:rgb(0 0 0 / .06); --tx:#3a2427; --sec:62%; --ter:40%; --h1:#3a2427; --h2:#84565c; --ac:#a8465a; --track:rgb(0 0 0 / .1); }
.styled[data-style="pearl"] { --c1:#f7f8fb; --c2:#e3e7ef; --edge:rgb(0 0 0 / .06); --tx:#1f2430; --sec:62%; --ter:40%; --h1:#1f2430; --h2:#5e6882; --ac:#3f5ab0; --track:rgb(0 0 0 / .1); }

.w {
  --t2: color-mix(in srgb, var(--tx) var(--sec), transparent);
  --t3: color-mix(in srgb, var(--tx) var(--ter), transparent);
  position: relative;
  border-radius: 2.2em;
  overflow: hidden;
  background: linear-gradient(var(--c1), var(--c2));
  color: var(--tx);
  box-shadow:
    inset 0 0 0 0.1em var(--edge),
    0 1.6em 3.2em -1.2em rgb(0 0 0 / 0.55);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  transition: background 0.25s ease;
}
.w-s {
  inline-size: 15.8em;
  block-size: 15.8em;
}
.w-m {
  inline-size: 33.8em;
  block-size: 15.8em;
}

.hero-n {
  background: linear-gradient(var(--h1), var(--h2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  line-height: 1.05;
}
.big { font-size: 4.2em; letter-spacing: -0.02em; }
.mid { font-size: 3.1em; }
.num { font-size: 3.6em; }

.lab { font-size: 1em; color: var(--t2); white-space: nowrap; }
.nm { font-size: 1.7em; font-weight: 600; }
.cd { font-size: 1.3em; font-weight: 600; color: var(--ac); white-space: nowrap; }
.cd.sm { font-size: 1.1em; }
.cd.md { font-size: 1.2em; }
.loc { font-size: 1em; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cal {
  display: block;
  background: linear-gradient(var(--h1), var(--h2));
  -webkit-mask: var(--word) center / contain no-repeat;
  mask: var(--word) center / contain no-repeat;
}

.wp-next {
  display: flex;
  flex-direction: column;
  padding: 1.6em;
}
.wp-next .nm { margin-block-start: 0.35em; }
.wp-next .loc { margin-block-start: auto; }

.wp-table {
  padding: 1.3em 1.1em 1.1em;
}
.tb-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4em;
  padding-inline: 0.6em;
  padding-block-end: 0.45em;
}
.tb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  block-size: 2em;
  padding-inline: 0.7em;
  border-radius: 999px;
}
.tb-row span,
.tb-row b {
  font-size: 1.25em;
  font-weight: 400;
}
.tb-row.is-past { color: var(--t3); }
.tb-row.is-next {
  color: var(--ac);
  box-shadow: inset 0 0 0 0.1em var(--ac);
}
.tb-row.is-next span,
.tb-row.is-next b { font-weight: 600; }

.wp-ring { display: grid; place-items: center; padding: 1.4em; }
.ring { position: absolute; inset: 1.4em; inline-size: 13em; block-size: 13em; }
.ring-track { fill: none; stroke: var(--track); stroke-width: 10; }
.ring-arc {
  fill: none;
  stroke: var(--ac);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: var(--ring) 1;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dasharray 0.6s ease;
}
.ring-in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ring-time { font-size: 1.4em; font-weight: 600; color: var(--t2); }
.ring-name { font-size: 1.3em; font-weight: 600; color: var(--t2); }
.cal-ring { inline-size: 8.8em; block-size: 5.6em; margin-block: -0.1em; }

.wp-day,
.wp-wide {
  display: flex;
  flex-direction: column;
  padding: 1.2em 1.6em 1.4em;
}
.day-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8em;
  block-size: 5.6em;
}
.date { display: flex; align-items: center; gap: 0.8em; min-inline-size: 0; }
.date-t { display: flex; flex-direction: column; min-inline-size: 0; }
.date.is-end .date-t { align-items: flex-end; }
.cal-date { inline-size: 7.4em; block-size: 3.3em; }
.date.is-end .cal-date { inline-size: 9em; }
.cap { font-size: 1em; font-weight: 500; color: var(--t2); white-space: nowrap; }
.divider {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-block: 0.45em 0.55em;
}
.divider i { flex: 1; block-size: 0.1em; background: var(--track); }
.divider > span { font-size: 1.1em; font-weight: 600; color: var(--ac); white-space: nowrap; }

.five { display: flex; justify-content: space-between; text-align: center; }
.five-c { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; min-inline-size: 0; }
.five-c span { font-size: 1em; color: var(--t2); white-space: nowrap; }
.five-c b { font-size: 1.3em; font-weight: 500; }
.five-c.is-past span,
.five-c.is-past b { color: var(--t3); }
.five-c.is-next span,
.five-c.is-next b { color: var(--ac); font-weight: 600; }

.bar {
  position: relative;
  block-size: 0.4em;
  border-radius: 999px;
  background: var(--track);
  margin-block-start: auto;
  overflow: hidden;
}
.bar i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: calc(var(--day-bar) * 100%);
  border-radius: inherit;
  background: var(--ac);
}

.wide-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  block-size: 7.4em;
  margin-block-end: 0.5em;
}
.wide-t { display: flex; flex-direction: column; min-inline-size: 0; }
.wide-n { font-size: 3.6em; white-space: nowrap; }
.cal-wide { inline-size: 11.6em; block-size: 7.2em; flex: none; }


.lk-circle {
  position: relative;
  flex: none;
  inline-size: 6.2em;
  block-size: 6.2em;
  display: grid;
  place-items: center;
}
.lk-circle .ring { inset: 0; inline-size: 100%; block-size: 100%; }
.lk-circle .ring-track,
.lk-circle .ring-arc { stroke-width: 9; }
.cal-lock { inline-size: 3.8em; block-size: 2.3em; }
.lk-circle .ring-time { font-size: 1em; color: var(--tx); }
.lk-rect { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 0.2em; }
.lk-line { display: flex; justify-content: space-between; font-size: 1.5em; font-weight: 600; }
.lk-line b { font-weight: 600; }
.lk-sub { font-size: 1.2em; color: var(--t2); }
.lk-rect .bar { margin-block-start: 0.4em; }

/* The Lock Screen: the system's clock over the widgets, white on the wallpaper. */
.ui-lock {
  --tx: #fff;
  --t2: rgb(255 255 255 / 0.74);
  --ac: #fff;
  --h1: #fff;
  --h2: #fff;
  --track: rgb(255 255 255 / 0.28);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lock-date {
  margin-block-start: 4.6em;
  font-size: 2em;
  font-weight: 600;
  color: var(--t2);
}
.lock-time {
  font-size: 10.4em;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.lock-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6em;
  margin-block-start: 1.4em;
  padding-inline: 3.4em;
  font-size: 1.16em;
  text-align: start;
}
.lock-keys {
  position: absolute;
  inset-block-end: 4.4em;
  inset-inline: 4.6em;
  display: flex;
  justify-content: space-between;
}
.lock-keys i {
  inline-size: 5em;
  block-size: 5em;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.28);
}

/* ---- Today in Makkah: one 24-hour axis, the sky, today's six times ---------------------- */

.day {
  margin-block-start: 32px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--tile);
}
.day-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 16px;
  margin-block-end: 12px;
  font-size: 0.9375rem;
}
.day-place {
  font-weight: 500;
}
.day-date {
  color: var(--muted);
}

.sky {
  --dir: to right;
  --fajr: 21%;
  --sunrise: 27%;
  --dhuhr: 50%;
  --asr: 63%;
  --maghrib: 73%;
  --isha: 79%;
  --now: 60%;
  position: relative;
  block-size: clamp(56px, 8vw, 88px);
  border-radius: 16px;
  background: linear-gradient(
    var(--dir),
    #081a16 0,
    #0b1f26 calc(var(--fajr) - 6%),
    #274a5e var(--fajr),
    #e6b566 var(--sunrise),
    #a9d3d9 calc(var(--sunrise) + 7%),
    #cfe9ea var(--dhuhr),
    #e9d8a6 var(--asr),
    #df8a4c calc(var(--maghrib) - 1%),
    #5f3a5c calc(var(--maghrib) + 3%),
    #142a35 var(--isha),
    #081a16 100%
  );
  box-shadow: inset 0 0 0 1px var(--line);
}
[dir="rtl"] .sky {
  --dir: to left;
}
.sky-mark,
.sky-now {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--at);
}
.sky-mark {
  border-inline-start: 1px solid rgb(255 255 255 / 0.28);
}
.sky-now {
  --at: var(--now);
  inset-block: -7px;
  border-inline-start: 2px solid var(--ink);
  margin-inline-start: -1px;
}
.sky-now::before {
  content: "";
  position: absolute;
  inset-block-start: -5px;
  inset-inline-start: -6px;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--ink);
}
.sky {
  block-size: 52px;
  border-radius: 12px;
}
.day-list {
  list-style: none;
  padding: 0;
  margin-block-start: 14px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  --h1: #f5f5f0;
  --h2: #c9d8d0;
}
.day-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.cal-day {
  inline-size: min(100%, 64px);
  block-size: 36px;
  margin-block-end: 4px;
}
.day-name {
  font-size: 0.75rem;
  color: var(--muted);
}
/* In Arabic the calligraphy already says it; the name stays for screen readers. */
.day-item .day-name:lang(ar) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.day-item time {
  font-size: 0.9375rem;
  font-weight: 500;
}
.day-item.is-past {
  opacity: 0.5;
}
.day-item.is-next {
  --h1: #f3e3ae;
  --h2: #c4a14a;
}
.day-item.is-next .day-name,
.day-item.is-next time {
  color: var(--gold-bright);
}
.day-caption {
  margin-block-start: 14px;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.55;
}
.day-caption:lang(ar) {
  line-height: 1.8;
}

/* ---- Ramadan, habits, Apple Watch -------------------------------------------------------- */

.more {
  padding-block-start: var(--band);
}
.tiles {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin-block-start: clamp(40px, 6vw, 72px);
}
.tile {
  --pad: clamp(24px, 3.2vw, 44px);
  overflow: hidden;
  border-radius: 32px;
  border: 1px solid var(--line);
  background: var(--tile);
}
.tile-text {
  max-inline-size: 30rem;
}
.tile-ramadan,
.tile-habits {
  block-size: 560px;
  padding: var(--pad) var(--pad) 0;
}
.tile-ramadan {
  grid-column: span 7;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 40px);
  background: var(--glass);
}
.tile-ramadan .phone {
  inline-size: clamp(190px, 21vw, 264px);
}
.tile-habits {
  grid-column: span 5;
}
.tile-habits .phone {
  inline-size: clamp(190px, 19vw, 240px);
  margin-block-start: 28px;
  margin-inline: auto;
}
.tile-watch {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding: var(--pad);
  padding-inline-end: clamp(32px, 5vw, 72px);
}
.watches {
  display: flex;
  gap: clamp(14px, 2.2vw, 32px);
}
.watch {
  inline-size: clamp(88px, 13vw, 164px);
}
.moon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 20px;
  padding: 6px 16px;
  padding-inline-start: 12px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.22);
  font-size: 0.9375rem;
}
.moon b {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.moon i {
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  box-shadow: inset -5px -2px 0 0 var(--gold-bright);
  transform: rotate(-24deg);
}
[dir="rtl"] .moon i {
  transform: scaleX(-1) rotate(-24deg);
}

/* ---- Privacy and offline ----------------------------------------------------------------- */

.trust {
  margin-block-start: var(--band);
  padding-block: var(--band);
  border-block: 1px solid var(--line);
  background: var(--deep);
}
.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 7vw, 112px);
}
.pair h2 {
  font-size: clamp(1.875rem, 1.3rem + 1.9vw, 2.75rem);
  line-height: 1.15;
}
.pair h2:lang(ar) {
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
  line-height: 1.45;
}
.pair p {
  margin-block-start: 16px;
  color: var(--muted);
}
.go {
  display: inline-block;
  margin-block-start: 20px;
  font-weight: 500;
}

/* ---- Plans ------------------------------------------------------------------------------- */

.plans-band {
  padding-block-start: var(--band);
}
.tiers {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(14px, 1.6vw, 20px);
  margin-block-start: clamp(40px, 6vw, 72px);
}
.tier {
  padding: clamp(24px, 3.2vw, 44px);
  border-radius: 32px;
  border: 1px solid var(--line);
  background: var(--tile);
}
.tier.is-pro {
  background: var(--glass);
}
.tier h3 {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.4;
}
.tier.is-pro h3 {
  color: var(--gold-bright);
}
.features {
  list-style: none;
  padding: 0;
  margin-block-start: 18px;
  display: grid;
  gap: 10px;
}
.features li {
  position: relative;
  padding-inline-start: 28px;
  line-height: 1.5;
}
.features li:lang(ar) {
  line-height: 1.75;
}
.features li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.3em;
  inline-size: 18px;
  block-size: 18px;
  background: var(--muted);
  -webkit-mask: var(--check) center / contain no-repeat;
  mask: var(--check) center / contain no-repeat;
}
.is-pro .features li::before {
  background: var(--gold-bright);
}
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-block-start: 28px;
}
.plan {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgb(0 0 0 / 0.22);
  border: 1px solid transparent;
  line-height: 1.45;
}
.plan b {
  font-weight: 700;
}
.plan span {
  color: var(--muted);
  font-size: 0.875rem;
}
.plan.is-main {
  border-color: var(--gold);
}
.footnote {
  max-inline-size: 76ch;
  margin-block-start: 24px;
  color: var(--muted);
  font-size: 0.875rem;
}

/* ---- Questions --------------------------------------------------------------------------- */

.faq {
  padding-block-start: var(--band);
}
.faq-list {
  max-inline-size: 46rem;
  margin-block-start: clamp(32px, 5vw, 56px);
  margin-inline: auto;
  border-block-start: 1px solid var(--line);
}
.faq details {
  border-block-end: 1px solid var(--line);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-block: 20px;
  font-size: 1.125rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  flex: none;
  inline-size: 16px;
  block-size: 16px;
  background: var(--muted);
  -webkit-mask: var(--chevron) center / contain no-repeat;
  mask: var(--chevron) center / contain no-repeat;
  transition: transform 0.2s ease;
}
.faq details[open] summary::after {
  transform: rotate(180deg);
}
.faq-list p {
  max-inline-size: 62ch;
  padding-block-end: 22px;
  color: var(--muted);
}

/* ---- The way out and the footer ---------------------------------------------------------- */

.end {
  padding-block: var(--band);
}
.end-panel {
  --pad: clamp(28px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 5vw, 72px);
  overflow: hidden;
  padding: var(--pad) var(--pad) 0;
  border-radius: 40px;
  border: 1px solid var(--line);
  background:
    radial-gradient(60% 90% at 100% 100%, rgb(227 199 122 / 0.22), transparent 70%),
    var(--glass);
}
[dir="rtl"] .end-panel {
  background:
    radial-gradient(60% 90% at 0% 100%, rgb(227 199 122 / 0.22), transparent 70%),
    var(--glass);
}
.end-text {
  padding-block-end: var(--pad);
}
.end-icon {
  inline-size: 72px;
  block-size: 72px;
  border-radius: 17px;
  box-shadow: 0 16px 32px -14px rgb(0 0 0 / 0.6);
}
.end h2 {
  max-inline-size: 13ch;
  margin-block-start: 28px;
  font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.end h2:lang(ar) {
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.125rem);
  line-height: 1.35;
  letter-spacing: 0;
}
.end-text > p {
  margin-block-start: 16px;
  color: var(--muted);
  font-size: 1.125rem;
}
.end-get {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
  margin-block-start: 32px;
}
.qr {
  display: flex;
  align-items: center;
  gap: 14px;
  max-inline-size: 15rem;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.45;
}
.qr img {
  flex: none;
  inline-size: 84px;
  block-size: 84px;
  padding: 8px;
  border-radius: 14px;
  background: var(--ink);
}
.end-phone {
  align-self: start;
  inline-size: clamp(210px, 24vw, 290px);
  block-size: 440px;
}

.site-footer {
  border-block-start: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9375rem;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px 48px;
  padding-block: 48px max(48px, env(safe-area-inset-bottom));
}
.footer-about p {
  max-inline-size: 44ch;
  margin-block: 14px 20px;
}
.footer-about .badge img {
  block-size: 44px;
}
.footer-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}
.site-footer a:not(.brand) {
  color: var(--ink);
  text-decoration: none;
}
.site-footer a:not(.brand):hover {
  text-decoration: underline;
}
.footer-made {
  flex-basis: 100%;
  font-size: 0.875rem;
}

/* ---- Legal pages ------------------------------------------------------------------------- */

.doc-head {
  padding-block: clamp(120px, 13vw, 168px) clamp(40px, 6vw, 72px);
  border-block-end: 1px solid var(--line);
  background: radial-gradient(70% 120% at 50% 0%, rgb(26 77 63 / 0.55), transparent 70%);
}
.doc-head h1 {
  font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.doc-head h1:lang(ar) {
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
  line-height: 1.35;
  letter-spacing: 0;
}
.doc-head p {
  margin-block-start: 16px;
  color: var(--muted);
}
.doc-head .doc-intro {
  max-inline-size: 62ch;
  color: var(--ink);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
}
.doc {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 46rem);
  gap: clamp(40px, 6vw, 96px);
  padding-block: clamp(48px, 7vw, 88px) var(--band);
}
.toc {
  position: sticky;
  inset-block-start: 96px;
  align-self: start;
  max-block-size: calc(100vh - 120px);
  overflow-y: auto;
}
.toc ol {
  list-style: none;
  padding: 0;
  border-inline-start: 2px solid var(--line);
}
.toc a {
  display: block;
  padding-block: 7px;
  padding-inline-start: 16px;
  margin-inline-start: -2px;
  border-inline-start: 2px solid transparent;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-decoration: none;
}
.toc a:hover {
  color: var(--ink);
  border-inline-start-color: var(--gold);
}
.doc-body section {
  scroll-margin-block-start: 96px;
}
.doc-body section + section {
  margin-block-start: 48px;
  padding-block-start: 48px;
  border-block-start: 1px solid var(--line);
}
.doc-body h2 {
  margin-block-end: 12px;
  font-family: var(--font);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
}
.doc-body h3 {
  margin-block: 28px 8px;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.5;
}
.doc-body p,
.doc-body li,
.doc-body td {
  color: #d5ddd8;
}
.doc-body ul {
  padding-inline-start: 1.25em;
}
.doc-body p + p,
.doc-body ul + p,
.doc-body p + ul,
.doc-body .table + p,
.doc-body p + .table {
  margin-block-start: 12px;
}
.doc-body li + li {
  margin-block-start: 8px;
}
.doc-body li::marker {
  color: var(--gold);
}
.doc-body code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.875em;
  direction: ltr;
  unicode-bidi: isolate;
  overflow-wrap: anywhere;
}
.table {
  margin-block-start: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--tile);
}
.table table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.table th,
.table td {
  padding: 10px 14px;
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--line);
}
.table tr:last-child td {
  border-block-end: 0;
}
.table th {
  color: var(--muted);
  font-weight: 500;
  background: rgb(0 0 0 / 0.2);
}

/* ---- 404 --------------------------------------------------------------------------------- */

.notice {
  padding-block: clamp(140px, 16vw, 200px) var(--band);
}
.notice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}
.notice h1 {
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem);
  line-height: 1.2;
}
.notice h1:lang(ar) {
  line-height: 1.45;
}
.notice p {
  margin-block: 12px 28px;
  color: var(--muted);
}

/* ---- Narrow screens ---------------------------------------------------------------------- */

@media (max-width: 859px) {
  .top-nav {
    display: none;
  }
  .step {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 36px;
  }
  .step-text {
    justify-self: start;
  }
  .step-phone {
    inline-size: min(68vw, 300px);
  }
  .widgets-grid,
  .pair,
  .tiers,
  .doc,
  .end-panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .screens {
    justify-content: flex-start;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-block-end: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .phone-ui {
    flex: 0 0 min(72vw, 300px);
    scroll-snap-align: center;
  }
  .tile-ramadan,
  .tile-habits,
  .tile-watch {
    grid-column: 1 / -1;
  }
  .tile-ramadan,
  .tile-habits {
    block-size: auto;
    max-block-size: 640px;
    grid-template-columns: minmax(0, 1fr);
  }
  .tile-ramadan .phone,
  .tile-habits .phone {
    inline-size: min(62vw, 270px);
    margin-block-start: 8px;
    margin-inline: auto;
  }
  .tile-watch {
    grid-template-columns: minmax(0, 1fr);
    padding-inline-end: var(--pad);
  }
  .watches {
    justify-content: center;
  }
  .watch {
    inline-size: min(26vw, 150px);
  }
  .end-phone {
    justify-self: center;
    inline-size: min(62vw, 270px);
    block-size: 300px;
  }
  .toc {
    position: static;
    max-block-size: none;
  }
}

@media (max-width: 859px), (hover: none) {
  .qr {
    display: none;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 1rem;
  }
  .trio {
    gap: 3vw;
  }
  .trio .is-lead {
    inline-size: 58vw;
  }
  .trio .is-side {
    inline-size: 42vw;
    margin-block-start: 11vw;
  }
  .trio {
    block-size: 98vw;
  }
  .plans {
    grid-template-columns: minmax(0, 1fr);
  }
  .tile,
  .tier {
    border-radius: 26px;
  }
  .end-panel {
    border-radius: 30px;
  }
  .notice-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .table thead {
    display: none;
  }
  .table tr {
    display: block;
    padding: 12px 14px;
    border-block-end: 1px solid var(--line);
  }
  .table tr:last-child {
    border-block-end: 0;
  }
  .table td {
    display: block;
    padding: 2px 0;
    border: 0;
  }
  .table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.8125rem;
    color: var(--muted);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}