/* ═══════════════════════════════════════════════════════════════
   EditFast — site styles

   WHAT WENT WRONG LAST TIME

   The previous pass tried to avoid looking machine-made by
   banning the things that make a page feel lit — gradients,
   tinted shadows, blur, generous corners, motion. The result was
   flatter and MORE generic, not less: every corner 3px, every
   section built identically, one fade-in reused down the whole
   page. That uniformity is itself the tell. Real design systems
   vary on purpose.

   So this uses those tools deliberately instead:

   • WARM, NEVER NEUTRAL. Every dark carries red; every grey leans
     beige. A blue-grey on a dark page reads clinical, the same
     value warmed reads rich. This single change does more than
     everything else here combined.

   • THE GLOW IS THE SIGNATURE. A coloured shadow in the accent
     beneath things that matter. Restrained it is craft; sprayed
     everywhere it is the thing to avoid — so it lives on primary
     actions, the hero device, and lifted cards, and nowhere else.

   • RADIUS BY ROLE. 4px on tags, 10px on controls, 16px on cards,
     22px on the big surfaces.

   • MOTION THAT MEANS SOMETHING. Reveals alternate direction so
     the page does not pulse the same way a dozen times, and the
     hero runs its own loop because the product is a thing that
     moves.

   WEIGHT: 400, not 300. Light Arabic looks refined on a bright
   desktop panel and vanishes on a phone — thin strokes plus a dark
   background plus a smaller screen is three things working against
   legibility at once, and the phone is where most of this is read.

   TYPE: Alexandria — drawn Arabic-first, geometric, with tighter
   apertures and a firmer vertical stress than the faces that turn
   up on every generated page. Set against Cairo and Readex in a
   specimen before choosing: it carries a headline with far more
   authority and still reads clean at body size.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@200..900&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  /* Accent: the logo's aqua. */
  --red:      #2FD9BE;
  --red-lift: #5BE8D3;
  --red-soft: #8DF6E6;
  --red-deep: #12907C;
  --red-rgb:  47, 217, 190;

  /* The aqua is light — white on it measures 1.78:1, which is not a
     near miss, it is unreadable. So the accent splits in two: --red
     keeps doing the glows, borders and highlights, where nothing
     sits on top of it, and anything carrying white text sits on this
     deep pair instead. Same hue, one you can read on. */
  --red-ink-a: #0F7A68;   /* white on this: 5.24:1 */
  --red-ink-b: #0A5749;   /* white on this: 8.49:1 */

  /* Secondary: the logo's pink. Lightened from the mark's #B4517F,
     which only reaches 4.23:1 on the ground and so cannot carry
     small text. */
  --ember:     #D96BA2;   /* on --bg-000: 6.29:1 */
  --ember-rgb: 217, 107, 162;

  /* Ground: black, faintly cool so the aqua never looks muddy on it. */
  --bg-000: #08070A;
  --bg-050: #0B0A0E;
  --bg-100: #111015;
  --bg-200: #17161D;
  --bg-300: #1F1E27;

  /* Text: neutral now that the ground is. */
  --tx:   #F2F4F5;
  --tx-2: #BFC4C9;
  --tx-3: #8E959C;
  --tx-4: #7C838A;

  --line:      #1F1E27;
  --line-lift: #2C2B37;

  /* Success moved off teal. The old #3FCF8E sat a few degrees from
     the new brand hue, so "it worked" and "this is EditFast" would
     have been the same colour. */
  --ok:   #4ADE6E;
  --info:  #6FB6D8;
  --amber: #F2A33C;
  --yellow:#E8C547;

  --ff:  'Alexandria', system-ui, -apple-system, sans-serif;
  --num: 'Space Grotesk', ui-monospace, monospace;

  /* Radius by role, not one value everywhere. */
  --r-tag:  4px;
  --r-ctl:  10px;
  --r-card: 16px;
  --r-big:  22px;
  --r-pill: 999px;

  --glow:      0 8px 26px -8px rgba(47,217,190,.42);
  --glow-lift: 0 14px 40px -10px rgba(47,217,190,.58);
  --sink:      0 18px 44px -22px rgba(0,0,0,.9);

  --shell:  1180px;
  --ease:   cubic-bezier(.22,.68,.32,1);
  --spring: cubic-bezier(.3,1.3,.4,1);
}


/* ── hidden means hidden ────────────────────────────────────
   The `hidden` attribute is only `display: none` in the browser's
   own stylesheet, so any author rule that sets `display` on the
   same element silently beats it. Three places on this site were
   already losing that argument — the InstaPay button before the
   number is revealed, the receipt preview before a file is picked,
   and the note beside it — and the download page's two panes would
   have made it four, showing both the Windows and the Mac steps at
   once.

   This is the one place `!important` earns itself: nothing should
   ever be both hidden and displayed, so there is no legitimate
   rule for it to override. */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-050);
  color: var(--tx);
  font-family: var(--ff);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Warm light bleeding in from the corners — low opacity, fixed,
   so the page travels through it. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(760px 460px at 88% -6%, rgba(47,217,190,.16), transparent 60%),
    radial-gradient(620px 420px at -6% 34%, rgba(217,107,162,.07), transparent 58%);
}
body > * { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.num { font-family: var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.shell { width: min(var(--shell), calc(100% - 40px)); margin-inline: auto; }

/* ─────────────────────────────────────────────────── header ── */

.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(14,11,9,.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.hdr.stuck { border-bottom-color: var(--line); background: rgba(14,11,9,.95); }
.hdr-in { display: flex; align-items: center; gap: 28px; height: 68px; }

.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 18px; letter-spacing: -.02em; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: #0B0A0C;
  box-shadow: inset 0 0 0 1px rgba(47,217,190,.22), var(--glow);
  display: grid; place-items: center; color: #fff;
}
.brand-mark svg { width: 16px; height: 16px; }
.brand-mark img { width: 19px; height: 19px; display: block; }

.nav { display: flex; gap: 26px; margin-inline-start: auto; }
.nav a {
  font-size: 15px; font-weight: 400; color: var(--tx-2);
  padding: 4px 0; position: relative; transition: color .2s var(--ease);
}
.nav a::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: var(--red); border-radius: 2px;
  transform: scaleX(0); transform-origin: 50%;
  transition: transform .3s var(--spring);
}
.nav a:hover { color: var(--tx); }
.nav a:hover::after { transform: scaleX(1); }

.hdr-cta { display: flex; align-items: center; gap: 9px; }

/* ────────────────────────────────────────────────── buttons ── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border-radius: var(--r-ctl);
  border: 1px solid var(--line-lift); background: var(--bg-200);
  font-size: 14.5px; font-weight: 500; cursor: pointer;
  transition: transform .2s var(--spring), background .2s var(--ease),
              border-color .2s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); background: var(--bg-300); border-color: var(--tx-4); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--red-lift); outline-offset: 3px; }

.btn.pri {
  background: linear-gradient(140deg, var(--red-ink-a), var(--red-ink-b));
  border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: var(--glow);
}
.btn.pri:hover { box-shadow: var(--glow-lift); }

.btn:disabled, .btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { transform: none; box-shadow: none; background: var(--bg-200); border-color: var(--line-lift); }
.btn.pri:disabled:hover, .btn.pri[disabled]:hover { background: linear-gradient(140deg, var(--red-ink-a), var(--red-ink-b)); box-shadow: none; }

.btn.sm { padding: 9px 16px; font-size: 13.5px; }
.btn.lg { padding: 15px 30px; font-size: 16px; }
.btn.wide { width: 100%; }
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ───────────────────────────────────────────────── sections ── */

/* The rhythm varies on purpose: big sections breathe, connective
   bands sit tight. One padding value everywhere is the tell. */
.sec { padding: 96px 0; }
.sec.tight { padding: 54px 0; }
.sec + .sec.tight { padding-top: 0; }
.sec.tight + .sec { padding-top: 66px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--ff); font-size: 14px; font-weight: 600;
  letter-spacing: .04em; color: var(--red-soft); margin-bottom: 18px;
}
.eyebrow::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--red); }

