/* ==========================================================================
   إحراز — landing page in framer.com's composition (index.html, body.lp--framer)
   Reverse-engineered with REA (October 2026) from framer.com's DOM and frame captures:
   1200px column · thin full-width nav · 54px/1.0 hero (500, −.04em Latin) · 8px-radius
   small buttons · a looping product demo in a 20px frame with glowing blue artboard lines ·
   a 4×2 wordmark grid · section heads with the headline at the start and one button at the
   end · demo cards that scroll past a sticky AI chat · a hairline bento of mini mockups ·
   a centred prompt box · six link columns.
   Framer's surfaces are black; here the page is white (the owner asked for it whiter).
   Framer fades blocks in (opacity .001 → 1, spring .4s). The site rule still holds — Arabic
   text never fades, slides, clips or blurs (Safari drops its marks) — so blocks are revealed by
   a canvas-coloured COVER that fades off them, which looks the same on a flat background.
   English-only parts of the hero demo move freely; Arabic in it only appears.
   ========================================================================== */

.lp--framer {
  color-scheme: light;
  /* white, from the brand's own light tokens (tokens.css) — Framer's layout, not its black */
  --canvas: #fbfaf8;
  --surface: #ffffff;
  --lilac: #f3f1ec;
  --g-raise: #ebe9e3;
  --ink: #171917;
  --ink-2: #3a3d3a;
  --muted: #565954;
  --faint: #a5a8a2;
  --ink-dark: #171917;
  --border: rgba(23, 25, 23, .08);
  --border-strong: rgba(23, 25, 23, .13);
  --line: var(--border);
  --accent: #171917;             /* primary button: charcoal with ivory text */
  --accent-hover: #2e302c;
  --accent-soft: #f3f1ec;
  --on-accent: #f5f3ee;
  --terracotta: #dc2626;
  --ok-text: #15803d;
  --gold-text: #a16207;          /* gold read as text on white */
  --fx-blue: #2f8cff;            /* Framer's #09f, a touch softer */
  --fx-blue-glow: rgba(47, 140, 255, .32);
  --fx-60: var(--muted);         /* Framer's #fff9 body text, as readable grey */
  --fx-80: var(--ink-2);         /* nav links */
  /* the demo artboard on white */
  --fx-media: #f4f3ef;
  --fx-chat: #ffffff;
  --fx-hover: #fdfcfa;
  --ease-framer: cubic-bezier(.22, 1, .36, 1);
  --shadow-float: 0 18px 40px -16px rgba(23, 25, 23, .22);
  background: var(--canvas);
}

.fx-wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }
@media (max-width: 560px) { .fx-wrap { width: calc(100% - 32px); } }
.lp--framer .ltr { unicode-bidi: isolate; }

/* ---------- type (Framer presets; Arabic keeps its leading and no tracking) ---------- */
.fx-h1 { font-size: 54px; line-height: 1.25; font-weight: 600; color: var(--ink); }
.fx-h2 { font-size: 44px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.fx-h1 .ltr, .fx-h2 .ltr { letter-spacing: -.04em; }
.fx-h2--center { text-align: center; }
@media (max-width: 1199px) { .fx-h1 { font-size: 42px; } .fx-h2 { font-size: 36px; } }
@media (max-width: 809px) { .fx-h1 { font-size: 36px; } .fx-h2 { font-size: 28px; } }

/* ---------- buttons: small, 8px corners ---------- */
.fx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 0 14px; border-radius: 8px; white-space: nowrap;
  font-size: 14px; font-weight: var(--w-semibold); line-height: 1;
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.fx-btn .icon { width: 15px; height: 15px; }
.fx-btn--light { background: var(--accent); color: var(--on-accent); }
.fx-btn--light:hover { background: var(--accent-hover); }
.fx-btn--dark { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border-strong); }
.fx-btn--dark:hover { background: var(--lilac); }
.fx-btn--lg { min-height: 46px; padding: 0 22px; font-size: 15px; border-radius: 10px; }
.fx-btn:focus-visible, .fx-link:focus-visible { outline: 2px solid var(--fx-blue); outline-offset: 3px; }
.fx-btn.is-disabled { opacity: .55; pointer-events: none; }

/* ==========================================================================
   Nav: one thin bar across the top
   ========================================================================== */
