/* ═══════════════════════════════════════════════════════════════
   EditFast AI — everything the site says about the AI Editor.

   One file for all of it (the home page's launch section, the plan
   cards' credit chips, the pack beside a plan at checkout, the
   "no usage limit" line, the credits page) so the feature can be
   read, changed or taken out in one place.

   The AI Editor's parts of a page are in the markup from the start
   and hidden here until the server marks the page with
   <html data-ai="on"> — decided before the first paint, so nothing
   jumps into place a moment after the page appears.

   Colour: the site's aqua and pink, with a violet between them and
   amber at the far end. The rest of the site is deliberately two
   colours; this is the one part that is allowed to be all of them,
   because it is the one thing that is new.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ai-a: #2FD9BE;   /* aqua — the brand */
  --ai-e: #6FC3F0;   /* sky */
  --ai-b: #8B7CF6;   /* violet */
  --ai-c: #E07AB0;   /* pink — the brand's, lifted */
  --ai-d: #F2B24C;   /* amber */
  --ai-grad: linear-gradient(100deg, var(--ai-a), var(--ai-e) 26%, var(--ai-b) 52%, var(--ai-c) 76%, var(--ai-d));
  /* The same run, dark enough for white text on it (5:1 or better
     at every stop), for buttons. */
  --ai-ink: linear-gradient(100deg, #0F7A68, #4F46C8 55%, #A43C77);
}

html:not([data-ai="on"]) .ai-only { display: none !important; }

@keyframes aiFlow  { to { background-position: 200% 0; } }
@keyframes aiSpin  { to { transform: rotate(360deg); } }
@keyframes aiPulse { 50% { transform: scale(1.12); opacity: .7; } }
@keyframes aiBlink { 50% { opacity: 0; } }
@keyframes aiRise  { from { opacity: 0; transform: translateY(6px); } }

/* ═══════════════════════════ EditFast AI, under the headline ═══
   The owner's word (2026-09-30): the AI had taken the headline's
   place — it belongs under the headline, and smaller. So: one card
   inside the hero, the words on one side and the typing box on the
   other, a card's height rather than a screen's. */

.aib {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; align-items: center;
  margin-top: 44px; padding: 22px 24px;
  border-radius: var(--r-big);
  border: 1px solid rgba(139,124,246,.28);
  background:
    radial-gradient(460px 200px at 100% 0%, rgba(47,217,190,.10), transparent 70%),
    radial-gradient(460px 220px at 0% 100%, rgba(139,124,246,.15), transparent 70%),
    var(--bg-100);
}
/* a line of the AI colours along the top edge, flowing */
.aib::before {
  content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: var(--ai-grad); background-size: 200% 100%; animation: aiFlow 6s linear infinite;
}
html[data-ai="on"] .aib + .readout { margin-top: 38px; }

.aib-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 8px; }
.aib-new {
  font-size: 12.5px; font-weight: 700; color: #0B0A0E;
  background: var(--ai-grad); background-size: 200% 100%;
  padding: 3px 11px; border-radius: var(--r-pill);
  animation: aiFlow 6s linear infinite;
}
.aib-title {
  margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -.035em; line-height: 1.2;
}
.aib-title .ltr {
  direction: ltr; unicode-bidi: isolate;
  background: var(--ai-grad); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: aiFlow 9s linear infinite;
}
.aib-n {
  font-size: 13px; color: var(--tx-3);
  padding: 2px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-lift);
}
.aib-n .num { color: var(--tx-2); font-weight: 700; }

.aib-lede { margin: 0 0 14px; font-size: 16px; line-height: 1.85; color: var(--tx-2); max-width: 62ch; }
.aib-lede b { color: var(--tx); font-weight: 600; }

.aib-can { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.aib-can li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; color: var(--tx);
  padding: 5px 12px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.035); border: 1px solid var(--line-lift);
}
.aib-can li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: var(--c, var(--ai-a)); box-shadow: 0 0 9px var(--c, var(--ai-a));
}
.aib-can li:nth-child(2) { --c: var(--ai-e); }
.aib-can li:nth-child(3) { --c: var(--ai-b); }
.aib-can li:nth-child(4) { --c: var(--ai-c); }
.aib-can li:nth-child(5) { --c: var(--ai-d); }

.aib-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.btn.aih-cta {
  border: 0; color: #fff;
  background: var(--ai-ink); background-size: 160% 100%;
  box-shadow: 0 12px 34px -12px rgba(139,124,246,.75), 0 0 0 1px rgba(255,255,255,.08) inset;
  transition: background-position .5s var(--ease), transform .25s var(--spring), box-shadow .3s var(--ease);
}
.btn.aih-cta:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(224,122,176,.7), 0 0 0 1px rgba(255,255,255,.12) inset; }

.aih-gift { font-size: 14px; color: var(--tx-2); line-height: 1.7; }
.aih-gift b { font-family: var(--num); font-weight: 700; color: var(--ai-d); }
/* the short plans' first-subscription welcome, on a line of its own */
.aih-wel { display: block; }
.aih-wel[hidden] { display: none; }

/* ── the typing box ────────────────────────────────────── */

.aih-chat {
  position: relative;
  padding: 13px; border-radius: 18px;
  background: rgba(15,14,20,.78);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 24px 60px -34px rgba(0,0,0,.95), 0 18px 60px -34px rgba(139,124,246,.55);
}
.aih-chat::before {                     /* a line of colour along the top edge */
  content: ''; position: absolute; top: -1px; left: 18px; right: 18px; height: 1px;
  background: var(--ai-grad); background-size: 200% 100%; animation: aiFlow 6s linear infinite;
}

.aih-chat-hd { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tx-2); margin-bottom: 8px; }
.aih-chat-hd .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ai-a); box-shadow: 0 0 10px var(--ai-a); }
.aih-chat-hd .ltr { direction: ltr; unicode-bidi: isolate; font-weight: 600; color: var(--tx); }
.aih-chat-st { margin-inline-start: auto; font-size: 12px; color: var(--tx-3); display: inline-flex; align-items: center; gap: 6px; }
.aih-chat-st.busy::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid rgba(139,124,246,.35); border-top-color: var(--ai-b);
  animation: aiSpin .8s linear infinite;
}

/* Newest at the bottom, the way a chat reads; what does not fit
   leaves by the top. */
.aih-log {
  height: 150px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 5px;
}

.aih-hi {
  align-self: flex-start; max-width: 92%;
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.7; color: var(--tx-2);
  padding: 8px 11px; border-radius: 14px; border-start-start-radius: 4px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  animation: aiRise .35s var(--ease);
}
.aih-hi i { font-style: normal; color: var(--ai-d); flex: 0 0 auto; }

.aih-me {
  align-self: flex-end; max-width: 88%;
  padding: 8px 12px; border-radius: 14px; border-end-end-radius: 4px;
  font-size: 13.8px; line-height: 1.7; color: #fff;
  background: linear-gradient(120deg, rgba(47,217,190,.26), rgba(139,124,246,.30));
  border: 1px solid rgba(139,124,246,.3);
  animation: aiRise .35s var(--ease);
}

