:root {
  --ink: #000000;
  --text: #2c2c2c;
  --muted: #6d6d6d;
  --line: #e1e1e1;
  --paper: #ffffff;
  --surface: #f5f5f5;
  --card: #ffffff;
  --action: #000000;
  --action-ink: #ffffff;
  --soft: #eeeeee;
  --good: #0b7a54;
  --good-soft: #dff5ea;
  --warn: #8a5a00;
  --warn-soft: #fdf0d0;
  --bad: #c9252d;
  --bad-soft: #fde6e6;
  --blue: #3b63fb;
  --font: "Source Sans 3", "Trebuchet MS", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tabs: 66px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ink: #ffffff;
  --text: #dcdcdc;
  --muted: #a3a3a3;
  --line: #333333;
  --paper: #0c0c0e;
  --surface: #1c1c1c;
  --card: #1c1c1c;
  --action: #ffffff;
  --action-ink: #000000;
  --soft: #2a2a2a;
  --good: #63dcae;
  --good-soft: #123a2c;
  --warn: #f5cf6a;
  --warn-soft: #3d3010;
  --bad: #ff9c94;
  --bad-soft: #451d1d;
  --blue: #8aa5ff;
  color-scheme: dark;
}

/* One colour story for each category, used as artwork. */
.tag-0 { --tag: #e5352b; --tag-ink: #fff; --art: linear-gradient(135deg, #2b0505 0%, #b4161b 45%, #ff7a2f 100%); }
.tag-1 { --tag: #3b63fb; --tag-ink: #fff; --art: linear-gradient(135deg, #070b3a 0%, #2738d8 50%, #39b6ff 100%); }
.tag-2 { --tag: #f0a400; --tag-ink: #fff; --art: linear-gradient(135deg, #3f1d00 0%, #d9660f 50%, #ffc533 100%); }
.tag-3 { --tag: #b52bd6; --tag-ink: #fff; --art: linear-gradient(135deg, #1d0636 0%, #7a1fc2 50%, #ff4fa3 100%); }
.tag-4 { --tag: #009aa8; --tag-ink: #fff; --art: linear-gradient(135deg, #02232e 0%, #006f86 50%, #2ce0c4 100%); }
.tag-5 { --tag: #1f9d5c; --tag-ink: #fff; --art: linear-gradient(135deg, #04261a 0%, #0d7a4c 50%, #9be15d 100%); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 17px/1.5 var(--font); }
a { color: var(--ink); text-underline-offset: 3px; }
h1, h2, h3 { color: var(--ink); font-weight: 900; line-height: 1.05; letter-spacing: -.015em; margin: 0; }
h1 { font-size: 44px; }
h2 { font-size: 26px; margin-bottom: 12px; letter-spacing: -.01em; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 15px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 22px; line-height: 1; color: inherit; text-decoration: none; white-space: nowrap; letter-spacing: -.02em; }
/* The second word of the name wears the brand gradient. The purple end is lifted so it reads on
   both the dark and the white header. */
.brand b { font-weight: 400; letter-spacing: -.01em; background: linear-gradient(90deg, #a23bd0, #e01e5a 55%, #ff5a1f); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.brand-mark { width: 34px; height: 34px; flex: none; display: block; }
.mark { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #ff5a1f, #7b1fa2); color: #fff; font-size: 17px; }

/* Top navigation */
.topbar { position: sticky; top: 0; z-index: 25; background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: 1320px; margin: 0 auto; padding: 12px 28px; display: flex; align-items: center; gap: 26px; }
.topnav { margin-left: auto; display: flex; align-items: center; gap: 22px; font-weight: 700; font-size: 16px; }
.topnav a:not(.btn) { color: inherit; text-decoration: none; }
.topnav a:not(.btn):hover { text-decoration: underline; }
.topnav form { margin: 0; }
.mainlinks { display: flex; gap: 22px; font-weight: 700; font-size: 16px; }
.mainlinks a { color: inherit; text-decoration: none; }
.mainlinks a:hover { text-decoration: underline; }
.currency-form select { width: auto; min-height: 38px; margin: 0; padding: 4px 8px; border-radius: 99px; font-weight: 700; color: inherit; background-color: transparent; border-color: currentColor; cursor: pointer; }
.currency-form option { color: #000; }
.linkbtn { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }
.iconbtn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; font-size: 16px; line-height: 1; display: grid; place-items: center; flex: none; }

/* On the homepage the bar floats over the hero, then frosts as you scroll. */
.overlay-nav .topbar { position: fixed; left: 0; right: 0; background: transparent; border-color: transparent; color: #fff; transition: background .2s, color .2s; }
.overlay-nav .topbar .btn { background: #fff; border-color: #fff; color: #000; }
.overlay-nav .topbar.scrolled { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #000; border-color: rgba(0, 0, 0, .08); }
.overlay-nav .topbar.scrolled .btn { background: #000; border-color: #000; color: #fff; }

/* Page shells */
.page { max-width: 1320px; margin: 0 auto; padding: 36px 28px 80px; }
.page.bleed { max-width: none; padding: 0; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 480px; margin: 28px auto; }
.footer { background: #000; color: #bdbdbd; padding: 36px 28px; font-size: 15px; }
.footer-inner { max-width: 1320px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer .brand { color: #fff; }
.footer-link { color: #fff; font-weight: 700; text-decoration: none; }
.footer-link:hover { text-decoration: underline; }

/* Panels */
.panel { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; background: var(--surface); }
.sidebar { background: var(--paper); border-right: 1px solid var(--line); padding: 20px 14px 16px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; color: var(--ink); }
.sidebar .brand { padding: 2px 10px 22px; font-size: 19px; }
.sidebar a.nav { display: flex; justify-content: space-between; align-items: center; color: var(--text); padding: 9px 14px; border-radius: 99px; font-weight: 700; text-decoration: none; }
.sidebar a.nav:hover { background: var(--surface); }
.sidebar a.nav.on { background: var(--action); color: var(--action-ink); }
.count { background: var(--blue); color: #fff; font-size: 13px; min-width: 22px; text-align: center; padding: 0 6px; border-radius: 99px; font-weight: 700; }
.sidefoot { margin-top: auto; padding: 14px 10px 0; font-size: 15px; display: grid; gap: 8px; }
.sidefoot strong { color: var(--ink); font-weight: 700; }
.sidefoot-row { display: flex; align-items: center; gap: 12px; }
.sidefoot-row form { margin: 0; }
.sidefoot a { color: var(--muted); }
.panel-main { padding: 34px 40px 76px; min-width: 0; }
.mobilebar { display: none; }
.scrim { display: none; }
.tabbar { display: none; }

.pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.pagehead p { margin: 6px 0 0; color: var(--muted); max-width: 62ch; }

/* Parts */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.panel-main .card { border-color: transparent; }
.card + .card { margin-top: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 2px solid var(--action); background: var(--action); color: var(--action-ink); padding: 8px 24px; border-radius: 99px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn:hover { opacity: .82; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); opacity: 1; }
.btn.danger { background: transparent; color: var(--bad); border-color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); opacity: 1; }
.btn.sm { min-height: 34px; padding: 3px 15px; font-size: 15px; }
.btn.lg { min-height: 52px; padding: 10px 32px; font-size: 18px; }
.btn.white { background: #fff; border-color: #fff; color: #000; }
.btn.whatsapp { background: #25d366; border-color: #25d366; color: #000; }
.btn.wide { display: flex; width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 16px; color: var(--ink); }
label .hint { display: block; font-weight: 400; color: var(--muted); margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=date], textarea, select {
  display: block; width: 100%; min-height: 46px; margin-top: 6px; padding: 10px 14px; font: inherit; font-size: 16px; font-weight: 400; color: var(--ink);
  background: var(--card); border: 1.5px solid #b8b8b8; border-radius: 10px;
}
:root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { border-color: #4a4a4a; }
textarea { min-height: 96px; resize: vertical; }
input[readonly] { color: var(--muted); background: transparent; cursor: not-allowed; }
input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59, 99, 251, .22); }
input[type=file] { display: block; width: 100%; margin-top: 6px; font: inherit; font-weight: 400; color: var(--text); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 14px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 400; }

.flash { padding: 12px 16px; border-radius: 12px; margin-bottom: 18px; font-weight: 700; }
.flash.success { background: var(--good-soft); color: var(--good); }
.flash.error { background: var(--bad-soft); color: var(--bad); }

.badge { display: inline-block; padding: 1px 10px; border-radius: 99px; font-size: 14px; font-weight: 700; white-space: nowrap; background: var(--soft); color: var(--text); }
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.info { background: var(--soft); color: var(--ink); }

.tablewrap { overflow-x: auto; background: var(--card); border-radius: 16px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 14px; color: var(--muted); font-weight: 700; padding: 13px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 13px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
th.right, td.right { text-align: right; }
.actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; align-items: center; }
.actions form { margin: 0; }
.actions.row { flex-wrap: nowrap; }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); }

.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs a { padding: 6px 18px; min-height: 40px; display: inline-flex; align-items: center; gap: 8px; border-radius: 99px; color: var(--ink); font-weight: 700; text-decoration: none; background: var(--soft); }
.tabs a:hover { background: var(--line); }
.tabs a.on { background: var(--action); color: var(--action-ink); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tag); }

.stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.stat { flex: 1 1 170px; background: var(--card); border-radius: 16px; padding: 16px 20px; color: inherit; display: block; text-decoration: none; }
a.stat:hover { outline: 2px solid var(--ink); }
.stat small { display: block; color: var(--muted); font-size: 15px; }
.stat strong { font-size: 36px; font-weight: 900; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.tile { --tile: #000; width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; font-weight: 900; font-size: 22px; color: #fff; background: var(--tile); flex: none; }
.tile-img { object-fit: contain; background: #fff; border: 1px solid var(--line); }
.namecell { display: flex; align-items: center; gap: 10px; }
.namecell .tile { width: 34px; height: 34px; border-radius: 9px; font-size: 17px; }

/* Homepage hero */
.hero {
  position: relative; color: #fff; min-height: min(92vh, 840px); display: flex; flex-direction: column; overflow: hidden;
  background:
    radial-gradient(52% 78% at 84% 26%, #ff5a1f 0%, rgba(255, 90, 31, 0) 70%),
    radial-gradient(48% 70% at 58% 96%, #7b1fa2 0%, rgba(123, 31, 162, 0) 72%),
    radial-gradient(40% 56% at 100% 92%, #e01e5a 0%, rgba(224, 30, 90, 0) 70%),
    #0c0c0e;
}
.hero-inner { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 112px 28px 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.hero h1 { color: #fff; font-size: clamp(50px, 6.4vw, 84px); line-height: .98; letter-spacing: -.025em; text-wrap: balance; }
.hero .lead { font-size: 21px; line-height: 1.35; max-width: 34ch; margin: 18px 0 0; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.screen { background: rgba(15, 15, 15, .72); border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px; overflow: hidden; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 40px 90px rgba(0, 0, 0, .55); }
.screen-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 15px; font-weight: 700; }
.screen-bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .26); }
.screen-bar span { margin-left: 8px; }
.screen-row { display: flex; align-items: center; gap: 13px; padding: 13px 16px; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.screen-row:last-child { border-bottom: 0; }
.screen-row:hover { background: rgba(255, 255, 255, .08); }
.screen-row strong { display: block; font-size: 18px; line-height: 1.2; }
.screen-row small { color: #c9c9c9; font-size: 15px; }
.screen-row .amount { margin-left: auto; font-weight: 900; font-size: 19px; white-space: nowrap; }
.herotabs { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 28px 64px; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.herotabs::-webkit-scrollbar { display: none; }
.herotabs a { flex: 1 0 auto; min-width: 150px; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 16px; border-radius: 13px; color: #fff; font-weight: 700; text-decoration: none; background: rgba(255, 255, 255, .13); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.herotabs a:hover { background: #fff; color: #000; }
.chev { width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); flex: none; }

/* The white sheet sliding over the hero */
.sheet { position: relative; background: var(--paper); border-radius: 36px 36px 0 0; margin-top: -36px; padding-top: 72px; }
.center-head { text-align: center; max-width: 780px; margin: 0 auto 34px; padding: 0 20px; }
.center-head h2 { font-size: clamp(36px, 5vw, 60px); line-height: 1.02; letter-spacing: -.025em; margin: 0; }
.center-head p { margin: 12px 0 0; font-size: 20px; }
.section { padding-top: 72px; }

/* Swipeable category row */
.rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 max(28px, calc((100vw - 1264px) / 2)) 8px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.railcard { flex: 0 0 290px; scroll-snap-align: center; background: var(--surface); border-radius: 18px; overflow: hidden; color: inherit; text-decoration: none; display: flex; flex-direction: column; }
.railcard header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-weight: 700; color: var(--ink); }
.railcard .swatch { width: 26px; height: 26px; border-radius: 7px; background: var(--art); }
.railart { height: 280px; margin: 0 8px; border-radius: 14px; background: var(--art); display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-end; padding: 18px; color: #fff; }
.railart .tile { width: 64px; height: 64px; border-radius: 16px; font-size: 30px; background: rgba(255, 255, 255, .92); color: #000; }
.railbody { padding: 14px 16px 18px; }
.railbody h3 { font-size: 20px; line-height: 1.2; letter-spacing: 0; }
.railbody p { margin: 4px 0 0; color: var(--muted); font-size: 16px; line-height: 1.3; }

/* Catalog */
.filters { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.filters .tabs { margin: 0; }
.filters form { margin: 0; width: 260px; max-width: 100%; }
.filters input { margin: 0; border-radius: 99px; }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.tool { position: relative; background: var(--surface); border-radius: 18px; overflow: hidden; color: inherit; display: flex; flex-direction: column; }
.toollink { color: inherit; text-decoration: none; }
.toollink::after { content: ""; position: absolute; inset: 0; }
.toollink:focus-visible { outline: 0; }
.toollink:focus-visible::after { outline: 3px solid var(--blue); outline-offset: -3px; border-radius: 18px; }
.tool:hover .toollink { text-decoration: underline; }
.toolaction, .heartform { position: relative; z-index: 2; margin: 0; }
.toolart .heartform { position: absolute; top: 10px; right: 10px; }

/* The heart: outlined until saved, then filled with a soft pop and ring. */
.heart { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .94); color: #111; cursor: pointer; font: 700 16px var(--font); }
.heart svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; transition: transform .15s; }
.heart:hover svg { transform: scale(1.12); }
.heart.on svg { fill: url(#heart-fill); stroke: #e5114f; }
.heart.pop svg { animation: heartpop .5s cubic-bezier(.2, 1.6, .4, 1); }
.heart.pop::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid #ff5f8f; animation: heartring .55s ease-out forwards; pointer-events: none; }
.heart.labelled { padding: 0 16px 0 12px; background: var(--soft); color: var(--ink); }
.pricehead { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
@keyframes heartpop { 0% { transform: scale(.55); } 55% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes heartring { from { transform: scale(.5); opacity: .9; } to { transform: scale(2.3); opacity: 0; } }

.navicon { position: relative; display: grid; place-items: center; width: 38px; height: 38px; }
.navicon svg { width: 25px; height: 25px; }
.navcount { position: absolute; top: -3px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: #e5114f; color: #fff; font-size: 12px; line-height: 19px; font-weight: 700; text-align: center; }
.cartgrid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.cartrow { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cartrow:last-child { border-bottom: 0; }
.cartrow form { margin: 0; }
.cartname { flex: 1; min-width: 0; }
.cartname a { font-weight: 700; color: var(--ink); text-decoration: none; }
.cartname a:hover { text-decoration: underline; }
.cartname small { display: block; color: var(--muted); font-size: 15px; }
.cartprice { font-weight: 900; font-size: 19px; color: var(--ink); white-space: nowrap; }
.bigempty { text-align: center; padding: 56px 20px; }
.bigempty svg { width: 54px; height: 54px; fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; margin-bottom: 8px; }
.bigempty h2 { font-size: 32px; }
.bigempty p { color: var(--muted); }
.toolart { position: relative; height: 170px; margin: 8px 8px 0; border-radius: 13px; background: var(--art); display: grid; place-items: center; }
.toolart .tile { width: 72px; height: 72px; border-radius: 18px; font-size: 34px; background: rgba(255, 255, 255, .94); color: #000; }
.tool.out .toolart { filter: grayscale(1); }
.toolflag { position: absolute; top: 10px; left: 10px; background: #000; color: #fff; font-size: 14px; font-weight: 700; padding: 1px 10px; border-radius: 99px; }
.toolbody { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.toolbody h3 { font-size: 21px; line-height: 1.15; letter-spacing: -.005em; }
.toolbody p { margin: 4px 0 0; color: var(--muted); font-size: 16px; line-height: 1.3; }
.toolfoot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.toolprice { font-size: 21px; font-weight: 900; color: var(--ink); line-height: 1.1; }
.toolprice small { display: block; font-size: 15px; font-weight: 400; color: var(--muted); }
.fauxbtn { display: inline-flex; align-items: center; min-height: 36px; padding: 2px 16px; border-radius: 99px; background: var(--action); color: var(--action-ink); font-size: 15px; font-weight: 700; }

/* How buying works */
.how { margin-top: 80px; background: #000; color: #fff; padding: 72px 0; }
.how h2 { color: #fff; font-size: clamp(36px, 5vw, 60px); line-height: 1.02; letter-spacing: -.025em; margin: 0 0 34px; }
.steps-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; }
.steps-row li { counter-increment: step; background: #1a1a1a; border-radius: 18px; padding: 22px; }
.steps-row li::before { content: counter(step); font-size: 44px; font-weight: 900; line-height: 1; display: block; margin-bottom: 26px; }
.steps-row h3 { color: #fff; font-size: 24px; margin-bottom: 6px; }
.steps-row p { color: #c2c2c2; margin: 0; }

/* Product page */
.band { background: var(--art); color: #fff; padding-bottom: 36px; }
.band-inner { max-width: 1320px; margin: 0 auto; padding: 44px 28px 40px; }
.band h1 { color: #fff; font-size: clamp(46px, 6.4vw, 84px); line-height: .98; letter-spacing: -.025em; margin-top: 18px; max-width: 16ch; }
.band p { margin: 12px 0 0; font-size: 21px; max-width: 46ch; }
.band .tile { width: 64px; height: 64px; border-radius: 16px; font-size: 30px; background: #fff; color: #000; }
.band + .wrap, .band + .sheetwrap { position: relative; }
.sheetwrap { position: relative; background: var(--paper); border-radius: 36px 36px 0 0; margin-top: -36px; padding: 36px 0 80px; }
.detail { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.detail .desc { white-space: pre-line; max-width: 62ch; margin: 0; font-size: 20px; line-height: 1.45; }
.buybox { position: sticky; top: 90px; }
.buybox .price { font-size: 46px; display: block; }
.price { font-size: 28px; font-weight: 900; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.price small { font-size: 15px; font-weight: 400; color: var(--muted); }
.steps { margin: 18px 0 0; padding: 0 0 0 20px; color: var(--muted); font-size: 16px; }
.steps li { margin-bottom: 4px; }
.instructions { background: var(--surface); color: var(--ink); border-radius: 12px; padding: 13px 15px; white-space: pre-line; margin-bottom: 18px; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.summary-row:last-child { border-bottom: 0; }
.summary-row span:last-child { text-align: right; }
.buy-buttons { display: grid; gap: 10px; }
.payacct { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.paylist { display: grid; gap: 10px; margin-bottom: 14px; }
.payrow { background: var(--surface); border-radius: 12px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.payrow strong { color: var(--ink); }
.paynum { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; color: var(--ink); word-break: break-all; }
/* The mark of a way to pay: the brand's own logo on the ground it was made for, or a letter. */
.paymark { --w: 104px; --h: 46px; flex: none; width: var(--w); height: var(--h); border-radius: 11px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: #000; font-weight: 900; font-size: 20px; }
.paymark.dark { background: #1e2026; border-color: #1e2026; }
.paymark.plain { background: var(--soft); border-color: transparent; color: var(--ink); }
.paymark img { display: block; width: auto; height: auto; max-width: calc(var(--w) * .8); max-height: calc(var(--h) * .52); }
.paymark img[src*="jazzcash"] { max-height: calc(var(--h) * .8); }
.paymark img[src*="bank.svg"] { height: calc(var(--h) * .56); }
.payinfo { flex: 1; min-width: 0; }
.paynote { margin: 0 0 14px; }
@media (max-width: 520px) {
  /* The mark and the Copy button share the first line; the account's details take the second. */
  .payrow { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; }
  .paymark { grid-area: 1 / 1; }
  .payrow > .btn { grid-area: 1 / 2; justify-self: end; }
  .payinfo { grid-area: 2 / 1 / 3 / 3; }
}

/* Wallet: each subscription flips to show its login */
.pass { position: relative; display: flex; flex-direction: column; min-height: 250px; color: #fff; background: var(--art); border-radius: 20px; text-decoration: none; }
.pass-main { flex: 1; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.pass h3 { color: inherit; font-size: 30px; margin-top: auto; padding-top: 18px; }
.pass p { margin: 0; font-size: 16px; line-height: 1.3; }
.pass-stub { padding: 12px 20px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pass-price { font-size: 28px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.pass-term { font-size: 15px; font-weight: 700; text-align: right; line-height: 1.25; }
.pass .tile { background: #fff; color: #000; }
.passline { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.stamp { font-size: 14px; font-weight: 700; padding: 2px 11px; border-radius: 99px; background: #000; color: #fff; }
.wallet { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.flip { perspective: 1400px; }
.flip-inner { display: grid; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.2, .85, .25, 1); }
.flip.flipped .flip-inner { transform: rotateY(180deg); }
.flip-inner > .pass { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* The face turning away is hidden only once it's edge-on, and the face turning in shows at once,
   so neither face blinks mid-turn. */
.flip-inner > .pass-front { transition: visibility 0s 0s; }
.pass-back { transform: rotateY(180deg); visibility: hidden; transition: visibility 0s .22s; }
.flip.flipped .pass-back { visibility: visible; transition-delay: 0s; }
.flip.flipped .pass-front { visibility: hidden; transition: visibility 0s .22s; }
.pass-back .pass-main { gap: 10px; }
.pass-back .secret { margin: 0; flex: 1; background: rgba(0, 0, 0, .55); color: #fff; }
.pass .btn { background: #fff; border-color: #fff; color: #000; }
.pass .btn.ghost { color: #fff; border-color: #fff; background: transparent; }
.pass-sub { font-size: 16px; font-weight: 700; }
.pass h3, .pass-price { overflow-wrap: anywhere; }
.flip, .flip-inner { height: 100%; }
.wallet .pass h3 { font-size: 26px; line-height: 1.15; }
.wallet .pass-price { font-size: 24px; white-space: nowrap; }
.rack { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); align-items: stretch; }
.rack-item { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rack-item .pass { flex: 1; min-height: 0; }
.rack-item .pass h3 { font-size: 24px; line-height: 1.15; min-height: 2.3em; margin-top: 12px; padding-top: 0; }
.rack-item .pass p { min-height: 2.6em; }
.rack-item .pass-stub { flex-direction: column; align-items: flex-start; gap: 4px; }
.rack-item .pass-price { font-size: 26px; white-space: nowrap; }
.rack-item .pass-term { font-size: 14px; text-align: left; }
.rack-item .grid2 { grid-template-columns: 80px minmax(0, 1fr) !important; }

/* Sign in */
.auth {
  min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 32px; color: #fff;
  padding: 40px max(28px, calc((100vw - 1264px) / 2));
  background:
    radial-gradient(60% 80% at 16% 88%, #ff5a1f 0%, rgba(255, 90, 31, 0) 70%),
    radial-gradient(50% 70% at 50% 8%, #7b1fa2 0%, rgba(123, 31, 162, 0) 72%),
    #0c0c0e;
}
.auth h1 { color: #fff; font-size: clamp(50px, 6.6vw, 88px); line-height: .98; letter-spacing: -.025em; margin-top: 24px; }
.auth .brand { color: #fff; }
.auth .card { max-width: 440px; width: 100%; justify-self: end; border: 0; }

/* Credentials and small parts */
.secret { background: #000; color: #f0f0f0; border-radius: 12px; padding: 13px 15px; white-space: pre-wrap; word-break: break-word; margin: 10px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
td[colspan] .secret { margin: 0 13px 14px; }
.onetime { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; color: var(--ink); background: var(--surface); padding: 11px 15px; border-radius: 12px; word-break: break-all; margin-bottom: 14px; }
.accountlist { margin-bottom: 16px; }
.accounts { display: grid; gap: 10px; margin-bottom: 10px; }
.account-row { display: grid; grid-template-columns: 1fr 1fr 1fr 40px; gap: 10px; align-items: end; padding: 12px; background: var(--surface); border-radius: 12px; }
.account-row label { margin: 0; }
.decide-form .account-row { grid-template-columns: minmax(0, 1fr); }
.decide-form .accountlist { margin: 0; }
.iconfield { display: flex; gap: 14px; align-items: flex-start; }
.iconfield label { flex: 1; min-width: 0; }
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .62); display: grid; place-items: center; padding: 16px; }
.modal-box { background: var(--card); border-radius: 20px; padding: 26px; width: 100%; max-width: 520px; }
.copybox { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; color: var(--ink); background: var(--surface); white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }
.modal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.timeline-row { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.timeline-row:last-child { border-bottom: 0; }
.invoice-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.request-form { display: grid; gap: 10px; }
details.decide summary { cursor: pointer; font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.decide-form { margin-top: 10px; display: grid; gap: 8px; min-width: 240px; text-align: left; }
.decide-form label { margin: 0; }

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); padding-top: 96px; gap: 28px; }
  .hero { min-height: 0; }
  .mainlinks { display: none; }
  .auth { grid-template-columns: minmax(0, 1fr); align-content: center; }
  .auth .card { justify-self: start; max-width: none; }
}

@media (max-width: 820px) {
  h1 { font-size: 38px; }
  .btn.sm { min-height: 42px; padding: 6px 16px; }
  .hide-sm { display: none !important; }
  .topbar-inner { padding: 10px 16px; gap: 10px; }
  .topbar .brand b { display: none; }
  .topbar .iconbtn { display: none; }
  .has-tabs .navicon { display: none; }
  .cartgrid { grid-template-columns: minmax(0, 1fr); }
  .topnav { gap: 12px; white-space: nowrap; }
  .page { padding: 22px 16px 54px; }
  .page.bleed { padding: 0; }
  .wrap { padding: 0 16px; }
  .has-tabs .page:not(.bleed), .has-tabs .panel-main { padding-bottom: calc(var(--tabs) + 40px + env(safe-area-inset-bottom)); }
  .has-tabs .footer { padding-bottom: calc(var(--tabs) + 30px + env(safe-area-inset-bottom)); }

  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--paper); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a, .tabbar button { position: relative; min-width: 0; min-height: var(--tabs); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: 0; color: var(--muted); font: 700 12px var(--font); text-decoration: none; cursor: pointer; }
  .tabbar svg { width: 23px; height: 23px; }
  .tabbar .on { color: var(--ink); }
  .tabbar .count { position: absolute; top: 6px; left: 54%; }

  .panel { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mobilebar { display: flex; align-items: center; justify-content: space-between; background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); padding: 10px 16px; position: sticky; top: 0; z-index: 20; }
  .sidebar { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 40; height: auto; max-height: 82vh; padding: 18px 12px calc(18px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; border: 0; transform: translateY(105%); visibility: hidden; transition: transform .28s ease, visibility .28s; }
  .menu-open .sidebar { transform: none; visibility: visible; }
  .sidebar > .brand { display: none; }
  .sidebar a.nav { min-height: 48px; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .28s; border: 0; }
  .menu-open .scrim { opacity: 1; pointer-events: auto; }
  .panel-main { padding: 22px 16px 54px; }

  .hero-inner { padding: 84px 16px 22px; }
  .hero h1 { font-size: 50px; }
  .hero .lead { font-size: 19px; }
  .herotabs { padding: 0 16px 60px; }
  .herotabs a { flex: 0 0 auto; }
  .sheet { padding-top: 48px; border-radius: 28px 28px 0 0; }
  .sheetwrap { border-radius: 28px 28px 0 0; padding-top: 24px; }
  .section { padding-top: 52px; }
  .rail { padding: 0 16px 8px; }
  .railcard { flex-basis: 78vw; }
  .how { margin-top: 56px; padding: 52px 0; }
  .detail { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .buybox { position: static; grid-row: 1; }
  .band-inner { padding: 26px 16px 34px; }
  .grid2, .grid3, .grid4, .account-row, .timeline-row { grid-template-columns: minmax(0, 1fr); }
  .account-row { grid-template-columns: minmax(0, 1fr) !important; }
  .timeline-row { gap: 0; }
  .steps-row { grid-template-columns: minmax(0, 1fr); }
  .filters .tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px; width: 100vw; scrollbar-width: none; }
  .filters .tabs a { flex: none; }
  .filters form { width: 100%; }
  .tabs a { flex: none; }
  .products, .wallet { grid-template-columns: minmax(0, 1fr); }
  .decide-form { min-width: 0; }
  details.decide { width: 100%; }
  details.decide summary { padding: 8px 0; }

  /* Tables become stacked rows so actions never sit off-screen. */
  .tablewrap { overflow: visible; }
  .tablewrap table, .tablewrap tbody, .tablewrap td { display: block; width: 100%; }
  .tablewrap tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .tablewrap tr:last-child { border-bottom: 0; }
  .tablewrap tr:first-child:has(th) { display: none; }
  .tablewrap tr.head-row { display: none; } /* The same, for browsers without :has(): app.js marks the row. */
  .tablewrap tr:has(> td[colspan]) { padding: 0; border: 0; }
  .tablewrap td { border: 0; padding: 4px 16px; text-align: left; }
  .tablewrap td:empty { display: none; }
  .tablewrap td[data-label]:not([data-label=""]):not(:first-child) { display: flex; justify-content: space-between; gap: 16px; }
  .tablewrap td[data-label]:not([data-label=""]):not(:first-child)::before { content: attr(data-label); color: var(--muted); flex: none; }
  .tablewrap td:first-child { font-weight: 700; }
  .tablewrap td.stack[data-label]:not(:first-child) { display: block; overflow-wrap: anywhere; }
  .tablewrap td.stack[data-label]:not(:first-child)::before { display: block; }
  .actions, .actions.row { justify-content: flex-start; flex-wrap: wrap; padding-top: 6px; }
  .stat strong { font-size: 27px; white-space: nowrap; }
  .stat { flex-basis: 40%; }
}

@media (max-width: 400px) {
  .topbar .brand > span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.qr svg { display: block; width: 200px; height: 200px; margin: 8px 0 12px; border-radius: 8px; }

/* Invoices keep their paper colours in dark mode, so they match the PDF. */
.inv-wrap { max-width: 800px; }
.inv-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.inv { background: #fff; color: #2f2f2f; border-radius: 12px; padding: 40px; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.inv p { margin: 0 0 4px; }
.inv section { margin-top: 26px; }
.inv-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.inv-mark { width: 76px; height: 76px; font-size: 38px; flex: none; }
.inv-title { text-align: right; }
.inv-title h1 { margin: 0; color: #2f2f2f; font-weight: 400; font-size: 40px; line-height: 1.1; }
.inv-title p, .inv-label { color: #777; }
.inv-parties { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 18px; }
.inv-store { display: block; margin-bottom: 14px; }
.inv-meta { margin: 0; min-width: min(320px, 100%); }
.inv-meta div { display: flex; justify-content: flex-end; gap: 24px; padding: 5px 12px; }
.inv-meta dt { color: #777; }
.inv-meta dd { margin: 0; min-width: 120px; text-align: right; overflow-wrap: anywhere; }
.inv-meta .inv-balance { background: #f4f4f4; border-radius: 5px; margin-top: 6px; padding: 8px 12px; }
.inv-balance dt, .inv-balance dd { color: #2f2f2f; font-weight: 700; }
.inv-items { margin-top: 28px; }
.inv-row { display: grid; grid-template-columns: 1fr 80px 130px 130px; gap: 10px; padding: 11px 14px; }
.inv-row span:nth-child(n + 3) { text-align: right; }
.inv-row small { display: block; color: #777; }
.inv-band { background: #3a3a3a; color: #fff; border-radius: 5px; padding: 8px 14px; }
.inv-totals { margin: 14px 0 0 auto; width: fit-content; }
@media (max-width: 640px) {
  .inv { padding: 20px 16px; }
  .inv-mark { width: 52px; height: 52px; font-size: 26px; }
  .inv-title h1 { font-size: 28px; }
  .inv-meta, .inv-totals { width: 100%; }
  .inv-meta div { justify-content: space-between; }
  .inv-row { display: block; padding: 8px 0; }
  .inv-row.inv-band { display: none; }
  .inv-row span { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; text-align: right; }
  .inv-row span::before { content: attr(data-label); color: #777; text-align: left; }
  .inv-row span:first-child { display: block; text-align: left; }
  .inv-row span:first-child::before { content: none; }
}
.inv-ship { margin-top: 12px !important; }

.inv-logo { max-width: 150px; max-height: 76px; object-fit: contain; }
.inv-from { margin-bottom: 14px; }
.inv-people { display: flex; gap: 40px; flex-wrap: wrap; }
.inv-editor { display: grid; gap: 18px; }
.inv-editor > * { min-width: 0; }
.inv-edit-top, .inv-edit-bottom { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0 28px; }
.inv-line { display: grid; grid-template-columns: minmax(0, 1fr) 90px 130px 130px 38px; gap: 10px; align-items: center; margin-bottom: 8px; }
.inv-line label { margin: 0; }
.inv-line output { text-align: right; }
.inv-line-head { font-weight: 700; font-size: 14px; }
.inv-line-head span:nth-child(4) { text-align: right; }
.inv-line-label { display: none; }
.inv-sum { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; }
.inv-sum-strong { font-weight: 700; font-size: 18px; border-top: 1px solid var(--line, #ddd); margin-top: 4px; padding-top: 12px; }
.inv-sum-field { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 10px; }
.inline { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.inline input { width: auto; }
@media (max-width: 760px) {
  .inv-edit-top, .inv-edit-bottom { grid-template-columns: minmax(0, 1fr); }
  .inv-line-head { display: none; }
  .inv-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-bottom: 12px; border-bottom: 1px solid var(--line, #ddd); }
  .inv-line label:first-child { grid-column: 1 / -1; }
  .inv-line-label { display: block; }
  .inv-line output { text-align: left; }
  .inv-line [data-remove-line] { justify-self: end; }
}
.inv { overflow-wrap: anywhere; }

.pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 16px; }
h1, h2, h3, .pagehead, .pagehead > div, .pass-main, .namecell, .namecell span, .sidefoot, .sidefoot strong, .railbody, .toolbody { overflow-wrap: anywhere; min-width: 0; }
td { overflow-wrap: break-word; }
p, li { overflow-wrap: anywhere; }
.inv-pay { margin-top: 16px; }

.bulkbar { position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; margin-bottom: 12px; background: var(--card); border: 1px solid var(--line, #ddd); border-radius: 14px; }
.bulkbar .inline { margin: 0; font-weight: 700; }
.bulkbar input[type=text] { flex: 1 1 200px; width: auto; min-width: 0; padding-top: 6px; padding-bottom: 6px; }
.bulkbar-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.bulkbar button:disabled { opacity: .45; cursor: not-allowed; }
.pick { width: 34px; }
.pick input, .bulkbar input[type=checkbox], .rack-item input[type=checkbox] { width: 20px; height: 20px; margin: 0; accent-color: #3b63fb; }
.rack-item .inline { margin: 0; font-weight: 700; }
@media (max-width: 760px) {
  .bulkbar { top: 0; }
  .bulkbar-actions { margin-left: 0; width: 100%; }
}
.pay-grid { align-items: start; gap: 16px; }
/* Its two cards may be narrower than the table inside one of them, which then scrolls in its own
   frame. Below 960px (a phone on its side, with the menu beside the page) they stack. */
.pay-grid > * { min-width: 0; }
@media (max-width: 960px) { .pay-grid { grid-template-columns: minmax(0, 1fr); } }

/* Homepage sections: hero extras, tool strip, comparison, FAQ and closing band. */
.hero-pill { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 99px; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 14px; font-weight: 700; color: #fff; }
.pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5a1f; box-shadow: 0 0 0 4px rgba(255, 90, 31, .28); }
.arrowbtn { gap: 14px; padding-right: 8px; }
.arrowbtn .arrowdot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #000; color: #fff; transition: transform .2s; }
.arrowbtn:not(.white) .arrowdot { background: var(--action-ink); color: var(--action); }
.arrowbtn .arrowdot svg { width: 18px; height: 18px; }
.arrowbtn:hover .arrowdot { transform: translateX(3px); }
.hero-cta { align-items: center; gap: 22px; }
.hero-proof { display: flex; align-items: center; gap: 12px; font-size: 16px; color: #e8e8e8; }
.hero-proof strong { color: #fff; }
.tilestack { display: flex; }
.tilestack .tile { width: 38px; height: 38px; border-radius: 50%; font-size: 17px; border: 2px solid #111; background: #fff; color: #000; }
.tilestack .tile + .tile { margin-left: -12px; }

.hero-stage { position: relative; padding: 46px 40px; }
.hero-stage .screen { position: relative; z-index: 1; }
.orbit { position: absolute; z-index: 2; padding: 7px; border-radius: 18px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); animation: bob 6s ease-in-out infinite; }
.orbit .tile { width: 46px; height: 46px; border-radius: 12px; font-size: 21px; background: #fff; color: #000; }
.orbit-1 { top: 0; left: 6%; transform: rotate(-8deg); }
.orbit-2 { top: 8px; right: 4%; animation-delay: -1.5s; transform: rotate(7deg); }
.orbit-3 { bottom: 4px; left: 0; animation-delay: -3s; transform: rotate(6deg); }
.orbit-4 { bottom: 0; right: 10%; animation-delay: -4.5s; transform: rotate(-6deg); }
@keyframes bob { 50% { translate: 0 -10px; } }

.marquee { text-align: center; margin: -12px 0 64px; }
.marquee-title { margin: 0 0 18px; color: var(--muted); font-size: 18px; }
.marquee-window { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: slide 40s linear infinite; }
.marquee-window:hover .marquee-track { animation-play-state: paused; }
.marquee-set { display: flex; gap: 14px; padding-right: 14px; }
.marquee-item { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.marquee-item:hover { border-color: var(--ink); }
.marquee-item .tile { width: 34px; height: 34px; border-radius: 50%; font-size: 15px; }
@keyframes slide { to { transform: translateX(-50%); } }

.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 1000px; margin: 0 auto; }
.compare-card { border-radius: 26px; padding: 28px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; }
.compare-card.alone { background: var(--surface); }
.compare-card.us { border: 2px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, #ff5a1f, #e01e5a, #7b1fa2) border-box; box-shadow: 0 24px 60px rgba(123, 31, 162, .14); }
.compare-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; font-weight: 700; font-size: 15px; background: var(--soft); color: var(--ink); }
.compare-tag svg { width: 16px; height: 16px; }
.compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; flex: 1; }
.compare li { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; line-height: 1.35; }
.compare li svg { flex: 0 0 auto; width: 22px; height: 22px; padding: 3px; border-radius: 50%; margin-top: 1px; }
.compare .alone li { color: var(--muted); }
.compare .alone li svg { color: var(--bad); background: var(--bad-soft); }
.compare .us li { color: var(--ink); }
.compare .us li svg { color: var(--good); background: var(--good-soft); }

.how { margin-top: 0; position: relative; overflow: hidden; border-radius: 32px; padding: 56px 44px 44px;
  background: radial-gradient(60% 90% at 100% 0%, rgba(255, 90, 31, .45) 0%, rgba(255, 90, 31, 0) 70%), radial-gradient(50% 80% at 0% 100%, rgba(123, 31, 162, .5) 0%, rgba(123, 31, 162, 0) 70%), #0c0c0e; }
.how .steps-row li { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.how .steps-row li::before { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #000; font-size: 22px; margin-bottom: 22px; }

.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { border: 1px solid var(--line); border-radius: 20px; background: var(--card); transition: border-color .2s; }
.faq details[open] { border-color: var(--ink); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; cursor: pointer; color: var(--ink); font-weight: 700; font-size: 19px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: 0 0 auto; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--soft); transition: transform .2s; }
.faq details[open] summary svg { transform: rotate(45deg); background: var(--action); color: var(--action-ink); }
.faq details p { margin: 0; padding: 0 24px 22px; font-size: 18px; }

.ctaband { border-radius: 32px; padding: 64px 28px; text-align: center; color: #fff; overflow: hidden;
  background: radial-gradient(50% 90% at 85% 20%, #ff5a1f 0%, rgba(255, 90, 31, 0) 70%), radial-gradient(50% 90% at 15% 100%, #7b1fa2 0%, rgba(123, 31, 162, 0) 72%), radial-gradient(40% 70% at 100% 100%, #e01e5a 0%, rgba(224, 30, 90, 0) 70%), #0c0c0e; }
.ctaband h2 { color: #fff; font-size: clamp(34px, 5vw, 58px); line-height: 1.02; letter-spacing: -.025em; max-width: 16ch; margin: 0 auto 14px; text-wrap: balance; }
.ctaband p { font-size: 20px; color: #e3e3e3; margin: 0 auto 28px; }

@media (max-width: 980px) {
  .hero-stage { padding: 30px 18px; }
  .orbit-5, .orbit-6 { display: none; }
}
@media (max-width: 760px) {
  .compare { grid-template-columns: minmax(0, 1fr); }
  .compare-card { padding: 22px; border-radius: 22px; }
  .compare li { font-size: 17px; }
  .how { padding: 40px 20px 20px; border-radius: 26px; }
  .faq summary { padding: 18px; font-size: 17px; }
  .faq details p { padding: 0 18px 18px; font-size: 17px; }
  .ctaband { padding: 48px 20px; border-radius: 26px; }
  .marquee { margin-bottom: 48px; }
  .orbit .tile { width: 38px; height: 38px; font-size: 17px; }
}

/* Uploaded product pictures are artwork, not logos: no white box, and shown large on a dark stage. */
.tile-img, .toolart .tile-img, .railart .tile-img, .band .tile-img, .orbit .tile-img, .pass .tile-img { background: transparent; border: 0; border-radius: 0; }
.tilestack .tile-img { background: #111; padding: 3px; }
.toolart.has-img, .band.has-img { background: #0b0b0b; background: radial-gradient(60% 75% at 50% 50%, color-mix(in srgb, var(--tag) 42%, transparent) 0%, transparent 75%), #0b0b0b; }
.toolart.has-img { overflow: hidden; }
.toolart { height: auto; aspect-ratio: 4 / 3; }
.toolart.has-img .tile-img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 8px; }
.toolart.has-img .toolflag, .toolart.has-img .heartform { z-index: 3; }
.band.has-img .band-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding-top: 28px; padding-bottom: 28px; }
.band-img { display: block; width: clamp(150px, 24vw, 300px); aspect-ratio: 1; object-fit: contain; }
@media (max-width: 640px) {
  .band.has-img .band-inner { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .band-img { order: -1; width: 150px; }
}
.railart.has-img { flex-wrap: nowrap; align-items: center; justify-content: center; align-content: center; gap: 12px; background: #0b0b0b; background: radial-gradient(60% 70% at 50% 50%, color-mix(in srgb, var(--tag) 42%, transparent) 0%, transparent 75%), #0b0b0b; }
.railart.has-img .tile-img { flex: 1 1 0; width: 0; height: 100%; max-height: 220px; }
.screen-row .tile-img { width: 100px; height: 70px; }
.orbit .tile-img { width: 120px; height: 84px; }
.hero-stage:has(.orbit .tile-img) { padding: 130px 40px; }
.marquee-item .tile-img { width: 76px; height: 54px; }
.tilestack .tile-img { width: 58px; height: 42px; padding: 3px; border-radius: 10px; }
@media (max-width: 640px) {
  .screen-row .tile-img { width: 76px; height: 54px; }
  .orbit .tile-img { width: 84px; height: 60px; }
  .hero-stage:has(.orbit .tile-img) { padding: 96px 18px; }
}
.geo-credit { color: inherit; font-size: 13px; opacity: .6; }

/* WhatsApp help button with a little robot, bottom right of store pages. */
.supportbot { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
.supportbot > * { pointer-events: auto; }
.supportbot-button { position: relative; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #2fe57a, #128c7e); box-shadow: 0 12px 30px rgba(18, 140, 126, .45), inset 0 -4px 10px rgba(0, 0, 0, .15); animation: bot-pop .6s cubic-bezier(.2, 1.6, .4, 1) .3s both; transition: transform .2s; }
.supportbot-button::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25d366; z-index: -1; animation: bot-ring 2.6s ease-out 1.2s infinite; }
.supportbot-button:hover { transform: scale(1.08) rotate(-4deg); }
.supportbot-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* The robot's layers sit on top of one another in the same box. Each turns about the point its
   part turned about inside the single picture (the head's chin, the eyes' middle, the arm's
   shoulder), given here as a share of that box. */
.robot { position: relative; display: block; width: 50px; height: 50px; animation: bot-bob 3s ease-in-out infinite; }
.robot-part { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.robot-head { transform-origin: 50% 71.875%; animation: bot-tilt 6s ease-in-out infinite; }
.robot-eyes { transform-origin: 50% 47.656%; animation: bot-blink 4s infinite; }
.robot-light { position: absolute; left: 50%; top: 12.5%; width: 11.25%; height: 11.25%; margin: -5.625% 0 0 -5.625%; border-radius: 50%; background: #ff9f43; box-shadow: 0 0 3px 1px #fff36b; opacity: 0; animation: bot-glow 1.4s ease-in-out infinite; }
.robot-wave { transform-origin: 68.75% 78.125%; animation: bot-wave 3s ease-in-out infinite; }
.supportbot-button:hover .robot-wave { animation-duration: .7s; }
.supportbot-badge { position: absolute; right: -2px; top: -2px; width: 24px; height: 24px; border-radius: 50%; background: #25d366; border: 2px solid #fff; display: grid; place-items: center; }
.supportbot-badge svg { width: 14px; height: 14px; }
.supportbot-bubble { position: relative; max-width: 240px; background: #fff; color: #111; border-radius: 18px 18px 4px 18px; padding: 14px 34px 14px 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, .25); animation: bot-bubble .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.supportbot-bubble a { color: inherit; text-decoration: none; display: grid; gap: 2px; }
.supportbot-bubble strong { font-size: 16px; }
.supportbot-bubble span { font-size: 14px; color: #555; line-height: 1.3; }
.supportbot-close { position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: #777; font-size: 18px; line-height: 1; cursor: pointer; }
.supportbot-close:hover { background: #f0f0f0; color: #111; }
@keyframes bot-pop { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes bot-ring { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
@keyframes bot-bob { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-3px); } }
@keyframes bot-tilt { 0%, 40%, 100% { transform: rotate(0); } 48% { transform: rotate(-7deg); } 56% { transform: rotate(5deg); } 62% { transform: rotate(0); } }
@keyframes bot-blink { 0%, 44%, 50%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.1); } }
@keyframes bot-glow { 50% { opacity: 1; } }
@keyframes bot-wave { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-22deg); } 80% { transform: rotate(8deg); } 90% { transform: rotate(-16deg); } }
@keyframes bot-bubble { from { transform: translateY(10px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 820px) {
  .has-tabs .supportbot { bottom: calc(var(--tabs) + 14px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  .supportbot { right: 14px; bottom: 14px; }
  .supportbot-button { width: 58px; height: 58px; }
  .robot { width: 44px; height: 44px; }
  .supportbot-bubble { max-width: 210px; }
}

/* Agent statement */
.statement-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.statement-head h2 { margin: 0 0 4px; }
.statement-head p { margin: 0; }
.statement-tools { display: flex; align-items: center; gap: 10px; }
.statement-tools form { margin: 0; }
.statement-tools select { margin: 0; min-height: 34px; padding: 4px 32px 4px 12px; }
.total-row td { border-top: 2px solid var(--line); }
.muted-row td { color: var(--muted); }
.tablewrap.flat { box-shadow: none; border: 0; margin: 0; }

/* Invoice number: fixed AS-INV-YEAR- prefix, typed digits, Generate */
/* It wraps: where the field is too narrow for the year, the number and the button in one line (a
   phone on its side, a narrow column), Generate drops to a line of its own and is never cut off. */
.numfield { display: flex; flex-wrap: wrap; align-items: stretch; margin: 6px 0 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.numfield:focus-within { outline: 3px solid var(--blue); outline-offset: 1px; }
.numfield-prefix { display: flex; align-items: center; padding: 0 4px 0 14px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; white-space: nowrap; }
.numfield input { flex: 1; min-width: 60px; margin: 0; border: 0; border-radius: 0; background: transparent; padding-left: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.numfield input:focus { outline: none; }
.numfield .btn { margin: 6px; flex: none; }
.numfield-hint { display: block; margin-bottom: 14px; font-size: 14px; color: var(--muted); }
.pay-preview { margin: -4px 0 16px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface); font-size: 15px; }
.pay-preview p { margin: 0 0 2px; }
.pay-preview-label { color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px !important; }
.pay-preview .hint { margin-top: 8px; font-size: 13px; color: var(--muted); }
.footer-note { flex: 1 1 260px; color: inherit; opacity: .8; font-size: 14px; }

/* Admin: site content editor */
.content-form .content-section { margin-bottom: 14px; }
.content-section > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.content-section > summary::-webkit-details-marker { display: none; }
.content-section > summary::after { content: "+"; font-size: 24px; font-weight: 700; color: var(--muted); }
.content-section[open] > summary::after { content: "–"; }
.content-section > summary h2 { margin: 0; }
.content-section[open] > summary { margin-bottom: 14px; }
.content-toggle { margin: 0 0 14px; font-weight: 700; }
.faq-edit-title { margin: 18px 0 10px; font-size: 18px; }
.faq-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; }
.faq-row-fields { flex: 1; min-width: 0; }
.faq-row-fields label:last-child { margin-bottom: 0; }
.faq-row-tools { display: flex; flex-direction: column; gap: 6px; }
.content-save { position: sticky; bottom: 0; padding: 14px 0; background: linear-gradient(transparent, var(--paper) 35%); }
.content-save .btn { width: 100%; }
@media (max-width: 640px) {
  .faq-row { flex-direction: column; }
  .faq-row-tools { flex-direction: row; }
}

/* The whole site, drawn a little smaller. One number scales every size on every page. */
:root { --scale: .85; }
html { zoom: var(--scale); }
/* Full-height areas are measured before the scale, so they ask for a little more to still fill the screen. */
.panel, .auth { min-height: calc(100vh / var(--scale)); }
@media (min-width: 821px) { .sidebar { height: calc(100vh / var(--scale)); } }
@media (max-width: 640px) {
  :root { --scale: .9; }
  /* iPhones zoom the page in when a field's text is under 16px, so fields keep that size after scaling. */
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=date], textarea, select { font-size: calc(16px / var(--scale)); }
}

/* Chart tooltips that are waiting off to the side must not make the admin page scroll sideways. */
.panel-main { overflow-x: clip; }
/* On phones and tablets, small links and file pickers get a taller area that a thumb can hit. */
@media (max-width: 820px) {
  .linkbtn, .footer-link, .report-link, .geo-credit { display: inline-flex; align-items: center; min-height: 40px; }
  input[type=file] { min-height: 44px; padding: 8px 0; }
}

/* Fixes for things that could not be read or reached. Nothing here changes how the design looks. */
/* The currency list opens dark on Windows and Linux in the dark theme; its black text needs a light row. */
.currency-form option { background: #fff; }
/* The sign-in pages set white text for their dark backdrop; inside the card it must follow the theme. */
.auth .card { color: var(--text); }
/* A long transaction ID or a one-word product name wraps inside its row and no longer pushes the page sideways. */
.summary-row span { min-width: 0; overflow-wrap: anywhere; }
.cartname a { overflow-wrap: anywhere; }
@media (max-width: 820px) {
  /* "Save site content" sticks above the tab bar, not underneath it. */
  .has-tabs .content-save { bottom: calc(var(--tabs) + env(safe-area-inset-bottom)); }
  /* The "Select all" bar sticks below the panel's top bar, which used to cover its first row. */
  .panel .bulkbar { top: 59px; }
}
@media (max-width: 400px) {
  /* The invoice number's Generate button drops to its own line on the narrowest phones. */
  .numfield { flex-wrap: wrap; }
}
/* The count badge is white on blue. The dark theme's lighter blue made the number hard to read,
   so the badge keeps the same blue in both themes. */
:root[data-theme="dark"] .count { background: #3b63fb; }
/* A printed invoice (or any printed page) leaves out the site's menus, tab bar and chat button. */
@media print {
  .topbar, .mobilebar, .tabbar, .sidebar, .footer, .supportbot, .flash { display: none !important; }
}
/* ---- Premium finish, chosen by the owner from previews on 12 Nov 2026. Brand colours only. ---- */
/* 1. The headline's ending wears the brand gradient, lifted a little so it reads on the dark hero. */
.hero-accent { background: linear-gradient(90deg, #c44fe0, #f0437a 50%, #ff7a3d); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
/* In a high-contrast mode the gradient is dropped; without this the transparent fill would leave no text. */
@media (forced-colors: active) { .hero-accent { background: none; -webkit-text-fill-color: currentColor; color: inherit; } }
/* 2. Cards: a fine edge that catches light at the top and ends in the brand colours, and more depth. */
.tool, .railcard {
  border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(145deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .05) 38%, rgba(224, 30, 90, .45) 78%, rgba(255, 90, 31, .5)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 40px -24px rgba(0, 0, 0, .28);
}
:root[data-theme="dark"] .tool, :root[data-theme="dark"] .railcard {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 50px -24px rgba(0, 0, 0, .75);
}
.toolart { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
@media (hover: hover) {
  /* :root in front so this outranks the plain hover shadow in motion.css, which loads later. */
  :root[data-theme] .tool:hover, :root[data-theme] .railcard:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 30px 60px -22px rgba(123, 31, 162, .6), 0 12px 34px -14px rgba(255, 90, 31, .4); }
}
/* 3. The store's main buttons sit on a soft brand glow, and the arrow is in the gradient. */
.page .btn.lg:not(.ghost):not(.danger), .page .btn.wide:not(.ghost):not(.danger), .toolaction .btn {
  box-shadow: 0 12px 32px -10px rgba(224, 30, 90, .6), 0 6px 18px -6px rgba(255, 90, 31, .45);
}
.topbar .btn { box-shadow: 0 8px 22px -8px rgba(224, 30, 90, .55); }
.arrowbtn .arrowdot, .arrowbtn:not(.white) .arrowdot { background: linear-gradient(135deg, #7b1fa2, #e01e5a 55%, #ff5a1f); color: #fff; }
/* 4. Tighter headlines, quiet capital labels, a short gradient rule above each section title. */
.hero h1 { letter-spacing: -.04em; }
.center-head h2 { letter-spacing: -.035em; }
.center-head::before { content: ""; display: block; width: 56px; height: 3px; border-radius: 3px; margin: 0 auto 20px; background: linear-gradient(90deg, #7b1fa2, #e01e5a 55%, #ff5a1f); }
.center-head p, .hero .lead { opacity: .82; }
.hero-pill, .filters .tabs a, .compare-tag { letter-spacing: .06em; text-transform: uppercase; font-size: 13px; }
.toolprice, .amount, .price { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
/* 5. A deeper hero: darker at the top and bottom edges, with the preview panel lit from behind. */
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(224, 30, 90, .8), rgba(255, 90, 31, .8), transparent); }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 70% at 50% 115%, rgba(0, 0, 0, .6), transparent 62%), linear-gradient(180deg, rgba(0, 0, 0, .38), transparent 28%); }
.hero-inner, .herotabs { position: relative; z-index: 1; }
.screen { box-shadow: 0 50px 100px -34px rgba(123, 31, 162, .85), 0 24px 60px -30px rgba(255, 90, 31, .5), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.orbit { box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .3); }
/* 6. In the dark theme the header stays dark glass once the page is scrolled (it used to turn white). */
:root[data-theme="dark"] .overlay-nav .topbar.scrolled { background: rgba(12, 12, 14, .72); color: #fff; border-color: rgba(255, 255, 255, .1); }
:root[data-theme="dark"] .overlay-nav .topbar.scrolled .btn { background: #fff; border-color: #fff; color: #000; }

/* ---- Comparison, key figures and FAQ, redone on 12 Nov 2026 at the owner's request. ---- */
/* Both comparison cards: rows sit at the top with a hairline between them. The left list used to
   be stretched to the height of the right card, which spread its lines unevenly. */
.compare { align-items: stretch; }
.compare ul { align-content: start; gap: 0; }
.compare li { padding: 15px 0; border-bottom: 1px solid var(--line); }
.compare li:first-child { padding-top: 4px; }
.compare li:last-child { border-bottom: 0; }
.compare-card { padding: 30px; gap: 20px; }
.compare-card.alone {
  border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .04) 45%, rgba(201, 37, 45, .4)) border-box;
}
.compare-card.us { box-shadow: 0 30px 70px -28px rgba(123, 31, 162, .55), 0 14px 40px -20px rgba(255, 90, 31, .3); }
.compare .alone .compare-tag svg { color: var(--bad); }
.compare .us .compare-tag svg { color: var(--good); }
/* The left card ends on its own line, level with the button on the right. */
.compare-note { margin: auto 0 0; min-height: 52px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 18px; border-radius: 99px; background: var(--bad-soft); color: var(--bad); font-weight: 700; font-size: 16px; line-height: 1.3; }
/* Key figures under the comparison. */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1000px; margin: 18px auto 0; padding: 0; }
.fact { margin: 0; padding: 22px 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.fact dt { font-size: 34px; font-weight: 900; line-height: 1; letter-spacing: -.03em; background: linear-gradient(90deg, #a23bd0, #e01e5a 55%, #ff5a1f); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.fact dd { margin: 10px 0 0; font-size: 15px; line-height: 1.4; color: var(--muted); }
/* FAQ: the title stays beside the questions on wide screens; each question is numbered. */
.faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; max-width: 1100px; margin: 0 auto; }
.faq-intro { position: sticky; top: 96px; }
.faq-intro::before { content: ""; display: block; width: 56px; height: 3px; border-radius: 3px; margin-bottom: 20px; background: linear-gradient(90deg, #7b1fa2, #e01e5a 55%, #ff5a1f); }
.faq-intro h2 { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.04; letter-spacing: -.035em; margin: 0; }
.faq-intro p { margin: 14px 0 22px; font-size: 19px; opacity: .82; }
.faq-wrap .faq { max-width: none; margin: 0; }
.faq summary { justify-content: flex-start; gap: 14px; }
.faq summary svg { margin-left: auto; }
.faq-q { min-width: 0; }
.faq-num { flex: none; font-size: 14px; font-weight: 900; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--muted); }
.faq details[open] .faq-num { background: linear-gradient(90deg, #a23bd0, #e01e5a 55%, #ff5a1f); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.faq details[open] { border-color: transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, #ff5a1f, #e01e5a, #7b1fa2) border-box; }
.faq details p { padding: 0 24px 22px 54px; line-height: 1.55; opacity: .9; }
@media (max-width: 820px) {
  .compare { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact dt { font-size: 28px; }
  .faq-wrap { grid-template-columns: 1fr; gap: 24px; }
  .faq-intro { position: static; }
  .faq details p { padding-left: 24px; }
}

/* ---- Footer, rebuilt on 12 Nov 2026: brand and contact, three link columns, a promise and
   payment strip, then the legal line. Always dark, in both themes. ---- */
.footer { position: relative; background: #050506; color: #b9b9be; padding: 64px 28px 28px; font-size: 15px; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(123, 31, 162, .9), rgba(224, 30, 90, .9), rgba(255, 90, 31, .9), transparent); }
.footer-top { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, .8fr)) minmax(0, 1.25fr); gap: 36px; }
.footer-brand p { margin: 16px 0 20px; max-width: 34ch; font-size: 16px; line-height: 1.5; }
/* Contact: each line has its own icon; the address is plain text, the number and email are links. */
.footer-reach ul { gap: 12px; }
.footer-reach li, .footer-reach li a { display: flex; align-items: flex-start; gap: 12px; }
.footer-reach li a { min-height: 0; color: #fff; font-weight: 700; overflow-wrap: anywhere; }
.footer-reach li a:hover { transform: none; text-decoration: underline; }
.footer-reach span { min-width: 0; line-height: 1.45; }
.footer-glyph { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .14); }
.footer-reach li a span { align-self: center; }
.footer-address { color: #b9b9be; font-size: 15px; }
.footer-head { margin: 0 0 14px; color: #fff; font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer-top ul { display: grid; gap: 2px; }
.footer-top li a { display: inline-flex; align-items: center; min-height: 34px; color: inherit; text-decoration: none; transition: color .16s, transform .2s var(--ease-out); }
.footer-top li a:hover { color: #fff; transform: translateX(3px); }
.footer-strip { max-width: 1320px; margin: 44px auto 0; padding: 18px 24px; border-radius: 20px; display: flex; justify-content: space-between; align-items: center; gap: 14px 28px; flex-wrap: wrap; color: #e8e8ec;
  border: 1px solid transparent; background: linear-gradient(#0e0e11, #0e0e11) padding-box, linear-gradient(120deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 40%, rgba(224, 30, 90, .5), rgba(255, 90, 31, .5)) border-box; }
.footer-promise { display: flex; flex-wrap: wrap; gap: 8px 26px; font-weight: 700; }
.footer-promise li { display: inline-flex; align-items: center; gap: 10px; }
.footer-promise li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #a23bd0, #e01e5a 55%, #ff5a1f); }
.footer-pay { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.footer-pay-title { font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #b9b9be; }
.footer-pay ul { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Each payment method sits in a small card of the same height. A brand's logo keeps its own
   colours, on the light or dark ground it was made for. */
.footer-chip { height: 42px; padding: 0 14px; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; }
.footer-chip.light { background: #fff; border-color: #fff; }
.footer-chip.dark { background: #1e2026; }
.footer-chip img { display: block; height: 20px; width: auto; }
.footer-chip img[src*="jazzcash"] { height: 32px; }
.footer-chip img[src*="bank"] { height: 20px; }
.footer-bottom { max-width: 1320px; margin: 26px auto 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; justify-content: space-between; align-items: baseline; gap: 10px 24px; flex-wrap: wrap; font-size: 14px; }
.footer-bottom .footer-note { flex: 1 1 320px; opacity: .75; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 32px; color: #e8e8ec; font-weight: 700; text-decoration: none; }
.footer-legal a:hover { color: #fff; text-decoration: underline; }
/* Policy pages (refunds, privacy, terms): one readable column. */
.policy { max-width: 760px; margin: 12px auto 0; }
.policy-eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.policy h1 { font-size: clamp(38px, 6vw, 60px); line-height: 1.02; letter-spacing: -.035em; }
.policy h1::after { content: ""; display: block; width: 56px; height: 3px; border-radius: 3px; margin-top: 22px; background: linear-gradient(90deg, #7b1fa2, #e01e5a 55%, #ff5a1f); }
.policy-date { margin: 18px 0 8px; color: var(--muted); font-size: 15px; }
.policy h2 { margin: 38px 0 10px; font-size: 24px; letter-spacing: -.02em; }
.policy p { margin: 0 0 14px; font-size: 18px; line-height: 1.6; }
.policy ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 10px; }
.policy li { position: relative; padding-left: 24px; font-size: 18px; line-height: 1.55; }
.policy li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #a23bd0, #e01e5a 55%, #ff5a1f); }
.policy-foot { margin-top: 44px; padding: 22px 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; }
.policy-contact, .policy-foot nav { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.policy-foot a:not(.btn) { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 1180px) {
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .footer { padding: 44px 18px 24px; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
  .footer-brand, .footer-reach { grid-column: 1 / -1; }
  .footer-top li a { min-height: 40px; }
  .footer-strip { margin-top: 32px; padding: 16px 18px; }
}

/* iPhones in landscape and small tablets also zoom into a field whose text is under 16px. */
@media (min-width: 641px) and (max-width: 1024px) and (pointer: coarse) {
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=date], textarea, select { font-size: calc(16px / var(--scale)); }
}