/* ── the accent tints ───────────────────────────────────────
   A wash of the brand colour, for the inside of a bar or the
   background of an icon: enough to read as "this is ours" and
   not enough to compete with the text on top of it.

   These were being used before they were defined — they came from
   the plugin's stylesheet, where they exist. An undefined custom
   property resolves to nothing, so every one of them was drawing
   an invisible fill. */
:root {
  --ac-dim-1: rgba(var(--red-rgb), .10);
  --ac-dim-2: rgba(var(--red-rgb), .17);
  --ac-line-2: rgba(var(--red-rgb), .34);
}
/* ═══════════════════════════════════════════════════════════════
   Account, login and admin.

   These are product screens, not marketing, and they follow the
   calm-ui constraints rather than the landing page's: a tight type
   scale topping out at the page title, quiet shadows with no tint,
   small radii on containers, and one primary action per screen.
   The brand colour still identifies the product, but it stops
   doing decorative work here.

   The landing page is deliberately the opposite — expressive, big,
   animated — because it has a different job. Same palette, two
   different densities.
   ═══════════════════════════════════════════════════════════════ */

.page { padding: 44px 0 80px; }
.page-head { margin-bottom: 30px; }
.page-head h1 { margin: 0 0 6px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.page-head p { margin: 0; color: var(--tx-3); font-size: 15px; }

/* ── auth card ────────────────────────────────────────────── */

.auth-wrap { min-height: calc(100vh - 68px); display: grid; place-items: center; padding: 40px 20px; }
.auth {
  width: 100%; max-width: 420px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: linear-gradient(165deg, var(--bg-200), var(--bg-100));
  padding: 32px 28px 28px;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.auth h1 { margin: 16px 0 6px; font-size: 21px; font-weight: 800; }
.auth .sub { color: var(--tx-3); font-size: 14.5px; margin: 0 0 26px; }

.tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--bg-100); border: 1px solid var(--line); margin-bottom: 26px; }
.tabs button {
  flex: 1 1 0; padding: 9px 10px; border: 0; border-radius: var(--r-pill);
  background: none; color: var(--tx-3); font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.tabs button.on { background: linear-gradient(135deg, var(--red), var(--red-deep)); color: #fff; }
.tabs button:active { transform: scale(.97); }
.inp:disabled { opacity: .5; cursor: not-allowed; }

/* ── fields ───────────────────────────────────────────────── */

.field { margin-bottom: 15px; }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--tx-2); margin-bottom: 8px; }
.inp {
  width: 100%; padding: 12px 15px;
  border-radius: var(--r-card);
  border: 1px solid var(--line-lift);
  background: rgba(0,0,0,.32);
  color: var(--tx);
  font: inherit; font-size: 15px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.inp::placeholder { color: var(--tx-4); }
.inp:focus {
  outline: none;
  border-color: var(--red-lift);
  box-shadow: 0 0 0 3px rgba(var(--red-rgb), .16);
}
select.inp { cursor: pointer; }

.msg {
  border-radius: var(--r-card);
  padding: 11px 14px;
  font-size: 14px;
  margin-bottom: 16px;
  border-inline-start: 3px solid;
  display: none;
}
.msg.on { display: block; }
.msg.err  { background: rgba(255,138,61,.09);  border-color: var(--amber);  color: #FFA76B; }
.msg.ok   { background: rgba(74,222,110,.09);  border-color: var(--ok);  color: #9CEBAA; }
.msg.info { background: rgba(125,211,252,.08); border-color: var(--info);    color: var(--info); }

.auth-foot { margin-top: 20px; text-align: center; font-size: 14px; color: var(--tx-4); }
.auth-foot a { color: var(--red-soft); font-weight: 700; }

/* ── cards & tables ───────────────────────────────────────── */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 30px; }
.card {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-100);
  padding: 20px 22px;
}
.card .k { font-size: 12.5px; color: var(--tx-3); font-weight: 600; margin-bottom: 6px; }
.card .v { font-family: var(--num); font-size: 20px; font-weight: 700; color: var(--tx); }

.panel {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-100);
  overflow: hidden;
  margin-bottom: 22px;
}
.panel-hd {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.panel-hd h2 { margin: 0; font-size: 16.5px; font-weight: 800; }
.panel-hd .grow { flex: 1 1 auto; }
.panel-bd { padding: 20px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 12px; color: var(--tx-4); font-weight: 700; letter-spacing: .03em; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .18s var(--ease); }
tbody tr:hover { background: rgba(255,255,255,.02); }
.table-wrap { overflow-x: auto; }

.pill {
  display: inline-block; padding: 4px 12px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600;
}
.pill.pending  { background: rgba(255,210,77,.14); color: var(--yellow); }
.pill.paid     { background: rgba(61,220,151,.14); color: var(--ok); }
.pill.rejected { background: rgba(255,138,61,.13); color: var(--amber); }
.pill.revoked  { background: rgba(255,138,61,.13); color: var(--amber); }
.pill.active   { background: rgba(61,220,151,.14); color: var(--ok); }

.key-box {
  font-family: var(--num);
  font-size: 15px; font-weight: 700;
  letter-spacing: .04em;
  background: rgba(0,0,0,.4);
  border: 1px dashed var(--line-lift);
  border-radius: var(--r-card);
  padding: 13px 16px;
  display: flex; align-items: center; gap: 12px;
  direction: ltr;
}
.key-box .grow { flex: 1 1 auto; }

.empty { text-align: center; padding: 40px 20px; color: var(--tx-4); font-size: 14.5px; }

/* The rest of a long table, one click away. Sits under the wrap
   rather than inside it, so it never scrolls sideways with a wide
   table on a phone. */
.more {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}
.more-n { font-size: 13px; color: var(--tx-4); }

.row-actions { display: flex; gap: 7px; flex-wrap: wrap; }

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

/* ── the subscribe flow ──────────────────────────────
   Three numbered steps rather than one long form, because the
   middle one happens in a different app entirely — somebody leaves
   the page to make a transfer and comes back. Numbering the steps
   is what makes leaving and returning feel like part of the flow
   instead of an interruption. */

.step-block { padding: 20px 0; border-top: 1px solid var(--line); }
.step-block:first-child { padding-top: 0; border-top: 0; }

.step-line { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.step-line h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.step-line .n {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, var(--red-ink-a), var(--red-ink-b));
  box-shadow: var(--glow);
}

/* ── picking a term ───────────────────────────────── */

.term-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.term-opt {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 15px 16px; border-radius: var(--r-card); cursor: pointer; text-align: start;
  border: 1px solid var(--line-lift); background: var(--bg-100);
  transition: border-color .2s var(--ease), background .2s var(--ease),
              transform .2s var(--spring), box-shadow .25s var(--ease);
}
.term-opt:hover { transform: translateY(-2px); border-color: var(--tx-4); }
.term-opt.on {
  border-color: var(--red);
  background: linear-gradient(150deg, var(--bg-200), var(--bg-100));
  box-shadow: var(--glow);
}
.term-opt b { font-size: 15px; font-weight: 600; }
.term-opt span { font-family: var(--num); font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.term-opt.on span { color: var(--red-soft); }
.term-opt small { font-size: 13px; color: var(--tx-3); }

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

.pay-ways { display: grid; gap: 10px; }
.pay-way {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px 18px; border-radius: var(--r-card); cursor: pointer; text-align: start;
  border: 1px solid var(--line-lift); background: var(--bg-100);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--spring);
}
.pay-way:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(47,217,190,.4); background: var(--bg-200); }
.pay-way:disabled { opacity: .45; cursor: not-allowed; }
.pay-way .grow { flex: 1 1 auto; display: block; }
.pay-way b { display: block; font-size: 15px; font-weight: 600; }
.pay-way small { display: block; font-size: 13.5px; color: var(--tx-3); margin-top: 3px; }
.pay-way-ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-ctl);
  display: grid; place-items: center;
  background: rgba(47,217,190,.12); color: var(--red-soft);
  box-shadow: inset 0 0 0 1px rgba(47,217,190,.2);
}
.pay-way-ic svg { width: 20px; height: 20px; }
.pay-way-go {
  flex: 0 0 auto; font-size: 13.5px; font-weight: 600; color: var(--red-soft);
  border: 1px solid rgba(47,217,190,.34); border-radius: var(--r-pill); padding: 6px 13px;
}

/* ── what appears once they ask ──────────────────────── */