.aih-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.aih-steps li {
  display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--tx-2);
  animation: aiRise .3s var(--ease);
}
.aih-steps li i {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid rgba(139,124,246,.3); border-top-color: var(--ai-b);
  animation: aiSpin .8s linear infinite;
}
.aih-steps li.ok i {
  border: 0; animation: none;
  background: linear-gradient(135deg, var(--ai-a), var(--ai-b));
}
.aih-steps li.ok i::after {
  content: ''; width: 8px; height: 4px; margin-top: -2px;
  border-left: 2px solid #0B0A0E; border-bottom: 2px solid #0B0A0E; transform: rotate(-45deg);
}
.aih-steps li.ok { color: var(--tx); }
.aih-done {
  margin-top: 6px; font-size: 13.5px; font-weight: 600;
  background: var(--ai-grad); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: aiRise .35s var(--ease), aiFlow 6s linear infinite;
}

.aih-input {
  margin-top: 10px; display: flex; align-items: flex-end; gap: 8px;
  padding: 9px 9px 9px 12px; padding-inline: 12px 9px;
  border-radius: 14px; min-height: 50px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.09);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.aih-input.typing { border-color: rgba(139,124,246,.5); box-shadow: 0 0 0 3px rgba(139,124,246,.12); }
.aih-typed { flex: 1 1 auto; min-width: 0; font-size: 14.5px; line-height: 1.65; color: var(--tx); padding: 3px 0; }
.aih-ph { color: var(--tx-4); }
.aih-caret {
  display: inline-block; width: 2px; height: 1.05em; margin-inline-start: 2px;
  vertical-align: -.16em; background: var(--ai-a); animation: aiBlink 1s steps(1) infinite;
}
.aih-send {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; color: #0B0A0E;
  background: var(--ai-grad); background-size: 200% 100%;
  transition: transform .2s var(--spring);
}
.aih-send svg { width: 17px; height: 17px; }
[dir="rtl"] .aih-send svg { transform: scaleX(-1); }
.aih-send.go { transform: scale(.82); }

/* ── sizes ─────────────────────────────────────────────── */

/* One column: the words, then the box — a card's height on a phone. */
@media (max-width: 880px) {
  .aib { grid-template-columns: 1fr; gap: 18px; padding: 20px 18px; }
  .aih-log { height: 136px; }
}
/* On a phone the card stays a card: the words and the button, without
   the typing box (it would double the card's height). */
@media (max-width: 620px) {
  .aib .aih-chat { display: none; }
}
@media (max-width: 520px) {
  .aib-title { font-size: 24px; }
  .aib-lede { font-size: 15px; }
  .aib-can li { font-size: 12.5px; padding: 4px 10px; }
  .aib-can li:nth-child(n+4) { display: none; }
  /* colour grading is new: it stays, first */
  .aib-can li.aib-fresh { display: inline-flex; order: -1; }
}

/* ══════════════════════════════════ the 16th tool's card ═══
   EditFast AI is first in the panel, so it is first in the grid —
   across the whole row, the drawing beside the words, so the fifteen
   after it still fill their rows. Not behind the switch: it is a tool
   of the plugin like the others. */
.tool.tool-ai {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: center;
  border-color: rgba(139,124,246,.3);
  background:
    radial-gradient(520px 200px at 0% 100%, rgba(139,124,246,.10), transparent 70%),
    linear-gradient(168deg, var(--bg-100), var(--bg-050));
}
.tool.tool-ai .tool-art { margin: 16px; height: 150px; }
.tool.tool-ai .tool-body { padding: 18px 22px 20px 8px; }
[dir="ltr"] .tool.tool-ai .tool-body { padding: 18px 8px 20px 22px; }
.tool.tool-ai h3 .ltr { direction: ltr; unicode-bidi: isolate; }
.tool.tool-ai:hover { border-color: rgba(139,124,246,.5); box-shadow: var(--sink), 0 0 46px -26px rgba(139,124,246,.7); }
@media (max-width: 760px) {
  .tool.tool-ai { grid-template-columns: 1fr; }
  .tool.tool-ai .tool-art { margin: 16px 16px 0; height: 132px; }
  .tool.tool-ai .tool-body, [dir="ltr"] .tool.tool-ai .tool-body { padding: 16px 20px 22px; }
}

/* ═════════════════════════════ credits on the plan cards ═══ */

/* The home page's price cards (drawn by js/site.js). */
.term-ai {
  display: flex; width: fit-content; align-items: center; gap: 6px; margin-top: 7px;
  font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.5;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: linear-gradient(100deg, rgba(47,217,190,.2), rgba(139,124,246,.3), rgba(224,122,176,.24));
  border: 1px solid rgba(139,124,246,.38);
}
.term-ai i { font-style: normal; color: var(--ai-d); }
.term-ai b { font-family: var(--num); font-weight: 700; }

/* The payment page's term buttons. Its rules style every span in the
   button as the price, so this one says otherwise. */
.term-opt .ai-gift {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 5px;
  font-style: normal; font-size: 12px; font-weight: 600; color: #fff; line-height: 1.5;
  padding: 2px 9px; border-radius: var(--r-pill);
  background: linear-gradient(100deg, rgba(47,217,190,.2), rgba(139,124,246,.3), rgba(224,122,176,.24));
  border: 1px solid rgba(139,124,246,.38);
}
.term-opt .ai-gift i { font-style: normal; color: var(--ai-d); }
.term-opt .ai-gift span,
.term-opt.on .ai-gift span { font-family: var(--ff); font-size: 12px; font-weight: 600; color: inherit; letter-spacing: 0; }
.term-opt .ai-gift b { font-family: var(--num); font-weight: 700; }

/* ═════════════════════════════════ "no usage limit" ═══ */

.nolimit {
  display: flex; align-items: center; gap: 14px;
  margin: -8px 0 20px; padding: 13px 18px; border-radius: var(--r-card);
  background: radial-gradient(420px 120px at 100% 0%, rgba(74,222,110,.1), transparent 70%), var(--bg-100);
  border: 1px solid rgba(74,222,110,.3);
}
.nolimit-ic { flex: 0 0 auto; width: 50px; height: 30px; display: grid; place-items: center; color: var(--ok); }
.nolimit-ic svg { width: 46px; height: 23px; overflow: visible; }
/* A light running round the loop, for ever — which is the point. */
.nolimit-ic svg path { stroke-dasharray: 26 74; stroke-dashoffset: 0; animation: nlRun 3.6s linear infinite; }
.nolimit-ic svg path.base { stroke-dasharray: none; opacity: .28; animation: none; }
@keyframes nlRun { to { stroke-dashoffset: -100; } }
.nolimit-tx b { display: block; font-size: 16.5px; font-weight: 700; color: var(--tx); line-height: 1.5; }
.nolimit-tx small { display: block; font-size: 13.5px; color: var(--tx-3); line-height: 1.6; }

/* ═══════════════════════════ the pack beside a plan ═══ */

.ai-addon { margin-top: 16px; }

/* the bigger packs, once the switch is on (2026-10-10) */
/* the line over the packs (2026-10-10: shown from the start) */
.ai-packs-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--tx); }
.ai-packs-hd b { color: var(--ai-d); }
.ai-packs-hd small { font-size: 12.5px; font-weight: 500; color: var(--tx-3); }
.ai-packs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; animation: aiPacksIn .35s var(--ease); }
@keyframes aiPacksIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ai-pack {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px 9px; border-radius: 12px; cursor: pointer; font: inherit; color: inherit;
  border: 1px solid var(--line-lift); background: var(--bg-100);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--spring);
}
.ai-pack:hover { border-color: rgba(139,124,246,.55); transform: translateY(-1px); }
.ai-pack b { font-size: 16px; font-weight: 700; color: var(--tx); }
.ai-pack small { font-size: 11.5px; color: var(--tx-3); white-space: nowrap; }
.ai-pack i {
  position: absolute; top: -8px; inset-inline-end: 6px; padding: 0 6px; border-radius: var(--r-pill);
  font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 17px; color: #fff; direction: ltr; unicode-bidi: isolate;
  background: linear-gradient(135deg, var(--ai-a), var(--ai-c));
}
.ai-pack.on { border-color: transparent; background: linear-gradient(var(--bg-100), var(--bg-100)) padding-box, linear-gradient(100deg, var(--ai-a), var(--ai-b), var(--ai-c)) border-box; box-shadow: 0 8px 22px -14px rgba(139,124,246,.9); }
.ai-pack.on b { color: var(--ai-d); }
@media (max-width: 520px) {
  .ai-packs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
}