.fx-nav { position: fixed; z-index: 50; inset: 0 0 auto; height: 64px; transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.fx-nav.is-scrolled { background: rgba(251, 250, 248, .82); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 1px 0 var(--border); }
.fx-nav__in { width: min(1200px, 100% - 48px); height: 100%; margin-inline: auto; display: flex; align-items: center; gap: 28px; }
@media (max-width: 560px) { .fx-nav__in { width: calc(100% - 32px); } }
.fx-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.fx-logo__mark { width: 28px; height: 28px; flex: none; border-radius: 7px; background: var(--ink); display: grid; place-items: center; }
.fx-logo__mark svg { width: 28px; height: 28px; fill: var(--on-accent); }
.fx-logo__mark--sm { width: 24px; height: 24px; border-radius: 6px; }
.fx-logo__mark--sm svg { width: 24px; height: 24px; }
.fx-logo__word { height: 17px; width: auto; fill: currentColor; }
.fx-nav__links { display: flex; gap: 22px; }
.fx-nav__links a { font-size: 14px; color: var(--fx-80); transition: color var(--dur-fast); }
.fx-nav__links a:hover { color: var(--ink); }
.fx-nav__end { margin-inline-start: auto; display: flex; align-items: center; gap: 18px; }
.fx-nav__login { font-size: 14px; color: var(--fx-60); }
.fx-nav__login:hover { color: var(--ink); }
.fx-nav .fx-btn { min-height: 32px; padding: 0 12px; }
.fx-burger { border: 0; display: none; width: 36px; height: 36px; border-radius: 8px; place-items: center; color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.fx-burger .icon { width: 18px; height: 18px; }
@media (max-width: 860px) { .fx-nav__links { display: none; } .fx-burger { display: grid; } }
@media (max-width: 560px) { .fx-nav__login { display: none; } }

/* the shared full-screen menu sits on graphite */
.lp--framer .lp-menu__acts .fx-btn { min-width: 160px; }

/* ==========================================================================
   Hero: outcome headline, one free start, two goals — and a picture of progress
   (the pattern on Magoosh, Preply, Busuu, Duolingo, Babbel, Cambly and E2)
   ========================================================================== */
.fx-hero { padding: 136px 0 72px; }
.fx-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; align-items: center; }
.fx-hero .fx-h1 { font-size: 46px; }
@media (max-width: 1199px) { .fx-hero .fx-h1 { font-size: 40px; } }
@media (max-width: 809px) { .fx-hero .fx-h1 { font-size: 36px; } }
.fx-hero__sub { margin-top: 20px; max-width: 30em; font-size: 20px; line-height: 1.8; color: var(--muted); }
.fx-hero__acts { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.fx-hero__acts .icon { width: 17px; height: 17px; }
.fx-goals__q { margin-top: 36px; font-size: 13px; font-weight: var(--w-semibold); color: var(--muted); }
.fx-goals { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fx-goal { position: relative; top: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px; border-radius: 14px;
  background: var(--surface); box-shadow: 0 0 0 1px var(--border-strong); color: var(--ink);
  transition: top var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.fx-goal:hover { top: -2px; box-shadow: 0 0 0 1px rgba(23, 25, 23, .24), 0 16px 32px -22px rgba(23, 25, 23, .35); }
.fx-goal:focus-visible { outline: 2px solid var(--fx-blue); outline-offset: 3px; }
.fx-goal__ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--tone); color: var(--ink); }
.fx-goal__ic .icon { width: 20px; height: 20px; }
.fx-goal > b { font-size: 16px; font-weight: var(--w-semibold); line-height: 1.5; }
.fx-goal__go { width: 17px; height: 17px; color: var(--faint); transition: transform var(--dur) var(--ease-out), color var(--dur-fast); }
.fx-goal:hover .fx-goal__go, .fx-goal:focus-visible .fx-goal__go { color: var(--ink); transform: translateX(-3px); }

/* ---- the progress picture: plan card, estimated score, the helper's note ---- */
.fx-prog { position: relative; height: 460px; border-radius: 28px; isolation: isolate;
  background: radial-gradient(60% 50% at 75% 22%, var(--t-reading), transparent 70%), radial-gradient(55% 45% at 22% 85%, var(--highlight-soft), transparent 70%), #f5f3ee;
  box-shadow: inset 0 0 0 1px var(--border); }
.fx-prog > div { position: absolute; background: var(--surface); box-shadow: 0 0 0 1px var(--border), 0 24px 48px -28px rgba(23, 25, 23, .35); }
.pg-plan { inset-inline-start: 8%; top: 26%; width: 76%; z-index: 1; display: grid; gap: 14px; padding: 20px; border-radius: 20px; }
.pg-plan__head { display: flex; align-items: center; gap: 14px; }
.pg-ring { position: relative; width: 76px; height: 76px; flex: none; display: grid; place-content: center; text-align: center; }
.pg-ring svg { position: absolute; inset: 0; rotate: -90deg; }
.pg-ring circle { fill: none; stroke-width: 7; }
.pg-ring .bg { stroke: var(--lilac); }
.pg-ring .fg { stroke: var(--ink); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 40; }
.pg-ring b { position: relative; font-size: 22px; line-height: 1; font-weight: var(--w-bold); }
.pg-ring small { position: relative; font-size: 11px; color: var(--muted); }
.pg-plan__t b { display: block; font-size: 16px; font-weight: var(--w-semibold); }
.pg-plan__t small { font-size: 13px; color: var(--muted); }
.pg-plan__label { font-size: 12px; font-weight: var(--w-semibold); color: var(--muted); }
.pg-tasks { display: grid; gap: 4px; }
.pg-tasks li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 14px; color: var(--ink-2); }
.pg-tasks li small { margin-inline-start: auto; font-size: 12px; color: var(--muted); }
.pg-tasks i { position: relative; width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--faint); }
.pg-tasks svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.pg-tasks svg path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pg-tasks .is-done { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.pg-tasks .is-done i { background: var(--ok-text); box-shadow: none; }
.pg-tasks .is-now { background: var(--canvas); color: var(--ink); box-shadow: none; }
.pg-tasks .is-now i { box-shadow: inset 0 0 0 5px var(--highlight); }
.pg-score__track i { display: block; height: 100%; border-radius: inherit; background: var(--ink); transform-origin: right center; transform: scaleX(var(--v)); }
.pg-score { inset-inline-end: 6%; top: 7%; width: 50%; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 2px; padding: 12px 16px; border-radius: 16px; }
.pg-score b { grid-row: 1 / span 3; }
.pg-score small { font-size: 12px; color: var(--muted); }
.pg-score b { font-size: 40px; line-height: 1.15; font-weight: var(--w-bold); }
.pg-score__track { position: relative; height: 6px; margin: 6px 0 2px; border-radius: 99px; background: var(--lilac); }
.pg-score__track i { background: var(--fx-blue); }
.pg-score__track em { position: absolute; top: -4px; bottom: -4px; inset-inline-start: calc(var(--t) * 100%); width: 2px; border-radius: 2px; background: var(--ink); }

@media (max-width: 1099px) { .fx-hero__grid { gap: 40px; } .fx-goals { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .fx-hero { padding: 108px 0 48px; }
  .fx-hero__grid { grid-template-columns: 1fr; }
  .fx-hero__sub { font-size: 17px; }
  .fx-prog { height: 440px; max-width: 520px; }
}
@media (max-width: 600px) {
  .fx-hero__acts .fx-btn { flex: 1 1 100%; }
  .fx-goals__q { margin-top: 28px; }
  .fx-prog { height: auto; display: grid; gap: 10px; padding: 14px; border-radius: 20px; }
  .fx-prog > div { position: static; width: auto; }
  .pg-plan { padding: 16px; }
  .pg-score { grid-row: 1; }
  .pg-score b { font-size: 34px; }
}

/* ==========================================================================
   Facts strip
   ========================================================================== */
.fx-facts { border-block: 1px solid var(--border); background: var(--surface); }
.fx-facts__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 64px; padding: 20px 0; }
.fx-facts__row li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: var(--w-medium); color: var(--ink-2); }
.fx-facts__row .icon { width: 17px; height: 17px; color: var(--ink); }
@media (max-width: 700px) {
  .fx-facts__row { display: grid; justify-content: start; gap: 10px; padding: 16px 0; }
  .fx-facts__row li { font-size: 14px; }
}