.reveal {
  margin-top: 14px; padding: 18px; border-radius: var(--r-card);
  border: 1px solid rgba(47,217,190,.26);
  background: radial-gradient(420px 160px at 50% 0%, rgba(47,217,190,.09), transparent 70%), var(--bg-000);
  animation: revealIn .32s var(--ease);
}
@keyframes revealIn { from { opacity: 0; transform: translateY(-6px); } }
.reveal-lead { margin: 0 0 12px; font-size: 14.5px; color: var(--tx-2); }
.reveal-lead b { font-size: 18px; color: var(--red-soft); }

.wa-note {
  display: flex; gap: 14px; margin-top: 16px; padding-top: 16px;
  border-top: 1px dashed var(--line-lift);
}
.wa-note b { color: var(--tx); }
.wa-note p { margin: 6px 0 12px; font-size: 14px; color: var(--tx-3); line-height: 1.8; }
.wa-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-ctl);
  display: grid; place-items: center;
  background: rgba(37,211,102,.14); color: #4BDD82;
}
.wa-ic svg { width: 19px; height: 19px; }

.hint { display: block; margin-top: 7px; font-size: 13.5px; color: var(--tx-3); }

.msg.warn { background: rgba(242,163,60,.1); border-color: var(--amber); color: #F5BE79; }

@media (max-width: 620px) {
  .term-pick { grid-template-columns: 1fr; }
  .wa-note { flex-direction: column; gap: 10px; }
}

@media (max-width: 620px) {
  .page { padding: 28px 0 60px; }
  .auth { padding: 28px 22px 26px; }
  th, td { padding: 10px; }
}

/* ── the way back into a locked-out account ─────────────────
   Sitting under the password field rather than in the footer,
   because that is where somebody is when they realise they cannot
   remember it. */
.forgot {
  display: inline-block; margin-top: 8px;
  font-size: 13px; color: var(--tx-4);
  transition: color .2s var(--ease);
}
.forgot:hover { color: var(--red-soft); }
@media (pointer: coarse) { .forgot { padding: 10px 0; min-height: 44px; } }

/* ── admin: settings and release forms ──────────────────────
   Grouped in a grid rather than one column, because these are
   short related values and a single stack turns eight fields into
   a scroll. */
.panel-lead { margin: 0 0 18px; font-size: 14px; color: var(--tx-3); line-height: 1.85; max-width: 62ch; }

.sub-h {
  margin: 26px 0 13px; font-size: 14.5px; font-weight: 600;
  color: var(--tx-2); letter-spacing: -.01em;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.sub-h:first-child { margin-top: 0; }
.sub-h small { font-weight: 400; font-size: 13px; color: var(--tx-3); margin-inline-start: 8px; }

.grid2, .grid3 { display: grid; gap: 14px; }
.grid2 { grid-template-columns: repeat(2, 1fr); }
.grid3 { grid-template-columns: repeat(3, 1fr); }
.grid2 .span2, .grid3 .span2 { grid-column: 1 / -1; }

@media (max-width: 780px) {
  .grid2, .grid3 { grid-template-columns: 1fr; }
}

/* ── coupons ────────────────────────────────────────────────
   Under the terms rather than beside the reference number: a code
   changes the price, so it belongs where the price is decided, not
   where the transfer is confirmed. */
.coupon { margin-top: 16px; }
.coupon > label { display: block; font-size: 13px; font-weight: 600; color: var(--tx-3); margin-bottom: 7px; }
.coupon-row { display: flex; gap: 8px; }
.coupon-row .inp { flex: 1 1 auto; text-transform: uppercase; }
.coupon-row .btn { flex: 0 0 auto; }
.coupon .msg { margin-top: 10px; }

/* ── the receipt ────────────────────────────────────────────
   Uploading it is genuinely faster than sending it on WhatsApp and
   waiting to be noticed, so the label says so rather than leaving
   people to guess which route is quicker. */
.faster {
  font-size: 12px; font-weight: 600; color: var(--ok);
  border: 1px solid rgba(63,207,142,.34); background: rgba(63,207,142,.09);
  border-radius: var(--r-tag); padding: 2px 8px; margin-inline-start: 8px;
}

.drop {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 22px 18px; cursor: pointer; text-align: center;
  border: 1px dashed var(--line-lift); border-radius: var(--r-card);
  background: var(--bg-100); color: var(--tx-3); font-size: 14.5px;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.drop:hover { border-color: var(--tx-4); background: var(--bg-200); color: var(--tx-2); }
.drop svg { width: 22px; height: 22px; flex: 0 0 auto; }
.drop.has { border-style: solid; border-color: var(--ok); color: #9CEBAA; }
.drop:focus-within { outline: 2px solid var(--red-lift); outline-offset: 2px; }

.shot-prev {
  display: block; margin-top: 10px; max-height: 190px; border-radius: var(--r-ctl);
  border: 1px solid var(--line-lift);
}

/* ── the download ───────────────────────────────────────────*/

.dl-line {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; border-radius: var(--r-card);
  border: 1px solid rgba(47,217,190,.28);
  background: radial-gradient(420px 160px at 50% 0%, rgba(47,217,190,.1), transparent 70%), var(--bg-000);
  margin-bottom: 6px;
}
.dl-line b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.dl-line small { display: block; font-family: var(--num); font-size: 13.5px; color: var(--tx-2); margin-top: 4px; }
.btn.is-off { opacity: .45; pointer-events: none; }

/* The one button in the panel with nothing behind it. Amber rather
   than teal, so a row of identical buttons does not end in a
   deletion that looks like everything else. */
/* The switch between the two ways of paying.

   It is not a navigation control and it is not a filter: it is
   there for one case, somebody who pressed the wrong button on the
   way in. So it sits above everything, reads as two halves of one
   choice, and disappears entirely when only one of the two is
   available. */
.pay-tabs { margin-bottom: 22px; }
.pay-tabs[hidden] { display: none; }

.card-notes { margin: 16px 0 20px; }
.card-notes li { font-size: 14.5px; }

.btn.danger {
  color: #FFA76B;
  border-color: rgba(242,163,60,.34);
  background: rgba(242,163,60,.07);
}
.btn.danger:hover {
  border-color: var(--amber);
  background: rgba(242,163,60,.14);
}

.install { list-style: none; margin: 0; padding: 0; counter-reset: i; display: grid; gap: 16px; }
.install li {
  position: relative; padding-inline-start: 38px; counter-increment: i;
  font-size: 15px; color: var(--tx-2); line-height: 1.9;
}
.install li::before {
  content: counter(i);
  position: absolute; inset-inline-start: 0; top: 1px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--num); font-size: 12.5px; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, var(--red-ink-a), var(--red-ink-b));
}
.install b { color: var(--tx); }
.install code {
  display: block; margin: 8px 0; padding: 11px 13px;
  border-radius: var(--r-ctl); border: 1px solid var(--line-lift); background: var(--bg-000);
  font-family: var(--num); font-size: 13px; color: var(--tx-2);
  overflow-x: auto; white-space: nowrap;
}
.install .hint { margin-top: 4px; }

/* ── coupons and receipts in the orders table ───────────────*/

.cp-tag {
  display: inline-block; margin-top: 4px;
  font-family: var(--ff); font-size: 12.5px; font-weight: 600; letter-spacing: 0;
  color: var(--ok); border: 1px solid rgba(63,207,142,.32);
  background: rgba(63,207,142,.08); border-radius: var(--r-tag); padding: 2px 7px;
}

/* A thumbnail rather than a link that says "receipt": checking a
   transfer means looking at the image, and one click fewer per
   order adds up across a day of them. */
.shot-link { display: block; width: 54px; height: 54px; border-radius: var(--r-ctl); overflow: hidden;
  border: 1px solid var(--line-lift); background: var(--bg-000); }
.shot-link img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .25s var(--ease); }
.shot-link:hover img { transform: scale(1.08); }
.shot-link:focus-visible { outline: 2px solid var(--red-lift); outline-offset: 2px; }
.no-shot { color: var(--tx-4); }

/* ── the download page ──────────────────────────────────────*/

.dl-card {
  max-width: 760px; margin: 0 auto 64px;
  border-radius: var(--r-big);
  border: 1px solid rgba(47,217,190,.28);
  background: radial-gradient(560px 200px at 50% 0%, rgba(47,217,190,.1), transparent 72%), var(--bg-000);
  padding: 24px 26px;
}
.dl-main { display: flex; align-items: center; gap: 18px; }
.dl-main .grow { flex: 1 1 auto; }
.dl-main b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.dl-main small { display: block; font-family: var(--num); font-size: 14px; color: var(--tx-3); margin-top: 4px; }
.dl-ic {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: var(--r-card);
  display: grid; place-items: center;
  background: rgba(47,217,190,.13); color: var(--red-soft);
  box-shadow: inset 0 0 0 1px rgba(47,217,190,.22);
}
.dl-ic svg { width: 26px; height: 26px; }
.dl-card .msg { margin-top: 18px; }

/* ── the five steps ─────────────────────────────────────────
   Alternating sides rather than a stack of identical rows: the
   reader is meant to move through these in order, and a shape that
   changes is easier to keep a place in than one that repeats. */

.isteps { display: grid; gap: 20px; max-width: 940px; margin-inline: auto; }

.istep {
  display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: center;
  padding: 22px; border-radius: var(--r-big);
  border: 1px solid var(--line);
  background: linear-gradient(168deg, var(--bg-100), var(--bg-050));
}
.istep:nth-child(even) { grid-template-columns: 1fr 300px; }
.istep:nth-child(even) .istep-art { order: 2; }

.istep-art {
  border-radius: var(--r-card);
  border: 1px solid var(--line-lift);
  background:
    radial-gradient(280px 120px at 50% 0%, rgba(47,217,190,.06), transparent 70%),
    var(--bg-000);
  color: var(--tx-4);
  aspect-ratio: 200 / 120;
}
.istep-art svg { width: 100%; height: 100%; padding: 14px 18px; box-sizing: border-box; display: block; }

.istep-n {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 12px;
  font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, var(--red-ink-a), var(--red-ink-b));
  box-shadow: var(--glow);
}
.istep-body h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -.025em; }
.istep-body p { margin: 0; font-size: 16px; color: var(--tx-2); line-height: 1.95; }
.istep-body b { color: var(--tx); font-weight: 600; }

