/* =============================================================================
   features-art.css — the small picture at the top of every feature card on
   /features.html. Pure HTML + inline SVG (built by tools/features-art.py), so
   nothing extra downloads and it follows the light/dark tokens in site.css.

   Anatomy of one picture (.fa):
     ::before   a faint dot grid
     ::after    faded words behind everything, from the data-bg attribute
     .fa-*      one to three crisp foreground pieces: chips, tiles, cards
   Section colour tokens (set per section below):
     --c   the section colour, for fills, lines and icons
     --cg  its glow
     --ct  the same hue, safe for small TEXT on a card
     --cs  the fill used under text (a solid chip, tile or dot)
     --on  the text colour that sits on --cs
   ============================================================================= */

#storefront, #team     { --c: var(--blue);   --cg: var(--blueg);   --ct: var(--blue-t);   --cs: var(--blue);     --on: #fff; }
#checkout, #premium    { --c: var(--orange); --cg: var(--orangeg); --ct: var(--orange-t); --cs: var(--orange-t); --on: #fff; }
#customers, #insights  { --c: var(--violet); --cg: var(--violetg); --ct: var(--violet);   --cs: var(--violet);   --on: #fff; }
#catalogue, #platform  { --c: var(--green);  --cg: var(--greeng);  --ct: var(--green-t);  --cs: var(--green);    --on: #0A1224; }
#operations            { --c: var(--amber);  --cg: var(--amberg);  --ct: var(--amber-t);  --cs: var(--amber);    --on: #0A1224; }

/* On-colour text for fixed fills (avatars). Every dark-theme fill is light enough
   that dark ink is the readable choice. */
.fa { --on-b: #fff; --on-o: #fff; --on-v: #fff; --on-g: #0A1224; --on-a: #0A1224; }
:root[data-theme="dark"] .fa { --on: #0A1224; --on-b: #0A1224; --on-o: #0A1224; --on-v: #0A1224; }

/* Each card is a size container, so its picture can tighten on a narrow card.
   The transition list keeps site.css's scroll-reveal (.up) fade and rise. */
.fi {
  position: relative; overflow: hidden; container-type: inline-size;
  transition: border-color .2s, box-shadow .2s, opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.fi:hover { border-color: color-mix(in srgb, var(--c, var(--blue)) 40%, var(--line)); box-shadow: var(--sh2); }

/* The cursor glow from site.css, tinted with the section colour instead of blue. */
@media (hover: hover) and (pointer: fine) {
  .fcat .fi:hover { background-image: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--c) 9%, transparent), transparent 60%); }
  :root[data-theme="dark"] .fcat .fi:hover { background-image: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--c) 16%, transparent), transparent 60%); }
}

.fa {
  position: relative; isolation: isolate; overflow: hidden;
  height: 104px; margin: -8px -8px 16px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--cg) 0%, transparent 60%),
    radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--c) 10%, transparent) 0%, transparent 70%),
    var(--card2);
  border: 1px solid color-mix(in srgb, var(--c) 14%, var(--line));
  font-family: var(--font); line-height: 1.2;
}
/* A faint dot grid, so empty space still reads as a surface. */
.fa::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: radial-gradient(color-mix(in srgb, var(--c) 22%, transparent) 1px, transparent 1.2px);
  background-size: 14px 14px; opacity: .45;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
}
/* The faded words. The band is tilted, and its top and bottom inset grow with
   the card's width (cqi) so the tilted band always stays inside the picture:
   nothing bleeds past .fa, so .fa never scrolls. */
