/*
 * The site's one stylesheet, emitted once per release as /assets/site.<hash>.css.
 *
 * No web fonts, no images, no imports: everything a page needs is in these
 * bytes, so a page renders complete on the first response (TDD 4.4).
 *
 * The palette is the app's own, lifted from the mark's rotation (saffron,
 * marigold, magenta, indigo) and the app's ink and paper tones. Every text
 * pairing below clears WCAG AA: ink on paper 15.9:1, muted on paper 6.6:1,
 * white on the accent 5.2:1, white on indigo 9.5:1, white on the WhatsApp
 * teal 5.2:1. The accent is a burnt saffron rather than the mark's own
 * #d94f0c, whose white text sits under AA at button size, and the WhatsApp
 * teal is the brand's dark one rather than its bright #25d366, on which white
 * text is 2:1.
 *
 * Class vocabulary: the page modules (S6a) render these names. Add a name here
 * before using it there, so the stylesheet stays the one description of how the
 * site looks.
 */

:root {
  --paper: #f7f4ef;
  --surface: #ffffff;
  --tint: #f1ede6;
  --tint-strong: #e6e0d6;
  --border: #e2dcd2;
  --ink: #1c1917;
  --muted: #5c5650;
  --slate: #37474f;
  --link: #3b3b8f;
  --accent: #c2410c;
  --accent-soft: #fff1e8;
  --indigo: #3b3b8f;
  --indigo-soft: #eceefb;
  --magenta: #b02a6e;
  --highlight: #e8a317;
  --focus: #b02a6e;
  --whatsapp: #107a6e;
  --footer: #1c1917;
  --footer-ink: #f7f4ef;
  --footer-muted: #b8b0a6;
  --radius: 14px;
  --radius-sm: 10px;
  --gap: 1rem;
  --measure: 68ch;
  --page: 74rem;
  --shadow: 0 1px 2px rgba(28, 25, 23, 0.06), 0 10px 28px -14px rgba(28, 25, 23, 0.28);
  --shadow-lift: 0 2px 4px rgba(28, 25, 23, 0.08), 0 18px 36px -14px rgba(28, 25, 23, 0.35);
  --font:
    system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", "Hind",
    sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
 * `hidden` has to win over every display rule below - `.btn` is inline-flex -
 * or the copy button, which ships hidden until the script proves it can do
 * something, would be drawn anyway.
 */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  /* The footer sits at the bottom of a short page, not halfway up it. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

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

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0 0 0.5em;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  font-weight: 750;
}

h3 {
  font-size: 1.0625rem;
  font-weight: 700;
}

p {
  margin: 0 0 1em;
  max-width: var(--measure);
}

ul,
ol {
  padding-inline-start: 1.25rem;
}

svg {
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* -----------------------------------------------------------------------------
   Skip link: out of the way until it is focused, then the first thing on screen.
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 30;
  background: var(--ink);
  color: var(--surface);
  padding: 0.5rem 1rem;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
}

/* Read by assistive technology, drawn nowhere. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -----------------------------------------------------------------------------
   Page width
   -------------------------------------------------------------------------- */
.wrap,
main {
  margin: 0 auto;
  max-width: var(--page);
  padding: 0 1rem;
}

main {
  width: 100%;
  flex: 1 0 auto;
  padding-top: 1.25rem;
  padding-bottom: 3rem;
}

section {
  margin: 0 0 2.5rem;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

.section-head h2 {
  margin: 0;
}

.section-head .more {
  font-weight: 600;
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Header: brand, language, the app button; then the category strip.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}

.bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  margin-right: auto;
}

.brand img {
  width: 32px;
  height: 32px;
}

.lang-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  background: var(--tint);
  font-size: 0.875rem;
}

.lang-switch a {
  color: var(--ink);
  text-decoration: none;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  line-height: 1.4;
  font-weight: 600;
}

.lang-switch a[aria-current="true"] {
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.12);
}

/* On a phone the brand, the three languages and the app button share one row;
   at the full padding they overflow a 390px screen, so the row tightens, and
   below 390px the brand keeps its mark alone - the mark's alt still names it. */