.txt-ac { color: var(--red-soft); font-weight: 600; }

@media (max-width: 860px) {
  /* One column, and the drawing always above its text \u2014 an
     alternating layout that collapses keeps the reading order but
     loses the reason for alternating. */
  .istep, .istep:nth-child(even) { grid-template-columns: 1fr; gap: 18px; }
  .istep:nth-child(even) .istep-art { order: 0; }
  .dl-main { flex-wrap: wrap; }
  .dl-main .btn { width: 100%; }
}

/* ── the InstaPay request link ──────────────────────────────
   Sits under the number rather than replacing it: the link opens
   the app with the recipient filled in, but plenty of people are
   on a wallet instead, and some will want to type the number into
   an app they already have open. */
.btn.ipn { margin-top: 12px; justify-content: center; }
.btn.ipn svg { width: 17px; height: 17px; }
.ipn-note { text-align: center; margin-top: 8px; }

/* ── moving between the three account pages ─────────────────
   Subscribing and checking a licence were sharing one page, and
   neither read as the page you came for. Three tabs, so where you
   are is visible and where else to go is one press. */
.acct-tabs {
  display: flex; gap: 4px; margin-bottom: 22px;
  padding: 5px; border-radius: var(--r-card);
  border: 1px solid var(--line); background: var(--bg-100);
  overflow-x: auto; scrollbar-width: none;
}
.acct-tabs::-webkit-scrollbar { display: none; }
.acct-tabs a {
  flex: 1 1 auto; text-align: center; white-space: nowrap;
  padding: 11px 18px; border-radius: var(--r-ctl);
  font-size: 14.5px; font-weight: 500; color: var(--tx-3);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.acct-tabs a:hover { color: var(--tx); background: var(--bg-200); }
.acct-tabs a.on {
  color: #fff; font-weight: 600;
  background: linear-gradient(140deg, var(--red-ink-a), var(--red-ink-b));
  box-shadow: var(--glow);
}

/* ── the subscription line on the account page ──────────────*/
.sub-cta { display: flex; align-items: center; gap: 16px; }
.sub-cta .grow { flex: 1 1 auto; }
.sub-cta b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.sub-cta small { display: block; margin-top: 4px; font-size: 14px; color: var(--tx-2); }

@media (max-width: 560px) {
  .sub-cta { flex-wrap: wrap; }
  .sub-cta .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════ the guide ═══ */

/* ── the jump strip ─────────────────────────────────────────
   Eleven tools is a long scroll. A sticky strip under the header
   keeps "which one am I reading" and "how do I reach the other
   one" both answered without going back to the top. */
.guide-jump {
  position: sticky; top: 68px; z-index: 40;
  background: rgba(14,11,9,.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.guide-jump-in {
  display: flex; gap: 4px; overflow-x: auto;
  width: min(1180px, calc(100% - 40px)); margin-inline: auto;
  padding: 10px 0; scrollbar-width: none;
}
.guide-jump-in::-webkit-scrollbar { display: none; }
.guide-jump a {
  flex: 0 0 auto; padding: 8px 14px; border-radius: var(--r-pill);
  font-size: 14px; color: var(--tx-3); white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.guide-jump a:hover { color: var(--tx); background: var(--bg-200); }
.guide-jump a.on {
  color: #fff; font-weight: 600;
  background: linear-gradient(140deg, var(--red-ink-a), var(--red-ink-b));
}
.guide-jump a.k { color: var(--red-soft); }
.guide-jump a.k.on { color: #fff; }

/* ── a tool, explained ──────────────────────────────────────*/

.hows { display: grid; gap: 20px; max-width: 980px; margin-inline: auto; }

.how {
  display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start;
  padding: 24px; border-radius: var(--r-big);
  border: 1px solid var(--line);
  background: linear-gradient(168deg, var(--bg-100), var(--bg-050));
  scroll-margin-top: 132px;
}
.how:nth-child(even) { grid-template-columns: 1fr 280px; }
.how:nth-child(even) .how-art { order: 2; }

/* The drawing stays with the steps while they are read, rather
   than scrolling away at the first one. */
.how-art {
  border-radius: var(--r-card);
  border: 1px solid var(--line-lift);
  background: radial-gradient(260px 110px at 50% 0%, rgba(47,217,190,.06), transparent 70%), var(--bg-000);
  color: var(--tx-4); aspect-ratio: 120 / 72;
  position: sticky; top: 140px;
}
.how-art svg { width: 100%; height: 100%; padding: 16px 22px; box-sizing: border-box; display: block; }

.how-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.how-h h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.025em; }

.how-steps { list-style: none; margin: 0; padding: 0; counter-reset: h; display: grid; gap: 12px; }
.how-steps li {
  position: relative; padding-inline-start: 34px; counter-increment: h;
  font-size: 15.5px; color: var(--tx-2); line-height: 1.9;
}
.how-steps li::before {
  content: counter(h);
  position: absolute; inset-inline-start: 0; top: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--num); font-size: 12px; font-weight: 700;
  color: var(--red-soft); background: rgba(47,217,190,.13);
  box-shadow: inset 0 0 0 1px rgba(47,217,190,.22);
}
.how-steps b { color: var(--tx); font-weight: 600; }

.how-tip {
  margin: 16px 0 0; padding: 13px 15px;
  border-radius: var(--r-ctl);
  border-inline-start: 3px solid var(--red);
  background: rgba(47,217,190,.07);
  font-size: 14.8px; color: var(--tx-2); line-height: 1.85;
}
.how-tip b { color: var(--tx); }

/* ── why the key is theirs ──────────────────────────────────*/

.own-key {
  display: flex; gap: 22px; max-width: 820px; margin: 0 auto 26px;
  padding: 26px; border-radius: var(--r-big);
  border: 1px solid rgba(47,217,190,.26);
  background: radial-gradient(520px 200px at 50% 0%, rgba(47,217,190,.09), transparent 72%), var(--bg-000);
}
.own-key-ic {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--r-card);
  display: grid; place-items: center;
  background: rgba(47,217,190,.13); color: var(--red-soft);
  box-shadow: inset 0 0 0 1px rgba(47,217,190,.22);
}
.own-key-ic svg { width: 23px; height: 23px; }
.own-key h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.own-key p { margin: 0 0 12px; font-size: 15.5px; color: var(--tx-2); line-height: 1.9; }
.own-key-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.own-key-list li {
  position: relative; padding-inline-start: 24px;
  font-size: 15px; color: var(--tx-2); line-height: 1.85;
}
.own-key-list li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 3px rgba(47,217,190,.14);
}
.own-key-list b { color: var(--tx); }

/* ── one provider ───────────────────────────────────────────*/

.keys { display: grid; gap: 20px; max-width: 980px; margin-inline: auto; }

.keyc {
  padding: 24px; border-radius: var(--r-big);
  border: 1px solid var(--line);
  background: linear-gradient(168deg, var(--bg-100), var(--bg-050));
  scroll-margin-top: 132px;
}
.keyc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.keyc-head h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.keyc-used { font-size: 14px; color: var(--tx-3); }

/* Capped rather than stretched: a provider with one drawing was
   getting a picture the width of the card, which made a small
   diagram look like the point of the section. */
.keyc-arts {
  display: grid; gap: 14px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 320px));
  justify-content: start;
}
.keyc-art {
  border-radius: var(--r-card);
  border: 1px solid var(--line-lift);
  background: var(--bg-000); color: var(--tx-4);
  aspect-ratio: 200 / 120;
}
.keyc-art svg { width: 100%; height: 100%; padding: 12px 16px; box-sizing: border-box; display: block; }

