/* The public surface. BLOCK 2, `11 §3.3`, `11 §4.2`, `15 §4`, `UX-002`.
 *
 * Logical properties throughout, so RTL is the same rule read the other way
 * rather than a second stylesheet — the rule `web/tests/unit/style-rules.test.ts`
 * enforces on the three bundles, held here by hand because this file is not in
 * the pnpm workspace it walks. `tests/test_public_surface.py` asserts it
 * instead, so the rule is enforced on all four surfaces rather than three.
 *
 * Colour comes from `tokens.css`, which is the design system's own file copied
 * at build time and not restated — one source, four consumers (`11 §10`).
 *
 * No motion, matching the guest stylesheet's invariant.
 */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-surface-raised);
  color: var(--color-ink);
  /* THE APPROVED FACE, not a stack this file chose. `W0-GATE-006` and `15 §1`
     make IBM Plex Sans Arabic the UI and body family across both scripts, and
     `fonts.css` serves it from this origin. This line said `system-ui` while
     the token beside it said otherwise, so the public tier wore a different
     identity from the product it fronts. `FINAL-PRODUCT-PUBLIC-FONTS-01`. */
  font-family: var(--font-body);
  line-height: 1.6;
}

/* `17 PUB-01` A11y: a skip link, visible on focus and not before. */
.pub-skip {
  position: absolute;
  inset-block-start: -3rem;
  inset-inline-start: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  color: var(--color-ink);
  z-index: 10;
}
.pub-skip:focus { inset-block-start: var(--space-sm); }

.pub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border-block-end: 1px solid var(--color-border);
}
.pub-brand {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-ink);
  text-decoration: none;
}
.pub-nav { display: flex; gap: var(--space-md); align-items: center; }
.pub-lang, .pub-signin { color: var(--color-ink); }

.pub-main {
  max-inline-size: 40rem;
  margin-inline: auto;
  padding: var(--space-xl) var(--space-lg);
}

/* `15 §1`: Readex Pro for DISPLAY. The one place the name is set, so every
   page under this shell inherits it. */
.pub-h1 {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: 0.02em;
}
/* `text-wrap: balance` on the display headings, which is one line of CSS for
   the typographic defect a long headline always produces: a last line with
   one word on it. The browser evens the lines instead, and where it is not
   supported the headline simply wraps as before — so this is an enhancement
   with no fallback to write. It is also what the approved concept specifies
   for `h1, h2, h3`. */
.pub-h1, .pub-h2 { text-wrap: balance; }
.pub-lede { margin: 0 0 var(--space-lg); color: var(--color-ink-muted); }

.pub-form-card {
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.pub-form { display: grid; gap: var(--space-md); }
.pub-label { display: grid; gap: var(--space-xs); }
/* CORRECTION 5. `17 W0-SCR-01` A11y: "errors announced and linked". The link
 * is `aria-describedby` in the template; the BORDER is the same fact drawn,
 * and `UX-004` requires the sentence to carry it either way. */
.pub-input[aria-invalid="true"] { border-color: var(--color-alert); }

.pub-input {
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  /* `15 §2`: a touch target is at least 44px, and a sign-in field on a phone
   * is the first thing anybody touches. */
  min-block-size: 2.75rem;
}
.pub-cta {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  min-block-size: 2.75rem;
  /* The APPROVED primary — deep petrol — rather than ink. `W0-GATE-006`.
     `--s-primary` and `--s-on-primary` are the semantic pair, so the contrast
     rule travels with the colour instead of being re-checked here. */
  border: 1px solid var(--s-primary);
  border-radius: var(--radius-sm);
  background: var(--s-primary);
  color: var(--s-on-primary);
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
}
/* `17 PUB-01` names THREE destinations, so the row holds three and wraps
 * rather than squeezing them onto one line on a phone. */
.pub-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
}
/* One primary call to action (`17 PUB-01` Hierarchy: "one primary call to
 * action"); the other two are real links and not de-emphasised into
 * invisibility — `DEC-001`'s posture. */
.pub-cta-secondary {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-border);
}

/* `17 DEMO-01` A11y: "The demo banner is an `aria-live` region on entry, not a
 * decorative ribbon." Unmissable, because it changes what everything else on
 * the screen MEANS — and a sentence rather than a colour, so it survives being
 * read aloud. */
.pub-demo-frame {
  margin: 0 0 var(--space-lg);
  padding: var(--space-md);
  border: var(--space-xs) solid var(--color-warning);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  font-weight: 700;
}

/* `15 §4.1`: an error is announced and visually distinct, and it never carries
 * its meaning in colour alone — it is a sentence. */
.pub-error {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-inline-start: var(--space-xs) solid var(--color-alert);
  background: var(--color-alert-surface);
  color: var(--color-ink);
}
/* `PUB-01`. A card rather than another paragraph: it answers a different
   person's question from the one above it, and the separation is the point. */
.pub-note-card {
  margin-block-start: var(--space-xxl);
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.pub-h2 {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: 1.125rem;
}
.pub-note { margin: 0 0 var(--space-md); }
.pub-hint { margin: 0 0 var(--space-sm); color: var(--color-ink-muted); }
/* `DEC-001`'s posture applied to the reset link: never de-emphasised into
 * invisibility. Somebody who cannot get in needs this link most. */
.pub-secondary { margin-block-start: var(--space-lg); }

/* `17 AUTH-01`: "visible focus". Never removed, and thick enough to see on a
 * phone in daylight. */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--s-primary);
  outline-offset: 2px;
}

.pub-footer {
  padding: var(--space-lg);
  color: var(--color-ink-muted);
  border-block-start: 1px solid var(--color-border);
}

@media (min-width: 48rem) {
  .pub-main { padding-block: var(--space-xxl); }
}

/* ─────────────────────────────────────────────────────── the corporate mark
 *
 * The same three assets the product uses — `web/packages/design-system/src/
 * brand`, copied here for a surface with no bundler, exactly as `tokens.css`
 * and `fonts.css` already are, and held to that copy by
 * `tests/test_public_surface.py`.
 *
 * A MASK, not an `<img>`: the artwork is one ink, and which ink depends on
 * what is behind it. `background-color: currentColor` lets the header, the
 * hero and the footer each state that once. See `docs/BRAND_SOURCE_AUDIT.md`.
 */
