@charset "UTF-8";

/* ============================================================================
   SCO4M — design system v2 "Ledger"
   ----------------------------------------------------------------------------
   Every panel in this market looks the same: black ground, one acid-green
   accent, glassmorphism sprayed everywhere. They look like cheap crypto sites
   because they are designed as follower shops.

   This one is designed as a financial instrument, because that is what it is
   to the person using it: a wallet, a ledger, a margin, a book of customers.
   The reference class is Stripe and Mercury, not a likes vendor. Deep indigo
   ground, gold for money, cyan for motion, and a real elevation ramp so the
   surface has depth instead of being flat rectangles on flat rectangles.

   One variable font carries Arabic and Latin together (29 KB, weights
   160-700), so the two scripts share one personality instead of reading as
   two different products bolted together.

   Motion stays CSS-native: @property, scroll-driven view() timelines,
   @starting-style, cross-document view transitions. No animation library.

   Logical properties throughout -- one file serves RTL and LTR.
   ========================================================================== */


/* --- typeface ------------------------------------------------------------- */

@font-face {
  font-family: "Readex";
  src: url("fonts/readex.e3ddebdf.woff2") format("woff2-variations");
  font-weight: 160 700;
  font-style: normal;
  /* swap, not block: a phone on a weak connection shows the system fallback
     immediately rather than a blank screen holding for the font. */
  font-display: swap;
}


/* --- animatable custom properties ---------------------------------------- */

@property --ring {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --sheen {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --tick {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}


/* --- tokens --------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Four surface levels, not two. Depth is what separates a designed interface
     from a wireframe, and it cannot be faked with one grey. Never pure black:
     on OLED it smears during motion, and this design moves a lot.
     The greys carry a faint warm cast so the brand red sits in the same family
     as its ground instead of looking pasted onto a blue page. */
  --ground: #080506;
  --s1: #100b0d;
  --s2: #181114;
  --s3: #22181c;
  --line: #2d2026;
  --line-soft: #1f171b;

  /* Deep blood red.
     ------------------------------------------------------------------------
     Red turns pink as soon as it is lightened, because lightness pulls it off
     the red hue. So this ramp stays dark and heavily saturated and simply has
     no pale end: where a tint would normally be used, the design reaches for
     ink or for a wash of --brand instead. --brand-300 is the lightest tone
     allowed, and it is still unmistakably red rather than rose. */
  --brand-100: #e8404e;   /* text tone -- clears 4.5:1 on the ground */
  --brand-300: #c8121f;   /* icons, borders, fills: never small text */
  --brand-500: #a30f1b;   /* button top */
  --brand: #8a0a16;       /* primary fill -- blood */
  --brand-700: #4d0510;   /* borders, pressed, shadow */

  /* Amber is motion -- and only motion. Cyan fought the red; amber sits beside
     it and still separates at a glance. */
  --live: #f5a524;

  --good: #35d39a;

  /* Error has to stay distinguishable now that the brand itself is red. It is
     pushed lighter and pinker than --brand, and never appears without an icon
     or a border carrying the same tone. */
  --bad: #ff5c7a;

  --warn: #ffb547;

  --ink: #eef2fa;
  --ink-2: #9aa5bc;
  --ink-3: #626e88;

  --font: "Readex", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layered shadows. A single flat box-shadow reads as a sticker; two layers
     (a tight contact shadow plus a wide ambient one) read as an object
     sitting above a surface. */
  --e1: 0 1px 2px rgb(0 0 0 / .40);
  --e2: 0 2px 8px -2px rgb(0 0 0 / .55), 0 1px 2px rgb(0 0 0 / .40);
  --e3: 0 14px 34px -10px rgb(0 0 0 / .65), 0 3px 10px rgb(0 0 0 / .40);
  --e-brand: 0 10px 30px -12px rgb(138 10 22 / .75);

  /* The "glass 2.0" refinement: a 1px inner highlight along the top edge,
     which is what makes a translucent panel read as having thickness. */
  --edge: inset 0 1px 0 rgb(255 255 255 / .07);

  --step--2: clamp(.68rem, .66rem + .1vw, .72rem);
  --step--1: clamp(.78rem, .75rem + .15vw, .84rem);
  --step-0: clamp(.9rem, .87rem + .18vw, .97rem);
  --step-1: clamp(1.08rem, 1rem + .36vw, 1.28rem);
  --step-2: clamp(1.38rem, 1.22rem + .72vw, 1.8rem);
  --step-3: clamp(1.95rem, 1.55rem + 1.85vw, 2.85rem);
  --step-4: clamp(2.7rem, 1.95rem + 3.3vw, 4.2rem);

  --gap: .75rem;
  --pad: 1rem;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --tab-h: 64px;
  --head-h: 58px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --fast: 150ms;
  --mid: 300ms;
  --slow: 620ms;
}


/* --- reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--line) transparent;
}

body {
  min-height: 100dvh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* The page ground, in three stacked layers.
   ----------------------------------------------------------------------------
   A flat dark fill is what made the first version feel unfinished. Three cheap
   layers fix it, and none of them costs a request:

   1. two wide brand-coloured auroras, so the colour belongs to the page rather
      than appearing only on buttons;
   2. a ledger rule -- fine ruled lines, the texture of accounting paper, which
      is the thing this product actually is. Masked so it fades out down the
      page instead of tiling forever;
   3. grain on top, because flat dark fields band badly on cheap phone panels.
*/

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(64% 42% at 50% -6%,
      color-mix(in oklab, var(--brand) 42%, transparent), transparent 70%),
    radial-gradient(48% 36% at 88% 22%,
      color-mix(in oklab, var(--brand-700) 45%, transparent), transparent 72%),
    radial-gradient(52% 40% at 6% 54%,
      color-mix(in oklab, var(--brand-700) 34%, transparent), transparent 74%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .85;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--brand-300) 30%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--brand-300) 30%, transparent) 1px, transparent 1px),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  background-size: 58px 58px, 58px 58px, 140px 140px;
  /* Strongest at the top where the hero sits, gone by the footer, so the
     texture never competes with a table of prices. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, rgb(0 0 0 / .45) 60%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 0, rgb(0 0 0 / .45) 60%, transparent 95%);
}

body > * { position: relative; z-index: 1; }

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

h1, h2, h3 { font-weight: 650; letter-spacing: -.022em; line-height: 1.2; }

/* Numbers must not reflow while they animate, and a money run reads
   left-to-right even inside an RTL sentence. */
/*
   The `hidden` attribute loses to any `display` rule with more weight than a
   UA default -- `.svcinfo__facts > div { display: grid }` kept a row on screen
   that JavaScript had already hidden, complete with an empty cell. Anything in
   this panel that is hidden is hidden because code decided so, so it wins.
*/
[hidden] { display: none !important; }


.num, .money, .stat__value, input[inputmode="numeric"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  direction: ltr;
  unicode-bidi: isolate;
}

:focus-visible {
  outline: 2px solid var(--live);
  outline-offset: 2px;
  border-radius: 8px;
}

::selection { background: color-mix(in oklab, var(--brand) 30%, transparent); }


/* --- app shell ------------------------------------------------------------ */

.shell {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100dvh;
  padding-block-end: calc(var(--tab-h) + env(safe-area-inset-bottom));
}

.head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--gap);
  block-size: var(--head-h);
  padding-inline: var(--pad);
  background: color-mix(in oklab, var(--ground) 76%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  border-block-end: 1px solid var(--line-soft);
  box-shadow: var(--edge);
  view-transition-name: head;
}

.head__brand {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -.04em;
  margin-inline-end: auto;
  direction: ltr;
}

.head__brand b { color: var(--brand); font-weight: 700; }