.fa::after {
  content: attr(data-bg); position: absolute; z-index: -1; pointer-events: none;
  inset: calc(5.5cqi + 1px) 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-weight: 800; font-size: 28px; line-height: 1.05; letter-spacing: -.03em; word-spacing: .3em;
  color: var(--c); opacity: .12; transform: rotate(-6deg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.fa > * { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.fi:hover .fa > * { transform: translateY(-2px); }

/* ---- the foreground vocabulary ------------------------------------------- */
.fa-col { display: grid; gap: 6px; justify-items: start; }
.fa-row { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }

.fa-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; line-height: 1.2;
  color: var(--ink); background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh2);
}
.fa-chip small { font-weight: 600; color: var(--muted); font-size: 11px; }
.fa-chip b { color: var(--ct); }
.fa-chip.c { background: var(--cs); color: var(--on); border-color: transparent; }
.fa-chip.soft { background: color-mix(in srgb, var(--c) 12%, var(--card)); color: var(--ct); border-color: transparent; box-shadow: none; }
.fa-chip.ok { color: var(--green-t); }
.fa-chip.mono { font-family: var(--mono); font-weight: 500; }
.fa-chip.strike { color: var(--muted); text-decoration: line-through; box-shadow: none; }
.fa-chip svg { width: 14px; height: 14px; flex: none; color: var(--ct); }
.fa-chip svg.ok { color: var(--green-t); }

/* Inline-path icons (the sprite's own symbols carry their stroke). */
.fa-i path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fa-i.f path { fill: currentColor; stroke: none; }

/* Tiles: a letter in a <span>, or an icon where the <svg> is the tile itself. */
.fa-tile {
  width: 52px; height: 52px; border-radius: 15px; flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: 20px; color: var(--ct);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh2);
}
.fa-tile.lg { width: 60px; height: 60px; border-radius: 17px; font-size: 24px; }
.fa-tile.sm { width: 40px; height: 40px; border-radius: 12px; font-size: 15px; }
.fa-tile.w { font-size: 15px; }
.fa-tile.c { background: var(--cs); color: var(--on); border-color: transparent; }
svg.fa-tile { display: block; max-width: none; padding: 14px; }
svg.fa-tile.lg { padding: 16px; }
svg.fa-tile.sm { padding: 10px; }

/* Size / option pills (S M L XL, 250 g, 1 kg). */
.fa-size {
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 9px; flex: none;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: var(--card); border: 1.5px solid var(--line2); color: var(--ink2);
}
.fa-size.on { border-color: var(--c); color: var(--ct); box-shadow: 0 0 0 3px var(--cg); }
.fa-size.out { color: var(--muted); text-decoration: line-through; border-style: dashed; }
.fa-size.st { height: auto; padding: 6px 9px; gap: 2px; line-height: 1.1; }
.fa-size.st small { font-size: 10px; font-weight: 700; color: var(--muted); }
.fa-size.st.on small { color: var(--ct); }
.fa-size.st.out { text-decoration: none; }

/* Swatches, avatars and loyalty tiers. */
.fa-dot { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--card); box-shadow: var(--sh1); flex: none; }
.fa-av {
  width: 30px; height: 30px; border-radius: 50%; flex: none; margin-left: -8px;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
  border: 2.5px solid var(--card); box-shadow: var(--sh1);
}
.fa-av:first-child { margin-left: 0; }
.fa-av.b { background: var(--blue);     color: var(--on-b); }
.fa-av.o { background: var(--orange-t); color: var(--on-o); }
.fa-av.v { background: var(--violet);   color: var(--on-v); }
.fa-av.g { background: var(--green);    color: var(--on-g); }
.fa-av.a { background: var(--amber);    color: var(--on-a); }
/* Light metal tiles with dark letters in both themes (they depict metals). */
.fa-tier {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #0A1224;
  box-shadow: inset 0 -2px 0 rgba(10,18,36,.14), var(--sh1);
}
.fa-tier.n { background: #EEF2F7; }
.fa-tier.b { background: #E9B98C; }
.fa-tier.s { background: #D5DCE6; }
.fa-tier.g { background: #F4CB58; }
.fa-tier.p { background: #DCD7F6; }
.fa-tier.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--c); }

/* A progress / level bar. */
.fa-bar { width: 120px; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--c) 16%, var(--line)); overflow: hidden; }
.fa-bar i { display: block; height: 100%; border-radius: inherit; background: var(--c); }
.fa-note { font-size: 11px; color: var(--muted); font-weight: 600; }

/* Step dots; the line behind them is the container's background. */
.fa-steps {
  display: flex; align-items: center; gap: 22px;
  background:
    linear-gradient(var(--c), var(--c)) 9px 50% / var(--p, 0px) 3px no-repeat,
    linear-gradient(var(--line2), var(--line2)) 9px 50% / calc(100% - 18px) 3px no-repeat;
}
.fa-steps b {
  width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 10px; color: var(--on); background: var(--cs); box-shadow: 0 0 0 3px var(--card);
}
.fa-steps b.todo { background: var(--card); border: 2px solid var(--line2); }
.fa-steps b.now { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--cg); }