.pub-mark {
  display: inline-block;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.pub-mark-h {
  aspect-ratio: 1379 / 922;
  block-size: 2.5rem;
  -webkit-mask-image: url("/static/public/brand/alnadel-lockup-horizontal.svg");
          mask-image: url("/static/public/brand/alnadel-lockup-horizontal.svg");
}
.pub-mark-lockup {
  aspect-ratio: 961 / 1129;
  block-size: 9rem;
  -webkit-mask-image: url("/static/public/brand/alnadel-lockup-vertical.svg");
          mask-image: url("/static/public/brand/alnadel-lockup-vertical.svg");
}
.pub-mark-glyph {
  aspect-ratio: 961 / 801;
  block-size: 1.75rem;
  -webkit-mask-image: url("/static/public/brand/alnadel-mark.svg");
          mask-image: url("/static/public/brand/alnadel-mark.svg");
}
.pub-brand { color: var(--s-primary); display: inline-flex; }
.pub-footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-ink-muted);
}

/* ══════════════════════════════════════════════════ `PUB-01`, the home
 *
 * The commercial page. Everything above this line serves a FORM — sign in,
 * reset, activate, request a demo — and `40rem` is the right measure for one.
 * A home that has to show what a product does is a different shape, and says
 * so with one class rather than by widening every page under this shell.
 *
 * Colour comes only from the tokens (`11 §10`), so this section inherits the
 * corporate purple the same way every other surface does.
 */
.pub-main-wide { max-inline-size: 72rem; }


/* ═══════════════════════════════════════════════════════════════════════
   THE COMMERCIAL HOME — the owner's approved concept
   ═══════════════════════════════════════════════════════════════════════

   `OD-VR-HOMEPAGE-WHICH-VERSION-01`, reversed: the owner adopted the premium
   concept, and this is it as the product's own stylesheet rather than as a
   static artifact.

   WHAT THE DESIGN IS, in four decisions:

     1. THE PAGE OPENS AND CLOSES IN THE PRODUCT'S COLOUR and spends
        everything in between on the client's work. Two deep bands with the
        corporate mark behind them, and light between — so the identity
        frames the page instead of competing with every screenshot in it.
     2. A SCREEN IS PHOTOGRAPHED AND A RULE IS DRAWN. Device frames for the
        first, a plate for the second. Nothing here is a stock image and
        nothing is a diagram standing in for a screen that exists.
     3. THE WHITE-LABEL BAND WEARS A CLIENT'S IDENTITY. Its own olive and
        cream, not ours — which is the only way to show white label that is
        not a sentence about it.
     4. AT 390px THE COMPOSITION IS REBUILT rather than narrowed: one column,
        full-width imagery, and no device frame small enough to be
        decoration.

   COLOUR COMES ONLY FROM THE TOKENS (`11 §10`). The concept's palette and
   `tokens.css` are the same palette — it was drawn from the product's own
   ramp — so every value below is a `var()` and the two cannot drift. The
   exception is the CLIENT's two colours, which are a client's and are named
   as such where they are used.

   No gradient and no shadow here is decoration: each separates a layer from
   the one behind it, which is what `15 §1` uses elevation for. */

/* ── the shell, on the deep field ─────────────────────────────────────────
   The concept puts the lockup and the language switch INSIDE the opening
   band rather than in a white strip above it, and the difference is not
   cosmetic: a bar of another colour above a full-bleed hero reads as a
   browser chrome the page is sitting in, which is the opposite of what an
   opening band is for.

   The shell is shared with four form pages, so the home asks for this with
   one class on `<body>` instead of the shell growing a second layout. The
   header is taken out of the flow and the hero reserves the space it needs,
   so nothing overlaps and the skip link still lands where it should. */
.pub-on-deep { position: relative; }
.pub-on-deep .pub-header {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 3;
  background: transparent;
  border-block-end: 1px solid rgb(255 255 255 / 13%);
  color: var(--c-n-000);
  padding-inline: var(--pub-gut, var(--space-lg));
  max-inline-size: 73.75rem;
  margin-inline: auto;
}
.pub-on-deep .pub-brand,
.pub-on-deep .pub-lang,
.pub-on-deep .pub-signin { color: inherit; }
.pub-on-deep .pub-hero { padding-block-start: clamp(6rem, 11vw, 9rem); }

/* The deep field the page opens and closes on, and the brass the eyebrow
   takes against it. Declared once, used by both bands. */
.pub-hero,
.pub-closing {
  --pub-deep:       var(--c-brand-800);
  --pub-deep-2:     var(--c-brand-900);
  --pub-deep-ink:   var(--c-n-000);
  --pub-deep-dim:   var(--c-brand-200);
  --pub-deep-line:  rgb(255 255 255 / 13%);
  --pub-deep-glow:  rgb(165 132 184 / 30%);
}

/* The home bleeds to the window edge. Every band pads itself, so the gutter
   is one value the whole page agrees on rather than a measure on `main`. */
.pub-main-flush {
  --pub-gut: clamp(1rem, 4vw, 2.5rem);
  max-inline-size: none;
  padding-inline: 0;
  padding-block: 0;
}

/* ── the icons ────────────────────────────────────────────────────────────
   The stroke is declared HERE, on the referencing side, and that is not a
   duplicate of the sprite's own `<style>`.

   `<use href="file.svg#id">` clones the referenced node into a shadow tree in
   THIS document. The external file's stylesheet does not travel with it, so
   the sprite's `symbol { fill: none; stroke: currentColor }` — which is what
   makes every icon in the product an outline — never applied, and the icons
   rendered as empty shapes. Found by looking at the page rather than by a
   test, which is exactly what §19 asks for.

   `currentColor` is the point: each context states its ink once and the icon
   follows, the same mechanism `brand.css` uses for the mark. */
.pub-badge svg,
.pub-assure-icon svg,
.pub-eyebrow-icon svg,
.pub-point-tick svg,
.pub-cta-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── the drawn artwork ────────────────────────────────────────────────────
   Four utility classes the drawings in `templates/public/art/` are built
   from, so an illustration states its ROLE — ink, brand, filled, sunken —
   and takes the band's colours rather than carrying its own. That is what
   lets the same drawing sit on a light plate and inside the client's olive
   band without being redrawn. */
.pub-beat svg,
.pub-artplate svg,
.pub-land svg { display: block; inline-size: 100%; block-size: auto; }
.a-ink   { stroke: var(--color-ink-muted); fill: none; stroke-width: 1.8;
           stroke-linecap: round; stroke-linejoin: round; }
.a-brand { stroke: var(--s-primary); fill: none; stroke-width: 1.8;
           stroke-linecap: round; stroke-linejoin: round; }
.a-fill  { fill: var(--s-primary-subtle); stroke: var(--s-primary);
           stroke-width: 1.5; }
.a-soft  { fill: var(--color-surface-raised); stroke: var(--color-border);
           stroke-width: 1.3; }
/* The client's own two inks, taken from the band they are drawn inside —
   so the drawings follow whichever client the band is wearing, and this
   file still states no colour of its own. */