.main {
  padding: var(--pad);
  padding-block-end: 2.5rem;
  display: grid;
  gap: var(--gap);
  align-content: start;
  max-inline-size: 660px;
  inline-size: 100%;
  margin-inline: auto;
}


/* --- bottom tabs ---------------------------------------------------------- */

.tabs {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  block-size: calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-block-end: env(safe-area-inset-bottom);
  background: color-mix(in oklab, var(--s1) 84%, transparent);
  backdrop-filter: blur(22px) saturate(150%);
  border-block-start: 1px solid var(--line-soft);
  box-shadow: var(--edge), 0 -8px 28px -12px rgb(0 0 0 / .7);
  view-transition-name: tabs;
}

.tab {
  display: grid;
  place-items: center;
  gap: 3px;
  font-size: .64rem;
  font-weight: 500;
  color: var(--ink-3);
  position: relative;
  transition: color var(--fast) var(--ease);
}

.tab svg {
  inline-size: 22px;
  block-size: 22px;
  stroke-width: 1.7;
  transition: transform var(--fast) var(--ease);
}

.tab[aria-current] { color: var(--brand); }

.tab[aria-current]::before {
  content: "";
  position: absolute;
  inset-block-start: 7px;
  inline-size: 36px;
  block-size: 30px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--brand) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 22%, transparent);
  animation: pop var(--mid) var(--ease);
}

.tab:active svg { transform: scale(.86); }

@keyframes pop {
  from { opacity: 0; transform: scale(.55); }
  to { opacity: 1; transform: scale(1); }
}


/* --- surfaces ------------------------------------------------------------- */

.card {
  /* Tinted, not neutral. A surface that shares no hue with the brand reads as
     a generic dark theme with a coloured button dropped on it. */
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--brand) 7%, var(--s2)),
      color-mix(in oklab, var(--brand) 3%, var(--s1)));
  border: 1px solid color-mix(in oklab, var(--brand) 14%, var(--line-soft));
  border-radius: var(--r);
  padding: var(--pad);
  box-shadow: var(--e1), var(--edge);
}

.card--flush { padding: 0; overflow: hidden; }

.card--raised { box-shadow: var(--e3), var(--edge); border-color: var(--line); }

.glass {
  background: color-mix(in oklab, var(--s1) 70%, transparent);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid color-mix(in oklab, var(--line) 80%, transparent);
  box-shadow: var(--e2), var(--edge);
}

@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal both linear;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(20px) scale(.985); }
  to { opacity: 1; transform: none; }
}


/* --- the signature: balance ---------------------------------------------- */

.balance {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 1.35rem var(--pad) 1.5rem;
  border-radius: var(--r-xl);
  background:
    radial-gradient(130% 150% at 50% -10%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 62%),
    linear-gradient(180deg, var(--s2), var(--s1));
  border: 1px solid color-mix(in oklab, var(--brand) 24%, var(--line));
  box-shadow: var(--e3), var(--edge), var(--e-brand);
  overflow: hidden;
  view-transition-name: balance;
}

.balance::after {
  content: "";
  position: absolute;
  inset: -45%;
  background: conic-gradient(from var(--sheen),
      transparent 0deg 78deg,
      color-mix(in oklab, var(--brand) 16%, transparent) 108deg,
      transparent 138deg 360deg);
  animation: sheen 8s linear infinite;
  pointer-events: none;
}

@keyframes sheen { to { --sheen: 360deg; } }

.balance__label {
  font-size: var(--step--2);
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.balance__value {
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--brand-100);
  display: flex;
  align-items: baseline;
  gap: .35rem;
  text-shadow: 0 2px 24px rgb(138 10 22 / .6);
}

.balance__cur {
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--brand-100);
}


/* --- counting numbers ----------------------------------------------------- */

.count {
  counter-reset: n var(--tick);
  animation: count var(--slow) var(--ease) both;
}

.count::after { content: counter(n); }

@keyframes count { from { --tick: 0; } }


/* --- stats ---------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--gap);
}

.stat {
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--brand) 8%, var(--s2)),
      color-mix(in oklab, var(--brand) 3%, var(--s1)));
  border: 1px solid color-mix(in oklab, var(--brand) 15%, var(--line-soft));
  border-radius: var(--r);
  padding: .8rem .85rem;
  display: grid;
  gap: 2px;
  box-shadow: var(--e1), var(--edge);
}

.stat__value {
  font-size: var(--step-2);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -.035em;
}

.stat__label { font-size: var(--step--2); color: var(--ink-2); font-weight: 450; }

.stat--live .stat__value { color: var(--live); }
.stat--good .stat__value { color: var(--good); }
.stat--brand .stat__value { color: var(--brand-100); }


/* --- progress ring -------------------------------------------------------- */

.ring {
  --size: 48px;
  --tone: var(--live);
  inline-size: var(--size);
  block-size: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: conic-gradient(var(--tone) var(--ring),
      color-mix(in oklab, var(--line) 70%, transparent) 0);
  animation: ring-fill var(--slow) var(--ease) both;
  position: relative;
}

.ring::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--s1);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / .5);
}

.ring__pct {
  position: relative;
  font-size: .68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* An order still being delivered breathes; a finished one holds still. That
   difference is the fastest status read on the page, and it survives sunlight
   where colour alone would not. */
.ring--live { animation: ring-fill var(--slow) var(--ease) both, breathe 2.4s var(--ease) infinite; }

@keyframes ring-fill { from { --ring: 0%; } }

@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--live) 40%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--live) 0%, transparent); }
}

.ring--done { --tone: var(--good); }
.ring--part { --tone: var(--warn); }
.ring--bad {
  --tone: var(--bad);
  background: conic-gradient(var(--tone) var(--ring),
      color-mix(in oklab, var(--bad) 20%, transparent) 0);
}


/* --- list rows ------------------------------------------------------------ */

.order {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem var(--pad);
  border-block-end: 1px solid var(--line-soft);
  transition: background var(--fast) var(--ease);
}

.order:last-child { border-block-end: 0; }
.order:hover { background: color-mix(in oklab, var(--live) 3%, transparent); }

.order__body { min-inline-size: 0; flex: 1; display: grid; gap: 2px; }

.order__name {
  font-weight: 550;
  font-size: var(--step-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order__meta {
  font-size: var(--step--2);
  color: var(--ink-2);
  display: flex;
  gap: .5rem;
  align-items: center;
}

.order__id { color: var(--ink-3); }

/* Refill, cancel and review under an order. 44px targets: these were 30px,
   and they are the buttons a customer taps when something went wrong. */
.order__acts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-block-start: .45rem;
  align-items: flex-start;
}

.order__act {
  min-block-size: 44px;
  padding-inline: .8rem;
  font-size: var(--step--2);
}

/* A state, not an action: "refill in 5 hours", "guarantee ended". Shown so a
   customer knows why there is nothing to press, instead of a button that
   the provider would refuse. */
.order__act.is-off {
  opacity: .6;
  cursor: default;
  pointer-events: none;
}

.order__review { flex-basis: 100%; }
.order__review > summary { list-style: none; display: inline-flex; align-items: center; cursor: pointer; }
.order__review > summary::-webkit-details-marker { display: none; }
.order__review > summary::marker { content: ""; }
.order__review[open] > summary { border-color: color-mix(in oklab, var(--brand) 45%, transparent); }

.order__review-form {
  display: grid;
  gap: .5rem;
  margin-block-start: .5rem;
  padding: .75rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--s2);
}

.order__review-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .2rem; }
.order__review-form legend { font-weight: 600; font-size: var(--step--1); margin-block-end: .2rem; }

.order__reason {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-block-size: 44px;
  font-size: var(--step--1);
  cursor: pointer;
}

.order__reason input { inline-size: 18px; block-size: 18px; accent-color: var(--brand); }