.ai-addon-btn {
  position: relative; width: 100%;
  display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: "ic tx pr sw";
  align-items: center; gap: 12px 13px;
  padding: 13px 14px; border-radius: var(--r-card);
  font: inherit; color: inherit; text-align: start; cursor: pointer;
  border: 1px solid var(--line-lift); background: var(--bg-100);
  transition: border-color .25s var(--ease), box-shadow .35s var(--ease), transform .25s var(--spring);
}
.ai-addon-btn:hover { border-color: rgba(139,124,246,.55); transform: translateY(-1px); }
.ai-addon-btn:focus-visible { outline: 2px solid var(--ai-b); outline-offset: 3px; }

.ai-addon.on .ai-addon-btn {
  border-color: transparent;
  background:
    linear-gradient(var(--bg-100), var(--bg-100)) padding-box,
    linear-gradient(100deg, var(--ai-a), var(--ai-b), var(--ai-c), var(--ai-a)) border-box;
  background-size: 100% 100%, 200% 100%;
  box-shadow: 0 12px 32px -16px rgba(139,124,246,.8);
  animation: aiBorder 4s linear infinite;
}
@keyframes aiBorder { to { background-position: 0 0, 200% 0; } }

.ai-addon-ic {
  grid-area: ic; position: relative;
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  color: var(--ai-b); background: rgba(139,124,246,.13);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.ai-addon-ic svg { width: 21px; height: 21px; transition: transform .6s var(--spring); }
.ai-addon.on .ai-addon-ic {
  color: #fff;
  background: linear-gradient(135deg, var(--ai-a), var(--ai-b) 55%, var(--ai-c));
  box-shadow: 0 6px 18px -6px rgba(139,124,246,.9);
}
.ai-addon.on .ai-addon-ic svg { transform: rotate(180deg) scale(1.08); }

/* The burst: four sparks out from the icon when it is switched on. */
.ai-addon-ic .spark {
  position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; opacity: 0; pointer-events: none;
}
.ai-addon-ic .s1 { background: var(--ai-a); --x: -22px; --y: -18px; }
.ai-addon-ic .s2 { background: var(--ai-d); --x: 22px;  --y: -16px; }
.ai-addon-ic .s3 { background: var(--ai-c); --x: -18px; --y: 20px; }
.ai-addon-ic .s4 { background: var(--ai-e); --x: 20px;  --y: 19px; }
.ai-addon.pop .spark { animation: aiSpark .7s var(--ease) forwards; }
@keyframes aiSpark {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.4); }
}

.ai-addon-tx { grid-area: tx; min-width: 0; }
.ai-addon-tx b { display: block; font-size: 15px; font-weight: 600; line-height: 1.55; }
.ai-addon-tx b .num { font-family: var(--num); }
.ai-addon-tx small { display: block; font-size: 13px; color: var(--tx-3); line-height: 1.6; margin-top: 1px; }

.ai-addon-price { grid-area: pr; font-size: 13px; color: var(--tx-3); white-space: nowrap; }
.ai-addon-price b { font-family: var(--num); font-size: 17px; font-weight: 700; color: var(--tx-2); transition: color .3s var(--ease); }
.ai-addon.on .ai-addon-price b { color: var(--ai-d); }

.ai-switch {
  grid-area: sw; position: relative; flex: 0 0 auto;
  width: 44px; height: 26px; border-radius: var(--r-pill);
  background: var(--line-lift); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  transition: background .3s var(--ease);
}
.ai-switch i {
  position: absolute; top: 3px; inset-inline-start: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
  transition: transform .35s var(--spring);
}
.ai-addon.on .ai-switch { background: linear-gradient(100deg, var(--ai-a), var(--ai-b)); }
.ai-addon.on .ai-switch i { transform: translateX(18px); }
[dir="rtl"] .ai-addon.on .ai-switch i { transform: translateX(-18px); }

.ai-addon-sum {
  margin-top: 8px; padding-inline-start: 4px;
  font-size: 13.5px; color: var(--tx-3); animation: aiRise .3s var(--ease);
}
.ai-addon-sum b { font-family: var(--num); color: var(--tx-2); }
.ai-addon-sum b.tot { color: var(--red-soft); font-size: 15px; }

@media (max-width: 520px) {
  .ai-addon-btn { grid-template-columns: auto 1fr auto; grid-template-areas: "ic tx sw" "ic pr sw"; row-gap: 2px; }
  .ai-addon-price { justify-self: start; }
}

/* ═════════════════════════════════════ the credits page ═══ */

.cr-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
  padding: 22px; border-radius: var(--r-big); margin-bottom: 18px;
  border: 1px solid rgba(139,124,246,.3);
  background:
    radial-gradient(420px 180px at 100% 0%, rgba(47,217,190,.14), transparent 70%),
    radial-gradient(380px 180px at 0% 100%, rgba(139,124,246,.18), transparent 70%),
    var(--bg-100);
}
.cr-core {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
}
.cr-core::before {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--ai-a), var(--ai-e), var(--ai-b), var(--ai-c), var(--ai-d), var(--ai-a));
  animation: aiSpin 5s linear infinite;
}
.cr-core span {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #221F33, #0B0A10 72%);
  font-family: var(--num); font-weight: 700; font-size: 20px;
}
.cr-core span b {
  background: var(--ai-grad); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: aiFlow 5s linear infinite;
}
.cr-hero h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.cr-hero h2 .ltr { direction: ltr; unicode-bidi: isolate; }
.cr-hero p { margin: 3px 0 0; font-size: 14px; color: var(--tx-3); line-height: 1.75; }
.cr-left { text-align: center; }
.cr-left b {
  display: block; font-family: var(--num); font-size: 38px; font-weight: 700; line-height: 1.05; letter-spacing: -.03em;
  background: var(--ai-grad); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: aiFlow 7s linear infinite;
}
.cr-left small { font-size: 12.5px; color: var(--tx-3); }

.cr-notes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
/* a block, not a flex row: as flex items the bold words became columns of their own */
.cr-notes li { position: relative; padding-inline-start: 16px; font-size: 14px; color: var(--tx-2); line-height: 1.7; }
.cr-notes li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c, var(--ai-a)); box-shadow: 0 0 8px var(--c, var(--ai-a));
}
.cr-notes li:nth-child(2) { --c: var(--ai-b); }
.cr-notes li:nth-child(3) { --c: var(--ai-c); }