.sec h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 700; letter-spacing: -.035em; line-height: 1.25; max-width: 20ch;
}
.sec-intro { color: var(--tx-3); font-size: 17.5px; margin: 0 0 52px; max-width: 58ch; }
.sec-head-c { text-align: center; }
.sec-head-c h2, .sec-head-c .sec-intro { margin-inline: auto; }
.sec-head-c .eyebrow { justify-content: center; }

/* ───────────────────────────────────────────────────── hero ── */

.hero { padding: 72px 0 0; }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }

.hero h1 {
  margin: 0 0 22px;
  font-size: clamp(36px, 5.2vw, 64px);
  line-height: 1.14; font-weight: 700; letter-spacing: -.045em;
}

.lede { font-size: 19px; color: var(--tx-2); margin: 0 0 32px; max-width: 48ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 30px; }

.trust { display: flex; flex-wrap: wrap; gap: 8px; }
.trust span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; color: var(--tx-2);
  padding: 7px 13px; border-radius: var(--r-tag);
  border: 1px solid var(--line); background: var(--bg-100);
}
.trust i { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
/* The label is an <em> only because it needs to be a separate node
   from the dot to carry its translation. It is not emphasis. */
.trust em { font-style: normal; }

/* ── The hero device: the panel itself, running its own loop.
      No invented browser chrome around it — the screenshot already
      carries the panel's own title bar and icon rail, and stacking a
      fake one on top of a real one only reads as decoration. The
      frame is a frame; the tabs are the one thing added, because
      they let a visitor go straight to the tool they came for. ── */
.device { width: min(100%, 396px); margin-inline: auto; }

.device-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
  justify-content: center;
}
.device-tabs button {
  border: 1px solid var(--line); background: var(--bg-100); cursor: pointer;
  padding: 7px 13px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 400; color: var(--tx-3); white-space: nowrap;
  transition: color .25s var(--ease), background .25s var(--ease),
              border-color .25s var(--ease), box-shadow .3s var(--ease);
}
.device-tabs button:hover { color: var(--tx); border-color: var(--tx-4); }
.device-tabs button.on {
  color: #fff; border-color: transparent;
  background: linear-gradient(140deg, var(--red-ink-a), var(--red-ink-b));
  box-shadow: var(--glow);
}

.device-stage {
  position: relative; height: 468px; overflow: hidden;
  border-radius: var(--r-big);
  border: 1px solid var(--line-lift);
  background: var(--bg-000);
  box-shadow: var(--sink), 0 0 90px -34px rgba(47,217,190,.6);
}
.device-stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
  opacity: 0; transform: scale(1.015);
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.device-stage img.on { opacity: 1; transform: none; }
.device-stage::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 78px;
  background: linear-gradient(to top, var(--bg-000), transparent); pointer-events: none;
}

/* ── Readout ── */

.readout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 64px; }
.readout div {
  padding: 22px 20px; border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--bg-100), var(--bg-050));
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.readout div:hover { border-color: rgba(47,217,190,.34); transform: translateY(-3px); }
.readout b { display: block; font-family: var(--num); font-size: 30px; font-weight: 700; color: var(--red-soft); letter-spacing: -.03em; }
.readout span { font-size: 14.5px; color: var(--tx-2); }

/* ──────────────────────────────────────────────────── tools ── */

.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 18px; }

