/* ================================================================
   ARTIST DIARY - Design System

   MIGRATION IN PROGRESS - two visual systems are live at once.
   Read §0 of DESIGN-SYSTEM.md before editing.

   NEW (Ajrakh): undyed cloth ground, indigo + madder + iron pigments,
   printed border strips, flat color, borders instead of shadows.
   Live on: the Header, the mobile overlay nav, and `.ad-band-warm`
   (Benefits → Kaise kaam karta hai → Safe hai kya? Haan!).

   OLD (being replaced): white `--bg` + a blue radial glow on
   `body::before`, `#2F58FF` accents, cool grey hairlines, navy-tinted
   shadows. Still live on every section below `.ad-band-warm` and on the
   four standalone HTML pages.

   Build new work on the Ajrakh tokens. There is a visible palette seam
   at the band's bottom edge until the rest is converted; that's known.
   ================================================================ */

:root {
  --navy: #003366;
  --navy-dark: #001F3F;
  --navy-darker: #00162D;
  --navy-hover: #002244;
  --navy-5: rgba(0,51,102,0.05);
  --navy-10: rgba(0,51,102,0.10);
  --saffron: #FF9933;
  --saffron-hover: #E6881E;
  --saffron-light: #FFF7ED;
  --green: #138808;
  --green-light: #ECFDF5;
  --text-dark: #0D1B2E;
  --text-body: #374151;
  --text-muted: #6B7280;
  --text-light: #9CA3AF;
  /* white, was cream #f6f5ec - the page ground is now white + a blue
     glow (see body::before). Changed on the token rather than only on
     `body` so every surface that opted into the page ground
     (.ad-stats, .ad-contact, .ad-bento-card, the phone mock, the cookie
     bar) follows it and no cream panel is left stranded on white. */
  --bg: #FFFFFF;
  --bg-light: #F5F7FA;
  --bg-warm: #FFFBF7;
  --border: #E5EBF5;
  --border-light: #F0F3F8;
  --shadow-sm: 0 2px 8px rgba(0,51,102,0.05);
  --shadow-md: 0 4px 20px rgba(0,51,102,0.08);
  --shadow-lg: 0 12px 40px rgba(0,51,102,0.12);
  --shadow-xl: 0 20px 60px rgba(0,51,102,0.16);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --font: 'Anek Gujarati', system-ui, -apple-system, sans-serif;
  --nav-h: 67px;
  --max-w: 1200px;

  /* ── Ajrakh pigment palette ──
     Ajrakh is the resist block-print of Kutch, Gujarat - the same region
     the hero photo's Garba comes from, which is why it was chosen over a
     generic "Indian" look. The craft uses THREE dye colors on undyed
     cloth: indigo, madder root red, and iron black, with white resist
     doing the fine detail. `--ochre` is the one modern extension.
     Named after the materials on purpose: it's much harder for a
     "blue-500" to creep into a palette where everything else is a dye.
     Two rules that come with these, both from how the cloth actually
     works - break either and it stops reading as Ajrakh:
     1. The GROUND stays undyed (`--cloth`). Color belongs in the motif,
        not in large fields. On a backlit screen this matters even more
        than on cloth: India's traditional palette is high-chroma because
        it evolved for a high-sun climate that visually mutes it, and a
        monitor does the opposite.
     2. Flat pigment only. No gradients anywhere in this palette's
        sections - printed cloth has no gradients. */
  --cloth: #F7F0E4;        /* undyed cloth - page ground              */
  --cloth-deep: #EFE4D2;   /* a second, deeper undyed tone for bands  */
  --resist: #FDFAF4;       /* white resist - card/paper surfaces      */
  --neel: #1E3A5F;         /* indigo                                  */
  --neel-soft: #E2E6EE;    /* indigo at badge strength                */
  --madder: #9E3B2E;       /* madder root red                         */
  --madder-soft: #F2DFD9;
  --iron: #3A322C;         /* iron black                              */
  --iron-soft: #E4DED6;
  --ochre: #B07A1E;        /* modern Ajrakh extension                 */
  --ochre-soft: #F5E7C9;
  --cloth-border: #DDD0BA; /* hairline, warm - never a cool grey      */

  /* ── Design-system tokens - see DESIGN-SYSTEM.md ── */
  --section-padding-y: 100px;
  --section-title-gap: 30px;
  --title-size-mobile: 32px;
  --title-size-desktop: 48px;
  --title-weight: 500;
  --ps-card-radius: 12px;
  --ps-title-size: 22px;
  --ps-title-weight: 600;
  --ps-row-radius: 8px;
  --ps-checkbox-size: 20px;
  --ps-checkbox-icon-size: 18px;
  --ps-checkbox-radius: 4px;
  --ps-problem-color: #DC2626;
  --ps-solution-color: #16A34A;
  --ps-divider-color: #2a2a2a;
  --dark-surface: #00162D;
}