.order-show__acts { margin-block: .75rem; }
.order-show__acts .order__acts { margin-block-start: 0; }


/* --- badges --------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: var(--step--2);
  font-weight: 550;
  background: color-mix(in oklab, var(--ink-3) 18%, transparent);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, currentColor 18%, transparent);
  white-space: nowrap;
}

.badge::before {
  content: "";
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.badge--live { background: color-mix(in oklab, var(--live) 15%, transparent); color: var(--live); }
.badge--live::before { animation: blink 1.5s var(--ease) infinite; }
.badge--good { background: color-mix(in oklab, var(--good) 15%, transparent); color: var(--good); }
.badge--bad { background: color-mix(in oklab, var(--bad) 15%, transparent); color: var(--bad); }
.badge--warn { background: color-mix(in oklab, var(--warn) 15%, transparent); color: var(--warn); }
.badge--brand { background: color-mix(in oklab, var(--brand) 22%, transparent); color: var(--brand-100); }

@keyframes blink { 50% { opacity: .28; } }


/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-block-size: 48px;
  padding-inline: 1.2rem;
  border: 1px solid color-mix(in oklab, var(--brand) 18%, var(--line));
  border-radius: 13px;
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--brand) 10%, var(--s3)),
      color-mix(in oklab, var(--brand) 5%, var(--s2)));
  color: var(--ink);
  font-weight: 550;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: var(--e1), var(--edge);
  transition: transform var(--fast) var(--ease), filter var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}

.btn:hover { filter: brightness(1.12); }
.btn:active { transform: scale(.975); box-shadow: var(--e1); }
.btn:disabled { opacity: .45; pointer-events: none; }

.btn--brand {
  background: linear-gradient(180deg, var(--brand-500), var(--brand));
  border-color: color-mix(in oklab, var(--brand-100) 45%, transparent);
  color: #fff;
  font-weight: 650;
  box-shadow: var(--e2), var(--e-brand), inset 0 1px 0 rgb(255 255 255 / .18);
}

.btn--ghost { background: transparent; border-color: var(--line); box-shadow: none; }
.btn--block { inline-size: 100%; }
.btn--sm { min-block-size: 34px; padding-inline: .75rem; font-size: var(--step--1); border-radius: 9px; }

/* Press ripple, drawn with a pseudo-element rather than a JS ripple library. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgb(255 255 255 / .4), transparent 62%);
  opacity: 0;
  transform: scale(.2);
}

.btn:active::after { animation: ripple 540ms var(--ease); }

@keyframes ripple {
  from { opacity: .5; transform: scale(.2); }
  to { opacity: 0; transform: scale(1.7); }
}


/* --- fields --------------------------------------------------------------- */

.field { display: grid; gap: 7px; }

.field__label {
  font-size: var(--step--1);
  color: var(--ink-2);
  font-weight: 550;
}

.input, .select, .textarea {
  inline-size: 100%;
  min-block-size: 50px;
  padding: .75rem .9rem;
  background: color-mix(in oklab, var(--brand) 5%, var(--s2));
  border: 1px solid color-mix(in oklab, var(--brand) 14%, var(--line));
  border-radius: 13px;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / .35);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}

.textarea { min-block-size: 120px; resize: vertical; line-height: 1.6; }

.input:focus, .select:focus, .textarea:focus {
  border-color: var(--live);
  background: color-mix(in oklab, var(--live) 7%, var(--s2));
  box-shadow: inset 0 1px 3px rgb(0 0 0 / .3), 0 0 0 3px color-mix(in oklab, var(--live) 18%, transparent);
  outline: none;
}

.input::placeholder, .textarea::placeholder { color: var(--ink-3); }

.field__hint { font-size: var(--step--2); color: var(--ink-3); }
.field__error { font-size: var(--step--2); color: var(--bad); font-weight: 500; }

.total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 1rem var(--pad);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--s2), var(--s1));
  border: 1px dashed color-mix(in oklab, var(--brand) 38%, var(--line));
  box-shadow: var(--edge);
}

.total__value {
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--brand-100);
  letter-spacing: -.035em;
}

.total__value.is-changed { animation: bump var(--mid) var(--ease); }

@keyframes bump {
  0% { transform: translateY(7px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}


/* --- section heading ------------------------------------------------------ */

.sect {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  margin-block-start: .6rem;
}

.sect__title { font-size: var(--step-1); font-weight: 650; letter-spacing: -.03em; }

/* Used as a standalone link -- "forgot password", "create account", a
   section's "see all" -- never inside a sentence, so it gets a full target. */
.sect__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: var(--step--1);
  color: var(--live);
  font-weight: 550;
  transition: opacity var(--fast) var(--ease);
}

.sect__link:hover { opacity: .75; }


/* --- chips / scroller ----------------------------------------------------- */

.scroller {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
  padding-block: 2px;
  scrollbar-width: none;
}

.scroller::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  scroll-snap-align: start;
  padding: .55rem .95rem;
  border-radius: 999px;
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--brand) 8%, var(--s2)),
      color-mix(in oklab, var(--brand) 3%, var(--s1)));
  border: 1px solid color-mix(in oklab, var(--brand) 15%, var(--line-soft));
  font-size: var(--step--1);
  font-weight: 550;
  white-space: nowrap;
  box-shadow: var(--e1);
  transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}

.chip:active { transform: scale(.94); }

.chip[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--brand) 55%, transparent);
  color: var(--brand-100);
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 12%, var(--s2)), var(--s1));
}


/* --- empty state ---------------------------------------------------------- */

.empty {
  display: grid;
  gap: .5rem;
  justify-items: center;
  text-align: center;
  padding: 3.2rem 1rem;
  color: var(--ink-2);
}

.empty__title { font-weight: 650; color: var(--ink); font-size: var(--step-1); }


/* --- flash ---------------------------------------------------------------- */

.flash {
  padding: .85rem var(--pad);
  border-radius: 13px;
  font-weight: 500;
  font-size: var(--step--1);
  border: 1px solid;
  box-shadow: var(--e1), var(--edge);
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
}

@starting-style { .flash { opacity: 0; transform: translateY(-10px); } }

.flash--good { background: color-mix(in oklab, var(--good) 13%, var(--s1)); border-color: color-mix(in oklab, var(--good) 45%, transparent); color: var(--good); }
.flash--bad { background: color-mix(in oklab, var(--bad) 13%, var(--s1)); border-color: color-mix(in oklab, var(--bad) 45%, transparent); color: var(--bad); }
.flash--warn { background: color-mix(in oklab, var(--warn) 12%, var(--s1)); border-color: color-mix(in oklab, var(--warn) 45%, transparent); color: var(--warn); }


/* --- page transitions ----------------------------------------------------- */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out 170ms var(--ease-in) both; }
::view-transition-new(root) { animation: vt-in 280ms var(--ease) both; }

@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }


/* --- staggered list entrance ---------------------------------------------- */

.stagger > * {
  animation: reveal var(--mid) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 42ms);
}


/* --- utilities ------------------------------------------------------------ */

.row { display: flex; align-items: center; gap: var(--gap); }
.grow { flex: 1; min-inline-size: 0; }
.dim { color: var(--ink-2); }
.center { text-align: center; }
.stack { display: grid; gap: var(--gap); }
.wrap-x { overflow-x: auto; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}


/* --- larger screens ------------------------------------------------------- */

@media (min-width: 760px) {
  .shell { padding-block-end: 0; padding-inline-start: 96px; }

  .tabs {
    inset-inline-end: auto;
    inset-block: 0;
    grid-template-columns: 1fr;
    grid-auto-rows: max-content;
    align-content: center;
    gap: .4rem;
    inline-size: 96px;
    block-size: 100dvh;
    border-block-start: 0;
    border-inline-end: 1px solid var(--line-soft);
    padding-block-end: 0;
    box-shadow: var(--edge);
  }

  .tab { padding-block: .75rem; }
  .main { padding: 1.75rem; }
}


