/* ============================================================
   ITALY LIONS — PINNED OFFICIAL CARD, THE ROTATING INSIDE

   Loaded by TWO pages, on purpose:
     feed.html   the real carousel
     admin.html  the Super Admin preview, which renders the SAME
                 markup through the SAME renderer so "what the
                 preview showed" and "what members got" cannot drift.

   THE ONE RULE THIS FILE EXISTS TO KEEP
   The outer pinned card never changes height while slides rotate.
   Every slide is absolutely positioned inside a stage whose height
   is set here, in px, by breakpoint — never by its content. The dock
   under it is a fixed height too. An admin can paste a 400-word
   description or a 12 MP photo and the Feed below does not move.

   ── 2026-10-01: "OLD STYLE" → THE PLATFORM, SERVICE BY SERVICE ──
   The owner asked for a more attractive card that shows, with
   pictures, how Italy Lions works — every page. Each slide is now a
   coloured field in its service's own colour (one `--ac` per slide,
   set inline by il-pinned.js), with a small drawn phone screen on the
   right showing the service in use (il-pinned-art.js), three ticked
   points saying what you do there, and the gold call to action. The
   dots became an app-style dock of every service. The opening slide is
   "How it works": the crest with the services circling it.

   HEIGHT HISTORY, so nobody reverts it by citing an old brief: the
   stage was 96px, then 168px ("i need frame size like big not sort
   need big"), and is now 232px on a phone because it carries a picture
   AND three lines of how-it-works — 232px since the two-button slides
   (Find + Offer). Bigger was the owner's instruction every time. What must never change is that it is FIXED here.

   COLOURS ARE DECLARED WITH FALLBACKS
   feed.html loads styles.css and has --gold and friends. admin.html
   does not. Every var() here therefore carries a literal fallback,
   so the preview is truthful on a page that has never heard of the
   site palette.

   ONLY OPACITY AND TRANSFORM ANIMATE. Every moving thing on this card
   — the orbit, the floating screen, the car on the road, the clock in
   the dock — is a transform or an opacity, so it stays on the
   compositor, and all of it stops when the card scrolls off screen
   (`is-away`) or the reader asks for reduced motion.
   ============================================================ */

.il-pin-car {
  --ilp-gold:   var(--gold, #C9A227);
  --ilp-ink:    var(--white, #F5F3EE);
  --ilp-ink-2:  var(--white-dim, #D9D4C7);
  --ilp-ink-3:  var(--white-muted, #93908A);

  /* PHONE NUMBERS — the desktop block below changes only these. */
  --ilp-h: 232px;          /* the stage                                   */
  --ilp-pad: 12px;         /* card side padding                           */
  --ilp-bw: 58%;           /* the text column                             */
  --ilp-bpad: 14px;        /* text column left padding                    */
  --ilp-mk: 1.34rem;       /* wordmark                                    */
  --ilp-sub: 0.74rem;      /* the sentence under it                       */
  --ilp-pt: 0.68rem;       /* the three points                            */
  --ilp-cta: 0.72rem;      /* the button                                  */
  --ilm-scale: 0.74;       /* the drawn screen                            */
  --ilm-right: -8px;       /* leans a little off the edge, like a phone   */

  position: relative;
  padding: 0 var(--ilp-pad) 10px;
}

/* ── THE STAGE ─────────────────────────────────────────────────
   Fixed height, relative, and every slide is absolute inside it.
   Nothing a slide contains can change this box. */
.il-pin-stage {
  position: relative;
  height: var(--ilp-h);
}
.il-pin-slides {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
}

.il-pin-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--ilp-from, 22px), 0, 0) scale(0.98);
  transition: opacity .32s cubic-bezier(.22,.68,.24,1),
              transform .42s cubic-bezier(.22,.68,.24,1);
  will-change: opacity, transform;
}
.il-pin-slide.is-live {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  z-index: 2;
}
/* The slide on its way out. It keeps pointer-events off so a fading
   card can never eat the tap meant for the one arriving. */
.il-pin-slide.is-out {
  opacity: 0;
  transform: translate3d(var(--ilp-to, -22px), 0, 0) scale(0.98);
  z-index: 1;
}

/* ── THE POSTER ──────────────────────────────────────────────── */
.il-pin-link {
  --ac: #E3C463; --acr: 227 196 99; --ac2: #6B4E0E; --ac2r: 107 78 14;
  display: block;
  position: relative;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  outline: none;
  background: #0D0C09;
  border: 1px solid rgb(var(--acr) / 0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
/* THE BIG LINK. Since the slide grew a second button it is no longer
   one <a>: this empty link covers the whole poster under the words, so
   a tap anywhere still opens the main page. The words above it let taps
   fall through (pointer-events:none) except on the second button. */
.il-pin-hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  border-radius: 16px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.il-pin-hit:focus-visible { box-shadow: inset 0 0 0 2px var(--ilp-gold); }

/* A light passing across the poster as it arrives — once, not looped. */
.il-pin-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.10) 50%, transparent 62%);
  transform: translateX(-110%);
}
.il-pin-slide.is-live .il-pin-link::after { animation: ilpSheen 1.3s .25s cubic-bezier(.3,.6,.3,1) both; }
@keyframes ilpSheen { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

/* The coloured field: the service's colour glowing behind its screen,
   its deep shade rising from the bottom-left corner, a fine dot grid
   over both. */
.il-pin-bg { position: absolute; inset: 0; z-index: 0; display: block; }
.il-pin-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(62% 90% at 84% 42%, rgb(var(--acr) / 0.34), transparent 72%),
    radial-gradient(70% 95% at 0% 105%, rgb(var(--ac2r) / 0.75), transparent 70%),
    linear-gradient(135deg, #0E0D0A 0%, #14120D 55%, #0B0A08 100%);
}
.il-pin-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1.3px);
  background-size: 13px 13px;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 90%);
          mask-image: linear-gradient(100deg, transparent 30%, #000 90%);
}
/* A photograph is shown as it is: no dot grid printed over it. */
.il-pin-link.has-photo .il-pin-bg::after { content: none; }
/* The service's own icon, enormous and faint, behind the words. */
.il-pin-wm {
  position: absolute;
  left: -22px; bottom: -40px;
  width: 160px; height: 160px;
  color: rgb(var(--acr) / 0.09);
  transform: rotate(-14deg);
}
.il-pin-wm svg { width: 100%; height: 100%; }