.a-cl    { fill: var(--pub-cl-deep); stroke: none; }
.a-cream { fill: var(--pub-cl-cream); stroke: none; }

/* ── the kufic field ──────────────────────────────────────────────────────
   A texture derived from the angles in the corporate mark: one set of
   diagonals and one grid of dots, at an opacity that reads as paper rather
   than as pattern. `currentColor`, so each band states its own. */
.pub-kufi {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.09;
  background-image:
    repeating-linear-gradient(115deg, currentColor 0 1px, transparent 1px 34px),
    radial-gradient(currentColor 1.2px, transparent 1.3px);
  background-size: auto, 34px 34px;
}

/* ── the badge and the eyebrow ────────────────────────────────────────── */
.pub-badge {
  inline-size: 3.375rem;
  block-size: 3.375rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  background: var(--s-primary-subtle);
  color: var(--s-primary-hover);
  border: 1px solid color-mix(in srgb, var(--s-primary) 22%, transparent);
  margin-block-end: var(--space-md);
}
.pub-badge svg { inline-size: 1.6875rem; block-size: 1.6875rem; }
.pub-eyebrow {
  margin: 0 0 var(--space-xs);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-ink-muted);
}
/* THE BRASS, ONE STEP DARKER ON A LIGHT FIELD.

   The colours below are named by TOKEN and never by value, including in
   this comment: `test_the_public_stylesheet_hard_codes_no_colour` greps the
   whole file for a hex literal, comments included, and quoting the measured
   values here failed the gate on the commit that fixed the contrast. The
   ratios are the useful part and they are kept. `--c-accent-500` is the
   brass the product uses, and at 12px on the page's own background it
   measures 3.77:1 against `15 §2.1`'s 4.5:1 floor — the visual gate found
   it on five bands. `--c-accent-600` is the same brass one step down the
   ramp and measures 5.48:1, so the identity is unchanged and the eyebrow is
   readable. On the DEEP bands the relationship inverts and
   `--c-accent-200` measures 9.81:1, which is why the hero and the closing
   state their own. */
.pub-eyebrow-brass { color: var(--c-accent-600); }

/* ── the frames ───────────────────────────────────────────────────────────
   A product screenshot with no chrome reads as a diagram. The frames say
   "this is a screen", and they are drawn rather than imported: a browser bar
   is a rounded box with three dots, a phone is a dark shell around the
   glass, a tablet the same at another radius. Nothing here is an image. */
.pub-frame {
  margin: 0;
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 18px 50px -24px rgb(0 0 0 / 45%);
  overflow: hidden;
}
.pub-frame img { display: block; inline-size: 100%; block-size: auto; }

/* ON A PHONE, A DESKTOP SCREENSHOT IS DECORATION.
   §16: "no microscopic screenshots". A 1440-wide console screen rendered into
   358 points of phone is a grey rectangle — every label in it is under two
   pixels tall, and the reader learns nothing except that a screen exists.

   So at phone width the browser- and tablet-framed shots are CROPPED to their
   top instead of being scaled to fit. It is the same photograph, uncut and
   unretouched; the frame shows the part of it that is still legible. The full
   image returns at tablet width, where it is worth showing whole. */
@media (max-width: 47.999rem) {
  .pub-frame-browser img,
  .pub-frame-tablet img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: top center;
  }
}

.pub-frame-browser { border-radius: var(--radius-lg); }
.pub-chrome {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.6875rem 0.875rem;
  background: var(--color-surface-raised);
  border-block-end: 1px solid var(--color-border);
}
.pub-chrome i {
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-radius: 999px;
  background: var(--c-n-300);
  display: block;
}
.pub-chrome u {
  flex: 1;
  block-size: 1.125rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  margin-inline-start: 0.625rem;
}
/* The phone and the tablet are a DARK SHELL with the screen inset, which is
   what makes a 390-wide screenshot read as a device rather than as a card. */
.pub-frame-phone {
  border-radius: 1.875rem;
  padding: 0.5625rem;
  background: var(--c-n-900);
  border-color: var(--c-n-800);
  box-shadow: 0 30px 70px -28px rgb(10 18 20 / 55%);
}
.pub-frame-phone img { border-radius: 1.375rem; }
.pub-frame-tablet {
  border-radius: 1rem;
  padding: 0.5625rem;
  background: var(--c-n-900);
  border-color: var(--c-n-800);
}
.pub-frame-tablet img { border-radius: 0.5625rem; }

/* The plate a DRAWING sits on. It is deliberately not a frame: the drawing is
   not a screen, and dressing it as one would be the claim this page refuses
   to make. */
.pub-artplate {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.125rem, 3vw, 2rem);
  box-shadow: 0 6px 16px -10px rgb(10 18 20 / 35%);
}

/* ── the hero ─────────────────────────────────────────────────────────── */
.pub-hero {
  position: relative;
  overflow: hidden;
  color: var(--pub-deep-ink);
  padding-inline: var(--pub-gut);
  padding-block: clamp(3rem, 8vw, 5.5rem) clamp(3.5rem, 9vw, 6.5rem);
  background:
    radial-gradient(75rem 42.5rem at 84% -12%, var(--pub-deep-glow), transparent 62%),
    radial-gradient(48.75rem 31.25rem at 2% 104%, rgb(156 114 34 / 17%), transparent 60%),
    linear-gradient(166deg, var(--pub-deep) 0%, var(--pub-deep-2) 100%);
}
.pub-hero .pub-kufi { color: var(--c-n-000); opacity: 0.055; }
.pub-hero-watermark {
  position: absolute;
  inset-block-start: -7%;
  inset-inline-start: -12%;
  inline-size: min(41.25rem, 68vw);
  block-size: min(41.25rem, 68vw);
  color: var(--c-n-000);
  opacity: 0.05;
  pointer-events: none;
  transform: rotate(-7deg);
}
.pub-hero-inner {
  position: relative;
  max-inline-size: 73.75rem;
  margin-inline: auto;
  min-inline-size: 0;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}
.pub-hero .pub-h1 {
  font-size: clamp(2.25rem, 5.6vw, 3.9rem);
  /* `16ch` and NOT a wider measure for Latin, which was the first attempt
     and changed nothing: at this display size the hero's own column is
     narrower than the measure, so the column was the constraint all along.
     What the English headline actually needed was the LINE BREAKER — see
     `text-wrap: balance` on the public headings — which takes "seconds" off
     a line of its own without touching the type scale. */
  max-inline-size: 16ch;
  margin-block: 0 var(--space-lg);
  color: inherit;
}
/* ── the owner's marketing line ───────────────────────────────────────────
   The one new element in the first section, and everything about it is
   borrowed: the brass is `--c-accent-200`, which the eyebrow above it
   already takes against this field and which measures 9.81:1 here; the type
   scale is the same clamp pattern as the headline; the spacing is the
   section's own rhythm.

   ITS SIZE IS THE HIERARCHY. Larger than the lede, smaller than the `h1`, so
   the eye takes them in the order headline → promise → explanation → action
   without any of them fighting another.                                   */