/* ==========================================================================
   Section heads: headline at the start, one button at the end
   ========================================================================== */
.fx-sec { padding-top: 140px; }
@media (max-width: 809px) { .fx-sec { padding-top: 96px; } }
.fx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.fx-head--col { flex-direction: column; align-items: flex-start; gap: 14px; }
.fx-sub { font-size: 18px; line-height: 1.6; color: var(--fx-60); }
.fx-sub a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.fx-soon { display: inline-block; vertical-align: middle; margin-inline-start: 6px; padding: 1px 9px; border-radius: 99px; border: 1px dashed currentColor; font-size: 12px; font-weight: 600; color: var(--muted); }

/* ==========================================================================
   Agents: cards at the start, a sticky chat at the end
   ========================================================================== */
.fx-agents { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.fx-agents__cards { display: grid; gap: 40px; }
.fx-card { border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); padding: 8px; isolation: isolate; }
.fx-card__media { position: relative; border-radius: 14px; min-height: 440px; display: grid; place-items: center; padding: 44px 36px; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--tone) 14%, transparent), transparent 70%), var(--fx-media); }
.fx-card__media > .sc__panel { width: min(100%, 560px); }
.fx-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 20px 18px 14px; }
.fx-card__foot h3 { font-size: 18px; line-height: 1.5; font-weight: var(--w-medium); color: var(--ink); }
.fx-card__foot p { margin-top: 2px; max-width: 34em; font-size: 17px; line-height: 1.6; color: var(--fx-60); }
.fx-link { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 15px; font-weight: var(--w-medium); color: var(--ink); }
.fx-link .icon { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); }
.fx-link:hover .icon { transform: translateX(-4px); }

.fx-chat { position: sticky; top: 84px; display: grid; gap: 12px; align-content: start; padding: 14px; border-radius: 20px;
  background: var(--surface); box-shadow: 0 0 0 1px var(--border-strong), 0 30px 60px -40px rgba(23, 25, 23, .3); }
.fx-chat__head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 0; }
.fx-chat__av { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tint-cyan); box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.fx-chat__av .icon { width: 17px; height: 17px; }
.fx-chat__who { display: grid; line-height: 1.4; }
.fx-chat__who b { font-size: 15px; font-weight: var(--w-semibold); }
.fx-chat__who small { font-size: 12px; color: var(--muted); }
.fx-chat__tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 4px; border-radius: 12px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--border); }
.fx-chat__tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 34px; padding: 0 4px; border: 0; border-radius: 9px; background: none;
  font: inherit; font-size: 12.5px; font-weight: var(--w-medium); color: var(--muted); cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast); }