.tool {
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: linear-gradient(168deg, var(--bg-100), var(--bg-050));
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.tool:hover {
  transform: translateY(-5px);
  border-color: rgba(47,217,190,.32);
  box-shadow: var(--sink), 0 0 46px -26px rgba(47,217,190,.6);
}

/* Each card carries a drawing rather than a screenshot. A capture
   of a panel shows the same chrome eleven times and says nothing;
   a drawing can show the one idea the tool is about. They share a
   grid, a stroke weight and a rule — grey is the editor's
   furniture, red is what this tool does to it. */
.tool-art {
  height: 132px; margin: 16px 16px 0;
  border-radius: var(--r-ctl);
  border: 1px solid var(--line-lift);
  background:
    radial-gradient(300px 120px at 50% 0%, rgba(47,217,190,.07), transparent 70%),
    var(--bg-000);
  display: grid; place-items: center;
  color: var(--tx-4);
  overflow: hidden;
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
/* Filling the box and letting preserveAspectRatio do the fitting
   is what keeps this correct at every card width. Sizing by width
   alone made the drawing taller than its frame on wide cards and
   quietly cropped the bottom off. */
.tool-art svg {
  width: 100%; height: 100%;
  padding: 16px 22px; box-sizing: border-box;
  transition: transform .5s var(--ease);
}
.tool:hover .tool-art { border-color: rgba(47,217,190,.3); color: var(--tx-3); }
.tool:hover .tool-art svg { transform: scale(1.045); }

.tool-body { padding: 16px 20px 22px; }
.tool-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.tool-h h3 { margin: 0; font-size: 17.5px; font-weight: 600; letter-spacing: -.025em; }
.tool p { margin: 0; color: var(--tx-2); font-size: 15.2px; line-height: 1.95; }
.tool b { color: var(--tx-2); font-weight: 500; }

.tag {
  font-family: var(--ff); font-size: 12.5px; font-weight: 600;
  padding: 4px 10px; border-radius: var(--r-tag); letter-spacing: 0;
  border: 1px solid;
}
.tag.ai  { color: var(--red-soft); border-color: rgba(47,217,190,.4);  background: rgba(47,217,190,.09); }
.tag.new { color: var(--ok);       border-color: rgba(63,207,142,.34); background: rgba(63,207,142,.07); }
.tag.off { color: var(--info);     border-color: rgba(111,182,216,.3); background: rgba(111,182,216,.06); }

/* ──────────────────────────────────────────────────── steps ── */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.step-n {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 16px;
  font-family: var(--num); font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, var(--red-ink-a), var(--red-ink-b));
  box-shadow: var(--glow);
}
.step h3 { margin: 0 0 8px; font-size: 17.5px; font-weight: 600; letter-spacing: -.02em; }
.step p { margin: 0; color: var(--tx-2); font-size: 15.5px; }

/* ────────────────────────────────────────────────── pricing ── */

.price-wrap { display: grid; grid-template-columns: 1fr 390px; gap: 54px; align-items: start; }

.includes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.includes li {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 13px 16px; border-radius: var(--r-ctl);
  background: var(--bg-100); border: 1px solid transparent;
  font-size: 15.5px; color: var(--tx-2);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.includes li:hover { border-color: rgba(47,217,190,.22); background: var(--bg-200); }
.includes li::before {
  content: ''; width: 18px; height: 18px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%;
  background: rgba(47,217,190,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF9179' 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;
}

.terms { display: grid; gap: 11px; }
.term {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
  padding: 20px 22px; border-radius: var(--r-card);
  border: 1px solid var(--line-lift); background: var(--bg-100);
  cursor: pointer; text-align: start;
  transition: border-color .25s var(--ease), background .25s var(--ease),
              transform .25s var(--spring), box-shadow .3s var(--ease);
}
.term:hover { transform: translateY(-2px); border-color: var(--tx-4); }
.term.on {
  border-color: var(--red);
  background: linear-gradient(150deg, var(--bg-200), var(--bg-100));
  box-shadow: var(--glow);
}
.term:focus-visible { outline: 2px solid var(--red-lift); outline-offset: 3px; }

.term-name { font-size: 16.5px; font-weight: 600; display: flex; align-items: center; gap: 9px; letter-spacing: -.02em; }
.term-note { font-size: 13.6px; color: var(--tx-3); margin-top: 3px; }
/* Currency sits on the baseline beside the figure rather than on a
   second line — there is a whole card of width going spare, and
   stacking them made the price read as two facts instead of one. */
.term-price { display: flex; align-items: baseline; gap: 5px; }
.term-price b { font-family: var(--num); font-size: 28px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.term.on .term-price b { color: var(--red-soft); }
.term-price span { font-size: 13.5px; font-weight: 500; color: var(--tx-3); }

.term-flag {
  font-family: var(--ff); font-size: 12px; font-weight: 600;
  color: #fff; background: var(--red-ink-a);
  border-radius: var(--r-tag); padding: 2px 7px; letter-spacing: .06em;
}

.pay { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px 22px; background: var(--bg-100); }
.pay h4 { margin: 0 0 6px; font-size: 14.5px; font-weight: 600; }
.pay p { margin: 0 0 14px; color: var(--tx-2); font-size: 14.6px; }
.pay-num {
  font-family: var(--num); font-size: 20px; font-weight: 700;
  color: var(--tx); letter-spacing: .06em;
  padding: 12px 14px; border-radius: var(--r-ctl);
  border: 1px dashed var(--line-lift); background: var(--bg-000);
  display: block; text-align: center; direction: ltr; margin-bottom: 12px;
}
.pay-ms { display: flex; gap: 6px; flex-wrap: wrap; }
.pay-ms span {
  font-size: 13.5px; color: var(--tx-2);
  border: 1px solid var(--line); border-radius: var(--r-tag); padding: 5px 10px; background: var(--bg-000);
}

/* ────────────────────────────────────────────────────── faq ── */

.faq { max-width: 800px; margin-inline: auto; display: grid; gap: 9px; }
.q {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--bg-100); overflow: hidden;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.q.open { border-color: rgba(47,217,190,.34); background: var(--bg-200); }
.q-head {
  width: 100%; display: flex; align-items: center; gap: 15px;
  padding: 20px 22px; background: none; border: 0; cursor: pointer;
  font-size: 16.5px; font-weight: 500; text-align: start; color: var(--tx-2);
  transition: color .2s var(--ease);
}
.q-head:hover, .q.open .q-head { color: var(--tx); }
.q-head .grow { flex: 1 1 auto; }
.q-mark {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(47,217,190,.14); color: var(--red-soft);
  font-size: 16px; line-height: 1;
  transition: transform .35s var(--spring), background .25s var(--ease), color .25s var(--ease);
}
.q.open .q-mark { transform: rotate(135deg); background: var(--red-ink-a); color: #fff; }
.q-body { max-height: 0; overflow: hidden; transition: max-height .38s var(--ease); }
.q-body p { margin: 0; padding: 0 22px 22px; color: var(--tx-2); font-size: 15.6px; }

/* ─────────────────────────────────────────────────────── cta ── */

.cta {
  border-radius: var(--r-big);
  border: 1px solid rgba(47,217,190,.28);
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(47,217,190,.18), transparent 66%),
    linear-gradient(165deg, var(--bg-200), var(--bg-000));
  padding: 58px 44px; text-align: center;
}
.cta h2 { margin: 0 auto 12px; font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; letter-spacing: -.035em; max-width: 20ch; }
.cta p { margin: 0 auto 28px; color: var(--tx-2); max-width: 46ch; }

/* ──────────────────────────────────────────────────── footer ── */

.ftr { border-top: 1px solid var(--line); padding: 46px 0 32px; margin-top: 90px; }
.ftr-in { display: flex; gap: 48px; flex-wrap: wrap; }
.ftr-brand { max-width: 290px; }
.ftr-brand p { color: var(--tx-3); font-size: 14.6px; margin: 12px 0 0; }
.ftr-cols { display: flex; gap: 56px; margin-inline-start: auto; flex-wrap: wrap; }
.ftr-col h5 { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--tx-3); letter-spacing: .02em; }
.ftr-col a { display: block; font-size: 15px; color: var(--tx-2); padding: 5px 0; transition: color .2s var(--ease); }
.ftr-col a:hover { color: var(--red-soft); }
.ftr-btm {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--tx-3); font-size: 14px;
}
.ftr-btm a { color: var(--tx-3); }
.ftr-btm a:hover { color: var(--red-soft); }

/* ─────────────────────────────────────────────────── reveal ── */

/* Alternating entry, so a long page does not pulse the same way a
   dozen times on the way down. */
[data-rise]     { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-rise="l"] { transform: translate(-22px, 8px); }
[data-rise="r"] { transform: translate(22px, 8px); }
[data-rise="s"] { transform: scale(.965); }
[data-rise].in  { opacity: 1; transform: none; }

/* One column wide, a card already fills the screen, so the 22px it
   is offset by before it comes in hangs over the edge and the whole
   page can be dragged sideways by that much. Nothing below the fold
   has come in yet, so it is not a flicker at the top: it is a page
   that scrolls sideways the entire way down. Sideways is the part
   that has to go; the animation itself still runs, upward. */
@media (max-width: 760px) {
  [data-rise="l"], [data-rise="r"] { transform: translateY(22px); }
}

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

/* ── Skip link ─────────────────────────────────────────────── */
.skip {
  position: absolute; inset-inline-start: 50%; top: 8px; z-index: 200;
  transform: translate(50%, -160%);
  padding: 11px 22px; min-height: 44px;
  display: inline-flex; align-items: center;
  background: var(--red-ink-a); color: #fff; font-weight: 600;
  border-radius: var(--r-ctl);
  transition: transform .18s var(--ease);
}
.skip:focus { transform: translate(50%, 0); outline: 2px solid #fff; outline-offset: 2px; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--red-lift); outline-offset: 2px; border-radius: var(--r-tag);
}

/* ─────────────────────────────────────────────── responsive ── */

@media (pointer: coarse) {
  .btn.sm { min-height: 44px; }
  .lang { min-height: 44px; }
  .ftr-col a { padding: 11px 0; }
  .nav a { padding: 12px 0; }
  .brand { padding: 8px 0; }
  .ftr-btm a { display: inline-block; padding: 11px 0; min-height: 44px; }
}

@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }

  .price-wrap { grid-template-columns: 1fr; gap: 38px; }
}