.pub-hero-tagline {
  /* Its own breathing room, set here rather than by touching `.pub-h1` or
     `.pub-lede` — both of those belong to the first section's approved
     design, and the guard in `tests/test_public_home.py` holds them. */
  margin: var(--space-xl) 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.875rem);
  font-weight: 600;
  line-height: 1.55;
  color: var(--c-n-000);
  max-inline-size: 26ch;
  text-wrap: balance;
}
.pub-hero-tagline em {
  font-style: normal;
  font-weight: 700;
  color: var(--c-accent-200);
}
/* A single quiet arrival, and only for the line the owner asked to stand out.
   It runs once, lasts under half a second, animates `opacity` and `transform`
   only — the two properties a compositor can carry without touching layout —
   and never delays the first paint, because the element starts visible and
   the keyframe only moves it. */
@media (prefers-reduced-motion: no-preference) {
  .pub-hero-tagline { animation: pub-rise 560ms cubic-bezier(0.22, 0.8, 0.3, 1) both; }
  .pub-hero-tagline em { animation: pub-glow 720ms ease-out 260ms both; }
}
@keyframes pub-rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes pub-glow {
  from { color: var(--c-n-000); }
  to   { color: var(--c-accent-200); }
}

.pub-hero .pub-lede {
  font-size: clamp(1.0625rem, 2.1vw, 1.3125rem);
  color: var(--pub-deep-dim);
  max-inline-size: 40ch;
  font-weight: 300;
  margin-block-end: 0;
}
.pub-hero .pub-eyebrow-brass { color: var(--c-accent-200); }
.pub-hero-hint { margin-block-start: var(--space-sm); color: var(--pub-deep-dim); }
.pub-hero .pub-cta-row { margin-block-start: var(--space-xl); }
.pub-hero .pub-cta {
  background: var(--c-n-000);
  color: var(--c-brand-700);
  border-color: transparent;
}
.pub-cta-ghost {
  border: 1px solid var(--pub-deep-line);
  color: var(--pub-deep-ink);
  background: rgb(255 255 255 / 5%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.pub-cta-icon svg { inline-size: 1.0625rem; block-size: 1.0625rem; display: block; }
.pub-hero-shots { position: relative; display: grid; gap: var(--space-md);
                  justify-items: center; }
.pub-hero-desktop { inline-size: 100%; }
.pub-hero-phone { inline-size: min(11.5rem, 55%); }

/* ── the promise, in three ───────────────────────────────────────────── */
.pub-assure {
  background: var(--color-surface);
  border-block-end: 1px solid var(--color-border);
  padding-inline: var(--pub-gut);
  padding-block: clamp(1.75rem, 3.5vw, 2.625rem);
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(15.625rem, 100%), 1fr));
  max-inline-size: 73.75rem;
  margin-inline: auto;
}
.pub-assure-line { display: grid; grid-template-columns: auto 1fr;
                   gap: var(--space-md); align-items: start; }
.pub-assure-icon {
  inline-size: 2.625rem;
  block-size: 2.625rem;
  border-radius: 0.8125rem;
  display: grid;
  place-items: center;
  background: var(--s-primary-subtle);
  color: var(--s-primary-hover);
}
.pub-assure-icon svg { inline-size: 1.3125rem; block-size: 1.3125rem; }
.pub-assure-line b { font-family: var(--font-display); font-size: var(--fs-body-sm);
                     display: block; margin-block-end: 0.1875rem; }
.pub-assure-line .pub-hint { margin: 0; font-size: var(--fs-small); }

/* ── the path, in three beats ────────────────────────────────────────── */
.pub-journey {
  position: relative;
  overflow: hidden;
  padding-inline: var(--pub-gut);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: var(--color-bg);
}
.pub-journey .pub-kufi { color: var(--s-primary); opacity: 0.05; }
.pub-journey-head {
  position: relative;
  max-inline-size: 58ch;
  margin-block-end: clamp(1.875rem, 4vw, 2.75rem);
  margin-inline: auto;
}
.pub-journey .pub-h2 { font-size: clamp(1.75rem, 4vw, 2.625rem); }
.pub-journey-lede { color: var(--color-ink-muted); margin-block: var(--space-sm) 0; }
.pub-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14.375rem, 100%), 1fr));
  gap: clamp(0.875rem, 2.4vw, 1.5rem);
  max-inline-size: 73.75rem;
  margin-inline: auto;
}
.pub-beat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  display: grid;
  gap: var(--space-sm);
  align-content: start;
}
.pub-beat b { font-family: var(--font-display); font-size: var(--fs-body-lg);
              font-weight: 600; }
.pub-beat p { margin: 0; font-size: var(--fs-body-sm); color: var(--color-ink-muted); }

/* ── the five bands ──────────────────────────────────────────────────── */
.pub-show {
  padding-inline: var(--pub-gut);
  padding-block: clamp(3.5rem, 8vw, 6.25rem);
  border-block-start: 1px solid var(--color-border);
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  max-inline-size: 73.75rem;
  margin-inline: auto;
}
.pub-show .pub-h2 { font-size: clamp(1.375rem, 3vw, 2.0625rem);
                    margin-block-end: var(--space-md); }
.pub-show-body { margin: 0; color: var(--color-ink-muted);
                 font-size: var(--fs-body-lg); max-inline-size: 46ch; }
.pub-points { margin: var(--space-lg) 0 0; padding: 0; list-style: none;
              display: grid; gap: 0.8125rem; }
.pub-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8125rem;
  align-items: start;
  font-size: var(--fs-body-sm);
  color: var(--color-ink-muted);
}
.pub-point-tick { color: var(--s-primary); margin-block-start: 0.25rem; }
.pub-point-tick svg { inline-size: 1.1875rem; block-size: 1.1875rem; display: block; }
.pub-show-shot { margin: 0; min-inline-size: 0; }
.pub-show-shot figcaption { font-size: var(--fs-caption);
                            color: var(--color-ink-muted);
                            margin-block-start: var(--space-sm); }
.pub-show[data-frame="phone"] .pub-show-shot { justify-self: center;
                                               max-inline-size: 17.25rem; }
.pub-show[data-frame="tablet"] .pub-show-shot { max-inline-size: 35rem; }