.fx-chat__tabs button .icon { width: 14px; height: 14px; flex: none; }
.fx-chat__tabs button:hover { color: var(--ink); }
.fx-chat__tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--border-strong), 0 1px 2px rgba(23, 25, 23, .08); }
.fx-chat__tabs button:focus-visible { outline: 2px solid var(--fx-blue); outline-offset: 1px; }
.fx-chat__body { min-height: 300px; }
.fx-thread { display: grid; gap: 10px; align-content: start; }
.fx-thread[hidden] { display: none; }
.fx-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--border); font-size: 13px; }
.fx-ctx__t { flex-basis: 100%; font-size: 12.5px; font-weight: var(--w-semibold); color: var(--ink-2); }
.fx-pick { padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: var(--w-semibold); color: var(--ink-dark); }
.fx-pick.is-wrong { background: #fbe1d3; color: #b42318; }
.fx-pick.is-right { background: var(--tint-violet); }
.fx-ctx__soon { padding: 1px 9px; border-radius: 99px; border: 1px dashed currentColor; font-size: 12px; font-weight: 600; color: var(--muted); }
.fx-chat .ai-box { margin-top: 0; }
.fx-chat .ai-box p { margin: 0; }
.fx-thread:not(.is-thinking) .fx-wait, .fx-thread.is-thinking .fx-ans { display: none; }
.fx-chat__more { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-chat__more span { padding: 5px 11px; border-radius: 99px; font-size: 12.5px; color: var(--ink-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); }
.fx-chat__foot { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.fx-chat__foot .icon { width: 14px; height: 14px; flex: none; color: var(--ok-text); }

/* stream: words appear one by one (visibility only — Arabic shaping and marks stay intact) */
.fx-w { visibility: hidden; }
.fx-w.is-on { visibility: visible; }

@media (max-width: 999px) {
  .fx-agents { grid-template-columns: 1fr; }
  .fx-chat { position: static; height: auto; max-height: none; grid-row: 1; }
  .fx-chat__body { min-height: 230px; }
}
@media (max-width: 560px) {
  .fx-card__media { min-height: 0; padding: 14px 10px; }
  .fx-card__foot { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 10px 10px; }
}

/* the demo panels from landing.css, on graphite */
.lp--framer .sc__panel { background: var(--surface); box-shadow: 0 0 0 1px var(--border), 0 30px 60px -34px rgba(23, 25, 23, .3); }
.lp--framer :is(.rd-q, .gr-sent) { background: var(--lilac); }
.lp--framer :is(.wr-band, .rd-passage mark) { color: var(--ink-dark); }
.lp--framer .pbtn--dark { min-height: 40px; padding: 0 16px; border-radius: 8px; font-size: 13px; }

/* ==========================================================================
   Bento: hairline grid of mini mockups
   ========================================================================== */
.fx-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; border-radius: 20px; overflow: hidden;
  background: var(--border-strong); box-shadow: 0 0 0 1px var(--border-strong); }
.fx-cell { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 22px; padding: 28px; min-height: 290px; background: var(--surface); color: var(--ink); overflow: hidden; }
.fx-cell__art { position: relative; flex: 1; display: grid; place-items: center; min-height: 0; }
.fx-cell__t { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: var(--w-medium); line-height: 1.4; }
/* edges of each mockup fade into the cell (an overlay, never a mask on text) */
.fx-cell__art::after { content: ""; position: absolute; inset: auto -28px -1px; height: 38%; pointer-events: none; background: linear-gradient(transparent, var(--surface)); transition: background var(--dur) var(--ease); }
.fx-cell--score { grid-column: span 2; min-height: 420px; }
.fx-cell--cms { grid-column: span 4; min-height: 420px; }
.fx-cell--vocab, .fx-cell--days, .fx-cell--spell { grid-column: span 2; min-height: 340px; }
.fx-cell--chart { grid-column: span 4; min-height: 440px; }
.fx-cell--lesson { grid-column: span 2; min-height: 440px; }

/* panels used inside the mockups */
.fx-vitals, .fx-cms, .fx-word, .fx-today, .fx-spell, .fx-chart, .fx-steps { width: 100%; }
.fx-vitals { max-width: 300px; display: grid; gap: 20px; }
.fx-vitals__head { display: flex; align-items: center; justify-content: space-between; }
.fx-vitals__head b { font-size: 15px; font-weight: var(--w-medium); }
.fx-good { font-size: 10px; font-weight: var(--w-bold); letter-spacing: .06em; padding: 1px 6px; border-radius: 4px; color: var(--ok-text); box-shadow: inset 0 0 0 1px currentColor; }
.fx-vital { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 14px; color: var(--muted); }
.fx-vital b { color: var(--fx-blue); font-weight: var(--w-medium); }
.fx-vital i { grid-column: 1 / -1; position: relative; height: 6px; border-radius: 99px; background: var(--lilac); overflow: hidden; }
.fx-vital i::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--fx-blue); transform-origin: right; transform: scaleX(var(--v)); transition: transform 1.1s var(--ease-framer) .2s; }
.fx-vital i::after { content: ""; position: absolute; inset-block: -2px; inset-inline-end: 12%; width: 1px; background: var(--muted); }

