/* IBM PLEX, SELF-HOSTED, AND ONE FINDING ABOUT IT.
 *
 * The direction is Clay + Glass and the typeface is IBM Plex -- those are not
 * alternatives; both Clay + Glass files declare only var(--font-sans) and
 * inherit the family from the design system.
 *
 * THE BUNDLE SHIPS ONE WEIGHT UNDER FOUR NAMES. IBMPlexSans-400/500/600/700
 * -latin.woff2 are byte-identical -- same md5, same 40,240 bytes -- in the
 * repo and in the handoff. The design system declares four @font-face blocks
 * pointing at what is actually one file, so every heading in its own
 * prototypes has been rendering synthetic bold and nobody saw it.
 *
 * So: one Sans file, one Mono, and a weight RANGE on the face. If the file is
 * variable the browser uses real weights; if it is static it synthesises,
 * which is what the design system already does. Either way we ship 50 KB
 * rather than 170 KB of the same bytes four times.
 *
 * font-display: swap -- text is readable immediately and reflows when the face
 * lands, which on Ooredoo 4G in a mall is the right trade.
 */
@font-face {
  font-family: "IBM Plex Sans";
  src: url(/fonts/IBMPlexSans-400-latin.woff2) format("woff2");
  /* 100-700, NOT 100-900. Plex Sans variable tops out at 700, and a request
     for 800 clamps there -- with synthesis off that renders quietly LIGHTER
     than before rather than failing loudly. */
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url(/fonts/IBMPlexMono-500-latin.woff2) format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* damga.qa — the landing page, in the Clay + Glass register.
 *
 * WHY THIS LOOKS NOTHING LIKE THE FIRST VERSION. The first build used the flat
 * plum surface from the consumer app: dark ground, 1px hairlines, quiet cards.
 * That is the wrong register. `Damga Clay + Glass.dc.html` splits the brand in
 * two -- "personality where it converts, calm where it retains" -- and puts
 * MARKETING HERO SURFACES on the clay side, with the dashboard on the calm one.
 * Its closing line sends the marketing site to the earlier exploration:
 * "It is the right answer for the card and the marketing site."
 *
 * So the recipe here is taken from `Damga Clay + Glass v1.dc.html` rather than
 * approximated:
 *
 *   the ground   a spectrum, 152deg, plum -> wine -> seal -> flame -> ochre
 *   clay         coloured all the way through, radius 26px, and THREE shadows
 *                mixed from the surface's OWN hue -- outer cast, inset shade
 *                lower-right, inset highlight upper-left. No neutral grey.
 *   glass        overlays only, translucent, tinted toward cream, blurred --
 *                and it only reads properly against a saturated ground, which
 *                is the reason glassmorphism never worked on off-white.
 *
 * A CSS file rather than a <style> block, because the site's CSP is
 * style-src 'self' and inline styles fail silently to an unstyled page.
 */

:root {
  --plum: #3b0f22;
  --plum-deep: #1c040c;
  --wine: #7a1428;
  --seal: #c4271b;
  --flame: #e0662a;
  --ochre: #edaa3c;
  --teal: #0f6a6c;
  --cream: #fdf4e6;
  --cream-lit: #fff6e6;

  --ink: var(--cream);
  --muted: rgba(253, 244, 230, 0.80);
  --faint: rgba(253, 244, 230, 0.60);

  --wrap: 70rem;
  --gutter: clamp(1.15rem, 5vw, 3.5rem);
  --radius: 26px;

  --t-h1: clamp(2.1rem, 7vw, 4.2rem);
  --t-h2: clamp(1.65rem, 4.6vw, 2.8rem);
  --t-h3: clamp(1.05rem, 2.2vw, 1.32rem);
  --t-lede: clamp(1rem, 2vw, 1.22rem);
  --t-body: clamp(0.95rem, 1.6vw, 1.04rem);
  --t-label: clamp(0.64rem, 1.15vw, 0.71rem);

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "IBM Plex Sans", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Any weight the face cannot serve now renders wrong VISIBLY instead of being
   papered over by a fake bold. The bundle shipped four identical files under
   four weight names and nobody noticed for exactly this reason. */
:root { font-synthesis-weight: none; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }

/* THE GROUND IS THE BRAND. The ramp runs down the whole page rather than
   sitting behind one hero, which is what makes the glass above it read. */
body {
  margin: 0;
  color: var(--ink);
  font: 400 var(--t-body)/1.62 var(--sans);
  background: #2c0a1b;
  background-image:
    /* A glow, not a wash. At .30 it lifted the whole top of the page to
       brown and lost the deep plum the ramp starts on. */
    radial-gradient(circle at 88% 2%, rgba(237, 170, 60, 0.16), rgba(237, 170, 60, 0) 38%),
    linear-gradient(152deg, #2c0a1b 0%, #5e1226 28%, #a5201c 58%, #dd6127 82%, #edaa3c 100%);
  /* NOT background-attachment: fixed. That pins the ramp to the VIEWPORT, so
     it repaints plum-to-ochre in every screenful and the page below the hero
     is uniformly dark -- which is the opposite of the direction, where the
     spectrum runs down the whole document and the foot lands on ochre. It also
     made the footer's dark text sit on a dark ground and vanish. */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* --- clay ------------------------------------------------------------------
 * One rule per hue. Every shadow is mixed from the surface's own colour, so a
 * slab casts its own light rather than a hand-picked grey. */
.clay { border-radius: var(--radius); border: 0; }

.clay,
.clay[data-hue="wine"] { --h: var(--wine); }
.clay[data-hue="seal"]  { --h: var(--seal); }
.clay[data-hue="flame"] { --h: var(--flame); }
.clay[data-hue="ochre"] { --h: var(--ochre); }
.clay[data-hue="teal"]  { --h: var(--teal); }
.clay[data-hue="plum"]  { --h: var(--plum); }

.clay {
  background: var(--h);
  background-image: linear-gradient(
    155deg,
    color-mix(in oklch, var(--h) 82%, var(--cream-lit)),
    var(--h) 60%,
    color-mix(in oklch, var(--h) 78%, var(--plum-deep))
  );
  box-shadow:
    0 22px 42px -20px color-mix(in oklch, var(--h) 55%, var(--plum-deep)),
    inset -6px -6px 13px color-mix(in oklch, var(--h) 62%, var(--plum-deep)),
    inset 6px 6px 13px color-mix(in oklch, var(--h) 58%, var(--cream-lit));
}
.clay[data-hue="ochre"] { color: var(--plum); }
.clay[data-hue="ochre"] .muted,
.clay[data-hue="ochre"] p { color: rgba(44, 10, 27, 0.78); }

/* --- glass: overlays only, never a scrolling surface ----------------------- */
.glass {
  background: linear-gradient(135deg, rgba(253, 244, 230, 0.20), rgba(253, 244, 230, 0.07));
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  /* .4, matching the LANDING artboard rather than the palette file's .34.
     The artboard is the specification; the palette file is the intent. */
  border: 1px solid rgba(253, 244, 230, 0.4);
  box-shadow: 0 20px 40px -20px rgba(44, 10, 27, 0.7), inset 0 1px 0 rgba(253, 244, 230, 0.45);
}

/* --- reveal: transform only, never opacity --------------------------------
 * The first version faded in, and the gate failed it: nine elements sat at
 * opacity 0 waiting to be scrolled into view. That is invisible to a fast
 * scroll, a screenshot and a link preview. Nothing here is hidden pending an
 * event; the motion is movement only. */
.reveal { opacity: 1; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 12% cover 34%; }
  }
}
@keyframes reveal { from { transform: translateY(18px); } to { transform: none; } }

/* --- chrome ---------------------------------------------------------------- */
.bar {
  position: sticky; top: clamp(0.5rem, 2vw, 1rem); z-index: 20;
  width: min(var(--wrap), calc(100% - 2 * var(--gutter)));
  margin: clamp(0.5rem, 2vw, 1rem) auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.65rem 0.7rem 0.65rem 1rem;
  border-radius: 999px;
}
.mark { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; text-decoration: none; }
.mark span[aria-hidden] {
  width: 1.55rem; height: 1.55rem; border-radius: 50%;
  background-image: linear-gradient(155deg, #f6c56a, var(--ochre) 55%, #dd8f2a);
  box-shadow: inset 2px 2px 4px rgba(255, 246, 230, 0.6), inset -2px -2px 4px rgba(160, 90, 16, 0.5);
  color: var(--plum); display: grid; place-items: center; font-size: 0.95rem; font-weight: 800;
}
.bar-cta {
  font-weight: 600; font-size: 0.88rem; text-decoration: none; white-space: nowrap;
  padding: 0.6rem 1.1rem; border-radius: 999px; color: var(--plum);
  background-image: linear-gradient(160deg, #f6c56a, var(--ochre) 55%, #dd8f2a);
  box-shadow: 0 6px 14px -4px rgba(196, 39, 27, 0.7), inset 0 -2px 4px rgba(59, 15, 34, 0.4), inset 0 2px 3px rgba(253, 244, 230, 0.6);
}

.eyebrow {
  font: 600 var(--t-label)/1 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(253, 244, 230, 0.72);
  margin: 0 0 0.9rem;
}
h1 { font-size: var(--t-h1); line-height: 1.03; letter-spacing: -0.04em; font-weight: 600; margin: 0 0 0.75rem; text-wrap: balance; }
h2 { font-size: var(--t-h2); line-height: 1.07; letter-spacing: -0.032em; font-weight: 600; margin: 0 0 0.7rem; text-wrap: balance; }
h3 { font-size: var(--t-h3); line-height: 1.26; font-weight: 600; margin: 0 0 0.45rem; }
p { margin: 0 0 0.9rem; }
.lede { font-size: var(--t-lede); color: var(--muted); max-width: 46ch; }
.fine { font-size: 0.85rem; color: var(--faint); }
.meta { font: 500 0.74rem/1.45 var(--mono); letter-spacing: 0.05em; color: rgba(253, 244, 230, 0.62); margin: 0.7rem 0 0; }

/* --- hero ------------------------------------------------------------------ */
.hero {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: center; max-width: var(--wrap); margin: 0 auto;
  padding: clamp(2.6rem, 7vw, 5rem) var(--gutter) clamp(2rem, 5vw, 3.5rem);
}
.hero-shot img {
  border-radius: 30px; max-width: min(100%, 19rem); margin-inline: auto;
  box-shadow: 0 40px 76px -26px rgba(20, 4, 12, 0.9), inset 0 1px 0 rgba(253, 244, 230, 0.42);
}
.cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.5rem 0 1rem; }
/* Every call to action gets the shape, not only the ones inside .cta. The
   first version scoped this to .cta and .start-cta, so the price card's button
   kept the gold fill and lost its padding and radius -- it rendered as a line
   of text with a gradient behind it. */
.primary, .secondary, .cta a, .start-cta .primary {
  display: inline-block;
  text-decoration: none; text-align: center; font-weight: 600; font-size: 1rem;
  padding: 0.9rem 1.5rem; border-radius: 999px;
}
.primary {
  color: var(--plum);
  background-image: linear-gradient(160deg, #f6c56a, var(--ochre) 55%, #dd8f2a);
  box-shadow: 0 8px 18px -5px rgba(196, 39, 27, 0.75), inset 0 -2px 5px rgba(59, 15, 34, 0.45), inset 0 2px 4px rgba(253, 244, 230, 0.6);
}
.secondary {
  color: var(--cream);
  background: linear-gradient(135deg, rgba(253, 244, 230, 0.18), rgba(253, 244, 230, 0.06));
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(253, 244, 230, 0.24);
}

/* --- ticker ---------------------------------------------------------------- */
.ticker { overflow: hidden; padding: 0.8rem 0; background: rgba(28, 4, 12, 0.28); border-block: 1px solid rgba(253, 244, 230, 0.14); }
.ticker-run {
  display: flex; gap: 1.7rem; width: max-content;
  font: 500 0.8rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(253, 244, 230, 0.7); animation: slide 46s linear infinite;
}
.ticker-run span:nth-child(even) { color: var(--ochre); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-run { animation: none; } }

/* --- bands ----------------------------------------------------------------- */
.band { max-width: var(--wrap); margin: 0 auto; padding: clamp(2.8rem, 7vw, 5rem) var(--gutter); }
.band.alt > * { max-width: var(--wrap); margin-inline: auto; }

.steps { list-style: none; margin: 2.1rem 0 0; padding: 0; display: grid; gap: 1.1rem;
         grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.steps.compact { margin-top: 0; grid-template-columns: 1fr; }
.step, .card, .tile { padding: clamp(1.2rem, 2.6vw, 1.7rem); }
.step .n, .tile .n { display: inline-block; font: 700 0.72rem/1 var(--mono); letter-spacing: 0.12em; opacity: 0.8; margin-bottom: 0.75rem; }
.step p, .tile p, .card p { color: rgba(253, 244, 230, 0.84); margin: 0; }

.grid { display: grid; gap: 1.1rem; margin-top: 2.1rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.62rem 0; border-bottom: 1px solid rgba(253, 244, 230, 0.16); }
.rows li:last-child { border-bottom: 0; }
.rows span { color: rgba(253, 244, 230, 0.66); font-size: 0.87rem; }
.rows b { font-weight: 600; text-align: end; }
.clay[data-hue="ochre"] .rows li { border-bottom-color: rgba(44, 10, 27, 0.18); }
.clay[data-hue="ochre"] .rows span { color: rgba(44, 10, 27, 0.66); }

/* --- frames ---------------------------------------------------------------- */
.frames { display: grid; gap: clamp(1.3rem, 4vw, 2.6rem); margin-top: 2.1rem; align-items: center;
          grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.frame { margin: 0; }
.frame img { border-radius: 28px; max-width: min(100%, 17rem); margin-inline: auto;
             box-shadow: 0 30px 56px -24px rgba(20, 4, 12, 0.85), inset 0 1px 0 rgba(253, 244, 230, 0.3); }
.frame figcaption { margin-top: 0.9rem; font: 500 0.76rem/1.4 var(--mono); letter-spacing: 0.05em; color: rgba(253, 244, 230, 0.66); text-align: center; }
.frame-note { padding: clamp(1.2rem, 2.6vw, 1.8rem); }
.frame-note h3 { font-size: var(--t-h3); line-height: 1.3; margin-bottom: 0.75rem; }
.frame-note p { color: rgba(253, 244, 230, 0.84); margin: 0; }

/* --- start ----------------------------------------------------------------- */
.start-grid { display: grid; gap: 1.2rem; margin-top: 2.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.start-cta { padding: clamp(1.3rem, 3vw, 1.9rem); align-self: start; }
.start-cta .primary { display: block; margin: 1.1rem 0 0.85rem; }
.start-cta p { color: rgba(253, 244, 230, 0.84); }

/* --- foot ------------------------------------------------------------------ */
.foot { max-width: var(--wrap); margin: 0 auto; padding: clamp(2rem, 5vw, 3rem) var(--gutter) clamp(2.5rem, 6vw, 4rem); color: rgba(44, 10, 27, 0.72); font-size: 0.9rem; }
.foot .mark { margin-bottom: 0.85rem; color: var(--plum); }
.foot p { margin: 0 0 0.35rem; }

a:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; border-radius: 0.4rem; }

/* ===========================================================================
   THE PARTS THAT MAKE IT AN OBJECT RATHER THAN A DOCUMENT
   ---------------------------------------------------------------------------
   The first two versions were text in boxes. The design is not: its hero is a
   loyalty card rendered as a physical thing, with wax-seal discs pressed into
   ochre clay. That card IS the product, and a page about it that does not show
   it is a page about nothing.
   Everything below is drawn in CSS. No images, which is also how the design
   does it.
   =========================================================================== */

/* THE MARK, not a circle. It was a gradient disc standing in for a logo that
   exists: the design system generates this path from the brand sheet's own
   units, and the squared corner is always bottom-left. currentColor, so the
   mark takes the ink of whatever it sits in -- ochre on the dark register,
   plum in the footer where the ground has reached ochre. */
.mark .pip {
  width: 1.6rem; height: 1.6rem; flex: none; display: inline-block;
  color: var(--ochre);
}
.foot .mark .pip { color: var(--plum); }
.bar { gap: 0.75rem; }
.bar-nav { display: none; gap: 1.4rem; font-size: 0.86rem; }
.bar-nav a { text-decoration: none; color: rgba(253, 244, 230, 0.82); white-space: nowrap; }
.bar-nav a:hover { color: var(--cream); }
@media (min-width: 56rem) { .bar-nav { display: flex; } }

h1 em { font-style: normal; color: var(--ochre); }

.stats { list-style: none; display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 4vw, 2.6rem); margin: 1.8rem 0 1.1rem; padding: 0; }
.stats li { display: flex; flex-direction: column; gap: 0.15rem; }
.stats b { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--ochre); }
.stats span { font: 500 0.7rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(253, 244, 230, 0.62); max-width: 9rem; }

/* --- the phone, and the card inside it ------------------------------------ */
.phone-wrap { display: flex; justify-content: center; }
.phone {
  width: min(100%, 21rem); padding: 0.9rem;
  border-radius: 34px;
  background-image: linear-gradient(155deg, #4a1329, #2c0a1b 55%, #180309);
  box-shadow:
    0 46px 88px -30px rgba(12, 2, 8, 0.92),
    inset -8px -8px 18px rgba(20, 4, 12, 0.7),
    inset 8px 8px 18px rgba(122, 20, 40, 0.42);
}
.phone-chrome { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0.5rem 0.85rem; font: 500 0.62rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(253, 244, 230, 0.5); }
.phone-chrome .dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--seal); box-shadow: 0 0 8px rgba(196, 39, 27, 0.9); flex: none; }
.phone-chrome .live { margin-inline-start: auto; color: var(--ochre); }

.loyalty { padding: 1.15rem 1.15rem 1rem; }
.loyalty-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.loyalty .shop { font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(44, 10, 27, 0.68); }
.loyalty .tier {
  font: 700 0.56rem/1 var(--mono); letter-spacing: 0.13em; text-transform: uppercase;
  padding: 0.32rem 0.55rem; border-radius: 999px; color: var(--cream);
  background-image: linear-gradient(155deg, #8e1a2f, #5e1226);
  box-shadow: inset 0 1px 0 rgba(253, 244, 230, 0.28);
}
.loyalty-reward { font-size: 1.32rem; line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; color: var(--plum); margin: 0.55rem 0 1rem; }

/* THE DISCS. Filled ones are wax-seal discs sitting proud of the clay; empty
   ones are wells pressed INTO it -- inset shadow rather than outer, which is
   what makes the card read as a physical object rather than a list of circles. */
.discs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.55rem; }
.disc {
  aspect-ratio: 1; border-radius: 50%;
  background-image: linear-gradient(155deg, color-mix(in oklch, var(--ochre) 86%, #b9761f), color-mix(in oklch, var(--ochre) 70%, #a05a10));
  box-shadow: inset -3px -3px 7px rgba(120, 66, 8, 0.62), inset 3px 3px 7px rgba(255, 246, 230, 0.5);
}
.disc.on {
  background-image: linear-gradient(155deg, #e8533c, var(--seal) 55%, #91170f);
  box-shadow: 0 5px 11px -3px rgba(120, 12, 6, 0.7), inset -2px -2px 5px rgba(90, 8, 4, 0.6), inset 3px 3px 6px rgba(255, 190, 175, 0.55);
}
.discs.small { grid-template-columns: repeat(10, 1fr); gap: 0.3rem; margin: 0.8rem 0; }

/* The stamp landing. Runs once on load -- the page's one moment of movement,
   because that moment is the product. */
.disc.landing { animation: land 900ms cubic-bezier(0.22, 0.9, 0.28, 1) 700ms both; }
@keyframes land {
  0% { transform: scale(0.1) translateY(-26px); opacity: 0; }
  55% { transform: scale(1.16) translateY(0); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .disc.landing { animation: none; } }

.loyalty-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed rgba(44, 10, 27, 0.28); }
.loyalty-foot span { font-size: 0.82rem; color: rgba(44, 10, 27, 0.78); }
.loyalty-foot b { font-size: 1.05rem; letter-spacing: 0.16em; color: var(--plum); }

.phone-btn {
  margin-top: 0.9rem; text-align: center; font-weight: 600; font-size: 0.92rem;
  padding: 0.8rem 1rem; border-radius: 16px; color: var(--plum);
  background-image: linear-gradient(160deg, #f6c56a, var(--ochre) 55%, #dd8f2a);
  box-shadow: 0 8px 16px -5px rgba(160, 90, 16, 0.6), inset 0 -2px 4px rgba(59, 15, 34, 0.4), inset 0 2px 3px rgba(253, 244, 230, 0.6);
}
.phone-note { text-align: center; margin: 0.7rem 0 0.15rem; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(253, 244, 230, 0.42); }

/* --- the router ------------------------------------------------------------ */
.route { padding: clamp(1.3rem, 3vw, 1.9rem); display: flex; flex-direction: column; }
.route-tag { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; margin: 0 0 0.6rem; }
.route h3 { font-size: clamp(1.3rem, 3vw, 1.7rem); letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.route > p { margin-bottom: 1.1rem; }
.route-go { margin-top: auto; font-weight: 600; text-decoration: none; display: inline-block; padding-top: 0.9rem; }

.mini { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.7rem; }
.mini li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.93rem; line-height: 1.5; }
.mini li span {
  flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: grid; place-items: center; font: 700 0.68rem/1 var(--mono);
  background: rgba(253, 244, 230, 0.16); box-shadow: inset 0 1px 0 rgba(253, 244, 230, 0.3);
}
.clay[data-hue="ochre"] .mini li span { background: rgba(44, 10, 27, 0.16); }

/* --- the till panel -------------------------------------------------------- */
.frame-side { display: grid; gap: 1.1rem; align-content: center; }
.anatomy { padding: clamp(1.2rem, 2.6vw, 1.7rem); }
.till { margin-top: 0.9rem; border-radius: 18px; padding: 1rem; background: rgba(20, 4, 12, 0.45); box-shadow: inset 0 1px 0 rgba(253, 244, 230, 0.14); }
.till-head, .till-foot { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(253, 244, 230, 0.5); }
.till-head .ok { color: #7fd8a0; }
.till-big { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; margin: 0.7rem 0 0; }
.till-big em { font-style: normal; color: var(--ochre); }
.till-foot .undo { color: var(--ochre); }
.till-foot .next { color: rgba(253, 244, 230, 0.72); }

/* --- price ----------------------------------------------------------------- */
.price-grid { display: grid; gap: 1.2rem; margin-top: 2.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.price-card { padding: clamp(1.4rem, 3vw, 2rem); }
.price-tag { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.72; margin: 0 0 0.5rem; }
.price-num { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 1.1rem; }
.price-num b { font-size: clamp(2.6rem, 8vw, 4rem); line-height: 1; letter-spacing: -0.045em; font-weight: 600; }
.price-num span { font: 500 0.72rem/1.3 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.72; max-width: 8rem; }
.ticks { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 0.55rem; }
.ticks li { position: relative; padding-inline-start: 1.4rem; font-size: 0.94rem; }
.ticks li::before { content: "✓"; position: absolute; inset-inline-start: 0; font-weight: 700; opacity: 0.8; }

/* --- faq ------------------------------------------------------------------- */
.faq { margin-top: 2rem; display: grid; gap: 0.7rem; }
.faq details {
  border-radius: 18px; padding: 0.2rem 1.15rem;
  background: linear-gradient(135deg, rgba(253, 244, 230, 0.16), rgba(253, 244, 230, 0.06));
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(253, 244, 230, 0.2);
}
.faq summary { cursor: pointer; list-style: none; padding: 1rem 0; font-weight: 600; font-size: 1rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; font-weight: 400; opacity: 0.65; flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 1.05rem; color: rgba(253, 244, 230, 0.85); font-size: 0.95rem; }

/* --- foot ------------------------------------------------------------------ */
.foot-grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); margin-bottom: 1.6rem; }
.foot h4 { font: 600 0.66rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 0.8rem; opacity: 0.62; }
.foot a { display: block; text-decoration: none; margin-bottom: 0.45rem; }
.foot a:hover { text-decoration: underline; }
.foot-fine { border-top: 1px solid rgba(44, 10, 27, 0.22); padding-top: 1.1rem; }