/* The nav collapses earlier than it used to, because it now
   carries six entries rather than four. Six Arabic words plus a
   brand plus two buttons stopped fitting somewhere above 800px,
   and what gave way was the sign-in button sliding off the edge. */
@media (max-width: 900px) {
  .nav { display: none; }
}

@media (max-width: 760px) {
  .readout { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .sec { padding: 66px 0; }
}

@media (max-width: 520px) {
  .shell { width: calc(100% - 32px); }
  .hero { padding: 44px 0 0; }
  .sec { padding: 54px 0; }
  .readout { grid-template-columns: 1fr; }
  .cta { padding: 40px 22px; }
  .device-stage { height: 400px; }
  .hdr-cta .btn:not(.pri) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   The reel — the page's one memorable thing.

   Everything else on a plugin site is a claim. This is the claim
   acted out: a timeline with silences in it, a playhead that runs
   across, the silences catching fire, and the whole cut closing up
   on itself while the duration drops. Same footage, less time.

   It is built from Premiere's own furniture on purpose — a ruler
   with timecode, a V1 track of clips, an A1 waveform, a red
   playhead — because an editor recognises that in a glance and no
   caption has to explain what they are looking at.

   The timeline runs left-to-right even though the page is RTL.
   Every NLE on earth runs left-to-right; flipping it would be
   correct localisation and wrong domain sense.
   ═══════════════════════════════════════════════════════════════ */

.reel {
  border-radius: var(--r-big);
  border: 1px solid var(--line-lift);
  background: linear-gradient(170deg, var(--bg-100), var(--bg-000));
  box-shadow: var(--sink), 0 0 90px -38px rgba(47,217,190,.55);
  overflow: hidden;
  direction: ltr;
}

.reel-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-200);
  font-family: var(--num); font-size: 13px; font-weight: 500; letter-spacing: .04em;
  color: var(--tx-2);
}
.reel-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-lift); }
.reel-bar .dot.live { background: var(--red); box-shadow: 0 0 0 0 rgba(47,217,190,.55); animation: rec 2.4s ease-out infinite; }
@keyframes rec { 70%, 100% { box-shadow: 0 0 0 7px rgba(47,217,190,0); } }
.reel-bar .grow { flex: 1 1 auto; }

/* The duration readout: two values crossfading in place, so the
   drop registers as the same number changing rather than as two
   separate labels. */