.fx-cms { position: absolute; inset: 6px 0 0 -28px; display: grid; grid-template-columns: 200px 1fr; border-radius: 0 12px 0 0; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; font-size: 13px; }
.fx-cms__side { padding: 10px; border-inline-end: 1px solid var(--border); color: var(--ink-2); }
.fx-cms__tabs { display: flex; gap: 2px; margin-bottom: 10px; }
.fx-cms__tabs span { padding: 5px 9px; border-radius: 6px; font-size: 12px; color: var(--muted); }
.fx-cms__tabs .is-on { background: var(--lilac); color: var(--ink); }
.fx-cms__side li { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; }
.fx-cms__side li .icon { width: 12px; height: 12px; color: var(--muted); }
.fx-cms__side .is-sub { padding-inline-start: 26px; }
.fx-cms__side li small { margin-inline-start: auto; font-size: 11px; color: var(--muted); }
.fx-cms__side .is-on { background: var(--lilac); color: var(--ink); }
.fx-cms__side .is-add { color: var(--faint); }
.fx-cms__table { min-width: 0; }
.fx-cms__tools { display: flex; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--ink-2); }
.fx-cms__tools .icon { width: 16px; height: 16px; }
.fx-row { display: grid; grid-template-columns: 70px 1fr 110px; align-items: center; padding: 0 16px; height: 46px; border-bottom: 1px solid var(--border); color: var(--ink-2); font-size: 13px; }
.fx-row--h { height: 40px; color: var(--muted); font-size: 12px; }
.fx-row.is-on { background: rgba(47, 140, 255, .1); box-shadow: inset 0 0 0 1px rgba(47, 140, 255, .45); color: var(--ink); }
.fx-row span:last-child { justify-self: start; font-size: 12px; padding: 2px 8px; border-radius: 5px; color: var(--muted); }
.fx-row .is-done { background: rgba(21, 128, 61, .1); color: var(--ok-text) !important; }
.fx-row .is-now { background: rgba(242, 201, 76, .22); color: var(--gold-text) !important; }

.fx-word { max-width: 280px; display: grid; gap: 12px; }
.fx-word small { font-size: 12px; color: var(--muted); }
.fx-word__card { position: relative; display: grid; gap: 4px; padding: 16px; border-radius: 12px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--border); }
.fx-word__card b { font-size: 24px; font-weight: var(--w-semibold); text-align: right; }
.fx-word__card > span { font-size: 13px; color: var(--muted); }
.fx-word__card p { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.fx-word__card mark { background: var(--highlight); color: var(--ink-dark); padding: 0 2px; border-radius: 2px; }
.fx-word__play { position: absolute; top: 14px; inset-inline-end: 14px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); }
.fx-word__play .icon { width: 15px; height: 15px; }
.fx-word__list { display: grid; gap: 6px; }
.fx-word__list span { padding: 9px 12px; border-radius: 8px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--border); font-size: 13px; color: var(--ink-2); }