/* --- reduced motion ------------------------------------------------------- */
/*
   Not a checkbox exercise. Vestibular disorders make sustained motion
   genuinely unpleasant, and this design has a lot of it. Everything ambient
   stops; state changes keep a short fade so nothing teleports.
*/

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .balance::after,
  .ring--live,
  .badge--live::before { animation: none !important; }

  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }

  /* The flag waves because it is an animated GIF, which no animation rule
     can stop. Swapping the replaced element's content for a still frame
     can. */
  .pmark--flag { content: url("egypt-flag-still.png"); }
}


/* --- logotype ------------------------------------------------------------- */
/*
   A mark plus a wordmark, not bare text. The bolt is the product's own
   promise -- an order that moves the moment it is paid -- and it is the thing
   a returning customer recognises in a browser tab before they read anything.
*/

.logo {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  gap: .5rem;
  margin-inline-end: auto;
  /* The header is a flex row that gets crowded on a narrow admin screen;
     without this the mark and the wordmark break onto separate lines. */
  flex: none;
  white-space: nowrap;
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -.04em;
  direction: ltr;
  color: var(--ink);
}

.logo svg {
  inline-size: 27px;
  block-size: 27px;
  color: var(--brand-300);
  flex: none;
}

.logo b { color: var(--brand-100); font-weight: 700; }


/* --- payment number ------------------------------------------------------- */
/*
   The one thing a customer opens this page for, so it is a display element
   rather than a line of body text: large, selectable, and copyable in one tap.
*/

.paynum {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  border-radius: var(--r);
  background: color-mix(in oklab, var(--brand) 16%, var(--s2));
  border: 1px dashed color-mix(in oklab, var(--brand) 45%, var(--line));
  box-shadow: var(--edge);
}

.paynum__val {
  flex: 1;
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--brand-100);
  user-select: all;
}


/* --- conversation thread -------------------------------------------------- */

.thread { display: grid; gap: .6rem; margin-block: .5rem; }

.msg {
  padding: .85rem 1rem;
  border-radius: var(--r);
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--s2), var(--s1));
  box-shadow: var(--e1), var(--edge);
  max-inline-size: 92%;
  /* Customer messages hug the start edge, staff the end edge, so a long
     thread can be skimmed without reading a single name. */
  margin-inline-end: auto;
}

.msg--staff {
  margin-inline-end: 0;
  margin-inline-start: auto;
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--brand) 14%, var(--s2)),
      color-mix(in oklab, var(--brand) 5%, var(--s1)));
  border-color: color-mix(in oklab, var(--brand) 26%, var(--line-soft));
}

.msg__head {
  display: flex;
  gap: .6rem;
  align-items: baseline;
  margin-block-end: .3rem;
  font-size: var(--step--2);
}

.msg__head b { font-weight: 600; }
.msg__head span { color: var(--ink-3); margin-inline-start: auto; }
.msg p { font-size: var(--step--1); line-height: 1.7; white-space: pre-wrap; }


/* --- attention notices ---------------------------------------------------- */
/*
   The dashboard answers "does anything need me?" before it answers anything
   else, and these only render when the answer is yes. A healthy account gets
   a quiet screen -- a permanent row of status cards trains people to ignore
   the one time it matters.
*/

.notice {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem .9rem;
  border-radius: var(--r);
  border: 1px solid;
  box-shadow: var(--e1), var(--edge);
  transition: transform var(--fast) var(--ease);
}

.notice:active { transform: scale(.99); }

.notice > svg:first-child { inline-size: 22px; block-size: 22px; flex: none; }
.notice b { display: block; font-weight: 600; font-size: var(--step--1); }
.notice span { font-size: var(--step--2); color: var(--ink-2); }
.notice__go { inline-size: 17px; block-size: 17px; color: var(--ink-3); flex: none; }
.notice:dir(rtl) .notice__go { scale: -1 1; }

.notice--warn { background: color-mix(in oklab, var(--warn) 12%, var(--s1)); border-color: color-mix(in oklab, var(--warn) 35%, transparent); }
.notice--warn > svg:first-child { color: var(--warn); }
.notice--good { background: color-mix(in oklab, var(--good) 12%, var(--s1)); border-color: color-mix(in oklab, var(--good) 35%, transparent); }
.notice--good > svg:first-child { color: var(--good); }
.notice--bad { background: color-mix(in oklab, var(--bad) 12%, var(--s1)); border-color: color-mix(in oklab, var(--bad) 35%, transparent); }
.notice--bad > svg:first-child { color: var(--bad); }


/* --- quick actions -------------------------------------------------------- */

.quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}

.quick__a {
  display: grid;
  place-items: center;
  gap: .4rem;
  padding: .9rem .35rem;
  border-radius: var(--r);
  text-align: center;
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--brand) 8%, var(--s2)),
      color-mix(in oklab, var(--brand) 3%, var(--s1)));
  border: 1px solid color-mix(in oklab, var(--brand) 15%, var(--line-soft));
  box-shadow: var(--e1), var(--edge);
  transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.quick__a:active { transform: scale(.96); }
.quick__a svg { inline-size: 21px; block-size: 21px; color: var(--ink-2); }
.quick__a b { font-size: .66rem; font-weight: 550; line-height: 1.25; }

.quick__a--primary {
  border-color: color-mix(in oklab, var(--brand) 50%, transparent);
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--brand) 30%, var(--s2)),
      color-mix(in oklab, var(--brand) 12%, var(--s1)));
}

.quick__a--primary svg { color: var(--brand-100); }


/* --- key/value grid ------------------------------------------------------- */

.kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.kv > div {
  display: grid;
  gap: 2px;
  padding: .6rem .7rem;
  background: var(--s1);
}

.kv span { font-size: var(--step--2); color: var(--ink-2); }
.kv b { font-size: var(--step-0); font-weight: 650; }


/* --- misc panel bits ------------------------------------------------------ */

.linkbox {
  padding: .6rem .75rem;
  border-radius: var(--r-sm);
  background: var(--s2);
  border: 1px solid var(--line-soft);
  font-size: var(--step--1);
  word-break: break-all;
  color: var(--ink-2);
}

.keybox {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .75rem;
  border-radius: var(--r-sm);
  background: var(--s2);
  border: 1px solid var(--line-soft);
}

.keybox code {
  flex: 1;
  font-size: .72rem;
  word-break: break-all;
  color: var(--ink-2);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  user-select: all;
}

.avatar {
  inline-size: 48px;
  block-size: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: none;
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--brand-100);
  background: color-mix(in oklab, var(--brand) 22%, var(--s2));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 35%, transparent);
}


/* --- service facts -------------------------------------------------------- */
/*
   The panel that sits between choosing a service and paying for it. Every
   competing panel puts this beside the form on a wide screen and drops it
   entirely on a phone; here it is part of the form, because the phone is the
   primary surface.
*/

.svcinfo {
  display: grid;
  gap: .7rem;
  padding: .9rem;
  border-radius: var(--r);
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--brand) 9%, var(--s2)),
      color-mix(in oklab, var(--brand) 3%, var(--s1)));
  border: 1px solid color-mix(in oklab, var(--brand) 18%, var(--line-soft));
  box-shadow: var(--e1), var(--edge);
}