.reel-dur { position: relative; min-width: 62px; height: 15px; }
.reel-dur b {
  position: absolute; inset-inline-end: 0; top: 0;
  font-family: var(--num); font-size: 13px; font-weight: 700;
  letter-spacing: -.01em;
}
.reel-dur .was { color: var(--tx-3); animation: durWas 9s var(--ease) infinite; }
.reel-dur .now { color: var(--red-soft); opacity: 0; animation: durNow 9s var(--ease) infinite; }
@keyframes durWas { 0%, 48% { opacity: 1; } 58%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes durNow { 0%, 48% { opacity: 0; } 58%, 94% { opacity: 1; } 100% { opacity: 0; } }

/* ── the ruler ────────────────────────────────────────────── */

.reel-ruler {
  height: 22px; position: relative;
  border-bottom: 1px solid var(--line);
  background:
    repeating-linear-gradient(to right,
      var(--line-lift) 0 1px, transparent 1px 10%),
    var(--bg-050);
  background-size: 100% 7px, auto;
  background-repeat: repeat-x, no-repeat;
  background-position: bottom left, 0 0;
}

/* ── the tracks ───────────────────────────────────────────── */

.reel-body { position: relative; padding: 12px 14px 16px; }

.reel-row { display: flex; align-items: stretch; gap: 3px; margin-bottom: 8px; }
.reel-row:last-child { margin-bottom: 0; }

.reel-tag {
  flex: 0 0 26px; display: grid; place-items: center;
  font-family: var(--num); font-size: 11px; font-weight: 500; color: var(--tx-3);
  border-radius: 4px; background: var(--bg-200);
}

.reel-track { flex: 1 1 auto; display: flex; gap: 3px; height: 40px; }
.reel-track.audio { height: 30px; }

/* A clip holds its width; a gap animates its width away. Sizing
   both with flex-basis is what makes the collapse fall out of
   normal layout instead of needing per-clip offsets. */
.reel-track i {
  display: block; flex: 0 0 calc(var(--w) * 1%);
  border-radius: 4px; position: relative; overflow: hidden;
}

.clip {
  background: linear-gradient(165deg, #3B2440, #241730);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
/* A hint of frame thumbnails, so it reads as footage rather than
   as a coloured bar. */
.clip::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(to right,
    rgba(255,255,255,.05) 0 1px, transparent 1px 14px);
}

.wave {
  background: #0C2A26 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Cg fill='%232FD9BE'%3E%3Crect x='1' y='11' width='2' height='8' rx='1'/%3E%3Crect x='5' y='7' width='2' height='16' rx='1'/%3E%3Crect x='9' y='3' width='2' height='24' rx='1'/%3E%3Crect x='13' y='9' width='2' height='12' rx='1'/%3E%3Crect x='17' y='5' width='2' height='20' rx='1'/%3E%3Crect x='21' y='12' width='2' height='6' rx='1'/%3E%3Crect x='25' y='6' width='2' height='18' rx='1'/%3E%3Crect x='29' y='2' width='2' height='26' rx='1'/%3E%3Crect x='33' y='10' width='2' height='10' rx='1'/%3E%3Crect x='37' y='4' width='2' height='22' rx='1'/%3E%3Crect x='41' y='12' width='2' height='6' rx='1'/%3E%3Crect x='45' y='8' width='2' height='14' rx='1'/%3E%3Crect x='49' y='3' width='2' height='24' rx='1'/%3E%3Crect x='53' y='11' width='2' height='8' rx='1'/%3E%3Crect x='57' y='6' width='2' height='18' rx='1'/%3E%3C/g%3E%3C/svg%3E") repeat-x center / auto 100%;
  box-shadow: inset 0 0 0 1px rgba(79,209,165,.18);
}

/* A silence: flat line, then it catches, then it is gone. */
.gap {
  background: var(--bg-200);
  box-shadow: inset 0 0 0 1px var(--line-lift);
  animation: gapCut 9s var(--ease) infinite;
}
.gap::after {
  content: ''; position: absolute; inset: 50% 2px auto;
  height: 1px; background: var(--line-lift);
}

@keyframes gapCut {
  0%, 40%   { flex-basis: calc(var(--w) * 1%); background: var(--bg-200); box-shadow: inset 0 0 0 1px var(--line-lift); }
  46%, 52%  { flex-basis: calc(var(--w) * 1%); background: rgba(47,217,190,.32); box-shadow: inset 0 0 0 1px var(--red); }
  60%, 92%  { flex-basis: 0; background: rgba(47,217,190,.32); box-shadow: none; }
  100%      { flex-basis: calc(var(--w) * 1%); background: var(--bg-200); box-shadow: inset 0 0 0 1px var(--line-lift); }
}

/* ── the playhead ─────────────────────────────────────────── */

.reel-head {
  position: absolute; top: 0; bottom: 10px; left: 40px;
  width: 2px; background: var(--red);
  box-shadow: 0 0 12px 1px rgba(47,217,190,.7);
  animation: sweep 9s var(--ease) infinite;
}
.reel-head::before {
  content: ''; position: absolute; top: -4px; left: -5px;
  width: 12px; height: 10px; border-radius: 2px;
  background: var(--red);
}
@keyframes sweep {
  0%        { left: 40px; opacity: 0; }
  6%        { left: 40px; opacity: 1; }
  40%       { left: calc(100% - 16px); opacity: 1; }
  46%, 92%  { left: calc(100% - 16px); opacity: .35; }
  100%      { left: 40px; opacity: 0; }
}

/* ── what it all added up to ──────────────────────────────── */

.reel-note {
  display: flex; align-items: center; gap: 9px;
  margin: 12px 14px 14px; padding: 10px 14px;
  border-radius: var(--r-ctl);
  border: 1px solid rgba(47,217,190,.3);
  background: rgba(47,217,190,.08);
  font-size: 14.5px; font-weight: 500; color: var(--red-soft);
  direction: rtl;
  opacity: 0; animation: noteIn 9s var(--ease) infinite;
}
.reel-note b { font-family: var(--num); font-weight: 700; }
@keyframes noteIn {
  0%, 54%  { opacity: 0; transform: translateY(6px); }
  64%, 92% { opacity: 1; transform: none; }
  100%     { opacity: 0; transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  /* Held on the finished state: the point of the picture is the
     result, and the result is legible without any of the motion. */
  .gap { flex-basis: 0 !important; }
  .reel-head { left: calc(100% - 16px); opacity: .35; }
  .reel-note { opacity: 1; transform: none; }
  .reel-dur .was { opacity: 0; }
  .reel-dur .now { opacity: 1; }
}

@media (max-width: 520px) {
  .reel-track { height: 32px; }
  .reel-track.audio { height: 24px; }
  .reel-note { font-size: 12.5px; }
}

/* ═══════════════════════════════════════════════════ the rest ═══ */

/* ── headline ─────────────────────────────────────────────────

   Three spans, because three things are happening.

   The number is the promise, and in Alexandria the Arabic-Indic
   ١١ is two bare vertical strokes — indistinguishable from اا, so
   the sentence opened with what looked like a word nobody could
   read. Set in the numeral face the site already uses everywhere
   else, in the accent, it reads as a count at a glance.

   The gradient half needs vertical padding for a reason that is
   not spacing: background-clip:text paints the gradient only
   inside the element's own box, and Alexandria's ink runs a few
   pixels past it top and bottom. Without the padding the shadda
   on هتسرّع and the tail of the ج in المونتاج were simply not
   painted — the headline arrived with its ascenders and
   descenders shaved flat. */

.h1-num {
  color: var(--ember);
  font-size: 1.1em; font-weight: 700; letter-spacing: -.045em;
  white-space: nowrap;
  /* Lit rather than merely coloured. At this size a flat fill
     reads as a different-coloured word; the glow says "figure". */
  text-shadow: 0 0 34px rgba(217,107,162,.5), 0 0 12px rgba(47,217,190,.35);
}
.h1-n { white-space: nowrap; }
.h1-a {
  background: linear-gradient(120deg, var(--red-lift), var(--ember));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-block: .16em;
}

/* "هتسرّع المونتاج" is one idea and breaks as one. Left to itself
   the line filled up to "هتسرّع" and left "المونتاج" stranded
   underneath, which read as a headline that had run out of room
   rather than one with two lines. balance handles the English,
   where the phrase is too long to hold together. */
.hero h1 { text-wrap: balance; }
.h1-a { white-space: nowrap; }

/* Below this the phrase is wider than the column, and holding it
   together would push it off the screen instead of wrapping. */
@media (max-width: 400px) {
  .h1-a { white-space: normal; }
}

/* ── language ─────────────────────────────────────────────────
   A two-letter button, not a flag and not a dropdown: there are
   exactly two languages and a flag stands for a country rather
   than a language. */
.lang {
  border: 1px solid var(--line-lift); background: var(--bg-100);
  color: var(--tx-2); cursor: pointer;
  font-family: var(--num); font-size: 12.5px; font-weight: 500; letter-spacing: .04em;
  padding: 9px 13px; border-radius: var(--r-ctl); min-width: 44px;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.lang:hover { color: var(--tx); border-color: var(--tx-4); background: var(--bg-200); }
.lang:focus-visible { outline: 2px solid var(--red-lift); outline-offset: 2px; }

/* Latin text wants a touch more room between lines than Arabic. */
html[lang="en"] body { line-height: 1.8; }
html[lang="en"] h1, html[lang="en"] h2 { letter-spacing: -.03em; }

/* ── announcement strip ───────────────────────────────────────
   Written from the admin panel, empty by default, and gone from
   the layout entirely when there is nothing to say. */
.banner {
  background: linear-gradient(90deg, var(--red-ink-b), var(--red-ink-a));
  color: #fff; text-align: center;
  padding: 10px 20px; font-size: 14.5px; font-weight: 500;
}

/* ── choosing how to pay ──────────────────────────────────────*/

.pay-choose { display: grid; gap: 9px; margin-top: 14px; }

/* ── the answer to a click, in place ──────────────────────────
   Deliberately not a modal. Somebody who pressed "pay" wants to
   pay, and throwing a dialog over the price they were reading to
   tell them to do something else first is the wrong trade. This
   opens under the button, keeps the page usable behind it, and
   closes on Escape. */
.guide {
  margin-top: 14px; padding: 20px;
  border-radius: var(--r-card);
  border: 1px solid rgba(47,217,190,.28);
  background: radial-gradient(420px 170px at 50% 0%, rgba(47,217,190,.1), transparent 72%), var(--bg-000);
  animation: guideIn .3s var(--ease);
}
@keyframes guideIn { from { opacity: 0; transform: translateY(-8px); } }
.guide:focus-visible { outline: 2px solid var(--red-lift); outline-offset: 3px; }

.guide h4 { margin: 0 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.guide > p { margin: 0 0 16px; font-size: 15px; color: var(--tx-2); }

.guide ol { list-style: none; margin: 0 0 18px; padding: 0; counter-reset: g; display: grid; gap: 11px; }
.guide li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14.8px; color: var(--tx-2); counter-increment: g;
}
.guide li::before {
  content: counter(g);
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--num); font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, var(--red-ink-a), var(--red-ink-b));
}
.guide .guide-x {
  background: none; border: 0; cursor: pointer; color: var(--tx-4);
  font-size: 13.5px; padding: 10px 0; margin-inline-start: 12px;
}
.guide .guide-x:hover { color: var(--tx-2); }

/* The revealed number: same treatment as in the account, because
   it is the same fact and recognising it should not take a beat. */
.guide-num {
  font-family: var(--num); font-size: 21px; font-weight: 700;
  letter-spacing: .06em; color: var(--tx); direction: ltr;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 15px; border-radius: var(--r-ctl);
  border: 1px dashed var(--line-lift); background: var(--bg-050);
  margin-bottom: 14px;
}
.guide-num button {
  font-family: var(--ff); font-size: 13px; font-weight: 500;
  border: 1px solid var(--line-lift); background: var(--bg-200); color: var(--tx-2);
  border-radius: var(--r-tag); padding: 7px 13px; cursor: pointer;
}
.guide-num button:hover { border-color: var(--tx-4); color: var(--tx); }

@media (pointer: coarse) {
  .guide .guide-x { min-height: 44px; }
  .guide-num button { min-height: 44px; }
}

/* ── on a phone ─────────────────────────────────────────────
   A screen held at arm's length, often outdoors, often at half
   brightness to save battery. Light strokes lose to all three, so
   body copy gains a step of weight and the quietest greys move up
   the ramp. Nothing here changes the layout — only how much of it
   survives the conditions it is actually read in. */
@media (max-width: 760px) {
  body { font-weight: 450; font-size: 17.5px; }

  .lede { font-size: 18px; }
  .sec-intro, .tool p, .step p { color: var(--tx-2); }

  /* The faintest step in the ramp is one nobody should have to
     find on a phone. */
  .term-note, .trust span, .readout span,
  .pay p, .pay-ms span, .ftr-brand p, .ftr-btm { color: var(--tx-2); }

  .eyebrow { font-size: 13px; }
  .tag { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════ gallery ═══
   A scroll-snapping row rather than a slider library. The browser
   already does momentum, snapping, touch and keyboard properly;
   reimplementing that in JS buys nothing and breaks on the phones
   it is hardest to test on. The script only syncs the dots and
   moves the scroll position when an arrow is pressed.

   It bleeds past the shell on purpose — a partly visible next card
   is what tells you there is more without a label saying so. */

.gal { position: relative; margin-top: 8px; }

.gal-track {
  display: flex; gap: 18px;
  padding: 6px calc((100vw - min(1180px, 100vw - 40px)) / 2 + 4px) 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.gal-track::-webkit-scrollbar { display: none; }
.gal-track:focus-visible { outline: 2px solid var(--red-lift); outline-offset: -2px; border-radius: var(--r-card); }

.shot {
  flex: 0 0 auto; width: 268px; margin: 0;
  /* Aligned to the start edge, not the centre. The strip is
     deliberately wider than the shell so the next card peeks in
     from the side; with centre snapping the first card can never
     reach the middle, so "which one am I on" and "which one is at
     the edge" disagreed — and the dots reported a slide the reader
     was not looking at. */
  scroll-snap-align: start;
  border-radius: var(--r-big);
  border: 1px solid var(--line-lift);
  background: linear-gradient(168deg, var(--bg-100), var(--bg-050));
  overflow: hidden;
  transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.shot:hover {
  transform: translateY(-4px);
  border-color: rgba(47,217,190,.34);
  box-shadow: var(--sink), 0 0 46px -26px rgba(47,217,190,.6);
}

/* The captures are tall portraits of a Premiere side panel. Showing
   the top two-thirds keeps the header and the controls, which is
   the part that reads as a real tool. */
.shot img {
  display: block; width: 100%; height: 330px;
  object-fit: cover; object-position: 50% 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg-000);
}

.shot figcaption { padding: 14px 16px 16px; }
.shot figcaption b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.shot figcaption span { display: block; margin-top: 5px; font-size: 13.5px; color: var(--tx-2); line-height: 1.7; }

/* ── arrows ─────────────────────────────────────────────────
   Hidden from touch, where the gesture is the control and a button
   floating over the content is only in the way. */
.gal-arrow {
  position: absolute; top: 165px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line-lift);
  background: rgba(20,16,13,.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--tx-2);
  transition: color .2s var(--ease), border-color .2s var(--ease),
              background .2s var(--ease), opacity .2s var(--ease);
}
.gal-arrow:hover { color: var(--tx); border-color: var(--red); background: var(--bg-200); }
.gal-arrow:focus-visible { outline: 2px solid var(--red-lift); outline-offset: 3px; }
.gal-arrow svg { width: 20px; height: 20px; }
.gal-arrow.prev { inset-inline-start: 18px; }
.gal-arrow.next { inset-inline-end: 18px; }
.gal-arrow[disabled] { opacity: .25; pointer-events: none; }

/* ── dots ───────────────────────────────────────────────────*/

.gal-dots { display: flex; justify-content: center; gap: 7px; margin-top: 4px; flex-wrap: wrap; }
/* The dot you see is 9px; the thing you press is 44. Drawing the
   mark in a pseudo-element rather than shrinking the button is
   what lets both be true — the alternative was a control nobody
   with a thumb could hit. */
.gal-dots .dot {
  width: 22px; height: 30px; padding: 0; cursor: pointer;
  border: 0; background: none; position: relative;
}
.gal-dots .dot::before {
  content: ''; position: absolute; inset-block: 50%; inset-inline-start: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--line-lift);
  transition: background .25s var(--ease), width .25s var(--ease), margin .25s var(--ease);
}
.gal-dots .dot:hover::before { background: var(--tx-4); }
.gal-dots .dot.on::before { width: 26px; margin-inline-start: -13px; border-radius: 5px; background: var(--red); }
.gal-dots .dot:focus-visible { outline: 2px solid var(--red-lift); outline-offset: 0; border-radius: var(--r-tag); }

@media (pointer: coarse) {
  /* The gesture is the control on touch; a button floating over
     the picture is only in the way. The dots stay — and are now
     big enough to actually press. */
  .gal-arrow { display: none; }
  .gal-dots .dot { width: 30px; height: 44px; }
}

@media (max-width: 520px) {
  .shot { width: 232px; }
  .shot img { height: 290px; }
  .gal-track { gap: 14px; padding-inline: 16px; }
}

/* ── signing up inside the pricing section ──────────────────
   Two fields, in the place the decision was made. Every page
   change between "I want this" and "here is where to send the
   money" is somewhere to lose them, and an account is only needed
   so a transfer can be matched to a person. */
.guide-form { display: grid; gap: 14px; margin-bottom: 16px; }

.gf label {
  display: block; font-size: 14px; font-weight: 600;
  color: var(--tx-2); margin-bottom: 7px;
}
.gf .inp {
  width: 100%; padding: 13px 15px; font-size: 15.5px;
  border-radius: var(--r-ctl); border: 1px solid var(--line-lift);
  background: var(--bg-050); color: var(--tx);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.gf .inp::placeholder { color: var(--tx-4); }
.gf .inp:focus {
  outline: none; border-color: var(--red);
  background: var(--bg-100);
  box-shadow: 0 0 0 3px rgba(47,217,190,.14);
}
.gf .hint { display: block; margin-top: 7px; font-size: 13px; color: var(--tx-3); }

/* ── country code + number ────────────────────────────────────── */

/* Used by the gate on this page and by the signup form on
   /login.html, which is why it lives here and not in app.css.

   The code box is deliberately not wide enough for the longest
   country name. The dial code is written first in the label for
   exactly that reason, so what survives the truncation is the part
   somebody needs to see. color-scheme makes the native dropdown
   dark, since the page it drops out of is. */
.phone-row { display: flex; gap: 8px; align-items: stretch; }
.phone-row .dial {
  flex: 0 0 40%; max-width: 200px; min-width: 0;
  cursor: pointer; color-scheme: dark;
}
.phone-row input { flex: 1 1 auto; min-width: 0; }

@media (max-width: 400px) {
  .phone-row .dial { flex-basis: 44%; }
}

.guide .msg { display: none; }
.guide .msg.on { display: block; }
.guide .msg {
  padding: 11px 14px; border-radius: var(--r-ctl);
  border: 1px solid transparent; font-size: 14.5px;
}
.guide .msg.err { background: rgba(242,163,60,.1);  border-color: var(--amber); color: #F5BE79; }
.guide .msg.ok  { background: rgba(74,222,110,.09); border-color: var(--ok);    color: #9CEBAA; }

/* The file's fingerprint, under the download button. Not a warning —
   just the number, for anybody who wants to check what they got. */
.dl-hash { margin-top: 10px; }
.dl-hash-k { display: block; font-size: 12px; color: var(--tx-4); margin-bottom: 3px; }
.dl-hash code {
  display: block; font-size: 11.5px; line-height: 1.6; color: var(--tx-3);
  word-break: break-all; letter-spacing: .01em;
}


/* The amount that actually leaves the account, under the amount
   the visitor understands. Only ever rendered for somebody being
   shown a converted price — the transfer is in EGP either way. */
.term-price { flex-wrap: wrap; }
.term-egp {
  /* Its own line under the price. The cell is a baseline flex row,
     so a plain block would sit beside the currency code instead. */
  flex: 0 0 100%;
  font-size: 11.5px;
  color: var(--tx-4);
  margin-top: 2px;
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════ voices ═══

   Recordings customers sent in, played the way they arrived: as
   voice notes. Using their audio rather than a typed quote is the
   whole argument — anybody can type a sentence — so the waveform,
   the running time and the verified mark all work to keep that
   difference visible.

   It rides the gallery's carousel. Four cards two-by-two took most
   of a screen on the way to the prices, and this is worth showing
   without being worth that. A strip is one card tall however many
   arrive later. */

.voices { position: relative; }

/* One soft wash behind the whole strip rather than a halo per card:
   four glows side by side is a blur, not a highlight. */
.voices::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 76%;
  background:
    radial-gradient(46% 64% at 22% 34%, rgba(var(--red-rgb), .11), transparent 70%),
    radial-gradient(42% 60% at 78% 20%, rgba(var(--ember-rgb), .10), transparent 72%);
  pointer-events: none;
}
.voices > .shell, .voices > .gal { position: relative; }

/* Tighter than a full section head: the heading and one line, then
   straight into the cards. */
.voices .sec-intro { margin-bottom: 22px; font-size: 16.5px; }

/* the line that does the arguing */
.vn-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 6px;
}
.vn-proof span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--tx-2);
  background: var(--bg-100);
  border: 1px solid var(--line-lift);
  border-radius: 999px;
}
.vn-proof svg { width: 13px; height: 13px; flex: 0 0 auto; }
.vn-proof .y { color: var(--red-soft); }
.vn-proof .y svg { color: var(--red); }

/* ── a card, as a slide ─────────────────────────────────────── */

.vn-car { margin-top: 10px; }
.vn-track { padding-top: 4px; padding-bottom: 14px; gap: 12px; }

.vn {
  --h: var(--red);
  --h-rgb: var(--red-rgb);
  flex: 0 0 auto;
  width: 268px;
  margin: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 11px;
  background:
    linear-gradient(180deg, rgba(var(--h-rgb), .07), transparent 42%),
    var(--bg-100);
  border: 1px solid var(--line-lift);
  border-radius: var(--r-card);
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.vn:hover {
  border-color: rgba(var(--h-rgb), .42);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -26px rgba(var(--h-rgb), .7);
}

/* Playing is a state worth seeing from across the strip. */
.vn.on {
  border-color: rgba(var(--h-rgb), .55);
  box-shadow: 0 0 0 1px rgba(var(--h-rgb), .22), 0 20px 50px -28px rgba(var(--h-rgb), .85);
}

.vn-top { display: flex; align-items: center; gap: 9px; }

/* The stand-in a messaging app shows when somebody has no photo. It
   takes the card's colour, so the strip still reads as four people
   rather than four copies of one icon. */
.vn-av {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: block;
  color: var(--h);
}
.vn-av svg { display: block; width: 100%; height: 100%; }

/* The ring only breathes while something is playing, so it means
   "this one is talking" rather than being decoration. */
.vn.on .vn-av::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(var(--h-rgb), .5);
  animation: vnRing 1.5s ease-out infinite;
}
@keyframes vnRing {
  0%   { transform: scale(.88); opacity: .85; }
  100% { transform: scale(1.18); opacity: 0; }
}

.vn-who { min-width: 0; }
.vn-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tx);
  line-height: 1.3;
}
.vn-name .num { font-family: var(--num); }

/* The verified mark. Not a generic tick: it says what it checked. */
.vn-ok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--red-soft);
  background: rgba(var(--red-rgb), .12);
  border: 1px solid rgba(var(--red-rgb), .3);
  border-radius: 999px;
  white-space: nowrap;
}
.vn-ok svg { width: 11px; height: 11px; color: var(--red); }