.fx-today { max-width: 260px; display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--border); }
.fx-today__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 13px; }
.fx-today__head b { font-weight: var(--w-medium); }
.fx-today__head .icon { width: 14px; height: 14px; color: var(--muted); }
.fx-today p { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; font-size: 13px; color: var(--ink-2); }
.fx-today p small { margin-inline-start: auto; font-size: 11px; color: var(--muted); }
.fx-today p i { width: 14px; height: 14px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--faint); }
.fx-today .is-done i { background: var(--ok-text); box-shadow: none; }
.fx-today .is-done { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.fx-today .is-on { background: var(--lilac); color: var(--ink); }
.fx-today .is-on i { box-shadow: inset 0 0 0 4px var(--highlight); }

.fx-days { display: grid; justify-items: center; gap: 2px; }
.fx-days b { font-size: 76px; line-height: 1; font-weight: var(--w-semibold); letter-spacing: -.04em; background: linear-gradient(180deg, var(--ink), rgba(23, 25, 23, .3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx-days span { font-size: 15px; color: var(--muted); }
.fx-cell--days::before { content: ""; position: absolute; z-index: -1; inset: auto -30% -60% 20%; height: 110%; border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 140, 255, .1), transparent); }

.fx-spell { max-width: 300px; display: grid; gap: 12px; justify-items: center; }
.fx-spell__head { width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.fx-spell__head b { font-weight: var(--w-medium); }
.fx-spell__head .icon { width: 15px; height: 15px; color: var(--muted); }
.fx-spell__boxes { display: flex; gap: 4px; }
.fx-spell__boxes i { width: 22px; height: 30px; display: grid; place-items: center; border-radius: 5px; font-style: normal; font-size: 14px; font-weight: var(--w-semibold); background: var(--canvas); box-shadow: inset 0 0 0 1px var(--border-strong); }
.fx-spell__boxes .is-now { box-shadow: inset 0 0 0 1.5px var(--fx-blue), 0 0 10px var(--fx-blue-glow); }
.fx-spell small { font-size: 12px; color: var(--muted); }

.fx-url { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--border); color: var(--muted); width: calc(100% + 28px); margin-inline-end: -28px; }
.fx-url > .icon { width: 15px; height: 15px; flex: none; }
.fx-url__bar { flex: 1; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.fx-url__bar .icon { width: 14px; height: 14px; color: var(--highlight); }
.fx-url__bar b { color: var(--ink); font-variant-numeric: tabular-nums; }

.fx-chart { position: absolute; inset: 6px 0 0 -28px; padding: 20px 22px; border-radius: 0 12px 0 0; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--border); display: grid; grid-template-rows: auto auto 1fr; gap: 16px; }
.fx-chart__t { font-size: 20px; font-weight: var(--w-medium); padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.fx-chart__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fx-chart__stats span { display: block; font-size: 12px; color: var(--muted); }
.fx-chart__stats b { font-size: 20px; font-weight: var(--w-medium); }
.fx-chart__svg { width: 100%; height: 100%; min-height: 110px; overflow: visible; }
.fx-chart__area { fill: rgba(139, 92, 246, .12); }
.fx-chart__line { fill: none; stroke: #8b5cf6; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.fx-chart__line--b { stroke: var(--fx-blue); }
.fx-chart__tip { position: absolute; top: 46%; inset-inline-start: 42%; display: grid; gap: 4px; padding: 10px 12px; border-radius: 8px; background: var(--surface); box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-float); font-size: 12px; color: var(--ink-2); }
.fx-chart__tip b { font-size: 12.5px; color: var(--ink); font-weight: var(--w-medium); }
.fx-chart__tip span { display: flex; align-items: center; gap: 6px; }
.fx-chart__tip em { margin-inline-start: 18px; font-style: normal; color: var(--ink); }
.fx-chart__tip i { width: 7px; height: 7px; border-radius: 50%; }
.fx-chart__tip i.a { background: #8b5cf6; } .fx-chart__tip i.b { background: var(--fx-blue); }

.fx-steps { max-width: 280px; display: grid; gap: 6px; }
.fx-steps small { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.fx-steps p { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--border); font-size: 14px; color: var(--ink-2); }
.fx-steps p i { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px var(--faint); }
.fx-steps .is-done i { background: var(--ink); box-shadow: none; }
.fx-steps .is-now { box-shadow: inset 0 0 0 1.5px var(--highlight); color: var(--ink); }
.fx-steps .is-now i { background: var(--highlight); box-shadow: none; }
.fx-steps em { margin-inline-start: auto; font-style: normal; font-size: 11px; color: var(--gold-text); }

@media (max-width: 999px) {
  .fx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-cell--vocab, .fx-cell--days, .fx-cell--lesson { grid-column: span 1; }
  .fx-cell--score, .fx-cell--cms, .fx-cell--chart, .fx-cell--spell { grid-column: span 2; }
}
@media (max-width: 640px) {
  .fx-bento { grid-template-columns: 1fr; }
  .fx-cell { grid-column: auto !important; grid-row: auto !important; min-height: 280px; padding: 22px; }
  .fx-cms { grid-template-columns: 1fr; } .fx-cms__side { display: none; }
  .fx-row { grid-template-columns: 34px 1fr 64px; padding: 0 12px; }
  .fx-chart__stats { grid-template-columns: repeat(2, 1fr); }
  .fx-chart__tip { display: none; }
}

/* ==========================================================================
   Pricing
   ========================================================================== */
.fx-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .fx-plans { grid-template-columns: 1fr; } }
.fx-plan { display: grid; gap: 22px; align-content: start; padding: 28px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.fx-plan--now { box-shadow: inset 0 0 0 1px var(--border-strong), 0 40px 90px -50px rgba(242, 201, 76, .6); }
.fx-plan--later { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.fx-plan__name { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: var(--w-medium); }
.fx-plan__badge { font-size: 12px; padding: 2px 10px; border-radius: 6px; background: var(--highlight); color: var(--ink-dark); }
.fx-plan__price { display: flex; align-items: baseline; gap: 10px; }
.fx-plan__price b { font-size: 48px; line-height: 1.1; font-weight: var(--w-semibold); }
.fx-plan__price span { font-size: 14px; color: var(--muted); }
.fx-plan ul { display: grid; gap: 12px; }
.fx-plan li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); }
.fx-plan li .icon { width: 17px; height: 17px; flex: none; color: var(--ink); }
.fx-plan--later li { color: var(--muted); }
.fx-plan .fx-btn { justify-self: stretch; }

/* ==========================================================================
   FAQ: heading at the start, hairline accordion at the end
   ========================================================================== */
.fx-faqwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; align-items: start; }
@media (max-width: 860px) { .fx-faqwrap { grid-template-columns: 1fr; gap: 8px; } }
.fx-faq { border-top: 1px solid var(--border-strong); }
.fx-faq details { border-bottom: 1px solid var(--border-strong); }
.fx-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; font-size: 18px; font-weight: var(--w-medium); color: var(--ink); }
.fx-faq summary::-webkit-details-marker { display: none; }
.fx-faq summary:focus-visible { outline: 2px solid var(--fx-blue); outline-offset: 4px; border-radius: 6px; }
.fx-faq summary i { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--lilac); color: var(--ink); }
.fx-faq summary i .icon { width: 14px; height: 14px; transition: transform var(--dur) var(--ease-out); }
.fx-faq details[open] summary i .icon { transform: rotate(45deg); }
.fx-faq details p { padding: 0 0 22px; max-width: 44em; font-size: 16px; line-height: 1.85; color: var(--fx-60); }

/* ==========================================================================
   Closing prompt + footer
   ========================================================================== */