@media (max-width: 620px) {
  .cr-hero { grid-template-columns: auto 1fr; }
  .cr-left { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
}

/* ── the packs ─────────────────────────────────────────────────
   His ask (2026-10-07): «كل باقه اما بتكبر بتنور اكتر». One number per
   card, --g, from 0 (the single pack) to 1 (the biggest), and everything
   that shines is scaled by it: the light inside, the shadow round it, the
   AI colours turning along the rim, the glint passing over it, the glow
   on the number. The single pack is a plain card; the biggest is lit. */

@property --cr-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes crTurn  { to { --cr-ang: 360deg; } }
@keyframes crGlint { 0%, 55% { background-position: 160% 0; } 100% { background-position: -60% 0; } }

.cr-tiers {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  padding: 4px 2px 2px;
}
.cr-tier {
  --g: 0;
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 186px; padding: 42px 12px 18px;
  border-radius: 18px; border: 1px solid var(--line-lift);
  background:
    radial-gradient(130% 85% at 50% -10%, rgba(139,124,246, calc(var(--g) * .48)), transparent 68%),
    radial-gradient(90% 70% at 0% 110%, rgba(47,217,190, calc(var(--g) * .30)), transparent 70%),
    radial-gradient(80% 60% at 100% 110%, rgba(224,122,176, calc(var(--g) * .24)), transparent 70%),
    var(--bg-100);
  box-shadow:
    0 0 calc(var(--g) * 60px) rgba(139,124,246, calc(var(--g) * .55)),
    0 0 calc(var(--g) * 22px) rgba(47,217,190, calc(var(--g) * .32)),
    0 10px 26px rgba(0,0,0,.32);
  color: var(--tx); font: inherit; cursor: pointer;
  transition: transform .3s var(--spring), box-shadow .3s var(--ease), border-color .2s var(--ease);
}
/* the rim: the AI colours, turning — invisible on the single pack, whole on the biggest */
.cr-tier::before {
  content: ''; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
  border-radius: inherit; padding: calc(1px + var(--g) * 1.5px);
  background: conic-gradient(from var(--cr-ang), var(--ai-a), var(--ai-e), var(--ai-b), var(--ai-c), var(--ai-d), var(--ai-a));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  /* none on the single pack, then .4 → 1 */
  opacity: min(var(--g) * 1000, .2 + var(--g) * .8);
  animation: crTurn 7s linear infinite;
}
/* a glint passing over now and then, as bright as the pack is big */
.cr-tier::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255, calc(var(--g) * .13)) 50%, transparent 62%);
  background-size: 260% 100%; background-repeat: no-repeat;
  animation: crGlint 6s var(--ease) infinite;
}
.cr-tier:hover { transform: translateY(-3px); }
.cr-tier:focus-visible { outline: 2px solid var(--ai-e); outline-offset: 3px; }

.cr-tier-n {
  font-family: var(--num); font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.03em;
  text-shadow: 0 0 calc(var(--g) * 26px) rgba(139,124,246, calc(var(--g) * .9));
}
/* the two biggest carry the AI colours in the number itself */
.cr-tier.hot .cr-tier-n {
  background: var(--ai-grad); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 calc(var(--g) * 12px) rgba(139,124,246,.7));
  animation: aiFlow 6s linear infinite;
}
.cr-tier-u { margin-top: 4px; font-size: 12.5px; color: var(--tx-3); }

.cr-tier-price {
  display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 3px 6px;
  margin-top: 14px; padding-top: 12px; width: 100%;
  border-top: 1px solid rgba(255,255,255, calc(.05 + var(--g) * .05));
}
.cr-tier-price b { font-family: var(--num); font-size: 19px; font-weight: 700; color: var(--tx); }
.cr-tier-price i { font-style: normal; font-size: 12.5px; color: var(--tx-2); }
.cr-tier-was { font-size: 13px; color: var(--tx-4); text-decoration-thickness: 1.5px; }
.cr-tier-sub { display: block; margin-top: 4px; font-size: 12px; color: var(--tx-3); }

.cr-tier-off {
  position: absolute; top: 10px; inset-inline-end: 10px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap;
  background: var(--ai-ink);
  box-shadow: 0 0 calc(4px + var(--g) * 12px) rgba(139,124,246, calc(.2 + var(--g) * .4));
}

/* picked: lifted, ringed in the brand's aqua, a tick in the corner — its
   own mark, apart from the shine, so the single pack picked never looks
   bigger than it is */
.cr-tier-tick {
  position: absolute; top: 10px; inset-inline-start: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--line-lift); background: var(--bg-000);
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .3s var(--spring);
}
.cr-tier.on { transform: translateY(-3px); outline: 2px solid var(--ai-a); outline-offset: 3px; }
.cr-tier.on .cr-tier-tick {
  border-color: transparent; transform: scale(1.08);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    linear-gradient(135deg, var(--ai-a), var(--ai-b));
}

/* another amount: an open card, the stepper opens under the cards */
.cr-tier-own { border-style: dashed; background: var(--bg-050); box-shadow: none; }
.cr-tier-own::before, .cr-tier-own::after { display: none; }
.cr-tier-own.on { border-style: solid; }
.cr-own-plus {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-lift); background: var(--bg-100);
  font-family: var(--num); font-size: 22px; line-height: 1; color: var(--tx-2);
}
.cr-own-t { margin-top: 10px; font-size: 15px; font-weight: 600; }

#customBox { animation: aiRise .3s var(--ease); }
.cr-swap {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; text-align: center;
  font-size: 13.5px; color: var(--tx-2);
  background: rgba(139,124,246,.08); border: 1px solid rgba(139,124,246,.22);
}
.cr-swap b { font-family: var(--num); color: var(--tx); }
.cr-swap-go {
  margin-inline-start: 6px; padding: 3px 12px; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: var(--ai-ink);
}

@media (max-width: 620px) {
  .cr-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cr-tier { min-height: 166px; padding: 44px 8px 14px; }
  .cr-tier-off { top: 9px; inset-inline-end: 9px; padding: 3px 8px; font-size: 11.5px; }
  .cr-tier-tick { top: 11px; inset-inline-start: 11px; width: 18px; height: 18px; }
  .cr-tier-n { font-size: 29px; }
  .cr-tier-price b { font-size: 17px; }
}

/* ═══════════════════ "what is unlimited", as a sum ═══
   The plan's contents as lines that add up (home pricing, and short on
   the payment page): the fifteen tools and everything else unlimited, the
   one line on credits last and in the AI's own colour — said as a gift,
   never as a limit. */

.tally {
  padding: 18px 20px 16px; border-radius: var(--r-card);
  background: radial-gradient(520px 160px at 100% 0%, rgba(74,222,110,.08), transparent 70%), var(--bg-100);
  border: 1px solid var(--line-lift);
}
.tally-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tally-hd b { font-size: 17px; font-weight: 800; color: var(--tx); }
.tally-inf {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 700 19px/1 var(--num); color: var(--ok); background: rgba(74,222,110,.12);
}
.tally-rows { list-style: none; margin: 0; padding: 0; }
.tally-rows li {
  display: flex; align-items: baseline; gap: 10px; padding: 10px 0;
  border-bottom: 1px dashed rgba(255,255,255,.07); font-size: 15px; color: var(--tx-2); line-height: 1.6;
}
.tally-rows .op { flex: 0 0 16px; text-align: center; font: 700 16px/1 var(--num); color: var(--tx-3); }
.tally-rows .tl { flex: 1 1 auto; min-width: 0; }
.tally-rows .tl small { font-size: 13px; color: var(--tx-3); }
.tally-rows .tv { flex: 0 0 auto; white-space: nowrap; font-weight: 700; font-size: 14px; color: var(--tx); }
.tally-rows .tv.ok { color: var(--ok); }
.tally-rows li.ai { border-bottom: 0; }
.tally-rows li.ai .tl { color: var(--tx); font-weight: 600; }
.tally-rows li.ai .tv { color: var(--ai-d); }
.tally-line { height: 2px; margin: 4px 0 12px; border-radius: 2px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.28)); }
.tally-sum { display: flex; gap: 10px; align-items: baseline; }
.tally-sum .op { flex: 0 0 16px; text-align: center; font: 800 20px/1 var(--num); color: var(--ok); }
.tally-sum b { display: block; font-size: 16px; font-weight: 800; color: var(--tx); line-height: 1.6; }
.tally-sum small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--tx-2); line-height: 1.7; }