.keyc-foot {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
}
.keyc-foot > div { flex: 1 1 auto; }
.keyc-foot b { display: block; font-size: 13.5px; color: var(--tx-3); margin-bottom: 4px; }
.keyc-foot span { font-size: 15px; color: var(--tx-2); }
.keyc code {
  font-family: var(--num); font-size: 14px; color: var(--red-soft);
  background: rgba(47,217,190,.1); border-radius: var(--r-tag); padding: 2px 7px;
}

/* The step people get wrong, marked inside the sentence rather
   than pulled into a box that gets skipped. */
.warn-in { color: var(--red-soft); }

/* ── where the key goes ─────────────────────────────────────*/

.paste-note {
  display: grid; grid-template-columns: 280px 1fr; gap: 26px; align-items: center;
  max-width: 980px; margin: 26px auto 0;
  padding: 24px; border-radius: var(--r-big);
  border: 1px solid var(--line); background: var(--bg-100);
}
.paste-art {
  border-radius: var(--r-card); border: 1px solid var(--line-lift);
  background: var(--bg-000); color: var(--tx-4); aspect-ratio: 200 / 120;
}
.paste-art svg { width: 100%; height: 100%; padding: 12px 16px; box-sizing: border-box; display: block; }
.paste-note h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.paste-note p { margin: 0 0 10px; font-size: 15.5px; color: var(--tx-2); line-height: 1.9; }
.paste-note .sub-note { font-size: 14.5px; color: var(--tx-3); margin: 0; }

/* ── the honest number ──────────────────────────────────────*/

.accuracy {
  display: flex; gap: 26px; align-items: flex-start;
  max-width: 820px; margin-inline: auto;
  padding: 28px; border-radius: var(--r-big);
  border: 1px solid var(--line-lift); background: var(--bg-100);
}
.acc-num {
  flex: 0 0 auto; text-align: center;
  padding: 16px 20px; border-radius: var(--r-card);
  background: rgba(47,217,190,.1);
  box-shadow: inset 0 0 0 1px rgba(47,217,190,.22);
}
.acc-num b { display: block; font-size: 34px; font-weight: 700; color: var(--red-soft); letter-spacing: -.03em; }
.acc-num span { font-size: 13px; color: var(--tx-3); }
.accuracy h3 { margin: 0 0 12px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.accuracy p { margin: 0 0 12px; font-size: 15.5px; color: var(--tx-2); line-height: 1.9; }
.accuracy p:last-child { margin-bottom: 0; }
.accuracy b { color: var(--tx); }

@media (max-width: 860px) {
  .how, .how:nth-child(even),
  .paste-note { grid-template-columns: 1fr; gap: 18px; }
  .how:nth-child(even) .how-art { order: 0; }
  .how-art { position: static; }
  .own-key, .accuracy { flex-direction: column; gap: 18px; }
  .guide-jump { top: 60px; }
}

/* ── which build a customer is on ───────────────────────────
   The two are not styled symmetrically on purpose. Windows is the
   overwhelming majority and reads as the quiet default; Mac is the
   newer, less-proven build, and the column exists mainly so it can
   be picked out of three hundred rows at a glance. */
.os-tag {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.os-tag.win {
  color: var(--tx-3);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--line-lift);
}
.os-tag.mac {
  color: var(--red-soft);
  background: rgba(47,217,190,.11);
  box-shadow: inset 0 0 0 1px rgba(47,217,190,.26);
}

/* ── choosing a machine ─────────────────────────────────────
   Two options, so real buttons rather than a select: the wrong
   one being pre-selected has to be fixable at a glance, without
   opening anything. Sits above the download card because it
   governs it — and the steps, and the troubleshooting below. */
.ospick {
  display: flex; gap: 6px; justify-content: center;
  margin: 0 auto 18px; padding: 5px;
  width: max-content; max-width: 100%;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg-100);
}
.ospick-b {
  display: flex; align-items: center; gap: 8px;
  /* 44px tall including the padding — this is a phone target. */
  padding: 10px 20px; min-height: 44px;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--tx-3);
  font-family: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.ospick-b svg { width: 17px; height: 17px; flex: 0 0 auto; }
.ospick-b:hover { color: var(--tx); }
.ospick-b.on {
  color: #fff;
  background: linear-gradient(140deg, var(--red-ink-a), var(--red-ink-b));
  box-shadow: 0 6px 18px -8px rgba(47,217,190,.6);
}
.ospick-b:focus-visible { outline: 2px solid var(--red-lift); outline-offset: 2px; }

@media (max-width: 420px) {
  .ospick { width: 100%; }
  .ospick-b { flex: 1 1 0; justify-content: center; padding-inline: 10px; }
}

/* The other platform's build, from the account card. Deliberately
   a plain link and not a second button: one download is the answer
   for almost everybody, and two equal buttons would make choosing
   feel like part of the job. */
.dl-other {
  display: inline-block; margin-top: 12px;
  font-size: 14px; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}

/* ── the Mac build, while it is still a beta ────────────────
   Marked on the button rather than only in a note further down:
   the mark has to be attached to the thing being chosen, at the
   moment of choosing it. */
.ospick-beta {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 6px; border-radius: var(--r-tag);
  color: var(--amber);
  background: rgba(255,138,61,.14);
  box-shadow: inset 0 0 0 1px rgba(255,138,61,.3);
}
/* On the selected button the tag sits on a red field, where an
   amber-on-amber tag would disappear. */
.ospick-b.on .ospick-beta {
  color: #fff;
  background: rgba(0,0,0,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}

.beta-note {
  max-width: 940px; margin: 0 auto 22px;
  padding: 18px 20px; border-radius: var(--r-big);
  border: 1px solid rgba(255,138,61,.28);
  border-inline-start: 3px solid var(--amber);
  background: rgba(255,138,61,.06);
}
.beta-note b {
  display: block; margin-bottom: 6px;
  font-size: 16px; font-weight: 600; color: var(--amber);
}
.beta-note p { margin: 0; font-size: 15px; line-height: 1.9; color: var(--tx-2); }

/* ── how many machines ──────────────────────────────────────
   One is the answer for almost everybody, so this opens as a line
   of small print rather than a control. A slider sitting open
   under the plans asks a question most people were not going to
   ask, and every extra visible control makes the ones that matter
   harder to find. */

.seat-open {
  display: block; width: 100%; margin: 14px 0 0;
  padding: 10px 2px; min-height: 44px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 14px; color: var(--tx-3);
  text-align: start;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line-lift);
  transition: color .18s var(--ease), text-decoration-color .18s var(--ease);
}
.seat-open:hover { color: var(--tx-2); text-decoration-color: var(--tx-4); }
.seat-open:focus-visible { outline: 2px solid var(--red-lift); outline-offset: 2px; border-radius: var(--r-ctl); }
/* Once it is carrying a decision it stops being an aside. */
.seat-open.has { color: var(--red-soft); text-decoration-color: rgba(47,217,190,.4); }

.seat-box {
  margin-top: 10px; padding: 18px 20px 16px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--bg-000);
}
.seat-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.seat-head label { font-size: 15px; color: var(--tx-2); }
.seat-head b { font-size: 26px; font-weight: 700; color: var(--red-soft); letter-spacing: -.02em; }

/* The browser's own range is a different shape in every engine and
   none of them match this page, so the track and the thumb are
   drawn here. Both vendor blocks are needed: a selector either
   engine does not recognise invalidates the whole rule. */
.seat-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; margin: 0;
  background: transparent; cursor: pointer; display: block;
  /* Left-to-right even here. On an RTL page a range puts its
     minimum on the right, and the numerals under it read the other
     way — so the thumb sat over "4" while the field said 3. The
     numbers are the label; the track follows them. */
  direction: ltr;
}
.seat-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 99px;
  background: var(--bg-200);
  box-shadow: inset 0 0 0 1px var(--line-lift);
}
.seat-range::-moz-range-track {
  height: 6px; border-radius: 99px;
  background: var(--bg-200);
  box-shadow: inset 0 0 0 1px var(--line-lift);
}
.seat-range::-moz-range-progress {
  height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, var(--red-ink-a), var(--ember));
}
.seat-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px;
  border-radius: 50%; border: 0;
  background: linear-gradient(140deg, var(--red-lift), var(--red));
  box-shadow: 0 2px 10px -2px rgba(0,0,0,.7), 0 0 0 4px rgba(47,217,190,.15);
}
.seat-range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%; border: 0;
  background: linear-gradient(140deg, var(--red-lift), var(--red));
  box-shadow: 0 2px 10px -2px rgba(0,0,0,.7), 0 0 0 4px rgba(47,217,190,.15);
}
.seat-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(255,107,82,.45); }
.seat-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(255,107,82,.45); }