.fx-end { padding-top: 180px; }
.fx-end .fx-wrap { display: grid; justify-items: center; gap: 22px; text-align: center; }
.fx-prompt { width: min(560px, 100%); min-height: 150px; display: grid; grid-template-rows: 1fr auto; gap: 12px; padding: 16px; text-align: start; border-radius: 16px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); transition: box-shadow var(--dur) var(--ease); }
.fx-prompt:hover { box-shadow: inset 0 0 0 1px rgba(23, 25, 23, .22), 0 0 0 4px rgba(47, 140, 255, .12); }
.fx-prompt:focus-visible { outline: 2px solid var(--fx-blue); outline-offset: 3px; }
.fx-prompt__ph { font-size: 15px; color: var(--faint); }
.fx-prompt__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--border); }
.fx-prompt__foot small { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.fx-prompt__foot small .icon { width: 13px; height: 13px; }
.fx-prompt__send { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: var(--ink); color: var(--on-accent); }
.fx-prompt__send .icon { width: 15px; height: 15px; transform: rotate(-90deg); }
.fx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fx-chips a { padding: 6px 12px; border-radius: 8px; font-size: 13px; color: var(--ink-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); transition: background-color var(--dur-fast), color var(--dur-fast); }
.fx-chips a:hover { background: var(--lilac); color: var(--ink); }
.fx-quiet { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.fx-quiet .icon { width: 14px; height: 14px; }
.fx-quiet:hover { color: var(--ink); }

.fx-foot { margin-top: 180px; padding-bottom: 40px; }
.fx-foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 32px 24px; }
.fx-foot__cols div { display: grid; gap: 6px; align-content: start; }
.fx-foot__cols b { margin-bottom: 6px; font-size: 14px; font-weight: var(--w-medium); color: var(--ink); }
.fx-foot__cols a, .fx-foot__cols span { font-size: 14px; line-height: 1.9; color: var(--muted); }
.fx-foot__cols a:hover { color: var(--ink); }
.fx-foot__bar { margin-top: 64px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 12px; color: var(--faint); }
.fx-foot__bar p:last-child { margin-inline-start: auto; color: var(--muted); }
@media (max-width: 560px) { .fx-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fx-foot__bar p:last-child { margin-inline-start: 0; } }

/* ==========================================================================
   Pointer spotlight on cards (paint-only layer; landing.js sets --mx / --my)
   ========================================================================== */
.fx-card, .fx-plan { position: relative; isolation: isolate; }
:is(.fx-card, .fx-plan)::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, -300px), rgba(47, 140, 255, .06), transparent 60%); opacity: 0; transition: opacity .35s var(--ease); }
:is(.fx-card, .fx-plan):hover::before { opacity: 1; }

/* ==========================================================================
   Motion
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* the progress picture settles once it lands: ring, bars and tick fill (shapes only) */
  .pg-ring .fg { transition: stroke-dashoffset 1.4s var(--ease-framer) .3s; }
  .pg-score__track i { transition: transform 1.1s var(--ease-framer) .5s; }
  .pg-tasks svg path { transition: stroke-dashoffset .5s var(--ease-out) 1s; }
  :where(.lp-ready) .fx-prog:not(.is-in) .pg-ring .fg { stroke-dashoffset: 100; }
  :where(.lp-ready) .fx-prog:not(.is-in) .pg-score__track i { transform: scaleX(0); }
  :where(.lp-ready) .fx-prog:not(.is-in) .pg-tasks svg path { stroke-dashoffset: 1; }
  .pg-tasks .is-now i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--highlight); animation: pg-ping 1.8s var(--ease-out) infinite; }
  @keyframes pg-ping { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
  /* Framer's appear (opacity .001 → 1, spring .4s): a canvas-coloured cover fades off each block */
  .lp--framer.lp-ready .reveal::after {
    content: ""; position: absolute; z-index: 20; inset: -4px; pointer-events: none; border-radius: inherit; background: var(--canvas);
  }
  .lp--framer.lp-ready .reveal { position: relative; }
  .lp--framer.lp-ready .reveal.is-in::after { opacity: 0; visibility: hidden; transition: opacity .7s var(--ease-framer), visibility 0s linear .7s; }
  .lp--framer.lp-ready .fx-agents__cards .reveal:nth-child(even).is-in::after { transition-delay: .08s, .78s; }
  .lp--framer.lp-ready .fx-card.reveal::after { inset: 0; }

  /* the hero frame appears on load the same way */

  /* shapes that settle when their block lands */
  :where(.lp-ready) .reveal:not(.is-in) .fx-vital i::before { transform: scaleX(0); }
  .lp--framer .fx-bento .fx-chart__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease-framer) .2s; }
  :where(.lp-ready) .fx-bento:not(.is-in) .fx-chart__line { stroke-dashoffset: 1; }
  .lp--framer .fx-chart__tip { transition: translate .6s var(--ease-framer) 1.2s, scale .6s var(--ease-framer) 1.2s; }
  :where(.lp-ready) .fx-bento:not(.is-in) .fx-chart__tip { translate: 0 8px; scale: .96; }
  .fx-spell__boxes .is-now { animation: fx-caret 1.1s steps(1) infinite; }
  @keyframes fx-caret { 50% { box-shadow: inset 0 0 0 1px var(--border-strong); } }
}