/* A mini card: a panel holding a few lines. <p> is a key/value row. */
.fa-card {
  display: grid; gap: 5px; padding: 9px 11px; border-radius: 11px; min-width: 128px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh2);
  font-size: 11px; color: var(--muted); line-height: 1.25;
}
.fa-card.s { min-width: 0; padding: 9px 14px; }
.fa-card b { color: var(--ink); font-size: 12px; }
.fa-card.s b { font-size: 16px; }
.fa-card b.c, .fa-card .go { color: var(--ct); }
.fa-card .go { font-weight: 800; }
.fa-card b.ok { color: var(--green-t); }
.fa-card s { color: var(--muted); }
.fa-card p { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; line-height: 1.25; color: var(--muted); }
.fa-card p em { font-style: normal; font-weight: 800; color: var(--ink); }
.fa-card .l { height: 5px; border-radius: 9px; background: var(--line2); }
.fa-card .l.c { background: var(--c); opacity: .75; }
.fa-card .fa-chip { justify-self: start; padding: 4px 9px; }

/* A search result. Always a light page (it is Google's), in both themes. */
.fa-serp {
  display: grid; gap: 3px; padding: 9px 11px; border-radius: 11px; text-align: left;
  background: #fff; border: 1px solid #DADCE0; box-shadow: var(--sh2);
  font-size: 10.5px; line-height: 1.3; color: #4D5156;
}
.fa-serp b { color: #1A0DAB; font-size: 12px; font-weight: 700; }
.fa-serp i { font-style: normal; color: #188038; }

/* A phone outline; the app grid is a CSS pattern, one app highlighted. */
.fa-phone {
  width: 42px; height: 76px; border-radius: 10px; flex: none; position: relative;
  border: 2px solid var(--ink2); box-shadow: var(--sh2); padding: 21px 4px;
  background: conic-gradient(from 270deg at 8px 8px, var(--line2) 25%, transparent 0) 0 0 / 11px 11px content-box, var(--card);
}
.fa-phone i { position: absolute; left: 15px; top: 32px; width: 8px; height: 8px; border-radius: 2.5px; background: var(--c); box-shadow: 0 0 0 2px var(--cg); }
.fa-phone::before { content: ""; position: absolute; top: 3px; left: 50%; width: 12px; height: 3px; margin-left: -6px; border-radius: 3px; background: var(--ink2); }

/* Solid pictures: a hero banner, the licence card, a reel. Text on them is --on. */
.fa-banner, .fa-lic, .fa-reel {
  color: var(--on); box-shadow: var(--sh2);
  background: linear-gradient(125deg, var(--cs), color-mix(in srgb, var(--cs) 55%, var(--violet)));
}
.fa-banner {
  position: relative; width: 180px; height: 66px; border-radius: 12px; padding: 10px 12px;
  display: grid; align-content: space-between;
}
.fa-banner b { font-size: 13px; letter-spacing: .06em; }
.fa-banner span { font-size: 22px; font-weight: 800; line-height: 1.15; }
.fa-banner::after {
  content: ""; position: absolute; right: 12px; bottom: 12px; width: 30px; height: 4px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 14px 4px no-repeat,
    radial-gradient(circle 2px, currentColor 95%, transparent) 18px 0 / 4px 4px no-repeat,
    radial-gradient(circle 2px, currentColor 95%, transparent) 26px 0 / 4px 4px no-repeat;
  border-radius: 9px;
}
.fa-lic { width: 150px; padding: 11px 13px; border-radius: 12px; display: grid; }
.fa-lic small { font-size: 10px; letter-spacing: .14em; font-weight: 800; }
.fa-lic b { font-size: 20px; font-weight: 800; margin-top: 4px; line-height: 1.1; }
.fa-lic span { font-size: 11px; font-weight: 600; }
.fa-reel { width: 44px; height: 78px; border-radius: 10px; flex: none; display: grid; place-items: center; }
.fa-reel svg { width: 18px; height: 18px; }

/* A voucher with a dashed edge. The code uses the loaded mono weight (500). */
.fa-voucher {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px;
  background: var(--card); border: 2px dashed var(--c); box-shadow: var(--sh2);
}
.fa-voucher .fa-big { font-size: 26px; }
.fa-voucher span:last-child { display: grid; font-size: 11px; color: var(--muted); font-weight: 700; }
.fa-voucher code { font-family: var(--mono); font-weight: 500; font-size: 13px; color: var(--ink); }

/* An on/off switch, switched on. */
.fa-toggle { position: relative; flex: none; width: 52px; height: 30px; border-radius: 99px; background: var(--cs); box-shadow: var(--sh2); }
.fa-toggle::after { content: ""; position: absolute; right: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; }

/* Horizontal revenue bars, one per brand. */
.fa-hbars { display: grid; gap: 6px; width: 150px; }
.fa-hbars i { display: flex; align-items: center; gap: 6px; font-style: normal; font-size: 11px; font-weight: 800; color: var(--muted); }
.fa-hbars i::after { content: ""; height: 9px; border-radius: 9px; width: var(--w); background: var(--c); }
.fa-hbars i:nth-child(2)::after { background: var(--blue); }
.fa-hbars i:nth-child(3)::after { background: var(--orange); }

.fa-qr { display: block; flex: none; width: 58px; height: 58px; padding: 4px; border-radius: 8px; background: #fff; fill: #0A1224; box-shadow: var(--sh2); }
.fa-arrow { color: var(--ct); font-weight: 800; font-size: 18px; }
.fa-svg { display: block; flex: none; }
.fa-big { font-size: 34px; font-weight: 800; letter-spacing: -.04em; color: var(--ct); line-height: 1.25; }

/* ---- narrow cards ------------------------------------------------------------
   Container widths seen: about 290px on a wide desktop, 250 at 1100px, 229 at
   1024px and 194 at 901px (two cards beside the sticky heading), 244–338 on
   phones. Step down in three stages so nothing is ever cut off. */
@container (max-width: 285px) {
  .fa { gap: 8px; padding: 0 10px; }
  .fa .fa-x { display: none; }   /* .fa beats svg.fa-tile's display:block */
}
@container (max-width: 250px) {
  .fa-chip { font-size: 11px; padding: 5px 8px; gap: 5px; }
  .fa-chip small { font-size: 10px; }
  .fa-card { padding: 8px 10px; min-width: 0; }
  .fa-tile.lg { width: 50px; height: 50px; border-radius: 15px; font-size: 21px; }
  svg.fa-tile.lg { padding: 14px; }
  .fa::after { font-size: 24px; }
}
@container (max-width: 215px) {
  .fa { gap: 6px; padding: 0 8px; }
  .fa > * { zoom: .86; }
}

/* ---- phones: lighter pictures, so the page is not screens longer ------------ */
@media (max-width: 640px) {
  .fa { height: auto; min-height: 72px; padding-top: 6px; padding-bottom: 6px; margin-bottom: 12px; }
  .fa-card { gap: 4px; padding-top: 7px; padding-bottom: 7px; }
  .fa::after { display: none; }
  .fa > * { zoom: .88; }
}

@media (prefers-reduced-motion: reduce) {
  .fa > *, .fi { transition: none; }
  .fi:hover .fa > * { transform: none; }
}