.svcinfo__facts {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1px;
  background: color-mix(in oklab, var(--line) 60%, transparent);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.svcinfo__facts > div {
  display: grid;
  gap: 1px;
  padding: .5rem .45rem;
  text-align: center;
  background: color-mix(in oklab, var(--s1) 92%, transparent);
}

.svcinfo__facts span { font-size: .62rem; color: var(--ink-2); }
.svcinfo__facts b { font-size: var(--step--1); font-weight: 650; }

.svcinfo__tags { display: flex; flex-wrap: wrap; gap: .28rem; }
.svcinfo__tags:empty { display: none; }

/* Admin labels and capability tags read as one row of the same chips. */
.svcinfo__chips { display: flex; flex-wrap: wrap; gap: .28rem; }
.svcinfo__chips:not(:has(.bdg)) { display: none; }
.svcinfo__chips .bdg { font-size: .66rem; padding: 3px 9px; }

/* The service's own description, as a section of the card. */
.svcinfo__about {
  display: grid;
  gap: .3rem;
  padding-block-start: .65rem;
  border-block-start: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
}

.svcinfo__label { font-size: .62rem; font-weight: 650; color: var(--ink-2); letter-spacing: .02em; }

.svcinfo__desc {
  font-size: var(--step--1);
  color: var(--ink);
  line-height: 1.7;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-wrap: anywhere;
}
.svcinfo__desc li { position: relative; padding-inline-start: .9rem; }
.svcinfo__desc li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .7em;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--live);
}

.svcinfo__id {
  margin: 0 0 .55rem;
  font-size: var(--step--2);
  color: var(--ink-2);
}
.svcinfo__id b { color: var(--ink); font-weight: 700; margin-inline-start: .25rem; }

/* The service number in front of its name in the list and on the button. */
.lsel__id {
  display: inline-block;
  margin-inline-end: .4rem;
  padding: 0 .4rem;
  border-radius: 6px;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-2);
  background: color-mix(in oklab, var(--ink) 10%, transparent);
  font-variant-numeric: tabular-nums;
  vertical-align: 1px;
}


/* A slimmer balance for the order screen, where the form is the hero and the
   balance is context rather than the headline. */
.balance--slim { padding: 1rem var(--pad); }
.balance--slim .balance__value { letter-spacing: -.035em; }


/* --- platform marks ------------------------------------------------------- */
/*
   Each platform in its own brand colour, with a glow keyed to that colour.
   A row of identical grey glyphs is a legend nobody reads; a customer looking
   for TikTok finds the pink one a beat before they finish reading the word.

   The glow is a drop-shadow on the glyph itself rather than a box-shadow on a
   wrapper, so it follows the shape instead of haloing a square. Only opacity
   and filter animate -- both composite off the main thread.
*/

.pmark {
  --pc: var(--ink-2);
  inline-size: 22px;
  block-size: 22px;
  color: var(--pc);
  flex: none;
  filter: drop-shadow(0 0 5px color-mix(in oklab, var(--pc) 55%, transparent));
  transition: filter var(--mid) var(--ease), transform var(--mid) var(--ease);
}

.pmark--lg { inline-size: 30px; block-size: 30px; }
.pmark--xl { inline-size: 40px; block-size: 40px; }