/* The stops, so the track reads as six choices rather than a
   continuous slide with a ceiling nobody can see. */
/* The stops have to line up with where the thumb actually stops,
   which is not the same as spreading six labels across the width:
   the thumb's centre travels from half its own width in to half
   its width from the end. Giving each label exactly the thumb's
   width and spacing them apart makes the two grids identical. */
.seat-ticks {
  display: flex; justify-content: space-between;
  margin: 2px 0 0;
  font-size: 12px; color: var(--tx-4);
  direction: ltr;
}
.seat-ticks span { width: 22px; text-align: center; }

.seat-note {
  margin: 12px 0 0; font-size: 13.5px; line-height: 1.8; color: var(--tx-3);
}
.seat-note b { color: var(--tx-2); font-weight: 600; }

.seat-sum {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 14px; color: var(--tx-3);
}
.seat-sum b { color: var(--tx-2); font-weight: 600; }
.seat-sum .seat-total { margin-inline-start: auto; color: var(--tx-2); }
.seat-sum .seat-total b { color: var(--red-soft); font-size: 16px; }

/* ── finding one customer among three hundred ───────────────
   In the panel header rather than above the table, so it reads as
   a control on that panel and not as a page-wide search. */
.find { display: flex; gap: 8px; align-items: center; }
.find-in {
  width: min(280px, 42vw); padding: 8px 12px;
  font-size: 14px;
}
/* Chrome draws its own clear button on type=search and it lands on
   top of ours in RTL. */
.find-in::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.find-note {
  margin: 0 0 12px; font-size: 13.5px; color: var(--tx-3);
}

/* A label that only a screen reader reads. The placeholder says the
   same thing, but a placeholder is not a label and disappears the
   moment anything is typed. */
.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── is this subscription live ──────────────────────────────
   A dot beside the address, so a full list can be read down rather
   than across. Colour alone would be no answer for anyone who
   cannot separate green from grey, so the shapes differ too — the
   live one is filled and ringed, the dead one is hollow — and both
   carry a title. */
.who-line { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tx-4); }
.who-line .dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.who-line .dot.on {
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(63,207,142,.16);
}
.who-line .dot.off {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-lift);
}

/* How many machines, when it is more than the one everybody gets. */
.seat-tag {
  display: inline-block; margin-top: 4px;
  font-size: 12px; font-weight: 600; letter-spacing: 0;
  color: var(--red-soft);
  background: rgba(47,217,190,.1);
  border-radius: var(--r-tag); padding: 2px 7px;
}

/* ── the six-digit code ─────────────────────────────────────
   Spaced and oversized because it is copied from another screen —
   usually a phone held next to the laptop — and a digit misread
   there costs one of five attempts. */
.code-in {
  font-family: var(--num);
  font-size: 26px; font-weight: 700;
  letter-spacing: .38em; text-align: center;
  text-indent: .38em;          /* the tracking pads the right side only */
  padding-block: 14px;
}
.code-in::placeholder { letter-spacing: .3em; opacity: .3; font-weight: 500; }

/* ── transcription minutes ──────────────────────────────────
   The bar shows the monthly allowance only. Bought minutes sit
   beside it in words instead: folding them in would make a full
   bar look half empty the moment somebody topped up, which is the
   opposite of what buying more should feel like. */
.min-bar {
  height: 8px; border-radius: 99px; overflow: hidden;
  background: var(--bg-200);
  box-shadow: inset 0 0 0 1px var(--line-lift);
}
.min-bar span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--red-ink-a), var(--ember));
  transition: width .4s var(--ease);
}
.min-legend {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  margin-top: 8px; font-size: 14px; color: var(--tx-2);
}
.min-legend b { color: var(--red-soft); font-size: 16px; }

.min-buy {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.min-buy b { font-size: 15px; }

/* ── the rules page ─────────────────────────────────────────
   Set as a document rather than as marketing: a measured column,
   numbered sections, and nothing competing with the words. Terms
   people cannot read are terms that were not really offered. */

.rule-jump {
  display: flex; flex-wrap: wrap; gap: 5px;
  max-width: 820px; margin: 0 auto 34px;
  padding: 12px; border-radius: var(--r-card);
  border: 1px solid var(--line); background: var(--bg-100);
}
.rule-jump a {
  padding: 7px 12px; border-radius: var(--r-pill);
  font-size: 13.5px; color: var(--tx-3);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.rule-jump a:hover { color: var(--tx); background: var(--bg-200); }
.rule-jump a.on {
  color: #fff; font-weight: 600;
  background: linear-gradient(140deg, var(--red-ink-a), var(--red-ink-b));
}

.rules { max-width: 820px; margin-inline: auto; display: grid; gap: 30px; }

.rule {
  display: grid; grid-template-columns: 40px 1fr; gap: 18px; align-items: start;
  scroll-margin-top: 96px;
}
.rule-n {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
  color: var(--red-soft); background: rgba(47,217,190,.12);
  box-shadow: inset 0 0 0 1px rgba(47,217,190,.22);
}
.rule-body h2 {
  margin: 4px 0 12px; font-size: 21px; font-weight: 600; letter-spacing: -.02em;
}
.rule-body p {
  margin: 0 0 12px; font-size: 16px; line-height: 1.95; color: var(--tx-2);
}
.rule-body p:last-child { margin-bottom: 0; }
.rule-body b { color: var(--tx); font-weight: 600; }

.rule-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.rule-list li {
  position: relative; padding-inline-start: 22px;
  font-size: 15.5px; line-height: 1.9; color: var(--tx-2);
}
.rule-list li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 11px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 3px rgba(47,217,190,.13);
}

.rule-updated {
  max-width: 820px; margin: 40px auto 0; padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px; color: var(--tx-4); text-align: center;
}

@media (max-width: 620px) {
  .rule { grid-template-columns: 1fr; gap: 10px; }
  .rule-n { width: 30px; height: 30px; font-size: 13px; }
}

/* ── the quantity picker on the minutes page ────────────────
   Minutes are sold in blocks, so this counts blocks. The big
   number in the middle is the one people are actually deciding
   about — how many minutes they end up with — and the arithmetic
   underneath is there to be checked, not read. */

.pack {
  margin-top: 14px; padding: 20px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--bg-000);
}
.pack-row { display: flex; align-items: center; justify-content: center; gap: 22px; }
.pack-btn {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%; border: 1px solid var(--line-lift);
  background: var(--bg-100); color: var(--tx-1);
  font-size: 22px; line-height: 1; cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.pack-btn:hover:not(:disabled) { border-color: var(--red-lift); color: var(--red-soft); }
.pack-btn:focus-visible { outline: 2px solid var(--red-lift); outline-offset: 2px; }
.pack-btn:disabled { opacity: .32; cursor: default; }

.pack-mid { text-align: center; min-width: 132px; }
.pack-mid b {
  display: block; font-size: 40px; line-height: 1.05;
  letter-spacing: -.03em; color: var(--tx-0);
}
.pack-mid small { display: block; margin-top: 2px; font-size: 13px; color: var(--tx-3); }

.pack-sum {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: center; font-size: 14px; color: var(--tx-3);
}
.pack-eq { margin-inline-start: 10px; color: var(--tx-2); }
.pack-eq b { color: var(--red-soft); font-size: 17px; }

/* ── the contact page ───────────────────────────────────────
   Three facts, given the room to be read rather than packed
   into a footer. The number is the thing most people came for,
   so it is set large and is the one card with buttons on it. */

.ct-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  max-width: 1000px; margin: 0 auto;
}

.ct-card {
  padding: 26px 24px 24px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--bg-100);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.ct-card:hover { border-color: var(--line-lift); transform: translateY(-2px); }

.ct-ic {
  width: 40px; height: 40px; margin-bottom: 14px;
  display: grid; place-items: center;
  border-radius: 11px;
  border: 1px solid var(--ac-line-2);
  background: var(--ac-dim-2);
  color: var(--red-soft);
}
.ct-ic svg { width: 21px; height: 21px; }

.ct-card h3 {
  margin: 0 0 8px; font-size: 14px; font-weight: 600;
  letter-spacing: .02em; color: var(--tx-3);
}