@media (max-width: 479px) {
  .bar {
    gap: 0.5rem;
  }

  .lang-switch a {
    padding: 0.5rem;
  }
}

@media (max-width: 389px) {
  .brand-name {
    display: none;
  }
}

/* Aligned to the page grid like the bar above it: `.wrap` sets the width, the
   strip only adds the bottom gap. */
.site-nav {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  margin: 0 auto;
  padding-bottom: 0.6rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.site-nav::-webkit-scrollbar {
  display: none;
}

.site-nav a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  white-space: nowrap;
}

.site-nav a:hover {
  background: var(--tint);
}

.site-nav a[aria-current] {
  background: var(--ink);
  color: var(--surface);
}

/* -----------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--tint-strong);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    filter 120ms ease;
}

.btn svg {
  width: 18px;
  height: 18px;
}

.btn:hover {
  filter: brightness(0.9);
  box-shadow: var(--shadow);
  text-decoration: none;
}

.btn span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn:active {
  transform: translateY(1px);
}

.btn[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}

.btn-accent {
  background: var(--accent);
  color: var(--surface);
}

.btn-download {
  background: var(--indigo);
  color: var(--surface);
}

.btn-share {
  background: var(--whatsapp);
  color: var(--surface);
}

/* The way into the app. It is the accent fill wherever it appears, because on
   the web the poster is free and the name on it is the thing the app is for. */
.btn-personalize {
  background: var(--accent);
  color: var(--surface);
}

.btn-outline {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}

.btn-ghost {
  background: transparent;
  color: var(--link);
}

.btn-ghost[data-state="copied"] {
  color: var(--whatsapp);
}

.btn-lg {
  min-height: 3rem;
  padding: 0.65rem 1.25rem;
  font-size: 1.0625rem;
  border-radius: 12px;
}

.btn-sm {
  min-height: 2.75rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.8125rem;
  gap: 0.25rem;
}

.btn-sm svg {
  width: 15px;
  height: 15px;
}

/* -----------------------------------------------------------------------------
   Hero (landing and hubs)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 2rem;
  padding: clamp(1.5rem, 2vw + 1rem, 3rem) clamp(1.25rem, 3vw, 2.5rem);
  border-radius: 20px;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(232, 163, 23, 0.28), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(176, 42, 110, 0.16), transparent 60%),
    linear-gradient(135deg, #fff5ea 0%, #fbeff3 55%, #eef0fb 100%);
  border: 1px solid rgba(28, 25, 23, 0.06);
}

.hero-grid {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.hero h1 {
  margin-bottom: 0.5rem;
}

.hero-hindi {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  font-weight: 600;
  color: var(--slate);
}

.hero-intro {
  color: var(--muted);
  font-size: 1.0625rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0 0;
}

@media (max-width: 479px) {
  .hero-actions .btn {
    flex: 1 1 100%;
  }
}

/* The one poster the landing shows large, stamped and labelled. It is capped
   rather than fluid: it shares the hero row with the H1, and a poster free to
   grow with the column is what once pushed the heading off the page. */
.hero-poster {
  width: min(260px, 68vw);
  justify-self: center;
}

.hero-poster a {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  background: var(--tint);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.hero-poster a:hover {
  transform: translateY(-3px);
}

.hero-poster img {
  width: 100%;
  height: auto;
}

/* The app line under the hero copy: the one promise the download cannot keep. */
.hero-app {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
}

.hero-app svg {
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  color: var(--accent);
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 600;
}

@media (min-width: 840px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 260px);
    gap: 2.5rem;
  }
}

/* -----------------------------------------------------------------------------
   Value props and the three steps (landing)
   -------------------------------------------------------------------------- */
.values,
.steps {
  display: grid;
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.values li,
.steps li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow);
}

.values h3,
.steps h3 {
  font-size: 1.0625rem;
  margin: 0.4rem 0 0.35rem;
}

.values p,
.steps p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

.values .glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}

.values .glyph svg {
  width: 22px;
  height: 22px;
}