.pmark[data-p="instagram"] { --pc: #e1306c; }
.pmark[data-p="tiktok"]    { --pc: #25f4ee; }
.pmark[data-p="youtube"]   { --pc: #ff0033; }
.pmark[data-p="telegram"]  { --pc: #29a9eb; }
.pmark[data-p="facebook"]  { --pc: #1877f2; }
.pmark[data-p="x"]         { --pc: #e7e9ea; }
.pmark[data-p="snapchat"]  { --pc: #f5e800; }
.pmark[data-p="vodafone"]  { --pc: #e60000; }
.pmark[data-p="twitter"]   { --pc: #e7e9ea; }
.pmark[data-p="threads"]   { --pc: #f2f2f2; }
.pmark[data-p="whatsapp"]  { --pc: #25d366; }
.pmark[data-p="kuaishou"]  { --pc: #ff6a00; }
.pmark[data-p="kick"]      { --pc: #53fc18; }
.pmark[data-p="twitch"]    { --pc: #a970ff; }
.pmark[data-p="google"]    { --pc: #4285f4; }

/* Egypt is a flag, and the only mark here that is an image rather than a
   sprite glyph. Nothing to tint, so no --pc and no brand glow; it keeps the
   source aspect instead of being squared off, and a small radius stops a
   rectangle among circular glyphs reading as a broken image. */
.pmark--flag {
  block-size: auto;
  border-radius: 2px;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / .45));
  animation: none;
}

.pmark--flag.pmark--lg { inline-size: 30px; }
.pmark--flag.pmark--xl { inline-size: 40px; }

/* Instagram has no single brand colour; its glow cycles the gradient the
   wordmark is built from. */
.pmark[data-p="instagram"] {
  animation: ig-glow 6s var(--ease) infinite;
}

@keyframes ig-glow {
  0%, 100% { filter: drop-shadow(0 0 5px #e1306c99); color: #e1306c; }
  33% { filter: drop-shadow(0 0 7px #fd5c4399); color: #fd5c43; }
  66% { filter: drop-shadow(0 0 6px #c13584aa); color: #c13584; }
}

/* TikTok's mark is two offset copies in its two brand colours.
   inline-block, not the span default: width and height do not apply to a
   non-replaced inline element, so the box collapsed to zero and the absolutely
   positioned glyphs inside it had nothing to sit in. */
.pmark-stack {
  display: inline-block;
  position: relative;
  inline-size: 22px;
  block-size: 22px;
  flex: none;
  vertical-align: middle;
}

.pmark-stack.lg { inline-size: 30px; block-size: 30px; }
.pmark-stack.xl { inline-size: 40px; block-size: 40px; }

.pmark-stack .pmark { position: absolute; inset: 0; }
.pmark-stack .pmark:first-child { translate: -1.5px 1px; --pc: #fe2c55; opacity: .85; }

/* A slow breath so the row feels alive without anything moving position --
   position changes on a scrolling list are what cause jank. */
.pmark--live { animation: mark-breathe 3.2s var(--ease) infinite; }

@keyframes mark-breathe {
  0%, 100% { filter: drop-shadow(0 0 4px color-mix(in oklab, var(--pc) 40%, transparent)); }
  50% { filter: drop-shadow(0 0 11px color-mix(in oklab, var(--pc) 85%, transparent)); }
}

/* On a tile or a chip the whole thing lifts on hover, and the glow widens. */
.tile:hover .pmark,
.chip:hover .pmark,
.pmark-hit:hover .pmark {
  transform: translateY(-2px) scale(1.06);
  filter: drop-shadow(0 0 12px color-mix(in oklab, var(--pc) 90%, transparent));
}

/* The platform strip on the landing page: each mark keeps its own colour and
   they light in sequence rather than all at once. */
.platforms-strip .pmark {
  animation: mark-breathe 4s var(--ease) infinite;
  animation-delay: calc(var(--i, 0) * 420ms);
}

@media (prefers-reduced-motion: reduce) {
  .pmark, .pmark--live, .platforms-strip .pmark { animation: none !important; }
  .pmark[data-p="instagram"] { color: #e1306c; }
}


/* --- service badges ------------------------------------------------------- */
/*
   Smaller and denser than the status badges used elsewhere: a service can
   carry several of these, and at status-badge size four of them would outweigh
   the service name they are describing.
*/

.bdg-row { display: flex; flex-wrap: wrap; gap: .28rem; }

.bdg {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  background: color-mix(in oklab, currentColor 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, currentColor 28%, transparent);
}

.bdg::before {
  content: "";
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: currentColor;
}

.bdg--good { color: var(--good); }
.bdg--live { color: var(--live); }
.bdg--warn { color: var(--warn); }
.bdg--brand { color: var(--brand-100); }


/* --- our pick ------------------------------------------------------------- */
/*
   One service per category the panel actively recommends. A customer facing
   forty near-identical options mostly wants to be told which to buy, and an
   unmarked list makes that decision for nobody.
*/

.pick {
  position: relative;
  border-radius: var(--r);
  border: 1px solid color-mix(in oklab, var(--brand) 55%, transparent);
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in oklab, var(--brand) 22%, transparent), transparent 65%),
    linear-gradient(180deg, var(--s2), var(--s1));
  box-shadow: var(--e2), var(--e-brand), var(--edge);
  padding: .85rem .8rem .8rem;
  display: grid;
  gap: .5rem;
  margin-block-start: .7rem;
}

.pick__tag {
  position: absolute;
  inset-block-start: -9px;
  inset-inline-start: 50%;
  translate: -50% 0;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 700;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 3px 12px -3px color-mix(in oklab, var(--brand) 80%, transparent);
  white-space: nowrap;
}


/* --- the picked service --------------------------------------------------- */
/*
   When the selected service is the panel's own recommendation, the facts card
   says so. The structure of the form does not change -- category then service,
   as always -- only the card behind it gains a border and a tag.
*/

.svcinfo { position: relative; }

.svcinfo--pick {
  border-color: color-mix(in oklab, var(--brand) 55%, transparent);
  box-shadow: var(--e2), var(--e-brand), var(--edge);
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in oklab, var(--brand) 20%, transparent), transparent 62%),
    linear-gradient(180deg, var(--s2), var(--s1));
}

.svcinfo__pick {
  position: absolute;
  inset-block-start: -9px;
  inset-inline-start: 50%;
  translate: -50% 0;
  padding: 2px 11px;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 700;
  background: var(--brand);
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 3px 12px -3px color-mix(in oklab, var(--brand) 85%, transparent);
}

.svcinfo--pick { margin-block-start: .55rem; }

/* The badge row sits above the capability tags, which are the same size, so
   an empty one must not leave a gap. */
.svcinfo .bdg-row:empty { display: none; }


/* --- logo select ---------------------------------------------------------- */
/*
   An <optgroup> label cannot contain markup, so a platform logo cannot go in
   one. This is the visible control; the real <select> stays in the DOM and
   stays the submitted value.
*/

.lsel { position: relative; }

/* Visually hidden rather than display:none, so the label still points at a
   focusable control and form validation can still focus it. */
.lsel__native {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.lsel__btn {
  display: flex;
  align-items: center;
  gap: .55rem;
  inline-size: 100%;
  min-block-size: 50px;
  padding: .7rem .9rem;
  text-align: start;
  border-radius: 13px;
  border: 1px solid color-mix(in oklab, var(--brand) 14%, var(--line));
  background: color-mix(in oklab, var(--brand) 5%, var(--s2));
  box-shadow: inset 0 1px 3px rgb(0 0 0 / .35);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease);
}

.lsel.is-open .lsel__btn,
.lsel__btn:focus-visible {
  border-color: var(--brand-100);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / .3),
              0 0 0 3px color-mix(in oklab, var(--brand) 20%, transparent);
  outline: none;
}

/* One line, clipped. A long service name used to wrap the closed control to
   two lines and shove the caret off the row. */
.lsel__label {
  flex: 1;
  min-inline-size: 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lsel__caret {
  inline-size: 8px;
  block-size: 8px;
  border-inline-end: 2px solid var(--ink-3);
  border-block-end: 2px solid var(--ink-3);
  rotate: 45deg;
  translate: 0 -2px;
  flex: none;
  transition: rotate var(--fast) var(--ease);
}

.lsel.is-open .lsel__caret { rotate: -135deg; translate: 0 2px; }

.lsel__list {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + 6px);
  z-index: 50;
  max-block-size: 320px;
  overflow-y: auto;
  padding: .35rem;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--s1) 96%, transparent);
  backdrop-filter: blur(18px);
  box-shadow: var(--e3), var(--edge);
  animation: lsel-in 160ms var(--ease);
}

@keyframes lsel-in {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
}

/* The group header: the platform's mark and its name, centred. The mark alone
   reads as decoration; the pair reads as a heading, and centring separates it
   from the rows, which are start-aligned. */
.lsel__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .6rem .6rem .45rem;
  position: sticky;
  top: -.35rem;
  z-index: 1;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--s1) 97%, transparent) 70%, transparent);
}

/* A hairline either side, so the heading reads as a divider rather than as a
   row that happens to be centred. */
.lsel__head::before,
.lsel__head::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--line-soft), transparent);
}

.lsel__head + .lsel__head { margin-block-start: .3rem; }

.lsel__head + .lsel__row { margin-block-start: 0; }

.lsel__row {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .6rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: var(--step--1);
  transition: background var(--fast) var(--ease);
}

.lsel__row:hover { background: color-mix(in oklab, var(--brand) 10%, transparent); }

.lsel__row[aria-selected="true"] {
  background: color-mix(in oklab, var(--brand) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 38%, transparent);
  font-weight: 600;
}

/* A service row is a name, the facts that justify its price, and the price.
   Two lines, because the same list has to be scannable on a phone -- the
   provider's own panel spends six lines per service and fits three on screen. */
.lsel__row span { flex: 1; }

.lsel__main { display: grid; gap: 1px; min-inline-size: 0; }

/* Two lines, not one. A service's name now ends in the thing that tells it
   from its neighbour -- "ضمان 30 يوم" against "ضمان 365 يوم" -- and a single
   ellipsized line on a phone cut exactly that part off, so two different
   services read the same again. Two lines still keeps a row compact. */
.lsel__name {
  font-weight: 600;
  font-size: var(--step--1);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
}

.lsel__facts {
  font-size: .64rem;
  color: var(--ink-3);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lsel__price {
  flex: none;
  align-self: center;
  font-size: var(--step--1);
  font-weight: 750;
  color: var(--brand-100);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lsel__row[aria-selected="true"] .lsel__facts { color: var(--ink-2); }

/* The same two-line service row, server-rendered, in the public price list. */
.svcline { display: grid; gap: 1px; min-inline-size: 0; }

.svcline__name { font-weight: 600; line-height: 1.35; }

.svcline__facts {
  font-size: .68rem;
  color: var(--ink-3);
  line-height: 1.4;
}

/* Two columns, so the price can keep its own edge and the name takes the
   rest instead of the browser splitting the table evenly. */
.ptable--svc th:last-child,
.ptable--svc td:last-child { inline-size: 1%; white-space: nowrap; text-align: end; }

@media (prefers-reduced-motion: reduce) {
  .lsel__list { animation: none; }
}


/* --- service search (order form) -------------------------------------------
   Results drop under the field like the logo select's list; picking one sets
   the category and service selects.
*/
.ssearch { position: relative; }
.ssearch__list {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + 6px);
  z-index: 60;
  max-block-size: 340px;
  overflow-y: auto;
  padding: .35rem;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: var(--s1);
  box-shadow: 0 18px 40px rgb(0 0 0 / .45);
}
.ssearch__hit {
  display: grid;
  gap: 2px;
  inline-size: 100%;
  min-block-size: 44px;
  padding: .55rem .7rem;
  border: 0;
  border-radius: 11px;
  background: transparent;
  font: inherit;
  text-align: start;
  color: var(--ink);
  cursor: pointer;
}
.ssearch__hit + .ssearch__hit { margin-block-start: 2px; }
.ssearch__hit:hover, .ssearch__hit:focus-visible {
  background: color-mix(in oklab, var(--live) 10%, var(--s2));
  outline: none;
}
.ssearch__name { font-size: var(--step--1); font-weight: 550; overflow-wrap: anywhere; }
.ssearch__hit small { font-size: var(--step--2); color: var(--ink-3); }
.ssearch__none { padding: .7rem; font-size: var(--step--1); color: var(--ink-3); }

/* --- loyalty ---------------------------------------------------------------
   The level card and its progress bar. Small, because a level is context for
   the price rather than the reason anybody opened the panel.
*/

.lvlcard__name { font-size: var(--step-1); font-weight: 700; letter-spacing: -.02em; }

.lvlcard__off { flex: none; text-align: center; }
.lvlcard__off b { display: block; font-size: var(--step-2); font-weight: 750; color: var(--good); line-height: 1; }
.lvlcard__off span { font-size: var(--step--2); color: var(--ink-2); }

.lvlbar {
  inline-size: 100%;
  block-size: 7px;
  border-radius: 999px;
  background: var(--s3);
  overflow: hidden;
}

.lvlbar i {
  display: block;
  block-size: 100%;
  inline-size: var(--w, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-300), var(--brand-100));
  transition: inline-size var(--slow) var(--ease);
}

/* The discount notice on the order form: a link, but a quiet one. */
.lvl-note {
  display: inline-block;
  margin-block-start: .35rem;
  font-size: var(--step--2);
  color: var(--good);
  text-decoration: none;
}

.lvl-note:hover { text-decoration: underline; }


/* --- pagination ------------------------------------------------------------
   Replaces Laravel's bundled Tailwind pagination, whose arrows are SVGs sized
   by classes this panel does not have -- unstyled, one of them stretched to
   the width of the page.
*/

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding-block: 1rem;
}

.pager__btn {
  display: inline-flex;
  align-items: center;
  min-block-size: 38px;
  padding-inline: .9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--s2);
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 550;
  text-decoration: none;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.pager__btn:hover { background: var(--s3); border-color: color-mix(in oklab, var(--brand) 40%, var(--line)); }
.pager__btn:active { transform: scale(.97); }

.pager__btn.is-off { opacity: .35; pointer-events: none; }

.pager__count {
  font-size: var(--step--2);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}


/* ============================================================================
   Rewards
   ----------------------------------------------------------------------------
   The level is the one thing on this page that changes what somebody pays, so
   it gets the treatment the balance gets on the home screen: its own surface,
   its own light, and a ring that fills on arrival rather than a number that is
   simply already there.

   Everything else is behind tabs. Five stacked cards is a scroll; four labelled
   sections is a page somebody can find something in. The tabs are radio inputs
   and a sibling selector -- no JavaScript, and they survive a page load with
   the section still open because the browser restores the checked radio.
   ========================================================================== */

.rw-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--gap);
  padding: 1.4rem var(--pad) 1.5rem;
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 140% at 85% 0%, color-mix(in oklab, var(--brand) 26%, transparent), transparent 60%),
    linear-gradient(160deg, var(--s3), var(--s1));
  border: 1px solid color-mix(in oklab, var(--brand) 26%, var(--line));
  box-shadow: var(--e3), var(--edge);
}

/* The same slow sweep the balance card uses, so the two read as siblings. */
.rw-hero::after {
  content: "";
  position: absolute;
  inset: -45%;
  background: conic-gradient(from var(--sheen),
      transparent 0deg 78deg,
      color-mix(in oklab, var(--brand) 14%, transparent) 108deg,
      transparent 138deg 360deg);
  animation: sheen 9s linear infinite;
  pointer-events: none;
}

.rw-hero > * { position: relative; z-index: 1; }

.rw-hero__top { display: flex; align-items: center; gap: var(--gap); }

.rw-hero__name {
  font-size: var(--step-2);
  font-weight: 750;
  letter-spacing: -.03em;
  line-height: 1.1;
  display: block;
}

.rw-hero__sub { font-size: var(--step--2); color: var(--ink-2); }

.rw-hero__off {
  flex: none;
  text-align: center;
  padding: .5rem .8rem;
  border-radius: var(--r);
  background: color-mix(in oklab, var(--good) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--good) 34%, transparent);
}

.rw-hero__off b {
  display: block;
  font-size: var(--step-1);
  font-weight: 800;
  color: var(--good);
  line-height: 1;
}

.rw-hero__off span { font-size: var(--step--2); color: var(--ink-2); }

/* The five levels as a road, with the one you are on lit. */
.ladder { display: flex; gap: 4px; }

.ladder__step {
  flex: 1;
  min-inline-size: 0;
  text-align: center;
  padding: .4rem .2rem;
  border-radius: var(--r-sm);
  background: var(--s2);
  border: 1px solid var(--line-soft);
  font-size: var(--step--2);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ladder__step.is-done { color: var(--good); border-color: color-mix(in oklab, var(--good) 28%, transparent); }

.ladder__step.is-now {
  background: color-mix(in oklab, var(--brand) 24%, transparent);
  border-color: color-mix(in oklab, var(--brand) 46%, transparent);
  color: var(--brand-100);
  font-weight: 700;
  animation: pop var(--mid) var(--ease) both;
}

/* --- tabs ------------------------------------------------------------------ */

.tabset { display: grid; gap: var(--gap); }

.tabset > input { position: absolute; opacity: 0; pointer-events: none; }

.tabset__nav {
  display: flex;
  gap: .3rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: .2rem;
}

.tabset__nav::-webkit-scrollbar { display: none; }

.tabset__nav label {
  flex: none;
  padding: .45rem .9rem;
  border-radius: 999px;
  background: var(--s2);
  border: 1px solid var(--line-soft);
  font-size: var(--step--1);
  font-weight: 550;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}

.tabset__nav label:hover { background: var(--s3); color: var(--ink); }

.tabset__panel { display: none; }

#rw-1:checked ~ .tabset__nav label[for="rw-1"],
#rw-2:checked ~ .tabset__nav label[for="rw-2"],
#rw-3:checked ~ .tabset__nav label[for="rw-3"],
#rw-4:checked ~ .tabset__nav label[for="rw-4"] {
  background: color-mix(in oklab, var(--brand) 22%, transparent);
  border-color: color-mix(in oklab, var(--brand) 40%, transparent);
  color: var(--brand-100);
}

#rw-1:checked ~ [data-p="1"],
#rw-2:checked ~ [data-p="2"],
#rw-3:checked ~ [data-p="3"],
#rw-4:checked ~ [data-p="4"] {
  display: grid;
  gap: var(--gap);
  animation: vt-in var(--mid) var(--ease) both;
}

/* --- the level strip on the order form ------------------------------------- */
/*
   Small, and a link. It is there so the discount in the prices below has a
   visible reason, not to sell the rewards page.
*/

.lvlstrip {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .85rem;
  border-radius: var(--r);
  background: linear-gradient(120deg,
      color-mix(in oklab, var(--brand) 14%, var(--s1)),
      var(--s1));
  border: 1px solid color-mix(in oklab, var(--brand) 24%, var(--line-soft));
  text-decoration: none;
  color: inherit;
  transition: border-color var(--fast) var(--ease);
}

.lvlstrip:hover { border-color: color-mix(in oklab, var(--brand) 45%, transparent); }

.lvlstrip__name { font-weight: 700; font-size: var(--step--1); display: block; }
.lvlstrip__sub { font-size: var(--step--2); color: var(--ink-2); }

.lvlstrip__off {
  flex: none;
  font-weight: 800;
  font-size: var(--step-0);
  color: var(--good);
}


/* --- package picker (2026-10-14) ---------------------------------------- */
/*
   App, then kind, then up to four package cards. Phone first: apps scroll
   sideways in one row, kinds wrap, cards sit two by two and four across
   from 700px.
*/
.pk { display: grid; gap: 1rem; }
.pk-step { border: 0; margin: 0; padding: 0; display: grid; gap: .5rem; min-inline-size: 0; }
.pk-step > legend { padding: 0; margin-block-end: .5rem; }

.pk-apps { display: flex; gap: .55rem; overflow-x: auto; padding-block-end: .25rem; scrollbar-width: none; }
.pk-apps::-webkit-scrollbar { display: none; }
.pk-app {
  flex: none; display: grid; justify-items: center; gap: .35rem;
  inline-size: 78px; min-block-size: 78px; padding: .65rem .35rem;
  border-radius: var(--r); border: 1px solid var(--line-soft);
  background: var(--s1); color: var(--ink-2);
  font: inherit; font-size: var(--step--2); font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.pk-app svg { inline-size: 28px; block-size: 28px; fill: currentColor; }
.pk-app:hover { color: var(--ink); border-color: var(--line); }
.pk-app[aria-pressed="true"] {
  color: var(--ink); border-color: color-mix(in oklab, var(--brand) 70%, transparent);
  background: color-mix(in oklab, var(--brand) 14%, var(--s1));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--brand) 45%, transparent);
}