.vn-sub { font-size: 11px; color: var(--tx-4); margin-top: 1px; }

/* ── one voice note ─────────────────────────────────────────── */

.vn-clip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  background: var(--bg-050);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.vn-clip + .vn-clip { margin-top: -3px; }

.vn-play {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--bg-000);
  background: var(--h);
  transition: transform .16s ease, filter .16s ease;
}
.vn-play:hover { filter: brightness(1.08); }
.vn-play:active { transform: scale(.94); }
.vn-play:focus-visible { outline: 2px solid var(--red-lift); outline-offset: 2px; }
.vn-play svg { width: 14px; height: 14px; }
.vn-play .pause { display: none; }
.vn-clip.on .vn-play .play  { display: none; }
.vn-clip.on .vn-play .pause { display: block; }

/* ── the waveform ───────────────────────────────────────────── */

/* Bars are real elements rather than a picture, because the played
   part has to colour in as it goes and a picture cannot do that
   without a second copy of itself. */
.vn-wave {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
  min-width: 0;
  cursor: pointer;
}
.vn-wave i {
  flex: 1 1 0;
  min-width: 2px;
  max-width: 3px;
  border-radius: 2px;
  background: var(--line-lift);
  transform-origin: center;
  transition: background .12s linear;
}
.vn-wave i.p { background: var(--h); }