/* ── white label, in the client's identity ───────────────────────────── */
.pub-client {
  position: relative;
  overflow: hidden;
  /* THE CLIENT'S OWN COLOURS ARE NOT IN THIS FILE. They arrive as three
     custom properties on the band element, from `home_content.CLIENT` —
     because they belong to a client rather than to this product, and
     `11 §10`'s rule is that OUR palette has exactly one source. A fallback
     is given so the band is never unstyled if the inline value is stripped,
     and it is the product's own ink rather than a guess at the client's. */
  --pub-cl-deep: var(--c-n-800);
  --pub-cl-deep-2: var(--c-n-900);
  --pub-cl-cream: var(--c-n-025);
  color: var(--pub-cl-cream);
  /* The measure in the PADDING, because this band's colour bleeds to the
     window and a `max-inline-size` would stop the olive at the text. */
  padding-inline: max(var(--pub-gut), calc((100% - 73.75rem) / 2));
  padding-block: clamp(4rem, 9vw, 7rem);
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  align-items: center;
  background:
    radial-gradient(56.25rem 32.5rem at 82% 0%, rgb(251 244 215 / 10%), transparent 62%),
    linear-gradient(196deg, var(--pub-cl-deep) 0%, var(--pub-cl-deep-2) 100%);
}
/* THE KUFIC LAYER IS NOT A COLUMN. `> *` caught it too, overrode its
   `position: absolute` and made it the band's first grid child — so the
   texture took one column, the text took the other and the card fell to a
   second row with a hole beside it. The band is the only one with a `> *`
   rule, because it is the only one whose children are not wrapped in an
   inner element. */
.pub-client > :not(.pub-kufi) { position: relative; min-inline-size: 0; }
.pub-client .pub-kufi { color: var(--pub-cl-cream); opacity: 0.07; }
.pub-client .pub-badge {
  background: rgb(251 244 215 / 10%);
  color: var(--pub-cl-cream);
  border-color: rgb(251 244 215 / 22%);
}
.pub-client .pub-eyebrow { color: rgb(251 244 215 / 72%); }
.pub-client .pub-h2 { color: inherit; max-inline-size: 18ch; }
.pub-client .pub-show-body { color: rgb(251 244 215 / 78%); }
.pub-client .pub-points li { color: rgb(251 244 215 / 80%); }
.pub-client .pub-point-tick { color: var(--pub-cl-cream); }
.pub-clientcard {
  border: 1px solid rgb(251 244 215 / 20%);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.875rem);
  background: rgb(0 0 0 / 14%);
  display: grid;
  gap: var(--space-lg);
  min-inline-size: 0;
}
.pub-clientcard-top { display: flex; align-items: center; gap: var(--space-md);
                      flex-wrap: wrap; }
.pub-clientmark { block-size: 5.25rem; flex: none; }
.pub-clientmark img { block-size: 100%; inline-size: auto; display: block; }
.pub-clientname { display: grid; gap: 0.1875rem; }
.pub-clientname b { font-family: var(--font-display); font-size: var(--fs-h5);
                    letter-spacing: 0.02em; }
.pub-clientname .pub-hint { margin: 0; color: rgb(251 244 215 / 62%);
                            font-size: var(--fs-small); }
.pub-swatches { display: flex; gap: 0.625rem; flex-wrap: wrap;
                margin-inline-start: auto; }
.pub-swatch { inline-size: 2.625rem; block-size: 2.625rem;
              border-radius: 0.6875rem; border: 1px solid rgb(251 244 215 / 25%); }
.pub-clientproof { display: grid; gap: var(--space-lg); align-items: start; }
.pub-clientreal { margin: 0; display: grid; gap: 0.5625rem; }
.pub-clientreal .pub-frame-phone {
  background: color-mix(in srgb, var(--pub-cl-deep) 35%, var(--c-n-950));
  border-color: rgb(251 244 215 / 22%);
}
.pub-clientreal figcaption { font-size: var(--fs-caption);
                             color: rgb(251 244 215 / 72%); text-align: center; }
.pub-lands { display: grid; gap: 0.875rem;
             grid-template-columns: repeat(auto-fit, minmax(min(8.125rem, 46%), 1fr)); }
.pub-land {
  border: 1px solid rgb(251 244 215 / 16%);
  border-radius: var(--radius-md);
  padding: 0.875rem;
  display: grid;
  gap: 0.625rem;
  background: rgb(251 244 215 / 4%);
}
.pub-land span { font-size: var(--fs-caption); color: rgb(251 244 215 / 72%);
                 text-align: center; }

/* ── the last word ───────────────────────────────────────────────────── */
.pub-closing {
  position: relative;
  overflow: hidden;
  color: var(--pub-deep-ink);
  padding-inline: var(--pub-gut);
  padding-block: clamp(4rem, 9vw, 6.5rem);
  border-block-start: 1px solid var(--pub-deep-line);
  background:
    radial-gradient(50rem 28.75rem at 86% 100%, var(--pub-deep-glow), transparent 62%),
    linear-gradient(200deg, var(--pub-deep) 0%, var(--pub-deep-2) 100%);
}
.pub-closing .pub-kufi { color: var(--c-n-000); opacity: 0.05; }
.pub-closing-watermark {
  position: absolute;
  inset-block-end: -20%;
  inset-inline-end: -7%;
  inline-size: min(26.875rem, 54vw);
  block-size: min(26.875rem, 54vw);
  color: var(--c-n-000);
  opacity: 0.055;
  pointer-events: none;
}
.pub-closing-inner { position: relative; display: grid; gap: var(--space-lg);
                     max-inline-size: 50rem; margin-inline: auto; }
.pub-closing .pub-h2 { font-size: clamp(1.75rem, 4vw, 2.625rem);
                       max-inline-size: none; color: inherit; }
.pub-closing p { color: var(--pub-deep-dim); font-size: var(--fs-body-lg);
                 max-inline-size: 48ch; margin: 0; }
.pub-closing .pub-cta { background: var(--c-n-000); color: var(--c-brand-700);
                        border-color: transparent; }
.pub-doors {
  display: grid;
  gap: var(--space-sm);
  border-block-start: 1px solid var(--pub-deep-line);
  padding-block-start: var(--space-lg);
  font-size: var(--fs-body-sm);
  color: var(--pub-deep-dim);
}
.pub-doors b { color: var(--pub-deep-ink); font-weight: 600; }

/* ── which pictures are real, said plainly ───────────────────────────── */
.pub-provenance {
  max-inline-size: 73.75rem;
  margin-inline: auto;
  padding: var(--space-xl) var(--pub-gut);
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
}

/* ── the two-column rebuild ───────────────────────────────────────────────
   §16's rule, from the other direction: the phone layout is the ONE-column
   composition above, and the second column arrives only when there is room
   for a picture worth looking at. Nothing below narrows; the grid simply
   gains a column. */