.pk-kinds { display: flex; flex-wrap: wrap; gap: .45rem; }
.pk-kind {
  min-block-size: 40px; padding: 0 1rem; border-radius: 999px;
  border: 1px solid var(--line-soft); background: var(--s1); color: var(--ink-2);
  font: inherit; font-size: var(--step--1); font-weight: 600; cursor: pointer;
}
.pk-kind:hover { color: var(--ink); }
.pk-kind[aria-pressed="true"] { color: #fff; background: var(--brand); border-color: var(--brand); }

.pk-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 700px) { .pk-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pk-card {
  position: relative; display: grid; align-content: start; gap: .3rem;
  min-block-size: 132px; padding: 1rem .85rem .85rem; text-align: start;
  border-radius: var(--r); border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--s2), var(--s1)); color: var(--ink);
  font: inherit; cursor: pointer; transition: border-color .15s, transform .15s;
}
.pk-card:hover { border-color: var(--line); }
.pk-card[aria-pressed="true"] {
  border-color: var(--brand-100, var(--brand));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand) 55%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 16%, var(--s2)), var(--s1));
}
.pk-card--best { border-color: color-mix(in oklab, var(--warn) 55%, transparent); }
.pk-card__best {
  position: absolute; inset-block-start: -10px; inset-inline-start: .75rem;
  padding: 2px 10px; border-radius: 999px; font-size: .62rem; font-weight: 700;
  background: var(--warn); color: #1a1205; white-space: nowrap;
}
.pk-card__tier { font-size: var(--step--1); font-weight: 700; }
.pk-card__price b { font-size: var(--step-1, 1.25rem); font-weight: 750; letter-spacing: -.02em; }
.pk-card__price { display: grid; gap: 1px; }
.pk-card__price small { display: block; color: var(--ink-2); font-size: var(--step--2); white-space: nowrap; }
.pk-card__line { font-size: var(--step--2); color: var(--ink-2); line-height: 1.5; }
.pk-card.is-off { opacity: .55; }
.pk-card__off { color: var(--warn); }
.pk-app:focus-visible, .pk-kind:focus-visible, .pk-card:focus-visible { outline: 2px solid var(--brand-100, #fff); outline-offset: 2px; }


/* --- sign-in, sign-up and password pages (layouts.auth) ----------------------
   Owner redesign, 2026-10-16. A brand panel beside one focused card from
   900px; below that the brand shrinks to a header line above the card.
*/
.auth-body {
  background:
    radial-gradient(70% 55% at 85% 0%, color-mix(in oklab, var(--brand) 26%, transparent), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, color-mix(in oklab, var(--brand-700) 22%, transparent), transparent 70%),
    var(--ground);
}

.auth {
  min-block-size: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 18px 16px 24px;
  gap: 18px;
}

.auth__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.auth__logo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-block-size: 44px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink);
  text-decoration: none;
}
.auth__logo svg { inline-size: 30px; block-size: 30px; color: var(--brand-300); }
.auth__logo b { color: var(--brand-100); font-weight: 700; }