/* short, under the payment page's "no limit" line */
.tally-sm { margin: -10px 0 20px; padding: 10px 18px 12px; }
.tally-sm .tally-rows li { padding: 8px 0; font-size: 14px; }
.tally-sm .tally-sum b { font-size: 14.5px; font-weight: 700; }

@media (max-width: 520px) {
  .tally { padding: 14px 14px 12px; }
  .tally-rows li { flex-wrap: wrap; row-gap: 2px; }
  .tally-rows .tl { flex-basis: calc(100% - 26px); }
  .tally-rows .tv { margin-inline-start: 26px; }
}

/* Under the credits on every plan: what they are not for (2026-10-03). */
.term-free, .term-opt .ai-free {
  display: block; margin-top: 3px; font-family: var(--ff); font-style: normal;
  font-size: 10.5px; font-weight: 500; line-height: 1.4; color: var(--ok); letter-spacing: 0;
}
/* Home cards: the credits under the name and the price, across the card. */
.term-ai-row { grid-column: 1 / -1; margin-top: -6px; }
.term-ai-row .term-ai { margin-top: 0; }

/* ═══════════════════ the home page, more about the AI (2026-10-10) ═══
   His word: «16 أداة + مونتير احترافي بالـ AI», more said about the AI and
   more motion, a gallery of what it really made, and his four answers about
   credits as a chat above the plans. Without the AI on the site, the page
   is what it was (.no-ai). */

html[data-ai="on"] .no-ai { display: none !important; }

/* the headline's second line */
.h1-ai {
  display: block; font-size: .8em; line-height: 1.3; padding-block: .14em; margin-top: .02em;
  background: var(--ai-grad); background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: aiFlow 7s linear infinite;
}
.h1-plus {
  display: inline-block; margin-inline-end: .12em; font-weight: 800;
  -webkit-text-fill-color: var(--ai-a); color: var(--ai-a);
  text-shadow: 0 0 26px rgba(47,217,190,.55);
  animation: aiPlus 3.2s var(--ease) infinite;
}
@keyframes aiPlus { 0%, 70%, 100% { transform: rotate(0) scale(1); } 80% { transform: rotate(90deg) scale(1.18); } }
.h1-ai-b { white-space: nowrap; }

/* "see what it made", with a pulse */
.btn.hero-watch { border-color: rgba(139,124,246,.45); }
.btn.hero-watch:hover { border-color: rgba(139,124,246,.8); }
.hw-play {
  position: relative; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ai-grad); background-size: 200% 100%;
  animation: aiFlow 6s linear infinite, hwPulse 2.4s var(--ease) infinite;
}
.hw-play::after {
  content: ''; position: absolute; top: 50%; left: 50%; margin: -5px 0 0 -3px;
  border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff;
}
@keyframes hwPulse { 0% { box-shadow: 0 0 0 0 rgba(139,124,246,.55); } 70% { box-shadow: 0 0 0 11px rgba(139,124,246,0); } 100% { box-shadow: 0 0 0 0 rgba(139,124,246,0); } }

/* the AI card: what it does comes in one after another; colour grading is new */
html[data-ai="on"] .aib-can li { animation: aiRise .55s var(--ease) both; }
.aib-can li:nth-child(1) { animation-delay: .15s; }
.aib-can li:nth-child(2) { animation-delay: .25s; }
.aib-can li:nth-child(3) { animation-delay: .35s; }
.aib-can li:nth-child(4) { animation-delay: .45s; }
.aib-can li:nth-child(5) { animation-delay: .55s; }
.aib-can li:nth-child(6) { animation-delay: .65s; }
.aib-can li.aib-fresh { --c: var(--ai-d); border-color: rgba(242,178,76,.42); background: rgba(242,178,76,.07); }
.aib-fresh i {
  font-style: normal; font-size: 11px; font-weight: 700; line-height: 17px; color: #120E06;
  padding: 0 7px; border-radius: var(--r-pill); background: var(--ai-d);
}
.aib-watch {
  font-size: 14px; color: var(--ai-e); text-decoration: none;
  border-bottom: 1px dashed rgba(111,195,240,.45); padding-bottom: 1px;
}
.aib-watch:hover { color: #fff; border-bottom-color: #fff; }

/* ── the gallery of what it made ─────────────────────────── */
.showcase { padding-top: 64px; padding-bottom: 34px; }
/* the videos' heading (2026-10-10, «خلي شكلها احسن»): a lit badge, EditFast AI in the AI colours, a glow behind */
.sc-head { position: relative; isolation: isolate; }
.sc-head::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: 8%; right: 8%; top: -36px; height: 240px;
  background: radial-gradient(55% 60% at 50% 45%, rgba(139,124,246,.24), transparent 72%),
              radial-gradient(35% 45% at 28% 62%, rgba(47,217,190,.16), transparent 70%),
              radial-gradient(35% 45% at 74% 58%, rgba(224,122,176,.14), transparent 70%);
  filter: blur(6px);
}
.sc-badge {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 7px 16px 7px 14px;
  border-radius: var(--r-pill); font-size: 13.5px; font-weight: 700; color: #fff;
  border: 1px solid transparent;
  background: linear-gradient(rgba(17,15,23,.92), rgba(17,15,23,.92)) padding-box, var(--ai-grad) border-box;
  background-size: auto, 200% 100%; animation: aiFlow 6s linear infinite;
  box-shadow: 0 10px 34px -12px rgba(139,124,246,.7);
}
.sc-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ai-a); animation: scPulse 2.2s var(--ease) infinite; }
@keyframes scPulse { 0% { box-shadow: 0 0 0 0 rgba(47,217,190,.6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(47,217,190,0); } }
.sc-head h2 { font-size: clamp(30px, 4.6vw, 54px); line-height: 1.22; letter-spacing: -.02em; max-width: 17ch; margin-inline: auto; }
.sc-ai {
  display: inline-block; padding-block: .08em;
  background: var(--ai-grad); background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: aiFlow 7s linear infinite;
}
.sc-intro b { color: var(--tx); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .sc-badge, .sc-ai, .sc-badge-dot { animation: none; } }
.sc { position: relative; margin-top: 4px; }
.sc-track {
  display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 10px calc((100vw - min(1180px, 100vw - 40px)) / 2 + 4px) 24px;
}
.sc-track::-webkit-scrollbar { display: none; }
.sc-card { flex: 0 0 auto; width: clamp(196px, 21vw, 248px); margin: 0; scroll-snap-align: center; cursor: pointer; outline: 0; }
.sc-frame {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 22px; background: #08070A;
  border: 1px solid var(--line-lift);
  box-shadow: 0 30px 60px -38px rgba(0,0,0,.95), 0 22px 60px -44px rgba(139,124,246,.65);
  transition: transform .45s var(--spring), border-color .3s var(--ease), box-shadow .4s var(--ease);
}
.sc-frame img, .sc-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* the video over its poster picture: home-ai.js adds it first, and it was playing underneath — sound and no picture */
.sc-frame video { z-index: 1; }
.sc-card:hover .sc-frame, .sc-card:focus-visible .sc-frame { transform: translateY(-6px) rotate(-.6deg); border-color: rgba(139,124,246,.55); }
.sc-card.playing .sc-frame { border-color: rgba(139,124,246,.5); box-shadow: 0 30px 60px -38px rgba(0,0,0,.95), 0 24px 70px -36px rgba(139,124,246,.9); }
.sc-card:focus-visible .sc-frame { outline: 2px solid var(--ai-b); outline-offset: 3px; }
/* a line of the AI colours under a card while it plays */
.sc-frame::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2;
  background: var(--ai-grad); background-size: 200% 100%; opacity: 0;
  transition: opacity .3s var(--ease); animation: aiFlow 4s linear infinite;
}
.sc-card.playing .sc-frame::after { opacity: 1; }
.sc-tag {
  position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2;
  font-size: 11.5px; font-weight: 700; color: #fff; padding: 3px 10px; border-radius: var(--r-pill);
  background: rgba(10,9,13,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
}
.sc-snd {
  position: absolute; bottom: 12px; inset-inline-end: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(10,9,13,.62) no-repeat center / 17px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.14);
  /* muted: a speaker with a cross */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5L6 9H3v6h3l5 4z' fill='white'/%3E%3Cpath d='M22 9l-6 6M16 9l6 6'/%3E%3C/svg%3E");
}
.sc-card.loud .sc-snd {
  background-color: rgba(139,124,246,.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5L6 9H3v6h3l5 4z' fill='white'/%3E%3Cpath d='M15.5 8.5a5 5 0 010 7M18.5 5.5a9 9 0 010 13'/%3E%3C/svg%3E");
}
.sc-card figcaption { padding: 12px 4px 0; }
.sc-card figcaption b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.02em; }
.sc-card figcaption span { display: block; margin-top: 3px; font-size: 13px; color: var(--tx-3); line-height: 1.6; }
.sc-arrow { top: 210px; }
@media (hover: none) { .sc-arrow { display: none; } }
@media (max-width: 620px) {
  .showcase { padding-top: 46px; }
  .sc-card { width: 62vw; }
  .sc-track { gap: 12px; padding-inline: 16px; }
}