@media (min-width: 56rem) {
  .pub-hero-inner { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); }
  .pub-hero-shots {
    display: block;
    padding-block-end: 3.625rem;
    padding-inline-start: 3.25rem;
  }
  .pub-hero-desktop { transform: perspective(112.5rem) rotateY(5deg) rotateX(1.5deg); }
  .pub-hero-phone {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 10.625rem;
    z-index: 2;
  }
  .pub-journey-head { margin-inline: 0; }
  .pub-show { grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); }
  /* The alternation. `flip` is not a class here because the bands come from
     a list and the rhythm is positional: the second and the fourth put the
     picture first, so the eye crosses the page rather than running down one
     side of it. */
  .pub-show:nth-of-type(even) .pub-show-shot { order: -1; }
  .pub-client { grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); }
  .pub-clientproof { grid-template-columns: minmax(0, 10.25rem) minmax(0, 1fr); }
}

/* `15 §5` and `UXA-001`: motion is an enhancement and never a requirement.
   The scroll-driven reveal exists only where the browser supports it AND the
   reader has not asked for less. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pub-beat,
    .pub-show-text,
    .pub-show-shot {
      animation: pub-rise linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
    /* THE RISE IS A TRANSFORM AND NOT A FADE, and that is an accessibility
       fix rather than a preference. The concept's reveal starts at
       `opacity: .55`, and a scroll-driven animation holds its FROM state for
       every element that has not been scrolled to yet — so half the page sat
       at 55% opacity, `--color-ink-muted` composited to a mid grey over
       the page, and axe-core found twenty colour-contrast failures at 2.27:1
       against a 4.5:1 floor. The product's own visual gate caught it on the
       first run of the new page.

       Moving on the way in is the effect; dimming the text to do it is what
       cost the contrast. */
    @keyframes pub-rise {
      from { transform: translateY(1.375rem); }
      to   { transform: none; }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .pub-beat, .pub-show-text, .pub-show-shot { animation: none; }
}

/* ── Moments ─────────────────────────────────────────────────────────────
   A DEEP band, which is this page's own vocabulary rather than a new one:
   the hero opens deep and the closing shuts deep, and Moments is the third
   place the product speaks in its own colour. Every value below comes from
   the custom properties declared further up — `--pub-deep`, `--pub-deep-2`,
   `--pub-deep-ink`, `--pub-deep-dim`, `--pub-deep-line`, `--pub-deep-glow`,
   the spacing and radius scales — and not one colour is written by hand.

   It is the only section with its own rules, because the owner asked for
   Moments to be "قسمًا مميزًا واستثنائيًا … من حيث التصميم والتفاعل" rather
   than one more band in the `pub-show` loop. The rest of the page keeps the
   components it already had.                                              */
.pub-moments {
  /* THE SIX VALUES ARE REPEATED HERE ON PURPOSE, and the repetition is the
     point. Adding `.pub-moments` to the shared `.pub-hero, .pub-closing`
     rule above would have been one line shorter and would have changed a
     line the first section is made of — and the owner's standing condition
     is that the first section does not change, which
     `test_the_first_section_is_byte_for_byte_the_approved_release` now
     checks on every run. A band that wants this field declares it. */
  --pub-deep:       var(--c-brand-800);
  --pub-deep-2:     var(--c-brand-900);
  --pub-deep-ink:   var(--c-n-000);
  --pub-deep-dim:   var(--c-brand-200);
  --pub-deep-line:  rgb(255 255 255 / 13%);
  --pub-deep-glow:  rgb(165 132 184 / 30%);
  position: relative;
  overflow: hidden;
  color: var(--pub-deep-ink);
  padding-inline: var(--pub-gut);
  padding-block: clamp(4rem, 9vw, 7rem);
  border-block-start: 1px solid var(--pub-deep-line);
  background:
    radial-gradient(56.25rem 32.5rem at 12% 0%, var(--pub-deep-glow), transparent 64%),
    linear-gradient(186deg, var(--pub-deep) 0%, var(--pub-deep-2) 100%);
}
.pub-moments .pub-kufi { color: var(--c-n-000); opacity: 0.05; }
.pub-moments-inner {
  position: relative;
  max-inline-size: 73.75rem;
  margin-inline: auto;
  display: grid;
  gap: clamp(2.5rem, 5.5vw, 4rem);
}
.pub-moments-head { display: grid; gap: var(--space-md); max-inline-size: 48rem; }
.pub-moments .pub-h2 { color: inherit; font-size: clamp(1.75rem, 4vw, 2.625rem);
                       max-inline-size: none; }
.pub-moments .pub-lede { color: var(--pub-deep-dim); max-inline-size: 52ch; }
.pub-moments .pub-badge { background: rgb(255 255 255 / 10%);
                          border-color: var(--pub-deep-line);
                          color: var(--pub-deep-ink); }
.pub-mo-kicker { margin: 0 0 var(--space-md); font-size: var(--fs-small);
                 color: var(--pub-deep-dim); letter-spacing: 0.08em; }

/* ── the visit, simulated ────────────────────────────────────────────────
   Six steps of one visit as six small screens, so a reader sees the ARC
   rather than being told about it. The two Moments are marked in brass and
   their POSITION is the argument: one inside the wait, one past the bill.

   A horizontal strip that scrolls on a narrow screen and lays flat on a wide
   one — and on a narrow screen the scroll is by design, because six steps
   stacked vertically stop reading as a sequence.                          */
.pub-mo-sim { display: grid; gap: var(--space-xs); }
.pub-mo-simlede { margin: 0 0 var(--space-lg); font-size: var(--fs-body-sm);
                  color: var(--pub-deep-dim); max-inline-size: 56ch; }
.pub-mo-strip {
  list-style: none;
  margin: 0;
  padding: 0 0 0.75rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(15rem, 76vw);
  gap: 0.875rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
}
@media (min-width: 78rem) {
  .pub-mo-strip { grid-auto-columns: 1fr; overflow-x: visible; }
}
.pub-mo-step {
  scroll-snap-align: start;
  border: 1px solid var(--pub-deep-line);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  background: rgb(255 255 255 / 5%);
  display: grid;
  gap: 0.75rem;
  align-content: start;
  position: relative;
}
/* The two that matter, and they are told apart by more than colour: a brass
   border, a brass rule down the inline edge, and a labelled chip. */
.pub-mo-step.is-moment {
  border-color: var(--c-accent-400);
  background: rgb(255 255 255 / 9%);
}
.pub-mo-step.is-moment::before {
  content: "";
  position: absolute;
  inset-block: 0.75rem;
  inset-inline-start: -1px;
  inline-size: 3px;
  border-radius: 3px;
  background: var(--c-accent-400);
}
/* Two lines reserved whether or not the chip wraps, so six cards put their
   little screens on the same baseline instead of stepping down the strip. */