.auth__pitch, .auth__apps { display: none; }

.auth__main {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
}

.auth__card {
  inline-size: 100%;
  max-inline-size: 440px;
  display: grid;
  gap: 20px;
  padding: 26px 20px;
  border-radius: 22px;
  border: 1px solid color-mix(in oklab, var(--brand) 16%, var(--line));
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 6%, var(--s2)), var(--s1));
  box-shadow: var(--e3), var(--edge);
}

.auth__head { display: grid; gap: 6px; }
.auth__title { margin: 0; font-size: 1.45rem; font-weight: 700; line-height: 1.25; }
.auth__sub { margin: 0; font-size: var(--step--1); color: var(--ink-2); }

.auth__form { display: grid; gap: 16px; }

.auth__labelrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.auth__link {
  font-size: var(--step--1);
  font-weight: 550;
  color: var(--brand-100);
  text-decoration: none;
}
.auth__link:hover, .auth__link:focus-visible { text-decoration: underline; }

/* An icon at the start of the field and, for passwords, a show button at
   the end. The input keeps its own styling; only its padding makes room. */
/* Email and password are left-to-right text, so the whole control is laid
   out left-to-right: icon on the left, show button on the right. */
.auth__control { position: relative; direction: ltr; }
.auth__control > svg {
  position: absolute;
  inset-inline-start: 14px;
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 19px;
  block-size: 19px;
  color: var(--ink-3);
  pointer-events: none;
}
.auth__control .input { padding-inline-start: 44px; }
.auth__control .input:has(+ .auth__reveal) { padding-inline-end: 50px; }

.auth__reveal {
  position: absolute;
  inset-inline-end: 4px;
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}
.auth__reveal svg { inline-size: 20px; block-size: 20px; }
.auth__reveal:hover, .auth__reveal[aria-pressed="true"] { color: var(--ink); }
.auth__reveal:focus-visible { outline: 2px solid var(--live); outline-offset: -2px; }

.auth__check {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-block-size: 44px;
  font-size: var(--step--1);
  color: var(--ink-2);
  cursor: pointer;
}
.auth__check input { inline-size: 18px; block-size: 18px; accent-color: var(--brand-500); }

.auth__alt {
  display: grid;
  gap: 10px;
  padding-block-start: 18px;
  border-block-start: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  text-align: center;
  font-size: var(--step--1);
  color: var(--ink-3);
}

.auth__foot {
  display: flex;
  gap: .6rem;
  font-size: var(--step--1);
  color: var(--ink-3);
}
.auth__foot a { color: var(--ink-2); text-decoration: none; padding: .5rem .25rem; }
.auth__foot a:hover { color: var(--ink); }

/* Inside the card, the older pages' section title sits flush. */
.auth__card .sect { margin: 0; }
.auth__card .flash { margin: 0; }

@media (min-width: 900px) {
  .auth {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 0;
    gap: 0;
  }

  .auth__brand {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 22px;
    padding: 56px clamp(40px, 6vw, 96px);
    border-inline-end: 1px solid color-mix(in oklab, var(--line) 60%, transparent);
    background:
      radial-gradient(80% 60% at 50% 40%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 75%),
      color-mix(in oklab, var(--s1) 55%, transparent);
  }

  .auth__logo { font-size: 2.1rem; gap: .75rem; }
  .auth__logo svg { inline-size: 46px; block-size: 46px; }

  .auth__pitch {
    display: block;
    margin: 0;
    max-inline-size: 30ch;
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--ink-2);
  }

  .auth__apps {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .auth__apps li {
    display: grid;
    place-items: center;
    inline-size: 48px;
    block-size: 48px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--s1);
  }
  .auth__apps .pmark { inline-size: 24px; block-size: 24px; }

  .auth__main { padding: 48px 32px; }
  .auth__card { padding: 34px 32px; }
}

/* Browser autofill painted the dark fields light blue-grey. */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: 0 0 0 100px color-mix(in oklab, var(--brand) 5%, var(--s2)) inset;
  transition: background-color 9999s;
}