.steps {
  counter-reset: step;
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--indigo);
  color: var(--surface);
  font-weight: 800;
  font-size: 0.9375rem;
}

/* Four reasons and three steps, so they part company: the reasons pair up
   before they go four across, the steps go straight to their three. */
@media (min-width: 480px) {
  .values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 640px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 840px) {
  .values {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* -----------------------------------------------------------------------------
   Category tiles
   -------------------------------------------------------------------------- */
/* Two across on a phone; from 640px as many as fit at a browsing size, and
   a short list does not leave the row three-quarters empty. */
.tiles {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .tiles {
    grid-template-columns: repeat(auto-fit, minmax(180px, 280px));
    justify-content: start;
  }
}

.tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--tint-strong);
  color: var(--surface);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.tile-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem 0.85rem 0.7rem;
  background: linear-gradient(to top, rgba(20, 16, 14, 0.88), rgba(20, 16, 14, 0));
  font-weight: 750;
  font-size: 1.0625rem;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.tile-count {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  opacity: 0.85;
}

/* -----------------------------------------------------------------------------
   The poster grid and its cards
   -------------------------------------------------------------------------- */
/* Two across on a phone; wider cards from 640px, wide enough for their labels. */
.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

.card {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.card-media {
  position: relative;
  display: block;
  background: var(--tint);
}

/* Published in the last few days: the only place a card shows the pace. */
.chip-new {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1;
  background: var(--accent);
  border-radius: 999px;
  color: var(--surface);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.15rem 0.5rem;
  box-shadow: var(--shadow);
}

/* The poster at its own aspect: `width` and `height` on the image reserve the
   space, and nothing is cropped - the stamp band is the point of the picture. */
.card-media img {
  width: 100%;
  height: auto;
}

.card-body {
  padding: 0.6rem 0.75rem 0.25rem;
  flex: 1;
}

.card-title {
  margin: 0;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.card-title a {
  color: var(--ink);
  text-decoration: none;
}

.card-title a:hover {
  text-decoration: underline;
}

.card-line {
  margin: 0.2rem 0 0;
  min-height: 2.275rem;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Two rows: what you can do with the poster as it is, then what the app does
   to it. The second is full width because it is the one thing the page is
   asking for, and it keeps its words at every card size. */
.card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.55rem 0.6rem 0.65rem;
}

.card-actions-row {
  display: flex;
  gap: 0.4rem;
}

.card-actions .btn {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.card-actions .btn-personalize {
  white-space: normal;
  text-align: center;
}

/* A narrow card keeps the icons and drops the words on the first row; the
   `title` still says what each one does. */
@container (max-width: 219px) {
  .card-actions-row .btn span {
    display: none;
  }
  .card-actions-row .btn {
    padding-inline: 0.25rem;
  }
  .card-actions .btn-personalize {
    line-height: 1.15;
    padding-inline: 0.35rem;
  }
}

.chip {
  display: inline-block;
  background: var(--tint);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--slate);
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 0 0.35rem 0.35rem 0;
  padding: 0.2rem 0.7rem;
  text-decoration: none;
}

a.chip:hover {
  border-color: var(--slate);
  text-decoration: none;
}

.chip-festival {
  background: #fff3d6;
  border-color: var(--highlight);
  color: var(--ink);
}

.chips {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
   Page heads, intros, breadcrumb, pagination
   -------------------------------------------------------------------------- */
.page-head {
  margin: 0 0 1.25rem;
}

.page-head h1 {
  margin-bottom: 0.35rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.breadcrumb li + li::before {
  content: "/";
  margin-inline-end: 0.5rem;
  color: var(--border);
}

.intro {
  color: var(--slate);
  font-size: 1.0625rem;
}

.meta {
  color: var(--muted);
  font-size: 0.875rem;
}

.note {
  color: var(--muted);
  font-size: 0.875rem;
}

.empty {
  margin: 0 0 2rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--slate);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 0 0 2rem;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
}

.pagination [aria-current="page"] {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}

.pagination .meta {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}

.about {
  max-width: var(--measure);
}

.about p {
  color: var(--slate);
}

/* -----------------------------------------------------------------------------
   Wish page
   -------------------------------------------------------------------------- */
.wish {
  display: grid;
  gap: 1.5rem;
  margin: 0 0 2.5rem;
}

.wish-media,
.wish-body {
  min-width: 0;
}

.poster {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--tint);
  box-shadow: var(--shadow);
}

/* -----------------------------------------------------------------------------
   The stamped sample and its two labels.

   Every portrait preview is stamped with the sample business in its default b1
   arrangement and scrim style of the profile-bottom-v1 layout: the identity
   envelope is the full-width band at y 1440-1760 of the 1080x1920 canvas
   (the scrim fades in above it; no style moves a slot), the logo slot sits
   at its right edge (x 792-1024, y 1508-1692) and the name is right-aligned to
   the logo's left (ending at x 768, its line starting at y 1548), with the
   tagline under it. The percentages below are those points on the canvas
   (`appearanceLayout`, pinned by `components.test.js`); each pill sits one
   leader away from its point, so the leader's tip lands on it. "Your name"
   points down at the top of the name, "your photo" up at the bottom of the logo
   slot, so the two pills never meet. Only ever on a poster shown large.
   -------------------------------------------------------------------------- */
.stamp-demo {
  position: relative;
}

.callout {
  --leader: 0.7rem;
  position: absolute;
  z-index: 2;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}

.callout::after {
  content: "";
  position: absolute;
  right: 1rem;
  width: 1px;
  height: var(--leader);
  background: var(--ink);
  opacity: 0.5;
}

/* The top of the name line (y 1469) and the name's right end (x 717). */
.callout-name {
  bottom: calc(23.49% + var(--leader));
  right: 33.61%;
}

.callout-name::after {
  top: 100%;
}

/* The bottom of the logo slot (y 1679) and its right edge (x 1024). */
.callout-photo {
  top: calc(87.45% + var(--leader));
  right: 5.19%;
}

.callout-photo::after {
  bottom: 100%;
}

.poster img {
  width: 100%;
}

.wish-body h1 {
  margin-bottom: 0.6rem;
}

.copy p {
  margin: 0 0 0.35rem;
  font-size: 1.125rem;
  line-height: 1.5;
}

.copy .signoff {
  font-weight: 600;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0 0.5rem;
}

/* What the download gives you, and what the app gives you instead. It sits
   directly under the actions, so the offer is read where the choice is made. */
.in-app {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.5rem 0.7rem;
  margin: 0 0 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--accent-soft);
}

.in-app p {
  margin: 0;
  color: var(--slate);
  font-size: 0.9375rem;
}

.in-app-glyph {
  display: inline-flex;
  color: var(--accent);
}

.in-app-glyph svg {
  width: 20px;
  height: 20px;
}

.in-app .btn {
  grid-column: 2;
  justify-self: start;
}

/* The action bar above already carries this button at full weight. Here it is
   the tail of a sentence, so it is outlined rather than filled: two identical
   orange buttons a few pixels apart read as a mistake, not as an offer. */
.in-app .btn-personalize {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
}

.more-in-app {
  background: var(--indigo-soft);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.9rem;
  color: var(--indigo);
  font-size: 0.9375rem;
}

.thumbs {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.thumbs figure {
  margin: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--tint);
  box-shadow: var(--shadow);
}

/* Each design links to its own page: the whole thumbnail is the link, so it
   takes the figure's box rather than an inline box around a block image. */
.thumbs a {
  display: block;
}

.thumbs img {
  width: 100%;
  height: auto;
}

@media (min-width: 760px) {
  .wish {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    align-items: start;
  }
  .wish-media {
    max-width: 420px;
  }
  .wish-media {
    position: sticky;
    top: 5.5rem;
    align-self: start;
  }
}

/* -----------------------------------------------------------------------------
   The store CTA
   -------------------------------------------------------------------------- */
.cta {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  background: var(--ink);
  color: var(--footer-ink);
  border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin: 0 0 2.5rem;
  scroll-margin-top: 6rem;
  background-image:
    radial-gradient(50% 70% at 100% 0%, rgba(217, 79, 12, 0.35), transparent 60%),
    radial-gradient(40% 60% at 0% 100%, rgba(59, 59, 143, 0.5), transparent 60%);
}

.cta-copy {
  min-width: 0;
}

.cta h2 {
  color: var(--surface);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
}

.cta p {
  color: var(--footer-muted);
}

/* Middle-aligned rather than on the baseline: a button that leads with a store
   mark has no text in its first box, so its baseline is not its label's. */
.cta .btn-accent {
  margin: 0.25rem 0.5rem 0.25rem 0;
  vertical-align: middle;
}

/* A store button leads with that store's own mark. The full-colour Google Play
   triangle turns muddy on the accent fill, so it sits in a small white chip,
   sized to the label's line so the two read as one row. */
.btn-store {
  gap: 0.6rem;
  padding-block: 0.5rem;
  padding-left: 0.6rem;
}

.btn-store .store-mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.75em;
  height: 1.75em;
  border-radius: 8px;
  background: var(--surface);
}

.btn-store .store-mark svg {
  width: 1.15em;
  height: 1.15em;
}

/* The line a store without a listing gets instead of its button. */
.cta .cta-soon {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
}

.cta-figure {
  justify-self: center;
  min-width: 0;
}

.cta-art {
  width: min(220px, 60vw);
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.6);
  transform: rotate(-3deg);
}