@media (max-width: 767px) {
  :root { --section-padding-y: 56px; }
}
@media (max-width: 480px) {
  :root { --section-padding-y: 44px; }
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html {
  scroll-behavior: smooth;
  /* overflow-x: clip, not hidden - hidden (or auto/scroll) on the root
     element makes html/body establish their own scroll container, which
     silently breaks position:sticky for every descendant in the page
     (a well-known Chromium/WebKit behavior). clip still prevents
     horizontal overflow/scrollbars but isn't a scroll container, so it
     doesn't have that side effect. Needed by "Run Every Event Like a
     Pro"'s scroll-pinned stage (DESIGN-SYSTEM.md §4) - don't revert to
     hidden here. */
  overflow-x: clip;
}
/* `scrollbar-color` for Firefox now lives with the rest of the scrollbar
   rules further down, so the two engines' versions sit together. */
body {
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font);
  line-height: 1.6;
  overflow-x: clip; /* see the html rule above - clip, not hidden, for the same sticky reason */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
/* ── Shared cream "glow" backdrop - ONE copy for the whole page ──
   Several sections (Hero+Discover, "Run Every Event Like a Pro" + App
   Preview, How It Works, Contact) all use this same off-white + soft
   blue/orange radial-blob look. Each one used to paint its OWN
   independent copy of the identical 6-gradient pattern in its own
   `position:relative` box (`.ad-band-hero::before`, `.ad-preview::before`,
   `.ad-how::before`, `.ad-contact::before`, etc). That's what caused the
   reported "the gradient looks bad between sections" bug: each section
   restarts the same blob pattern from its own top edge, so two such
   sections back to back visibly repeat/reset at the seam - reads as two
   stacked boxes with a copy-pasted pattern, not one continuous ambient
   background, exactly when the user scrolls from one into the next.

   Fixed instead by moving this to ONE `position:fixed` layer on `body`,
   sized to the full viewport and positioned in viewport space rather
   than any one section's local box. Every section that wants this look
   now simply has a TRANSPARENT background and lets this one shared,
   never-repeating layer show through - so any number of them, adjacent
   or not, automatically read as one continuous backdrop, with no
   per-pair fix needed and no seam possible (there's only one instance of
   the pattern on the whole page). Sections that want a different look
   (dark Audience/Reviews, black Footer, translucent header) simply paint
   their own opaque background over this layer as normal - CSS box
   painting hides whatever's behind regardless of this layer's negative
   z-index.
   `z-index: -1` + `position: fixed` on a `body`-level pseudo-element
   paints behind body's normal-flow children without needing any
   particular section to be a positioned/stacking-context ancestor (a
   plain block child of `body` participates in the same root stacking
   context body creates, so it reliably paints above this negative
   z-index layer everywhere on the site, not just where explicitly
   marked `position:relative`). Unaffected by any section's own
   `overflow:hidden`/`clip` - those only clip that section's own
   children, not a `body`-level fixed sibling. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* White + blue. The two saffron blobs that used to sit at 88% 4% and
     14% 94% were what made this read as "off-white" rather than white -
     they're now blue-family like the rest, and the base is white
     (var(--bg)). Alphas are nudged up slightly because cream was
     muting them; on white the same values read weaker. */
  background:
    radial-gradient(ellipse 45% 30% at 15% 6%, rgba(47,88,255,0.14) 0%, transparent 70%),
    radial-gradient(ellipse 40% 26% at 88% 4%, rgba(47,88,255,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 26% at 82% 46%, rgba(47,88,255,0.11) 0%, transparent 70%),
    radial-gradient(ellipse 35% 22% at 6% 55%, rgba(28,53,153,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 45% 26% at 14% 94%, rgba(28,53,153,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 42% 24% at 88% 96%, rgba(47,88,255,0.10) 0%, transparent 70%),
    var(--bg);
}

/* ── REMOVED: sitewide cursor-follow dot grid ──
   Deleted by explicit request ("remove that curser dotted effect") as
   part of the Ajrakh direction. Two `position: fixed; z-index: -1`
   layers used to cover every section of every page: `body::after` (a dim
   always-on blue dot grid) and `.ad-cursor-dots` (a brighter blue dot
   layer mask-clipped to a 120px circle tracking the cursor, updated by
   `assets/js/cursor-dots.js`). Both are gone, and the `<script>` tag was
   removed from all four HTML pages.
   Why it doesn't come back: a cursor-tracking dot grid is tech-demo
   texture - it's the visual language of a developer-tools landing page,
   and it was one of the things making the site read as a generic Western
   SaaS product rather than an Indian platform. Ajrakh's texture comes
   from printed cloth instead (see `.ad-band-warm`), which is also why the
   replacement is a woven paper grain, not another dot lattice.
   `assets/js/cursor-dots.js` is left on disk, unreferenced, rather than
   deleted - restoring it means re-adding one `<script>` tag plus these
   two rules. Earlier per-section versions of this effect (Hero's
   `.ad-hero-dots-hover`, How It Works' `.ad-how-bg-dots`) were already
   removed long before this; don't reintroduce those either. */

h1,h2,h3,h4,h5,h6 { font-family: var(--font); font-weight: 700; line-height: 1.2; color: var(--text-dark); }
a { text-decoration: none; color: inherit; transition: color 0.2s var(--ease); }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
/* iOS/Safari (and Android WebView) apply their own native rounded-corner
   + inset-shadow chrome to form controls regardless of custom
   background/border/radius set elsewhere - reset it sitewide so every
   input/textarea/button renders identically across browsers instead of
   Safari's own control style showing through underneath ours. No native
   `<select>` on this site (the language switcher is custom buttons), so
   there's no "missing native dropdown arrow" tradeoff to worry about. */
input, textarea, button {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  border-radius: 0;
}
/* -webkit-tap-highlight-color: the grey/blue flash Android Chrome and
   older iOS Safari show on tap for any link/button - every interactive
   element on this site already has its own custom hover/active/focus
   styling, so this default flash only ever looks like an unstyled glitch
   on top of it, never a needed affordance. */
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }

.ad-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Scrollbar: a printed Ajrakh border strip, running vertically ──

   DESKTOP ONLY, which is where it already was - below 1024px the bar is
   hidden, because mobile scrollbars are transient overlays the OS draws
   and styling them is neither reliable nor wanted.

   This is the band's `tavith`/`wat wal` border block turned 90°: undyed
   cloth track with the same woven grain as `.ad-band-warm`, and an indigo
   thumb carrying white-resist diamonds between two madder rules. The
   scrollbar is the one chrome element that sits beside every section, so
   a printed strip is the honest thing for it to be. Superseded a solid
   `#2F58FF` thumb on a cool `--bg-light` track - the last old-system
   colour in the page furniture.

   **Hex values are hardcoded inside the data URI on purpose**: a `url()`
   is an opaque string to CSS, so `var(--neel)` does not resolve in there.
   Same constraint the band's border strip works under. If the palette
   tokens change, these two SVGs have to be edited by hand - indigo
   `#1E3A5F`, madder `#9E3B2E`, cloth `#F7F0E4`. */
@media (min-width: 1024px) {
  /* 14px, not 8px: the motif needs room to read as a diamond rather than
     a smudge. Below about 12px it flattens out, the same lesson the
     header's 8px strip recorded. */
  ::-webkit-scrollbar { width: 14px; height: 14px; }

  ::-webkit-scrollbar-track {
    background-color: #F7F0E4;
    background-image:
      repeating-linear-gradient(0deg,  rgba(58,50,44,0.03) 0 1px, transparent 1px 3px),
      repeating-linear-gradient(90deg, rgba(58,50,44,0.03) 0 1px, transparent 1px 3px);
    /* Same 3x3 tile pin as every other place this weave appears - see §1
       rule 2 in DESIGN-SYSTEM.md for why an unpinned repeat drifts. */
    background-size: 3px 3px, 3px 3px;
    border-left: 1px solid #DDD0BA;
  }

  /* Flat, square, no radius and no shadow - it is a printed strip, not a
     floating pill. `min-height` guarantees at least two whole diamonds
     even on a very long page, where the thumb gets short. */
  ::-webkit-scrollbar-thumb {
    min-height: 56px;
    border: 0;
    border-radius: 0;
    background-color: #1E3A5F;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='24' viewBox='0 0 14 24'%3E%3Cpath d='M1.4 0v24M12.6 0v24' stroke='%239E3B2E' stroke-width='1.2'/%3E%3Cpath d='M7 5 L10.6 12 L7 19 L3.4 12 Z' fill='%23F7F0E4'/%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-position: center top;
  }
  /* Hover deepens the dye rather than changing hue - the motif stays put. */
  ::-webkit-scrollbar-thumb:hover { background-color: #17304F; }
  /* The corner where a vertical and horizontal bar meet: plain cloth, so
     it doesn't render as a pale grey square against the track. */
  ::-webkit-scrollbar-corner { background-color: #F7F0E4; }

  /* Firefox has no pattern support for scrollbars - only two colours - so
     it gets the flat indigo-on-cloth version of the same idea.

     THE `@supports` GUARD IS LOAD-BEARING, don't drop it. Since Chrome
     121, setting the standard `scrollbar-color` opts the element into the
     standard scrollbar and **disables `::-webkit-scrollbar` styling
     altogether**. With this declared unguarded, every rule above was
     silently ignored in Chrome and the bar rendered as a plain two-tone
     system scrollbar - the motif never drew. Caught by zooming into a
     screenshot of the bar, not by reading the CSS.
     `selector(::-webkit-scrollbar)` is true in Chrome and false in
     Firefox, so this lands only where it is the only option. */
  @supports not selector(::-webkit-scrollbar) {
    html { scrollbar-color: #1E3A5F #F7F0E4; }
  }
}
@media (max-width: 1023px) {
  ::-webkit-scrollbar { display: none; }
  body { scrollbar-width: none; }
}

/* ================================================================
   HEADER
================================================================ */
/* Solid undyed cloth - the same ground as "Aapko kya milega?"
   (`.ad-band-warm`), by explicit request, with the frosted-glass
   treatment removed outright.
   Superseded: `rgba(255,255,255,0.6)` + `backdrop-filter: blur(16px)`
   (and a matching `@supports` branch that re-stated the same value, now
   pointless and deleted with it). Before that, a translucent cream.
   Why the blur had to go rather than just be recolored: frosted glass is
   a screen-material effect - it exists to show content sliding under a
   translucent pane. Ajrakh is printed cloth, which is opaque; a blurred
   header over a cloth ground reads as two different material systems
   stacked. Solid also fixes a real legibility problem the translucency
   had over the hero photo, where nav labels sat on whatever happened to
   be behind them.
   The grain matches the band's so the header reads as the same bolt of
   cloth, not a separate panel. */
.ad-header {
  position: fixed; top: 0; left: 0; width: 100%;
  background-color: var(--cloth);
  background-image:
    repeating-linear-gradient(0deg,  rgba(58,50,44,0.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(58,50,44,0.022) 0 1px, transparent 1px 3px);
  /* Same 3x3 tile pin as `.ad-band-warm` - see the long note there. This
     bar is meant to read as the same bolt of cloth as the band, so if one
     is pinned and the other isn't, the two weaves drift apart. */
  background-size: 3px 3px, 3px 3px;
  border-bottom: 1px solid var(--cloth-border);
  z-index: 1000;
  transition: box-shadow 0.3s ease, transform 0.35s var(--ease);
}
/* Printed Ajrakh rule along the header's bottom edge - the element that
   makes the bar read as printed cloth rather than merely beige. It also
   takes over the job of the tricolor stripe that used to sit here
   (removed long ago).
   Drawn at its OWN 8px scale with a matching `viewBox`, NOT the band's
   14px motif scaled down: squeezing a 14-unit viewBox into 7px flattened
   the diamonds into unreadable dashes. Any future size needs its own
   geometry too - this motif doesn't survive non-uniform scaling.
   It sits INSIDE the bar (`bottom: 0`), so it always prints on cloth.
   Hanging it below the bar put it over the hero photo, where the motif's
   undyed gaps showed the dark photo through and it read as noise. */
.ad-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 8px; pointer-events: none;
  background-repeat: repeat-x; background-position: center;
  background-size: 48px 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='8' viewBox='0 0 48 8'%3E%3Cpath d='M0 0.6h48M0 7.4h48' stroke='%239E3B2E' stroke-width='0.9'/%3E%3Cpath d='M0 4 L6 1.4 L12 4 L6 6.6 Z' fill='%231E3A5F'/%3E%3Cpath d='M24 4 L30 1.4 L36 4 L30 6.6 Z' fill='%231E3A5F'/%3E%3Cpath d='M12 4 L18 1.4 L24 4 L18 6.6 Z' fill='none' stroke='%239E3B2E' stroke-width='0.8'/%3E%3Cpath d='M36 4 L42 1.4 L48 4 L42 6.6 Z' fill='none' stroke='%239E3B2E' stroke-width='0.8'/%3E%3C/svg%3E");
}
.ad-header.scrolled { box-shadow: 0 4px 24px rgba(58,50,44,0.10); }
.ad-header.hidden { transform: translateY(-100%); }
.ad-header-inner {
  display: flex; justify-content: space-between; align-items: center;
  height: 64px; max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
}
.ad-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ad-logo img { height: 34px; width: 34px; border-radius: 8px; }
/* One full lockup image (assets/All new ad logo blk.svg, 285x56 ≈ 5.1:1).
   Sized by HEIGHT with `width: auto` - never a fixed width - so the
   aspect ratio does the work and the mark can't stretch or outgrow the
   64px header bar on any breakpoint. `max-width` is the safety net on
   very narrow phones. Per-breakpoint heights: 34px desktop, 30px ≤900px,
   26px ≤480px (see the RESPONSIVE block). */
.ad-logo img.ad-logo-svg {
  height: 34px; width: auto; max-width: 190px;
  border-radius: 0; flex-shrink: 0; display: block;
}

.ad-nav { display: flex; gap: 32px; align-items: center; }
.ad-nav-link {
  font-size: 17px; font-weight: 500; color: var(--iron);
  transition: color 0.2s ease; position: relative; padding: 4px 0;
}
.ad-nav-link:hover { color: var(--madder); }
.ad-nav-link::after {
  /* was saffron - explicit request to make the hover underline black */
  content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px;
  background: var(--madder); border-radius: 1px; transition: width 0.25s var(--ease);
}
.ad-nav-link:hover::after { width: 100%; }

.ad-header-actions { display: flex; align-items: center; gap: 12px; }
/* Website button (desktop header) - shares the Hero ghost button's shape
   and its blink+pop animation (`.ad-phero-btn`/`.ad-phero-btn-ghost`),
   but NOT its colors: on the header's light background the hero's
   white-on-translucent-white read as almost invisible, so this is a
   light-grey outline with black icon + text. Height matches the Play
   Store badge next to it (38px) so the pair lines up.
   Selectors are compounded (`.ad-header-website.ad-phero-btn-ghost`, two
   classes) on purpose: the `.ad-phero-btn-ghost` rules they override are
   single-class AND defined later in this file, so a bare
   `.ad-header-website` would tie on specificity and lose on source
   order. */
.ad-header-website.ad-phero-btn-ghost {
  width: auto; height: 38px; padding: 0 18px; font-size: 14px;
  background: transparent; color: var(--iron);
  border: 1.5px solid var(--cloth-border);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ad-header-website.ad-phero-btn-ghost:hover { background: rgba(30,58,95,0.06); border-color: var(--neel); }
/* halo pulse behind it recolored to match (the shared ghost rule's white
   halo is invisible against a white header) */
.ad-header-website.ad-phero-btn-ghost::after { background: rgba(0,0,0,0.14); }

/* Desktop-only Play Store badge link, next to Login - the real official
   Google Play badge artwork (assets/google-play-badge.svg), which already
   has its own black rounded-rect background baked in, so this container
   adds no chrome of its own beyond sizing/hover. Superseded a plain
   Lucide "smartphone" glyph in a bordered square button. */
.ad-btn-playstore {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; border-radius: 10px; overflow: hidden;
  transition: transform 0.2s var(--ease);
}
.ad-btn-playstore:hover { transform: translateY(-1px); }
.ad-btn-playstore img { height: 100%; width: auto; display: block; }

.ad-menu-toggle {
  /* full circle, was var(--radius-sm) (8px, a rounded square) */
  display: none; width: 38px; height: 38px; border-radius: var(--radius-full);
  /* indigo on cloth - was navy-tinted (var(--navy-5)/var(--navy-10)),
     which is a different, cooler blue than the Ajrakh indigo */
  background: rgba(30,58,95,0.06); border: 1px solid var(--cloth-border);
  color: var(--neel); align-items: center; justify-content: center;
}
.ad-menu-toggle svg { width: 18px; height: 18px; }

/* Indian tricolor stripe + zigzag under the header - removed by explicit
   request. .ad-stripe/.ad-stripe-s/-w/-g/.ad-header-zigzag are no longer
   rendered anywhere (ADHeader in top-sections.jsx), so their rules are
   gone too rather than left as dead CSS. */

/* Still used by the OLD pen-text Hero's own Login button
   (`.ad-hero-cta .ad-btn-login`, further down) - the header's own Login
   was replaced by a Website button (`.ad-header-website`, reusing the
   Photo Hero's `.ad-phero-btn`/`.ad-phero-btn-ghost` classes) above, not
   this one. */
.ad-btn-login {
  display: inline-flex; align-items: center; gap: 6px;
  background: #2F58FF; color: #fff; font-size: 13px; font-weight: 600;
  padding: 8px 20px; border-radius: 10px;
  transition: all 0.2s var(--ease); border: 2px solid #2F58FF;
}
.ad-btn-login:hover { background: #1C3599; border-color: #1C3599; transform: translateY(-1px); }
.ad-btn-login svg { width: 14px; height: 14px; }

/* Mobile nav overlay - background matches "Who is Artist Diary for?"
   (.ad-band-audience: dark-surface + blue radial glow at 15% 0%) by
   explicit request; superseded a flat var(--navy-dark) fill. */
/* z-index 1001, ABOVE .ad-header's 1000 - found by testing (real bug,
   not theoretical): with this below the header, the header (opaque,
   painted later/higher) covered the top strip of this full-screen
   overlay when open, hiding .ad-mobile-close (top-right, meant to be the
   only way to close the menu) behind the header's own hamburger button -
   same corner, wrong element on top. The header's hamburger button was
   still visible and tappable *underneath* nothing changed, so the menu
   looked stuck open with no visible way to close it. Confirmed via
   screenshot during cross-browser/mobile testing, not by inspection. */
/* LIGHT menu on undyed cloth - same ground as "Aapko kya milega?", by
   explicit request, with the content flipped to dark.
   Superseded `var(--dark-surface)` + a blue radial glow at 15% 0% (which
   matched `.ad-band-audience`). That was a full inversion, not a
   background swap: every value in this menu was tuned for a dark panel -
   `rgba(255,255,255,0.85)` links, a white-on-white-alpha close button,
   and white ghost-button text. All of them had to flip together, and if
   this menu is ever put back on a dark ground, flip the whole set back.
   The gradient went for the same reason as everywhere else in the Ajrakh
   palette: printed cloth has no gradients (§1 rule 2). The Ajrakh strip
   below replaces it as the menu's one decorative element. */
.ad-mobile-nav {
  position: fixed; inset: 0; z-index: 1001;
  background-color: var(--cloth);
  background-image:
    repeating-linear-gradient(0deg,  rgba(58,50,44,0.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(58,50,44,0.022) 0 1px, transparent 1px 3px);
  /* Same 3x3 tile pin as `.ad-band-warm` and `.ad-header`. */
  background-size: 3px 3px, 3px 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 32px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
  overflow: hidden;
}
/* Printed border across the top of the open menu - same block as the
   header's and the band's, full 14px height here since a full-screen
   panel can carry it. */
.ad-mobile-nav::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 14px; pointer-events: none; z-index: 0;
  background-repeat: repeat-x; background-position: center;
  background-size: 48px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0 1.2h48M0 12.8h48' stroke='%239E3B2E' stroke-width='1.2'/%3E%3Cpath d='M12 7 L18 2.6 L24 7 L18 11.4 Z' fill='%231E3A5F'/%3E%3Cpath d='M36 7 L42 2.6 L48 7 L42 11.4 Z' fill='%231E3A5F'/%3E%3Cpath d='M0 7 L6 2.6 L12 7 L6 11.4 Z' fill='%231E3A5F'/%3E%3Cpath d='M24 7 L30 2.6 L36 7 L30 11.4 Z' fill='none' stroke='%239E3B2E' stroke-width='1'/%3E%3C/svg%3E");
}
.ad-mobile-nav.open { opacity: 1; pointer-events: auto; }
.ad-mobile-nav a, .ad-mobile-nav-actions {
  position: relative; z-index: 1;
}
.ad-mobile-nav a {
  font-size: 22px; font-weight: 700; color: var(--iron);
  transition: color 0.2s ease;
}
.ad-mobile-nav a:hover { color: var(--madder); }
.ad-mobile-close {
  position: absolute; top: 22px; right: 16px; width: 44px; height: 44px;
  border-radius: 50%; background: var(--resist); color: var(--iron);
  border: 1px solid var(--cloth-border);
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
.ad-mobile-close svg { width: 20px; height: 20px; }

/* Play store + Website buttons in the mobile menu - both now reuse the
   Photo Hero's own `.ad-phero-btn`/`-primary`/`-ghost` classes verbatim
   (superseded the old filled-blue "Login" button + real Google Play
   badge artwork pairing, which were two different widths/heights/radii
   and so couldn't match each other). Play store first, Website second -
   explicit sort order. */
.ad-mobile-nav-actions {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 220px;
}
/* Full Hero-button size here. `.ad-phero-btn`'s base width is
   `min(48%, 170px)` - that 48% resolves against THIS 220px column, not
   the viewport, so the buttons came out ~105px wide and looked squeezed.
   Pin the width instead so they match the Hero's own 170x50. */
.ad-mobile-nav-actions .ad-phero-btn { width: 170px; height: 50px; }
/* `.ad-mobile-nav-actions .ad-phero-btn` (2 classes) is needed to
   out-specificity the generic ".ad-mobile-nav a" rule above (1 class +
   1 type selector) - same fight noted historically for this wrapper,
   now against `.ad-phero-btn`'s own font-size/weight instead of the old
   `.ad-mobile-nav-login`/`-playstore` classes. Colors need the same
   per-variant guard, including on `:hover` (`.ad-mobile-nav a:hover` is
   class+type+pseudo-class, which otherwise still out-specifies a bare
   `.ad-phero-btn-ghost:hover` and would force the Play store button's
   dark text white-on-white). */
.ad-mobile-nav-actions .ad-phero-btn { font-size: 15px; font-weight: 500; }
/* Play store button: BLACK, was white - explicit request, and required
   once the menu went light, since a white button on undyed cloth has
   almost no edge. Iron black is the palette's black (a dye), not #000.
   The `:hover` guard is not redundant: `.ad-mobile-nav a:hover` is
   class + type + pseudo-class, so it out-specifies a bare
   `.ad-phero-btn-primary:hover` and would otherwise repaint the label. */
.ad-mobile-nav-actions .ad-phero-btn-primary,
.ad-mobile-nav-actions .ad-phero-btn-primary:hover {
  background: var(--iron); color: var(--resist); border-color: var(--iron);
}
/* Website (ghost) button: was white text for the dark menu - invisible on
   cloth. Now an outlined button in the same idiom as the desktop header's. */
.ad-mobile-nav-actions .ad-phero-btn-ghost,
.ad-mobile-nav-actions .ad-phero-btn-ghost:hover {
  color: var(--iron); background: transparent; border: 1.5px solid var(--cloth-border);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ================================================================
   BUTTONS (shared)
================================================================ */
.ad-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--radius-md); font-weight: 600;
  font-size: 14px; border: 2px solid transparent; transition: all 0.2s var(--ease);
  white-space: nowrap; cursor: pointer;
}
.ad-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.ad-btn-lg { padding: 14px 28px; font-size: 15px; border-radius: var(--radius-lg); }
.ad-btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: 0 4px 12px rgba(0,51,102,0.25); }
.ad-btn-primary:hover { background: var(--navy-hover); border-color: var(--navy-hover); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,51,102,0.35); }
.ad-btn-saffron { background: var(--saffron); color: #fff; border-color: var(--saffron); box-shadow: 0 4px 12px rgba(255,153,51,0.3); }
.ad-btn-saffron:hover { background: var(--saffron-hover); border-color: var(--saffron-hover); transform: translateY(-1px); }
.ad-btn-indigo {
  background: linear-gradient(135deg, #2F58FF 0%, #1C3599 100%);
  color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(47,88,255,0.3);
}
.ad-btn-indigo:hover {
  background: linear-gradient(135deg, #1C3599 0%, #2F58FF 100%);
  transform: translateY(-1px); box-shadow: 0 6px 18px rgba(47,88,255,0.4);
}
.ad-btn-white { background: #fff; color: var(--navy); border-color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.ad-btn-white:hover { background: #F0F4F8; transform: translateY(-1px); }
.ad-btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.ad-btn-outline-white:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.ad-btn-ghost { background: transparent; color: var(--navy); border-color: var(--border); }
.ad-btn-ghost:hover { background: var(--navy-5); border-color: var(--navy); }

/* ================================================================
   SECTION UTILITIES
================================================================ */
.ad-section { padding: var(--section-padding-y) 0; }
.ad-section-header { text-align: center; margin-bottom: var(--section-title-gap); }
.ad-section-header h2 {
  display: inline-block;
  font-size: var(--title-size-mobile); font-weight: var(--title-weight); color: var(--text-dark);
  margin-bottom: 14px; letter-spacing: -0.02em;
}
.ad-section-header p {
  font-size: 17px; color: var(--text-muted); max-width: 560px; margin: 0 auto;
  text-wrap: balance;
}
@media (min-width: 1024px) {
  .ad-section-header h2 { font-size: var(--title-size-desktop); }
}

/* Shared decorative border strip - used by AppPreview (bottom) and Footer (top) */
.ad-feat-border {
  position: absolute; left: 0; right: 0; height: 23px;
  background-color: #f6f5ec;
  background-image: url('assets/Border-2.svg');
  background-repeat: repeat-x; background-position: center; background-size: auto 11px;
}
.ad-feat-border-top { top: 0; }
.ad-feat-border-bottom { bottom: 0; }

/* ── Hero + Discover band - ONE continuous background spanning both sections
   (see .ad-band-hero) so the glow doesn't reset at the section boundary.
   .ad-band-organizers-preview (wraps "Run Every Event Like a Pro" + App
   Preview) shares this exact same background - same selector block - per
   the "use the same background as the hero section" request. ── */
/* Background is transparent here on purpose - see the shared
   `body::before` glow layer near the top of this file. These bands used
   to each paint their own independent copy of the same glow in a local
   `::before`; that's what caused the seam this section's neighbors used
   to show at their shared border. Leaving `position:relative` (still
   needed: `.ad-band-organizers-preview` is the containing block for
   "Run Every Event Like a Pro"'s scroll-pinned stage card) but with a
   transparent background, the one shared body-level layer shows through
   continuously instead. */
.ad-band-hero, .ad-band-organizers-preview {
  position: relative;
  background: transparent;
}
.ad-band-hero .ad-hero, .ad-band-hero .ad-discover,
.ad-band-organizers-preview .ad-organizers, .ad-band-organizers-preview .ad-preview { position: relative; }

/* ── Discover - Search / Portfolio / Connect ── */
.ad-discover { overflow: hidden; }
.ad-discover > .ad-container { position: relative; z-index: 1; }

.ad-discover-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ad-discover-card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 36px 28px; text-align: left;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  will-change: transform;
}
.ad-discover-card:hover {
  box-shadow: 0 24px 50px rgba(47,88,255,0.18);
}
.ad-discover-card-glow {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 0;
  background: radial-gradient(circle 200px at var(--mx, 50%) var(--my, 50%), rgba(47,88,255,0.16), transparent 70%);
  transition: opacity 0.3s ease;
}
.ad-discover-card:hover .ad-discover-card-glow { opacity: 1; }
.ad-discover-card-num {
  position: absolute; top: 8px; right: 20px; z-index: 0;
  font-size: 56px; font-weight: 900; color: rgba(47,88,255,0.07);
  line-height: 1; letter-spacing: -0.02em; pointer-events: none;
  transition: color 0.35s var(--ease), transform 0.35s var(--ease);
}
.ad-discover-card:hover .ad-discover-card-num { color: rgba(47,88,255,0.14); transform: translateY(-4px); }
.ad-discover-card-icon {
  position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: 5px;
  background: #2F58FF;
  color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.ad-discover-card:hover .ad-discover-card-icon { transform: scale(1.1) rotate(-6deg); }
.ad-discover-card h3 { position: relative; z-index: 1; font-size: 22px; font-weight: 500; margin-bottom: 8px; color: #2a2a2a; }
.ad-discover-card p { position: relative; z-index: 1; font-size: 16px; color: #2a2a2a; }

@media (max-width: 900px) { .ad-discover-grid { gap: 20px; } }
@media (max-width: 600px) {
  .ad-discover-grid { grid-template-columns: 1fr; gap: 16px; }
  .ad-discover-card { padding: 28px 22px; }
  .ad-discover-card:hover { transform: none !important; }
}
@media (max-width: 480px) {
  .ad-discover-card-icon { width: 46px; height: 46px; }
  .ad-discover-card h3 { font-size: 17px; }
}

/* ================================================================
   RUN EVERY EVENT LIKE A PRO - scroll-pinned card stage.
   Core Modules and Management render the identical ADOrgScrollStack
   component (see mid-sections.jsx): a full-width stage card (numbered
   badge, icon badge, big title, description, watermark index number)
   plus a pill nav row.

   **Desktop only (≥901px, min-width block below)**: the stage pins
   (`position: sticky`) inside a tall track - plain scrolling (wheel)
   advances the active card; once the last card has scrolled past, the
   stage un-pins and scrolls away, revealing the next zone. No
   overflow:hidden anywhere in this section's ancestor chain - that
   would break the sticky pin. The pin's `top` is `var(--nav-h)` (the
   fixed header's own height), not `0`, and its `height` is
   `calc(100vh - var(--nav-h))`, not `100vh` - pinning at literal `top:0`
   put the card's own top edge underneath the fixed header (the header
   sits at z-index above normal content, so it visually covered the top
   of the card) - see DESIGN-SYSTEM.md §4 for the "card half behind the
   header" report this fixed.

   **Mobile/tablet (base rules below, <901px) - superseded, no scroll-
   pin at all now**: this used to share the exact same sticky-pin/
   scroll-driven mechanism as desktop. Removed by explicit request -
   pinning a `100vh`-tall track on mobile pushed the card partly behind
   the browser's own UI chrome too (the classic mobile `100vh` gotcha:
   `100vh` sizes to the LARGEST possible viewport, not the actually-
   visible area once the browser's address/toolbar are factored in) on
   top of the header-overlap issue above. Mobile/tablet is now plain
   block flow - no track height, no sticky pin - and the stage card is
   driven **only** by tapping the pill row (or keyboard); scrolling the
   page past this section is just... scrolling past it, same as any
   other section. If older notes describe mobile/tablet scroll-driven
   card switching, that's stale - don't reintroduce a tall track or
   `position: sticky` below `901px`.
   - **Dot pagination + prev/next arrows**: still desktop only
     (`.ad-org-stage-footer`), hidden on mobile/tablet - navigation there
     is the pill row only now (scrolling never did anything there even
     before this change removed the mechanism, since dots/arrows were
     already the only *other* nav and those were already mobile-hidden).
   - **Pill nav**: mobile/tablet is full-bleed with its own 16px inset
     (negative-margins past the zone's 20px container) and centers the
     active pill; desktop wraps in place inside the zone's 56px padding,
     no scrolling.
   - **Top-row layout and badge positions** are still the same structure
     at both breakpoints (only sizes differ: `20px`/`56px` eyebrow, etc).
   See DESIGN-SYSTEM.md §4.
================================================================ */
.ad-organizers { background: transparent; position: relative; padding: 0; }

/* Headline - centered, matches sitewide .ad-section-header h2 exactly */
.ad-org-intro { padding-top: 60px; padding-bottom: 24px; }

/* Artist / Event organizer tabs - same structure/behavior as the
   Audience section's tabs (.ad-aud-tabs/.ad-aud-tab - "Who is Artist
   Diary for?"), applied here by explicit request. NOT a reuse of those
   exact classes: Audience's tab colors are translucent-white, built for
   its dark background, and would be barely legible on this section's
   cream background - same 200px/160px-mobile width, 12px radius, flat
   blue active fill, font-weight 400, no shadow, just light-appropriate
   default colors (white bg, var(--border) border, muted text, matching
   .ad-org-pillnav-item's own resting style elsewhere in this section). */
.ad-org-tabs {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 24px;
}
.ad-org-tab {
  display: inline-flex; align-items: center; justify-content: center;
  width: 200px; padding: 11px 22px; border-radius: 12px;
  border: 1px solid var(--border); background: #fff; color: #6B7280;
  font-family: var(--font); font-size: 14px; font-weight: 400;
  cursor: pointer; transition: all 0.22s ease;
}
.ad-org-tab:hover { border-color: #2F58FF; color: #2a2a2a; }
.ad-org-tab.active { background: #2F58FF; border-color: #2F58FF; color: #fff; }
@media (max-width: 900px) {
  .ad-org-tabs { gap: 8px; }
  .ad-org-tab { font-size: 13px; width: 160px; padding: 9px 16px; }
}

/* Zones - wider-than-sitewide inner container for the "full width" stage */
.ad-org-zone { padding: 32px 0; }
.ad-org-zone:last-child { padding-bottom: 60px; }
.ad-org-zone-inner { max-width: 1440px; margin: 0 auto; padding: 0 20px; }
/* Connection zone hidden on the Artist tab this way (not by omitting the
   element) so its .ad-reveal card never gets remounted on a tab switch -
   see the comment in ADForOrganizers (mid-sections.jsx) for why that
   matters. Stays in DOM order, so .ad-org-zone:last-child (Export) is
   unaffected by display:none here. */
.ad-org-zone-hidden { display: none; }

/* Standalone eyebrow above the card - retired on every breakpoint now;
   the zone label lives inside the card everywhere (.ad-org-stage-eyebrow
   below). Kept in the DOM (ADForOrganizers still renders it) only so we
   don't have to touch that markup - always hidden here. */
.ad-org-eyebrow { display: none; }

/* ── Track / pin - mobile/tablet: plain block flow, no scroll-pin (see
   the section-level comment above for why). `.ad-org-stage-pin` is no
   longer "pin" in any literal sense below 901px - the class name stays
   for markup/JS stability, but it's just a flex column wrapper here. ── */
.ad-org-track { position: relative; }
.ad-org-stage-pin {
  position: static;
  display: flex; flex-direction: column; gap: 16px;
}

/* ── Stage card - mobile/tablet: content-driven height with a floor
   (min-height), centered internally; desktop resets this in the
   min-width block. ── */
.ad-org-stage-card {
  position: relative; overflow: hidden; outline: none;
  background: #fff; border-radius: var(--radius-xl);
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
  padding: 32px 24px 28px;
  min-height: 420px;
  display: flex; flex-direction: column; justify-content: center;
  --mx: 50%; --my: 50%;
}
.ad-org-stage-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(47,88,255,0.35), 0 16px 40px rgba(0,0,0,0.10);
}
/* Mouse-follow radial glow, tracked via --mx/--my set on mousemove */
.ad-org-stage-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(47,88,255,0.10), transparent 70%);
}
.ad-org-stage-card:hover::before { opacity: 1; }

/* Giant low-opacity index number, bottom-right, behind content */
.ad-org-stage-watermark {
  position: absolute; right: 8px; bottom: 52px; z-index: 0;
  font-family: var(--font); font-weight: 800; line-height: 1;
  font-size: clamp(64px, 20vw, 96px); color: rgba(47,88,255,0.06);
  pointer-events: none; user-select: none;
}

.ad-org-stage-top {
  position: relative; z-index: 1; display: flex; align-items: flex-start;
  justify-content: space-between; margin-bottom: 20px;
}
/* Zone label, top-left, inside the card on every breakpoint. */
.ad-org-stage-eyebrow {
  display: block; font-family: var(--font); font-weight: 400;
  color: #2a2a2a; line-height: 1.1; font-size: 20px;
}
/* Icon + count, top-right, icon above count on every breakpoint (same
   arrangement as desktop - see the media block for the size bump only). */
.ad-org-stage-topright {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.ad-org-stage-count {
  font-family: var(--font); font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; color: #2F58FF;
}
.ad-org-stage-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md); background: #2F58FF;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  animation: ad-org-icon-spring 0.5s var(--ease-spring) both;
}
@keyframes ad-org-icon-spring { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }

.ad-org-stage-body { position: relative; z-index: 1; }
.ad-org-stage-body h3 {
  font-family: var(--font); font-size: 30px; font-weight: 700; color: #2a2a2a;
  margin: 0 0 12px; line-height: 1.25;
}
/* Word-by-word staggered title entry */
.ad-org-word {
  display: inline-block; opacity: 0; transform: translateY(14px);
  animation: ad-org-word-in 0.45s var(--ease) both;
  animation-delay: calc(var(--w, 0) * 45ms);
}
@keyframes ad-org-word-in { to { opacity: 1; transform: translateY(0); } }
.ad-org-stage-body p {
  font-family: var(--font); font-size: 22px; color: #2a2a2a; line-height: 1.4;
  margin: 0;
}
/* Directional slide-in for the whole title+description block, keyed per card */
.dir-next { animation: ad-org-slide-next 0.5s var(--ease) both; }
.dir-prev { animation: ad-org-slide-prev 0.5s var(--ease) both; }
@keyframes ad-org-slide-next { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ad-org-slide-prev { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }

/* Dot pagination + prev/next arrows - desktop only now (an explicit
   "remove from mobile and tablet" request); restored to flex in the
   min-width block. */
.ad-org-stage-footer { display: none; }
.ad-org-stage-dots { display: flex; gap: 8px; }
.ad-org-stage-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #E5EBF5; border: none; padding: 0;
  cursor: pointer; transition: background 0.25s ease, transform 0.25s ease;
}
.ad-org-stage-dot.active { background: #2F58FF; transform: scale(1.3); }

.ad-org-stage-arrows { display: flex; gap: 10px; }
.ad-org-stage-arrow {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: #fff;
  color: #2a2a2a; display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ad-org-stage-arrow:hover:not(:disabled) { background: #2F58FF; border-color: #2F58FF; color: #fff; }
.ad-org-stage-arrow:disabled { opacity: 0.35; cursor: default; }

/* ── Pill nav - every item's title, horizontally scrollable on mobile.
   Full-bleed relative to .ad-org-zone-inner's own 20px side padding
   (negative margin cancels it) with its own 16px inset instead, so pills
   can scroll close to the true screen edge inside a clean 16px gutter -
   the "open design, 16px padding both sides" request - rather than being
   boxed inside the zone's wider inset on top of the pill's own padding.
   flex:0 0 auto here is what keeps it from being stretched by the pin's
   flex:1 card above it. ── */
.ad-org-pillnav {
  display: flex; gap: 8px; overflow-x: auto; flex: 0 0 auto;
  margin: 0 -20px; padding: 0 16px 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.ad-org-pillnav::-webkit-scrollbar { display: none; }
.ad-org-pillnav-item {
  flex: 0 0 auto; font-family: var(--font); font-size: 13px; font-weight: 600; color: #6B7280;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 9px 16px; cursor: pointer; white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ad-org-pillnav-item.active { background: #2F58FF; border-color: #2F58FF; color: #fff; }

/* Scroll reveal for this section: 40px translateY, 0.4s ease, 80ms stagger */
.ad-organizers .ad-reveal { transform: translateY(40px); transition: opacity 0.4s ease, transform 0.4s ease; }
.ad-organizers .ad-reveal.visible { transform: translateY(0); }
.ad-organizers .ad-stagger > * { transition-delay: calc(var(--i, 0) * 80ms); }

@media (prefers-reduced-motion: reduce) {
  .ad-org-word, .ad-org-stage-icon, .dir-next, .dir-prev {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ── Desktop only (≥901px) - this is where the scroll-pin mechanism
   itself lives now (superseded a version shared with mobile/tablet -
   see the section-level comment above); plus desktop's own bumps: 56px
   eyebrow, 70px/45px type, 64px uniform card padding, centered
   content-driven card height. ── */
@media (min-width: 901px) {
  .ad-org-intro { padding-top: 100px; padding-bottom: 32px; }
  .ad-org-zone { padding: 56px 0; }
  .ad-org-zone:last-child { padding-bottom: 100px; }
  .ad-org-zone-inner { padding: 0 56px; }

  /* One 100vh scroll segment per card - the track's total height is what
     gives the sticky stage its scroll "runway"; see the component's
     scroll handler in mid-sections.jsx for how progress maps to the
     active index. */
  /* `dvh` (dynamic viewport height) repeated after the `vh` fallback -
     browsers that don't understand the `dvh` unit treat that whole
     declaration as invalid and keep the first, so this is safe
     progressive enhancement, not a browser-detection branch. Matters on
     Safari (iOS/iPadOS and even desktop macOS with the toolbar auto-
     hidden): `vh` is pinned to the LARGEST possible viewport (address
     bar hidden), so a sticky pin sized off plain `vh` can end up
     mis-measured against the actual, currently-visible viewport whenever
     the browser chrome is showing; `dvh` tracks the real, current one. */
  .ad-org-track { height: calc(var(--n) * 100vh); height: calc(var(--n) * 100dvh); }
  /* top: var(--nav-h), not 0 - the fixed header sits above normal
     content, so pinning flush at the true viewport top put the card's
     own top edge underneath it. height shrinks by the same amount so
     the pin's bottom edge lands exactly where a plain 100vh box would
     have. */
  .ad-org-stage-pin {
    position: sticky; top: var(--nav-h);
    height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h));
    padding: 0; gap: 0; justify-content: center;
  }

  /* Content-driven card (uniform 64px padding, no forced min-height or
     internal flex-centering; a fixed min-height + justify-content:center
     previously padded out empty space above/below short content here,
     which is why it's off on desktop specifically - see history above). */
  .ad-org-stage-card { display: block; flex: none; width: 100%; padding: 64px; min-height: 0; }

  .ad-org-stage-watermark { font-size: clamp(140px, 16vw, 220px); right: 40px; bottom: -30px; }

  .ad-org-stage-eyebrow { font-size: 56px; }
  .ad-org-stage-icon { width: 60px; height: 60px; }

  .ad-org-stage-body h3 { font-size: 70px; color: #2a2a2a; margin-bottom: 18px; }
  .ad-org-stage-body p { font-size: 45px; color: #2a2a2a; line-height: 1.35; max-width: none; }

  /* Dot pagination + prev/next arrows - desktop only (hidden on
     mobile/tablet above). */
  .ad-org-stage-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 20px;
  }
  /* Undo the mobile/tablet full-bleed 16px-inset pill nav - desktop just
     sits inside the zone's own 56px padding and wraps instead of
     scrolling. */
  .ad-org-pillnav {
    margin: 28px 0 0; padding: 0 0 4px;
    overflow-x: visible; flex-wrap: wrap;
  }
}

/* ================================================================
   PHOTO HERO (topmost section, id="home")

   Two deliberately different layouts, per spec:
   - Base rules below = tablet + mobile (<1024px): background photo
     anchored right-center with its rightmost 38% cut off (see
     `.ad-phero-bg` below), the whole title→buttons block pinned to the
     BOTTOM 40% of the section, black gradient running bottom→up (not
     left→right), title/subtitle left-aligned but the buttons row
     centered. Every row shares the one side padding from
     `.ad-phero-inner`, so left/right padding is identical across rows.
   - `@media (min-width: 1024px)` = website layout: photo centered,
     gradient runs left→center, the whole block left-aligned and
     vertically centered.
   `min-height` is repeated `vh` then `dvh` on purpose (see the
   cross-browser note in DESIGN-SYSTEM.md §2 - `dvh` tracks the real
   mobile viewport; the `vh` line is the fallback for engines that don't
   know the unit).
================================================================ */
.ad-phero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: #000;
}
/* Tablet + mobile: right-anchored, with the rightmost 38% of the frame
   cut. Done by making the layer itself 38% wider than the section and
   letting it hang off the right edge (`right: -14%`), which the
   section's `overflow: hidden` then clips - rather than a
   `background-position` percentage, whose offset resolves against
   (container − image) and so shifts by an unpredictable amount once the
   image is scaled by `cover`. Desktop resets `right` to 0. */
.ad-phero-bg {
  position: absolute; top: 0; bottom: 0; left: 0; right: -38%; z-index: 0;
  background-image: url('assets/Photos/Garba%20kalakar-%20Hero.jpg');
  background-size: cover; background-position: right center;
  background-repeat: no-repeat;
}
.ad-phero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.90) 24%, rgba(0,0,0,0.60) 44%,
    rgba(0,0,0,0.22) 62%, rgba(0,0,0,0) 80%);
}
/* The bottom 40% of the section. Absolutely positioned on purpose: a
   percentage height on an abspos box resolves against the containing
   block's *used* height, so it works with the section's `min-height`
   sizing. As a flex child (`flex: 0 0 40%`) it did not - a percentage
   flex-basis against a parent whose height is only a `min-height`
   (i.e. indefinite) falls back to content size, which measured 13.5%
   of the section on tablet instead of 40%. */
.ad-phero-content {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 40%; min-height: fit-content;
  display: flex; align-items: center;
}
.ad-phero-inner {
  width: 100%; padding: 0 20px;
  display: flex; flex-direction: column; gap: 14px; text-align: left;
}
.ad-phero-title {
  margin: 0; color: #fff; font-family: var(--font);
  font-size: clamp(30px, 8vw, 44px); font-weight: 600; line-height: 1.14;
  letter-spacing: -0.01em;
  animation: ad-phero-rise 0.7s var(--ease) 0.05s both;
}
.ad-phero-sub {
  margin: 0; color: rgba(255,255,255,0.82);
  font-size: 15px; font-weight: 400; line-height: 1.55;
  animation: ad-phero-rise 0.7s var(--ease) 0.18s both;
}
.ad-phero-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; margin-top: 8px;
  animation: ad-phero-rise 0.7s var(--ease) 0.3s both;
}
@keyframes ad-phero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Both buttons share one size/radius block - same width, height and
   corner radius by spec; only the fill differs. */
.ad-phero-btn {
  position: relative; box-sizing: border-box;
  /* `min()` keeps both buttons identical AND keeps the pair on one row
     down to ~320px wide - a flat 170px each wrapped the row at 390px. */
  width: min(48%, 170px); height: 50px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-size: 15px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.ad-phero-btn:hover { transform: translateY(-2px); }
.ad-phero-btn-icon { width: 17px; height: 20px; display: block; flex-shrink: 0; }
.ad-phero-btn-primary { background: #fff; color: #191919; }
.ad-phero-btn-primary:hover { box-shadow: 0 10px 26px rgba(255,255,255,0.3); }
.ad-phero-btn-ghost {
  background: rgba(255,255,255,0.12); color: #fff;
  border: 1px solid rgba(255,255,255,0.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ad-phero-btn-ghost:hover { background: rgba(255,255,255,0.2); }

/* One 3s cycle drives both buttons, in sync (no per-button delay): a
   short brightness blink on the button itself, and a soft "popping" halo
   behind it - deliberately tight (scale 1.07, not a broad ripple).
   z-index:-1 puts the halo under the button's own background while still
   showing where it grows past the box. */
.ad-phero-btn { animation: ad-phero-blink 3s var(--ease) infinite; }
.ad-phero-btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  animation: ad-phero-pop 3s var(--ease) infinite;
}
.ad-phero-btn-primary::after { background: rgba(255,255,255,0.6); }
.ad-phero-btn-ghost::after { background: rgba(255,255,255,0.3); }
@keyframes ad-phero-pop {
  0%   { transform: scale(1); opacity: 0.55; }
  22%  { transform: scale(1.07); opacity: 0; }
  100% { transform: scale(1.07); opacity: 0; }
}
@keyframes ad-phero-blink {
  0%, 16%, 100% { filter: brightness(1); }
  6%            { filter: brightness(1.35); }
}
@media (prefers-reduced-motion: reduce) {
  .ad-phero-btn { animation: none; }
  .ad-phero-btn::after { animation: none; opacity: 0; }
  .ad-phero-title, .ad-phero-sub, .ad-phero-actions { animation: none; }
}

/* ── Phones only (<768px) ──
   The two buttons stretch equally so the row's outer edges line up with
   the title/subtitle's own side padding instead of sitting inset.
   (Photo framing is shared with tablet now - see `.ad-phero-bg`.) */
@media (max-width: 767px) {
  .ad-phero-actions { flex-wrap: nowrap; }
  /* scoped to `.ad-phero-actions` - unscoped, this `flex: 1 1 0` also hit
     the same buttons reused in the mobile menu
     (`.ad-mobile-nav-actions`), whose flex container is a COLUMN, so
     flex-basis 0 collapsed their height to ~24px instead of 50px */
  .ad-phero-actions .ad-phero-btn { flex: 1 1 0; width: auto; }
}

/* ── Website layout ── */
@media (min-width: 1024px) {
  .ad-phero { justify-content: center; }
  /* `right: 0` undoes the tablet/mobile 38% right-side crop */
  .ad-phero-bg { right: 0; background-position: center center; }
  .ad-phero-scrim {
    background: linear-gradient(to right,
      rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.86) 26%, rgba(0,0,0,0.58) 48%,
      rgba(0,0,0,0.20) 68%, rgba(0,0,0,0) 88%);
  }
  /* back to normal flow - the section centers it vertically itself */
  .ad-phero-content {
    position: relative; height: auto; min-height: 0;
    flex: 0 0 auto; padding-top: var(--nav-h);
  }
  .ad-phero-inner {
    max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
    align-items: flex-start; gap: 18px;
  }
  .ad-phero-title { font-size: clamp(44px, 4.4vw, 62px); max-width: 15ch; }
  .ad-phero-sub { font-size: 18px; max-width: 46ch; }
  .ad-phero-actions { justify-content: flex-start; gap: 16px; margin-top: 12px; }
  .ad-phero-btn { width: 180px; height: 52px; font-size: 16px; }
}

/* ================================================================
   WARM BAND (.ad-band-warm) - Benefits + Kaise kaam karta hai + Safe

   Why this exists: the Photo Hero is a warm Navratri night - marigold
   bulb light, terracotta, deep indigo, gold - and the page under it used
   to restart in pure white with a cool blue haze, which read as a
   different website starting at the hero's bottom edge. This band carries
   the hero's temperature through the first three sections instead.

   Scope is deliberate and is the whole reason this is a band rather than
   a change to the sitewide ground: `body::before` (§2) is ONE fixed
   layer behind every section on every page, so warming it would warm
   How It Works, Trusted By, App Preview, Contact and the legal pages too.
   The request was explicitly "first only Aapko kya milega? → Safe hai
   kya? Haan!", so the warm ground stops where this band stops. When the
   rest of the page is warmed later, the endgame is to move these values
   onto `body::before` and delete this band - don't add a second, third
   and fourth band for the remaining sections.

   The ground is a plain opaque `background` on the band. It was briefly a
   `z-index: -1` pseudo-element threaded between the sitewide glow and the
   sitewide dot layers, so the cursor-dot effect could show through; those
   layers have since been deleted outright (see the removal note near the
   top of this file), so the pseudo-element is free and now carries the
   Ajrakh border strips instead.

   `#2F58FF` is retired inside this band - step badges, labels, card
   underlines and hover borders are `--neel`/`--madder` now. It still owns
   CTAs in the sections BELOW the band, which are not yet converted, so
   expect a palette seam at the band's bottom edge until they are.
================================================================ */
.ad-band-warm {
  position: relative;
  /* Flat undyed cloth. NO gradient - removed by explicit request, and
     structurally right: printed cloth has no gradients, so a radial glow
     is the one thing guaranteed to break the Ajrakh read. The previous
     build had six marigold radial blobs here; before that the section
     inherited the sitewide cool-blue glow. Both superseded.
     Depth comes from a woven paper grain instead - two hairline repeating
     gradients at very low alpha, which is texture (a material property)
     rather than lighting (a screen property). */
  background-color: var(--cloth);
  background-image:
    repeating-linear-gradient(0deg,   rgba(58,50,44,0.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,  rgba(58,50,44,0.022) 0 1px, transparent 1px 3px);
  /* Pin each weave layer to an exact 3x3 tile. WITHOUT this the gradient
     is rasterised across the whole element, so the 3px period lands on a
     different sub-pixel phase depending on the band's size and position -
     and those differ per breakpoint (the hero is 100vh, section paddings
     change, the header height changes). Measured on the real page, desktop
     smeared each weave line across two pixel rows (one at 242, a ghost at
     246) where mobile drew one crisp row at 242 and left the rest at the
     cloth's own 247. Same CSS, visibly different texture. Tiling makes the
     rasterisation start at an integer boundary every tile, so 1440, 820
     and 390 all paint the identical weave. */
  background-size: 3px 3px, 3px 3px;
}

/* Ajrakh border strip - the printed rule that opens and closes the band.
   Real Ajrakh is "centre field + concentric borders": the cloth is always
   framed, never bled to the edge. This is the web equivalent of the
   `tavith`/`wat wal` border blocks - a geometric unit repeating on the x
   axis, in madder and indigo on undyed ground.
   It's an inline SVG data URI rather than an image file so it recolors
   with the palette and costs no extra request. Strips sit at the band's
   top and bottom only - not around every section and not around cards.
   That restraint IS the design: Ajrakh's borders read as borders because
   the field between them is calm. Repeat this motif on every element and
   it becomes wallpaper, which is the "costume India" failure mode. */
.ad-band-warm::before {
  content: ''; position: absolute; left: 0; right: 0; height: 14px;
  pointer-events: none;
  background-repeat: repeat-x;
  background-position: center;
  background-size: 48px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0 1.2h48M0 12.8h48' stroke='%239E3B2E' stroke-width='1.2'/%3E%3Cpath d='M12 7 L18 2.6 L24 7 L18 11.4 Z' fill='%231E3A5F'/%3E%3Cpath d='M36 7 L42 2.6 L48 7 L42 11.4 Z' fill='%231E3A5F'/%3E%3Cpath d='M0 7 L6 2.6 L12 7 L6 11.4 Z' fill='%231E3A5F'/%3E%3Cpath d='M24 7 L30 2.6 L36 7 L30 11.4 Z' fill='none' stroke='%239E3B2E' stroke-width='1'/%3E%3C/svg%3E");
}
.ad-band-warm::before { top: 0; }
/* No bottom strip. There WAS a matching `.ad-band-warm::after` at
   `bottom: 0`; removed by explicit request, on every breakpoint.
   Note what this means structurally, in case it looks like an oversight
   later: the band is now framed on its opening edge only, so it no longer
   "closes" the way an Ajrakh cloth does. That's deliberate - the strip
   landed directly under the Safe section's review marquee, where it read
   as a hard stop mid-page rather than a finish. The band's real closing
   edge will be wherever the Ajrakh section ends once the sections below
   it are converted; re-add a closing strip there, not here. */

/* ================================================================
   BENEFITS ("Aapko kya milega?") - sits directly below the Photo Hero

   Built to a supplied reference image, so two things deliberately
   differ from the sitewide defaults and shouldn't be "corrected":
   - the heading is left-aligned + bold, not the centered 32→48px
     weight-400 `.ad-section-header h2` default (§1/§2 of
     DESIGN-SYSTEM.md). It uses its own `.ad-benefits-header h2` rather
     than `.ad-section-header` so it can't drift back;
   - the icon badge is a circle, explicitly NOT the flat square icon
     tile Discover uses.
   Cards: plain white, hairline grey border, 13px radius, and **no
   shadow at all** - at rest or on hover (also explicit) - so the hover
   affordance is a small lift + a darker border instead.
================================================================ */
.ad-benefits { background: transparent; }
.ad-benefits-header { margin-bottom: var(--section-title-gap); }
.ad-benefits-header h2 {
  margin: 0; text-align: left;
  font-family: var(--font); font-size: 30px; font-weight: 700;
  color: var(--text-dark); letter-spacing: -0.01em; line-height: 1.2;
}
/* 4-up on desktop, 2-up below it (explicit: "desktop 4 cards in one row,
   mobile two cards in one row") */
.ad-benefits-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
/* Compact and content-sized - NO `min-height`. An early version fixed
   180/200px with only an icon + label inside, leaving a dead band at the
   bottom of every card ("looks blank... like a template section"). The
   fix is a shorter box, not more text: descriptions were tried here and
   deliberately removed (see ADBenefits in top-sections.jsx).
   What carries the section in the ~1-2s a visitor gives it is
   pre-attentive stuff - color, size, position - so each card gets its
   own soft tint + matching icon color, and the icon is large (34px in a
   64px badge). Border/radius/no-shadow are as specified earlier. */
.ad-benefit-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 20px 18px 22px;
  /* Warm hairline, not the neutral-grey `#E6E6E6` this used to be: on the
     warm ivory band a cool grey edge reads as a faint blue outline around
     every card. Same swap on .ad-kaise-card and .ad-review-card. */
  border: 1px solid var(--cloth-border); border-radius: 13px;
  box-shadow: none;
  transition: transform 0.25s var(--ease-spring), border-color 0.25s var(--ease);
}
.ad-benefit-card:hover { transform: translateY(-4px); }
/* icon lifts slightly with the card - a small "alive" cue that costs no
   reading time */
.ad-benefit-card .ad-benefit-icon { transition: transform 0.25s var(--ease-spring); }
.ad-benefit-card:hover .ad-benefit-icon { transform: scale(1.08); }
.ad-benefit-card h3 {
  margin: 18px 0 0; font-family: var(--font); font-size: 18px; font-weight: 600;
  color: var(--text-dark); line-height: 1.25; letter-spacing: -0.01em;
}
.ad-benefit-icon {
  width: 64px; height: 64px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* One tone per card: card tint, icon-badge tint (a step stronger), icon
   color, and the hover border colour all come from the same family.
   The four families are drawn from the hero photo - marigold, terracotta,
   the chaniya-choli indigo, and henna green. Superseded a default-palette
   set (mint `#F1FAF5` / peach `#FFF6EC` / cool blue `#F1F4FF` / amber
   `#FFF9EB`): four pastel chips in a row are the first thing the eye
   resolves in this section, before any text, so a generic set was doing
   more than anything else to make the page read as a different, cooler
   website than the hero above it. The class names stayed (`-green`,
   `-orange`, `-blue`, `-amber`) so nothing else had to change; treat them
   as slot names now, not literal colors. */
/* Ajrakh rule: the ground stays undyed, color lives in the motif.
   So every card is the SAME resist-white paper and the four tones differ
   only in the icon badge - indigo, madder, iron black, ochre, the craft's
   own dye colors.
   Superseded TWICE, and the reason matters: first a default pastel set
   (mint/peach/cool blue/amber), then warm photo-derived tints. Both put
   color in big card fields, so a row of four cards read as four pastel
   chips before any text - the loudest "generic Western template" signal
   on the page, and the opposite of how resist printing distributes color.
   Don't reintroduce full-card tints here.
   Class names (`-green`, `-orange`, `-blue`, `-amber`) are historical
   slot names, NOT colors - renaming them would touch three files for no
   visual gain. */
.ad-benefit-card-green  { background: var(--resist); }
.ad-benefit-card-orange { background: var(--resist); }
.ad-benefit-card-blue   { background: var(--resist); }
.ad-benefit-card-amber  { background: var(--resist); }
.ad-benefit-card-green:hover,
.ad-benefit-card-orange:hover,
.ad-benefit-card-blue:hover,
.ad-benefit-card-amber:hover { border-color: var(--neel); }
.ad-benefit-icon-green  { background: var(--iron-soft);   color: var(--iron); }
.ad-benefit-icon-orange { background: var(--madder-soft); color: var(--madder); }
.ad-benefit-icon-blue   { background: var(--neel-soft);   color: var(--neel); }
.ad-benefit-icon-amber  { background: var(--ochre-soft);  color: var(--ochre); }

@media (min-width: 1024px) {
  .ad-benefits-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .ad-benefits-header h2 { font-size: 36px; }
  .ad-benefit-card { padding: 26px 24px 28px; }
  .ad-benefit-card h3 { margin-top: 22px; font-size: 21px; }
  .ad-benefit-icon { width: 72px; height: 72px; }
}

/* ================================================================
   "KAISE KAAM KARTA HAI?" (.ad-kaise) - sits directly below Benefits

   Two journey cards side by side (Artist / Organizer), each a numbered
   step list. Deliberately mirrors the Benefits section above it rather
   than the sitewide `.ad-section-header` default: left-aligned bold
   heading at the same 30→36px, so the two stacked sections read as one
   block instead of switching alignment mid-page. Same reason it has its
   own `.ad-kaise-header h2` - it can't drift back to the centred default.

   Background is `--cloth-deep`, a second undyed-cloth tone: this is the
   "centre field" sitting between the band's two printed Ajrakh borders,
   one step deeper than the `--cloth` ground either side of it. It stays a
   FLAT color - no gradient, and never a local copy of any glow (§1 rule 2
   and §2 both). Superseded a pale blue `#E8EDFF` panel and then a warm
   cream one.
   Class prefix is `ad-kaise`, NOT `ad-how` - `.ad-how*` belongs to the
   unrelated "Start in 3 Easy Steps" section further down the page.
================================================================ */
/* A second, deeper undyed-cloth tone - the "centre field" between the
   band's two printed borders. Was pale blue `#E8EDFF`, then warm cream.
   SIMPLIFIED: this used to be a `z-index: -1` pseudo-element threaded
   between the sitewide glow and the sitewide dot layers, so the cursor
   dot effect could show through an opaque panel. Those dot layers were
   deleted (see the removal note near the top of this file), so the whole
   mechanism was pointless and is now a plain background on the section.
   If any full-bleed layer is ever re-introduced under sections, that
   trick is documented in the removal note - but don't restore it
   speculatively. */
.ad-kaise { background: var(--cloth-deep); }
.ad-kaise-header { margin-bottom: var(--section-title-gap); }
.ad-kaise-header h2 {
  margin: 0; text-align: left;
  font-family: var(--font); font-size: 30px; font-weight: 700;
  color: var(--text-dark); letter-spacing: -0.01em; line-height: 1.2;
}
.ad-kaise-grid {
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
.ad-kaise-card {
  background: var(--resist);
  border: 1px solid var(--cloth-border); border-radius: var(--radius-xl);
  padding: 24px 22px 26px;
  transition: transform 0.25s var(--ease-spring), border-color 0.25s var(--ease);
}
.ad-kaise-card:hover { transform: translateY(-4px); border-color: var(--neel); }
.ad-kaise-card-label {
  margin: 0 0 18px; font-family: var(--font);
  font-size: 17px; font-weight: 600; color: var(--madder); letter-spacing: -0.01em;
}
.ad-kaise-steps { list-style: none; margin: 0; padding: 0; }
/* The connector line is drawn on the step itself (a ::before running the
   full row height, behind the badge) rather than as a separate element,
   so a track can have any number of steps with no per-card setup. It's
   suppressed on the last row so the line stops at the final badge. */
.ad-kaise-step {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0;
}
.ad-kaise-step::before {
  content: ''; position: absolute;
  left: 13px; top: 50%; bottom: -8px; width: 1px;
  background: var(--cloth-border);
}
.ad-kaise-step:last-child::before { display: none; }
.ad-kaise-num {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 27px; height: 27px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--neel); color: var(--resist);
  font-family: var(--font); font-size: 13px; font-weight: 600; line-height: 1;
}
.ad-kaise-icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  color: var(--iron);
}
.ad-kaise-text {
  font-family: var(--font); font-size: 17px; font-weight: 600;
  color: var(--text-dark); line-height: 1.3; letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .ad-kaise-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1024px) {
  .ad-kaise-header h2 { font-size: 36px; }
  .ad-kaise-card { padding: 30px 28px 32px; }
  .ad-kaise-card-label { font-size: 18px; margin-bottom: 22px; }
  .ad-kaise-step { padding: 10px 0; gap: 14px; }
  .ad-kaise-num { width: 30px; height: 30px; font-size: 14px; }
  .ad-kaise-step::before { left: 15px; bottom: -10px; }
  .ad-kaise-text { font-size: 18px; }
}

/* ================================================================
   "SAFE HAI KYA? HAAN!" (.ad-safe) - trust row below "Kaise kaam
   karta hai?", directly above the review marquee

   Background: `transparent`, i.e. the shared `body::before` glow - "same
   background as Aapko kya milega?" by explicit request. That request
   covered the review marquee below it too, which is why `.ad-reviews` was
   re-skinned from dark to light in the same pass (see its own block) -
   the two sections are meant to read as one continuous light region, so
   if this section's background ever changes, change that one with it.

   Heading matches Benefits/Kaise (left-aligned, 700, 30→36px) via its own
   `.ad-safe-header h2`, not the centred 32→48px weight-400
   `.ad-section-header` default - three stacked sections switching
   alignment mid-page would read as a mistake.

   Cards: **identical to Benefits' cards**, by explicit request ("same
   card design, icon height and all design"). That's done by giving them
   Benefits' own classes in the markup (`.ad-benefit-card`,
   `.ad-benefit-card-<tone>`, `.ad-benefit-icon`, `.ad-benefit-icon-<tone>`
   - see `ADSafe`) plus its `size: 34` icon and the same four tones in the
   same order, NOT by copying its values into `.ad-safe-card` rules here.
   There are deliberately no card/icon rules in this block at all: a copy
   would drift the moment either section is restyled, and "identical" is
   the actual requirement. `.ad-safe-card` exists only as a grid hook.
   Supersedes this section's first build, which had its own 12px radius +
   `#E0E0E0` border + 46/56px blue icon badge and a row layout on mobile.

   This section also CONTAINS the two auto-scrolling review rows
   (`.ad-reviews-marquee`, rendered by `ADSafe`) - see the marquee's own
   spacing rules further down. There is no separate "What Artists Say"
   section any more.

   Grid: 4-up in one row on desktop, ONE column on mobile (explicit: "4
   cards in one Vertical row") - NOT the 2-up phone grid Benefits uses.
   The grid is the one thing that intentionally differs from Benefits.
================================================================ */
.ad-safe { background: transparent; }
.ad-safe-header { margin-bottom: var(--section-title-gap); }
.ad-safe-header h2 {
  margin: 0; text-align: left;
  font-family: var(--font); font-size: 30px; font-weight: 700;
  color: var(--text-dark); letter-spacing: -0.01em; line-height: 1.2;
}
/* 2-up on mobile, 4-up in one row on desktop - matching Benefits exactly
   now. Superseded a single column below 1024px ("4 cards in one Vertical
   row"), reversed by a later explicit request. */
.ad-safe-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

/* This section's OWN four tones - violet / teal / rose / cyan.
   Deliberately NOT Benefits' green/orange/blue/amber: the cards keep that
   section's shape and icon scale, but repeating its exact palette one
   section later made the two rows read as the same content twice.
   Same three-part structure as Benefits' tones so they stay swappable:
   soft card tint, a step-stronger badge tint, and a saturated icon color
   from the same family, plus a matching hover border.
   No specificity fight with `.ad-benefit-card`/`.ad-benefit-icon` - those
   base rules set no colors at all (Benefits gets its own from its own
   tone classes), so these single-class rules simply fill the gap. */
/* Warm set, same sourcing as Benefits': aubergine (saree purple), peacock
   teal, maroon, and mustard - all present in the hero photo's crowd, and
   all distinct from Benefits' four so the two rows still don't read as
   the same content twice. Superseded a cool violet/teal/rose/cyan set.
   Class names are slot names, not literal colors. */
/* Same Ajrakh rule as Benefits: undyed paper card, color in the badge.
   The badge order is rotated relative to Benefits (madder → indigo →
   iron → ochre instead of iron → madder → indigo → ochre) so the two
   sections don't repeat an identical sequence down the page, which is
   what "use all different colors for the cards" was getting at - met
   here by varying the motif color, not by tinting four card fields.
   Class names are historical slot names, not colors. */
.ad-safe-card-violet,
.ad-safe-card-teal,
.ad-safe-card-rose,
.ad-safe-card-cyan { background: var(--resist); }
.ad-safe-card-violet:hover,
.ad-safe-card-teal:hover,
.ad-safe-card-rose:hover,
.ad-safe-card-cyan:hover { border-color: var(--neel); }
.ad-safe-icon-violet { background: var(--madder-soft); color: var(--madder); }
.ad-safe-icon-teal   { background: var(--neel-soft);   color: var(--neel); }
.ad-safe-icon-rose   { background: var(--iron-soft);   color: var(--iron); }
.ad-safe-icon-cyan   { background: var(--ochre-soft);  color: var(--ochre); }

/* Sub-title above the two review rows. Sized between the section `h2`
   (30/36px, 700) and a card `h3` (18/21px, 600) so the hierarchy reads
   section → sub-title → cards, and left-aligned to match both. */
/* Weight 400, not 700 (explicit request, every breakpoint). Size still
   separates it from the section h2 above and the cards below, so the
   hierarchy survives without the extra weight - and Portfolio's
   sub-title copies this exact pairing. */
.ad-safe-sub {
  margin: var(--section-title-gap) 0 0;
  font-family: var(--font); font-size: 22px; font-weight: 400;
  color: var(--text-dark); letter-spacing: -0.01em; line-height: 1.2;
}

@media (min-width: 1024px) {
  .ad-safe-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .ad-safe-header h2 { font-size: 36px; }
  .ad-safe-sub { font-size: 26px; }
}

/* ================================================================
   PORTFOLIO (.ad-pf) - "Portfolio: Aapke performances ki Photos & videos"

   Ajrakh palette throughout (§1 of DESIGN-SYSTEM.md): resist paper card
   on cloth ground, indigo/madder pigments, hairline borders, flat color.
   NO gradients and NO drop shadows anywhere in here - the card is a
   printed page, and the one place a shadow would normally go (the card's
   elevation) is carried by a `--cloth-border` hairline instead.

   Layout: ONE card, two breakpoints. Mobile is the "app screen" reading -
   full width, segmented control, 2-up media grid, everything inside thumb
   reach. Desktop puts the same card in a right-hand column beside the
   copy. Same DOM in both, so the tab state can't diverge between layouts.

   See `ADPortfolio` in top-sections.jsx for why the supplied
   before/after reference was not built as drawn.
================================================================ */
/* Same deeper undyed-cloth panel as "Kaise kaam karta hai?" - the two
   tinted sections now bracket the band's plain-cloth ones. */
.ad-pf { background: var(--cloth-deep); }

/* Title block. "Portfolio" is the h2; the rest is a sub-title under it.
   Both mirror the Safe section - h2 700/30→36px, sub-title 22→26px at
   weight 400 - rather than defining their own scale.
   Alignment is the one deviation from the band: left on mobile like every
   other section here, but CENTRED from 1024px up (explicit request, and
   it suits a section whose content below it is a single centred card
   rather than a row). */
.ad-pf-header { margin-bottom: var(--section-title-gap); }
.ad-pf-header h2 {
  margin: 0; text-align: left;
  font-family: var(--font); font-size: 30px; font-weight: 700;
  color: var(--text-dark); letter-spacing: -0.01em; line-height: 1.2;
}
.ad-pf-sub {
  margin: 10px 0 0;
  font-family: var(--font); font-size: 22px; font-weight: 400;
  color: var(--text-dark); letter-spacing: -0.01em; line-height: 1.25;
}
/* Short printed Ajrakh rule closing the title block - the band's border
   motif at small scale. §1 rule 3 still applies: it frames once here and
   isn't repeated per element. */
.ad-pf-rule {
  display: block; height: 8px; width: 132px; margin: 20px 0 0;
  background-repeat: repeat-x; background-position: left center;
  background-size: 48px 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='8' viewBox='0 0 48 8'%3E%3Cpath d='M0 0.6h48M0 7.4h48' stroke='%239E3B2E' stroke-width='0.9'/%3E%3Cpath d='M0 4 L6 1.4 L12 4 L6 6.6 Z' fill='%231E3A5F'/%3E%3Cpath d='M24 4 L30 1.4 L36 4 L30 6.6 Z' fill='%231E3A5F'/%3E%3Cpath d='M12 4 L18 1.4 L24 4 L18 6.6 Z' fill='none' stroke='%239E3B2E' stroke-width='0.8'/%3E%3Cpath d='M36 4 L42 1.4 L48 4 L42 6.6 Z' fill='none' stroke='%239E3B2E' stroke-width='0.8'/%3E%3C/svg%3E");
}

/* Mobile: stacked, title block then card. Desktop turns this into one
   row (see the 1024px block).
   Superseded, in order: three feature-note cards on the left beside the
   card (`.ad-pf-copy`/`.ad-pf-note`, deleted), then a single centred
   column carrying a definition sentence and a caption above the card
   (`.ad-pf-define`/`.ad-pf-caption`, also deleted by explicit request).
   The section now says its piece with the title pair alone. */
.ad-pf-inner { display: flex; flex-direction: column; gap: 28px; }
.ad-pf-card { width: 100%; }

/* ── The portfolio card ── */
.ad-pf-card {
  position: relative;   /* containing block for the QR dialog layer */
  background: var(--resist);
  border: 1px solid var(--cloth-border);
  border-radius: 18px;
  overflow: hidden;
}
/* Identity row - avatar + name on the left, actions pushed to the right.
   `flex-wrap` matters: at ~360px the name plus two actions don't fit on
   one line, and without it the View Profile button would squash the
   handle to an ellipsis. */
.ad-pf-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--cloth-border);
}
.ad-pf-actions {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto; flex-shrink: 0;
}
.ad-pf-view {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 14px; border-radius: var(--radius-full);
  background: var(--neel); color: var(--resist);
  border: 1px solid var(--neel);
  font-family: var(--font); font-size: 13px; font-weight: 600;
  white-space: nowrap; text-decoration: none;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.ad-pf-view:hover { background: var(--neel-dark, #17293f); border-color: var(--neel-dark, #17293f); }
.ad-pf-view:focus-visible { outline: 2px solid var(--madder); outline-offset: 2px; }
.ad-pf-avatar {
  width: 46px; height: 46px; border-radius: var(--radius-full);
  object-fit: cover; object-position: 60% 30%;
  border: 2px solid var(--cloth-border); flex-shrink: 0;
}
.ad-pf-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ad-pf-name {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 16px; font-weight: 700; color: var(--text-dark); line-height: 1.2;
}
.ad-pf-verified { display: inline-flex; color: var(--neel); }
.ad-pf-art { font-size: 13px; color: var(--text-muted); }

/* Segmented control. A real one: `aria-selected` drives the styling and
   the arrow-key handler lives on the row (see ADPortfolio). */
.ad-pf-tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
  margin: 12px; padding: 4px;
  background: var(--cloth); border: 1px solid var(--cloth-border);
  border-radius: var(--radius-full);
}
.ad-pf-tab {
  appearance: none; border: none; background: transparent; cursor: pointer;
  padding: 8px 6px; border-radius: var(--radius-full);
  font-family: var(--font); font-size: 13.5px; font-weight: 600;
  color: var(--text-muted); line-height: 1;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.ad-pf-tab:hover { color: var(--iron); }
.ad-pf-tab.active { background: var(--neel); color: var(--resist); }
.ad-pf-tab:focus-visible { outline: 2px solid var(--madder); outline-offset: 2px; }

.ad-pf-panel { padding: 0 12px 12px; }

/* Media thumbnails - 2 per row at every breakpoint, photos and video
   alike. Every cell is a BUTTON that opens the shared lightbox.
   The 4:3 crop is fine *because* of the lightbox. These are landscape
   social screenshots whose content is text, and an earlier 3-up grid
   cropped the usernames off; the fix then was a full-width swipe carousel
   at natural ratio. With a lightbox the thumbnail is only a target - the
   full, uncropped image is one tap away - so the grid can be tidy without
   costing legibility. Don't re-crop tighter than 4:3 though: the
   thumbnail still has to be recognisable enough to be worth tapping. */
.ad-pf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ad-pf-thumb {
  appearance: none; padding: 0; cursor: pointer;
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--cloth-border);
  background: var(--cloth);
  transition: border-color 0.2s var(--ease);
}
.ad-pf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-pf-thumb:hover { border-color: var(--neel); }
.ad-pf-thumb:focus-visible { outline: 2px solid var(--madder); outline-offset: 2px; }
/* Flat scrim discs, not gradients (§1 rule 2) - they only have to stay
   legible over an unpredictable photo. */
.ad-pf-zoom {
  position: absolute; right: 7px; bottom: 7px;
  width: 24px; height: 24px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(31,26,23,0.66); color: #fff;
  opacity: 0; transition: opacity 0.2s var(--ease);
}
.ad-pf-thumb:hover .ad-pf-zoom,
.ad-pf-thumb:focus-visible .ad-pf-zoom { opacity: 1; }
.ad-pf-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(253,250,244,0.92); color: var(--madder);
  border: 1px solid var(--cloth-border);
  transition: transform 0.2s var(--ease-spring);
}
.ad-pf-thumb:hover .ad-pf-play { transform: translate(-50%, -50%) scale(1.08); }

/* ── Shared lightbox (photo / video / QR) ──
   One overlay serves all three; see ADPortfolio for why. Rendered at
   section level, never inside `.ad-pf-card` - that card has
   `overflow: hidden`, which would clip a fixed-position child.

   The blurred backdrop is an explicit request and a deliberate exception
   to the "no frosted glass" rule the Ajrakh pass applied to the header
   (§3 item 1). The distinction: there, blur was a *surface* material
   competing with printed cloth; here it is a modal scrim whose whole job
   is to push the page back while a single item is inspected. Paired
   `-webkit-backdrop-filter` per §2's cross-browser note - Safari does
   nothing without the prefix. */
.ad-lb {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(31,26,23,0.62);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: ad-lb-in 0.18s var(--ease);
}
@keyframes ad-lb-in { from { opacity: 0; } to { opacity: 1; } }
.ad-lb-body {
  max-width: min(960px, 100%); max-height: 86vh; max-height: 86dvh;
  display: flex; align-items: center; justify-content: center;
}
.ad-lb-body img {
  display: block; max-width: 100%; max-height: 86vh; max-height: 86dvh;
  width: auto; height: auto;
  border-radius: 12px; border: 1px solid var(--cloth-border);
  background: var(--resist);
}
/* Video needs a sized box - an iframe has no intrinsic ratio to max out
   against, unlike an img. */
.ad-lb-body-video { width: min(960px, 100%); }

/* Tall app screenshots (`.ad-peek`): phone-width and SCROLLABLE, rather
   than scaled to fit the viewport. These captures run to about 1:5.5, so
   `max-height` alone would shrink one to an unreadable sliver. This gives
   it a phone-sized column and lets the reader scroll, which is also how
   the screen behaves in the app.
   The `img` rule has to be overridden for the same reason - the shared
   one caps height at 86vh, which would defeat the scroll. */
.ad-lb-body-shot {
  width: min(400px, 92vw);
  max-height: 86vh; max-height: 86dvh;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  border-radius: 14px; border: 1px solid var(--cloth-border);
  background: var(--resist);
  align-items: flex-start;
}
.ad-lb-body-shot::-webkit-scrollbar { display: none; }
.ad-lb-body-shot img {
  width: 100%; max-width: 100%; height: auto;
  max-height: none; border: 0; border-radius: 0;
}
.ad-lb-frame {
  width: 100%; aspect-ratio: 16 / 9; height: auto; display: block;
  border: 0; border-radius: 12px; background: #000;
}
.ad-lb-close {
  position: absolute; top: 16px; right: 16px; z-index: 1;
  appearance: none; cursor: pointer;
  width: 42px; height: 42px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--resist); color: var(--iron);
  border: 1px solid var(--cloth-border);
  transition: transform 0.2s var(--ease-spring);
}
.ad-lb-close:hover { transform: scale(1.06); }
.ad-lb-close:focus-visible { outline: 2px solid var(--madder); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ad-lb { animation: none; }
  .ad-lb-close:hover { transform: none; }
}

/* The card's foot is gone. A `.ad-pf-share` strip used to sit there with
   a "Profile link" label, the raw URL and the QR button; removed by
   explicit request, its two actions promoted into the identity row above
   (`.ad-pf-actions`). `.ad-pf-share*` deleted rather than left unused. */
.ad-pf-qr {
  appearance: none; cursor: pointer; padding: 0;
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--resist); border: 1px solid var(--cloth-border);
  color: var(--iron);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.ad-pf-qr:hover { border-color: var(--neel); color: var(--neel); }
.ad-pf-qr:focus-visible { outline: 2px solid var(--madder); outline-offset: 2px; }

@media (min-width: 640px) {
  .ad-pf-grid { gap: 10px; }
  .ad-pf-tab { font-size: 14px; padding: 9px 8px; }
}
@media (min-width: 1024px) {
  /* ONE ROW: title block left, profile card right.
     Two separate axes, and they resolve differently - this is the
     current, explicit spec, so don't "simplify" either one:
     - TEXT is left-aligned within the column (`text-align: left`, and the
       Ajrakh rule back to `margin-inline: 0` so it starts at the same
       edge as the heading rather than floating mid-column).
     - The BLOCK is centred vertically against the profile card
       (`align-items: center`), so the title pair sits level with the
       card's middle instead of its top edge.
     Superseded the inverse arrangement - centred text, `align-items:
     start` - from the previous revision. */
  .ad-pf-inner {
    display: grid; grid-template-columns: 1fr minmax(0, 520px);
    gap: 56px; align-items: center;
  }
  .ad-pf-header { text-align: left; margin-bottom: 0; }
  .ad-pf-header h2 { font-size: 36px; text-align: left; }
  .ad-pf-sub { font-size: 26px; }
  .ad-pf-rule { margin-left: 0; margin-right: 0; }
  .ad-pf-head { padding: 18px 18px 16px; }
  .ad-pf-avatar { width: 52px; height: 52px; }
  .ad-pf-name { font-size: 17px; }
  .ad-pf-tabs { margin: 14px; }
  .ad-pf-panel { padding: 0 14px 14px; }
}

/* ================================================================
   "APP ANDAR SE KAISA DIKHTA HAI" (.ad-peek) - four phone screens

   Each frame holds a REAL app screenshot that scrolls inside the phone.
   Superseded hand-built mock screens (an initials avatar + name, a
   6-photo grid, chat bubbles, event rows with indigo/ochre status chips)
   - all of that CSS is deleted, along with the invented persona the
   profile screen carried.

   The frame itself is still CSS, not an image: bordered rounded box +
   speaker pill. It stays recolourable with the palette and ships no
   asset. The pill sits in the top BEZEL, above the screen, never over the
   screenshot - the captures include the app's own header, and a speaker
   floating over that reads as a rendering fault.

   Scroll is the point, not decoration: these are full-page captures much
   taller than a phone screen (the profile is 1080×4131, about four
   screens), so the frame shows the top and the visitor scrolls the rest.
================================================================ */
.ad-peek { background: transparent; }
.ad-peek-header { margin-bottom: var(--section-title-gap); }
.ad-peek-header h2 {
  margin: 0; text-align: left;
  font-family: var(--font); font-size: 30px; font-weight: 700;
  color: var(--text-dark); letter-spacing: -0.01em; line-height: 1.2;
}
/* 2-up on phones - four of these stacked in one column would be an
   absurd amount of scrolling for what is a glance-at-it section. */
.ad-peek-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
.ad-peek-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* 9:19 frame, and the screen fills it EDGE TO EDGE - no padding, no
   bezel gap, so it reads like a real handset showing a real screen.
   Superseded a padded frame with a speaker pill in the top bezel: the
   padding showed a strip of card colour around every screenshot, and the
   pill only existed because that strip did. The captures carry the app's
   own status bar, so the phone needs no chrome of its own - the border IS
   the bezel. `overflow: hidden` + the inner radius keep the screenshot's
   square corners from poking out of the rounded frame. */
.ad-peek-phone {
  position: relative; width: 100%; max-width: 190px;
  aspect-ratio: 9 / 19;
  background: var(--iron);
  border: 3px solid var(--iron); border-radius: 26px;
  padding: 0;
  overflow: hidden;
}
/* The scrollable screen. `overscroll-behavior: contain` stops the scroll
   from chaining to the page the instant a screenshot hits its end, which
   on a phone is what makes an inner scroller feel like it "grabs" the
   page. The scrollbar is hidden because a visible one inside a phone
   frame reads as chrome that isn't part of the app. */
/* The screen is a <button> AND the scroller: it opens the lightbox on
   click while still scrolling on wheel/keyboard, so there's no separate
   "expand" target sitting on top of the screenshot.
   `display: block` + zeroed appearance/padding matter - a default button
   is `inline-block` with padding and centred text, which would reintroduce
   the very gap this layout removes. */
.ad-peek-screen {
  appearance: none; border: 0; padding: 0; margin: 0;
  display: block; width: 100%; height: 100%; cursor: pointer;
  text-align: left; background: var(--cloth);
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: 23px;   /* 26px frame radius − 3px border */
}
.ad-peek-screen::-webkit-scrollbar { display: none; }
.ad-peek-screen:focus-visible { outline: 2px solid var(--madder); outline-offset: -3px; }
/* `height: auto` - the screenshots are far taller than the frame and that
   overflow is what there is to scroll. Never `object-fit: cover` here: it
   would crop a full-page capture down to one screen and defeat the whole
   idea. */
.ad-peek-screen img { width: 100%; height: auto; display: block; }
.ad-peek-label {
  font-family: var(--font); font-size: 14px; font-weight: 700;
  color: var(--text-dark); letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .ad-peek-grid { gap: 24px 20px; }
}
@media (min-width: 1024px) {
  .ad-peek-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .ad-peek-header h2 { font-size: 36px; }
  /* No padding here either - the desktop override used to re-add the
     bezel gap that the base rule removes. Only the size changes. */
  .ad-peek-phone { max-width: 230px; }
  .ad-peek-label { font-size: 15px; }
}

/* ================================================================
   "TRENDING ARTIST PROFILES" (.ad-trending) - landscape profile cards

   Last section of `.ad-band-warm`, so it is Ajrakh throughout: `--resist`
   card paper on the band's cloth ground, `--cloth-border` hairlines,
   `--neel` on hover, and NO shadow or gradient anywhere (§1 rule 2,
   checklist item 4).

   Each card is one <a> laid out as photo | text. The photo is a square
   with a 4px radius while the card is 8px - both deliberately small and
   deliberately different, per the section's spec. Colour lives only in
   the art-form line (`--madder`), the same one on every card: a per-card
   accent would turn the grid into a row of coloured chips, which is
   exactly the failure §1 rule 1 documents.
================================================================ */
/* `--cloth-deep`, the same tinted panel as Portfolio (`.ad-pf`) and
   "Kaise kaam karta hai?" (`.ad-kaise`), by explicit request. Note what
   that means for texture: a deep-cloth section paints an OPAQUE flat
   colour over the band, so it does not show the band's woven grain the
   way the transparent sections (Benefits, Safe, App Peek) do. That is how
   the other two deep sections already behave - the tint and the grain are
   alternatives, not a pair. */
.ad-trending { background: var(--cloth-deep); }
.ad-trending-header { margin-bottom: var(--section-title-gap); }
/* Own class, left/700/30→36px - the band convention (§2), not the
   centered `.ad-section-header` default. */
.ad-trending-header h2 {
  margin: 0; text-align: left;
  font-family: var(--font); font-size: 30px; font-weight: 700;
  color: var(--text-dark); letter-spacing: -0.01em; line-height: 1.2;
}
/* TWO AUTO-SCROLLING ROWS, first travelling right and second travelling
   left - the same mechanism as the review rows in "Kya kahete hai
   Artists", and it reuses their `.ad-track-ltr` / `.ad-track-rtl` classes
   and `adScrollRight` / `adScrollLeft` keyframes rather than declaring a
   second copy. Superseded a 1/2/3-column static grid.

   Like that marquee this is NOT full-bleed: it renders inside
   `.ad-container`, so the rows start and end where the heading does, and
   the edge fade is a `mask-image` in percentages of this box. `overflow:
   hidden` is what clips the tracks, which are `width: max-content` and far
   wider than the box. */
.ad-trending-marquee {
  overflow: hidden;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.ad-trending-track { display: flex; gap: 12px; width: max-content; will-change: transform; }
.ad-trending-track + .ad-trending-track { margin-top: 12px; }
/* COMPOUND selectors, not bare `.ad-trending-track`. `.ad-track-ltr` /
   `.ad-track-rtl` set `animation` as a shorthand (duration included) and
   are defined LATER in this file, so a single-class rule here would tie on
   specificity and lose on source order - the same fight documented for the
   header's Website button. Two classes wins it.
   37s, not the reviews' 45s: these rows are 7 cards rather than 9, so the
   same duration would travel a shorter distance and read as a slower,
   different-speed marquee sitting a few sections below that one. */
.ad-trending-track.ad-track-ltr,
.ad-trending-track.ad-track-rtl { animation-duration: 37s; }
/* Pause on hover like the review rows, AND on focus-within - these cards
   are links, so a keyboard user can land inside a moving track. Without
   the focus rule the focused card slides out from under them. */
.ad-trending-marquee:hover .ad-trending-track,
.ad-trending-marquee:focus-within .ad-trending-track { animation-play-state: paused; }

.ad-trending-card {
  /* Fixed width + `flex-shrink: 0`: inside a `max-content` flex track a
     shrinkable card would be squeezed by its neighbours and the two copies
     would no longer measure the same, which breaks the -50% seam. */
  width: 300px; flex-shrink: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 12px; min-width: 0;
  text-decoration: none;
  background: var(--resist);
  border: 1px solid var(--cloth-border);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
/* Border + a 2px lift, no shadow - printed cloth doesn't float. */
.ad-trending-card:hover { border-color: var(--neel); transform: translateY(-2px); }
.ad-trending-card:focus-visible { outline: 2px solid var(--madder); outline-offset: 2px; }

/* Square, 4px corners, fixed size. `flex-shrink: 0` and an explicit
   width/height rather than `aspect-ratio` alone: inside a flex row a
   ratio-sized box with a long name beside it can still be squeezed
   narrower and stop being square. */
.ad-trending-photo {
  position: relative; flex-shrink: 0;
  width: 72px; height: 72px;
  border-radius: 4px; overflow: hidden;
  background: var(--iron-soft);
}
.ad-trending-photo img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; display: block;
  object-fit: cover;
}
/* Sits UNDER the photo and only shows if the <img> is hidden by its own
   onError handler - so a missing file degrades to initials on cloth
   instead of the browser's broken-image glyph. */
.ad-trending-initials {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 22px; font-weight: 700;
  color: var(--iron); letter-spacing: 0.02em;
}

/* `min-width: 0` on both the column and its children is what lets the
   clamps below actually bite - without it a flex item refuses to shrink
   below its longest word and the card overflows instead of truncating. */
.ad-trending-info {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  min-width: 0; text-align: left;
}
.ad-trending-name,
.ad-trending-art { display: block; min-width: 0; max-width: 100%; }
.ad-trending-name {
  font-family: var(--font); font-size: 15px; font-weight: 700;
  color: var(--text-dark); line-height: 1.25; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 2 lines, not 1: a few of these art forms are long custom strings (see
   Adikala Kendra in AD_TRENDING_ARTISTS) that say nothing useful cut at
   one line. */
.ad-trending-art {
  font-family: var(--font); font-size: 13px; font-weight: 600;
  color: var(--madder); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ad-trending-loc {
  display: flex; align-items: center; gap: 4px;
  min-width: 0; max-width: 100%;
  font-family: var(--font); font-size: 12.5px; font-weight: 500;
  color: var(--text-muted); line-height: 1.3;
}
.ad-trending-loc svg { flex-shrink: 0; }
.ad-trending-loc > span {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (min-width: 640px) {
  .ad-trending-track { gap: 14px; }
  .ad-trending-track + .ad-trending-track { margin-top: 14px; }
  .ad-trending-card { width: 330px; }
}
@media (min-width: 1024px) {
  .ad-trending-track { gap: 16px; }
  .ad-trending-track + .ad-trending-track { margin-top: 16px; }
  .ad-trending-header h2 { font-size: 36px; }
  .ad-trending-card { width: 360px; gap: 16px; padding: 14px; }
  .ad-trending-photo { width: 84px; height: 84px; }
  .ad-trending-name { font-size: 16px; }
}
/* Reduced motion: stop the rows and hand the visitor the scrollbar
   instead. Without the `overflow-x`, freezing an `ad-track-rtl` row parks
   it at `translateX(0)` with the rest of its cards unreachable off-screen
   - the row would simply lose most of its artists. The mask goes too, so
   nothing is dimmed at the edges of a row you now scroll by hand. */
@media (prefers-reduced-motion: reduce) {
  .ad-trending-card:hover { transform: none; }
  .ad-trending-track.ad-track-ltr,
  .ad-trending-track.ad-track-rtl { animation: none; }
  .ad-trending-marquee {
    overflow-x: auto;
    -webkit-mask-image: none; mask-image: none;
  }
}

/* ================================================================
   "MEET THE ORGANIZERS" (.ad-orgs) - vertical profile cards

   The organizer counterpart to `.ad-trending`. Three deliberate
   differences from it, all requested:
   - ground is **transparent**, i.e. the same as "App andar se kaisa
     dikhta hai" - it shows the band's cloth AND its woven grain, unlike
     the `--cloth-deep` sections which paint an opaque tint over both;
   - layout is **vertical**: photo, then organization name, art form and
     location stacked under it, all left aligned;
   - it is a **static grid**, not a marquee. The two auto-scrolling rows
     belong to the artists section; a second marquee directly under the
     first would read as the page malfunctioning.
   Card surface, hairline, hover and the single `--madder` art-form accent
   are identical to `.ad-trending-card`, so the two sections read as one
   family. §1 rule 1 still applies: no per-card tints.
================================================================ */
.ad-orgs { background: transparent; }
.ad-orgs-header { margin-bottom: var(--section-title-gap); }
.ad-orgs-header h2 {
  margin: 0; text-align: left;
  font-family: var(--font); font-size: 30px; font-weight: 700;
  color: var(--text-dark); letter-spacing: -0.01em; line-height: 1.2;
}
/* 2-up on phones. Not 1-up: a vertical card is tall, and ten of them in a
   single column is an absurd amount of scrolling for a section meant to be
   glanced at - the same reasoning as `.ad-peek-grid`. */
.ad-orgs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.ad-orgs-card {
  display: flex; flex-direction: column; min-width: 0;
  text-decoration: none;
  padding: 10px;
  background: var(--resist);
  border: 1px solid var(--cloth-border);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.ad-orgs-card:hover { border-color: var(--neel); transform: translateY(-2px); }
.ad-orgs-card:focus-visible { outline: 2px solid var(--madder); outline-offset: 2px; }

/* Square, full card width. `aspect-ratio` is safe here (unlike on the
   landscape card, where a flex neighbour could squeeze it) because this is
   a block in a column - its width is the card's width, full stop. */
.ad-orgs-photo {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 4px; overflow: hidden;
  background: var(--iron-soft);
}
.ad-orgs-photo img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; display: block; object-fit: cover;
}
/* Under the photo, revealed only when the <img> hides itself on error. */
.ad-orgs-initials {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 30px; font-weight: 700;
  color: var(--iron); letter-spacing: 0.02em;
}

.ad-orgs-info {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  min-width: 0; text-align: left; padding: 10px 2px 2px;
}
.ad-orgs-name, .ad-orgs-art { display: block; min-width: 0; max-width: 100%; }
/* 2 lines: several organization names are long ("Maahadev Production and
   Events", "Kalaaangan -The institute of Dance") and a one-line clamp cuts
   them before they identify anything. */
.ad-orgs-name {
  font-family: var(--font); font-size: 14px; font-weight: 700;
  color: var(--text-dark); line-height: 1.25; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ad-orgs-art {
  font-family: var(--font); font-size: 12.5px; font-weight: 600;
  color: var(--madder); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ad-orgs-loc {
  display: flex; align-items: center; gap: 4px;
  min-width: 0; max-width: 100%;
  font-family: var(--font); font-size: 12px; font-weight: 500;
  color: var(--text-muted); line-height: 1.3;
}
.ad-orgs-loc svg { flex-shrink: 0; }
.ad-orgs-loc > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Closing CTA card. Indigo, because this is the one place in the band that
   should stop the eye rather than sit in the field - a solid flat dye on
   undyed cloth is exactly how Ajrakh puts weight somewhere, and it stays
   inside the rules (flat pigment, no gradient, border not shadow). */
.ad-orgs-cta {
  margin-top: 28px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 26px 20px;
  text-align: center;
  background: var(--neel);
  border: 1px solid var(--neel);
  border-radius: var(--radius-lg);
}
.ad-orgs-cta-text {
  margin: 0; max-width: 680px;
  font-family: var(--font); font-size: 16px; font-weight: 600;
  color: var(--resist); line-height: 1.55; letter-spacing: -0.01em;
}
/* `.ad-phero-btn`'s base width is `min(48%, 170px)`, and that 48% resolves
   against THIS row - which, as a centred flex item in a column, shrinks to
   its own content. So the buttons sized themselves off a box that was
   sized off them, and came out squeezed on phones. Exactly the trap the
   mobile nav hit (there the 48% resolved against a 220px column and gave
   ~105px buttons); it is documented under the Header in DESIGN-SYSTEM.md.
   Fix is the same shape: stop letting the percentage decide. The row takes
   the card's full width and the two buttons split it evenly, with a cap so
   they don't stretch absurdly wide on a tablet. */
.ad-orgs-cta-actions {
  display: flex; justify-content: center; gap: 12px;
  width: 100%; max-width: 420px;
}
.ad-orgs-cta-actions .ad-phero-btn { flex: 1 1 0; width: auto; min-width: 0; }
/* The ghost button is built for a light ground and would be near-invisible
   on indigo, so it flips to a light outline here. Compound selector for the
   usual reason: the `.ad-phero-btn-ghost` rules it beats are single-class
   and defined later in this file, so a bare class would tie and lose. */
.ad-orgs-cta-ghost.ad-phero-btn-ghost {
  background: transparent; color: var(--resist);
  border: 1.5px solid rgba(253,250,244,0.55);
}
.ad-orgs-cta-ghost.ad-phero-btn-ghost:hover {
  background: rgba(253,250,244,0.12); border-color: var(--resist);
}

/* THE POP. A scoped override of the sitewide `.ad-reveal` (which is a
   28px rise), turning this one element's entry into a scale-up that
   overshoots slightly and settles - `--ease-spring` is the site's existing
   overshoot curve, so this introduces no new motion vocabulary. It fires
   once, from the same IntersectionObserver everything else uses; it is not
   a loop, and there is no second observer. */
.ad-orgs-cta.ad-reveal {
  opacity: 0; transform: scale(0.88);
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease-spring);
}
.ad-orgs-cta.ad-reveal.visible { opacity: 1; transform: scale(1); }

@media (min-width: 640px) {
  .ad-orgs-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .ad-orgs-cta { padding: 32px 28px; gap: 20px; }
  .ad-orgs-cta-text { font-size: 18px; }
  /* Past phone width there's room for the pair at their natural size, so
     hand them back the fixed 170px the rest of the site uses. */
  .ad-orgs-cta-actions { width: auto; max-width: none; }
  .ad-orgs-cta-actions .ad-phero-btn { flex: 0 0 auto; width: 170px; }
}
@media (min-width: 1024px) {
  /* 5-up, so the ten organizers fill exactly two rows with no short last
     row. Revisit the column count if the list length changes. */
  .ad-orgs-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .ad-orgs-header h2 { font-size: 36px; }
  .ad-orgs-name { font-size: 15px; }
  .ad-orgs-art { font-size: 13px; }
  .ad-orgs-cta { margin-top: 36px; padding: 38px 32px; }
  .ad-orgs-cta-text { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .ad-orgs-card:hover { transform: none; }
  /* No scale, no spring - it still fades in, so the card doesn't just
     appear, but nothing moves. */
  .ad-orgs-cta.ad-reveal { transform: none; transition: opacity 0.3s linear; }
  .ad-orgs-cta.ad-reveal.visible { transform: none; }
}

/* ================================================================
   HERO
================================================================ */
.ad-hero {
  /* Transparent, not its own solid var(--bg) fill - this let the shared
     body-level glow backdrop show through everywhere else on the site
     but was silently painting over it here, hiding the glow within Hero
     itself even though .ad-band-hero (the wrapper) supplied it. */
  min-height: 700px; display: flex; align-items: center;
  background: transparent; position: relative; overflow: hidden;
  padding-top: var(--nav-h);
  padding-bottom: 100px;
}
/* Glow now lives on the shared .ad-band-hero wrapper (spans hero + discover).
   .ad-hero-bg/.ad-hero-dots-hover (a local cursor-follow dot layer) are
   both gone - superseded by the sitewide `.ad-cursor-dots`/`body::after`
   version (see that comment) which covers Hero automatically now. */
.ad-hero-content {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 40px; width: 100%; padding: 60px 0 40px;
}
.ad-hero-tag {
  font-size: 14px; font-weight: 500; color: var(--text-light);
  letter-spacing: 0.01em; max-width: 540px; line-height: 1.6;
  animation: ad-fade-down 0.8s ease 0.1s both;
}
@keyframes ad-fade-down { from { opacity:0; transform: translateY(-12px); } to { opacity:1; transform: translateY(0); } }

.ad-hero-pen-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 220px; padding: 24px 16px; overflow: visible;
}
.ad-hero-pen-line {
  position: relative; display: inline-block; max-width: 96%; overflow: visible;
  opacity: 1; transform: translateY(0);
}
.ad-hero-pen-text {
  display: inline-flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; width: 100%; row-gap: 0.08em; column-gap: 0.3em;
  font-size: clamp(32px, 6vw, 68px); font-weight: 800 !important; color: #2F58FF;
  letter-spacing: -0.01em; line-height: 1.3; text-align: center; padding-top: 0.15em;
}
.ad-hero-pen-line.ad-hero-pen-outro .ad-hero-pen-text {
  animation: ad-pen-text-burst 0.45s ease-out forwards;
}
@keyframes ad-pen-text-burst {
  0%   { opacity: 1; transform: scale(1); filter: blur(0px); }
  60%  { opacity: 0.25; transform: scale(0.94); filter: blur(1px); }
  100% { opacity: 0; transform: scale(0.88); filter: blur(2px); }
}
.ad-hero-pen-word {
  display: inline-block; opacity: 0; transform: translateY(14px);
  animation: ad-pen-word-in 0.42s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes ad-pen-word-in { to { opacity: 1; transform: translateY(0); } }

/* ── Cracker-sparkle burst (hero outro) ── */
.ad-hero-pen-sparks {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
}
.ad-hero-pen-spark {
  position: absolute; top: 50%; left: 50%; width: 6px; height: 6px;
  margin: -3px 0 0 -3px; border-radius: 50%; opacity: 0;
}
.ad-hero-pen-line.ad-hero-pen-outro .ad-hero-pen-spark {
  animation: ad-pen-spark 0.5s ease-out forwards;
}
@keyframes ad-pen-spark {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  15%  { opacity: 1; transform: translate(calc(var(--dx) * 0.35), calc(var(--dy) * 0.35)) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}
.ad-hero-pen-text-gu { font-family: 'Anek Gujarati', system-ui, sans-serif; }
.ad-hero-pen-text-hi { font-family: 'Anek Devanagari', system-ui, sans-serif; }
.ad-hero-pen-text-en { font-family: 'Inter', system-ui, sans-serif; font-weight: 900 !important; }

.ad-hero-rotating-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 80px;
}
.ad-hero-rotating {
  font-size: clamp(28px, 4.5vw, 56px); font-weight: 800; color: var(--text-dark);
  line-height: 1.25; text-align: center; letter-spacing: -0.02em;
  will-change: transform, opacity;
}
.ad-hero-rotating.entering { animation: ad-slide-in 0.4s var(--ease) forwards; }
.ad-hero-rotating.exiting { animation: ad-slide-out 0.3s var(--ease) forwards; }
@keyframes ad-slide-in { from { opacity:0; transform: translateY(30px); } to { opacity:1; transform: translateY(0); } }
@keyframes ad-slide-out { from { opacity:1; transform: translateY(0); } to { opacity:0; transform: translateY(-30px); } }

.ad-hero-cta {
  display: inline-flex; align-items: center; gap: 14px;
  background: #fff; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 10px 12px 10px 24px; box-shadow: var(--shadow-sm);
  animation: ad-fade-down 0.8s ease 0.4s both;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .ad-hero-cta { background: rgba(255,255,255,0.7); }
}
.ad-hero-cta-text { font-size: 15px; font-weight: 500; color: var(--text-muted); }
.ad-hero-cta .ad-btn { border-radius: var(--radius-full); padding: 8px 20px; font-size: 13px; }
.ad-hero-cta-divider { width: 1px; height: 30px; background: var(--border); flex-shrink: 0; }
.ad-hero-cta .ad-btn-login { font-size: 13px; padding: 8px 18px; border-radius: var(--radius-full); }
.ad-hero-cta .ad-btn-playstore { height: 36px; border-radius: var(--radius-full); overflow: hidden; }

.ad-hero-sub {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center;
  animation: ad-fade-down 0.8s ease 0.6s both;
}
.ad-hero-sub-item {
  display: flex; align-items: center; gap: 6px; font-size: 13px;
  font-weight: 500; color: var(--text-muted);
}
.ad-hero-sub-item svg { width: 14px; height: 14px; color: var(--green); }

.ad-hero-cta-group {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.ad-hero-free-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--saffron); color: #1a0e00;
  padding: 4px 14px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
  animation: ad-fade-down 0.8s ease 0.2s both;
}

/* ================================================================
   PAIN TICKER
================================================================ */
.ad-ticker {
  background: #1F2937; overflow: hidden; white-space: nowrap; position: relative;
}
.ad-ticker-inner { display: flex; width: max-content; }
.ad-ticker-set {
  display: inline-flex; align-items: center; gap: 28px;
  padding: 13px 28px 13px 0; flex-shrink: 0;
}
.ad-ticker-item {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.75); font-size: 13px; font-weight: 500;
}
.ad-ticker-item svg { width: 13px; height: 13px; stroke: rgba(255,255,255,0.5); }
.ad-ticker-dot { color: rgba(255,255,255,0.25); font-size: 20px; }
@keyframes ad-ticker-scroll {
  from { transform: translateX(0); } to { transform: translateX(var(--shift, -50%)); }
}

/* ================================================================
   WARLI CULTURAL MOTION DIVIDER
================================================================ */
.ad-warli-strip {
  background: #FF9933;
  overflow: hidden;
  height: 90px;
  position: relative;
}
.ad-warli-track {
  display: flex;
  width: max-content;
  animation: ad-warli-scroll 28s linear infinite;
  will-change: transform;
}
.ad-warli-svg {
  width: 640px;
  height: 90px;
  display: block;
  flex-shrink: 0;
}
@keyframes ad-warli-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-640px); }
}

/* ================================================================
   OVERVIEW SECTION - Product video
================================================================ */
.ad-overview {
  background: #f6f5ec;
  position: relative;
  padding: 0;
  min-height: 900px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ad-overview > .ad-container {
  padding: 80px 0 72px;
  width: 100%;
}
.ad-overview .ad-section-header { max-width: 720px; margin: 0 auto 30px; }
.ad-overview-video {
  width: 100%; max-width: 920px; margin: 0 auto;
  border-radius: 14px; overflow: hidden;
  position: relative; padding-top: 56.25%;
  background: #000;
  box-shadow:
    0 2px 0 0 #2F58FF,
    0 8px 32px rgba(0,0,0,0.12),
    0 24px 64px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.07);
}
@supports (aspect-ratio: 1) {
  .ad-overview-video { aspect-ratio: 16 / 9; padding-top: 0; }
}
.ad-overview-video iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
.ad-overview-cta {
  display: flex; justify-content: center;
  margin-top: 40px;
}
@media (max-width: 900px) {
  .ad-overview { min-height: auto; }
  .ad-overview > .ad-container { padding: 64px 0 56px; }
}
@media (max-width: 600px) {
  .ad-overview > .ad-container { padding: 48px 0 40px; }
  .ad-overview-video { border-radius: 10px; }
}

/* ================================================================
   "Trusted by..." + Audience band - ONE continuous background spanning
   both sections, using the audience section's dark theme
================================================================ */
.ad-band-audience {
  position: relative;
  background: var(--dark-surface);
  overflow: hidden;
}
.ad-band-audience::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 15% 0%, rgba(47,88,255,0.35), transparent 45%);
}
.ad-band-audience .ad-reg-artists, .ad-band-audience .ad-audience { position: relative; background: transparent; }

/* ================================================================
   AUDIENCE SECTION - "Built for you" empowerment statement
================================================================ */
.ad-audience {
  position: relative;
  overflow: hidden;
  padding-bottom: 100px;
}
.ad-audience::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.5;
}
.ad-audience > .ad-container { position: relative; z-index: 1; }
.ad-audience .ad-section-header h2 { color: #fff; }
.ad-audience .ad-section-header p { color: rgba(255,255,255,0.65); }

/* Tabs */
.ad-aud-tabs {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 44px;
}
.ad-aud-tab {
  display: inline-flex; align-items: center; justify-content: center;
  width: 200px;
  padding: 11px 22px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75);
  font-size: 14px; font-weight: 400;
  cursor: pointer; transition: all 0.22s ease;
}
.ad-aud-tab:hover { background: rgba(255,255,255,0.1); color: #fff; }
.ad-aud-tab.active {
  background: #2F58FF; border-color: #2F58FF; color: #fff;
}

/* Panels */
.ad-aud-panels { position: relative; }
.ad-aud-panel {
  display: none;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 56px;
}
.ad-aud-panel.active { display: grid; animation: audIn 0.4s ease; }
@keyframes audIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Visual - the empowering photo */
.ad-aud-visual {
  position: relative;
  border-radius: var(--ps-card-radius);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);
}
.ad-aud-visual::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,22,45,0.55) 100%);
  pointer-events: none;
}
.ad-aud-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Content column */
.ad-aud-content { display: flex; flex-direction: column; gap: 22px; }
.ad-aud-persona-title {
  font-size: clamp(34px, 4.2vw, 56px); font-weight: 800; color: #fff;
  line-height: 1.05; letter-spacing: -0.02em; margin: 0;
}

/* Bullets - icon-forward, staggered reveal on panel activation */
.ad-aud-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ad-aud-bullet {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  border-radius: var(--ps-row-radius);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  font-size: 18px; line-height: 1.5; font-weight: 400;
  opacity: 0; transform: translateX(-16px);
  animation: bulletIn 0.5s ease forwards;
  animation-delay: calc(var(--i, 0) * 110ms);
}
@keyframes bulletIn {
  to { opacity: 1; transform: translateX(0); }
}

/* Checkbox: rows land empty (outline only) - once all 4 have landed,
   checkmarks fill in one by one */
.ad-aud-bullet-icon {
  flex-shrink: 0; margin-top: 1px;
  width: var(--ps-checkbox-size); height: var(--ps-checkbox-size); border-radius: var(--ps-checkbox-radius);
  background: transparent;
  border: 2px solid rgba(47,88,255,0.55);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  animation: checkFill 0.3s ease forwards;
  animation-delay: calc(850ms + var(--i, 0) * 150ms);
}
.ad-aud-bullet-icon > span {
  opacity: 0; transform: scale(0.4);
  animation: checkIconIn 0.25s ease forwards;
  animation-delay: calc(850ms + var(--i, 0) * 150ms);
}
@keyframes checkFill {
  to { background: #2F58FF; border-color: #2F58FF; }
}
@keyframes checkIconIn {
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 900px) {
  .ad-aud-panel { grid-template-columns: 1fr; gap: 32px; }
  .ad-aud-visual { aspect-ratio: 16/9; }
}
@media (max-width: 600px) {
  .ad-aud-tabs { gap: 8px; }
  .ad-aud-tab { font-size: 13px; width: 160px; padding: 9px 16px; }
  .ad-aud-bullet { padding: 12px 14px; }
}

/* ================================================================
   BENTO - generic card utilities (used by ArtistProfileVisual, etc.)
================================================================ */
.ad-bento {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.ad-bento-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 24px;
  transition: all 0.3s var(--ease); position: relative; overflow: hidden;
}
.ad-bento-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(0,51,102,0.15); }
.ad-bento-span2 { grid-column: span 2; }
.ad-bento-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: var(--navy); display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; box-shadow: 0 4px 14px rgba(0,51,102,0.2);
}
.ad-bento-icon svg { width: 22px; height: 22px; color: #fff; }
.ad-bento-icon-saffron { background: linear-gradient(135deg, #FF8A00, var(--saffron)); box-shadow: 0 4px 14px rgba(255,153,51,0.25); }
.ad-bento-icon-green { background: var(--green); box-shadow: 0 4px 14px rgba(19,136,8,0.2); }
.ad-bento-card h3 { font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; line-height: 1.35; }
.ad-bento-card p { font-size: 14px; color: var(--text-muted); line-height: 1.65; }
.ad-bento-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ad-bento-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* Extra icon color variants */
.ad-bento-icon-purple { background: #7C3AED; box-shadow: 0 4px 14px rgba(124,58,237,0.25); }
.ad-bento-icon-rose   { background: #DB2777; box-shadow: 0 4px 14px rgba(219,39,119,0.25); }
.ad-bento-icon-teal   { background: #0D9488; box-shadow: 0 4px 14px rgba(13,148,136,0.25); }
.ad-bento-icon-indigo { background: #4F46E5; box-shadow: 0 4px 14px rgba(79,70,229,0.25); }
.ad-bento-icon-amber  { background: #D97706; box-shadow: 0 4px 14px rgba(217,119,6,0.25); }
.ad-bento-icon-sky    { background: #0284C7; box-shadow: 0 4px 14px rgba(2,132,199,0.25); }
.ad-bento-icon-slate  { background: #475569; box-shadow: 0 4px 14px rgba(71,85,105,0.25); }

/* Featured (Most Awaited) cards */
.ad-bento-card-featured {
  background: var(--bg-warm); border-color: rgba(255,153,51,0.22); padding-left: 27px;
}
.ad-bento-card-featured::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(to bottom, var(--saffron), #FF6B00);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.ad-bento-card-featured .ad-feature-chip {
  color: #B45309; background: var(--saffron-light); border-color: rgba(255,153,51,0.3);
}

/* Mini visual inside bento cards */
.ad-bento-visual {
  margin-top: 20px; background: var(--bg-light); border-radius: var(--radius-md);
  padding: 16px; border: 1px solid var(--border-light);
}

/* ================================================================
   APP PREVIEW - "available on" - two platform cards (website, Android),
   no phone mockup, no feature content.

   Second full redesign - "premium/modern, remove anything that reads as
   AI-generated" (the gradient-highlight heading text, the top accent
   bars on cards, and the flat #F6E5BE section background from the first
   redesign are all explicitly called out and removed here). If older
   notes describe a gradient-text heading, `.ad-preview-card-bar` accent
   bars, or a solid `#F6E5BE` background, they're stale - this is current.

   Section background is now the Hero section's own (`var(--bg)` + the
   same 6-layer radial-gradient glow `.ad-band-hero` uses), via this
   section's own `::before` - same technique as `.ad-how` (§3 item 5):
   `.ad-preview` isn't inside a `.ad-band-*` wrapper, so it needs its own
   copy rather than joining a shared selector.

   Section spacing/breakpoints - still this section's own three-tier
   scheme (mobile ≤767 / tablet 768–1023 / desktop ≥1024), per the spec's
   own numbers (100px/60px/48px padding this time - different from the
   first redesign's 80/60/40, given again explicitly). `.ad-container`
   max-width here is `1100px` (was `900px`).
================================================================ */
/* Background transparent - shows the shared body::before glow backdrop
   through instead of painting its own independent copy of the same
   gradient. That local copy used to restart the pattern at this
   section's own top edge, creating a visible seam against whichever
   section sits directly above/below it (reported as "the gradient looks
   bad between sections" - see the big comment on body::before). */
.ad-preview {
  /* System/Inter stack, not the sitewide var(--font) - explicit "clean,
     not decorative" typography request, scoped to just this section. */
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  position: relative; background: transparent; padding: 48px 0;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.ad-preview > .ad-container { position: relative; z-index: 1; max-width: 1100px; padding-left: 16px; padding-right: 16px; }
@media (min-width: 768px) {
  .ad-preview { padding: 60px 0; }
  .ad-preview > .ad-container { max-width: 1100px; padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1024px) {
  .ad-preview { padding: 100px 0; }
  .ad-preview > .ad-container { max-width: 1100px; padding-left: 24px; padding-right: 24px; }
}

/* Heading - plain sitewide default (.ad-section-header h2: 32px→48px,
   weight 400, centered, no highlight), by explicit request ("update font
   structure and all as in all section titles"). Used to be a custom
   bold-navy heading, forced to one line on desktop, with a gradient/
   underline-highlighted "mobile" word (.ad-preview-heading/
   .ad-preview-heading-highlight) - both removed outright, not just
   unused; don't reintroduce a per-section heading override here without
   a new explicit request. */

.ad-preview-platforms {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 20px; padding: 0 16px;
}
@media (min-width: 768px) {
  .ad-preview-platforms { flex-direction: row; justify-content: center; gap: 28px; padding: 0; }
}

.ad-preview-platform-card {
  /* Borderless by explicit request - no top accent bar, no colored
     border/outline anywhere on this card. Just a soft shadow for depth. */
  display: flex; flex-direction: column; align-items: center;
  background: #fff; border-radius: 24px; border: none;
  box-shadow: 0 4px 24px rgba(28,53,153,0.08);
  padding: 28px 24px; text-align: center; gap: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (min-width: 768px) {
  .ad-preview-platform-card { width: 340px; flex: none; padding: 40px 36px; }
}
/* `.ad-preview-platforms .ad-preview-platform-card:hover` (3 selectors),
   not just `.ad-preview-platform-card:hover` (2) - needs to out-specificity
   `.ad-reveal.visible { transform: translateY(0); }` (SCROLL REVEAL,
   below), which these cards also carry (for the sitewide scroll-in
   effect) and which sits later in the stylesheet at equal (0,2,0)
   specificity - so it silently won and pinned the card's transform to 0,
   killing the hover lift entirely. box-shadow isn't affected (`.ad-reveal`
   never touches it), which is why only the lift looked broken. Caught by
   measuring computed `transform` under a real hover, not by eye. */
.ad-preview-platforms .ad-preview-platform-card:hover {
  transform: translateY(-6px); box-shadow: 0 16px 48px rgba(28,53,153,0.14);
}
/* Icon - contained in a soft rounded square instead of floating alone */
.ad-preview-platform-icon {
  width: 64px; height: 64px; border-radius: 16px; background: #F0F4FF;
  color: #4D42FF; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ad-preview-platform-icon svg { width: 28px; height: 28px; }
.ad-preview-platform-label {
  font-size: 15px; font-weight: 600; color: #2A2A2A; letter-spacing: 0.2px;
  margin-top: 4px;
}

/* Login button - primary CTA, website card. */
.ad-preview-login-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px; box-sizing: border-box;
  padding: 14px 0; border-radius: 14px; border: none; outline: none;
  background: #4D42FF; color: #fff;
  font-size: 15px; font-weight: 700;
  text-decoration: none; transition: all 0.25s ease;
}
.ad-preview-login-btn:hover {
  background: #2F58FF; box-shadow: 0 6px 20px rgba(77,66,255,0.35); transform: scale(1.02);
}

/* Google Play button - secondary CTA, Android card. Real badge artwork
   (assets/google-play-badge.svg) is used elsewhere (header); here the
   spec asks for a custom dark button instead, with just the small
   colored Play triangle glyph inline - assets/google-play-glyph.svg. */
.ad-preview-playstore-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 48px; box-sizing: border-box;
  padding: 14px 0; border-radius: 14px; border: none; outline: none;
  background: #1a1a1a; color: #fff;
  font-size: 15px; font-weight: 700;
  text-decoration: none; transition: all 0.25s ease;
}
.ad-preview-playstore-btn:hover {
  background: #2A2A2A; box-shadow: 0 6px 20px rgba(0,0,0,0.25); transform: scale(1.02);
}
.ad-preview-playstore-btn-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* Phone mockup - Samsung style (still used by the Hero's own phone mock) */
.ad-phone {
  width: 280px; background: var(--bg);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1);
  border: 4px solid #1a1a2e;
}
.ad-phone-statusbar {
  width: 100%; height: 24px; background: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; position: relative;
}
.ad-phone-time { font-size: 10px; font-weight: 600; color: #1a1a2e; }
.ad-phone-camera {
  width: 8px; height: 8px; border-radius: 50%; background: #1a1a2e;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  box-shadow: inset 0 0 0 1.5px #333;
}
.ad-phone-icons { display: flex; gap: 3px; align-items: center; }
.ad-phone-icons span {
  display: block; width: 10px; height: 7px; border: 1.2px solid #1a1a2e;
  border-radius: 1px;
}
.ad-phone-icons span:last-child {
  width: 16px; height: 8px; border-radius: 2px; position: relative;
}
.ad-phone-icons span:last-child::after {
  content: ''; position: absolute; left: 2px; top: 2px;
  width: 8px; height: 3px; background: #138808; border-radius: 1px;
}
.ad-phone-screen { padding: 0; overflow: hidden; }

/* App mock inside phone */
.ad-app-mock { display: flex; height: 560px; }
.ad-app-sidebar {
  width: 44px; background: var(--navy-dark); display: flex; flex-direction: column;
  align-items: center; padding: 10px 0; gap: 4px; flex-shrink: 0;
}
.ad-app-sb-logo {
  width: 28px; height: 28px; background: var(--navy); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--saffron); font-size: 9px; font-weight: 800; margin-bottom: 10px;
}
.ad-app-sb-icon {
  width: 30px; height: 30px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.35);
}
.ad-app-sb-icon svg { width: 14px; height: 14px; }
.ad-app-sb-active { background: var(--navy); color: rgba(255,255,255,0.9); }
.ad-app-main { flex: 1; padding: 12px; overflow: hidden; background: var(--bg-light); }
.ad-app-top {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.ad-app-title { font-size: 12px; font-weight: 800; color: var(--text-dark); }
.ad-app-avatar {
  width: 24px; height: 24px; border-radius: 50%; background: var(--navy);
  color: #fff; font-size: 8px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ad-app-stats {
  display: flex; gap: 6px; margin-bottom: 10px;
}
.ad-app-stat {
  /* --bg-light, not --bg: these tiles sit on a white card inside the
     phone mock and have no border, so they'd vanish now that --bg is
     white */
  flex: 1; background: var(--bg-light); border-radius: 8px; padding: 8px 6px;
  text-align: center; border: 1px solid var(--border-light);
}
.ad-app-stat-n { display: block; font-size: 14px; font-weight: 800; color: var(--navy); }
.ad-app-stat-l { display: block; font-size: 7px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.05em; }
.ad-app-label {
  font-size: 8px; font-weight: 700; color: var(--text-light);
  text-transform: uppercase; letter-spacing: 0.08em; margin: 8px 0 5px;
}
.ad-app-card {
  display: flex; align-items: center; gap: 8px; padding: 8px;
  background: var(--bg); border-radius: 8px; border: 1px solid var(--border-light);
  margin-bottom: 5px;
}
.ad-app-card-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.ad-app-card-info { flex: 1; }
.ad-app-card-name { font-size: 10px; font-weight: 600; color: var(--text-dark); }
.ad-app-card-sub { font-size: 8px; color: var(--text-muted); }
.ad-app-stripe { display: flex; height: 3px; margin-top: auto; }
.ad-app-stripe span { flex: 1; }
.ad-app-stripe span:nth-child(1) { background: var(--saffron); }
.ad-app-stripe span:nth-child(2) { background: #eee; }
.ad-app-stripe span:nth-child(3) { background: var(--green); }

/* ================================================================
   HOW IT WORKS
================================================================ */
/* Background matches the Hero section's - now via the ONE shared
   body::before glow backdrop (see that rule's own comment) rather than
   its own independent copy of the gradient. Superseded the dark
   #2A2A2A→#000 gradient this section used before that, and then
   superseded its own local ::before copy of the glow after that (that
   copy, sitting directly below "Run Every Event Like a Pro" + App
   Preview - both using the identical pattern independently - was
   exactly the kind of restart-at-the-seam the shared backdrop fixes).
   Flipped from dark-on-dark to dark-text-on-cream: step-num circle,
   headings, body copy, and the step connector below all switched from
   light/cream colors to dark ones to stay legible on the light
   background. */
.ad-how {
  background: transparent; height: 900px;
  display: flex; align-items: center; position: relative; overflow: hidden;
}
/* .ad-how-bg-dots/.ad-how-dots-hover (this section's own local
   cursor-follow dot layer, the ORIGINAL version this whole effect was
   copied from) are gone - superseded by the sitewide `.ad-cursor-dots`/
   `body::after` version (see that comment), which uses these exact same
   color/size/opacity values and now covers this section automatically. */
.ad-how > .ad-container { position: relative; z-index: 1; }
.ad-how .ad-section-header h2 {
  color: var(--text-dark);
}
.ad-how .ad-section-header p { color: var(--text-muted); }
.ad-steps { display: flex; align-items: flex-start; justify-content: center; gap: 0; }
.ad-step { flex: 1; max-width: 320px; text-align: center; padding: 0 24px; }
.ad-step-num {
  /* Theme blue (#2F58FF, the actual brand-blue used for CTAs/accents
     sitewide - see §1 "Color"), not var(--navy) - explicit request. */
  width: 56px; height: 56px; border-radius: 50%; background: #2F58FF;
  color: #fff; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px; font-weight: 800; font-size: 20px;
}
.ad-step h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; color: var(--text-dark); }
.ad-step p { font-size: 14px; color: var(--text-muted); line-height: 1.65; }
.ad-step-connector {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); opacity: 1; padding-top: 18px; flex-shrink: 0;
}
.ad-step-connector svg { width: 24px; height: 24px; }

/* How It Works - Artist/Organizer tab switcher */
.ad-how-tabs {
  display: flex; gap: 6px; justify-content: center;
  margin-bottom: 40px;
}
.ad-how-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 22px; border-radius: var(--radius-full);
  border: 1.5px solid var(--border); background: transparent;
  color: var(--text-muted); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.2s var(--ease);
  font-family: var(--font);
}
.ad-how-tab:hover { border-color: #2F58FF; color: #2F58FF; }
.ad-how-tab.active {
  background: #2F58FF; border-color: #2F58FF;
  color: #fff; box-shadow: 0 4px 16px rgba(47,88,255,0.25);
}

/* ================================================================
   STATS
================================================================ */
.ad-stats { background: var(--bg); }
.ad-stats-grid {
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); border-radius: var(--radius-xl);
  padding: 48px 32px; box-shadow: var(--shadow-xl);
}
.ad-stat { flex: 1; text-align: center; padding: 0 24px; }
.ad-stat-number {
  font-size: clamp(36px, 4vw, 48px); font-weight: 900; color: #fff;
  line-height: 1; margin-bottom: 6px;
}
.ad-stat-label { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.55); }
.ad-stat-divider { width: 1px; height: 56px; background: rgba(255,255,255,0.12); flex-shrink: 0; }

/* ================================================================
   CONTACT - premium two-panel card redesign (exact spec)
================================================================ */
/* Background - same off-white + blue glow gradient as most sections, but
   NOT via the shared body::before/.ad-cursor-dots layers (§2) like those
   other sections: this section deliberately opts OUT of the sitewide
   cursor-dot texture (explicit "remove dot grid decoration" request)
   while still wanting the glow. Since a `position:fixed` layer can't be
   selectively hidden for just one scrolled-past section, the only way to
   keep the glow but drop the dots here is to paint this section's OWN
   opaque copy of just the glow (not the dots) on top, occluding the
   shared fixed layers for this section's box specifically. This
   reintroduces the "local glow copy" pattern the shared backdrop was
   built to avoid (§2) - safe ONLY here because Contact's neighbors
   (Reviews above = dark, Footer below = black) never show the cream glow
   themselves, so there's no adjacent identical-pattern section for this
   local copy to visibly seam against. Don't copy this exception to any
   other cream section without checking its neighbors the same way. */
/* CONVERTED TO AJRAKH, and moved into `.ad-band-warm` - it now renders
   directly below "Trusted by Event Organizers", not at the bottom of the
   old-system group. **Transparent**, the same ground as "Aapko kya
   milega?", by explicit request, so it shows the band's cloth and woven
   grain.
   Its own six-blob radial glow is DELETED, not recoloured. Two reasons and
   both are rules, not taste: §1 rule 2 (printed cloth has no gradients),
   and §2's "don't give a section its own local copy of the shared
   backdrop" - this `::before` was the exact per-section duplicate that
   caused the original seam bug everywhere else on the page.
   The custom 48/60/100px padding went too: `.ad-section` already resolves
   to `--section-padding-y`, and inside the band this section has to be
   spaced like its neighbours. */
.ad-contact {
  background: transparent; position: relative; overflow: hidden;
}
.ad-contact > .ad-container { position: relative; z-index: 1; }
/* Left-aligned 700-weight heading, the band convention (§2), replacing the
   sitewide centred `.ad-section-header` default this section used to take.
   Two classes + type so it beats that default, which is class + type. */
.ad-contact .ad-section-header { text-align: left; }
.ad-contact .ad-section-header h2 {
  text-align: left;
  font-size: 30px; font-weight: 700;
  color: var(--text-dark); letter-spacing: -0.01em; line-height: 1.2;
}
@media (min-width: 1024px) { .ad-contact .ad-section-header h2 { font-size: 36px; } }

/* Card - `--resist` paper with a hairline, no shadow. Two panels side by
   side on desktop (35% info / 65% form), single column (info panel hidden)
   on mobile. Superseded white + a 48px navy-tinted shadow, and before that
   a solid-black single-column card. */
.ad-contact-card {
  max-width: 780px; margin: 0 auto; background: var(--resist);
  border: 1px solid var(--cloth-border); border-radius: var(--radius-xl);
  display: flex; flex-direction: column; overflow: hidden;
}
@media (min-width: 768px) { .ad-contact-card { flex-direction: row; } }

/* Left info panel - desktop only */
.ad-contact-info {
  display: none;
}
@media (min-width: 768px) {
  /* Solid `--neel` indigo. This panel is the one deliberately dark object
     in the section, and a flat dye field is how Ajrakh puts weight
     somewhere - so it stays dark, it just stops being navy-with-a-glow.
     Superseded `--dark-surface` + a blue radial glow at 15% 0% + a
     white-dot grid (which was itself copied from the old "What Artists
     Say"), and before that a linear-gradient(180deg,#2F58FF,#1C3599).
     Its `::before` is deleted outright rather than recoloured: one layer
     of it was a gradient and the other was the removed sitewide dot
     texture (§2, "Mouse-follow dot reveal - REMOVED"). With no
     pseudo-element left there is nothing for the children to stack above,
     so the `z-index` dance went too. */
  .ad-contact-info {
    display: flex; flex-direction: column; position: relative; overflow: hidden;
    flex: 0 0 35%; padding: 40px 32px;
    background: var(--neel);
    color: var(--resist);
  }
}
/* The whole set flips together - §5 checklist item 2. These were tuned for
   a navy panel and `rgba(255,255,255,...)` values were the giveaway. */
.ad-contact-info h3 { color: var(--resist); font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.ad-contact-info-sub { color: rgba(253,250,244,0.78); font-size: 14px; line-height: 1.6; margin-bottom: 36px; }
.ad-contact-info-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  color: var(--resist); font-size: 14px;
}
.ad-contact-info-row svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Right form panel */
.ad-contact-form {
  flex: 1; padding: 24px; display: flex; flex-direction: column;
}
@media (min-width: 768px) { .ad-contact-form { padding: 32px; } }
@media (min-width: 1024px) { .ad-contact-form { padding: 48px; } }

.ad-form-row {
  display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 24px;
}
@media (min-width: 768px) { .ad-form-row { grid-template-columns: 1fr 1fr; } }
.ad-form-group { display: flex; flex-direction: column; }
.ad-form-group.full { grid-column: 1 / -1; margin-bottom: 24px; }
.ad-form-group label {
  font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: 8px;
}
/* Cloth-coloured wells with a real hairline, indigo on focus. Superseded a
   cool `#F6F8FF` fill with a transparent border and a `#4D42FF` focus ring
   - both of which were the last visibly blue objects left in this
   section. The focus ring stays (it is an affordance, not decoration) but
   it is indigo now. */
.ad-form-input {
  height: 52px; padding: 14px 18px; border: 1.5px solid var(--cloth-border); border-radius: var(--radius-md);
  font-size: 15px; font-family: var(--font); background: var(--cloth); color: var(--iron);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
  outline: none;
}
.ad-form-input:focus {
  border-color: var(--neel); background: var(--resist); box-shadow: 0 0 0 4px rgba(30,58,95,0.12);
}
.ad-form-input::placeholder { color: #9A8F7E; }
textarea.ad-form-input { height: auto; min-height: 140px; resize: vertical; padding-top: 14px; }

/* Iron black, flat. The 28px black drop shadow on hover is gone (§5 item
   4); the lift stays because it is feedback, not depth. */
.ad-form-submit {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; margin-top: 8px;
  background: var(--iron); color: var(--resist);
  font-size: 16px; font-weight: 400; border: 1px solid var(--iron); border-radius: var(--radius-lg);
  padding: 16px 0;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.ad-form-submit svg { width: 18px; height: 18px; }
.ad-form-submit:hover { background: #2A231E; transform: translateY(-2px); }
.ad-form-note { margin-top: 20px; text-align: center; font-size: 14px; color: var(--iron); }
.ad-form-note a { color: var(--madder); font-weight: 600; text-decoration: none; }
.ad-form-note a:hover { text-decoration: underline; }
/* WhatsApp, in its DARK green (`#075E54`, WhatsApp's own dark brand tone)
   rather than the bright `#25D366`, by explicit request. Still a WhatsApp
   colour, so the action cue survives; it also sits far better next to the
   iron submit button above it than the bright green did on cloth. Shadow
   dropped with the rest of the section's. */
.ad-form-whatsapp {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 48px; margin-top: 12px;
  background: #075E54; color: #fff;
  font-size: 15px; font-weight: 600; border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.ad-form-whatsapp:hover { background: #054740; transform: translateY(-2px); }
.ad-form-whatsapp svg { width: 20px; height: 20px; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
  .ad-form-submit:hover, .ad-form-whatsapp:hover { transform: none; }
}

@media (max-width: 767px) {
  .ad-contact-card { border-radius: var(--radius-lg); }
  .ad-contact-form { padding: 24px; }
  /* .ad-contact .ad-section-header h2 (2 classes + type), not a bare
     single-class override - needs to out-specificity the sitewide
     .ad-section-header h2 default (class + type), same gotcha noted
     elsewhere in this file (App Preview's heading hit the same thing).
     Same specificity is why the band-convention left/700 rules above are
     written that way too. */
  .ad-contact .ad-section-header h2 { font-size: 28px; }
  /* 16px, not the design spec's 15px, on this one breakpoint only - iOS
     Safari auto-zooms the viewport when a focused input's font-size is
     under 16px, which the 15px value would trigger on every phone. */
  .ad-form-input { font-size: 16px; }
}

/* ================================================================
   FOOTER
================================================================ */
/* Black gradient, replacing the old blue one, by explicit request - same
   145deg diagonal structure, black tones instead of blue. */
.ad-footer { background: linear-gradient(145deg, #000000 0%, #1a1a1a 100%); color: #fff; padding: 64px 0 32px; position: relative; overflow: hidden; }

.ad-back-to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 900;
  width: 44px; height: 44px; border-radius: 50%;
  background: #4D42FF;
  color: #fff; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(16px) scale(0.9); pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background 0.2s ease;
}
.ad-back-to-top.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.ad-back-to-top:hover { background: #2F58FF; transform: translateY(-3px) scale(1.05); }
@media (max-width: 600px) {
  .ad-back-to-top { right: 16px; bottom: 16px; }
}
.ad-footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px;
}
.ad-footer-brand p { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.65; margin: 14px 0 18px; }
.ad-footer-social { display: flex; gap: 12px; margin-bottom: 22px; }
.ad-footer-social-link {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.1); color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  transition: all 0.2s var(--ease);
}
.ad-footer-social-link:hover {
  background: var(--saffron); border-color: var(--saffron);
  color: #fff; transform: translateY(-2px);
}
/* Play store + Website in the footer's brand column.
   `.ad-phero-btn`'s base width is `min(48%, 170px)`, and that 48% resolves
   against THIS row - so the row's width has to be stated, exactly as it
   does in the Organizers CTA and the mobile nav. Third time this trap has
   come up; see the Header notes in DESIGN-SYSTEM.md. */
.ad-footer-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  width: 100%; max-width: 360px;
  margin-bottom: 20px;
}
.ad-footer-actions .ad-phero-btn { flex: 1 1 0; width: auto; min-width: 0; height: 46px; font-size: 14px; }
/* The ghost button is built for a light ground and is invisible on the
   black footer, so it flips to a light outline. Compound selector because
   the `.ad-phero-btn-ghost` rules it beats are single-class and defined
   later in this file - same specificity fight as the header's Website
   button and the Organizers CTA. */
.ad-footer-ghost.ad-phero-btn-ghost {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,0.45);
}
.ad-footer-ghost.ad-phero-btn-ghost:hover {
  background: rgba(255,255,255,0.12); border-color: #fff;
}
/* The blink+pop animation the hero buttons carry is switched off here.
   In the hero it is the page's call to action; repeated in the footer of
   every page it just twitches in the corner of the eye. */
.ad-footer-actions .ad-phero-btn,
.ad-footer-actions .ad-phero-btn::after { animation: none; }

.ad-footer-stripe { display: flex; height: 3px; width: 48px; border-radius: 2px; overflow: hidden; }
.ad-footer-stripe span:nth-child(1) { flex:1; background: var(--saffron); }
.ad-footer-stripe span:nth-child(2) { flex:1; background: rgba(255,255,255,0.5); }
.ad-footer-stripe span:nth-child(3) { flex:1; background: var(--green); }
/* Sentence case - `text-transform: uppercase` removed by explicit request
   ("only 1st letter capital, not all letters"). The size went 11px -> 14px
   and the letter-spacing 0.08em -> normal with it: 11px at wide tracking is
   a spec tuned for all-caps, and the same values on sentence case read as a
   small, oddly-gappy label rather than a column heading. The strings in
   TRANSLATIONS are already written in sentence case, so nothing else had to
   change. */
.ad-footer-links h4 {
  font-size: 14px; font-weight: 700;
  letter-spacing: 0; margin-bottom: 16px; color: #fff;
}
.ad-footer-links li { margin-bottom: 10px; }
.ad-footer-links a { font-size: 14px; color: rgba(255,255,255,0.75); transition: color 0.2s ease; }
.ad-footer-links a:hover { color: #fff; }
.ad-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.18); padding-top: 24px;
  text-align: center; font-size: 13px; color: rgba(255,255,255,0.55);
}
.ad-footer-company {
  margin-top: 8px; font-size: 12px; color: rgba(255,255,255,0.45);
}
/* Only the company NAME is a link, not the address after it. Underlined on
   hover rather than always, so the line still reads as fine print. */
.ad-footer-company-link {
  color: rgba(255,255,255,0.72); text-decoration: none;
  transition: color 0.2s ease;
}
.ad-footer-company-link:hover { color: #fff; text-decoration: underline; }

/* ================================================================
   SCROLL REVEAL
================================================================ */
.ad-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s var(--ease);
}
.ad-reveal.visible { opacity: 1; transform: translateY(0); }

/* Stagger children */
.ad-stagger > * { transition-delay: calc(var(--i, 0) * 80ms); }

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 1024px) {
  .ad-bento { grid-template-columns: repeat(2, 1fr); }
  .ad-bento-4 { grid-template-columns: repeat(2, 1fr); }
  .ad-bento-2 { grid-template-columns: repeat(2, 1fr); }
  .ad-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ad-stats-grid { flex-wrap: wrap; gap: 24px; }
  .ad-stat { flex: 0 0 45%; }
  .ad-stat-divider { display: none; }
}

@media (max-width: 768px) {
  .ad-nav { display: none; }
  .ad-menu-toggle { display: flex; }
  .ad-header-website.desktop-only { display: none; }
  .ad-btn-playstore.desktop-only { display: none; }

  .ad-hero { min-height: 700px; }
  .ad-hero-content { gap: 28px; padding: 40px 0; }
  .ad-hero-rotating { font-size: 26px; }
  .ad-hero-cta { flex-wrap: wrap; justify-content: center; }
  .ad-hero-sub { gap: 16px; }

  .ad-bento { grid-template-columns: 1fr; }
  .ad-bento-span2 { grid-column: span 1; }
  .ad-bento-4 { grid-template-columns: 1fr; }
  .ad-bento-2 { grid-template-columns: 1fr; }
  .ad-features-groups { gap: 32px; }

  .ad-how { height: auto; }
  .ad-how-tab { padding: 8px 16px; font-size: 12px; }
  .ad-steps { flex-direction: column; align-items: center; gap: 24px; }
  .ad-step { width: 100%; max-width: 100%; padding: 0; }
  .ad-step-connector { width: 100%; padding-top: 0; transform: rotate(90deg); }

  .ad-stats-grid { padding: 32px 20px; border-radius: var(--radius-lg); }
  .ad-stat { flex: 0 0 100%; }
  .ad-stat-number { font-size: 36px; }

  .ad-footer-grid { grid-template-columns: 1fr; gap: 28px; }

  .ad-phone { width: 240px; border-radius: 14px; border-width: 3px; }

  .ad-lang-btn { padding: 6px 10px; font-size: 11px; }
  .ad-lang-dropdown { min-width: 130px; }
}

/* ================================================================
   LANGUAGE SWITCHER
================================================================ */
.ad-lang-switcher {
  position: relative;
}
.ad-lang-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: var(--radius-full);
  /* warm cloth hairline - was a cool light grey #D1D5DB, which read as a
     blue-ish outline once the header went to undyed cloth */
  border: 1.5px solid var(--cloth-border); background: transparent;
  color: var(--iron); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.2s var(--ease);
  font-family: var(--font); white-space: nowrap; line-height: 1;
}
.ad-lang-btn:hover { background: rgba(30,58,95,0.06); border-color: var(--neel); }
.ad-lang-btn span:not([class]) { min-width: 16px; text-align: center; }
.ad-lang-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--resist); border: 1px solid var(--cloth-border);
  border-radius: var(--radius-md); box-shadow: 0 8px 28px rgba(58,50,44,0.14);
  overflow: hidden; min-width: 148px; z-index: 1001;
  animation: ad-dropdown-in 0.15s ease forwards;
}
@keyframes ad-dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.ad-lang-option {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 10px 14px; background: none; border: none;
  font-size: 13px; font-weight: 500; color: var(--text-body);
  cursor: pointer; transition: background 0.15s; text-align: left;
  font-family: var(--font);
}
.ad-lang-option:hover { background: rgba(30,58,95,0.06); }
.ad-lang-option.active { color: var(--neel); font-weight: 700; background: rgba(30,58,95,0.08); }
.ad-lang-check { display: inline-flex; align-items: center; width: 14px; flex-shrink: 0; color: var(--neel); }
.ad-lang-check.invisible { visibility: hidden; }

/* Mobile language switcher in overlay */
.ad-mobile-lang {
  display: flex; gap: 10px; margin-top: 8px;
}
/* Part of the same dark→light inversion as the rest of the menu: these
   were white-alpha border + white-alpha label, which on undyed cloth were
   effectively invisible (confirmed on a screenshot - the EN/हि/ગુ row had
   all but disappeared). Everything tuned for the dark panel had to flip
   together; see `.ad-mobile-nav`. */
.ad-mobile-lang-btn {
  padding: 8px 18px; border-radius: var(--radius-full);
  border: 2px solid var(--cloth-border); background: transparent;
  color: var(--iron); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.2s; font-family: var(--font);
}
.ad-mobile-lang-btn.active {
  background: rgba(30,58,95,0.08); color: var(--neel);
  border-color: var(--neel);
}
.ad-mobile-lang-btn:hover { color: #fff; border-color: rgba(255,255,255,0.4); }

/* ================================================================
   HERO SLIDER
================================================================ */
.ad-hslider {
  position: relative;
  overflow: hidden;
  padding-top: var(--nav-h);
}

/* ── Toran ── */
.ad-hslider-toran {
  position: absolute; top: 0; left: 0; right: 0; z-index: 8;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

.ad-hslider-frame {
  position: relative;
  height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h));
  min-height: 640px;
}

/* Individual slide - absolute, fades in/out */
.ad-hslide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 0.85s ease;
  pointer-events: none; overflow: hidden;
}
.ad-hslide.active { opacity: 1; pointer-events: all; z-index: 1; }

/* Subtle deshi block-print dot texture on every slide */
.ad-hslide::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.065) 1px, transparent 1px);
  background-size: 28px 28px;
}
/* Edge vignette - like traditional Indian painting border */
.ad-hslide::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 40%, transparent 45%, rgba(0,0,0,0.35) 100%);
}

/* ── Deshi Indian traditional color themes ── */
/* Slide 1 - Terracotta/Sindoor: earthen clay pot, diya, rangmanch stage */
.ad-hslide-1 { background: linear-gradient(160deg, #2A0A00 0%, #4E1600 35%, #6A2000 65%, #3A0E00 100%); }
/* Slide 2 - Mehendi/Deep Forest: utsav night, henna fields, shaadi pandal */
.ad-hslide-2 { background: linear-gradient(160deg, #0A1600 0%, #182800 35%, #243800 65%, #0E1E00 100%); }
/* Slide 3 - Laal/Gulal Maroon: royal darbar, sabha, kumkum sindoor */
.ad-hslide-3 { background: linear-gradient(160deg, #220006 0%, #400010 35%, #58001A 65%, #2E000C 100%); }
/* Slide 4 - Neel/Indigo: traditional dyed fabric, night sky, classical art */
.ad-hslide-4 { background: #f6f5ec; }
.ad-hslide-4::before, .ad-hslide-4::after { content: none; }

/* Deshi ambient glow - earthy warm tones, not cool/modern */
.ad-hslide-glow-a { position: absolute; pointer-events: none; z-index: 0; width: 640px; height: 640px; border-radius: 50%; top: -200px; right: -160px; }
.ad-hslide-glow-b { position: absolute; pointer-events: none; z-index: 0; width: 400px; height: 400px; border-radius: 50%; bottom: -150px; left: -80px; }
/* Terracotta: warm diya/marigold glow */
.ad-hslide-1 .ad-hslide-glow-a { background: radial-gradient(circle, rgba(220,90,0,0.18) 0%, transparent 65%); }
.ad-hslide-1 .ad-hslide-glow-b { background: radial-gradient(circle, rgba(180,60,0,0.10) 0%, transparent 60%); }
/* Mehendi: warm turmeric/haldi glow */
.ad-hslide-2 .ad-hslide-glow-a { background: radial-gradient(circle, rgba(180,150,0,0.16) 0%, transparent 65%); }
.ad-hslide-2 .ad-hslide-glow-b { background: radial-gradient(circle, rgba(100,130,0,0.08) 0%, transparent 60%); }
/* Maroon: gold/sindoor glow */
.ad-hslide-3 .ad-hslide-glow-a { background: radial-gradient(circle, rgba(220,130,0,0.16) 0%, transparent 65%); }
.ad-hslide-3 .ad-hslide-glow-b { background: radial-gradient(circle, rgba(160,20,20,0.09) 0%, transparent 60%); }
/* Neel: saffron/haldi warm glow against cold indigo */
.ad-hslide-4 .ad-hslide-glow-a { background: radial-gradient(circle, rgba(200,120,0,0.15) 0%, transparent 65%); }
.ad-hslide-4 .ad-hslide-glow-b { background: radial-gradient(circle, rgba(100,60,180,0.07) 0%, transparent 60%); }

/* ── Background sketches ── */
.ad-hslide-sketches {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  color: rgba(255,255,255,1); overflow: hidden;
}
.ad-sketch { position: absolute; opacity: 0.055; }
.ad-sketch-tl { top: 60px;  left: 20px;  width: 130px; height: 160px; }
.ad-sketch-bl { bottom: 32px; left: 30px;  width: 110px; height: 130px; }
.ad-sketch-tr { top: 80px;  right: 24px; width: 110px; height: 90px; }
.ad-sketch-br { bottom: 36px; right: 20px; width: 80px;  height: 130px; }

/* ── Inner two-column grid ── */
.ad-hslide-inner {
  position: relative; z-index: 2;
  height: 100%;
  max-width: var(--max-w); margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  grid-template-areas: "text photo" "btns photo";
  gap: 24px 48px; align-items: center;
}

/* ── LEFT: Text column ── */
.ad-hslide-text { grid-area: text; align-self: end; display: flex; flex-direction: column; gap: 18px; }
.ad-hslide-eyebrow {
  display: inline-flex; align-items: center;
  padding: 5px 16px; border-radius: 99px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; width: fit-content;
}
/* Eyebrow colors tuned to each deshi slide background */
.ad-hslide-1 .ad-hslide-eyebrow { background: rgba(255,160,30,0.18); border: 1px solid rgba(255,160,30,0.45); color: #FFD070; }
.ad-hslide-2 .ad-hslide-eyebrow { background: rgba(200,200,0,0.15); border: 1px solid rgba(200,200,0,0.35); color: #E8E060; }
.ad-hslide-3 .ad-hslide-eyebrow { background: rgba(255,160,0,0.16); border: 1px solid rgba(255,160,0,0.4); color: #FFD080; }
.ad-hslide-4 .ad-hslide-eyebrow { background: rgba(255,153,51,0.18); border: 1px solid rgba(255,153,51,0.4); color: #FFBE80; }
/* Eyebrow badges removed */
.ad-hslide-eyebrow { display: none; }

.ad-hslide-headline {
  font-size: clamp(30px, 3.5vw, 56px); font-weight: 800;
  color: #000; line-height: 1.2; letter-spacing: -0.02em; margin: 0;
}
.ad-hslide-divider { width: 56px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.ad-hslide-1 .ad-hslide-divider { background: linear-gradient(90deg, #FFB700, #E86000); }
.ad-hslide-2 .ad-hslide-divider { background: linear-gradient(90deg, #D4C800, #88A000); }
.ad-hslide-3 .ad-hslide-divider { background: linear-gradient(90deg, #FFB700, #CC6600); }
.ad-hslide-4 .ad-hslide-divider { background: linear-gradient(90deg, #FF9933, #CC6600); }
.ad-hslide-desc { font-size: 18px; color: rgba(255,255,255,0.72); line-height: 1.7; max-width: 500px; }
.ad-hslide-pains { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; }
.ad-hslide-pains li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.78); line-height: 1.5; }
.ad-hslide-pain-icon { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; }
.ad-hslide-1 .ad-hslide-pain-icon { background: rgba(255,160,0,0.22); color: #FFD070; }
.ad-hslide-2 .ad-hslide-pain-icon { background: rgba(200,200,0,0.18); color: #E8E060; }
.ad-hslide-3 .ad-hslide-pain-icon { background: rgba(255,160,0,0.20); color: #FFD080; }
.ad-hslide-4 .ad-hslide-pain-icon { background: rgba(255,153,51,0.2); color: #FFBE80; }
.ad-hslide-cta {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; width: 144px; padding: 12px 0; justify-content: center;
  border-radius: var(--radius-full); font-size: 15px; font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none; margin-top: 4px;
  background: linear-gradient(135deg, #2F58FF, #1C3599); color: #fff;
  border: none; box-shadow: var(--shadow-md);
}
.ad-hslide-cta:hover { background: linear-gradient(135deg, #1C3599, #2F58FF); transform: translateY(-2px); }
.ad-hslide-cta-globe { display: inline-flex; }
.ad-hslide-cta-arrow { display: none; }

/* ── Static hero: small tagline + action buttons ── */
.ad-hslide-tagline { font-size: 14px; color: rgba(0,0,0,0.65); line-height: 1.7; max-width: 460px; }
.ad-hslide-btns { grid-area: btns; align-self: start; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.ad-hslide-playstore {
  height: 44px; width: 144px; padding: 12px 0; border-radius: var(--radius-full);
  box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center;
  overflow: hidden; transition: transform 0.2s ease;
}
.ad-hslide-playstore:hover { transform: translateY(-2px); }
.ad-hslide-playstore img { width: 144px; height: 44px; object-fit: cover; display: block; }

/* ── RIGHT: Phone mockup + floating PDF export badge ── */
.ad-hslide-photo-area { grid-area: photo; display: flex; align-items: center; justify-content: center; height: 100%; }
.ad-hero-phone-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.ad-hero-phone { width: 280px; height: 550px; display: flex; flex-direction: column; box-shadow: none; }
.ad-hero-phone .ad-phone-statusbar { flex-shrink: 0; }
.ad-hero-phone .ad-phone-screen {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
}
.ad-hero-phone .ad-phone-screen::-webkit-scrollbar { display: none; }

.ad-hero-pdf-badge {
  position: absolute; bottom: -28px; right: -40px; z-index: 3;
  width: 210px; height: 118px; border-radius: 12px; overflow: hidden;
  transform: rotate(6deg); cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@supports (aspect-ratio: 1) {
  .ad-hero-pdf-badge { aspect-ratio: 16 / 9; height: auto; }
}
.ad-hero-pdf-badge:hover { transform: rotate(2deg) scale(1.04); }

/* Stacked PDF previews - only the front card fully visible, others peek at the corner */
.ad-hero-pdf-stack {
  position: absolute; width: 82%; height: 82%;
  border-radius: 8px; overflow: hidden; background: #fff;
  border: 3px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.ad-hero-pdf-stack img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-hero-pdf-stack-0 { top: 0;   left: 0;   z-index: 4; transform: rotate(-2deg); }
.ad-hero-pdf-stack-1 { top: 6%;  left: 6%;  z-index: 3; transform: rotate(0deg); }
.ad-hero-pdf-stack-2 { top: 12%; left: 12%; z-index: 2; transform: rotate(2deg); }
.ad-hero-pdf-stack-3 { top: 18%; left: 18%; z-index: 1; transform: rotate(4deg); }

/* Floating callout pointing at the PDF stack */
.ad-hero-pdf-callout {
  position: absolute; bottom: 102px; right: 65px; z-index: 5;
  transform: translateX(50%) rotate(-3deg);
  display: flex; align-items: center; gap: 6px;
  background: var(--green); color: #fff; font-size: 13px; font-weight: 700;
  padding: 8px 16px; border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  white-space: nowrap; pointer-events: none;
}
.ad-hero-pdf-callout svg { color: #fff; flex-shrink: 0; }

/* ── PDF export slider modal ── */
.ad-pdf-modal-backdrop {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(5,6,24,0.92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .ad-pdf-modal-backdrop { background: rgba(5,6,24,0.78); }
}
.ad-pdf-modal {
  position: relative; background: #fff; border-radius: 14px; overflow: hidden;
  width: min(800px, 100%); max-height: 90vh; max-height: 90dvh;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  display: flex; flex-direction: column;
}
.ad-pdf-modal-titlebar {
  background: var(--navy-dark); color: #fff;
  font-size: 22px; font-weight: 800; letter-spacing: -0.01em;
  text-align: center; padding: 18px 56px; flex-shrink: 0;
}
.ad-pdf-modal-viewport { overflow: hidden; }
.ad-pdf-modal-track { display: flex; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.ad-pdf-modal-slide {
  flex: 0 0 100%; display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 24px 56px 28px;
}
.ad-pdf-modal-slide img {
  width: 100%; max-height: 65vh; max-height: 65dvh; object-fit: contain;
  border-radius: 8px; border: 1px solid rgba(0,0,0,0.08);
}
.ad-pdf-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: none; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease;
}
.ad-pdf-modal-close:hover { background: rgba(255,255,255,0.28); }
.ad-pdf-modal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.9); border: 1px solid rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: #1a1a2e; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: background 0.2s ease;
}
.ad-pdf-modal-arrow:hover { background: #fff; }
.ad-pdf-modal-prev { left: 12px; }
.ad-pdf-modal-next { right: 12px; }
.ad-pdf-modal-dots { display: flex; justify-content: center; gap: 8px; padding: 0 0 20px; }
.ad-pdf-modal-dot {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.15);
  cursor: pointer; transition: background 0.2s ease; border: none;
}
.ad-pdf-modal-dot.active { background: #2F58FF; }

/* ── Gujarati saree zigzag border ── */
.ad-hslide-gujborder {
  position: absolute; inset: 12px; z-index: 1; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='18'%3E%3Cpolyline points='0,4 10,14 20,4 30,14 40,4' fill='none' stroke='%232F58FF' stroke-width='2.2' stroke-linejoin='miter' stroke-linecap='square' opacity='.72'/%3E%3Ccircle cx='10' cy='14' r='1.8' fill='%232F58FF' opacity='.65'/%3E%3Ccircle cx='30' cy='14' r='1.8' fill='%232F58FF' opacity='.65'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='18'%3E%3Cpolyline points='0,14 10,4 20,14 30,4 40,14' fill='none' stroke='%232F58FF' stroke-width='2.2' stroke-linejoin='miter' stroke-linecap='square' opacity='.72'/%3E%3Ccircle cx='10' cy='4' r='1.8' fill='%232F58FF' opacity='.65'/%3E%3Ccircle cx='30' cy='4' r='1.8' fill='%232F58FF' opacity='.65'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='40'%3E%3Cpolyline points='14,0 4,10 14,20 4,30 14,40' fill='none' stroke='%232F58FF' stroke-width='2.2' stroke-linejoin='miter' stroke-linecap='square' opacity='.72'/%3E%3Ccircle cx='4' cy='10' r='1.8' fill='%232F58FF' opacity='.65'/%3E%3Ccircle cx='4' cy='30' r='1.8' fill='%232F58FF' opacity='.65'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='40'%3E%3Cpolyline points='4,0 14,10 4,20 14,30 4,40' fill='none' stroke='%232F58FF' stroke-width='2.2' stroke-linejoin='miter' stroke-linecap='square' opacity='.72'/%3E%3Ccircle cx='14' cy='10' r='1.8' fill='%232F58FF' opacity='.65'/%3E%3Ccircle cx='14' cy='30' r='1.8' fill='%232F58FF' opacity='.65'/%3E%3C/svg%3E");
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: left top, left bottom, left top, right top;
  background-size: 40px 18px, 40px 18px, 18px 40px, 18px 40px;
}
.ad-hslide-gujborder::before {
  content: ''; position: absolute; inset: 22px;
  border: 1px solid rgba(47,88,255,0.12); pointer-events: none;
}
.ad-hslide-gujborder::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle, rgba(47,88,255,0.95) 8px, rgba(47,88,255,0.25) 9px, transparent 10px) 0 0 / 18px 18px no-repeat,
    radial-gradient(circle, rgba(47,88,255,0.95) 8px, rgba(47,88,255,0.25) 9px, transparent 10px) 100% 0 / 18px 18px no-repeat,
    radial-gradient(circle, rgba(47,88,255,0.95) 8px, rgba(47,88,255,0.25) 9px, transparent 10px) 0 100% / 18px 18px no-repeat,
    radial-gradient(circle, rgba(47,88,255,0.95) 8px, rgba(47,88,255,0.25) 9px, transparent 10px) 100% 100% / 18px 18px no-repeat;
}

/* ── Mobile ── */
@media (max-width: 900px) {
  :root { --nav-h: 90px; }

  /* Header: smaller logo - height-driven like the base rule (a fixed
     `width: 135px` here used to fight it; with one lockup image, height
     is the only dimension that should ever be set) */
  .ad-logo img.ad-logo-svg { height: 30px; width: auto; max-width: 165px; }


  /* Section: hug height - grows with content */
  .ad-hslider-frame { height: auto; min-height: unset; overflow: visible; }
  .ad-hslide { position: relative; inset: unset; height: auto; overflow: visible; }
  .ad-hslide:not(.active) { display: none; }

  /* Border: removed on mobile */
  .ad-hslide-gujborder { display: none; }

  /* Inner: single column - title/tagline → buttons → mockup+pdf */
  .ad-hslide-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "btns" "photo";
    height: auto;
    padding: 16px 20px; gap: 20px; align-items: stretch;
  }

  /* Phone mockup + PDF badge - overlap style, scaled to match action-row width (~305px) */
  .ad-hero-phone { width: 285px; height: 559px; }
  .ad-hero-pdf-badge { width: 194px; right: -21px; bottom: -21px; }
  .ad-hslide-photo-area { padding-bottom: 30px; }

  .ad-pdf-modal-slide { padding: 20px 20px 20px; }
  .ad-pdf-modal-arrow { width: 34px; height: 34px; }
  .ad-pdf-modal-titlebar { font-size: 17px; padding: 14px 48px; }
  .ad-hero-pdf-callout { font-size: 11px; padding: 6px 12px; bottom: 98px; right: 76px; gap: 4px; }
  .ad-hero-pdf-callout svg { width: 13px; height: 13px; }

  /* Text: left-aligned, buttons centered */
  .ad-hslide-text { align-items: flex-start; text-align: left; align-self: auto; gap: 12px; }
  .ad-hslide-btns { justify-content: center; align-self: auto; margin: 24px auto 0; flex-wrap: nowrap; }

  .ad-hslide-divider {
    align-self: flex-start; width: 64px; height: 4px;
    background: var(--saffron) !important;
  }
  .ad-hslide-headline {
    font-size: clamp(26px, 8vw, 34px); font-weight: 800; line-height: 1.18;
    margin: 0; padding-top: 20px; text-align: left; letter-spacing: -0.01em;
    color: var(--text-dark);
  }
  .ad-hslide-tagline { font-size: 14.5px; line-height: 1.65; color: var(--text-body); }

  /* Sketches hidden on mobile for clean layout */
  .ad-hslide-sketches { display: none; }

  /* Bottom guj border strip below hero section */
  .ad-hslider { padding-bottom: 14px; }
  .ad-hslider::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='18'%3E%3Cpolyline points='0,14 10,4 20,14 30,4 40,14' fill='none' stroke='%232F58FF' stroke-width='2.2' stroke-linejoin='miter' stroke-linecap='square' opacity='.72'/%3E%3Ccircle cx='10' cy='4' r='1.8' fill='%232F58FF' opacity='.65'/%3E%3Ccircle cx='30' cy='4' r='1.8' fill='%232F58FF' opacity='.65'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 30px 14px;
    z-index: 5; pointer-events: none;
  }
}
@media (max-width: 480px) {
  .ad-hero-phone { width: 287px; height: 563px; }
  .ad-hero-pdf-badge { width: 189px; right: -18px; bottom: -18px; }

  .ad-pdf-modal-close { width: 30px; height: 30px; }
  .ad-pdf-modal-arrow { width: 30px; height: 30px; }
  .ad-pdf-modal-prev { left: 6px; }
  .ad-pdf-modal-next { right: 6px; }
  .ad-pdf-modal-titlebar { font-size: 15px; padding: 12px 40px; }
  .ad-hero-pdf-callout { font-size: 10px; padding: 5px 10px; bottom: 97px; right: 76px; gap: 4px; }
  .ad-hero-pdf-callout svg { width: 11px; height: 11px; }
}

/* ================================================================
   ANEK GUJARATI FONT - Hindi & Gujarati languages
================================================================ */
body[data-lang="hi"],
body[data-lang="gu"] {
  --font: 'Anek Gujarati', system-ui, sans-serif;
}

/* ================================================================
   REGISTERED ARTISTS - trust stats section
================================================================ */
.ad-reg-artists {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
/* Dot grid overlay - matches the audience section below for a seamless join */
.ad-reg-artists::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.5;
}
.ad-reg-artists > .ad-container { width: 100%; position: relative; z-index: 1; }

/* Header on dark bg */
.ad-reg-artists .ad-section-header h2 { color: #FFF5E4; }
.ad-reg-artists .ad-section-header p  { color: rgba(255,245,228,0.72); max-width: 520px; margin: 10px auto 0; }

.ad-reg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Card - glass */
.ad-reg-card {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,245,228,0.14);
  border-radius: 20px;
  padding: 52px 28px 44px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  position: relative; overflow: hidden;
  transition: transform 0.28s var(--ease), background 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
/* Top shimmer line */
.ad-reg-card::before {
  content: '';
  position: absolute; top: 0; left: 15%; right: 15%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,245,228,0.55), transparent);
  border-radius: 0 0 4px 4px;
  transform: scaleX(0.5);
  transition: transform 0.35s var(--ease), opacity 0.35s;
  opacity: 0.6;
}
.ad-reg-card:hover {
  transform: translateY(-10px);
  background: rgba(255,255,255,0.13);
  box-shadow: 0 28px 64px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,245,228,0.18);
}
.ad-reg-card:hover::before { transform: scaleX(1); opacity: 1; }

/* Icon circle - not a rectangle */
.ad-reg-card-icon {
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255,245,228,0.1);
  border: 1px solid rgba(255,245,228,0.18);
  box-shadow: 0 0 28px rgba(255,245,228,0.08);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
  transition: background 0.28s, box-shadow 0.28s;
}
.ad-reg-card:hover .ad-reg-card-icon {
  background: rgba(255,245,228,0.17);
  box-shadow: 0 0 40px rgba(255,245,228,0.16);
}
.ad-reg-card-icon svg { color: #FFF5E4; }

/* Number - large cream */
.ad-reg-card .ad-stat-number {
  font-size: clamp(46px, 5vw, 64px) !important; font-weight: 900 !important;
  color: #FFF5E4 !important; line-height: 1 !important;
  letter-spacing: -0.035em; display: block;
  text-shadow: 0 2px 20px rgba(255,245,228,0.25);
}
.ad-reg-card-number {
  font-size: clamp(46px, 5vw, 64px); font-weight: 900;
  color: #FFF5E4; line-height: 1; letter-spacing: -0.035em; display: block;
  text-shadow: 0 2px 20px rgba(255,245,228,0.25);
}

/* Label */
/* text-transform: uppercase removed - labels are sentence case in the
   source (e.g. "Artists registered") by explicit request, so the CSS
   must not override that visually. */
.ad-reg-card-label {
  font-size: 13px; font-weight: 700; color: #FFF5E4;
  letter-spacing: 0.06em;
}

/* Card body - number + label + sub grouped */
.ad-reg-card-body { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
@media (max-width: 600px) { .ad-reg-card-body { align-items: flex-start; } }

/* stagger reveal */
.ad-reg-card.ad-reveal { transition-delay: calc(var(--i, 0) * 130ms); }

@media (max-width: 900px) {
  .ad-reg-artists { min-height: auto; }
  .ad-reg-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 100%; }
  .ad-reg-card { padding: 36px 18px 30px; }
}
@media (max-width: 600px) {
  .ad-reg-grid { grid-template-columns: repeat(1, 1fr); gap: 16px; }
  .ad-reg-card { padding: 36px 24px 30px; flex-direction: row; text-align: left; gap: 20px; }
  .ad-reg-card-icon { width: 64px; height: 64px; flex-shrink: 0; margin-bottom: 0; }
  .ad-reg-card-body { display: flex; flex-direction: column; gap: 4px; }
}

/* ================================================================
   TRUSTED BY - client testimonial cards
================================================================ */
/* CONVERTED TO AJRAKH, and moved into `.ad-band-warm` - it now renders
   between "Meet the Organizers" and Contact, not down among the old-system
   sections. Background is `--cloth-deep`, matching Trending Artist
   Profiles, by explicit request.
   Superseded, in order: its own solid `#f6f5ec` fill + a centred soft-blue
   radial blob; then `background: transparent` over the sitewide blue glow.
   Both belonged to the old system.
   `min-height: 900px` + flex centring went with the move. That existed to
   float two cards in the middle of a near-full-screen section; inside the
   band it just produced a large dead gap above and below, and the band's
   sections are spaced by `--section-padding-y` like everything else. */
.ad-trusted {
  background: var(--cloth-deep);
  position: relative;
  overflow: hidden;
}
.ad-trusted > .ad-container { width: 100%; position: relative; z-index: 1; }
.ad-trusted-title { margin-bottom: var(--section-title-gap); }
.ad-trusted-title h2 {
  margin: 0; text-align: left;
  font-family: var(--font); font-size: 30px; font-weight: 700;
  color: var(--text-dark); letter-spacing: -0.01em; line-height: 1.2;
}
@media (min-width: 1024px) { .ad-trusted-title h2 { font-size: 36px; } }


.ad-trusted-clients {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
  max-width: 940px; margin: 0 auto;
}

/* Card - `--resist` paper, hairline border, NO shadow. Superseded white +
   a 40px black shadow that lifted 8px into a blue-tinted 64px shadow on
   hover. Ajrakh is printed, not floating (§5 checklist item 4), so the
   hover is a border colour plus the same 2px lift the other card families
   in this band use. */
.ad-trusted-card {
  background: var(--resist);
  border: 1px solid var(--cloth-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.ad-trusted-card:hover { border-color: var(--neel); transform: translateY(-2px); }

/* Photo. `contain`, not `cover` - these are logos and posed portraits, and
   cropping a logo to fill is how you cut a brand in half. The letterbox
   sits on `--cloth` so it reads as the card's own paper. */
.ad-trusted-photo {
  width: 100%; height: 300px;
  overflow: hidden; flex-shrink: 0;
  background: var(--cloth);
  position: relative;
}
.ad-trusted-photo img {
  width: 100%; height: 100%; object-fit: contain; object-position: center; display: block;
  transition: transform 0.42s var(--ease);
}
.ad-trusted-card:hover .ad-trusted-photo img { transform: scale(1.04); }
/* The white-to-transparent fade that used to blend the photo into the card
   body is GONE - it was a gradient (§1 rule 2) and it was keyed to #fff,
   so on `--resist` paper it read as a pale smear across the bottom of
   every logo. A hairline does the same job honestly. */
.ad-trusted-photo { border-bottom: 1px solid var(--cloth-border); }

/* Body */
.ad-trusted-body {
  padding: 20px 28px 28px;
  display: flex; flex-direction: column; gap: 14px; flex: 1;
}

/* Header row - identity left, Instagram icon right */
.ad-trusted-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ad-trusted-identity { display: flex; flex-direction: column; gap: 4px; }
/* `--neel`, not `#2F58FF` - the brand blue is retired inside this band. */
.ad-trusted-org {
  font-size: 21px; font-weight: 800; color: var(--neel); line-height: 1.2;
}
.ad-trusted-owner {
  font-size: 13.5px; font-weight: 600; color: var(--text-dark);
}

/* Instagram icon button - flat, bordered, same shape language as
   `.ad-pf-qr`. Superseded the five-stop Instagram brand gradient and its
   magenta drop shadow: a gradient is the one thing §1 rule 2 rules out,
   and it was the single loudest object in the section. The icon artwork
   inside keeps its own colours, so the link is still recognisably
   Instagram without the plate shouting. */
.ad-trusted-insta {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--radius-full); flex-shrink: 0;
  background: var(--resist);
  border: 1px solid var(--cloth-border);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), transform 0.22s var(--ease);
}
.ad-trusted-insta:hover { border-color: var(--neel); transform: scale(1.08); }
.ad-trusted-insta:focus-visible { outline: 2px solid var(--madder); outline-offset: 2px; }
/* The glyph itself: the SVG used as a MASK, with the colour supplied by
   `background-color`, because the file's own fill is hardcoded white. */
.ad-trusted-insta-icon {
  display: block; width: 22px; height: 22px;
  background-color: var(--iron);
  -webkit-mask-image: url("assets/icons/mdi_instagram.svg");
  mask-image: url("assets/icons/mdi_instagram.svg");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  transition: background-color 0.2s var(--ease);
}
.ad-trusted-insta:hover .ad-trusted-insta-icon { background-color: var(--neel); }

/* Quote */
.ad-trusted-quote {
  font-size: 14.5px; color: var(--iron); line-height: 1.8;
  font-style: italic; margin: 0; flex: 1;
  display: flex; gap: 8px; align-items: flex-start;
  padding-top: 10px;
  border-top: 1px solid var(--cloth-border);
}
.ad-trusted-qicon { color: var(--madder); opacity: 0.4; flex-shrink: 0; margin-top: 4px; }

/* View profile. `margin-top: auto` inside the card's flex column pushes it
   to the bottom, so the two cards' buttons line up even though their
   quotes are different lengths. Indigo fill because this is the card's
   primary action; the Instagram link stays the quiet bordered one. */
.ad-trusted-profile {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px; border-radius: var(--radius-md);
  background: var(--neel); color: var(--resist);
  border: 1px solid var(--neel);
  font-family: var(--font); font-size: 14px; font-weight: 600;
  text-decoration: none;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.ad-trusted-profile:hover { background: #17304f; transform: translateY(-2px); }
.ad-trusted-profile:focus-visible { outline: 2px solid var(--madder); outline-offset: 2px; }
@media (max-width: 480px) {
  /* Full width on small phones - an 18px-padded pill floating at the left
     of a full-width card reads as an afterthought. */
  .ad-trusted-profile { align-self: stretch; }
}

@media (max-width: 900px) {
  .ad-trusted-clients { gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .ad-trusted-card:hover { transform: none; }
  .ad-trusted-card:hover .ad-trusted-photo img { transform: none; }
  .ad-trusted-insta:hover { transform: none; }
  .ad-trusted-profile:hover { transform: none; }
}
@media (max-width: 768px) {
  .ad-trusted-clients { grid-template-columns: 1fr; }
  .ad-trusted-photo { height: 240px; }
  .ad-trusted-body { padding: 18px 20px 24px; }
}

/* ================================================================
   ARTIST REVIEWS - the two auto-scrolling rows

   NOT a section of its own any more. There is no `.ad-reviews` element:
   the rows render INSIDE `.ad-safe` ("Safe hai kya? Haan!") via
   `ADReviewsMarquee`, and the "What Artists Say" heading is gone - both
   by explicit request, so the rows read as part of that section.
   `.ad-reviews` and `.ad-reviews > .ad-container` were deleted rather
   than left behind, since nothing carries them now; the
   `.ad-reviews-marquee` / `.ad-reviews-track` / `.ad-review-card` names
   below are still live and keep their prefix.

   LIGHT cards, on the Safe section's shared `body::before` background.
   This was a full re-skin, not a background swap: every value in this
   block used to be tuned for a dark surface (cream `#FFF5E4` text,
   white-alpha glass card fills and borders, a white-dot texture, a
   `rgba(0,0,0,0.25)` hover shadow). All of it had to flip together -
   cream text on white is unreadable, and `rgba(255,255,255,0.14)` cards
   are invisible on a white ground. If these rows are ever put back on a
   dark band, flip the whole set back, not just the background.

   Superseded: a standalone `.ad-section.ad-reviews` with a
   `.ad-section-header` heading, `var(--dark-surface)` + a blue radial
   glow at 15% 0% + a white dot-grid texture (matching
   `.ad-band-audience`), and before that a blue-to-charcoal diagonal
   gradient. Older notes describing any of those are stale.
   The old section-local `::before` went rather than being recoloured:
   its glow duplicated what the shared `body::before` layer already
   provides, and its dot texture duplicated the sitewide `body::after`
   grid - exactly the per-section duplication §2 of DESIGN-SYSTEM.md
   removed everywhere else.
================================================================ */
/* Marquee.
   NOT full-bleed: `ADSafe` renders this inside `.ad-container`, so the
   rows start and end exactly where the card grid above them does
   ("same as the card's row width, not the full width"). The edge fade
   needs nothing extra for that - the `mask-image` is expressed in
   percentages of THIS box, so it simply moved inward with it and still
   fades at both sides, now against the section's own gutter. The tracks
   are still `width: max-content` and far wider than the box; `overflow:
   hidden` is what clips them, and that's unchanged by the narrower box.

   Padding is small and symmetric now that this sits INSIDE a section
   rather than being one: `.ad-safe`'s own `--section-padding-y` supplies
   the space above and below the pair, and the old `32px 0 48px` stacked
   on top of that read as a gap between two sections - which is exactly
   what the "remove extra paddings and spaces between them" request was
   about. What's left is the breathing room the rows themselves need:
   `overflow: hidden` clips at this box's edge, so without it the cards'
   hover lift and 36px-blur shadow would be cut off.
   `margin-top` is small because the rows no longer sit directly under the
   card grid - the `.ad-safe-sub` sub-title ("Kya kahete hai Artists") is
   between them now and carries the `--section-title-gap` itself. 6px here
   plus this box's own 14px padding reads as ~20px under that sub-title,
   which is the tighter label-to-content spacing the pair wants. */
.ad-reviews-marquee {
  overflow: hidden;
  margin-top: 6px;
  padding: 14px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.ad-reviews-track {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
}
.ad-reviews-track + .ad-reviews-track { margin-top: 20px; }

@keyframes adScrollLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes adScrollRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.ad-track-ltr { animation: adScrollRight 45s linear infinite; }
.ad-track-rtl { animation: adScrollLeft  45s linear infinite; }
.ad-reviews-marquee:hover .ad-reviews-track { animation-play-state: paused; }

/* Card - solid white on the light ground. The old glass treatment
   (translucent white fill + `backdrop-filter: blur`) is gone: it only
   ever read as a card because there was a dark surface behind it, and
   blurring a white background produces white, so it would have been an
   invisible, GPU-expensive no-op here. */
.ad-review-card {
  width: 320px; flex-shrink: 0;
  background: var(--resist);
  border: 1px solid var(--cloth-border);
  border-radius: var(--radius-lg);
  padding: 24px 22px 18px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.ad-review-card::before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--madder);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.ad-review-card:hover { border-color: var(--neel); }
.ad-review-card:hover::before { transform: scaleX(1); }

.ad-review-bigquote {
  font-size: 44px; line-height: 1; color: var(--madder);
  font-family: Georgia, serif; opacity: 0.25; margin-bottom: 4px;
}
.ad-review-comment {
  font-size: 13.5px; color: var(--text-muted); line-height: 1.7;
  margin: 0; flex: 1; margin-bottom: 14px;
}
.ad-review-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 12px; border-top: 1px solid var(--cloth-border);
}
.ad-review-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ad-review-meta { min-width: 0; }
.ad-review-name {
  font-size: 13px; font-weight: 700; color: var(--text-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ad-review-art { font-size: 11px; color: var(--text-light); }
.ad-review-right { text-align: right; flex-shrink: 0; }
.ad-review-stars {
  display: flex; align-items: center; gap: 1px;
  font-size: 13px; color: var(--saffron); justify-content: flex-end;
}
/* Saffron stars carry over unchanged - they read on both grounds. Only
   the empty star and the numeric rating needed flipping off white-alpha. */
.ad-star-empty { color: var(--cloth-border); }
.ad-review-rating-num { font-size: 11px; font-weight: 700; color: var(--text-light); margin-left: 3px; }

/* ================================================================
   COOKIE CONSENT BAR (DPDP Act 2023)
================================================================ */
.ad-cookie-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 24px rgba(0,22,45,0.10);
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.ad-cookie-bar.visible { transform: translateY(0); }
.ad-cookie-bar-text {
  font-size: 13px; color: var(--text-muted); line-height: 1.5; flex: 1;
}
.ad-cookie-bar-text a {
  color: #2F58FF; text-decoration: underline; font-weight: 500;
}
.ad-cookie-bar-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.ad-cookie-accept {
  padding: 8px 20px; border-radius: var(--radius-full);
  background: #2F58FF; color: #fff; border: none;
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: var(--font); transition: opacity 0.15s;
}
.ad-cookie-accept:hover { opacity: 0.88; }
.ad-cookie-decline {
  padding: 8px 16px; border-radius: var(--radius-full);
  background: transparent; color: var(--text-muted);
  border: 1.5px solid var(--border);
  font-size: 13px; font-weight: 500; cursor: pointer;
  font-family: var(--font); transition: all 0.15s;
}
.ad-cookie-decline:hover { border-color: var(--text-muted); color: var(--text-dark); }
@media (max-width: 600px) {
  .ad-cookie-bar { flex-direction: column; align-items: flex-start; padding: 16px; }
  .ad-cookie-bar-actions { width: 100%; }
  .ad-cookie-accept { flex: 1; }
  .ad-cookie-decline { flex: 1; text-align: center; }
}
/* Stranded at the end of the file, far from the rest of the review card
   rules - left in place rather than moved, but it's part of the same
   light re-skin; it was cream-alpha and invisible on white. */
.ad-review-date { font-size: 11px; color: var(--text-light); margin-top: 2px; }

/* ================================================================
   APP LAUNCH SPLASH SCREEN
   Identical animation to app.artistdiary.in - ported from the
   React app's index.css. Dismissed once React mounts or after 6s.
================================================================ */
.app-launch-splash {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  color: #2A2A2A;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.app-launch-splash--startup {
  position: fixed;
  inset: 0;
  z-index: 99999;
  opacity: 1;
  transition: opacity 200ms ease-out;
}
.app-launch-splash--exit {
  opacity: 0;
  pointer-events: none;
}
.app-launch-splash__logo-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 4.5vw, 22px);
  transform: translateY(-1vh);
}
.app-launch-splash__icon {
  position: relative;
  z-index: 2;
  width: clamp(84px, 25vw, 124px);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  overflow: visible;
  animation: appLaunchIconPulse 0.38s ease 1.72s both;
}
@media (min-width: 768px) {
  .app-launch-splash__icon { width: clamp(124px, 14vw, 170px); }
  .app-launch-splash__logo-row { gap: clamp(22px, 3vw, 30px); }
  .app-launch-splash__text { height: clamp(42px, 5.5vw, 56px); }
  .app-launch-splash__text-mask { width: min(55vw, 400px); }
}
@media (min-width: 1024px) {
  .app-launch-splash__icon { width: clamp(160px, 12vw, 200px); }
  .app-launch-splash__logo-row { gap: clamp(28px, 2.5vw, 36px); }
  .app-launch-splash__text { height: clamp(54px, 4vw, 68px); }
  .app-launch-splash__text-mask { width: min(38vw, 460px); }
}
.app-launch-splash__el {
  position: absolute;
  pointer-events: none;
}
.app-launch-splash__el img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}
.app-launch-splash__circle { inset: 0; z-index: 1; }
.app-launch-splash__circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.78);
  will-change: transform, opacity;
  animation: appLaunchStampIn 0.34s cubic-bezier(0.34, 1.45, 0.64, 1) 1.1s both;
}
.app-launch-splash__a {
  left: 7%; top: 4.3%;
  z-index: 2; width: 86%;
}
.app-launch-splash__a img { opacity: 0; will-change: transform, opacity; }
.app-launch-splash__a-top img {
  clip-path: inset(0 0 43% 0);
  transform: translateY(18%);
  animation: appLaunchASlideUp 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.66s both;
}
.app-launch-splash__a-bottom img {
  position: absolute; left: 0; top: 0;
  clip-path: inset(57% 0 0 0);
  transform: translateY(-18%);
  animation: appLaunchASlideDown 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.66s both;
}
.app-launch-splash__wing {
  left: 4.5%; top: 35%;
  z-index: 3; width: 91%;
}
.app-launch-splash__wing img {
  opacity: 0;
  filter: saturate(0) brightness(1.35);
  will-change: transform, opacity, filter;
  animation:
    appLaunchWingsIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both,
    appLaunchWingColor 0.38s ease 0.48s both;
}
.app-launch-splash__ring {
  inset: 0; z-index: 4;
  width: 100%; height: 100%;
}
.app-launch-splash__ring svg {
  width: 100%; height: 100%;
  opacity: 0;
  animation: appLaunchRingShow 0.42s ease 1.02s both;
}
.app-launch-splash__ring circle {
  stroke-dasharray: 295;
  stroke-dashoffset: 295;
  animation: appLaunchRingDraw 0.26s ease-out 1.02s both;
}
.app-launch-splash__pulse {
  position: absolute;
  left: 50%; top: 50%; z-index: 0;
  width: 220%; aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(0,51,102,0.08) 0%, transparent 56%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.16);
  animation: appLaunchBgPulse 0.7s ease 1.15s both;
  pointer-events: none;
}
.app-launch-splash__text-mask {
  position: relative; z-index: 1;
  overflow: hidden;
  display: flex; justify-content: center;
  width: min(82vw, 320px);
}
.app-launch-splash__text {
  display: block; max-width: 100%;
  width: auto; height: clamp(30px, 8vw, 42px);
  opacity: 0; transform: translateY(18%);
  will-change: transform, opacity;
  user-select: none;
  animation: appLaunchTextReveal 0.48s cubic-bezier(0.22, 1, 0.36, 1) 1.36s both;
}
@keyframes appLaunchWingsIn {
  0%   { opacity: 0; transform: scale(0.42); }
  22%  { opacity: 1; transform: scale(0.42); }
  58%  { opacity: 1; transform: scale(1.08); }
  78%  { opacity: 1; transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes appLaunchWingColor {
  from { filter: saturate(0) brightness(1.35); }
  to   { filter: saturate(1) brightness(1); }
}
@keyframes appLaunchASlideUp {
  0%   { opacity: 0; transform: translateY(18%); }
  30%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes appLaunchASlideDown {
  0%   { opacity: 0; transform: translateY(-18%); }
  30%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes appLaunchStampIn {
  0%   { opacity: 0; transform: scale(0.78); }
  50%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes appLaunchRingDraw {
  from { stroke-dashoffset: 295; }
  to   { stroke-dashoffset: 0; }
}
@keyframes appLaunchRingShow {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  76%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes appLaunchBgPulse {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.16); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.5); }
}
@keyframes appLaunchTextReveal {
  0%   { opacity: 0; transform: translateY(18%); }
  22%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes appLaunchIconPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  .app-launch-splash__icon,
  .app-launch-splash__circle img,
  .app-launch-splash__a img,
  .app-launch-splash__wing img,
  .app-launch-splash__ring svg,
  .app-launch-splash__ring circle,
  .app-launch-splash__pulse,
  .app-launch-splash__text { animation: none !important; }
  .app-launch-splash__circle img,
  .app-launch-splash__a img,
  .app-launch-splash__wing img,
  .app-launch-splash__text { opacity: 1; transform: none; filter: none; }
  .app-launch-splash__ring svg,
  .app-launch-splash__pulse { opacity: 0; }
}