.ct-big {
  display: block; margin: 0 0 12px;
  font-size: 25px; line-height: 1.35; font-style: normal;
  letter-spacing: -.02em; color: var(--tx-0);
  text-decoration: none;
}
a.ct-big { transition: color .16s var(--ease); }
a.ct-big:hover { color: var(--red-soft); }

.ct-note { margin: 0; font-size: 14px; line-height: 1.65; color: var(--tx-3); }
.ct-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.ct-strip {
  display: grid; gap: 20px 34px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  max-width: 1000px; margin: 34px auto 0;
  padding-top: 28px; border-top: 1px solid var(--line);
}
.ct-strip b { display: block; margin-bottom: 5px; font-size: 15px; color: var(--tx-1); }
.ct-strip p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--tx-3); }
.ct-strip a { color: var(--red-soft); }

/* ── the traffic panel ──────────────────────────────────────
   Bars made of divs. A charting library to draw eight numbers
   would be a megabyte of JavaScript to say what a flexbox says
   on its own. */

.tr-nums {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: 22px;
}
.tr-nums > div {
  padding: 14px 16px; border-radius: var(--r-card);
  border: 1px solid var(--line); background: var(--bg-000);
}
.tr-nums b {
  display: block; font-size: 27px; line-height: 1.1;
  letter-spacing: -.03em; color: var(--tx-0);
}
.tr-nums span { display: block; margin-top: 3px; font-size: 13px; color: var(--tx-3); }

.tr-chart {
  display: flex; align-items: flex-end; gap: 3px;
  height: 116px; padding: 10px 12px;
  border-radius: var(--r-card);
  border: 1px solid var(--line); background: var(--bg-000);
  /* Time runs left to right even on an RTL page: a chart is not
     a sentence, and every chart these people have ever seen has
     yesterday on the left. */
  direction: ltr;
}
.tr-bar { flex: 1 1 0; min-width: 3px; height: 100%; display: flex; align-items: flex-end; }
.tr-bar span {
  display: block; width: 100%; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--ember), var(--red-ink-a));
  transition: height .3s var(--ease);
}
.tr-bar:hover span { filter: brightness(1.25); }

.tr-split {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 24px;
}
.tr-split h3 {
  margin: 0 0 10px; font-size: 13px; font-weight: 600;
  letter-spacing: .02em; color: var(--tx-3);
}