/* The picture is rounded rather than the box, so the two labels beside it are
   free to sit where they point instead of being clipped by the frame. */
.cta-art img {
  border-radius: 14px;
}

/* The poster carries a placeholder name, so the block says so rather than
   letting a reader take the sample for a promise about that particular name. */
.cta-art-note {
  margin: 1.1rem auto 0;
  max-width: 16rem;
  color: var(--footer-muted);
  font-size: 0.8125rem;
  text-align: center;
}

@media (min-width: 720px) {
  .cta {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1.2fr);
  }
}

/* -----------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin: 0 0 0.5rem;
  padding: 0 1rem;
}

.faq summary {
  cursor: pointer;
  font-weight: 650;
  padding: 0.8rem 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  color: var(--muted);
  font-weight: 700;
}

.faq details[open] summary::after {
  content: "\2013";
}

.faq details p {
  margin: 0 0 0.9rem;
  color: var(--slate);
}

/* -----------------------------------------------------------------------------
   Live festivals
   -------------------------------------------------------------------------- */
.festival-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.festival-list a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.festival-list a:hover {
  border-color: var(--slate);
}

/* -----------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--footer);
  color: var(--footer-ink);
  margin-top: 2rem;
  padding: 2.5rem 0 2rem;
}

.site-footer a {
  color: var(--footer-ink);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.foot-grid {
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.foot-brand {
  font-weight: 800;
  font-size: 1.25rem;
  margin: 0 0 0.25rem;
}

.site-footer .tagline {
  color: var(--footer-muted);
  font-size: 0.9375rem;
}

.site-footer h2 {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--footer-muted);
  margin: 0 0 0.6rem;
}

/* Small capitals are a Latin habit; Devanagari has no case to change. */
.site-footer h2:lang(en) {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  margin: 0 0 0.25rem;
}

.site-footer li a {
  display: inline-block;
  padding-block: 0.2rem;
}

.foot-base {
  margin: 1.75rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(247, 244, 239, 0.14);
  color: var(--footer-muted);
  font-size: 0.8125rem;
}

.foot-base p {
  margin: 0 0 0.35rem;
}

/* The publisher's name reads as a statement, not as a small print line: it is
   the one thing in this block a reader is meant to notice. */
.foot-publisher {
  color: var(--footer-ink);
}

.foot-publisher a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* The CIN and the registered office are a legal identity, and the address is a
   long single line - it wraps rather than pushing the footer wide. */
.foot-registration {
  max-width: 62ch;
  line-height: 1.6;
}

.foot-copy {
  margin-top: 0.75rem;
}