.pub-mo-steptop { display: flex; align-items: center; gap: 0.5rem;
                  flex-wrap: wrap; min-block-size: 3.5rem;
                  align-content: center; }
.pub-mo-steptop b { font-size: var(--fs-body-sm); }
.pub-mo-stepmark {
  inline-size: 1.875rem; block-size: 1.875rem; border-radius: var(--radius-sm);
  display: grid; place-items: center; flex: none;
  background: rgb(255 255 255 / 10%);
}
.pub-mo-step.is-moment .pub-mo-stepmark { background: var(--c-accent-400);
                                          color: var(--c-brand-900); }
.pub-mo-stepmark svg { inline-size: 1.0625rem; block-size: 1.0625rem; fill: none;
                       stroke: currentColor; stroke-width: 1.7;
                       stroke-linecap: round; stroke-linejoin: round; }
.pub-mo-chip {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.06em;
  padding: 0.125rem 0.5rem; border-radius: 999px;
  background: var(--c-accent-400); color: var(--c-brand-900);
}
/* the little screen inside each step */
.pub-mo-mini {
  display: grid;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-n-000);
  color: var(--color-ink);
  box-shadow: 0 0.75rem 1.75rem rgb(0 0 0 / 35%);
}
.pub-mo-mini-top {
  display: grid; gap: 0.125rem; padding: 0.625rem 0.75rem;
  background: linear-gradient(150deg, var(--c-brand-700), var(--c-brand-800));
  color: var(--c-n-000);
}
.pub-mo-step.is-moment .pub-mo-mini-top {
  background: linear-gradient(150deg, var(--c-accent-500), var(--c-accent-600));
}
.pub-mo-mini-top b { font-size: var(--fs-body-sm); }
.pub-mo-mini-top span { font-size: var(--fs-caption); opacity: 0.85; }
.pub-mo-mini-body { padding: 0.75rem; font-size: var(--fs-caption);
                    color: var(--color-ink-muted); line-height: 1.8;
                    min-block-size: 3.25rem; }
.pub-mo-stepnote { font-size: var(--fs-caption); color: var(--pub-deep-dim);
                   line-height: 1.8; }

/* ── the switcher ────────────────────────────────────────────────────────
   NO JAVASCRIPT, because `11 §3.3` chose Django rendering for this tier and
   a test enforces it. Six radios come first in the source so `:checked ~`
   can reach everything they steer, and they are hidden from sight but NOT
   from the keyboard or a screen reader: `opacity: 0` on a focusable control
   keeps arrow-key navigation, which `display: none` would have destroyed.  */
.pub-mo-switch { position: relative; }
.pub-mo-radio {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  margin: 0;
}
.pub-mo-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 62rem) { .pub-mo-grid { grid-template-columns: 1.25fr 0.75fr; } }
.pub-mo-tiles {
  display: grid;
  gap: 0.75rem;
  /* Six modes want a grid that divides six. `auto-fit` picked four and left a
     ragged pair on the second row, so the count is stated: two, then three. */
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 40rem) { .pub-mo-tiles { grid-template-columns: repeat(3, 1fr); } }
.pub-mo-tile {
  border: 1px solid var(--pub-deep-line);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  background: rgb(255 255 255 / 5%);
  display: grid;
  gap: 0.4375rem;
  align-content: start;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) {
  .pub-mo-tile:hover { background: rgb(255 255 255 / 10%); transform: translateY(-3px); }
}
.pub-mo-mark {
  inline-size: 2.375rem; block-size: 2.375rem; border-radius: var(--radius-md);
  display: grid; place-items: center; background: rgb(255 255 255 / 10%);
  transition: background 0.2s ease;
}
.pub-mo-mark svg { inline-size: 1.3125rem; block-size: 1.3125rem; fill: none;
                   stroke: currentColor; stroke-width: 1.6;
                   stroke-linecap: round; stroke-linejoin: round; }
.pub-mo-tile b { font-size: var(--fs-h5); }
.pub-mo-tile code { font-size: var(--fs-caption); letter-spacing: 0.12em;
                    color: var(--pub-deep-dim); font-family: inherit; }
.pub-mo-tile-body { font-size: var(--fs-body-sm); color: var(--pub-deep-dim); }

/* the phone, and the six screens stacked in one cell */
.pub-mo-phone { display: grid; gap: 0.5625rem; justify-items: center; }
.pub-mo-phonehint { margin: 0; font-size: var(--fs-caption);
                    color: var(--pub-deep-dim); letter-spacing: 0.06em; }
.pub-mo-device {
  display: grid;
  inline-size: min(17rem, 78vw);
  padding: 0.5rem;
  border-radius: 2.125rem;
  background: var(--c-n-950);
  box-shadow: 0 2.125rem 4.75rem rgb(0 0 0 / 55%), 0 0 0 1px rgb(255 255 255 / 10%);
}
.pub-mo-screen {
  grid-area: 1 / 1;
  border-radius: 1.6875rem;
  overflow: hidden;
  background: var(--c-n-000);
  color: var(--color-ink);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-block-size: 23.5rem;
  opacity: 0;
  visibility: hidden;
}
.pub-mo-screen-top {
  display: grid; gap: 0.1875rem;
  padding: var(--space-md) var(--space-md) 0.875rem;
  background: linear-gradient(150deg, var(--c-brand-700), var(--c-brand-800));
  color: var(--c-n-000);
}
.pub-mo-screen-top b { font-size: var(--fs-h5); }
.pub-mo-screen-top span { font-size: var(--fs-caption); color: var(--c-brand-200); }
.pub-mo-screen-body { display: grid; gap: 0.625rem; align-content: start;
                      padding: var(--space-md); }
.pub-mo-screen-body b { font-size: var(--fs-body-lg); color: var(--c-brand-800); }
.pub-mo-screen-body span { font-size: var(--fs-body-sm);
                           color: var(--color-ink-muted); line-height: 1.9; }
.pub-mo-rate {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.875rem var(--space-md);
  border-block-start: 1px solid var(--color-border);
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
}
.pub-mo-stars { display: flex; gap: 0.3125rem; }
.pub-mo-stars i { inline-size: 0.75rem; block-size: 0.75rem; border-radius: 50%;
                  background: var(--c-accent-100); }
.pub-mo-stars i:nth-child(-n + 4) { background: var(--c-accent-400); }

/* THE SIX STATES. Written out rather than generated, because the mode set is
   fixed by `apps/engage` and a test reads it from there — a loop here would
   only have hidden that the list is the domain's and not this file's. */