/* ── the credits, asked and answered above the plans ─────── */
.cq {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: 30px; align-items: center;
  margin: 0 0 42px; padding: 26px 28px;
  border-radius: var(--r-big); border: 1px solid rgba(139,124,246,.28);
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(47,217,190,.10), transparent 70%),
    radial-gradient(460px 240px at 0% 100%, rgba(224,122,176,.10), transparent 70%),
    var(--bg-100);
}
.cq::before {
  content: ''; position: absolute; top: 0; left: 28px; right: 28px; height: 1px;
  background: var(--ai-grad); background-size: 200% 100%; animation: aiFlow 6s linear infinite;
}
.cq-tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #0B0A0E;
  padding: 3px 11px; border-radius: var(--r-pill); background: var(--ai-grad); background-size: 200% 100%;
  animation: aiFlow 6s linear infinite;
}
.cq-tag .ltr { direction: ltr; unicode-bidi: isolate; }
.cq h3 { margin: 12px 0 8px; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; letter-spacing: -.03em; }
.cq-copy > p { margin: 0; font-size: 16px; line-height: 1.85; color: var(--tx-2); max-width: 44ch; }
.cq-chat {
  position: relative; display: flex; flex-direction: column; height: 380px;
  padding: 12px 14px 14px; border-radius: 20px;
  background: rgba(13,12,17,.82); border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 26px 64px -36px rgba(0,0,0,.95), 0 20px 64px -38px rgba(139,124,246,.6);
}
.cq-hd { display: flex; align-items: center; gap: 10px; padding: 2px 2px 11px; border-bottom: 1px solid rgba(255,255,255,.06); }
.cq-av {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: var(--ai-grad); background-size: 200% 100%; animation: aiFlow 6s linear infinite;
  box-shadow: 0 0 18px -4px rgba(139,124,246,.8);
}
.cq-av svg { width: 17px; height: 17px; }
.cq-who b { display: block; font-size: 14.5px; direction: ltr; text-align: start; }
.cq-who small { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ai-a); }
.cq-who small::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.cq-who small.typing { color: var(--ai-e); }
.cq-log {
  flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px;
  padding-top: 12px; transition: opacity .4s var(--ease);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%); mask-image: linear-gradient(to bottom, transparent, #000 22%);
}
.cq-log.fade { opacity: 0; }
.cq-q, .cq-a { max-width: 86%; padding: 9px 13px; font-size: 14.5px; line-height: 1.75; animation: cqIn .42s var(--spring) both; }
/* the visitor on the far side, the way a sent message sits; EditFast on this side */
.cq-q { align-self: flex-end; color: var(--tx); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); border-radius: 16px 16px 16px 5px; }
[dir="ltr"] .cq-q { border-radius: 16px 16px 5px 16px; }
.cq-a {
  align-self: flex-start; color: var(--tx);
  background: linear-gradient(135deg, rgba(47,217,190,.13), rgba(139,124,246,.17)); border: 1px solid rgba(139,124,246,.32);
  border-radius: 16px 16px 5px 16px;
}
[dir="ltr"] .cq-a { border-radius: 16px 16px 16px 5px; }
.cq-a b { color: var(--ai-d); font-weight: 700; }
.cq-typing {
  align-self: flex-start; display: inline-flex; gap: 5px; padding: 12px 14px; border-radius: 16px 16px 5px 16px;
  background: rgba(139,124,246,.13); border: 1px solid rgba(139,124,246,.22); animation: cqIn .3s var(--ease) both;
}
.cq-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ai-b); animation: cqDot 1.1s var(--ease) infinite; }
.cq-typing i:nth-child(2) { animation-delay: .15s; }
.cq-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cqIn { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes cqDot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: 1; } }
@media (max-width: 880px) {
  .cq { grid-template-columns: 1fr; gap: 18px; padding: 20px 18px; }
  .cq-chat { height: 360px; }
}
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .h1-ai, .h1-plus, .hw-play, .cq::before, .cq-tag, .cq-av, .sc-frame::after { animation: none; }
  html[data-ai="on"] .aib-can li, .cq-q, .cq-a, .cq-typing { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Beside the headline: EditFast AI at work (2026-10-10, «غير
   الانيميشن الي جمب العنوان ده لحاجه ليها علاقه بالشات الي بال ai
   خليها شكلها حلو جدا جدا») — the chat, its steps with a small
   picture each, what it did popping along the top edge, and the
   result as the last message. js/hero-chat.js plays it.
   ═══════════════════════════════════════════════════════════════ */
.hc { position: relative; width: 100%; max-width: 560px; margin-inline: auto; padding: 22px 0 18px; isolation: isolate; }
.hc-glow {
  position: absolute; inset: 8% -5% 2%; z-index: -1; pointer-events: none; filter: blur(30px); opacity: .9;
  background: radial-gradient(42% 46% at 30% 34%, rgba(47,217,190,.30), transparent 70%),
              radial-gradient(40% 44% at 72% 30%, rgba(139,124,246,.34), transparent 72%),
              radial-gradient(38% 40% at 56% 82%, rgba(224,122,176,.24), transparent 72%);
  animation: hcGlow 9s ease-in-out infinite alternate;
}
@keyframes hcGlow { to { transform: translate3d(0, -14px, 0) scale(1.05); opacity: .7; } }

.hc-win {
  position: relative; height: 500px; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 24px; border: 1px solid transparent;
  background: linear-gradient(165deg, rgba(25,22,35,.95), rgba(11,10,16,.98)) padding-box,
              var(--ai-grad) border-box;
  background-size: auto, 220% 100%; animation: aiFlow 8s linear infinite;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.95), 0 30px 80px -48px rgba(139,124,246,.9), inset 0 1px 0 rgba(255,255,255,.07);
  transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); transform-origin: 30% 50%;
  transition: transform .8s var(--ease);
}
html[dir="ltr"] .hc-win { transform: perspective(1400px) rotateY(5deg) rotateX(2deg); transform-origin: 70% 50%; }
.hc:hover .hc-win { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
html[dir="ltr"] .hc:hover .hc-win { transform: perspective(1400px) rotateY(2deg) rotateX(1deg); }
.hc-win::after {   /* a sheen across the glass */
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.045) 45%, transparent 60%);
}

