/* ═══════════════════════════════════════════════════════════════
   EditFast PC — the product page (pc.html) and its start page
   (pc-start.html), 2026-10-25.

   The program's own look, «سينما», carried onto the site: a dark,
   warm room lit by the video itself; glass with no white edge; one
   warm metal — champagne gold — on every action; EditFast AI in its
   own teal-to-pink light; and, from «بوب», a colour for every part
   of the program, which here becomes a colour for every section.

   The site's tokens are re-pointed rather than fought: --red is the
   gold on these pages, the greys lean warm, so everything site.js
   draws (the plan cards, the guide under the pay buttons, the FAQ)
   wears the same look without a second copy of it.

   Warmth over restraint (the owner's lesson): radius by role, a
   different entrance per section, light that comes from somewhere.
   Every loop runs only while it is on screen; with reduced motion
   everything stands at its finished state.
   ═══════════════════════════════════════════════════════════════ */

.pc-page {
  --gold: #EFC26C;
  --gold-a: #F7D894;
  --gold-b: #E6B356;
  --gold-ink: #1C1408;
  --gold-text: #F2C878;
  --ai-a: #4FE3C1;
  --ai-b: #EE72B4;

  /* the site's tokens, warmed (site.css) */
  --red: #EFC26C;
  --red-lift: #F7D894;
  --red-soft: #F2C878;
  --red-deep: #B8862F;
  --red-rgb: 239, 194, 108;
  --red-ink-a: #8C5B14;
  --red-ink-b: #6A420B;
  --ember: #EE72B4;
  --ember-rgb: 238, 114, 180;
  --bg-000: #070708;
  --bg-050: #0A0909;
  --bg-100: #121012;
  --bg-200: #1A1719;
  --bg-300: #232022;
  --tx: #F4F0E8;
  --tx-2: #CBC3B8;
  --tx-3: #A0978C;
  --tx-4: #847B71;
  --line: rgba(255, 240, 220, .07);
  --line-lift: rgba(255, 240, 220, .13);
  --glow: 0 10px 30px -10px rgba(239, 194, 108, .55);
  --glow-lift: 0 16px 44px -12px rgba(239, 194, 108, .72);
  --sink: 0 24px 60px -24px rgba(0, 0, 0, .9);

  --glass: rgba(18, 17, 19, .72);
  --edge: inset 0 0 0 1px rgba(255, 240, 220, .065);
  --r-art: 12px;
  --r-tc: 18px;
  --r-xl: 26px;

  background: var(--bg-000);
}

/* The room: a warm light from above, the AI's two colours low on either side. */
body.pc-page::before {
  background:
    radial-gradient(1000px 560px at 50% -10%, rgba(239, 194, 108, .10), transparent 62%),
    radial-gradient(760px 520px at 104% 34%, rgba(79, 227, 193, .045), transparent 60%),
    radial-gradient(760px 560px at -4% 72%, rgba(238, 114, 180, .045), transparent 60%);
}
/* A soft film grain on the room (behind the content: never over the words). */
body.pc-page::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

html[dir="ltr"] .pc-page .skip { transform: translate(-50%, -160%); }
html[dir="ltr"] .pc-page .skip:focus { transform: translate(-50%, 0); }
/* entrances from the side only where the margins can take them (site.css stops them under 760px) */
@media (max-width: 1100px) {
  .pc-page [data-rise="l"]:not(.in), .pc-page [data-rise="r"]:not(.in) { transform: translateY(22px); }
}
.pc-page ::selection { background: rgba(239, 194, 108, .35); color: #fff; }

/* ── header ─────────────────────────────────────────────────── */
.pc-page .hdr { background: rgba(10, 9, 10, .8); }
.pc-page .hdr.stuck { background: rgba(10, 9, 10, .95); }
.pc-brand { display: inline-flex; align-items: center; gap: 8px; unicode-bidi: isolate; direction: ltr; }
.pc-page .hdr-cta .btn { white-space: nowrap; }
@media (max-width: 380px) {
  .pc-page .hdr-in { gap: 12px; }
  .pc-page .hdr-cta .btn.sm { padding: 9px 12px; }
  .pc-page .brand { gap: 8px; font-size: 16.5px; }
}
.pc-brand i {
  font-style: normal; font-family: var(--num); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; line-height: 1;
  color: #2FD9BE; padding: 4px 6px 3px 7px; border-radius: 6px;
  background: rgba(47, 217, 190, .13); box-shadow: inset 0 0 0 1px rgba(47, 217, 190, .3);
}

/* ── buttons: a pressed metal ─────────────────────────────── */
.pc-page .btn.pri {
  background: linear-gradient(180deg, var(--gold-a), var(--gold-b));
  color: var(--gold-ink); font-weight: 700; border-color: transparent;
  box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, .4);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .28);
}
.pc-page .btn.pri:hover { box-shadow: var(--glow-lift), inset 0 1px 0 rgba(255, 255, 255, .4); filter: brightness(1.05); }
.pc-page .btn.pri:disabled:hover, .pc-page .btn.pri[disabled]:hover { background: linear-gradient(180deg, var(--gold-a), var(--gold-b)); filter: none; }
.pc-page .btn { border-radius: 12px; }
.pc-page .btn:not(.pri) { background: rgba(255, 242, 225, .045); border-color: rgba(255, 242, 225, .13); }
.pc-page .btn:not(.pri):hover { background: rgba(255, 242, 225, .085); border-color: rgba(255, 242, 225, .24); }
.pc-page .btn.pri b.num, .pc-page .btn b.num { font-weight: 700; letter-spacing: 0; }