#pub-moment-reset:checked    ~ .pub-mo-grid .pub-mo-screen:nth-child(1),
#pub-moment-spark:checked    ~ .pub-mo-grid .pub-mo-screen:nth-child(2),
#pub-moment-discover:checked ~ .pub-mo-grid .pub-mo-screen:nth-child(3),
#pub-moment-play:checked     ~ .pub-mo-grid .pub-mo-screen:nth-child(4),
#pub-moment-mind:checked     ~ .pub-mo-grid .pub-mo-screen:nth-child(5),
#pub-moment-social:checked   ~ .pub-mo-grid .pub-mo-screen:nth-child(6) {
  opacity: 1;
  visibility: visible;
}
#pub-moment-reset:checked    ~ .pub-mo-grid .pub-mo-tile:nth-child(1),
#pub-moment-spark:checked    ~ .pub-mo-grid .pub-mo-tile:nth-child(2),
#pub-moment-discover:checked ~ .pub-mo-grid .pub-mo-tile:nth-child(3),
#pub-moment-play:checked     ~ .pub-mo-grid .pub-mo-tile:nth-child(4),
#pub-moment-mind:checked     ~ .pub-mo-grid .pub-mo-tile:nth-child(5),
#pub-moment-social:checked   ~ .pub-mo-grid .pub-mo-tile:nth-child(6) {
  background: rgb(255 255 255 / 14%);
  border-color: rgb(255 255 255 / 38%);
}
#pub-moment-reset:checked    ~ .pub-mo-grid .pub-mo-tile:nth-child(1) .pub-mo-mark,
#pub-moment-spark:checked    ~ .pub-mo-grid .pub-mo-tile:nth-child(2) .pub-mo-mark,
#pub-moment-discover:checked ~ .pub-mo-grid .pub-mo-tile:nth-child(3) .pub-mo-mark,
#pub-moment-play:checked     ~ .pub-mo-grid .pub-mo-tile:nth-child(4) .pub-mo-mark,
#pub-moment-mind:checked     ~ .pub-mo-grid .pub-mo-tile:nth-child(5) .pub-mo-mark,
#pub-moment-social:checked   ~ .pub-mo-grid .pub-mo-tile:nth-child(6) .pub-mo-mark {
  background: var(--c-accent-400);
  color: var(--c-brand-900);
}
/* Focus is visible on the TILE, since the control itself is not drawn. */
#pub-moment-reset:focus-visible    ~ .pub-mo-grid .pub-mo-tile:nth-child(1),
#pub-moment-spark:focus-visible    ~ .pub-mo-grid .pub-mo-tile:nth-child(2),
#pub-moment-discover:focus-visible ~ .pub-mo-grid .pub-mo-tile:nth-child(3),
#pub-moment-play:focus-visible     ~ .pub-mo-grid .pub-mo-tile:nth-child(4),
#pub-moment-mind:focus-visible     ~ .pub-mo-grid .pub-mo-tile:nth-child(5),
#pub-moment-social:focus-visible   ~ .pub-mo-grid .pub-mo-tile:nth-child(6) {
  outline: 3px solid var(--c-accent-300);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .pub-mo-tile, .pub-mo-mark, .pub-mo-screen { transition: none; }
}

.pub-families { display: grid; gap: var(--space-xs);
                margin-block-start: var(--space-lg);
                border-block-start: 1px solid var(--pub-deep-line);
                padding-block-start: var(--space-lg); }
.pub-families b { font-size: var(--fs-small); color: var(--pub-deep-dim);
                  font-weight: 600; letter-spacing: 0.08em; }
.pub-families span { font-size: var(--fs-body-sm); color: var(--pub-deep-ink); }

/* ── when it happens ─────────────────────────────────────────────────── */
.pub-mo-when-grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem);
                    align-items: start; }
@media (min-width: 62rem) {
  .pub-mo-when-grid { grid-template-columns: 1fr 1fr 0.95fr; }
}
.pub-mo-stop {
  border: 1px solid var(--pub-deep-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  background: rgb(255 255 255 / 5%);
  display: grid;
  gap: 0.75rem;
  align-content: start;
}
.pub-mo-stop-mark {
  inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--c-accent-400); color: var(--c-brand-900);
}
.pub-mo-stop-mark svg { inline-size: 1.5rem; block-size: 1.5rem; fill: none;
                        stroke: currentColor; stroke-width: 1.7;
                        stroke-linecap: round; stroke-linejoin: round; }
.pub-mo-stop h3 { margin: 0; font-size: var(--fs-h5); color: var(--pub-deep-ink); }
.pub-mo-stop p { margin: 0; font-size: var(--fs-body-sm);
                 color: var(--pub-deep-dim); }
.pub-mo-stop ul { list-style: none; margin: 0; padding: 0; display: grid;
                  gap: 0.625rem; }
.pub-mo-stop li { display: flex; gap: 0.5625rem; align-items: start;
                  font-size: var(--fs-caption); color: var(--pub-deep-dim); }

/* ── what each side gets ─────────────────────────────────────────────── */
.pub-moments-split { display: grid; gap: clamp(1.75rem, 4vw, 3rem);
                     align-items: start; }
@media (min-width: 62rem) {
  .pub-moments-split { grid-template-columns: 1fr 1fr 0.95fr; }
}
.pub-worth { display: grid; gap: var(--space-sm); align-content: start; }
.pub-worth h3 { margin: 0; font-size: var(--fs-h5); color: var(--pub-deep-ink); }
.pub-worth ul { list-style: none; margin: 0; padding: 0; display: grid;
                gap: 0.75rem; }
.pub-worth li { display: flex; gap: 0.625rem; align-items: start;
                font-size: var(--fs-body-sm); color: var(--pub-deep-dim); }
.pub-moments .pub-point-tick { color: var(--c-accent-300); flex: none; }
.pub-mo-balance {
  border: 1px dashed var(--pub-deep-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  display: grid;
  gap: 0.625rem;
  align-content: start;
}
.pub-mo-balance h3 { margin: 0; font-size: var(--fs-h5); color: var(--pub-deep-ink); }
.pub-mo-balance p { margin: 0; font-size: var(--fs-body-sm);
                    color: var(--pub-deep-dim); }

.pub-moments-figure { margin: 0; display: grid; gap: 0.5625rem;
                      align-content: start; }
.pub-moments-plate {
  border: 1px solid var(--pub-deep-line);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 92%);
  padding: var(--space-md);
}
.pub-moments-figure figcaption { font-size: var(--fs-caption);
                                 color: var(--pub-deep-dim); text-align: center; }
.pub-moments-journey {
  margin: 0;
  border-block-start: 1px solid var(--pub-deep-line);
  padding-block-start: var(--space-lg);
  font-size: var(--fs-body-sm);
  color: var(--pub-deep-dim);
}