/* the header */
.hc-hd { display: flex; align-items: center; gap: 9px; padding: 16px 18px 13px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 14px; }
.hc-mark {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--ai-grad); background-size: 200% 100%; animation: aiFlow 6s linear infinite;
  box-shadow: 0 0 18px -2px rgba(139,124,246,.8);
}
.hc-mark img { width: 14px; height: 14px; filter: brightness(0) invert(1); }
.hc-hd b { font-weight: 700; color: #fff; direction: ltr; unicode-bidi: isolate; letter-spacing: -.01em; }
.hc-pro {
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: #0B0A10; padding: 2px 8px; border-radius: 999px;
  background: linear-gradient(100deg, var(--ai-a), var(--ai-d));
}
.hc-st { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tx-3); }
.hc-st i { width: 8px; height: 8px; border-radius: 50%; background: var(--ai-a); box-shadow: 0 0 10px var(--ai-a); }
.hc[data-st="busy"] .hc-st { color: var(--tx); }
.hc[data-st="busy"] .hc-st i { width: 12px; height: 12px; background: none; box-shadow: none; border: 2px solid rgba(139,124,246,.3); border-top-color: var(--ai-b); animation: aiSpin .8s linear infinite; }
.hc[data-st="done"] .hc-st { color: var(--ai-a); }

/* the conversation */
.hc-log {
  flex: 1 1 auto; overflow: hidden; padding: 16px 16px 8px; scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px); mask-image: linear-gradient(to bottom, transparent 0, #000 18px);
  transition: opacity .45s var(--ease), filter .45s var(--ease);
}
.hc.fade .hc-log { opacity: 0; filter: blur(6px); }
.hc-me {
  width: fit-content; max-width: 86%; margin-inline-start: auto; margin-bottom: 14px;
  padding: 11px 15px; border-radius: 18px 18px 6px 18px; font-size: 14.5px; line-height: 1.65; color: #fff;
  background: linear-gradient(135deg, #4F46C8, #7A3E9E 60%, #A43C77);
  box-shadow: 0 14px 30px -18px rgba(139,124,246,.95);
  animation: hcIn .5s var(--spring) both;
}
html[dir="ltr"] .hc-me { border-radius: 18px 18px 18px 6px; }
.hc-ai { animation: hcIn .45s var(--ease) both; }
.hc-ai-t { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--tx); margin-bottom: 9px; }
.hc-av {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto; position: relative;
  background: var(--ai-grad); background-size: 200% 100%; animation: aiFlow 5s linear infinite;
  box-shadow: 0 0 14px -2px rgba(47,217,190,.75);
}
.hc-av::after {   /* a four-point spark */
  content: ''; position: absolute; inset: 5px; background: #fff;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.hc-think { display: inline-flex; gap: 4px; }
.hc-think i { width: 6px; height: 6px; border-radius: 50%; background: var(--ai-b); animation: hcDot 1s var(--ease) infinite; }
.hc-think i:nth-child(2) { animation-delay: .15s; background: var(--ai-e); }
.hc-think i:nth-child(3) { animation-delay: .3s; background: var(--ai-a); }
@keyframes hcDot { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-5px); opacity: 1; } }
.hc-stream { animation: hcIn .4s var(--ease) both; }