/* ── headings shared by every section ──────────────────────── */
.pc-page h1 em, .pc-page h2 em {
  font-style: normal;
  background: linear-gradient(100deg, #F7DCA0, #E8B45B 55%, #F4CF8A);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* the text is drawn only where its background is, and an inline box ends above the tails of ج ع ي (2026-10-27:
     «يتمنتج» lost its ج): room under and over it, which an inline box's padding gives without moving the lines */
  padding: .08em 0 .3em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.pc-head { text-align: center; margin: 0 auto 46px; max-width: 820px; }
.pc-head h2 { margin-inline: auto; max-width: 24ch; line-height: 1.36; }
@media (min-width: 760px) { .pc-head h2 em { white-space: nowrap; } }
.pc-page .ltr { white-space: nowrap; }
html[lang="en"] .pc-h1 { line-height: 1.1; }
html[lang="en"] .pc-head h2, html[lang="en"] .end h2 { line-height: 1.16; }
.pc-intro { color: var(--tx-2); font-size: 17.5px; margin: 0 auto; max-width: 58ch; }
.pc-intro b { color: var(--tx); font-weight: 600; }

/* the eyebrow: a pill in the section's own colour */
.pc-eye {
  --h: #EFC26C; --hr: 239, 194, 108;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 15px 6px 13px; margin-bottom: 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em; color: var(--h);
  background: rgba(var(--hr), .09); box-shadow: inset 0 0 0 1px rgba(var(--hr), .26);
}
.pc-eye::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--h); box-shadow: 0 0 12px var(--h); }
.pc-eye-ai { --h: #7FEAD2; --hr: 79, 227, 193; background: linear-gradient(100deg, rgba(79, 227, 193, .12), rgba(238, 114, 180, .12)); }
.pc-eye-ai::before { background: linear-gradient(135deg, var(--ai-a), var(--ai-b)); }
.pc-eye-tools { --h: #FF8FAB; --hr: 255, 143, 171; }
.pc-eye-tpl { --h: #FF9A9A; --hr: 255, 122, 122; }
.pc-eye-vs { --h: #F2C878; --hr: 239, 194, 108; }
.pc-eye-how { --h: #6FD3F5; --hr: 76, 201, 240; }
.pc-eye-why { --h: #C4F57C; --hr: 184, 243, 93; }
.pc-eye-price { --h: #F2C878; --hr: 239, 194, 108; }
.pc-eye-faq { --h: #C8B6FF; --hr: 185, 163, 255; }

/* ═════════════════════════════════════════════════════ hero ═══ */
.pc-hero { position: relative; padding: 50px 0 34px; overflow: hidden; overflow: clip; }
.pc-room { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pc-room i { position: absolute; inset: 0; transition: opacity 1.6s var(--ease); }
.pc-room .r-warm { background: radial-gradient(60% 46% at 50% 64%, rgba(255, 166, 90, .13), transparent 70%); }
.pc-room .r-ai { opacity: 0; background: radial-gradient(50% 40% at 30% 70%, rgba(79, 227, 193, .10), transparent 70%), radial-gradient(50% 40% at 72% 78%, rgba(238, 114, 180, .10), transparent 70%); }
.pc-room .r-gold { background: radial-gradient(40% 30% at 50% 6%, rgba(239, 194, 108, .10), transparent 70%); }
.pc-hero.lit .r-ai { opacity: 1; }
.pc-hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.pc-hero-copy { width: 100%; text-align: center; max-width: 900px; }

/* the real count of accounts (js/pc.js; /api/live/accounts) */
.pc-live {
  display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px 10px;
  margin-bottom: 18px; padding: 7px 15px 7px 13px; border-radius: 999px;
  background: linear-gradient(140deg, rgba(74, 222, 110, .09), rgba(239, 194, 108, .05));
  box-shadow: inset 0 0 0 1px rgba(74, 222, 110, .26);
  font-size: 14px; color: var(--tx-2); line-height: 1.5;
  animation: pcIn .6s var(--ease) both;
}
@keyframes pcIn { from { opacity: 0; transform: translateY(-6px); } }
.pc-live-dot { position: relative; width: 9px; height: 9px; flex: 0 0 auto; }
.pc-live-dot i, .pc-live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--ok); }
.pc-live-dot i { box-shadow: 0 0 10px rgba(74, 222, 110, .7); }
.pc-live-dot::after { animation: pcPing 1.8s ease-out infinite; }
@keyframes pcPing { from { transform: scale(1); opacity: .7; } to { transform: scale(2.8); opacity: 0; } }
.pc-live-main { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.pc-live-main b { font-size: 16.5px; color: #fff; min-width: 3ch; display: inline-block; text-align: center; transition: transform .3s var(--spring), color .3s; }
.pc-live-main b.bump { transform: scale(1.18); color: var(--ok); }
.pc-live-today { display: inline-flex; gap: 5px; align-items: baseline; padding: 1px 9px; border-radius: 999px; background: rgba(74, 222, 110, .12); color: var(--ok); font-size: 13px; white-space: nowrap; }
.pc-live-plus { position: absolute; top: -10px; inset-inline-start: 0; pointer-events: none; font: 700 14px var(--num); color: var(--ok); animation: pcPlus 1.3s var(--ease) forwards; }
@keyframes pcPlus { from { opacity: 0; transform: translateY(6px); } 25% { opacity: 1; } to { opacity: 0; transform: translateY(-18px); } }

.pc-kicker { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; font-size: 14.5px; font-weight: 500; color: var(--tx-2); }
.pc-kicker-tag {
  font-size: 12px; font-weight: 700; color: #fff; padding: 3px 10px; border-radius: 999px;
  background: linear-gradient(120deg, var(--ai-a), var(--ai-b)); box-shadow: 0 6px 18px -8px rgba(238, 114, 180, .8);
}
.pc-h1 { margin: 0 0 18px; font-size: clamp(35px, 6.2vw, 74px); line-height: 1.28; font-weight: 800; letter-spacing: -.045em; }
@media (min-width: 760px) { .pc-h1 em { white-space: nowrap; } }
.pc-lede { margin: 0 auto 28px; max-width: 50ch; font-size: clamp(17px, 1.55vw, 20px); color: var(--tx-2); }
.pc-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pc-acts .btn { min-height: 54px; }
.pc-go { gap: 7px; }
.pc-go .num { font-size: 1.05em; }
.pc-trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 24px 0 0; padding: 0; }
.pc-trust li { display: inline-flex; align-items: center; gap: 8px; color: var(--tx-2); font-size: 14.5px; }
.pc-trust li::before {
  content: ''; width: 17px; height: 17px; flex: 0 0 auto; border-radius: 50%;
  background: rgba(239, 194, 108, .15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2C878' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* ═════════════════════ the program at work (the hero's mock) ═══
   A drawing of EditFast PC, in its own look. Positions on the timeline
   are percentages of the track (js/pc.js); the timeline runs left to
   right whatever the page's direction, because time does. */
.mk { position: relative; width: min(100%, 1060px); margin: 44px auto 0; }
.mk-glow { position: absolute; inset: -14% -10% -8%; z-index: 0; pointer-events: none; }
.mk-glow i { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.mk-glow .g-warm { opacity: 1; background: radial-gradient(48% 52% at 62% 42%, rgba(255, 168, 92, .30), transparent 70%); }
.mk-glow .g-cap { background: radial-gradient(46% 50% at 36% 52%, rgba(122, 231, 199, .22), transparent 70%); }
.mk-glow .g-mus { background: radial-gradient(44% 46% at 56% 86%, rgba(255, 143, 171, .24), transparent 70%); }
.mk.is-cap .g-cap, .mk.is-mus .g-mus { opacity: 1; }

.mk-win {
  position: relative; z-index: 1; overflow: hidden;
  border-radius: 20px; background: rgba(13, 12, 14, .94);
  box-shadow: 0 46px 100px -36px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 240, 220, .06) inset, 0 0 120px -50px rgba(239, 194, 108, .45);
}
.mk-bar { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; border-bottom: 1px solid rgba(255, 240, 220, .05); font-size: 12.5px; color: var(--tx-3); }
.mk-brand { display: inline-flex; align-items: center; gap: 6px; color: var(--tx); direction: ltr; flex: 0 0 auto; }
.mk-brand b { font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; }
.mk-brand i { font-style: normal; font: 800 8.5px var(--num); letter-spacing: .12em; color: #2FD9BE; padding: 3px 4px 2px 5px; border-radius: 4px; background: rgba(47, 217, 190, .13); }
.mk-logo { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: #0B0A0C; box-shadow: inset 0 0 0 1px rgba(47, 217, 190, .24); }
.mk-logo img { width: 11px; height: 11px; }
.mk-file { flex: 1 1 auto; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-dur { flex: 0 0 auto; min-width: 46px; text-align: end; font-size: 13px; font-weight: 700; color: var(--tx); letter-spacing: 0; transition: color .4s; }
.mk.is-cut .mk-dur { color: #C4F57C; }

.mk-main { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.mk-view { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #000; container-type: inline-size; }
@supports not (aspect-ratio: 1) { .mk-view { height: 0; padding-bottom: 75%; } }
.mk-scene { position: absolute; inset: 0; transform-origin: 50% 50%; transition: transform .55s cubic-bezier(.3, .8, .2, 1); }
.mk.zoom .mk-scene { transform: scale(1.17); }
.mk-svg { display: block; width: 100%; height: 100%; }
.mk-who { transform-box: fill-box; transform-origin: 50% 100%; }
.mk.s-play .mk-who { animation: mkTalk .9s ease-in-out infinite alternate; }
@keyframes mkTalk { from { transform: rotate(-1.1deg) translateY(0); } to { transform: rotate(.9deg) translateY(-1.2px); } }
.mk-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.mk-flash.go { animation: mkFlash .4s ease-out; }
@keyframes mkFlash { 0% { opacity: .32; } 100% { opacity: 0; } }

/* captions over the picture: three words at a time, the spoken one lit */
.mk-cap {
  position: absolute; inset-inline: 6%; top: 57%; z-index: 2; text-align: center;
  font-weight: 800; font-size: 17px; font-size: 5.4cqw; line-height: 1.25; letter-spacing: -.01em; color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 14px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .35s, transform .35s var(--spring);
}
.mk.is-cap .mk-cap { opacity: 1; transform: none; }
.mk-cap span { display: inline-block; transition: color .15s, transform .2s var(--spring); }
.mk-cap span.off { display: none; }
.mk-cap span.on { color: #FFD23F; transform: scale(1.07); }
.mk-cap span + span { margin-inline-start: .14em; }

/* EditFast AI: over the bottom of the picture on a phone, a column of its own on a wide screen */
.mk-ai { position: absolute; inset-inline: 9px; bottom: 9px; z-index: 3; display: flex; flex-direction: column; gap: 7px; }
.mk-ai-h { display: none; }
.mk-thread { display: flex; flex-direction: column; gap: 7px; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.mk:not(.s-chat) .mk-thread { opacity: 0; transform: translateY(10px); pointer-events: none; }
.mk-me, .mk-dots, .mk-plan { display: none; }
.mk.s-sent .mk-me { display: block; animation: mkPop .35s var(--spring) both; }
.mk.s-think .mk-dots { display: inline-flex; }
.mk.s-plan .mk-plan { display: block; animation: mkPop .4s var(--spring) both; }
@keyframes mkPop { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.mk-me {
  align-self: flex-end; max-width: 88%; padding: 7px 12px; border-radius: 14px 14px 4px 14px;
  background: linear-gradient(180deg, rgba(247, 216, 148, .2), rgba(230, 179, 86, .14)); color: #FBEFD6;
  box-shadow: inset 0 0 0 1px rgba(239, 194, 108, .3); font-size: 12.5px; line-height: 1.6;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
html[dir="ltr"] .mk-me { border-radius: 14px 14px 14px 4px; }
.mk-dots { align-self: flex-start; gap: 4px; padding: 9px 12px; border-radius: 12px; background: rgba(16, 15, 18, .85); box-shadow: var(--edge); }
.mk-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ai-a); animation: mkDot 1s ease-in-out infinite; }
.mk-dots i:nth-child(2) { background: #9FB8C0; animation-delay: .15s; }
.mk-dots i:nth-child(3) { background: var(--ai-b); animation-delay: .3s; }
@keyframes mkDot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-3px); opacity: 1; } }
.mk-plan {
  position: relative; padding: 10px 12px 11px; border-radius: 14px;
  background: rgba(16, 15, 18, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(79, 227, 193, .22), 0 14px 36px -16px rgba(0, 0, 0, .9), 0 0 40px -18px rgba(238, 114, 180, .55);
}
.mk-plan-h { display: block; font-size: 11.5px; font-weight: 700; color: #8EEFD8; margin-bottom: 5px; letter-spacing: .02em; }
.mk-plan ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.mk-plan li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.55; color: var(--tx-2); }
.mk.s-plan .mk-plan li { animation: mkPop .35s var(--ease) both; }
.mk.s-plan .mk-plan li:nth-child(2) { animation-delay: .1s; }
.mk.s-plan .mk-plan li:nth-child(3) { animation-delay: .2s; }
.mk.s-plan .mk-plan li:nth-child(4) { animation-delay: .3s; }
.mk-plan li i { position: relative; width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 240, 220, .25); }
.mk-plan li.run i { box-shadow: none; border: 2px solid var(--ai-a); border-top-color: transparent; animation: mkSpin .7s linear infinite; }
.mk-plan li.ok { color: var(--tx); }
.mk-plan li.ok i { box-shadow: none; background: linear-gradient(135deg, var(--ai-a), #7FEAD2); }
.mk-plan li.ok i::after { content: ''; position: absolute; left: 4.5px; top: 2.5px; width: 3.5px; height: 6.5px; border: solid #062019; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes mkSpin { to { transform: rotate(360deg); } }
.mk-do {
  display: inline-flex; align-items: center; justify-content: center; margin-top: 8px; padding: 4px 16px; border-radius: 9px;
  font-size: 12px; font-weight: 700; color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-a), var(--gold-b));
  box-shadow: 0 6px 16px -8px rgba(239, 194, 108, .9); transition: transform .15s, filter .2s;
}
.mk-do.press { transform: scale(.9); filter: brightness(1.15); }
.mk.s-run .mk-do { opacity: .45; }
.mk-input {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 12px; border-radius: 12px;
  background: rgba(16, 15, 18, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 220, .09); font-size: 12.5px; color: var(--tx);
  transition: opacity .35s, transform .35s, box-shadow .3s;
}
html[dir="ltr"] .mk-input { padding: 0 6px 0 12px; }
.mk.s-type .mk-input { box-shadow: inset 0 0 0 1px rgba(79, 227, 193, .45), 0 0 22px -8px rgba(79, 227, 193, .6); }
.mk-typed { white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: calc(100% - 50px); }
.mk-ph { color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mk.s-type .mk-ph { display: none; }
.mk-caret { width: 1.5px; height: 15px; background: var(--ai-a); opacity: 0; flex: 0 0 auto; }
.mk.s-type .mk-caret { opacity: 1; animation: mkBlink .8s steps(1) infinite; }
@keyframes mkBlink { 50% { opacity: 0; } }
.mk-send {
  margin-inline-start: auto; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, var(--ai-a), var(--ai-b)); box-shadow: 0 6px 16px -6px rgba(238, 114, 180, .7);
  transition: transform .15s;
}
.mk-send.press { transform: scale(.85); }
.mk.s-play .mk-input { opacity: 0; transform: translateY(8px); }

/* a phone: while the plan runs, only the step it is on, as a single line */
@media (max-width: 899px) {
  .mk.s-run .mk-me, .mk.s-run .mk-plan-h, .mk.s-run .mk-do, .mk.s-run .mk-dots { display: none; }
  .mk.s-run .mk-plan { padding: 7px 11px; animation: none; }
  .mk.s-run .mk-plan li { display: none; animation: none; }
  .mk.s-run .mk-plan li.cur { display: flex; }
}

/* the timeline */
.mk-tl { position: relative; padding: 7px 10px 10px; border-top: 1px solid rgba(255, 240, 220, .05); background: rgba(0, 0, 0, .28); }
.mk-ruler { position: relative; height: 12px; margin-inline-start: 30px; display: flex; justify-content: space-between; align-items: flex-end; }
.mk-ruler i { width: 1px; height: 5px; background: rgba(255, 240, 220, .18); }
.mk-ruler i:nth-child(odd) { height: 8px; }
.mk-lane { display: flex; align-items: center; gap: 8px; height: 24px; margin-top: 5px; }
.mk-lane > b { width: 22px; flex: 0 0 auto; font: 600 9.5px var(--num); letter-spacing: .02em; color: var(--tx-4); text-align: center; }
.mk-trk { position: relative; flex: 1 1 auto; height: 100%; border-radius: 6px; background: rgba(255, 240, 220, .03); }
.mk-lv .mk-trk { height: 26px; }
.mk-clip, .mk-gap, .mk-cb, .mk-kf, .mk-music { position: absolute; top: 0; bottom: 0; }
.mk-clip {
  border-radius: 5px; overflow: hidden;
  background: linear-gradient(180deg, #2B2420, #1B1614); box-shadow: inset 0 0 0 1px rgba(255, 240, 220, .08);
  transition: left .7s cubic-bezier(.5, 0, .2, 1);
}
.mk-clip::after {
  content: ''; position: absolute; inset: 9px 3px 2px;
  background: rgba(255, 196, 128, .62);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg%3E%3Crect x='1' y='9' width='1.6' height='6'/%3E%3Crect x='4' y='5' width='1.6' height='14'/%3E%3Crect x='7' y='8' width='1.6' height='8'/%3E%3Crect x='10' y='3' width='1.6' height='18'/%3E%3Crect x='13' y='7' width='1.6' height='10'/%3E%3Crect x='16' y='10' width='1.6' height='4'/%3E%3Crect x='19' y='4' width='1.6' height='16'/%3E%3Crect x='22' y='8' width='1.6' height='8'/%3E%3C/g%3E%3C/svg%3E") repeat-x center / 12px 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg%3E%3Crect x='1' y='9' width='1.6' height='6'/%3E%3Crect x='4' y='5' width='1.6' height='14'/%3E%3Crect x='7' y='8' width='1.6' height='8'/%3E%3Crect x='10' y='3' width='1.6' height='18'/%3E%3Crect x='13' y='7' width='1.6' height='10'/%3E%3Crect x='16' y='10' width='1.6' height='4'/%3E%3Crect x='19' y='4' width='1.6' height='16'/%3E%3Crect x='22' y='8' width='1.6' height='8'/%3E%3C/g%3E%3C/svg%3E") repeat-x center / 12px 100%;
}
.mk-clip::before { content: ''; position: absolute; inset: 2px 3px auto; height: 5px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(255, 240, 220, .2) 0 6px, transparent 6px 9px); }
.mk-gap {
  border-radius: 4px; opacity: 0;
  background: repeating-linear-gradient(135deg, rgba(255, 90, 90, .62) 0 4px, rgba(255, 90, 90, .26) 4px 8px);
  transition: opacity .3s, left .7s cubic-bezier(.5, 0, .2, 1), width .7s cubic-bezier(.5, 0, .2, 1);
}
.mk.is-scan .mk-gap { opacity: 1; animation: mkScan .5s ease-in-out 2; }
@keyframes mkScan { 50% { opacity: .45; } }
.mk.is-cut .mk-gap { opacity: 0; width: 0 !important; animation: none; }
.mk-cb {
  border-radius: 5px; background: linear-gradient(180deg, #8FF0D4, #4FCDAA); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  opacity: 0; transform: scaleY(.3); transition: opacity .25s, transform .35s var(--spring);
}
.mk.is-cap .mk-cb { opacity: 1; transform: none; }
.mk-cb.lit { background: linear-gradient(180deg, #FFE27A, #F2C440); }
.mk-kf {
  top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--gold); transform: rotate(45deg) scale(0);
  box-shadow: 0 0 10px rgba(239, 194, 108, .9); transition: transform .35s var(--spring); z-index: 2; bottom: auto;
}
.mk.is-zoom .mk-kf { transform: rotate(45deg) scale(1); }
.mk-music {
  left: 0; width: 0; border-radius: 5px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 143, 171, .35), rgba(255, 143, 171, .18)); box-shadow: inset 0 0 0 1px rgba(255, 143, 171, .45);
  transition: width 1s cubic-bezier(.5, 0, .2, 1);
}
.mk-music::after {
  content: ''; position: absolute; inset: 3px 3px; background: #FF8FAB; opacity: .8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 12h1l1-4 1 8 1-6 1 4 1-7 1 10 1-5 1 3 1-6 1 9 1-4 1 2 1-5 1 7 1-3 1 1 1-6 1 9 1-5 1 3 1-2 1 1h1' stroke='black' fill='none' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x center / 24px 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 12h1l1-4 1 8 1-6 1 4 1-7 1 10 1-5 1 3 1-6 1 9 1-4 1 2 1-5 1 7 1-3 1 1 1-6 1 9 1-5 1 3 1-2 1 1h1' stroke='black' fill='none' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x center / 24px 100%;
}
.mk.is-mus .mk-music { width: 71%; }
.mk-over { position: absolute; left: 40px; right: 10px; top: 20px; bottom: 8px; pointer-events: none; }
.mk-head { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--gold); box-shadow: 0 0 10px rgba(242, 200, 120, .8); border-radius: 2px; }
.mk-head::before { content: ''; position: absolute; top: -6px; left: -4px; width: 10px; height: 7px; background: var(--gold); clip-path: polygon(0 0, 100% 0, 50% 100%); }

.mk-toast {
  position: absolute; z-index: 4; top: 50px; left: 50%; display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px 8px 12px; border-radius: 999px; white-space: nowrap; max-width: calc(100% - 24px);
  font-size: 13px; font-weight: 600; color: var(--tx);
  background: rgba(18, 17, 19, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(74, 222, 110, .35), 0 16px 40px -18px rgba(0, 0, 0, .9);
  opacity: 0; transform: translate(-50%, -8px); transition: opacity .35s, transform .4s var(--spring); pointer-events: none;
}
.mk-toast span { overflow: hidden; text-overflow: ellipsis; }
.mk-toast i { position: relative; width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%; background: var(--ok); }
.mk-toast i::after { content: ''; position: absolute; left: 5.5px; top: 3px; width: 4px; height: 7px; border: solid #08200F; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mk.s-done .mk-toast { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 600px) {
  .mk-view { aspect-ratio: 16 / 9; }
  .mk-cap { top: auto; bottom: 13%; }
}
@supports not (aspect-ratio: 1) { @media (min-width: 600px) { .mk-view { padding-bottom: 56.25%; } } }

/* a wide screen: EditFast AI in its own column, the whole conversation on view */
@media (min-width: 900px) {
  .mk-main { grid-template-columns: minmax(250px, 29%) minmax(0, 1fr); }
  .mk-ai {
    position: relative; inset: auto; gap: 10px; padding: 14px 14px 14px;
    border-inline-end: 1px solid rgba(255, 240, 220, .05);
    background: linear-gradient(180deg, rgba(79, 227, 193, .04), rgba(238, 114, 180, .03) 70%, transparent);
  }
  .mk-ai-h { display: flex; align-items: center; gap: 7px; font-size: 13px; }
  .mk-ai-h b { font-weight: 700; }
  .mk-ai-sub { margin-inline-start: auto; font-size: 11.5px; color: var(--tx-3); }
  .mk-thread { flex: 1 1 auto; justify-content: flex-start; gap: 9px; padding-top: 4px; }
  .mk:not(.s-chat) .mk-thread { opacity: 1; transform: none; }
  .mk-me { font-size: 13px; }
  .mk-plan li { font-size: 13px; }
  .mk.s-play .mk-input { opacity: 1; transform: none; }
  .mk-toast { top: 52px; left: auto; right: auto; inset-inline-end: 22px; transform: translateY(-8px); }
  .mk.s-done .mk-toast { transform: none; }
  .mk-lane { height: 26px; }
  .mk-lv .mk-trk { height: 28px; }
}
.mk-spark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; font-size: 12px; color: #fff; background: linear-gradient(135deg, var(--ai-a), var(--ai-b)); box-shadow: 0 6px 16px -6px rgba(238, 114, 180, .7); }

/* ══════════════════════════════════════════════ EditFast AI ═══ */
.pc-ai .pc-head h2 em { background: linear-gradient(100deg, #7FEAD2, #EE72B4); -webkit-background-clip: text; background-clip: text; }
.aic { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.aic-asks { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 6px; margin: 0 -2px; }
.aic-asks::-webkit-scrollbar { display: none; }
.aic-ask {
  position: relative; overflow: hidden; flex: 0 0 auto; scroll-snap-align: start;
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; min-height: 48px;
  border-radius: 14px; border: 1px solid rgba(255, 240, 220, .08); background: rgba(255, 242, 225, .035);
  color: var(--tx-2); font-size: 15px; font-weight: 500; text-align: start; cursor: pointer;
  transition: background .25s, border-color .25s, color .25s, transform .2s var(--spring);
}
.aic-ask:hover { color: var(--tx); border-color: rgba(255, 240, 220, .18); }
.aic-ask i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--h); box-shadow: 0 0 12px var(--h); }
.aic-ask.on {
  color: var(--tx); border-color: rgba(79, 227, 193, .42);
  background: linear-gradient(110deg, rgba(79, 227, 193, .13), rgba(238, 114, 180, .1));
  box-shadow: 0 12px 30px -18px rgba(79, 227, 193, .7);
}
.aic-ask::after { content: ''; position: absolute; bottom: 0; inset-inline-start: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--ai-a), var(--ai-b)); }
.aic.auto .aic-ask.on::after { animation: aicBar 6.5s linear forwards; }
@keyframes aicBar { to { width: 100%; } }

.aic-card {
  position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 20px 20px 18px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(79, 227, 193, .10), transparent 55%),
    radial-gradient(100% 80% at 0% 100%, rgba(238, 114, 180, .10), transparent 55%),
    rgba(16, 15, 17, .92);
  box-shadow: 0 34px 80px -36px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(255, 240, 220, .06), 0 0 90px -46px rgba(238, 114, 180, .55);
}
.aic-top { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 14px; }
.aic-chat { display: grid; }
.aic-p { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s; }
.aic-p.on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s; }
.aic-me {
  justify-self: end; width: fit-content; max-width: 90%; margin: 0 0 12px; margin-inline-start: auto; padding: 9px 14px;
  border-radius: 16px 16px 5px 16px; font-size: 15px; color: #FBEFD6;
  background: linear-gradient(180deg, rgba(247, 216, 148, .18), rgba(230, 179, 86, .12)); box-shadow: inset 0 0 0 1px rgba(239, 194, 108, .3);
}
html[dir="ltr"] .aic-me { border-radius: 16px 16px 16px 5px; }
.aic-plan { padding: 14px 16px; border-radius: 16px; background: rgba(255, 242, 225, .035); box-shadow: inset 0 0 0 1px rgba(79, 227, 193, .2); }
.aic-plan > b { display: block; font-size: 13px; font-weight: 700; color: #8EEFD8; margin-bottom: 8px; }
.aic-plan ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: s; }
.aic-plan li { position: relative; display: flex; align-items: flex-start; gap: 11px; font-size: 15px; line-height: 1.7; color: var(--tx); counter-increment: s; }
.aic-plan li::before {
  content: counter(s); flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center;
  font: 700 11.5px var(--num); color: #062019; background: linear-gradient(135deg, var(--ai-a), #8EEFD8);
}
.aic-p.on li { animation: aicIn .45s var(--ease) both; }
.aic-p.on li:nth-child(2) { animation-delay: .12s; }
.aic-p.on li:nth-child(3) { animation-delay: .24s; }
@keyframes aicIn { from { opacity: 0; transform: translateX(10px); } }
html[dir="ltr"] .aic-p.on li { animation-name: aicInL; }
@keyframes aicInL { from { opacity: 0; transform: translateX(-10px); } }
.aic-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 14px; }
.aic-do { display: inline-flex; padding: 7px 20px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-a), var(--gold-b)); box-shadow: var(--glow); }
.aic-undo { font-size: 13.5px; color: var(--tx-3); }
.aic-undo kbd { font: 600 11.5px var(--num); padding: 2px 6px; border-radius: 5px; color: var(--tx); background: rgba(255, 242, 225, .08); box-shadow: inset 0 -1px 0 rgba(255, 240, 220, .14); }

/* a small timeline under the plan: what the request does to it */
.aic-tl { margin-top: 16px; padding: 10px 12px 9px; border-radius: 12px; background: rgba(0, 0, 0, .32); box-shadow: inset 0 0 0 1px rgba(255, 240, 220, .05); display: grid; gap: 5px; }
.aic-ln { display: flex; align-items: center; gap: 8px; height: 16px; }
.aic-ln > b { width: 20px; flex: 0 0 auto; font: 600 9px var(--num); color: var(--tx-4); text-align: center; transition: color .3s; }
.aic-ln > span { position: relative; flex: 1 1 auto; height: 100%; border-radius: 4px; background: rgba(255, 240, 220, .03); }
.aic-ln i { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; }
.aic-tl .c { left: var(--ld); width: var(--wd); background: linear-gradient(180deg, #3A302A, #241D19); box-shadow: inset 0 0 0 1px rgba(255, 240, 220, .1); transition: left .5s var(--ease), width .5s var(--ease); }
.aic-tl .c::after { content: ''; position: absolute; inset: 3px 3px; background: repeating-linear-gradient(90deg, rgba(255, 214, 160, .55) 0 1.5px, transparent 1.5px 4px); border-radius: 2px; }
.aic-tl .g { left: var(--l0); width: 0; opacity: 0; background: repeating-linear-gradient(135deg, rgba(255, 90, 90, .7) 0 3px, rgba(255, 90, 90, .3) 3px 6px); }
.aic-card[data-ask="0"] .aic-tl .c { left: var(--l1); width: var(--w); animation: aicMove 2.6s var(--ease) .25s both; }
.aic-card[data-ask="0"] .aic-tl .g { animation: aicGap 2.6s var(--ease) .25s both; }
@keyframes aicMove { 0%, 42% { left: var(--l0); } 78%, 100% { left: var(--l1); } }
@keyframes aicGap { 0% { left: var(--l0); width: 4%; opacity: 0; } 14%, 42% { left: var(--l0); width: 4%; opacity: 1; } 78%, 100% { left: var(--l1); width: 0; opacity: 0; } }
.aic-tl .k { top: 50%; bottom: auto; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 1px; background: var(--gold); box-shadow: 0 0 8px rgba(239, 194, 108, .8); transform: rotate(45deg) scale(0); transition: transform .35s var(--spring); z-index: 1; }
.aic-tl .x { top: 0; bottom: 0; width: 12px; margin-left: -6px; border-radius: 0; background: linear-gradient(180deg, #FFC27A, #FFA552); clip-path: polygon(0 0, 50% 50%, 0 100%, 100% 100%, 50% 50%, 100% 0); opacity: 0; transform: scale(.3); transition: opacity .3s, transform .35s var(--spring); z-index: 1; }
.aic-tl .t { width: 14.5%; background: linear-gradient(180deg, #8FF0D4, #4FCDAA); opacity: 0; transform: scaleY(.3); transition: opacity .25s, transform .35s var(--spring); }
.aic-tl .tt { left: 0; width: 22%; background: linear-gradient(180deg, #FFE27A, #F2C440); opacity: 0; transform: scaleX(.4); transform-origin: 0 50%; transition: opacity .25s, transform .4s var(--spring); }
.aic-tl .m { left: 0; width: 0; background: linear-gradient(180deg, rgba(255, 143, 171, .5), rgba(255, 143, 171, .25)); box-shadow: inset 0 0 0 1px rgba(255, 143, 171, .5); transition: width .9s var(--ease); }
.aic-tl .m::after { content: ''; position: absolute; inset: 3px 3px; background: repeating-linear-gradient(90deg, rgba(255, 170, 192, .9) 0 1.5px, transparent 1.5px 3.5px); border-radius: 2px; opacity: .7; }
.aic-tl .s { width: 3%; background: linear-gradient(180deg, #FFCB8E, #FFB46B); opacity: 0; transform: scale(.3); transition: opacity .25s, transform .35s var(--spring); }
.aic-card[data-ask="0"] .ln-v > b { color: #FF9C9C; }
.aic-card[data-ask="1"] .ln-t > b, .aic-card[data-ask="1"] .ln-v > b { color: #8EEFD8; }
.aic-card[data-ask="1"] .aic-tl .k { transform: rotate(45deg) scale(1); }
.aic-card[data-ask="1"] .aic-tl .t { opacity: 1; transform: none; }
.aic-card[data-ask="1"] .aic-tl .t:nth-child(3) { transition-delay: .08s; }
.aic-card[data-ask="1"] .aic-tl .t:nth-child(4) { transition-delay: .16s; }
.aic-card[data-ask="1"] .aic-tl .t:nth-child(5) { transition-delay: .24s; }
.aic-card[data-ask="1"] .aic-tl .t:nth-child(6) { transition-delay: .32s; }
.aic-card[data-ask="1"] .aic-tl .t:nth-child(7) { transition-delay: .4s; }
.aic-card[data-ask="2"] .ln-t > b, .aic-card[data-ask="2"] .ln-a > b { color: #FFD9A0; }
.aic-card[data-ask="2"] .aic-tl .tt { opacity: 1; transform: none; }
.aic-card[data-ask="2"] .aic-tl .m { width: 100%; }
.aic-card[data-ask="3"] .ln-s > b, .aic-card[data-ask="3"] .ln-v > b { color: #FFCB8E; }
.aic-card[data-ask="3"] .aic-tl .x { opacity: 1; transform: none; }
.aic-card[data-ask="3"] .aic-tl .s { opacity: 1; transform: none; }
.aic-card[data-ask="3"] .aic-tl .s:nth-child(2) { transition-delay: .1s; }
.aic-card[data-ask="3"] .aic-tl .s:nth-child(3) { transition-delay: .2s; }
.aic-card[data-ask="3"] .aic-tl .s:nth-child(4) { transition-delay: .3s; }

.aic-proof { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.aic-proof li { padding: 16px 16px 15px; border-radius: 16px; background: rgba(255, 242, 225, .03); box-shadow: var(--edge); }
.aic-proof b { display: block; font-size: 15.5px; font-weight: 700; margin-bottom: 4px; }
.aic-proof span { display: block; font-size: 14px; line-height: 1.75; color: var(--tx-2); }
.aic-proof li:first-child b { color: #8EEFD8; }
.aic-proof li:nth-child(2) b { color: #F2C878; }
.aic-proof li:nth-child(3) b { color: #FF9EBB; }
.aic-proof li:nth-child(4) b { color: #C8B6FF; }

@media (min-width: 960px) {
  .aic { grid-template-columns: 330px minmax(0, 1fr); gap: 26px; align-items: start; }
  .aic-asks { flex-direction: column; overflow: visible; margin: 0; padding: 0; }
  .aic-ask { width: 100%; min-height: 58px; font-size: 15.5px; }
  .aic-card { padding: 26px 28px 24px; }
  .aic-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
}

/* ═══════════════════════════════════════════ one-click tools ═══ */
.tcg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tc-w { grid-column: span 2; }
.tc {
  --h: #EFC26C; --hr: 239, 194, 108;
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: var(--r-tc);
  background: linear-gradient(172deg, rgba(var(--hr), .085), rgba(255, 242, 225, .012) 52%), #100F11;
  box-shadow: var(--edge);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tc:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(var(--hr), .34), 0 26px 54px -30px rgba(var(--hr), .6); }
.tc-art {
  position: relative; height: 150px; margin: 10px 10px 0; overflow: hidden; border-radius: var(--r-art);
  background: radial-gradient(90% 90% at 50% 0%, rgba(var(--hr), .12), transparent 70%), #0A090A;
  box-shadow: inset 0 0 0 1px rgba(255, 240, 220, .05);
}
.tc-tx { padding: 14px 16px 18px; }
.tc h3 { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 6px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.5; }
.tc h3::before { content: ''; width: 8px; height: 8px; flex: 0 0 auto; margin-top: .55em; border-radius: 50%; background: var(--h); box-shadow: 0 0 10px var(--h); }
.tc h3 > span:not(.num) { min-width: 0; }
.tc-ai { font-weight: 700; background: linear-gradient(100deg, #7FEAD2, #EE72B4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tc h3 .num { font-size: 1.15em; color: var(--h); }
.tc p { margin: 0; font-size: 14.6px; line-height: 1.85; color: var(--tx-2); }
/* small cards on a phone: two side by side */
.tc:not(.tc-w) .tc-art { height: 112px; }
.tc:not(.tc-w) .tc-tx { padding: 12px 13px 15px; }
.tc:not(.tc-w) h3 { font-size: 15.5px; }
.tc:not(.tc-w) p { font-size: 13.6px; line-height: 1.8; }
/* every drawing waits until its card is on screen */
.tc-art *, .tc-art *::before, .tc-art *::after { animation-play-state: paused !important; }
.tc.on .tc-art *, .tc.on .tc-art *::before, .tc.on .tc-art *::after { animation-play-state: running !important; }

/* Smart Cut — the silences light up, then close */
.t-a, .t-b { transition: opacity .3s; }
.cut-strip { position: absolute; left: 14px; right: 14px; top: 36px; height: 56px; display: flex; direction: ltr; }
.cut-strip .sp {
  flex: 1 1 0; position: relative; border-radius: 7px; background: rgba(255, 226, 180, .07); box-shadow: inset 0 0 0 1px rgba(255, 226, 180, .18);
}
.cut-strip .sp::after {
  content: ''; position: absolute; inset: 6px 4px; background: #F6D9B0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg%3E%3Crect x='1' y='9' width='1.8' height='6'/%3E%3Crect x='4' y='5' width='1.8' height='14'/%3E%3Crect x='7' y='8' width='1.8' height='8'/%3E%3Crect x='10' y='2' width='1.8' height='20'/%3E%3Crect x='13' y='7' width='1.8' height='10'/%3E%3Crect x='16' y='10' width='1.8' height='4'/%3E%3Crect x='19' y='4' width='1.8' height='16'/%3E%3Crect x='22' y='8' width='1.8' height='8'/%3E%3C/g%3E%3C/svg%3E") repeat-x center / 16px 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg%3E%3Crect x='1' y='9' width='1.8' height='6'/%3E%3Crect x='4' y='5' width='1.8' height='14'/%3E%3Crect x='7' y='8' width='1.8' height='8'/%3E%3Crect x='10' y='2' width='1.8' height='20'/%3E%3Crect x='13' y='7' width='1.8' height='10'/%3E%3Crect x='16' y='10' width='1.8' height='4'/%3E%3Crect x='19' y='4' width='1.8' height='16'/%3E%3Crect x='22' y='8' width='1.8' height='8'/%3E%3C/g%3E%3C/svg%3E") repeat-x center / 16px 100%;
}
.cut-strip .gap {
  flex: 0 0 24px; margin: 0 3px; border-radius: 6px; opacity: .35;
  background: repeating-linear-gradient(135deg, rgba(255, 90, 90, .65) 0 5px, rgba(255, 90, 90, .25) 5px 10px);
  animation: tcGap 4.6s var(--ease) infinite;
}
@keyframes tcGap {
  0%, 18% { flex-basis: 24px; margin: 0 3px; opacity: .35; }
  26%, 42% { flex-basis: 24px; margin: 0 3px; opacity: 1; }
  56%, 88% { flex-basis: 0; margin: 0; opacity: 0; }
  100% { flex-basis: 24px; margin: 0 3px; opacity: .35; }
}
.cut-tag { position: absolute; left: 0; right: 0; bottom: 14px; display: grid; justify-items: center; font-size: 12.5px; font-weight: 600; }
.cut-tag span { grid-area: 1 / 1; padding: 3px 11px; border-radius: 999px; }
.cut-tag .t-a { color: #FF9C9C; background: rgba(255, 90, 90, .12); animation: tcTagA 4.6s infinite; }
.cut-tag .t-b { color: #C4F57C; background: rgba(184, 243, 93, .1); opacity: 0; animation: tcTagB 4.6s infinite; }
@keyframes tcTagA { 0%, 16% { opacity: 0; } 24%, 46% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes tcTagB { 0%, 54% { opacity: 0; } 62%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* captions — four of the 38 looks, in turn */
.tc-cap .tc-art { display: flex; align-items: stretch; gap: 18px; padding: 12px 16px; }
.cap-phone { position: relative; flex: 0 0 auto; height: 100%; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 240, 220, .1), 0 18px 34px -16px rgba(0, 0, 0, .9); }
.cap-bg { position: absolute; inset: 0; background: radial-gradient(70% 40% at 50% 100%, #3B2D3A, transparent 70%), radial-gradient(60% 50% at 70% 20%, rgba(255, 180, 107, .35), transparent 70%), linear-gradient(180deg, #2C2330, #141018); }
.cap-bg::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 0; height: 46%; border-radius: 50% 50% 0 0 / 34% 34% 0 0; background: linear-gradient(180deg, #221C22, #0E0B0E); box-shadow: 0 -1px 0 rgba(255, 194, 122, .35); }
.cap-bg::before { content: ''; position: absolute; left: 36%; right: 36%; bottom: 38%; aspect-ratio: 1 / 1.15; border-radius: 50%; background: linear-gradient(180deg, #221C22, #0E0B0E); box-shadow: 0 -1px 0 rgba(255, 194, 122, .35); }
.cap-line { position: absolute; inset-inline: 6px; bottom: 30%; z-index: 1; text-align: center; font-weight: 800; font-size: 15px; line-height: 1.3; opacity: 0; animation: tcCap 8s infinite; }
.cap-line.s2 { animation-delay: 2s; }
.cap-line.s3 { animation-delay: 4s; }
.cap-line.s4 { animation-delay: 6s; }
@keyframes tcCap { 0% { opacity: 0; transform: translateY(6px) scale(.9); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: none; } }
.cap-line.s1 { color: #FFD23F; text-shadow: 0 2px 0 #000, 0 0 2px #000, 1px 1px 0 #000, -1px -1px 0 #000; }
.cap-line.s1 b { color: #fff; }
.cap-line.s2 span, .cap-line.s2 b { display: inline-block; padding: 1px 6px; border-radius: 5px; background: #FF6FD8; color: #fff; }
.cap-line.s2 b { background: #fff; color: #1A1218; }
.cap-line.s3 { color: rgba(255, 255, 255, .55); }
.cap-line.s3 b { color: #7AE7C7; text-shadow: 0 0 12px rgba(122, 231, 199, .7); }
.cap-line.s4 { color: #fff; font-size: 16px; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
.cap-line.s4 b { display: inline-block; padding: 0 5px; border-radius: 5px; background: #FFD23F; color: #1A1408; text-shadow: none; transform: rotate(-3deg); }
.cap-side { position: relative; flex: 1 1 auto; min-width: 0; padding-top: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cap-side b { font-size: 46px; line-height: 1; font-weight: 700; color: var(--h); letter-spacing: -.04em; text-shadow: 0 0 30px rgba(var(--hr), .45); }
.cap-side span { font-size: 14px; font-weight: 600; color: var(--tx); margin-bottom: 8px; }
.cap-side i { font-style: normal; font-size: 12.5px; padding: 4px 11px; border-radius: 999px; color: var(--tx-2); background: rgba(var(--hr), .1); box-shadow: inset 0 0 0 1px rgba(var(--hr), .25); }
.tc-cap .tc-art { height: 200px; }

/* studio voice — the noise of the room gives way to a clean voice */
.vb { position: absolute; left: 14px; right: 14px; top: 16px; height: 74px; display: flex; align-items: center; gap: 3px; direction: ltr; }
.vb i { flex: 1 1 0; min-width: 0; height: var(--a); border-radius: 3px; background: rgba(255, 240, 220, .36); animation: tcBar 4.4s var(--ease) infinite; }
@keyframes tcBar { 0%, 36% { height: var(--a); background: rgba(255, 240, 220, .36); } 50%, 88% { height: var(--b); background: var(--h); } 100% { height: var(--a); background: rgba(255, 240, 220, .36); } }
@keyframes tcRaw { 0%, 38% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tcClean { 0%, 38% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
.wv-tag { position: absolute; left: 0; right: 0; bottom: 10px; display: grid; justify-items: center; font-size: 12px; font-weight: 600; }
.wv-tag span { grid-area: 1 / 1; padding: 2px 10px; border-radius: 999px; }
.wv-tag .t-a { color: var(--tx-3); background: rgba(255, 240, 220, .06); animation: tcRaw 4.4s infinite; }
.wv-tag .t-b { color: var(--h); background: rgba(var(--hr), .12); opacity: 0; animation: tcClean 4.4s infinite; }

/* auto zoom — a gentle push in on the line that matters */
.zm-frame { position: absolute; top: 12px; left: 50%; width: 128px; aspect-ratio: 16 / 10; margin-left: -64px; border-radius: 9px; overflow: hidden; background: linear-gradient(180deg, #2E2318, #17110D); box-shadow: inset 0 0 0 1px rgba(255, 240, 220, .1); }
.zm-in { position: absolute; inset: 0; transform-origin: 50% 40%; animation: tcZoom 4.8s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes tcZoom { 0%, 14% { transform: scale(1); } 24%, 40% { transform: scale(1.38); } 52%, 62% { transform: scale(1); } 72%, 86% { transform: scale(1.2); } 100% { transform: scale(1); } }
.zm-head { position: absolute; left: 50%; top: 22%; width: 26px; height: 30px; margin-left: -13px; border-radius: 50%; background: #0F0C0B; box-shadow: 0 -1px 0 rgba(255, 210, 63, .6); }
.zm-body { position: absolute; left: 50%; bottom: -8px; width: 70px; height: 40px; margin-left: -35px; border-radius: 50% 50% 0 0; background: #0F0C0B; box-shadow: 0 -1px 0 rgba(255, 210, 63, .5); }
.zm-keys { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 10px; border-radius: 4px; background: rgba(255, 240, 220, .06); }
.zm-keys i { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--h); transform: rotate(45deg); box-shadow: 0 0 8px var(--h); opacity: .35; animation: tcKey 4.8s infinite; }
.zm-keys i:nth-child(1) { left: 22%; }
.zm-keys i:nth-child(2) { left: 50%; animation-delay: 1.6s; }
.zm-keys i:nth-child(3) { left: 78%; animation-delay: 3.2s; }
@keyframes tcKey { 0%, 100% { opacity: .35; transform: rotate(45deg) scale(1); } 8%, 22% { opacity: 1; transform: rotate(45deg) scale(1.35); } 32% { opacity: .35; transform: rotate(45deg) scale(1); } }

/* background removal — the room wipes away, a new place comes in */
.bg-frame { position: absolute; top: 12px; bottom: 12px; left: 50%; width: min(230px, calc(100% - 24px)); transform: translateX(-50%); border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 240, 220, .1); }
.bg-check { position: absolute; inset: 0; z-index: 0; background: repeating-conic-gradient(#2A2A2E 0 25%, #1C1C20 0 50%) 0 0 / 16px 16px; }
.bg-new { position: absolute; inset: 0; z-index: 1; opacity: 0; background: radial-gradient(70% 70% at 70% 20%, rgba(255, 210, 63, .55), transparent 60%), linear-gradient(160deg, #1E6FA8, #3EC5E8 60%, #9BE7F5); animation: tcNew 5.2s infinite; }
.bg-room { position: absolute; inset: 0; z-index: 2; background: radial-gradient(40% 50% at 20% 40%, rgba(255, 166, 90, .55), transparent 70%), linear-gradient(180deg, #3A2A22, #1A1311); clip-path: inset(0 0 0 0); animation: tcWipe 5.2s cubic-bezier(.6, 0, .3, 1) infinite; }
.bg-room::after { content: ''; position: absolute; right: 12%; top: 16%; width: 26%; height: 40%; border-radius: 3px; background: linear-gradient(180deg, #10233A, #24476A); box-shadow: 0 0 0 2px #4A382D; }
.bg-who { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; width: 100%; height: 92%; }
.bg-wipe { position: absolute; z-index: 4; top: 0; bottom: 0; left: 0; width: 2px; background: var(--h); box-shadow: 0 0 14px var(--h); opacity: 0; animation: tcWipeLine 5.2s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes tcWipe { 0%, 14% { clip-path: inset(0 0 0 0); } 44%, 92% { clip-path: inset(0 0 0 100%); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes tcWipeLine { 0%, 13% { left: 0; opacity: 0; } 15% { opacity: 1; } 43% { left: 100%; opacity: 1; } 46%, 100% { left: 100%; opacity: 0; } }
@keyframes tcNew { 0%, 52% { opacity: 0; } 62%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* steady camera — before and after, side by side */
.tc-stab .tc-art { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 10px; }
.sb-frame { position: relative; flex: 1 1 0; max-width: 120px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 240, 220, .1); }
.sb-in { position: absolute; inset: -8%; background: linear-gradient(180deg, #2B2348, #6B4E8E 70%, #C78FB0); }
.sb-shake .sb-in { animation: tcShake .5s steps(2) infinite; }
@keyframes tcShake { 0% { transform: translate(2px, -2px) rotate(.8deg); } 25% { transform: translate(-3px, 1px) rotate(-1deg); } 50% { transform: translate(1px, 3px) rotate(.4deg); } 75% { transform: translate(-2px, -1px) rotate(-.6deg); } 100% { transform: translate(3px, 1px) rotate(1deg); } }
.sb-sun { position: absolute; left: 58%; top: 26%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: #FFD8A0; box-shadow: 0 0 16px rgba(255, 216, 160, .8); }
.sb-hill { position: absolute; left: -10%; right: -10%; bottom: 0; height: 42%; border-radius: 50% 50% 0 0; background: #1A1430; }
.sb-frame span { position: absolute; bottom: 4px; inset-inline-start: 6px; font-size: 10.5px; font-weight: 600; padding: 0 6px; border-radius: 5px; background: rgba(0, 0, 0, .55); color: var(--tx); }
.sb-frame:not(.sb-shake) span { color: var(--h); }

/* smooth slow motion — the frames in between appear */
.sl-arc { position: absolute; left: 16px; right: 16px; top: 18px; bottom: 26px; }
.sl-arc i { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; }
.sl-arc .k { background: var(--h); box-shadow: 0 0 12px rgba(var(--hr), .8); }
.sl-arc .m { background: rgba(var(--hr), .55); transform: scale(.75); opacity: 0; animation: tcMid 4.2s infinite; }
.sl-arc i:nth-child(1) { left: 6%; top: 82%; }
.sl-arc i:nth-child(2) { left: 16%; top: 54%; animation-delay: .25s; }
.sl-arc i:nth-child(3) { left: 26%; top: 32%; animation-delay: .35s; }
.sl-arc i:nth-child(4) { left: 37%; top: 18%; animation-delay: .45s; }
.sl-arc i:nth-child(5) { left: 50%; top: 12%; }
.sl-arc i:nth-child(6) { left: 63%; top: 18%; animation-delay: .55s; }
.sl-arc i:nth-child(7) { left: 74%; top: 32%; animation-delay: .65s; }
.sl-arc i:nth-child(8) { left: 84%; top: 54%; animation-delay: .75s; }
.sl-arc i:nth-child(9) { left: 94%; top: 82%; }
@keyframes tcMid { 0%, 20% { opacity: 0; transform: scale(.3); } 32%, 84% { opacity: 1; transform: scale(.75); } 100% { opacity: 0; transform: scale(.3); } }

/* sharper photos — the blur wipes away */
.up-pic { position: absolute; top: 12px; bottom: 12px; left: 50%; width: min(240px, calc(100% - 24px)); transform: translateX(-50%); border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 240, 220, .1); }
.up-smooth { position: absolute; inset: 0; background: linear-gradient(180deg, #FF9E6B, #FFCF8A 45%, #7C4C7A); }
.up-sun { position: absolute; left: 50%; top: 30%; width: 26%; aspect-ratio: 1; margin-left: -13%; border-radius: 50%; background: #FFF1CF; box-shadow: 0 0 24px #FFE3A0; }
.up-m1 { position: absolute; left: -6%; bottom: 0; width: 64%; height: 46%; background: #3E2448; clip-path: polygon(0 100%, 48% 6%, 100% 100%); }
.up-m2 { position: absolute; right: -10%; bottom: 0; width: 70%; height: 36%; background: #2A1832; clip-path: polygon(0 100%, 56% 0, 100% 100%); }
.up-px { position: absolute; inset: 0; backdrop-filter: blur(6px) saturate(.75); -webkit-backdrop-filter: blur(6px) saturate(.75); background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .06) 0 10px, transparent 10px 20px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 10px, transparent 10px 20px); clip-path: inset(0 0 0 0); animation: tcUp 4.6s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes tcUp { 0%, 16% { clip-path: inset(0 0 0 0); } 46%, 88% { clip-path: inset(0 0 0 100%); } 100% { clip-path: inset(0 0 0 0); } }
.up-x { position: absolute; top: 8px; right: 8px; direction: ltr; unicode-bidi: isolate; font-size: 14px; font-weight: 700; padding: 2px 9px; border-radius: 999px; color: var(--gold-ink); background: var(--h); }

/* 343 effects — a wall of small ones, each moving its own way */
.fx-grid { position: absolute; inset: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); gap: 8px; }
.fx-grid i { position: relative; overflow: hidden; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255, 240, 220, .08); }
.fx-grid .f1 { background: radial-gradient(circle at 50% 50%, #FF6FD8, #3A1033 60%); animation: fxGlow 2.4s ease-in-out infinite alternate; }
@keyframes fxGlow { to { filter: brightness(1.6) saturate(1.3); } }
.fx-grid .f2 { background: linear-gradient(90deg, #4CC9F0 0 33%, #FF6FD8 33% 66%, #B8F35D 66%); animation: fxGlitch 1.2s steps(3) infinite; }
@keyframes fxGlitch { 0% { transform: translateX(0); } 33% { transform: translateX(-6px) skewX(-8deg); } 66% { transform: translateX(5px); } 100% { transform: translateX(0); } }
.fx-grid .f3 { background: linear-gradient(180deg, #5A3A1E, #C08A52); filter: sepia(.6); }
.fx-grid .f3::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px); animation: fxFilm .4s steps(2) infinite; }
@keyframes fxFilm { 50% { transform: translateY(2px); } }
.fx-grid .f4 { background: conic-gradient(from 0deg, #FFB46B, #FF7A7A, #B9A3FF, #4CC9F0, #FFB46B); animation: fxSpin 5s linear infinite; }
@keyframes fxSpin { to { filter: hue-rotate(360deg); } }
.fx-grid .f5 { background: radial-gradient(circle at 30% 40%, #fff, #7AE7C7 30%, #0B3B33 70%); animation: fxBlur 2.6s ease-in-out infinite alternate; }
@keyframes fxBlur { to { filter: blur(4px); } }
.fx-grid .f6 { background: linear-gradient(120deg, #1A1B3A, #3A2A6A); }
.fx-grid .f6::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(100deg, transparent 40%, rgba(255, 210, 63, .7) 50%, transparent 60%); animation: fxLeak 2.2s ease-in-out infinite; }
@keyframes fxLeak { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
.fx-grid .f7 { background: linear-gradient(180deg, #0E2A24, #1F6F5C); }
.fx-grid .f7::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(122, 231, 199, .25) 0 2px, transparent 2px 5px); animation: fxVhs 1.6s linear infinite; }
@keyframes fxVhs { to { background-position: 0 20px; } }
.fx-grid .f8 { background: radial-gradient(circle at 50% 50%, #FFD23F 0 18%, transparent 19%), linear-gradient(135deg, #40202A, #7A3446); animation: fxPop 1.8s cubic-bezier(.3, 1.4, .5, 1) infinite; }
@keyframes fxPop { 0%, 100% { background-size: 100% 100%, 100% 100%; } 50% { background-size: 160% 160%, 100% 100%; } }

@media (min-width: 900px) {
  .tcg { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .tc-tall { grid-row: span 2; }
  .tc-tall .tc-art { flex: 1 1 auto; height: auto; min-height: 260px; }
  .tc .tc-art { height: 168px; }
  .tc:not(.tc-w) .tc-art { height: 168px; }
  .tc:not(.tc-w) .tc-tx { padding: 14px 16px 18px; }
  .tc:not(.tc-w) h3 { font-size: 17px; }
  .tc:not(.tc-w) p { font-size: 14.6px; }
  .tc-tall .tc-art { padding: 18px 22px; gap: 26px; }
  .tc-tall .cap-line { font-size: 19px; }
  .tc-tall .cap-side b { font-size: 64px; }
}

/* ══════════════════════════════════════════════════ templates ═══ */
.pc-tpl .pc-head h2 em { background: linear-gradient(100deg, #FFB3A6, #FF7A7A 60%, #FFD166); -webkit-background-clip: text; background-clip: text; }
.tp-row {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
  padding: 6px 16px 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.tp-row::-webkit-scrollbar { display: none; }
.tp-row:focus-visible { outline: 2px solid var(--red-lift); outline-offset: -2px; border-radius: 16px; }
.tp { flex: 0 0 auto; width: 46vw; max-width: 220px; margin: 0; scroll-snap-align: start; cursor: pointer; }
.tp-frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 20px; background: #000; box-shadow: 0 0 0 1px rgba(255, 240, 220, .08), 0 22px 44px -26px var(--a); transition: transform .35s var(--ease), box-shadow .35s; }
@supports not (aspect-ratio: 1) { .tp-frame { height: 0; padding-bottom: 177.78%; } }
.tp:hover .tp-frame, .tp.loud .tp-frame { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--a), 0 26px 50px -24px var(--a); }
.tp-frame img, .tp-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-frame video { opacity: 0; transition: opacity .4s; }
.tp.playing .tp-frame video { opacity: 1; }
.tp-snd {
  position: absolute; z-index: 2; top: 10px; inset-inline-end: 10px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0, 0, 0, .55) 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 9H2v6h4l5 4z'/%3E%3Cpath d='M23 9l-6 6M17 9l6 6'/%3E%3C/svg%3E") center/16px no-repeat;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.tp.loud .tp-snd { 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 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E"); background-color: var(--a); }
.tp figcaption { padding: 12px 4px 0; }
.tp figcaption b { display: block; font-size: 17px; font-weight: 700; color: var(--a); }
.tp figcaption span { display: block; font-size: 13.5px; line-height: 1.7; color: var(--tx-2); }
@media (min-width: 900px) {
  .tp-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 20px; width: min(1040px, calc(100% - 40px)); margin: 0 auto; padding: 4px 0 0; overflow: visible; }
  .tp { width: auto; max-width: none; }
}

/* ═══════════════════════════════════════ no Adobe, for anyone ═══ */
.vs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: center; max-width: 980px; margin: 0 auto; }
.vs-old, .vs-new { border-radius: 22px; padding: 20px 20px 18px; }
.vs-old { background: rgba(255, 242, 225, .025); box-shadow: var(--edge); }
.vs-cap { display: block; font-size: 14px; font-weight: 600; color: var(--tx-3); margin-bottom: 12px; }
.vs-old ul, .vs-new ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vs-old li { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 242, 225, .035); color: var(--tx-2); font-size: 15px; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.vs-old li i { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 7px; display: grid; place-items: center; font: 700 11.5px var(--num); font-style: normal; color: var(--tx-3); background: rgba(255, 240, 220, .06); }
.vs-old li span { background: linear-gradient(rgba(255, 122, 122, .85), rgba(255, 122, 122, .85)) no-repeat 0 54% / 0 2px; transition: background-size .45s var(--ease); }
html[dir="rtl"] .vs-old li span { background-position: 100% 58%; }
.vs.go .vs-old li span { background-size: 100% 2px; transition-delay: calc(var(--d) * .22s + .2s); }
.vs.go .vs-old li { opacity: .5; transition-delay: calc(var(--d) * .22s + .5s); }
.vs-arrow { justify-self: center; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-a), var(--gold-b)); box-shadow: var(--glow); transform: rotate(-90deg); }

.vs-new {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, rgba(239, 194, 108, .16), transparent 60%), linear-gradient(170deg, #1C1814, #0F0D0C);
  box-shadow: inset 0 0 0 1px rgba(239, 194, 108, .34), 0 30px 70px -34px rgba(239, 194, 108, .5);
}
.vs-new-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 20px; font-weight: 800; }
.vs-logo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #0B0A0C; box-shadow: inset 0 0 0 1px rgba(47, 217, 190, .24), 0 8px 20px -8px rgba(47, 217, 190, .5); }
.vs-new > p { margin: 0 0 14px; color: var(--tx); font-size: 16px; }
.vs-new li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--tx); }
.vs-new li::before { content: ''; width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; background: rgba(239, 194, 108, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2C878' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; }
.vs.go .vs-new { animation: vsGlow 1.4s var(--ease) 1.5s both; }
@keyframes vsGlow { 40% { box-shadow: inset 0 0 0 1px rgba(239, 194, 108, .7), 0 30px 90px -26px rgba(239, 194, 108, .8); } }
@media (min-width: 860px) {
  .vs { grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); gap: 18px; }
  .vs-arrow { transform: none; }
  html[dir="ltr"] .vs-arrow svg { transform: scaleX(-1); }
  .vs-old, .vs-new { padding: 24px 24px 22px; }
}

/* the honest table */
.vt { max-width: 980px; margin: 34px auto 0; border-radius: 22px; overflow: hidden; background: rgba(255, 242, 225, .02); box-shadow: var(--edge); }
.vt-row { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; align-items: center; gap: 12px; padding: 13px 20px; border-top: 1px solid rgba(255, 240, 220, .05); font-size: 15px; }
.vt-row:first-child { border-top: 0; }
.vt-h { font-size: 13.5px; font-weight: 700; color: var(--tx-3); background: rgba(255, 242, 225, .025); }
.vt-h span:last-child { color: var(--gold-text); }
.vt-row b { font-weight: 600; color: var(--tx); }
.vt-row > span { color: var(--tx-3); display: flex; align-items: center; gap: 8px; }
.vt-row em { font-style: normal; color: var(--tx); display: flex; align-items: center; gap: 8px; font-weight: 500; }
.vt-row:not(.vt-h) > span::before { content: ''; width: 14px; height: 14px; flex: 0 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8A8A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/12px no-repeat; }
.vt-row em::before { content: ''; width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%; background: rgba(239, 194, 108, .2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2C878' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat; }
@media (max-width: 640px) {
  .vt-h { display: none; }
  .vt-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; padding: 13px 14px; align-items: start; }
  .vt-row b { grid-column: 1 / -1; font-size: 13px; color: var(--tx-3); font-weight: 600; }
  .vt-row > span, .vt-row em { align-items: flex-start; line-height: 1.6; }
  .vt-row > span::before, .vt-row em::before { margin-top: 4px; }
  .vt-row > span { font-size: 14.5px; }
  .vt-row em { font-size: 15.5px; }
}

/* who it is for */
.who { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 980px; margin: 34px auto 0; }
.who-c { --h: #EFC26C; --hr: 239, 194, 108; padding: 20px; border-radius: 20px; background: linear-gradient(165deg, rgba(var(--hr), .1), rgba(255, 242, 225, .015) 60%); box-shadow: inset 0 0 0 1px rgba(var(--hr), .16); }
.who-i { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 12px; color: var(--h); background: rgba(var(--hr), .13); }
.who-c h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.who-c p { margin: 0; font-size: 14.8px; line-height: 1.85; color: var(--tx-2); }
@media (min-width: 760px) { .who { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }

/* ══════════════════════════════════════════════ three steps ═══ */
.how { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; position: relative; }
.how li { position: relative; padding: 22px 20px 20px; border-radius: 20px; background: linear-gradient(170deg, rgba(76, 201, 240, .07), rgba(255, 242, 225, .015) 60%); box-shadow: inset 0 0 0 1px rgba(76, 201, 240, .14); }
.how-n { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 12px; border-radius: 14px; font-size: 22px; font-weight: 700; color: #BFEFFF; background: rgba(76, 201, 240, .12); box-shadow: inset 0 0 0 1px rgba(76, 201, 240, .35), 0 10px 26px -12px rgba(76, 201, 240, .7); }
.how li:nth-child(3) .how-n { color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-a), var(--gold-b)); box-shadow: var(--glow); }
.how h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.how p { margin: 0; color: var(--tx-2); font-size: 15.2px; }
@media (min-width: 760px) {
  .how { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .how::before { content: ''; position: absolute; top: 45px; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, rgba(76, 201, 240, .1), rgba(76, 201, 240, .45), rgba(239, 194, 108, .5)); z-index: 0; }
  html[dir="rtl"] .how::before { background: linear-gradient(270deg, rgba(76, 201, 240, .1), rgba(76, 201, 240, .45), rgba(239, 194, 108, .5)); }
  .how li { z-index: 1; background: linear-gradient(170deg, rgba(76, 201, 240, .07), rgba(14, 13, 15, .96) 60%), #0E0D0F; }
}

/* ══════════════════════════════════════════════ why stronger ═══ */
.why { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.why-c { --h: #EFC26C; --hr: 239, 194, 108; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 18px 18px 17px; border-radius: 18px; background: rgba(255, 242, 225, .022); box-shadow: var(--edge); transition: box-shadow .3s, transform .3s var(--ease); }
.why-c:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(var(--hr), .32), 0 22px 46px -30px rgba(var(--hr), .6); }
.why-i { grid-row: span 2; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 18px; font-weight: 800; color: var(--h); background: rgba(var(--hr), .12); box-shadow: inset 0 0 0 1px rgba(var(--hr), .25); }
.why-c h3 { margin: 2px 0 4px; font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; }
.why-c p { margin: 0; font-size: 14.6px; line-height: 1.85; color: var(--tx-2); }
@media (min-width: 700px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1020px) { .why { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .why-c { display: block; padding: 22px; } .why-i { margin-bottom: 14px; } }

/* ══════════════════════════════════════════════════ pricing ═══ */
.pr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: 1060px; margin: 0 auto; }
.pr-trial {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 16px; margin-bottom: 14px; padding: 18px 18px;
  border-radius: 20px; background: radial-gradient(100% 120% at 100% 0%, rgba(79, 227, 193, .12), transparent 60%), radial-gradient(100% 120% at 0% 100%, rgba(238, 114, 180, .1), transparent 60%), #111012;
  box-shadow: inset 0 0 0 1px rgba(79, 227, 193, .25);
}
.pr-trial-n { display: grid; justify-items: center; line-height: 1; padding: 8px 14px; border-radius: 14px; background: rgba(255, 242, 225, .05); }
.pr-trial-n b { font-size: 40px; color: #fff; }
.pr-trial-n span { font-size: 13px; color: var(--tx-2); margin-top: 4px; }
.pr-trial-t b { display: block; font-size: 17px; font-weight: 700; }
.pr-trial-t span { display: block; font-size: 14px; color: var(--tx-2); line-height: 1.7; }
.pr-trial-t .pr-trial-ai, .st-trialbox .st-ai { color: #8EEFD8; }
.pr-trial-t .pr-trial-ai .ltr, .st-trialbox .st-ai .ltr { display: inline; color: inherit; }
.pr-trial-t .pr-trial-ai b, .st-trialbox .st-ai b { display: inline; font-size: inherit; font-weight: 700; color: #fff; }
.pr-trial-go { grid-column: 1 / -1; margin-top: 8px; min-height: 50px; }
.pc-page .includes li { background: rgba(255, 242, 225, .03); }
.pc-page .includes li:hover { border-color: rgba(239, 194, 108, .22); background: rgba(255, 242, 225, .05); }
.pc-page .includes li::before { background: rgba(239, 194, 108, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2C878' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; }
.pr-r { border-radius: 24px; padding: 18px; background: radial-gradient(90% 60% at 50% 0%, rgba(239, 194, 108, .09), transparent 70%), #100F11; box-shadow: var(--edge), 0 30px 70px -40px rgba(0, 0, 0, .9); }
.pc-page .terms { gap: 10px; }
.pc-page .term { background: rgba(255, 242, 225, .03); border-color: rgba(255, 240, 220, .1); border-radius: 16px; }
.pc-page .term.on { background: linear-gradient(150deg, rgba(239, 194, 108, .12), rgba(255, 242, 225, .02)); border-color: var(--gold); box-shadow: var(--glow); }
.pc-page .term.on .term-price b { color: var(--gold-a); }
.pc-page .term-flag { background: linear-gradient(120deg, var(--ai-a), #3CC8A8); color: #062019; letter-spacing: .02em; }
.pr-note { margin: 10px 2px 0; font-size: 13.5px; color: var(--tx-3); text-align: center; }
@media (max-width: 480px) {
  .pc-page .term { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px 18px; }
  .pc-page .term-price { justify-content: flex-start; }
}
.pc-page .pay-choose { margin-top: 14px; }
.pc-page .guide { border-color: rgba(239, 194, 108, .3); background: radial-gradient(420px 170px at 50% 0%, rgba(239, 194, 108, .08), transparent 72%), var(--bg-000); }
.pc-page .gf .inp:focus { box-shadow: 0 0 0 3px rgba(239, 194, 108, .16); }
@media (min-width: 1020px) {
  .pr { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 34px; align-items: start; }
  .pr-r { padding: 22px; }
}

/* ══════════════════════════════════════════════════════ faq ═══ */
.pc-page .q { background: rgba(255, 242, 225, .025); border-color: rgba(255, 240, 220, .08); }
.pc-page .q.open { border-color: rgba(185, 163, 255, .34); background: rgba(185, 163, 255, .05); }
.pc-page .q-mark { background: rgba(185, 163, 255, .14); color: #D3C6FF; }
.pc-page .q.open .q-mark { background: #6E58C9; color: #fff; }

/* ══════════════════════════════════════════════════════ end ═══ */
.end {
  position: relative; overflow: hidden; text-align: center; padding: 56px 24px; border-radius: 28px;
  background: linear-gradient(170deg, #1C1713, #0C0B0C 70%); box-shadow: inset 0 0 0 1px rgba(239, 194, 108, .28), 0 40px 90px -46px rgba(239, 194, 108, .55);
}
.end-light { position: absolute; inset: -40%; pointer-events: none; background: radial-gradient(30% 30% at 30% 40%, rgba(255, 168, 92, .22), transparent 70%), radial-gradient(26% 26% at 70% 60%, rgba(238, 114, 180, .16), transparent 70%), radial-gradient(24% 24% at 55% 30%, rgba(79, 227, 193, .14), transparent 70%); animation: endDrift 18s ease-in-out infinite alternate; animation-play-state: paused; }
.end.on .end-light { animation-play-state: running; }
@keyframes endDrift { to { transform: translate(8%, -6%) rotate(8deg); } }
.end h2 { position: relative; margin: 0 auto 12px; font-size: clamp(28px, 4vw, 46px); font-weight: 800; letter-spacing: -.04em; line-height: 1.34; max-width: 20ch; }
.end p { position: relative; margin: 0 auto 26px; color: var(--tx-2); font-size: 17px; }
.end-acts { position: relative; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.end-acts .btn { min-height: 54px; }

/* ════════════════════════════════════════════ spacing, phones ═══ */
.pc-page .sec { padding: 92px 0; }
.pc-page .sec.tight { padding: 40px 0 10px; }
.pc-page .ftr { margin-top: 70px; }
@media (max-width: 760px) {
  .pc-page .sec { padding: 64px 0; }
  .pc-head { margin-bottom: 32px; }
  .pc-intro { font-size: 16.5px; }
}
@media (max-width: 520px) {
  .pc-hero { padding: 30px 0 18px; }
  .pc-kicker { font-size: 13.5px; margin-bottom: 14px; }
  .pc-lede { font-size: 16.5px; margin-bottom: 22px; }
  .pc-acts { flex-direction: column; align-items: stretch; gap: 10px; }
  .pc-acts .btn { width: 100%; font-size: 16px; }
  .pc-trust { gap: 8px 14px; margin-top: 18px; }
  .pc-trust li { font-size: 13.5px; }
  .mk { margin-top: 30px; }
  .mk-bar { padding: 0 10px; height: 34px; font-size: 11.5px; }
  .mk-tl { padding: 6px 8px 8px; }
  .mk-over { left: 38px; right: 8px; }
  .aic-card { padding: 16px 14px 14px; border-radius: 22px; }
  .aic-ask { font-size: 14.5px; padding: 11px 14px; }
  .aic-plan { padding: 12px 13px; }
  .aic-plan li { font-size: 14.5px; }
  .tcg { gap: 10px; }
  .end { padding: 42px 18px; border-radius: 24px; }
  .end-acts { flex-direction: column; align-items: stretch; }
  .pr-r { padding: 14px; border-radius: 20px; }
  .vs-old, .vs-new { padding: 16px; }
}
@media (max-width: 380px) {
  .pc-h1 { font-size: 31px; }
  .tc:not(.tc-w) .tc-tx { padding: 11px 11px 14px; }
  .tc:not(.tc-w) h3 { font-size: 14.5px; }
  .tc:not(.tc-w) p { font-size: 13px; }
  .aic-proof { grid-template-columns: minmax(0, 1fr); }
  .cap-side b { font-size: 38px; }
}

/* ════════════════════════════════════════════ reduced motion ═══
   Everything stands at its finished state (js/pc.js puts the mock there). */
@media (prefers-reduced-motion: reduce) {
  .tc-art *, .tc-art *::before, .tc-art *::after { animation: none !important; }
  .cut-strip .gap { flex-basis: 0; margin: 0; opacity: 0; }
  .cut-tag .t-a { opacity: 0; } .cut-tag .t-b { opacity: 1; }
  .vb i { height: var(--b); background: var(--h); } .wv-tag .t-a { opacity: 0; } .wv-tag .t-b { opacity: 1; }
  .aic-card[data-ask="0"] .aic-tl .c, .aic-card[data-ask="0"] .aic-tl .g { animation: none; }
  .cap-line.s1 { opacity: 1; }
  .sl-arc .m { opacity: 1; transform: scale(.75); }
  .bg-room { clip-path: inset(0 0 0 100%); } .bg-new { opacity: 1; }
  .up-px { clip-path: inset(0 0 0 100%); }
  .zm-keys i { opacity: 1; }
  .end-light { animation: none; }
  .vs .vs-old li span { background-size: 100% 2px; }
  .vs .vs-old li { opacity: .5; }
}

/* ═══════════════════════════════════════════════════════════════
   The start page (pc-start.html): an account, the trial, the file.
   ═══════════════════════════════════════════════════════════════ */
.st { position: relative; padding: 40px 0 30px; }
.st-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; max-width: 1080px; margin: 0 auto; }
.st-side { text-align: center; }
.st-side h1 { margin: 0 0 10px; font-size: clamp(28px, 4.4vw, 46px); font-weight: 800; letter-spacing: -.04em; line-height: 1.18; }
.st-side > p { margin: 0 auto; max-width: 44ch; color: var(--tx-2); font-size: 16.5px; }
.st-perks { display: none; }
.st-card {
  position: relative; width: 100%; max-width: 560px; margin: 0 auto; padding: 22px 20px 20px; border-radius: 26px;
  background: radial-gradient(100% 50% at 50% 0%, rgba(239, 194, 108, .08), transparent 70%), #100F11;
  box-shadow: var(--edge), 0 40px 90px -40px rgba(0, 0, 0, .95), 0 0 100px -60px rgba(239, 194, 108, .5);
}
.st-steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; counter-reset: st; }
.st-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: var(--tx-3); text-align: center; counter-increment: st; }
.st-steps li::before {
  content: counter(st); position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font: 700 13px var(--num); color: var(--tx-3); background: #19171A; box-shadow: inset 0 0 0 1.5px rgba(255, 240, 220, .14);
  transition: background .3s, color .3s, box-shadow .3s;
}
.st-steps li::after { content: ''; position: absolute; top: 16px; inset-inline-start: calc(50% + 20px); width: calc(100% - 34px); height: 2px; border-radius: 2px; background: rgba(255, 240, 220, .09); }
.st-steps li:last-child::after { display: none; }
.st-steps li.now { color: var(--tx); font-weight: 600; }
.st-steps li.now::before { color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-a), var(--gold-b)); box-shadow: 0 8px 20px -8px rgba(239, 194, 108, .8); }
.st-steps li.done { color: var(--tx-2); }
.st-steps li.done::before { content: '✓'; color: #062019; background: linear-gradient(135deg, var(--ai-a), #8EEFD8); box-shadow: none; }
.st-steps li.done::after { background: linear-gradient(90deg, var(--ai-a), rgba(239, 194, 108, .6)); }

.st-pane[hidden] { display: none !important; }
.st-pane { animation: stIn .35s var(--ease) both; }
@keyframes stIn { from { opacity: 0; transform: translateY(8px); } }
.st-pane h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1.35; }
.st-pane > p, .st-sub { margin: 0 0 16px; font-size: 15px; color: var(--tx-2); }
.st-form { display: grid; gap: 14px; }
.st-form .gf label { display: block; font-size: 14px; font-weight: 600; color: var(--tx-2); margin-bottom: 7px; }
.st-form .inp {
  width: 100%; padding: 13px 15px; font-size: 16px; border-radius: 12px; border: 1px solid rgba(255, 240, 220, .13);
  background: rgba(0, 0, 0, .35); color: var(--tx); transition: border-color .2s, box-shadow .2s, background .2s;
}
.st-form .inp::placeholder { color: var(--tx-4); }
.st-form .inp:focus { outline: none; border-color: var(--gold); background: rgba(0, 0, 0, .45); box-shadow: 0 0 0 3px rgba(239, 194, 108, .16); }
.st-form .inp.bad { border-color: #F2A33C; }
.st-form .hint { display: block; margin-top: 6px; font-size: 13px; color: var(--tx-3); }
.st-form .btn { min-height: 52px; font-size: 16px; }
.st-msg { display: none; padding: 11px 14px; border-radius: 12px; font-size: 14.5px; line-height: 1.7; }
.st-msg.on { display: block; }
.st-msg.err { background: rgba(242, 163, 60, .1); box-shadow: inset 0 0 0 1px rgba(242, 163, 60, .55); color: #F7C98A; }
.st-msg.ok { background: rgba(74, 222, 110, .09); box-shadow: inset 0 0 0 1px rgba(74, 222, 110, .45); color: #A6EDB3; }
.st-msg.info { background: rgba(76, 201, 240, .08); box-shadow: inset 0 0 0 1px rgba(76, 201, 240, .35); color: #BFEAF8; }
.st-msg.warn { background: rgba(242, 163, 60, .1); box-shadow: inset 0 0 0 1px rgba(242, 163, 60, .45); color: #F7C98A; }
.st-pane > .st-msg.on { margin-bottom: 12px; }
.st-pane > .st-msg.on + .st-note { margin-top: 0; }
.st-swap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-top: 4px; font-size: 14px; }
.st-link { background: none; border: 0; padding: 8px 0; color: var(--gold-text); cursor: pointer; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(242, 200, 120, .35); }
.st-link:hover { text-decoration-color: var(--gold-text); }
.st-quiet { color: var(--tx-3); }

.st-who { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 242, 225, .035); font-size: 14px; color: var(--tx-2); }
.st-who b { color: var(--tx); font-weight: 600; direction: ltr; unicode-bidi: isolate; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.st-who i { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; color: #062019; background: linear-gradient(135deg, var(--ai-a), #8EEFD8); }
.st-who .st-link { margin-inline-start: auto; padding: 4px 0; white-space: nowrap; }

.st-trialbox { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: center; margin-bottom: 16px; padding: 16px; border-radius: 18px; background: radial-gradient(100% 120% at 100% 0%, rgba(79, 227, 193, .12), transparent 60%), rgba(255, 242, 225, .03); box-shadow: inset 0 0 0 1px rgba(79, 227, 193, .25); }
.st-trialbox .pr-trial-n { grid-row: span 3; align-self: center; }
.st-trialbox b { font-size: 16.5px; }
.st-trialbox span { font-size: 14px; color: var(--tx-2); line-height: 1.7; }
.st-trialbox .st-ai { grid-column: 2; }
.st-go { width: 100%; min-height: 56px; font-size: 17px; }
.st-alt { display: block; width: 100%; margin-top: 10px; }
.st-note { margin: 12px 0 0; font-size: 13.5px; color: var(--tx-3); line-height: 1.75; }
.st-spin { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: mkSpin .7s linear infinite; vertical-align: -3px; margin-inline-end: 8px; }

.st-dl { display: grid; gap: 10px; margin-bottom: 12px; }
.st-dl .btn { min-height: 58px; font-size: 17px; }
.st-dl .btn.is-off { opacity: .45; pointer-events: none; }
.st-dl-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 13.5px; color: var(--tx-3); }
.st-hash { margin-top: 2px; text-align: center; }
.st-hash code { display: block; font-size: 11px; line-height: 1.6; color: var(--tx-4); word-break: break-all; direction: ltr; }
.st-hash span { display: block; font-size: 12px; color: var(--tx-4); }
.st-far { margin: 0 0 14px; padding: 16px; border-radius: 18px; background: rgba(76, 201, 240, .07); box-shadow: inset 0 0 0 1px rgba(76, 201, 240, .28); }
.st-far b { display: block; font-size: 16px; margin-bottom: 4px; }
.st-far p { margin: 0 0 12px; font-size: 14.5px; color: var(--tx-2); line-height: 1.75; }
.st-copy { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 12px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 240, 220, .1); }
html[dir="rtl"] .st-copy { padding: 6px 12px 6px 6px; }
.st-copy code { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; font: 600 14.5px var(--num); color: var(--tx); text-align: start; }
.st-copy .btn { flex: 0 0 auto; padding: 9px 14px; font-size: 13.5px; min-height: 40px; }
.st-install { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: ins; }
.st-install li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 12px; counter-increment: ins; padding: 12px 14px; border-radius: 14px; background: rgba(255, 242, 225, .03); }
.st-install li::before { content: counter(ins); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--num); color: #BFEFFF; background: rgba(76, 201, 240, .14); box-shadow: inset 0 0 0 1px rgba(76, 201, 240, .35); }
.st-install b { font-size: 15px; font-weight: 700; }
.st-install span { font-size: 14px; color: var(--tx-2); line-height: 1.7; }
.st-install code { font: 600 13px var(--num); color: var(--tx); direction: ltr; unicode-bidi: isolate; }
.st-help { margin: 14px 0 0; font-size: 13.5px; color: var(--tx-3); text-align: center; }
.st-help a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }

.st-plans .terms { margin-top: 4px; }
.st-plans .pr-note { margin-top: 8px; }
.st-kind { margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; background: rgba(239, 194, 108, .07); box-shadow: inset 0 0 0 1px rgba(239, 194, 108, .25); font-size: 15px; line-height: 1.8; color: var(--tx); }
.st-more { display: block; margin-top: 12px; text-align: center; font-size: 14px; color: var(--tx-3); }
.st-more a { color: var(--gold-text); }

.st-mini { display: none; }
@media (min-width: 980px) {
  .st { padding: 64px 0 40px; }
  .st-in { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 56px; }
  .st-side { text-align: start; padding-top: 18px; }
  .st-side > p { margin: 0; }
  .st-perks { display: grid; gap: 10px; list-style: none; margin: 26px 0 0; padding: 0; }
  .st-perks li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: var(--tx-2); }
  .st-perks li i { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; display: grid; place-items: center; font-style: normal; font-size: 15px; color: var(--h); background: rgba(var(--hr), .13); box-shadow: inset 0 0 0 1px rgba(var(--hr), .25); }
  .st-mini { display: block; position: relative; margin-top: 34px; }
  .st-fan { position: relative; height: 310px; }
  .st-fan img { position: absolute; top: 26px; width: 148px; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 18px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 240, 220, .08); }
  .st-fan img:nth-child(1) { inset-inline-start: 2%; transform: rotate(-8deg); }
  .st-fan img:nth-child(2) { inset-inline-start: 27%; top: 0; z-index: 2; transform: rotate(1deg); box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .95), 0 0 0 1px rgba(239, 194, 108, .35), 0 0 60px -20px rgba(239, 194, 108, .45); }
  .st-fan img:nth-child(3) { inset-inline-start: 52%; transform: rotate(9deg); }
  .st-card { margin: 0; padding: 28px 28px 24px; }
}
@media (max-width: 520px) {
  .st { padding: 22px 0 20px; }
  .st-card { padding: 18px 15px 16px; border-radius: 22px; }
  .st-pane h2 { font-size: 20px; }
  .st-steps li { font-size: 12px; }
}

/* ═══════════════════════════ EditFast PC itself, on a laptop ═══
   The hero's picture since 2026-10-27: the program's own window (pictured by the app itself) in a laptop's lid, on
   its base, over the page's warm glow. It took the place of the drawing above (.mk), so the program people see is
   the one they get. */
.lap { position: relative; width: min(100%, 1040px); margin: 48px auto 0; }
.lap-glow {
  position: absolute; inset: 4% 2% 10%; z-index: 0; pointer-events: none; filter: blur(34px);
  background: radial-gradient(50% 55% at 50% 45%, rgba(255, 168, 92, .30), transparent 70%),
              radial-gradient(38% 45% at 22% 40%, rgba(127, 234, 210, .16), transparent 70%);
}
.lap-lid {
  position: relative; z-index: 1; padding: clamp(6px, 1.1vw, 12px);
  border-radius: clamp(12px, 1.8vw, 20px) clamp(12px, 1.8vw, 20px) 6px 6px;
  background: linear-gradient(180deg, #2B2727, #121011);
  box-shadow: inset 0 0 0 1px rgba(255, 242, 225, .12), 0 0 0 1px rgba(0, 0, 0, .6), 0 44px 90px -42px rgba(0, 0, 0, .95);
}
.lap-screen { position: relative; overflow: hidden; border-radius: 6px; background: #0A0909; aspect-ratio: 1600 / 940; }
.lap-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lap-base {
  position: relative; z-index: 1; height: clamp(10px, 1.6vw, 18px); margin: 0 -6%;
  border-radius: 0 0 18px 18px / 0 0 12px 12px;
  background: linear-gradient(180deg, #3B3636 0%, #1E1B1B 55%, #0E0C0C 100%);
  box-shadow: inset 0 1px 0 rgba(255, 242, 225, .18), 0 26px 40px -20px rgba(0, 0, 0, .9);
}
.lap-base i { position: absolute; top: 0; left: 50%; width: 16%; height: 42%; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: rgba(0, 0, 0, .35); }
.lap-cap { margin: 18px 0 0; text-align: center; color: var(--tx-3); font-size: 13.5px; }

/* ═════════════════════════════════════ inside the program ═══
   Its screens, one tab each (2026-10-27): real pictures, large enough to read. */
.pc-eye-look { --h: #F2C878; --hr: 239, 194, 108; }
.look { max-width: 1120px; margin: 0 auto; }
.look-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 22px; }
.look-tab {
  min-height: 44px; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 242, 225, .13); background: rgba(255, 242, 225, .045);
  color: var(--tx-2); font: inherit; font-size: 15px; font-weight: 600;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.look-tab:hover { color: var(--tx); border-color: rgba(255, 242, 225, .24); }
.look-tab.on { color: #1A1206; background: linear-gradient(100deg, #F7DCA0, #E8B45B); border-color: transparent; }
.look-tab:focus-visible { outline: 2px solid #F2C878; outline-offset: 3px; }
.look-shot { margin: 0; }
.look-win {
  overflow: hidden; border-radius: 14px; background: #0A0909; aspect-ratio: 1600 / 940;
  box-shadow: 0 0 0 1px rgba(255, 242, 225, .1), 0 30px 80px -40px rgba(0, 0, 0, .95), 0 0 60px -22px rgba(233, 185, 73, .28);
}
.look-win img { display: block; width: 100%; height: 100%; object-fit: cover; }
.look-shot figcaption { margin: 16px auto 0; max-width: 62ch; text-align: center; color: var(--tx-2); font-size: 16px; }
@media (max-width: 760px) {
  .lap { margin-top: 36px; }
  .lap-base { margin: 0 -4%; }
  /* the tabs scroll sideways on a phone instead of stacking */
  .look-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: -16px; padding: 2px 16px 8px; scrollbar-width: none; }
  .look-tabs::-webkit-scrollbar { display: none; }
  .look-tab { flex: 0 0 auto; }
  .look-win { border-radius: 10px; }
  .look-shot figcaption { font-size: 15px; }
}