/* A promotion's photograph. object-fit means a portrait phone photo
   and a wide banner both fill the same box without distorting.

   THE PICTURE IS THE POINT (owner, 2026-10-01: "I need events picture
   more visible … bottom big text … this way not good"). It used to sit
   under a near-black wash from the left with the title in the middle
   over it, and a slow zoom to 109% cropped the edges of the poster
   away. Now the photograph is shown at full brightness, the zoom is a
   barely-there 3%, and the shade lives only under the words at the
   bottom. */
.il-pin-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  transform: none;
  transition: transform 7s ease-out;
}
.il-pin-slide.is-live .il-pin-photo { transform: scale(1.03); }

/* THE SCRIM keeps the words legible. On a drawn slide it is a soft
   shadow under the text column only. On a photograph it is a fade from
   the bottom edge only — clear above, dark under the title — so the
   picture stays a picture and the words still survive a white poster. */
.il-pin-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background: linear-gradient(90deg,
    rgba(8,7,5,0.78) 0%, rgba(8,7,5,0.52) 42%, rgba(8,7,5,0) 72%);
}
.il-pin-link.has-photo .il-pin-scrim {
  background: linear-gradient(180deg,
    rgba(6,5,3,0) 0%, rgba(6,5,3,0) 40%, rgba(6,5,3,0.45) 58%,
    rgba(6,5,3,0.82) 78%, rgba(6,5,3,0.94) 100%);
}

/* ── THE DRAWN SCREEN, standing on the right ─────────────────── */
.il-pin-artbg {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: var(--ilm-right);
  display: block;
  transform: translateY(-50%) scale(var(--ilm-scale));
  transform-origin: 100% 50%;
  pointer-events: none;
}
/* A circle cut by the edge looks broken where a leaning phone looks
   deliberate — the orbit and the crest stay whole. */
.il-pin-artbg.is-orbit,
.il-pin-artbg.is-mark { right: max(6px, var(--ilm-right)); }
.il-pin-float { display: block; }
.il-pin-slide.is-live .il-pin-float { animation: ilpFloat 6s ease-in-out infinite; }
.il-pin-slide.is-live .il-pin-float > * { animation: ilpArrive .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ilpFloat  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ilpArrive { from { opacity: 0; transform: translate3d(26px,0,0) scale(.94); } to { opacity: 1; transform: none; } }

/* ── THE WORDS ─────────────────────────────────────────────────
   Clamped, always. Long admin text is a design problem the CSS
   settles here rather than one the Feed layout absorbs. */
.il-pin-body {
  position: relative;
  z-index: 4;
  pointer-events: none;
  height: 100%;
  max-width: var(--ilp-bw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 12px 0 12px var(--ilp-bpad);
  box-sizing: border-box;
  overflow: hidden;
}
/* Nothing in the column may be squeezed to make room: a flex column
   with overflow:hidden quietly shrinks a clamped wordmark and cuts its
   letters in half. Every row keeps its natural height — the stage
   height is what is sized to fit them. */
.il-pin-body > * { flex-shrink: 0; }
.il-pin-link.k-promo .il-pin-body { max-width: 72%; padding-left: calc(var(--ilp-bpad) + 3px); }
.il-pin-link.k-promo:not(.has-photo) .il-pin-body { max-width: var(--ilp-bw); }

/* A PHOTO PROMOTION: the words sit LOW, across the full width, like the
   caption on a poster — big title first, then the sentence with the
   button beside it. The upper part of the frame is left to the picture.
   A grid, not a column, so the sentence and the button share one row
   and the whole caption stays short. */
.il-pin-link.has-photo .il-pin-body {
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "mark mark" "sub cta";
  align-content: end;
  column-gap: 12px;
  row-gap: 6px;
  padding: 12px var(--ilp-bpad) 14px;
}
.il-pin-link.has-photo .il-pin-mark {
  grid-area: mark;
  max-width: 92%;
  text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.6);
}
.il-pin-link.has-photo .il-pin-sub {
  grid-area: sub;
  align-self: center;
  color: #F2EFE8;
  text-shadow: 0 1px 8px rgba(0,0,0,0.9);
}
.il-pin-link.has-photo .il-pin-ctas { grid-area: cta; align-self: center; margin-top: 0; }
/* A photo promotion with no sentence: the button takes the row alone,
   on the left under the title, where the eye lands after reading it. */
.il-pin-link.has-photo .il-pin-mark + .il-pin-ctas { grid-column: 1 / -1; justify-self: start; }

.il-pin-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-family: 'Inter', 'Lato', system-ui, sans-serif;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ac);
  white-space: nowrap;
}
.il-pin-eic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px; height: 17px;
  border-radius: 5px;
  color: #0B0A07;
  background: linear-gradient(150deg, var(--ac), rgb(var(--acr) / 0.7));
  box-shadow: 0 2px 8px rgb(var(--acr) / 0.45);
}
.il-pin-eic svg { width: 12px; height: 12px; }