.hc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hc-steps li {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 13px; font-size: 13.5px; color: var(--tx-2);
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06);
  animation: hcIn .45s var(--spring) both;
  transition: background .4s var(--ease), border-color .4s var(--ease), color .3s var(--ease);
}
.hc-steps li.ok { color: var(--tx); background: linear-gradient(100deg, rgba(47,217,190,.09), rgba(139,124,246,.06) 60%, transparent); border-color: rgba(47,217,190,.2); }
html[dir="rtl"] .hc-steps li.ok { background: linear-gradient(260deg, rgba(47,217,190,.09), rgba(139,124,246,.06) 60%, transparent); }
.hc-ic { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; position: relative; }
.hc-steps li.run .hc-ic { border: 2px solid rgba(139,124,246,.28); border-top-color: var(--ai-b); animation: aiSpin .75s linear infinite; }
.hc-steps li.ok .hc-ic { background: var(--ai-a); box-shadow: 0 0 12px -1px rgba(47,217,190,.85); animation: hcPop .45s var(--spring) both; }
.hc-steps li.ok .hc-ic::after {
  content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071311' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.hc-lb { flex: 1 1 auto; min-width: 0; line-height: 1.5; }
@keyframes hcIn { from { opacity: 0; transform: translateY(10px) scale(.97); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes hcPop { 0% { transform: scale(.4); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* the small pictures: what each step did (own class names — the site has a .clip and a .gap of its own) */
.mv { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; height: 22px; direction: ltr; opacity: .55; transition: opacity .4s var(--ease); }
.hc-steps li.ok .mv { opacity: 1; }
.mv-cut i { display: block; height: 16px; border-radius: 3px; transition: width .6s var(--spring), margin .6s var(--spring), opacity .4s var(--ease); }
.mv-cut i.k { width: 12px; background: linear-gradient(180deg, var(--ai-a), #1C8C7B); }
.mv-cut i.x { width: 9px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 2px, transparent 2px 4px); }
.hc-steps li.ok .mv-cut i.x { width: 0; margin: 0 -1.5px; opacity: 0; }
.mv.mv-cap { direction: inherit; }
.mv-cap i { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 5px; color: var(--tx-3); }
.hc-steps li.ok .mv-cap i { animation: hcWord 2.4s steps(1, end) infinite; }
.hc-steps li.ok .mv-cap i:nth-child(2) { animation-delay: .8s; }
.hc-steps li.ok .mv-cap i:nth-child(3) { animation-delay: 1.6s; }
@keyframes hcWord { 0% { background: var(--ai-d); color: #171005; } 33.3%, 100% { background: transparent; color: var(--tx-2); } }
.mv-mo i { width: 13px; height: 18px; border-radius: 4px; background: rgba(255,255,255,.1); transform: scale(.4); opacity: .4; transition: transform .5s var(--spring), opacity .4s, background .4s; }
.hc-steps li.ok .mv-mo i { transform: scale(1); opacity: 1; }
.hc-steps li.ok .mv-mo i:nth-child(1) { background: linear-gradient(160deg, var(--ai-a), var(--ai-e)); }
.hc-steps li.ok .mv-mo i:nth-child(2) { background: linear-gradient(160deg, var(--ai-b), var(--ai-c)); transition-delay: .1s; }
.hc-steps li.ok .mv-mo i:nth-child(3) { background: linear-gradient(160deg, var(--ai-c), var(--ai-d)); transition-delay: .2s; }
.mv-gr i { width: 54px; height: 14px; border-radius: 7px; background: linear-gradient(90deg, #4C6FA5, #7FA3C9 30%, #E0B27C 70%, #E07A4C); background-size: 300% 100%; background-position: 0 0; transition: background-position 1.2s var(--ease); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.hc-steps li.ok .mv-gr i { background-position: 100% 0; }
.mv-read { flex-direction: column; align-items: stretch; justify-content: center; gap: 3px; width: 46px; }
.mv-read i { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.12); position: relative; overflow: hidden; }
.mv-read i::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--ai-e); transition: transform .9s var(--ease); }
.hc-steps li.ok .mv-read i::after { transform: scaleX(1); }
.hc-steps li.ok .mv-read i:nth-child(2)::after { transition-delay: .15s; }
.hc-steps li.ok .mv-read i:nth-child(3)::after { transition-delay: .3s; }
.mv-pick i { width: 5px; height: 16px; border-radius: 2px; background: rgba(255,255,255,.14); transition: background .4s var(--ease), height .4s var(--spring), box-shadow .4s; }
.hc-steps li.ok .mv-pick i:nth-child(2), .hc-steps li.ok .mv-pick i:nth-child(4), .hc-steps li.ok .mv-pick i:nth-child(5) { background: var(--ai-d); height: 20px; box-shadow: 0 0 8px rgba(242,178,76,.6); }
.mv-render i { width: 54px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); position: relative; overflow: hidden; }
.mv-render i::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(.05); background: var(--ai-grad); transition: transform 1s var(--ease); }
.hc-steps li.run .mv-render i::after { transform: scaleX(.6); }
.hc-steps li.ok .mv-render i::after { transform: scaleX(1); }

.hc-done {
  margin-top: 11px; font-size: 13.5px; font-weight: 600;
  color: transparent; background: var(--ai-grad); background-size: 220% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; animation: hcIn .5s var(--ease) both, aiFlow 6s linear infinite;
}

/* the result, as its last message: the video it made, playing */
.hc-res {
  display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 10px; border-radius: 16px;
  background: linear-gradient(rgba(20,18,28,.96), rgba(20,18,28,.96)) padding-box, var(--ai-grad) border-box;
  border: 1px solid transparent; background-size: auto, 220% 100%;
  box-shadow: 0 18px 40px -24px rgba(47,217,190,.8);
  animation: hcRes .7s var(--spring) both, aiFlow 7s linear infinite;
}
@keyframes hcRes { from { opacity: 0; transform: translateY(16px) scale(.94); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
.hc-res-v { position: relative; width: 70px; aspect-ratio: 9 / 16; flex: 0 0 auto; border-radius: 10px; overflow: hidden; background: #08070A; box-shadow: 0 10px 24px -12px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.12); }
.hc-res-v img, .hc-res-v video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hc-res-v video { z-index: 1; }
.hc-res-t { min-width: 0; display: grid; gap: 4px; }
.hc-res-t b { font-size: 14.5px; color: #fff; display: inline-flex; align-items: center; gap: 7px; }
.hc-res-t b::before { content: ''; width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; background: var(--ai-a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071311' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 10px no-repeat; box-shadow: 0 0 10px rgba(47,217,190,.7); }
.hc-res-t small { font-size: 12.5px; color: var(--tx-3); }
.hc-res-b { display: flex; gap: 7px; margin-top: 4px; }
.hc-res-b span { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; color: var(--tx); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.hc-res-b span:first-child { color: #071311; background: var(--ai-a); border-color: transparent; box-shadow: 0 0 14px -2px rgba(47,217,190,.75); }

/* the box at the bottom */
.hc-in {
  position: relative; margin: 6px 14px 14px; min-height: 48px; display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 8px; border-radius: 15px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
html[dir="rtl"] .hc-in { padding: 8px 14px 8px 8px; }
html[dir="ltr"] .hc-in { padding: 8px 8px 8px 14px; }
.hc-in.typing { border-color: rgba(139,124,246,.55); box-shadow: 0 0 0 3px rgba(139,124,246,.13), 0 0 26px -10px rgba(139,124,246,.9); }
.hc-typed { flex: 0 1 auto; min-width: 0; font-size: 14px; line-height: 1.6; color: var(--tx); white-space: nowrap; overflow: hidden; }
.hc-caret { width: 2px; height: 18px; border-radius: 1px; background: var(--ai-a); opacity: 0; flex: 0 0 auto; }
.hc-in.typing .hc-caret { opacity: 1; animation: hcBlink 1s steps(1) infinite; }
@keyframes hcBlink { 50% { opacity: 0; } }
.hc-ph { flex: 1 1 auto; font-size: 14px; color: var(--tx-4); }
.hc-ph[hidden] { display: none; }
.hc-send {
  margin-inline-start: auto; width: 34px; height: 34px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center; color: #fff;
  background: var(--ai-ink); box-shadow: 0 8px 20px -10px rgba(139,124,246,.95); transition: transform .2s var(--spring), filter .2s;
}
.hc-send svg { width: 17px; height: 17px; }
.hc-send.go { transform: scale(.82); filter: brightness(1.3); }

/* what each step did, popping along the top edge */
.hc-chips { position: absolute; z-index: 2; top: 4px; inset-inline-start: 24px; inset-inline-end: 24px; display: flex; flex-wrap: nowrap; gap: 8px; pointer-events: none; overflow: visible; }
.hc-chip {
  font-size: 12.5px; font-weight: 700; color: #fff; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  background: rgba(18,16,25,.92); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 26px -14px rgba(0,0,0,.95);
  opacity: 0; transform: translateY(10px) scale(.7);
  transition: opacity .4s var(--ease), transform .55s var(--spring);
}
.hc-chip.on { opacity: 1; transform: none; }
.hc-chip::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-inline-end: 7px; vertical-align: 1px; }
.hc-chip.c0::before { background: var(--ai-a); box-shadow: 0 0 8px var(--ai-a); }
.hc-chip.c1::before { background: var(--ai-e); box-shadow: 0 0 8px var(--ai-e); }
.hc-chip.c2::before { background: var(--ai-b); box-shadow: 0 0 8px var(--ai-b); }
.hc-chip.c3::before { background: var(--ai-d); box-shadow: 0 0 8px var(--ai-d); }

@media (max-width: 1020px) {
  .hc { max-width: 600px; }
  .hc-win, .hc:hover .hc-win, html[dir="ltr"] .hc-win, html[dir="ltr"] .hc:hover .hc-win { transform: none; }
  .hc-glow { inset: 8% 0 2%; }
}
@media (max-width: 560px) {
  .hc { padding: 18px 0 6px; }
  .hc-win { height: 470px; border-radius: 20px; }
  .hc-log { padding: 14px 12px 6px; }
  .hc-me { font-size: 14px; max-width: 92%; }
  .hc-steps li { padding: 8px 9px; font-size: 13px; gap: 8px; }
  .mv { transform: scale(.88); }
  .hc-chips { inset-inline-start: 12px; inset-inline-end: 12px; gap: 6px; }
  .hc-chip { font-size: 11.5px; padding: 4px 9px; }
  .hc-chip.c3 { display: none; }
  .hc-res-v { width: 60px; }
  .hc-in { margin: 6px 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-glow, .hc-win, .hc-mark, .hc-av, .hc-done, .hc-res { animation: none; }
  .hc-win, .hc:hover .hc-win { transform: none; }
}

/* phones (2026-10-10): the AI card's link big enough for a thumb, the plans' small print big enough to read */
@media (max-width: 520px) {
  .aib-watch { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; }
  .term-free, .term-opt .ai-free { font-size: 12px; }
}