/* ==========================================================================
   Bento cells come alive on hover (they are not links).
   Only shapes, English words and numbers move; the Arabic in each cell stays still.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  /* score: the bars refill one after another */
  .fx-cell--score:hover .fx-vital i::before { animation: fx-refill .9s var(--ease-framer) both; }
  .fx-cell--score:hover .fx-vital:nth-child(3) i::before { animation-delay: .08s; }
  .fx-cell--score:hover .fx-vital:nth-child(4) i::before { animation-delay: .16s; }
  @keyframes fx-refill { from { transform: scaleX(0); } }

  /* grammar: the current unit pulses, the finished ones pop */
  .fx-cell--cms:hover .fx-row.is-on { animation: fx-row-pulse 1.4s ease-in-out infinite; }
  @keyframes fx-row-pulse { 50% { box-shadow: inset 0 0 0 1.5px var(--fx-blue), 0 0 0 4px rgba(47, 140, 255, .14); } }
  .fx-cell--cms:hover .fx-row .is-done { animation: fx-pop .45s var(--ease-spring) both; }
  .fx-cell--cms:hover .fx-row:nth-child(4) .is-done { animation-delay: .1s; }
  @keyframes fx-pop { from { transform: scale(.6); } }

  /* vocabulary: the word gets highlighted, the speaker pings, the list slides in */
  .fx-word__card mark { background: linear-gradient(var(--highlight), var(--highlight)) no-repeat 0 0 / 100% 100%; }
  .fx-cell--vocab:hover .fx-word__card mark { animation: fx-mark .7s var(--ease-framer) both; }
  @keyframes fx-mark { from { background-size: 0% 100%; } }
  .fx-word__play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--fx-blue); opacity: 0; }
  .fx-cell--vocab:hover .fx-word__play::after { animation: fx-ping 1.2s var(--ease-out) infinite; }
  @keyframes fx-ping { from { transform: scale(.9); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
  .fx-cell--vocab:hover .fx-word__list span { animation: fx-slide .5s var(--ease-framer) both; }
  .fx-cell--vocab:hover .fx-word__list span:nth-child(2) { animation-delay: .07s; }
  .fx-cell--vocab:hover .fx-word__list span:nth-child(3) { animation-delay: .14s; }
  @keyframes fx-slide { from { transform: translateX(-14px); opacity: 0; } }

  /* countdown: the glow and the number swell */
  .fx-cell--days::before { transition: scale .8s var(--ease-framer), opacity .8s; }
  .fx-cell--days:hover::before { scale: 1.35; }
  .fx-days b { transition: scale .6s var(--ease-spring); }
  .fx-cell--days:hover .fx-days b { scale: 1.08; }

  /* spelling: the letters ripple and the missing one is typed in */
  .fx-cell--spell:hover .fx-spell__boxes i { animation: fx-wave .6s var(--ease-out) both; animation-delay: calc(var(--n, 0) * 45ms); }
  .fx-spell__boxes i:nth-child(1) { --n: 0; } .fx-spell__boxes i:nth-child(2) { --n: 1; } .fx-spell__boxes i:nth-child(3) { --n: 2; }
  .fx-spell__boxes i:nth-child(4) { --n: 3; } .fx-spell__boxes i:nth-child(5) { --n: 4; } .fx-spell__boxes i:nth-child(6) { --n: 5; }
  .fx-spell__boxes i:nth-child(7) { --n: 6; } .fx-spell__boxes i:nth-child(8) { --n: 7; } .fx-spell__boxes i:nth-child(9) { --n: 8; }
  .fx-spell__boxes i:nth-child(10) { --n: 9; } .fx-spell__boxes i:nth-child(11) { --n: 10; }
  @keyframes fx-wave { 40% { transform: translateY(-6px); } }
  .fx-spell__boxes .is-now::after { content: "o"; opacity: 0; transition: opacity .2s; }
  .fx-cell--spell:hover .fx-spell__boxes .is-now { animation: fx-wave .6s var(--ease-out) both; animation-delay: .14s; box-shadow: inset 0 0 0 1.5px var(--ok-text); }
  .fx-cell--spell:hover .fx-spell__boxes .is-now::after { opacity: 1; transition-delay: .55s; }

  /* progress: both lines redraw, the area fills in */
  .fx-cell--chart:hover .fx-chart__line { animation: fx-draw 1.4s var(--ease-framer) both; }
  .fx-cell--chart:hover .fx-chart__line--b { animation-delay: .15s; }
  @keyframes fx-draw { from { stroke-dashoffset: 1; } }
  .fx-cell--chart:hover .fx-chart__area { animation: fx-fade .9s ease both .3s; }
  @keyframes fx-fade { from { opacity: 0; } }

  /* lesson steps: the dots pop in order */
  .fx-cell--lesson:hover .fx-steps p i { animation: fx-pop .45s var(--ease-spring) both; }
  .fx-cell--lesson:hover .fx-steps p:nth-of-type(2) i { animation-delay: .08s; }
  .fx-cell--lesson:hover .fx-steps p:nth-of-type(3) i { animation-delay: .16s; }
  .fx-cell--lesson:hover .fx-steps p:nth-of-type(4) i { animation-delay: .24s; }
  .fx-cell--lesson:hover .fx-steps p:nth-of-type(5) i { animation-delay: .32s; }
}