/* The wordmark: LION in white, GROCERY in gold, in the serif the
   site's headers use. */
.il-pin-mark {
  font-family: 'Cinzel', Georgia, serif;
  font-size: var(--ilp-mk);
  font-weight: 800;
  line-height: 1.17;
  letter-spacing: 0.4px;
  color: var(--ilp-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.il-pin-link.fit1 .il-pin-mark { font-size: calc(var(--ilp-mk) * 0.86); }
.il-pin-link.fit2 .il-pin-mark { font-size: calc(var(--ilp-mk) * 0.74); }
.il-pin-lead { color: #FFFFFF; }
/* The gold half. background-clip:text gives the metallic fall the site
   uses on its own headers; the plain gold `color` under it is what a
   browser that will not clip a gradient to text still shows. */
.il-pin-tail {
  color: var(--ilp-gold);
  background: linear-gradient(180deg, #F6E3A6 0%, #E3C463 46%, #C9A227 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.il-pin-sub {
  font-family: 'Inter', 'Lato', system-ui, sans-serif;
  font-size: var(--ilp-sub);
  line-height: 1.36;
  color: var(--ilp-ink);
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}

/* The three things you do there. */
.il-pin-points {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 1px;
}
.il-pin-pt {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-family: 'Inter', 'Lato', system-ui, sans-serif;
  font-size: var(--ilp-pt);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ilp-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.il-pin-pt i {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  font-style: normal;
  font-size: 0.54rem;
  font-weight: 900;
  color: var(--ac);
  background: rgb(var(--acr) / 0.16);
  border: 1px solid rgb(var(--acr) / 0.55);
}
.il-pin-pt i svg { width: 8px; height: 8px; stroke-width: 3.4; }

/* A real button, not a text link — the one thing on the card a member
   is meant to press. Gold on every slide: the colour belongs to the
   service, the button belongs to Italy Lions. */
/* The button row: the main action, and on a two-sided service the
   other side of it beside (or, on a narrow phone, under) it. */
.il-pin-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: 3px;
  max-width: 100%;
}
.il-pin-cta {
  align-self: flex-start;
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 13px;
  border-radius: 22px;
  font-family: 'Inter', 'Lato', system-ui, sans-serif;
  font-size: var(--ilp-cta);
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #14120A;
  background: linear-gradient(135deg, #F6DE94, var(--ilp-gold));
  box-shadow: 0 4px 14px rgba(201,162,39,0.32), inset 0 1px 0 rgba(255,255,255,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform .25s cubic-bezier(.22,.68,.24,1), box-shadow .25s ease;
}
.il-pin-link:hover .il-pin-cta {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(201,162,39,0.45), inset 0 1px 0 rgba(255,255,255,0.5);
}
.il-pin-cta .il-pin-arrow { transition: transform .25s cubic-bezier(.22,.68,.24,1); }

/* THE OTHER SIDE — Offer a Room, Post a Job, Offer a Ride, Sell an
   Item. A real link of its own, outlined in the service's colour so it
   reads as the second choice, never as a rival to the gold one. */
.il-pin-cta2 {
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 5px 12px;
  border-radius: 22px;
  font-family: 'Inter', 'Lato', system-ui, sans-serif;
  font-size: var(--ilp-cta);
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.35;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgb(var(--acr) / 0.16);
  border: 1px solid rgb(var(--acr) / 0.7);
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, transform .2s ease;
}
.il-pin-cta2:hover { background: rgb(var(--acr) / 0.3); }
.il-pin-cta2:active { transform: scale(.95); }
.il-pin-cta2:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ilp-gold); }
/* On a phone two buttons wrap onto two rows; the third point gives up
   its line so the poster keeps its height. Desktop shows all three. */
@media (max-width: 767px) {
  .il-pin-link.has-cta2 .il-pin-pt:nth-child(3) { display: none; }
}
.il-pin-link:hover .il-pin-cta .il-pin-arrow { transform: translateX(3px); }

/* The staggered arrival of the words. */
.il-pin-slide.is-live .il-pin-body > * { animation: ilpRise .34s cubic-bezier(.22,.68,.24,1) both; }
.il-pin-slide.is-live .il-pin-body > *:nth-child(1) { animation-delay: .04s; }
.il-pin-slide.is-live .il-pin-body > *:nth-child(2) { animation-delay: .09s; }
.il-pin-slide.is-live .il-pin-body > *:nth-child(3) { animation-delay: .14s; }
.il-pin-slide.is-live .il-pin-body > *:nth-child(4) { animation-delay: .19s; }
.il-pin-slide.is-live .il-pin-body > *:nth-child(5) { animation-delay: .24s; }
@keyframes ilpRise {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}

/* "PROMOTED" — disclosure, top right, clear of the wordmark. This card
   carries the OFFICIAL badge, so a promotion inside it says what it is. */
.il-pin-tag {
  pointer-events: none;
  position: absolute;
  top: 9px; right: 9px;
  z-index: 4;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--ilp-ink);
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 5px;
  padding: 3px 6px;
  line-height: 1;
}

/* ── THE MINI-SCREEN KIT (il-pinned-art.js) ────────────────────
   A 150px-wide phone card drawn at its own size and scaled by
   --ilm-scale, so the whole picture sizes with one number per
   breakpoint. */
.ilm {
  position: relative;
  display: block;
  width: 150px;
  font-family: 'Inter', 'Lato', system-ui, sans-serif;
  font-size: 9.5px;
  line-height: 1.3;
  color: #F3F0E8;
  text-align: left;
}
.ilm-card {
  display: block;
  padding: 9px 9px 10px;
  border-radius: 16px;
  background: linear-gradient(165deg, #201E17 0%, #12110D 100%);
  border: 1px solid rgba(255,255,255,0.11);
  box-shadow:
    0 24px 40px -12px rgba(0,0,0,0.8),
    0 0 0 1px rgb(var(--acr) / 0.20),
    0 0 46px -8px rgb(var(--acr) / 0.55),
    inset 0 1px 0 rgba(255,255,255,0.09);
  transform: perspective(700px) rotateY(-11deg) rotateZ(1.5deg);
}
.ilm-top { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.ilm-ic {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 6px;
  color: #FFFFFF;
  background: linear-gradient(150deg, var(--ac), rgb(var(--ac2r)));
}
.ilm-ic svg { width: 11px; height: 11px; stroke-width: 2.4; }
.ilm-ic.big { width: 30px; height: 30px; border-radius: 9px; }
.ilm-ic.big svg { width: 16px; height: 16px; }
.ilm-tt { font-weight: 800; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ilm-ln { display: block; height: 5px; width: var(--w, 100%); margin: 5px 0; border-radius: 3px; background: rgba(255,255,255,0.14); }
.ilm-ln.ac { background: rgb(var(--acr) / 0.8); }

.ilm-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.ilm-chip {
  font-size: 7.8px; font-weight: 700;
  padding: 2px 6px; border-radius: 7px;
  color: #D8D3C6;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  white-space: nowrap;
}
.ilm-chip.ac { color: var(--ac); background: rgb(var(--acr) / 0.16); border-color: rgb(var(--acr) / 0.45); }

.ilm-btn {
  display: block;
  margin-top: 8px;
  padding: 5px 6px;
  border-radius: 8px;
  text-align: center;
  font-size: 8.6px; font-weight: 800;
  color: #0B0A07;
  background: linear-gradient(150deg, var(--ac), rgb(var(--acr) / 0.78));
  box-shadow: 0 5px 14px -4px rgb(var(--acr) / 0.7);
}

.ilm-pic {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: var(--h, 50px);
  border-radius: 10px;
  overflow: hidden;
  color: rgba(255,255,255,0.94);
  background:
    radial-gradient(80% 90% at 28% 18%, rgba(255,255,255,0.30), transparent 60%),
    linear-gradient(140deg, var(--ac), rgb(var(--ac2r)));
}
.ilm-pic svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }

.ilm-pr { display: flex; align-items: baseline; gap: 5px; margin-top: 6px; }
.ilm-pr b { font-size: 11.5px; font-weight: 900; color: var(--ac); }
.ilm-pr span { font-size: 7.8px; color: #A9A496; font-weight: 600; }

.ilm-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.ilm-row .ilm-ln { flex: 1; margin: 0; }
.ilm-dot {
  flex: 0 0 auto;
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.55), transparent 48%), var(--d, var(--ac));
}
.ilm-off { font-size: 7.4px; font-weight: 900; color: #0B0A07; background: var(--ac); border-radius: 5px; padding: 1px 4px; }
.ilm-qty { font-size: 7.4px; font-weight: 800; color: #A9A496; }

/* Messenger */
.ilm-bub {
  display: block; width: fit-content; max-width: 88%;
  margin: 4px 0; padding: 5px 7px;
  border-radius: 10px 10px 10px 3px;
  font-size: 8.4px; font-weight: 600;
  color: #ECE8DE; background: rgba(255,255,255,0.09);
}
.ilm-bub.out { margin-left: auto; border-radius: 10px 10px 3px 10px; color: #0B0A07; background: linear-gradient(150deg, var(--ac), rgb(var(--acr) / 0.78)); }
.ilm-typing { display: flex; gap: 3px; padding: 6px 8px; }
.ilm-typing i { width: 4px; height: 4px; border-radius: 50%; background: #CFCAB9; opacity: .35; }
.il-pin-slide.is-live .ilm-typing i { animation: ilmType 1.2s ease-in-out infinite; }
.il-pin-slide.is-live .ilm-typing i:nth-child(2) { animation-delay: .15s; }
.il-pin-slide.is-live .ilm-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ilmType { 0%,100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }

/* Ride Share & Cargo: the road and the thing travelling along it. The
   runner is a box as wide as the road minus the car, so translateX(100%)
   lands the car exactly at the far end, at any width. */
.ilm-route, .ilm-flags { display: flex; align-items: center; gap: 4px; margin: 1px 0 4px; }
.ilm-stop { font-size: 8.4px; font-weight: 800; white-space: nowrap; }
.ilm-road { position: relative; flex: 1; height: 18px; min-width: 30px; }
.ilm-road::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed rgb(var(--acr) / 0.6); }
.ilm-carx { position: absolute; left: 0; right: 16px; top: 0; bottom: 0; display: block; }
.ilm-carx svg {
  position: absolute; left: 0; top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  color: var(--ac); background: #16140F; border-radius: 4px; stroke-width: 2.2;
}
.il-pin-slide.is-live .ilm-carx { animation: ilmDrive 3.6s ease-in-out infinite alternate; }
@keyframes ilmDrive { from { transform: translateX(0); } to { transform: translateX(100%); } }

.ilm-flag { flex: 0 0 auto; width: 20px; height: 14px; border-radius: 2px; overflow: hidden; display: flex; box-shadow: 0 0 0 1px rgba(255,255,255,0.18); }
.ilm-flag.it i { flex: 1; }
.ilm-flag.it i:nth-child(1) { background: #009246; }
.ilm-flag.it i:nth-child(2) { background: #F1F2F1; }
.ilm-flag.it i:nth-child(3) { background: #CE2B37; }
.ilm-flag.lk { position: relative; background: linear-gradient(90deg, #005641 0 15%, #FF5B00 15% 30%, #8D153A 30% 100%); }
.ilm-flag.lk::after { content: ''; position: absolute; top: 2px; bottom: 2px; left: 36%; right: 2px; border: 1px solid #FFBE29; border-radius: 1px; }

/* Homes & Jobs: the Find | Offer switch — both sides of the service. */
.ilm-seg { display: flex; gap: 2px; padding: 2px; margin: 0 0 6px; border-radius: 8px; background: rgba(255,255,255,0.07); }
.ilm-seg i {
  flex: 1; font-style: normal; text-align: center; white-space: nowrap;
  padding: 3px 2px; border-radius: 6px;
  font-size: 7.6px; font-weight: 800; color: #A9A496;
}
.ilm-seg i.on { color: #0B0A07; background: var(--ac); }

/* Restaurants */
.ilm-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 1px 0 3px; }
.ilm-grid3 span {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 2px; border-radius: 8px;
  font-size: 10px; font-weight: 800;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
}
.ilm-grid3 small { font-size: 6.4px; font-weight: 700; color: #A9A496; text-transform: uppercase; letter-spacing: .4px; }
.ilm-grid3 .on { color: var(--ac); background: rgb(var(--acr) / 0.16); border-color: rgb(var(--acr) / 0.5); }

/* Education & Wallet: things that grow when the slide arrives. */
.ilm-bar { display: block; height: 5px; margin: 6px 0 2px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,0.12); }
.ilm-bar i { display: block; height: 100%; width: var(--p); border-radius: 3px; background: linear-gradient(90deg, var(--ac), rgb(var(--acr) / 0.7)); transform-origin: left center; }
.il-pin-slide.is-live .ilm-bar i { animation: ilmGrowX 1.1s .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ilmGrowX { from { transform: scaleX(0); } to { transform: none; } }

.ilm-bars { display: flex; align-items: flex-end; gap: 5px; height: 54px; padding: 4px 2px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.ilm-bars i { flex: 1; height: var(--p); border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, var(--ac), rgb(var(--acr) / 0.3)); transform-origin: bottom center; }
.il-pin-slide.is-live .ilm-bars i { animation: ilmGrowY .9s cubic-bezier(.2,.8,.2,1) both; }
.il-pin-slide.is-live .ilm-bars i:nth-child(2) { animation-delay: .08s; }
.il-pin-slide.is-live .ilm-bars i:nth-child(3) { animation-delay: .16s; }
.il-pin-slide.is-live .ilm-bars i:nth-child(4) { animation-delay: .24s; }
.il-pin-slide.is-live .ilm-bars i:nth-child(5) { animation-delay: .32s; }
.il-pin-slide.is-live .ilm-bars i:nth-child(6) { animation-delay: .40s; }
@keyframes ilmGrowY { from { transform: scaleY(0); } to { transform: none; } }

/* Sports */
.ilm-rank { display: flex; align-items: center; gap: 5px; padding: 3.5px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.ilm-rank b { width: 8px; font-size: 8.4px; color: var(--ac); }
.ilm-rank .ilm-ln { flex: 1; margin: 0; }
.ilm-rank em { font-style: normal; font-size: 8.4px; font-weight: 800; }

/* Events */
.ilm-tix {
  display: flex; align-items: center; gap: 7px;
  padding: 7px; border-radius: 10px;
  background: linear-gradient(150deg, rgb(var(--acr) / 0.22), rgba(255,255,255,0.04));
  border: 1px dashed rgb(var(--acr) / 0.55);
}
.ilm-tixl { flex: 1; min-width: 0; }
.ilm-qr { flex: 0 0 auto; width: 42px; height: 42px; padding: 3px; border-radius: 5px; background: #FFFFFF; box-sizing: border-box; }
.ilm-qr svg { display: block; width: 100%; height: 100%; fill: #0B0A07; }

/* Jobs */
.ilm-job { display: flex; align-items: center; gap: 7px; }
.ilm-job > span:last-child { flex: 1; }

/* Entertainment */
.ilm-avs { display: flex; align-items: center; margin-top: 7px; }
.ilm-avs i { width: 16px; height: 16px; margin-left: -5px; border-radius: 50%; border: 1.5px solid #15130E; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.6), transparent 50%), var(--d); }
.ilm-avs i:first-child { margin-left: 0; }
.ilm-avs span { margin-left: 5px; font-size: 7.8px; font-weight: 700; color: #A9A496; }

/* Religious Places: a month, one full moon. */
.ilm-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin: 1px 0 3px; }
.ilm-cal i { display: block; aspect-ratio: 1; border-radius: 4px; background: rgba(255,255,255,0.08); }
.ilm-cal i.on {
  display: flex; align-items: center; justify-content: center;
  color: #3A2A08;
  background: radial-gradient(circle, #FFF6D6 0%, var(--ac) 72%);
  box-shadow: 0 0 10px rgb(var(--acr) / 0.85);
}
.ilm-cal i.on svg { width: 70%; height: 70%; stroke-width: 2.6; }

/* Documents */
.ilm-todo { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 8.6px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.06); }
.ilm-ck { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid rgba(255,255,255,0.3); box-sizing: border-box; }
.ilm-ck.on { color: #0B0A07; background: var(--ac); border-color: var(--ac); }
.ilm-ck svg { width: 9px; height: 9px; stroke-width: 3.2; }

/* Regions: pins on a grid, one of them pulsing — your city. */
.ilm-map {
  position: relative; display: block; height: 60px; margin-bottom: 2px;
  border-radius: 10px; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 12px),
    linear-gradient(150deg, rgb(var(--acr) / 0.20), rgb(var(--ac2r) / 0.45));
}
.ilm-map i { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 3px rgb(var(--acr) / 0.3); }
.ilm-map i.on { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: var(--ac); box-shadow: 0 0 14px var(--ac); }
.ilm-map i.on::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--ac); opacity: 0; }
.il-pin-slide.is-live .ilm-map i.on::after { animation: ilmPing 2s ease-out infinite; }
@keyframes ilmPing { from { opacity: .9; transform: scale(.5); } to { opacity: 0; transform: scale(1.8); } }

/* The notification pinned to the screen's corner. It pops in a beat
   after the screen arrives, then bobs on its own rhythm. */
.ilm-badge {
  position: absolute;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 4px;
  border-radius: 20px;
  font-size: 8.6px; font-weight: 800;
  color: #14120C; background: #FFFFFF;
  white-space: nowrap;
  box-shadow: 0 10px 22px -6px rgba(0,0,0,0.65);
}
.ilm-badge.tl { top: -13px; left: -10px; }
.ilm-badge.tr { top: -13px; right: -8px; }
.ilm-bdi {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  color: #FFFFFF; background: linear-gradient(150deg, var(--ac), rgb(var(--ac2r)));
}
.ilm-bdi svg { width: 10px; height: 10px; stroke-width: 2.8; }
.il-pin-slide.is-live .ilm-badge { animation: ilmPop .5s .6s cubic-bezier(.3,1.5,.5,1) both, ilmBob 3.4s 1.2s ease-in-out infinite; }
@keyframes ilmPop { from { opacity: 0; transform: scale(.4) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ilmBob { 0%,100% { transform: none; } 50% { transform: translateY(-3px); } }

/* ── THE OPENING SLIDE: the crest and the services circling it ── */
.ilo { position: relative; display: block; width: 150px; height: 150px; }
.ilo-ring { position: absolute; inset: 14px; border-radius: 50%; border: 1px dashed rgb(var(--acr) / 0.45); }
.ilo-ring.r2 { inset: 40px; border: 1px solid rgb(var(--acr) / 0.22); }
.ilo-spin { position: absolute; inset: 0; display: block; }
.ilo-i { position: absolute; width: 28px; height: 28px; display: block; }
.ilo-ic {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  border-radius: 9px;
  color: var(--ac);
  /* Plain values first: a browser without color-mix() keeps these. */
  background: #15130E;
  box-shadow: inset 0 0 0 1.5px var(--ac), 0 0 14px -3px var(--ac);
  background:
    radial-gradient(110% 85% at 22% 0%, color-mix(in srgb, var(--ac) 34%, transparent), transparent 62%),
    linear-gradient(165deg, #1C1914, #0D0C0A);
  box-shadow:
    inset 0 0 0 1.2px color-mix(in srgb, var(--ac) 70%, transparent),
    0 0 14px -3px var(--ac);
  box-sizing: border-box;
}
.ilo-ic svg { width: 16px; height: 16px; }
.il-pin-slide.is-live .ilo-spin { animation: ilpSpin 42s linear infinite; }
.il-pin-slide.is-live .ilo-ic   { animation: ilpSpin 42s linear infinite reverse; }
@keyframes ilpSpin { to { transform: rotate(360deg); } }
.ilo-core {
  position: absolute; left: 50%; top: 50%;
  width: 68px; height: 68px; margin: -34px 0 0 -34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227,196,99,0.30), rgba(227,196,99,0) 70%);
  box-shadow: 0 0 0 1.5px rgba(227,196,99,0.65), 0 0 34px rgba(227,196,99,0.35);
}
.ilo-core img { width: 60px; height: 60px; border-radius: 50%; display: block; }
.il-pin-slide.is-live .ilo-core { animation: ilpPulse 3.4s ease-in-out infinite; }
@keyframes ilpPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
/* The crest alone, for a promotion with no picture. */
.ilo-solo .ilo-core { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.ilo-solo .ilo-core img { width: 76px; height: 76px; }

/* ── THE DOCK: every service, at a glance ──────────────────────── */
.il-pin-dock {
  position: relative;
  display: flex;
  gap: 2px;
  height: 66px;
  margin-top: 8px;
  padding: 2px 2px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%);
}
.il-pin-dock::-webkit-scrollbar { display: none; }

.il-pin-dk {
  --ac: #E3C463; --acr: 227 196 99; --ac2r: 107 78 14;
  flex: 0 0 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 2px 0 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
/* THE JEWEL TILE (owner, 2026-10-03: the dock "looks very cheap … need
   more unique"). Not a tinted square with a hairline any more: a dark
   glass tile lit from its top corner by the service's own colour, a rim
   of that colour drawn as an inset ring, and the two-tone service mark
   (il-pinned-art.js mark()) in place of the stock stroke icon. */
.il-pin-dk-ic {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 13px;
  overflow: hidden;
  color: var(--ac);
  background:
    radial-gradient(110% 85% at 22% 0%, rgb(var(--acr) / 0.30), transparent 62%),
    linear-gradient(165deg, #1C1914 0%, #0D0C0A 100%);
  box-shadow:
    inset 0 0 0 1px rgb(var(--acr) / 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 4px 10px -6px rgba(0, 0, 0, 0.8);
  box-sizing: border-box;
  transition: transform .3s cubic-bezier(.22,.68,.24,1), background .3s ease, color .3s ease, box-shadow .3s ease;
}
/* The gloss: a soft band of light over the top half of the tile. */
.il-pin-dk-ic::before {
  content: '';
  position: absolute;
  inset: 0 0 52% 0;
  border-radius: 13px 13px 40% 40% / 13px 13px 10px 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.il-pin-dk-ic svg {
  position: relative;
  width: 21px; height: 21px;
  filter: drop-shadow(0 0 6px rgb(var(--acr) / 0.35));
}
.il-pin-dk-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.il-pin-dk-tx {
  max-width: 56px;
  font-family: 'Inter', 'Lato', system-ui, sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ilp-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .3s ease;
}
.il-pin-dk-bar {
  position: relative;
  width: 18px; height: 2.5px;
  border-radius: 2px;
  overflow: hidden;
  background: transparent;
}
.il-pin-dk:hover .il-pin-dk-ic { transform: translateY(-1px); }
.il-pin-dk:focus-visible { outline: none; }
.il-pin-dk:focus-visible .il-pin-dk-ic { box-shadow: 0 0 0 2px var(--ilp-gold); }
.il-pin-dk:active .il-pin-dk-ic { transform: scale(.92); }

/* The active tile fills with its colour, and its bar is the clock. */
.il-pin-dk.is-on .il-pin-dk-ic {
  color: #FFFFFF;
  background:
    radial-gradient(120% 90% at 25% 0%, rgba(255, 255, 255, 0.28), transparent 55%),
    linear-gradient(150deg, var(--ac), rgb(var(--ac2r)));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 0 1.5px rgb(var(--acr) / 0.55),
    0 6px 18px -4px rgb(var(--acr) / 0.7);
  transform: translateY(-1px) scale(1.06);
}
.il-pin-dk.is-on .il-pin-dk-ic svg { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.4)); }
.il-pin-dk.is-on .il-pin-dk-tx { color: #FFFFFF; }
.il-pin-dk.is-on .il-pin-dk-bar { background: rgb(var(--acr) / 0.25); }
.il-pin-dk.is-on .il-pin-dk-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ac);
  transform: scaleX(1);
  transform-origin: left center;
}
.il-pin-car.is-running .il-pin-dk.is-on .il-pin-dk-bar::after { animation: ilpFill var(--ilp-dur, 7s) linear both; }
.il-pin-car.is-paused  .il-pin-dk.is-on .il-pin-dk-bar::after { animation-play-state: paused; }
@keyframes ilpFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* The crest tile: the logo IS the tile. */
.il-pin-dk[data-i] .il-pin-dk-ic img[src*="logo-sm"] { width: 34px; height: 34px; border-radius: 50%; }

/* ── ARROWS — for a mouse only ─────────────────────────────────
   A phone has swipe and the dock. On a desktop the arrows appear on
   the poster's edges when the pointer is over it. */
.il-pin-nav {
  position: absolute;
  top: 50%;
  z-index: 6;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  margin-top: -15px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  color: #FFFFFF;
  background: rgba(10,9,7,0.55);
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.il-pin-nav svg { width: 15px; height: 15px; stroke-width: 2.6; }
.il-pin-nav.prev { left: 8px; }
.il-pin-nav.next { right: 8px; }
.il-pin-stage:hover .il-pin-nav,
.il-pin-nav:focus-visible { opacity: 1; }
.il-pin-nav:hover { background: rgba(10,9,7,0.8); }
.il-pin-nav:active { transform: scale(.9); }
.il-pin-nav:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ilp-gold); }
@media (hover: none) { .il-pin-nav { display: none; } }

/* A single slide is not a carousel. */
.il-pin-car.is-single .il-pin-dock,
.il-pin-car.is-single .il-pin-nav { display: none; }

/* Off screen, or in a background tab: everything decorative stops. */
.il-pin-car.is-away .il-pin-slide *,
.il-pin-car.is-away .il-pin-slide *::after,
.il-pin-car.is-away .il-pin-link::after { animation-play-state: paused !important; }

/* ── SMALL PHONES (≤359px) ─────────────────────────────────────
   The words keep their room; the screen gets smaller and leans off
   the right edge rather than covering them. */
@media (max-width: 359px) {
  .il-pin-car { --ilm-scale: 0.62; --ilm-right: -16px; --ilp-bw: 64%; --ilp-mk: 1.2rem; }
}

/* ── DESKTOP ───────────────────────────────────────────────────
   A taller poster, a bigger wordmark and a bigger screen. The card
   still never exceeds the feed column: it inherits its width from
   .post-card and sets none of its own. */
@media (min-width: 768px) {
  .il-pin-car {
    --ilp-h: 256px;
    --ilp-pad: 18px;
    --ilp-bw: 58%;
    --ilp-bpad: 26px;
    --ilp-mk: 1.9rem;
    --ilp-sub: 0.88rem;
    --ilp-pt: 0.8rem;
    --ilp-cta: 0.8rem;
    --ilm-scale: 1.08;
    --ilm-right: 30px;
  }
  .il-pin-body { gap: 7px; }
  .il-pin-eyebrow { font-size: 0.62rem; }
  .il-pin-pt i { width: 16px; height: 16px; }
  .il-pin-cta { padding: 8px 17px; }
  .il-pin-cta2 { padding: 7px 16px; }
  .il-pin-ctas { margin-top: 4px; gap: 8px; }
  .il-pin-wm { width: 210px; height: 210px; bottom: -56px; }
  .il-pin-dock { height: 70px; gap: 6px; }
  .il-pin-dk { flex-basis: 58px; }
  .il-pin-dk-ic { width: 40px; height: 40px; }
}

/* ── REDUCED MOTION ────────────────────────────────────────────
   No travel, no orbit, no floating, no filling bar. The slide still
   changes — the carousel is the content, not the animation — it simply
   cross-fades and every picture stands still. */
@media (prefers-reduced-motion: reduce) {
  .il-pin-slide { transform: none !important; transition: opacity .12s linear; }
  .il-pin-slide.is-out { transform: none !important; }
  .il-pin-car .il-pin-slide *,
  .il-pin-car .il-pin-slide *::after,
  .il-pin-car .il-pin-link::after { animation: none !important; }
  .il-pin-photo,
  .il-pin-slide.is-live .il-pin-photo { transition: none; transform: none; }
  .il-pin-car.is-running .il-pin-dk.is-on .il-pin-dk-bar::after { animation: none; transform: scaleX(1); }
  .il-pin-cta, .il-pin-cta .il-pin-arrow, .il-pin-dk-ic { transition: none; }
}

/* ── THE ADMIN PREVIEW FRAME ───────────────────────────────────
   Not used on the Feed. It gives admin.html the two shells the real
   card provides there — a bordered post-card and a phone-width column —
   so a preview cannot flatter a promo the Feed will crop. */
.ilp-prev-wrap {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.ilp-prev {
  background: #0E0D0A;
  border: 1px solid rgba(201,162,39,0.28);
  border-radius: 14px;
  overflow: hidden;
  color: #F5F3EE;
  font-family: Lato, 'Segoe UI', system-ui, sans-serif;
  padding-bottom: 2px;
}
.ilp-prev .il-pin-car { padding-top: 10px; }
.ilp-prev-desktop { flex: 1 1 380px; max-width: 560px; }
.ilp-prev-mobile  { flex: 0 0 330px; max-width: 330px; }
.ilp-prev-head {
  background: linear-gradient(90deg, rgba(61,220,132,0.12), transparent);
  padding: 6px 16px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #3DDC84;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(61,220,132,0.15);
}
.ilp-prev-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ad-ink-3, #8A8578);
  margin-bottom: 7px;
  letter-spacing: .6px;
  text-transform: uppercase;
}
/* The mobile preview must obey the PHONE numbers even though the
   admin's own browser is wide, or it would show a desktop crop and
   call it a phone. Every size is a variable, so this is the whole of it. */
.ilp-prev-mobile .il-pin-car {
  --ilp-h: 232px; --ilp-pad: 12px; --ilp-bw: 58%; --ilp-bpad: 14px;
  --ilp-mk: 1.34rem; --ilp-sub: 0.74rem; --ilp-pt: 0.68rem; --ilp-cta: 0.72rem;
  --ilm-scale: 0.74; --ilm-right: -8px;
}
.ilp-prev-mobile .il-pin-body { gap: 5px; }
.ilp-prev-mobile .il-pin-cta { padding: 6px 13px; }