/* A voice note's bars do not sit still while it plays — the ones
   behind the playhead lift slightly. Three staggered steps reads as
   movement without turning into a light show. */
.vn-clip.on .vn-wave i.p:nth-child(3n)   { animation: vnPulse .9s ease-in-out infinite; }
.vn-clip.on .vn-wave i.p:nth-child(3n+1) { animation: vnPulse .9s ease-in-out .16s infinite; }
.vn-clip.on .vn-wave i.p:nth-child(3n+2) { animation: vnPulse .9s ease-in-out .32s infinite; }
@keyframes vnPulse {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.42); }
}

/* The head of the played part, the way a voice note shows where it
   has got to. */
.vn-dot {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  margin-inline-start: -4.5px;
  border-radius: 50%;
  background: var(--h);
  box-shadow: 0 0 0 3px rgba(var(--h-rgb), .22);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.vn-clip.on .vn-dot { opacity: 1; }

.vn-time {
  flex: 0 0 auto;
  min-width: 32px;
  text-align: center;
  font-family: var(--num);
  font-size: 11.5px;
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
}
.vn-clip.on .vn-time { color: var(--h); }

/* A second note from the same person needs saying, or it reads as a
   duplicate. */
.vn-again {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 1px 0 -2px;
  font-size: 11px;
  color: var(--tx-4);
}
.vn-again::before,
.vn-again::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

/* ── the phone ──────────────────────────────────────────────── */

@media (max-width: 680px) {
  /* One card, near enough the full width, with the next one peeking
     in so the strip is obviously a strip. The arrows are hidden —
     there is nowhere to put them that is not on top of a card, and a
     thumb swipes. */
  .vn { width: min(74vw, 290px); }
  .vn-car .gal-arrow { display: none; }
  .voices .sec-intro { margin-bottom: 18px; font-size: 15.5px; }

  /* Thumbs, not cursors: 44px is the smallest target a finger hits
     reliably, and play is the only thing this card is for. */
  .vn-play { width: 44px; height: 44px; }
  .vn-play svg { width: 16px; height: 16px; }
  .vn-wave { height: 32px; }
  .vn-clip { padding: 8px 9px; gap: 9px; }
  .vn-name { font-size: 14px; flex-wrap: wrap; }
}

/* Very narrow: the bars get too thin to read, so fewer are shown
   rather than all of them squeezed into a smear. */
@media (max-width: 400px) {
  .vn-wave i:nth-child(3n+2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vn.on .vn-av::after,
  .vn-clip.on .vn-wave i.p { animation: none; }
}