.tr-list { display: flex; flex-direction: column; gap: 4px; }
.tr-row {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--r-ctl);
  font-size: 14px; overflow: hidden;
}
.tr-fill {
  position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  background: var(--ac-dim-2); border-inline-start: 2px solid var(--red-lift);
  border-radius: var(--r-ctl);
}
.tr-name {
  position: relative; flex: 1 1 auto; color: var(--tx-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tr-val { position: relative; flex: none; color: var(--tx-3); }

/* ── the admin page, in four sections ───────────────────────
   It had grown to ten panels on one scroll: to change a price you
   went past the traffic, the orders, the keys, the users and four
   settings panels. Grouping them by what somebody came to do costs
   one row of buttons and gives back the whole page. */

.adm-nav {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: 22px 0 20px; padding: 5px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--bg-100);
  position: sticky; top: 8px; z-index: 20;
  /* Sticky and opaque: it is a nav, and a nav you scroll past is
     a nav you have to scroll back for. */
  backdrop-filter: blur(8px);
}
.adm-nav button {
  flex: 1 1 auto; min-width: 96px; min-height: 40px;
  padding: 9px 16px; border: 0; border-radius: var(--r-ctl);
  background: none; color: var(--tx-3); cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.adm-nav button:hover { color: var(--tx-1); background: var(--bg-200); }
.adm-nav button.on { background: var(--ac-dim-2); color: var(--red-soft); }
.adm-nav button:focus-visible { outline: 2px solid var(--red-lift); outline-offset: -2px; }

/* ── the plan mix ───────────────────────────────────────────
   Headcount and money side by side, because six on lifetime and
   sixty on monthly are the same headcount and a different business. */

.plan-mix {
  margin: 16px 0 4px; padding: 16px 18px;
  border-radius: var(--r-card);
  border: 1px solid var(--line); background: var(--bg-100);
}
.plan-row {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 3px;
  border-radius: var(--r-ctl); overflow: hidden; font-size: 14.5px;
}
.plan-bar {
  position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  background: var(--ac-dim-2);
  border-inline-start: 2px solid var(--red-lift);
  border-radius: var(--r-ctl);
  transition: width .4s var(--ease);
}
.plan-name { position: relative; flex: 1 1 auto; color: var(--tx-1); }
.plan-n { position: relative; flex: none; color: var(--tx-0); font-size: 17px; font-weight: 600; }
.plan-m { position: relative; flex: none; color: var(--tx-3); font-size: 13px; min-width: 92px; text-align: end; }
.plan-foot {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--tx-3);
}
.plan-foot .wrn { color: var(--ember); }

.card.warn .v { color: var(--ember); }

/* ── on a phone ─────────────────────────────────────────────
   The admin page is the one screen most likely to be opened on a
   phone at an awkward moment — somebody transferred and is waiting.
   It had been built for a desk. */

@media (max-width: 720px) {
  /* Two up. Four full-width cards pushed the nav a screen and a
     half down, on the one device where scrolling costs the most. */
  .cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cards .card { padding: 14px 16px; }
  .cards .v { font-size: 18px; }
  .cards .k { font-size: 11.5px; margin-bottom: 4px; }

  .adm-nav {
    /* One scrollable row rather than two wrapped ones: wrapping
       pushed the content down the screen on exactly the device
       with the least of it. */
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    top: 4px; margin: 16px 0 16px;
  }
  .adm-nav::-webkit-scrollbar { display: none; }
  .adm-nav button { flex: 0 0 auto; min-width: auto; padding: 9px 14px; font-size: 14px; }

  /* Two columns of form fields on a 360px screen is two columns of
     nothing. */
  .grid2, .grid3 { grid-template-columns: 1fr; }

  .plan-m { min-width: 0; }
  .plan-row { font-size: 13.5px; padding: 8px 10px; }
  .plan-foot { gap: 10px; }

  .tr-nums { grid-template-columns: repeat(2, 1fr); }
  .tr-chart { height: 84px; }
  .tr-split { grid-template-columns: 1fr; gap: 18px; }

  /* A table that is wider than the screen has to say so by
     scrolling, not by being cut off. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 560px; }

  .panel-hd { flex-wrap: wrap; gap: 8px; }
  .panel-bd { padding-inline: 14px; }
}

@media (max-width: 420px) {
  .tr-nums { grid-template-columns: 1fr 1fr; }
  .tr-nums b { font-size: 22px; }
  .plan-n { font-size: 15px; }
}

/* ── signed-in devices ───────────────────────────────────────────
   What used to be a licence key and a Copy button. The key is gone
   — the plugin signs in with the account — so what is left is the
   only part somebody can act on: which machines are using the
   subscription, and how to free one up. */

.devices {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.devices-hd {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--tx-3);
}
.devices-hd b { color: var(--tx); }

.device {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--tx-4);
  border-bottom: 1px solid var(--line);
}
.device:last-child { border-bottom: 0; }
.device .grow { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.device-none {
  margin-top: 10px;
  font-size: 13px;
  color: var(--tx-4);
}

/* A renewal that is nearly due should not look like a quiet link. */
.btn.pri.warn {
  background: var(--amber, #FF8A3D);
  border-color: var(--amber, #FF8A3D);
  color: #1a1005;
}

/* ── the reset-link dialog (admin) ──────────────────────────────── */
.rdlg {
  width: min(520px, calc(100vw - 32px));
  padding: 0; border: 1px solid var(--line-lift, #2C2B37); border-radius: 18px;
  background: var(--bg-100, #121118); color: var(--tx, #F2F4F5);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.9);
}
.rdlg::backdrop { background: rgba(4,4,8,.66); backdrop-filter: blur(3px); }
.rdlg-in { padding: 24px 24px 18px; }
.rdlg h3 { margin: 0; font-size: 19px; font-weight: 600; }
.rdlg-who { margin: 6px 0 16px; font-size: 14px; color: var(--tx-3, #8E959C); }
.rdlg-who b { color: var(--tx, #F2F4F5); font-weight: 600; }
.rdlg-lbl { display: block; font-size: 13px; color: var(--tx-3, #8E959C); margin-bottom: 6px; }
.rdlg-link { width: 100%; font-size: 13px; }
.rdlg-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.rdlg-actions .btn { flex: 1 1 160px; justify-content: center; text-align: center; }
.rdlg-note { margin: 14px 0 0; font-size: 13px; color: var(--tx-2, #BFC4C9); }
.rdlg-warn { margin: 6px 0 0; font-size: 12.5px; color: var(--amber, #FF8A3D); }
.rdlg-foot { margin-top: 16px; display: flex; justify-content: flex-start; }

/* ── "this is safe", under the card button ─────────────────────── */
.secure-pay {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding: 11px 14px;
  border-radius: 12px;
  background: rgba(61, 220, 151, .07);
  border: 1px solid rgba(61, 220, 151, .24);
}
.secure-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  color: var(--ok, #3DDC97);
  background: rgba(61, 220, 151, .12);
}
.secure-ic svg { width: 19px; height: 19px; }
.secure-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.secure-tx b { font-size: 14px; font-weight: 600; color: var(--tx, #F2F4F5); }
.secure-tx small { font-size: 12.5px; color: var(--tx-3, #8E959C); line-height: 1.55; }

/* ── the affiliate's page ──────────────────────────────────────
   One thing on it matters more than the rest — the link — so it gets
   the only loud block, with the rate beside it in big type: the
   percentage is the reason anybody opens this page. Everything below
   it is the ordinary account furniture, on purpose. */

.aff-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 26px;
  align-items: center;
  margin-bottom: 14px;
  padding: 24px 26px;
  border-radius: var(--r-big);
  border: 1px solid rgba(var(--red-rgb), .28);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(var(--red-rgb), .13), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(var(--ember-rgb), .09), transparent 60%),
    var(--bg-100);
}
.aff-hero-rate {
  display: flex; align-items: center; gap: 14px;
  padding-inline-end: 26px;
  border-inline-end: 1px solid var(--line-lift);
}
.aff-hero-rate b {
  font-family: var(--num); font-size: 46px; line-height: 1;
  font-weight: 700; letter-spacing: -.03em; color: var(--red-soft);
}
.aff-hero-rate span { font-size: 14px; line-height: 1.65; color: var(--tx-2); }
.aff-lbl { display: block; font-size: 13px; font-weight: 600; color: var(--tx-3); margin-bottom: 8px; }
.aff-url-row { display: flex; gap: 10px; }
.aff-url { flex: 1 1 auto; min-width: 0; font-family: var(--num); font-size: 15px; }
.aff-url-row .btn { flex: 0 0 auto; white-space: nowrap; }
.aff-share {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 12px; font-size: 13.5px; color: var(--tx-3);
}
.aff-share b { color: var(--tx); }
.aff-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--tx-4); }

.aff-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.aff-stat {
  display: grid; gap: 2px;
  padding: 16px 18px; border-radius: var(--r-card);
  border: 1px solid var(--line); background: var(--bg-100);
}
.aff-stat b { font-family: var(--num); font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--tx); }
.aff-stat span { font-size: 14px; font-weight: 600; color: var(--tx-2); }
.aff-stat small { font-size: 12px; color: var(--tx-4); }
.aff-stat.buy b { color: var(--ok); }

.aff-money { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.aff-m {
  display: grid; gap: 4px;
  padding: 16px 18px; border-radius: var(--r-card);
  border: 1px solid var(--line-lift); background: rgba(0,0,0,.24);
}
.aff-m span { font-size: 13px; font-weight: 600; color: var(--tx-3); }
.aff-m b { font-family: var(--num); font-size: 22px; font-weight: 700; color: var(--tx); }
.aff-m small { font-size: 12.5px; color: var(--tx-4); }
.aff-m.wait b { color: var(--yellow); }
.aff-m.due { border-color: rgba(var(--red-rgb), .35); background: rgba(var(--red-rgb), .06); }
.aff-m.due b { color: var(--red-soft); }
.aff-note { margin: 16px 0 0; font-size: 13.5px; line-height: 1.85; color: var(--tx-3); max-width: 70ch; }

/* Two choices drawn as cards rather than a select, because which one
   somebody picks changes what the box under it asks for. */
.aff-ways {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin: 0 0 16px; padding: 0; border: 0;
}
.aff-way { position: relative; display: block; cursor: pointer; }
.aff-way input { position: absolute; opacity: 0; pointer-events: none; }
.aff-way-in {
  position: relative; display: block;
  padding: 14px 16px; padding-inline-start: 46px;
  border-radius: var(--r-card);
  border: 1px solid var(--line-lift); background: rgba(0,0,0,.2);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.aff-way-in::before {
  content: ''; position: absolute; inset-inline-start: 17px; top: 17px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--tx-4);
}
.aff-way:hover .aff-way-in { border-color: var(--tx-4); }
.aff-way input:checked + .aff-way-in { border-color: var(--red-lift); background: rgba(var(--red-rgb), .07); }
.aff-way input:checked + .aff-way-in::before {
  border-color: var(--red);
  background: radial-gradient(circle, var(--red) 0 4px, transparent 4.5px);
}
.aff-way input:focus-visible + .aff-way-in { box-shadow: 0 0 0 3px rgba(var(--red-rgb), .22); }
.aff-way b { display: block; font-size: 15px; font-weight: 600; }
.aff-way small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--tx-3); }

.aff-sub { margin-top: 4px; font-size: 12px; color: var(--tx-4); }

.aff-rules {
  display: grid; gap: 10px; margin: 0; padding-inline-start: 20px;
  font-size: 14px; line-height: 1.8; color: var(--tx-3);
}
.aff-rules b { color: var(--tx); font-weight: 600; }

/* The way in, on the account page — affiliates only. */
.aff-cta {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 22px; padding: 18px 20px;
  border-radius: var(--r-card);
  border: 1px solid rgba(var(--red-rgb), .3);
  background: linear-gradient(120deg, rgba(var(--red-rgb), .09), rgba(var(--ember-rgb), .05) 70%), var(--bg-100);
}
.aff-cta .grow { flex: 1 1 auto; }
.aff-cta b { display: block; font-size: 16px; font-weight: 600; }
.aff-cta small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--tx-2); }

@media (max-width: 760px) {
  .aff-hero { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .aff-hero-rate {
    padding-inline-end: 0; border-inline-end: 0;
    padding-bottom: 16px; border-bottom: 1px solid var(--line-lift);
  }
  .aff-hero-rate b { font-size: 40px; }
  .aff-money { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .aff-url-row { flex-direction: column; }
  .aff-url-row .btn { width: 100%; }
  .aff-stats { gap: 8px; }
  .aff-stat { padding: 12px; }
  .aff-stat b { font-size: 21px; }
  .aff-stat span { font-size: 12.5px; }
  .aff-ways { grid-template-columns: 1fr; }
  .aff-cta { flex-wrap: wrap; }
  .aff-cta .btn { width: 100%; }
}

/* ── affiliates, in the admin panel ─────────────────────────────── */
.ref-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.ref-tag {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-tag);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  color: var(--red-soft); background: rgba(var(--red-rgb), .1);
}
.ref-tag.warn { color: var(--amber); background: rgba(242,163,60,.13); }
.aff-h { margin: 24px 0 10px; font-size: 14.5px; font-weight: 700; color: var(--tx-2); }
.aff-admin-top { display: flex; flex-wrap: wrap; gap: 12px 30px; font-size: 14px; }
.aff-admin-top .aff-sub { display: block; margin: 0 0 3px; }
.pay-due {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(var(--red-rgb), .3); background: rgba(var(--red-rgb), .07);
}
.pay-due span { font-size: 14px; color: var(--tx-2); }
.pay-due b { font-family: var(--num); font-size: 26px; color: var(--red-soft); }
.pay-to {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  border: 1px dashed var(--line-lift); font-size: 14px;
}
.pay-to .grow { flex: 1 1 auto; min-width: 0; }

/* A sum and its currency stay on one line in every affiliate table. */
#people td.num, #comms td.num, #payouts td.num,
#affList td.num, #affDetailBody td.num { white-space: nowrap; }

/* ═══════════════════════════════════════════ the signed-in pages on a phone ══

   Measured on 320, 360, 390 and 412-wide phones before any of this was
   written. What was wrong:

   · Under 390px the admin page was wider than the screen. The header
     could not shrink — brand, "لوحة الإدارة" and the email in one row —
     so the whole page grew to 389px and the phone zoomed it out.
   · The header's buttons were hidden on phones. That rule is for the
     marketing header; here it took away "خروج" and "الرئيسية".
   · Tables were a sideways scroller with most columns off the screen.
     A customer row in the admin was a screen and a half tall, with the
     phone number and every button out of sight.
   · The admin's section buttons stuck at the top — underneath the
     sticky header, so they were never actually visible (on desktop
     too, which is the one change below that is not phone-only).

   Nothing is removed. Every cell, button and word is still there. */

/* The section buttons stick below the header, not beneath it. */
@media (min-width: 561px) {
  .adm-nav { top: 76px; }
}

@media (max-width: 560px) {
  /* ── the header ─────────────────────────────────────────────
     Two rows instead of one that cannot fit: the brand and the
     buttons, then the address in full. It scrolls away with the page
     rather than sticking — two rows pinned to a phone screen is too
     much of it, and on the admin page the section buttons take over
     the job of staying in reach. */
  .hdr.hdr-app { position: relative; }
  .hdr-app .hdr-in {
    flex-wrap: wrap; height: auto; min-height: 60px;
    column-gap: 10px; row-gap: 2px; padding: 8px 0;
  }
  .hdr-app .hdr-cta { display: contents; }
  .hdr-app .hdr-cta .btn:not(.pri) { display: inline-flex; }
  .hdr-app #who + .btn { margin-inline-start: auto; }
  .hdr-app #who {
    order: 9; flex: 1 1 100%;
    font-size: 12.5px !important; line-height: 1.5;
    overflow-wrap: anywhere;
    padding-bottom: 4px;
  }
  .hdr-app .eyebrow { margin-bottom: 0; white-space: nowrap; }

  /* ── the admin's five sections ──────────────────────────────
     All five in view, three over two, instead of a row that hid the
     last one off the edge. */
  .adm-nav {
    top: 4px;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px; overflow: visible;
  }
  .adm-nav button {
    grid-column: span 2;
    min-width: 0; min-height: 42px; padding: 8px 4px;
    font-size: 14px; white-space: nowrap;
  }
  .adm-nav button:nth-child(n+4) { grid-column: span 3; }

  /* ── the small switches in a panel's heading ────────────────
     "تحت المراجعة" and "٣ شهور" were breaking onto two lines inside
     their pill. The switch gets the whole width of its own line. */
  .panel-hd .tabs { flex: 1 1 100%; }
  .panel-hd .tabs button { flex: 1 1 0; white-space: nowrap; padding-inline: 6px; }
}

@media (max-width: 380px) {
  /* 320px is one row too narrow for the brand, "لوحة الإدارة" and
     the sign-out button. The dash and the gap before the words go;
     the words stay. */
  .hdr-app .eyebrow { margin-inline-start: 0 !important; }
  .hdr-app .eyebrow::before { display: none; }
}

/* ── tables on a phone: one card per row ─────────────────────────
   Each cell becomes a line: its column's name, then its value. The
   names are put on the cells by /js/tables.js. The empty-headed
   column — the buttons — spans the card's full width at the bottom.

   Rows hidden by the "show more" paging keep their inline
   display:none, which is why nothing here uses !important on a row. */
@media (max-width: 720px) {
  .table-wrap { overflow-x: visible; }
  .table-wrap table,
  .table-wrap tbody,
  .table-wrap tbody tr { display: block; width: auto; min-width: 0; }
  .table-wrap thead { display: none; }

  .table-wrap tbody { padding: 12px; }
  .panel-bd .table-wrap tbody { padding: 0; }

  .table-wrap tbody tr {
    margin: 0 0 10px; padding: 4px 14px;
    border: 1px solid var(--line-lift); border-radius: 14px;
    background: rgba(255,255,255,.02);
  }
  .table-wrap tbody tr:last-child { margin-bottom: 0; }
  .table-wrap tbody tr:hover { background: rgba(255,255,255,.02); }

  .table-wrap td {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    column-gap: 12px; justify-items: start; align-items: start;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    direction: rtl; unicode-bidi: normal; text-align: start;
    white-space: normal; overflow-wrap: anywhere;
  }
  /* The base rule takes the line off every cell of a table's last row;
     in a card each cell needs it, except the card's own last one. */
  .table-wrap tbody tr:last-child td { border-bottom: 1px solid var(--line); }
  .table-wrap tbody tr td:last-child { border-bottom: 0; }
  .table-wrap td::before {
    content: attr(data-label);
    grid-column: 1; grid-row: 1 / span 8;
    font-family: var(--ff); font-size: 12.5px; font-weight: 600;
    letter-spacing: 0; line-height: 1.6; color: var(--tx-4);
  }
  .table-wrap td > * { grid-column: 2; max-width: 100%; }

  /* A value that is an address or a number still reads left to right. */
  .table-wrap td.ltr > *, .table-wrap td .ltr { direction: ltr; unicode-bidi: isolate; }

  .table-wrap td[data-label=""] { display: block; padding-top: 12px; }
  .table-wrap td[data-label=""]::before { display: none; }
  .table-wrap td .row-actions { gap: 8px; }
  .table-wrap td .row-actions .btn { flex: 1 1 auto; }
  .table-wrap td .row-actions .pill { align-self: center; }
}

/* The affiliate's share link stands on its own, so on a touch screen it
   gets a thumb-sized target like a button would. */
@media (pointer: coarse) {
  .aff-share .txt-ac { display: inline-block; padding: 9px 0; }
}

/* ── money in, by the day ────────────────────────────────────────
   The traffic panel's number boxes, holding pounds. The box for the
   chosen range is tinted so it reads as the one the dates below
   belong to. */
.rev-nums b small {
  font-family: var(--ff); font-size: 13px; font-weight: 500;
  letter-spacing: 0; color: var(--tx-3); margin-inline-start: 5px;
}
.rev-nums em {
  display: block; margin-top: 4px; min-height: 20px;
  font-style: normal; font-size: 12.5px; line-height: 20px; color: var(--tx-4);
}
.rev-nums .rev-pick {
  border-color: rgba(47,217,190,.26);
  background: radial-gradient(260px 120px at 100% 0%, rgba(47,217,190,.07), transparent 70%), var(--bg-000);
}
.rev-tz { font-size: 13px; color: var(--tx-4); }

.rev-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.rev-form .field { margin: 0; flex: 0 1 190px; min-width: 150px; }
.rev-form .field label { font-size: 13px; margin-bottom: 6px; }
.rev-form .inp { padding-block: 9px; font-size: 14px; }
.rev-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }
.rev-form + .msg.on { margin-top: 12px; }

@media (max-width: 560px) {
  .rev-form .field { flex: 1 1 140px; }
  .rev-quick { margin-inline-start: 0; }
}

/* ── the orders list updating itself ─────────────────────────────
   A quiet label beside the heading while the page is in touch with
   the server, so nobody reaches for refresh out of habit. */
.live {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 10px 4px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--ok); background: rgba(74,222,110,.08);
}
.live::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; animation: liveBeat 2.4s ease-in-out infinite;
}
@keyframes liveBeat { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* Waiting on the owner, on the section button — the same yellow as a
   pending order's pill. */
.nav-n {
  display: inline-block; min-width: 20px; margin-inline-start: 7px;
  padding: 1px 6px 2px; border-radius: var(--r-pill);
  font-size: 12px; line-height: 1.4; text-align: center;
  color: var(--yellow); background: rgba(255,210,77,.16);
}

/* An order that arrived while the page was open. */
.table-wrap tr.row-new > td {
  background: rgba(47,217,190,.07);
  animation: rowLit 1.6s var(--ease) 1;
}
@keyframes rowLit { from { background-color: rgba(47,217,190,.24); } }

/* The note that says so, wherever the page is scrolled to. */
.live-toast {
  position: fixed; z-index: 60; bottom: 16px; inset-inline: 16px;
  max-width: 540px; margin-inline: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 10px; border-radius: var(--r-card);
  border: 1px solid rgba(47,217,190,.34);
  background: var(--bg-100);
  box-shadow: 0 22px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.3);
}
.live-toast.in { animation: toastUp .3s var(--ease); }
@keyframes toastUp { from { transform: translateY(14px); opacity: 0; } }
.live-toast-txt { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.6; color: var(--tx-3); }
.live-toast-txt b { display: block; font-size: 14.5px; font-weight: 700; color: var(--tx); }
.live-toast-txt bdi { unicode-bidi: isolate; }
.live-toast .btn { flex: none; }
.live-toast-x {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: var(--r-ctl);
  background: none; color: var(--tx-3); font-size: 22px; line-height: 1; cursor: pointer;
}
.live-toast-x:hover { background: var(--bg-200); color: var(--tx); }
.live-toast-x:focus-visible { outline: 2px solid var(--red-lift); outline-offset: -2px; }

@media (max-width: 560px) {
  .live-toast { flex-wrap: wrap; bottom: 12px; inset-inline: 12px; }
  .live-toast .btn { order: 3; flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .live::before, .table-wrap tr.row-new > td, .live-toast.in { animation: none; }
}

/* A switch in a panel's heading keeps each label on one line at every
   width, not only on a phone. */
.panel-hd .tabs button { white-space: nowrap; }

/* The line that says what a search found, inside the panel's padding
   rather than against its edge. */
.find-note { padding: 12px 20px 0; }