/* =========================================================
   Adlly — site styles (redesign, October 2026)
   Built from the "Adlly_website" Figma file (1920px design).
   Sizes use clamp() so the 1920px design scales down smoothly.

   Used by the redesigned pages only: index, privacy, terms, refund,
   contact, deleteaccount and 404. The blog and article pages still
   run on the previous design (assets/css/style.css) — do not merge
   the two files.

   The first part of this file is the designer's stylesheet, with a
   few marked changes ("SITE BUILD:" comments) for accessibility and
   for running without JavaScript. Everything after "INNER PAGES"
   was added for the pages the design did not cover.
   ========================================================= */

/* Inter (variable, 100–900), bundled locally — SIL Open Font License, see assets/site/fonts */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #220845;            /* page background (Figma frame fill) */
  --purple: #9137e8;        /* buttons, pills, accents */
  --purple-hover: #a04df0;
  --purple-light: #c69bff;
  --story-purple: #763cc4;  /* purple used inside the "reserved" artwork */
  --grey-1: #efefef;        /* "Own Every Advertising Space" */
  --grey-2: #f6f6f6;        /* "How Adlly Works", "Hear what people say" */
  --grey-3: #f5f5f5;        /* download card, deletion modal */
  --white-70: rgba(255, 255, 255, .7);
  --white-65: rgba(255, 255, 255, .65);
  --white-50: rgba(255, 255, 255, .5);
  --white-20: rgba(255, 255, 255, .2);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --gutter: clamp(16px, 5vw, 200px);
  --container: 1520px;

  /* type scale (value at 1920px design = max) */
  --fs-display: clamp(34px, 4.1667vw, 80px);
  --fs-lead: clamp(16px, 1.25vw, 24px);
  --fs-30: clamp(19px, 1.5625vw, 30px);
  --fs-20: clamp(15px, 1.0417vw, 20px);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: #fff;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
/* SITE BUILD: `hidden` must win over any display rule below (the contact
   page's FAQ section and the deletion modal ship hidden). */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--purple-light); outline-offset: 3px; border-radius: 6px; }
/* SITE BUILD: the light ring is only ~2:1 against the light sections and
   cards; a focus indicator needs 3:1, and --purple gives ~4.7:1 there. */
.own :focus-visible, .how-head :focus-visible, .stories :focus-visible,
.download-card :focus-visible,
.del-modal__panel :focus-visible { outline-color: var(--purple); }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 8px; background: #fff; color: var(--bg);
  font-weight: 600; text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 16px; }

/* shared headings (80px / -2px tracking in the design) */
.section-title {
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-align: center;
}
.section-lead {
  font-size: var(--fs-lead);
  line-height: 1.3;
  text-align: center;
}

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 23px;
  border-radius: 64px;
  font-size: 16px; line-height: 1; white-space: nowrap;
  text-decoration: none;
  transition: background-color .25s, transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.btn-primary {
  background: var(--purple); color: #fff;
  border: 0; /* SITE BUILD: also used on <button> (deletion form) */
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .25);
}
button.btn { cursor: pointer; }
.btn-primary:hover {
  background: var(--purple-hover);
  transform: translateY(-2px);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .25), 0 12px 28px -10px rgba(145, 55, 232, .85);
}
.btn-outline {
  height: 50px; padding: 0 15px;
  border: 1px solid var(--white-20); color: #fff;
}
.btn-outline:hover { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .06); transform: translateY(-2px); }

.text-link { font-size: 16px; text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { text-decoration-color: var(--purple-light); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header { position: relative; z-index: 20; border-bottom: 1px solid var(--white-20); }
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 111px;
  padding-block: 8px;
}
.brand { justify-self: start; display: block; border-radius: 50%; }
.brand img { width: clamp(60px, 4.95vw, 95px); height: auto; }
.header-menu { display: contents; }
.main-nav { display: flex; gap: clamp(14px, 1.05vw, 20px); font-size: 16px; line-height: 20.8px; }
.main-nav a { position: relative; text-decoration: none; padding-block: 4px; }
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.main-nav a:hover::after { transform: scaleX(1); }
.header-cta { justify-self: end; display: flex; align-items: center; gap: 11px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px; padding: 0; margin-right: -8px;
  border: 0; background: none; cursor: pointer;
  position: relative;
}
.nav-toggle span {
  position: absolute; left: 11px; width: 22px; height: 2px; border-radius: 2px; background: #fff;
  transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.menu-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1240px) {
  .main-nav { font-size: 15px; }
  .header-cta .text-link { font-size: 15px; }
}

@media (max-width: 1080px) {
  .header-inner { display: flex; justify-content: space-between; min-height: 76px; }
  .nav-toggle { display: block; }
  .header-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    display: flex; flex-direction: column; gap: 24px;
    padding: 20px var(--gutter) 28px;
    background: var(--bg);
    border-bottom: 1px solid var(--white-20);
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s, transform .25s var(--ease), visibility 0s .25s;
  }
  .menu-open .header-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s var(--ease); }
  .main-nav { flex-direction: column; gap: 0; font-size: 18px; }
  .main-nav a { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .main-nav a::after { display: none; }
  .header-cta { justify-self: auto; flex-direction: column; align-items: stretch; gap: 14px; }
  .header-cta .text-link { font-size: 16px; text-align: center; padding: 6px 0; }
  .header-cta .btn { height: 50px; }

  /* SITE BUILD: without JavaScript the toggle cannot open the menu, so the
     menu is shown as a plain stacked list under the logo instead. The `js`
     class is set before first paint by assets/site/js/head.js. */
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .header-inner { flex-wrap: wrap; }
  html:not(.js) .header-menu {
    position: static; flex-basis: 100%;
    padding: 4px 0 24px; border-bottom: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none;
  }
}

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; padding-top: clamp(36px, 3.4vw, 65px); text-align: center; overflow-x: clip; }
.hero-copy { position: relative; z-index: 2; }
.hero-eyebrow { font-size: var(--fs-lead); line-height: 1.3; color: var(--white-70); }
.hero-title { font-size: var(--fs-display); font-weight: 400; line-height: 1.2; letter-spacing: -.025em; }
.hero-lead {
  max-width: 1438px; margin: 6px auto 0;
  font-size: var(--fs-lead); line-height: 1.3; color: var(--white-70);
}
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: clamp(24px, 1.72vw, 33px); }
.hero-points {
  display: flex; justify-content: center; flex-wrap: wrap; column-gap: 9px; row-gap: 2px;
  margin-top: 6px; font-size: clamp(13px, .8333vw, 16px); line-height: 20px;
}
.hero-points .sep { opacity: .9; }
@media (max-width: 600px) {
  /* "Reviewed campaigns | Verified posts" on one line, the wallet line below it */
  .hero-points .sep:nth-child(4) { display: none; }
  .hero-points span:last-child { flex-basis: 100%; }
}
/* The artwork's transparent top sits under the buttons, as in the design. */
.hero-art {
  --art-w: min(1257px, 96vw);
  position: relative; z-index: 1; pointer-events: none;
  width: var(--art-w);
  margin: calc(var(--art-w) * -.1058) auto 0;
  translate: -1.23% 0;
}
.hero-art img { width: 100%; }

/* =========================================================
   OWN EVERY ADVERTISING SPACE
   ========================================================= */
.own { background: var(--grey-1); color: #000; padding-block: clamp(56px, 5.83vw, 112px); }
.own-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  column-gap: clamp(32px, 6.25vw, 120px);
  padding-left: clamp(0px, .833vw, 16px);
}
.own-title { font-size: var(--fs-display); font-weight: 400; line-height: 1.375; letter-spacing: -.0625em; }
.own-title span { display: block; }
/* typewriter: letters stay in the layout while hidden, so nothing below moves */
.own-title .tw-char { display: inline; position: relative; }
.tw-char.is-hidden { visibility: hidden; }
.tw-char.is-caret::after {
  content: ""; position: absolute; left: calc(100% + .03em); top: .16em; bottom: .1em;
  width: max(2px, .05em); background: var(--purple); visibility: visible;
}
.tw-char.is-caret-start::after { left: 0; }
.tw-hold .tw-char.is-caret::after { animation: caret-blink 1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.own-billboard { width: min(626px, 100%); margin-top: clamp(12px, 1.1vw, 21px); }
.own-text { font-size: clamp(22px, 2.0833vw, 40px); line-height: 1.425; }
.own-text span { display: block; }
.own-pills { list-style: none; display: grid; gap: 18px; margin-top: 18px; }
.pill {
  display: flex; align-items: center; gap: 14px;
  width: min(576px, 100%); min-height: clamp(64px, 4.27vw, 82px);
  padding: 10px clamp(18px, 1.72vw, 33px) 10px clamp(16px, 1.25vw, 24px);
  border-radius: 999px;
  background: var(--purple); color: #fff;
  font-size: clamp(15px, 1.25vw, 24px); font-weight: 500; line-height: 1.117;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.pill:hover { transform: translateX(6px); box-shadow: 0 14px 30px -14px rgba(145, 55, 232, .9); }
.pill-icon { flex: 0 0 auto; display: grid; place-items: center; width: clamp(32px, 2.29vw, 44px); height: clamp(32px, 2.29vw, 44px); }
.pill-icon img { width: 100%; height: auto; }
.pill-icon .icon-rupee { width: auto; height: 88%; }

@media (min-width: 1101px) {
  .own-text span { white-space: nowrap; }
}
@media (max-width: 1100px) and (min-width: 821px) {
  .own-text span { display: inline; }
}
@media (max-width: 820px) {
  .own-grid { grid-template-columns: 1fr; row-gap: 40px; padding-left: 0; }
  .own-text span { display: inline; }
}

/* =========================================================
   HOW ADLLY WORKS — pinned, scroll-driven steps
   ========================================================= */
.how {
  --dot: clamp(30px, 2.0833vw, 40px);
  --step-gap: clamp(28px, 3.02vw, 58px);
  background: var(--grey-2); color: #000;
  padding-top: clamp(48px, 5.44vw, 104px);
  padding-bottom: clamp(24px, 3.8vw, 73px);
}
.how-head .section-lead { max-width: 1200px; margin-inline: auto; }
.how-pin { position: relative; margin: clamp(32px, 3.2vw, 61px) clamp(12px, 3.385vw, 65px) 0; }
.how-panel {
  background: var(--bg); color: #fff;
  border-radius: 21px;
  padding: clamp(32px, 3.9vw, 75px) clamp(20px, 7.03vw, 135px) clamp(40px, 6.25vw, 120px);
}
.how-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 8.02vw, 154px); }
/* both columns stretch to the same height so their frames line up */
.how-col-pin { display: flex; flex-direction: column; }
.how-col { flex: 1 1 auto; display: flex; flex-direction: column; }
.how-col-title { font-size: clamp(28px, 2.6042vw, 50px); font-weight: 400; line-height: 1.26; letter-spacing: -.04em; }

.steps {
  position: relative;
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: flex-start;
  margin-top: clamp(22px, 2.4vw, 46px);
  padding: clamp(24px, 2.135vw, 41px) clamp(14px, 2vw, 40px) 0 0;
  border-top: 1px solid var(--white-50);
  border-right: 1px solid var(--white-50);
  border-top-right-radius: clamp(28px, 2.5vw, 48px);
}
.steps-list { list-style: none; position: relative; z-index: 1; align-self: stretch; margin-bottom: clamp(36px, 5.05vw, 97px); }
.step { display: grid; grid-template-columns: var(--dot) minmax(0, 1fr); column-gap: 14px; }
.step + .step { margin-top: var(--step-gap); }

.step-dot {
  position: relative;
  display: grid; place-items: center;
  width: var(--dot); height: var(--dot);
  border: 1px solid #fff; border-radius: 50%;
  background: var(--bg);
  transition: opacity .4s, background-color .4s, border-color .4s, box-shadow .4s;
}
.js .step-dot { opacity: .3; }
.step-dot-core {
  width: 60%; height: 60%; border-radius: 50%; background: #fff;
  transform: scale(0); transition: transform .4s var(--ease);
}
/* tick for completed steps */
.step-dot::after {
  content: ""; position: absolute; left: 50%; top: 47%;
  width: 26%; height: 46%;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transition: transform .35s var(--ease);
}
.step-body { min-width: 0; }
.step-title {
  display: flex; align-items: center; min-height: var(--dot);
  font-size: var(--fs-30); font-weight: 500; line-height: 1.2; letter-spacing: -.0667em;
  transition: opacity .4s, color .4s;
}
.js .step-title { opacity: .3; }
.step-desc p {
  padding: clamp(8px, .94vw, 18px) 0 8px;
  font-size: var(--fs-20); font-weight: 500; line-height: 1.3; letter-spacing: -.02em;
}

.steps-track {
  position: absolute; z-index: 0;
  left: calc(var(--dot) / 2); top: 0; width: 1px; height: 0;
  translate: -50% 0;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .3) 0 2px, transparent 2px 4px);
}
.steps-fill {
  position: absolute; left: 50%; top: 0; width: 2px; height: 0;
  translate: -50% 0;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--purple), var(--purple-light));
  box-shadow: 0 0 10px rgba(145, 55, 232, .9);
}

.step-cta {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: auto;
  font-size: clamp(16px, 1.146vw, 22px); font-weight: 500; line-height: 26px;
  text-decoration: underline; text-underline-offset: 4px;
}
.step-cta img { width: 24px; transition: transform .25s var(--ease); }
.step-cta:hover img { transform: translateX(5px); }

/* Without JavaScript every step is simply shown. With JS, steps light up as you scroll. */
.js .step-desc { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s var(--ease), opacity .3s; }
.js .step-desc > div { min-height: 0; overflow: hidden; }
.js .step.is-active .step-desc { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .45s var(--ease), opacity .4s .1s; }
.js .step.is-active .step-dot { opacity: 1; box-shadow: 0 0 0 6px rgba(145, 55, 232, .28), 0 0 22px rgba(145, 55, 232, .55); }
.js .step.is-active .step-dot-core { transform: scale(1); }
.js .step.is-active .step-title { opacity: 1; }
.js .step.is-done .step-dot { opacity: 1; background: var(--purple); border-color: var(--purple); }
.js .step.is-done .step-dot::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
.js .step.is-done .step-title { opacity: .75; color: var(--purple-light); }

/* Desktop & tablet: the whole panel pins while both columns progress together. */
@media (min-width: 900px) {
  .js .how-panel { position: sticky; top: var(--pin-top, 24px); }
  .how-col-spacer { display: none; }
}
/* Phones: columns stack, each one pins on its own. */
@media (max-width: 899.98px) {
  .how-cols { grid-template-columns: 1fr; }
  .how-col-pin + .how-col-pin { margin-top: 48px; }
  .how-col { flex: none; }
  .js .how-col { position: sticky; top: var(--pin-top, 16px); }
  .how-pin-spacer { display: none; }
}

/* =========================================================
   BUILT ON PROOF
   ========================================================= */
.proof { padding-top: clamp(64px, 6.95vw, 133px); padding-bottom: clamp(56px, 6.3vw, 121px); }
.proof .section-lead { margin-top: clamp(4px, .73vw, 14px); }
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;   /* cards in a row share one height */
  gap: 21px 28px;
  margin-top: clamp(32px, 2.9vw, 55px);
}
.proof-card {
  --pad: clamp(20px, 2.0833vw, 40px);
  display: flex; flex-direction: column;
  aspect-ratio: 488 / 486;
  padding: var(--pad) 0 0 var(--pad);
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  transition: background-color .3s, transform .4s var(--ease);
}
.proof-card:hover { background: rgba(255, 255, 255, .11); transform: translateY(-4px); }
.proof-text { padding: 0 12px 12px 0; }
.proof-card h3 { font-size: var(--fs-30); font-weight: 400; line-height: 1.05; letter-spacing: -.01em; }
.proof-card p { max-width: 410px; margin-top: 12px; font-size: clamp(14px, .8333vw, 16px); line-height: 1.3; color: var(--white-65); }
/* image is exported already cropped to the card's bottom-right corner; .proof-media is its frame */
.proof-media { margin-top: auto; overflow: hidden; border-bottom-right-radius: 12px; }
.proof-img { display: block; width: 100%; }
/* hover zoom (owner, 15 Oct 2026): the frame keeps its size and the picture zooms inside it;
   mouse only, and off for visitors who reduce motion */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .proof-img { transition: transform .6s var(--ease); }
  .proof-card:hover .proof-img { transform: scale(1.08); }
}

@media (max-width: 1140px) { .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .proof-grid { grid-template-columns: 1fr; gap: 16px; }
  .proof-card { aspect-ratio: auto; }
}

.divider { height: 1px; margin: 0; border: 0; background: var(--white-50); }

/* =========================================================
   DESI AT HEART
   ========================================================= */
.desi { padding-top: clamp(48px, 5.47vw, 105px); padding-bottom: clamp(48px, 6.25vw, 120px); }
.desi-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 675px);
  align-items: center;
  gap: clamp(24px, 3vw, 64px);
  padding-left: clamp(0px, .57vw, 11px);
}
.desi-title { font-size: var(--fs-display); font-weight: 400; line-height: 1.1375; letter-spacing: -.025em; }
.desi-copy p { max-width: 642px; margin-top: clamp(16px, 1.46vw, 28px); font-size: var(--fs-lead); line-height: 1.3; color: var(--white-70); }
.desi-copy .btn { margin-top: clamp(24px, 2.19vw, 42px); }
.desi-map { width: 100%; }

@media (max-width: 820px) {
  .desi-grid { grid-template-columns: 1fr; row-gap: 32px; padding-left: 0; }
  .desi-map { max-width: 560px; margin-inline: auto; }
}

/* =========================================================
   DOWNLOAD THE APP — two columns scrolling in opposite directions
   ========================================================= */
.download { padding: 0 clamp(12px, 4.79vw, 92px) clamp(48px, 6.25vw, 120px); }
.download-card {
  --pill-w: clamp(104px, 8.3333vw, 160px);
  --pill-h: calc(var(--pill-w) * 1.4);
  --pill-gap: calc(var(--pill-w) * .10625);   /* 17px at 160px */
  --marquee-time: 28s;
  position: relative;
  display: grid;
  grid-template-columns: 37.33% minmax(0, 1fr);
  max-width: 1736px; min-height: clamp(440px, 36.15vw, 694px);
  margin-inline: auto;
  border-radius: 20px;
  background: var(--grey-3); color: #000;
  overflow: hidden;
}
.download-media {
  position: relative;
  display: flex; gap: calc(var(--pill-w) * .175);  /* 28px between the columns */
  padding-left: 20.06%;
}
.marquee { position: relative; flex: 0 0 auto; width: var(--pill-w); }
/* absolutely positioned so the (very tall) track never stretches the card */
.marquee-track { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; will-change: transform; }
.marquee-set { display: flex; flex-direction: column; gap: var(--pill-gap); padding-bottom: var(--pill-gap); }
.pill-photo {
  width: var(--pill-w); height: var(--pill-h);
  object-fit: cover;
  border-radius: 999px;
  box-shadow: 0 35px 64px rgba(0, 0, 0, .08);
}
/* JS makes 3 copies of each set; moving by one set (1/3) loops seamlessly. */
.js .marquee-track { animation: marquee-y var(--marquee-time) linear infinite; }
.js .marquee--up .marquee-track { animation-delay: calc(var(--marquee-time) * -.19); }
.js .marquee--down .marquee-track { animation-direction: reverse; animation-delay: calc(var(--marquee-time) * -.92); }
@keyframes marquee-y { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -33.3333%, 0); } }
@keyframes marquee-x { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-33.3333%, 0, 0); } }
@media (hover: hover) { .download-media:hover .marquee-track { animation-play-state: paused; } }

.download-copy { align-self: center; padding: 48px 48px 48px 0; }
.download-title { font-size: clamp(46px, 6.25vw, 120px); font-weight: 400; line-height: 1.0667; letter-spacing: -.0417em; }
.download-copy p { margin-top: clamp(16px, 1.77vw, 34px); font-size: var(--fs-20); line-height: 1.3; }
.store-badges { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 20px; }
.store-badges a { display: block; border-radius: 10px; transition: transform .25s var(--ease), box-shadow .25s; }
.store-badges a:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .5); }
.store-badges img { width: clamp(150px, 10.52vw, 202px); }

@media (max-width: 899.98px) {
  .download-card {
    --pill-w: clamp(96px, 26vw, 140px);
    --marquee-time: 22s;
    display: flex; flex-direction: column;
    min-height: 0;
  }
  .download-copy { order: -1; padding: 36px 24px 28px; }
  .store-badges { flex-wrap: nowrap; gap: 12px; }
  .store-badges a { flex: 1 1 0; max-width: 202px; }
  .store-badges img { width: 100%; }
  .download-media { flex-direction: column; gap: 14px; padding: 0 0 36px; }
  .marquee { width: 100%; height: var(--pill-h); }
  .marquee-track { flex-direction: row; width: max-content; height: 100%; }
  .marquee-set { flex-direction: row; padding-bottom: 0; padding-right: var(--pill-gap); }
  .js .marquee-track { animation-name: marquee-x; }
}

/* =========================================================
   HEAR WHAT PEOPLE SAY (reserved)
   ========================================================= */
.stories { background: var(--grey-2); color: #000; padding-top: clamp(40px, 4.01vw, 77px); overflow-x: clip; }
.stories-title { position: relative; z-index: 2; line-height: 1.5125; }
.stories-art {
  --art-w: min(95vw, 1824px);
  position: relative; z-index: 1;
  width: var(--art-w);
  margin: calc(var(--art-w) * -.0504) auto 0;
}
.stories-img { width: 100%; }
/* the design places a smaller copy of the headline on top of the artwork */
.stories-img-heading {
  position: absolute; left: 12.226%; top: calc(9.877% - 2px); width: 75.548%; height: calc(14.321% + 4px);
  object-fit: cover;
}
.stories-mobile { display: none; }

@media (max-width: 899.98px) {
  .stories { padding-bottom: 56px; }
  .stories-title { line-height: 1.2; padding-inline: 16px; }
  .stories-art { display: none; }
  .stories-mobile { display: block; padding: 0 20px; text-align: center; }
  .stories-m-title { margin-top: 28px; font-size: clamp(26px, 6.4vw, 40px); font-weight: 800; line-height: 1.15; letter-spacing: -.035em; color: #050505; }
  .stories-m-title span { display: block; color: var(--story-purple); }
  .stories-mobile > p { max-width: 560px; margin: 16px auto 0; font-size: 15px; line-height: 1.6; color: #2a2a2a; }
  .stories-m-art { aspect-ratio: 3.26; margin: 16px -20px 0; overflow: hidden; }
  .stories-m-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 66.7%; }
  .stories-m-tagline { margin-top: 16px; font-size: clamp(18px, 4.6vw, 24px); font-weight: 800; line-height: 1.3; letter-spacing: -.02em; color: #050505; }
  .stories-m-tagline span { color: var(--story-purple); }
}

/* =========================================================
   FAQ
   ========================================================= */
/* SITE BUILD: bottom space too, now that the footer is a full-width band
   (the old footer card brought this space above itself). */
.faq { padding-block: clamp(52px, 5.4vw, 104px) clamp(56px, 5.3vw, 102px); }
.faq .section-lead { margin-top: clamp(4px, .73vw, 14px); }
.faq-list { max-width: 1006px; margin: clamp(28px, 2.42vw, 46px) auto 0; }
.faq-item {
  border-top: 1px solid var(--white-50);
  border-right: 1px solid var(--white-50);
  border-top-right-radius: 30px;
}
.faq-item + .faq-item { margin-top: clamp(16px, 1.5625vw, 30px); }
.faq-h { font: inherit; }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%;
  padding: clamp(22px, 1.6vw, 31px) clamp(14px, 1.2vw, 23px) clamp(22px, 1.6vw, 31px) 0;
  border: 0; background: none; cursor: pointer; text-align: left;
  font-size: var(--fs-30); font-weight: 500; line-height: 35px;
}
.faq-q span { line-height: 1.2; }
.faq-icon { flex: 0 0 auto; width: clamp(28px, 1.77vw, 34px); height: auto; transition: transform .4s var(--ease); }
.faq-q:hover .faq-icon { transform: scale(1.08); }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
/* SITE BUILD: answers collapse only when JavaScript is there to open them
   again; without it every answer is simply shown (and the + icon hidden). */
.faq-a { display: grid; grid-template-rows: 1fr; }
.faq-a > div { min-height: 0; overflow: hidden; }
.js .faq-a { grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.js .faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a p {
  padding: 0 clamp(20px, 4.2vw, 80px) 23px 0;
  font-size: var(--fs-20); line-height: 1.56; color: var(--white-70);
}
.js .faq-a p { opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .4s var(--ease); }
.js .faq-item.is-open .faq-a p { opacity: 1; transform: none; transition-delay: .1s; }
html:not(.js) .faq-icon { display: none; }

/* =========================================================
   FOOTER
   SITE BUILD (footer redesign, 15 Oct 2026): a white rounded card on
   the page (owner's choice, like the earlier footer card), with the
   content on the site's container grid inside it. Brand block (logo, tagline, description, app badges)
   and four link columns, then a hairline and the bottom bar
   (copyright left, "Follow us on" right).
   Links are black and the other small text is grey; headings are
   small, uppercase, muted labels. Hover and keyboard focus add an
   underline and turn the link purple (owner, 15 Oct 2026).
   The palette is the --footer-* properties below, the one place to
   switch it. The logo is images/app-icon.webp, drawn for a light
   background (a dark palette would want logo.webp instead).
   ========================================================= */
.site-footer {
  --footer-bg: #fff;                         /* a white card on the page (owner, 15 Oct), like the earlier footer card */
  --footer-ink: #120624;                     /* tagline */
  --footer-text: #4a4458;                    /* description, ~9.3:1 on white */
  --footer-muted: #6b6578;                   /* headings, captions, copyright, ~5.6:1 */
  --footer-link: #000;                       /* every link: black (owner, 15 Oct), purple on hover */
  --footer-link-hover: var(--purple);        /* #9137e8, ~5.4:1 on white */
  --footer-rule: rgba(18, 6, 36, .12);       /* hairlines */
  --footer-chip: #fff;                       /* social icon buttons */
  --footer-chip-line: rgba(18, 6, 36, .16);
  --footer-chip-hover: var(--purple);
  --footer-focus: var(--purple);
  --footer-inset: clamp(12px, 2.4vw, 46px);  /* the page showing around the card */
  width: min(1736px, 100% - 2 * var(--footer-inset));
  margin: 0 auto var(--footer-inset);
  padding-top: clamp(40px, 4.2vw, 80px);
  border: 1px solid rgba(18, 6, 36, .06);    /* only visible where the page itself is light (?theme=light) */
  border-radius: 20px;
  background: var(--footer-bg);
  color: var(--footer-ink);
}
.site-footer :focus-visible { outline-color: var(--footer-focus); }

.footer-top { display: grid; gap: 40px; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; }
/* app-icon.webp has empty space around the dots: pull it so the dots line up with the text */
.footer-logo { --logo: 100px; width: var(--logo); margin: calc(var(--logo) * -.12) 0 calc(var(--logo) * -.08) calc(var(--logo) * -.18); }
.footer-tagline {
  margin-top: 16px;
  font-size: clamp(19px, 1.39vw, 24px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em;
  text-wrap: balance;
}
.footer-about { max-width: 25em; margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--footer-text); text-wrap: balance; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.footer-badges a { display: block; border-radius: 8px; transition: transform .25s var(--ease); }
.footer-badges a:hover { transform: translateY(-2px); }
.footer-badges img { width: 132px; }

.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
/* SITE BUILD: footer headings are h2 (were h3) so no page skips a heading level. */
.footer-col h2 {
  font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase;
  color: var(--footer-muted);
}
.footer-col ul { list-style: none; display: grid; gap: 12px; margin-top: 16px; }
.footer-col li { font-size: 15px; line-height: 1.5; }
.footer-col a {
  color: var(--footer-link);
  text-decoration-line: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: color .2s, text-decoration-color .2s;
}
.footer-col a:hover, .footer-col a:focus-visible { color: var(--footer-link-hover); text-decoration-color: currentColor; }

/* "Get started": who it is for (a plain caption, not part of the link), then an arrow link */
.footer-col .footer-ctas { gap: 14px; }
.footer-ctas li { display: grid; justify-items: start; gap: 2px; }
.footer-cta-for { font-size: 13px; line-height: 1.4; color: var(--footer-muted); }
.footer-col .footer-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.footer-cta-arrow { flex: none; width: 15px; height: 15px; transition: transform .25s var(--ease); }
.footer-cta:hover .footer-cta-arrow, .footer-cta:focus-visible .footer-cta-arrow { transform: translateX(3px); }
/* Email and phone: an icon and the admin-managed value; the "Email:" /
   "Support phone:" words are kept for screen readers (.sr-only). */
.footer-col .footer-contacts { gap: 10px; margin-top: 22px; }
.footer-contact { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; }
.footer-contact-icon { flex: none; width: 16px; height: 16px; }
.footer-contact-value { min-width: 0; overflow-wrap: anywhere; }
/* SITE BUILD: the phone number is admin-managed text (plain spaces), so keep it on one line. */
.footer-col [data-site-text="supportPhone"] { white-space: nowrap; }

.footer-bottom {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  margin-top: 40px; padding-block: 24px 28px;
  border-top: 1px solid var(--footer-rule);
}
.footer-legal p { font-size: 14px; line-height: 1.5; color: var(--footer-muted); }
/* SITE BUILD: the trademark and ASCI-disclosure lines of the previous footer
   (commented out in the HTML for now) are set as small print under the copyright. */
.footer-legal p + p { padding-top: 4px; font-size: 13px; }
/* "Follow us on" (owner, 15 Oct 2026) */
.footer-social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.footer-social-label { font-size: 14px; line-height: 1.5; color: var(--footer-muted); }
.footer-social-list { list-style: none; display: flex; gap: 10px; }
.footer-social-list a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--footer-chip-line); background: var(--footer-chip); color: var(--footer-link);
  transition: background-color .25s, border-color .25s, color .25s;
}
.footer-social-list a:hover, .footer-social-list a:focus-visible { border-color: var(--footer-chip-hover); background: var(--footer-chip-hover); color: #fff; }
.footer-social-list svg { width: 18px; height: 18px; }

/* The smallest phones: one column, so the phone number never pushes the page sideways. */
@media (max-width: 359.98px) {
  .footer-links { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 600px) {
  .footer-bottom { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
}
/* 600-1239px: the brand block is a band, the logo beside the text (the
   badges under the text up to 899px, at the far right from 900px). */
@media (min-width: 600px) and (max-width: 1239.98px) {
  .footer-brand {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "logo tagline" "logo about" ". badges";
    column-gap: 24px;
  }
  .footer-logo { grid-area: logo; align-self: center; --logo: 104px; }
  .footer-tagline { grid-area: tagline; margin-top: 0; }
  .footer-about { grid-area: about; }
  .footer-badges { grid-area: badges; }
}
@media (min-width: 900px) {
  .footer-top { gap: 48px; }
  .footer-links { grid-template-columns: repeat(4, auto); justify-content: space-between; column-gap: 32px; }
}
/* 900-1239px: the band above one row of four columns. */
@media (min-width: 900px) and (max-width: 1239.98px) {
  .footer-brand {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo tagline badges" "logo about badges";
    align-items: center; column-gap: 28px;
  }
  .footer-tagline { align-self: end; }
  .footer-about { align-self: start; margin-top: 4px; }
  .footer-badges { margin-top: 0; }
}
/* 1240px and up: the brand block and the four columns side by side. */
@media (min-width: 1240px) {
  .footer-top { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(48px, 4vw, 96px); }
  .footer-brand { max-width: 380px; }
  .footer-logo { --logo: clamp(104px, 7.2vw, 128px); }
  .footer-tagline { margin-top: 20px; }
  .footer-about { margin-top: 10px; }
  .footer-badges { margin-top: 24px; }
  .footer-links { justify-content: start; column-gap: clamp(32px, 3.2vw, 64px); }
  .footer-bottom { margin-top: clamp(32px, 2.6vw, 48px); }  /* tighter under the badges (owner, 15 Oct) */
}

/* =========================================================
   Scroll reveal (only when JavaScript is running)
   ========================================================= */
.js [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* SITE BUILD: the hero is shown at first paint, never held back for
   site.js — it is the first thing on screen and the page's LCP element. */
.js .hero [data-reveal] { opacity: 1; transform: none; transition: none; }
/* keep hover effects snappy after an element has been revealed */
.js .proof-card[data-reveal].is-in, .js .pill[data-reveal].is-in { transition: opacity .8s var(--ease) var(--d, 0s), transform .4s var(--ease), background-color .3s, box-shadow .3s; }

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .marquee-track { animation: none; }
}

/* =========================================================
   INNER PAGES (SITE BUILD)
   Privacy, Terms, Refund, Contact, Delete account and 404 were not
   part of the Figma file. They reuse the design's header, footer,
   type scale and colours: the dark page, white body copy at 70%,
   purple accents, and the design's "top + right border with a
   rounded corner" frame (How Adlly Works, FAQ) for panels.
   ========================================================= */

/* Colour roles for the inner pages. Dark is the design. The app's
   webview can ask for a light page with ?theme=light (assets/js/theme.js
   puts data-theme on <html> before first paint); only these roles change,
   so no rule below needs a second, light copy. ?theme=dark is the
   default look and needs nothing. The home page ignores ?theme. */
.doc-page {
  --ink: #fff;
  --ink-muted: var(--white-70);
  --rule: var(--white-20);
  --frame: var(--white-50);
  --surface: rgba(255, 255, 255, .07);
  --surface-hover: rgba(255, 255, 255, .11);
  --field-line: var(--white-50);
  --accent: var(--purple-light);
  --error: #ff9a8f;
  --icon-filter: none;
}
:root[data-theme="light"] .doc-page {
  --ink: #120624;
  --ink-muted: #4a4458;
  --rule: #ddd6e8;
  --frame: #b9b0c9;
  --surface: #fff;
  --surface-hover: #f1ebfa;
  --field-line: #767085;
  --accent: #6b1fc0;
  --error: #b42318;
  --icon-filter: invert(.8);
  background: var(--grey-2);
  color: var(--ink);
}
/* The header is drawn for the dark page; keep it on it. The footer sets
   its own background and colours (FOOTER), so it looks the same in both. */
:root[data-theme="light"] .doc-page .site-header { background: var(--bg); color: #fff; }
:root[data-theme="light"] .doc-page main :focus-visible { outline-color: var(--purple); }

/* ---------- page head ---------- */
.doc-hero {
  padding-block: clamp(40px, 4.2vw, 80px) clamp(28px, 2.6vw, 50px);
  border-bottom: 1px solid var(--rule);
}
.doc-eyebrow { font-size: var(--fs-lead); line-height: 1.3; color: var(--ink-muted); }
.doc-hero h1 {
  font-size: var(--fs-display); font-weight: 400; line-height: 1.2; letter-spacing: -.025em;
  color: var(--ink);
}
.doc-lede { max-width: 62ch; margin-top: 12px; font-size: var(--fs-lead); line-height: 1.4; color: var(--ink-muted); }
.doc-meta { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }

/* ---------- layout: "On this page" + text ---------- */
.doc-section { padding-block: clamp(32px, 3.6vw, 64px) clamp(56px, 5.3vw, 102px); }
.doc-nav { display: none; }
@media (min-width: 1100px) {
  .doc-layout {
    display: grid;
    grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
    gap: clamp(40px, 4.2vw, 80px);
    align-items: start;
  }
  .doc-nav {
    display: block;
    position: sticky; top: 24px;
    max-height: calc(100vh - 48px); overflow-y: auto;
    padding: 22px 16px 20px 0;
    border-top: 1px solid var(--frame);
    border-right: 1px solid var(--frame);
    border-top-right-radius: 30px;
  }
}
.doc-nav__title { margin-bottom: 10px; font-size: 16px; font-weight: 600; color: var(--ink); }
.doc-nav ol { list-style: none; display: grid; gap: 2px; }
.doc-nav a {
  display: block; padding: 7px 10px;
  border-left: 2px solid var(--rule);
  font-size: 15px; line-height: 1.35; color: var(--ink-muted); text-decoration: none;
  transition: color .2s, border-color .2s, background-color .2s;
}
.doc-nav a:hover { color: var(--ink); border-color: var(--purple); background: rgba(145, 55, 232, .14); }

/* ---------- long-form text ---------- */
.prose, .doc-body {
  max-width: 860px;
  font-size: clamp(16px, .9375vw, 18px); line-height: 1.65; color: var(--ink-muted);
}
.prose > * + *, .doc-body > * + * { margin-top: 16px; }
.prose h2, .doc-body h2 {
  margin-top: clamp(40px, 3.1vw, 60px);
  padding-top: clamp(20px, 1.6vw, 30px);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-30); font-weight: 500; line-height: 1.25; letter-spacing: -.02em;
  color: var(--ink);
  scroll-margin-top: 24px;
}
.doc-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3, .doc-body h3 { margin-top: 28px; font-size: var(--fs-20); font-weight: 600; line-height: 1.35; color: var(--ink); }
.prose ul, .doc-body ul { list-style: none; display: grid; gap: 10px; }
.prose ul > li, .doc-body ul > li { position: relative; padding-left: 24px; }
.prose ul > li::before, .doc-body ul > li::before {
  content: ""; position: absolute; left: 4px; top: .68em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--purple);
}
.prose ol, .doc-body ol { list-style: decimal; padding-left: 1.4em; display: grid; gap: 10px; }
.prose a, .doc-body a, .doc-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose a:hover, .doc-body a:hover, .doc-link:hover { text-decoration-thickness: 2px; }
.prose strong, .doc-body strong { color: var(--ink); font-weight: 600; }
.prose .lead-note {
  padding: 18px 22px;
  border-left: 3px solid var(--purple);
  border-radius: 0 14px 14px 0;
  background: var(--surface);
}
.prose .lead-note p { color: var(--ink); }

/* ---------- buttons on inner pages ---------- */
.doc-page main .btn-outline { color: var(--ink); border-color: var(--field-line); }
.doc-page main .btn-outline:hover { border-color: var(--purple-light); background: rgba(145, 55, 232, .14); }
.policy-links {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: clamp(40px, 3.6vw, 64px); padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.policy-links .btn { height: 44px; padding: 0 20px; font-size: 15px; }
.policy-links [aria-current="page"] { border-color: var(--purple); background: rgba(145, 55, 232, .2); }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }

/* ---------- contact ---------- */
.doc-block { padding-top: clamp(48px, 5vw, 96px); }
.doc-block:last-child { padding-bottom: clamp(56px, 5.3vw, 102px); }
.doc-h2 {
  font-size: clamp(28px, 2.6042vw, 50px); font-weight: 400; line-height: 1.2; letter-spacing: -.03em;
  color: var(--ink);
}
.contact-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  margin-top: clamp(24px, 2.4vw, 46px);
}
.contact-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: clamp(22px, 2.08vw, 40px);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink-muted);
}
.contact-card__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: 6px;
  border-radius: 50%; background: var(--purple); color: #fff;
}
.contact-card__icon svg { width: 24px; height: 24px; }
.contact-card h3 { font-size: var(--fs-30); font-weight: 400; line-height: 1.1; color: var(--ink); }
.contact-card__value { font-size: var(--fs-20); font-weight: 500; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.contact-card a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.contact-card address { font-style: normal; line-height: 1.5; color: var(--ink); }
.contact-card address strong { font-weight: 600; }
.small-print { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }

/* the admin-managed FAQ list (built by site.js) */
.contact-faq .faq-list { max-width: 1006px; margin: clamp(24px, 2.4vw, 46px) 0 0; }
.doc-page .faq-item { border-color: var(--frame); }
.doc-page .faq-q { color: var(--ink); }
.doc-page .faq-a p { color: var(--ink-muted); }
.doc-page .faq-icon { filter: var(--icon-filter); }

.split {
  display: grid; gap: 32px;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); align-items: start; }
}
.split .doc-lede { max-width: none; margin-top: 20px; }
.split .small-print { margin-top: 20px; }
.split .small-print a { color: var(--accent); text-underline-offset: 3px; }
.panel {
  padding: clamp(20px, 2vw, 36px) clamp(18px, 2vw, 36px) clamp(8px, 1vw, 16px) 0;
  border-top: 1px solid var(--frame);
  border-right: 1px solid var(--frame);
  border-top-right-radius: 30px;
}
.rule-list > div { padding-block: 14px; border-bottom: 1px solid var(--rule); }
.rule-list > div:last-child { border-bottom: 0; }
.rule-list dt { font-size: 14px; line-height: 1.4; color: var(--ink-muted); }
.rule-list dd { margin: 4px 0 0; font-size: 17px; font-weight: 500; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.rule-list a { color: var(--accent); text-underline-offset: 3px; }

.quick-links {
  list-style: none; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-top: clamp(24px, 2.4vw, 46px);
}
.quick-link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 100%; padding: 20px 22px;
  border-radius: 12px; background: var(--surface);
  color: var(--ink-muted); text-decoration: none; line-height: 1.4;
  transition: background-color .3s, transform .4s var(--ease);
}
.quick-link strong { display: block; margin-bottom: 2px; font-size: var(--fs-20); font-weight: 500; color: var(--ink); }
.quick-link svg { flex: 0 0 auto; width: 24px; height: 24px; color: var(--ink); transition: transform .25s var(--ease); }
.quick-link:hover { background: var(--surface-hover); transform: translateY(-3px); }
.quick-link:hover svg { transform: translateX(4px); }

/* ---------- 404 ---------- */
.error-hero { padding-block: clamp(48px, 5.4vw, 104px) clamp(56px, 6.25vw, 120px); text-align: center; }
.error-code {
  font-size: clamp(96px, 11vw, 210px); font-weight: 600; line-height: 1; letter-spacing: -.06em;
  color: var(--purple-light);
}
.error-hero h1 { margin-top: 8px; font-size: var(--fs-display); font-weight: 400; line-height: 1.2; letter-spacing: -.025em; color: var(--ink); }
.error-hero .doc-lede { margin-inline: auto; }
.error-hero .quick-links { max-width: 1100px; margin-inline: auto; text-align: left; }
.error-hero .small-print { margin-top: 28px; }
.error-hero .small-print a { color: var(--accent); text-underline-offset: 3px; }

/* ---------- account deletion: form + confirmation ---------- */
.del-form {
  margin-block: 24px 32px;
  padding: clamp(20px, 2vw, 32px);
  border-radius: 16px;
  background: var(--surface);
}
.del-form__label { display: block; margin-bottom: 10px; font-weight: 600; color: var(--ink); }
/* The +91 prefix is presentation only — the input takes the 10 national
   digits, so a pasted "+91 98765 43210" cannot become a 15-digit value. */
.del-form__row {
  display: flex; align-items: stretch;
  max-width: 22rem;
  border: 1px solid var(--field-line);
  border-radius: 12px;
  overflow: hidden;
}
.del-form__row:focus-within { border-color: var(--purple-light); box-shadow: 0 0 0 3px rgba(145, 55, 232, .5); }
.del-form__prefix {
  display: flex; align-items: center;
  padding: 0 14px;
  border-right: 1px solid var(--field-line);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.del-form__input {
  flex: 1; min-width: 0;
  padding: 12px 14px;
  border: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 17px; font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.del-form__input::placeholder { color: var(--ink-muted); opacity: 1; }
.del-form__input:focus { outline: none; }
.del-form__help { margin-top: 10px; font-size: 14px; color: var(--ink-muted); }
.del-form__error { margin-top: 10px; font-size: 14px; font-weight: 500; color: var(--error); }
.del-form .btn { margin-top: 18px; }
.del-form .btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

.del-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
.del-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 2, 24, .72); }
.del-modal__panel {
  position: relative;
  width: min(30rem, 100%);
  padding: clamp(24px, 2.5vw, 40px);
  border-radius: 20px;
  background: var(--grey-3); color: #000;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
  text-align: center;
}
.del-modal__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin: 0 auto 16px;
  border-radius: 50%; background: rgba(145, 55, 232, .14); color: var(--purple);
}
.del-modal__icon svg { width: 26px; height: 26px; }
.del-modal__title { margin-bottom: 12px; font-size: 24px; font-weight: 600; line-height: 1.2; }
.del-modal__body { margin-bottom: 12px; font-size: 15px; line-height: 1.55; color: #3d3a45; }
.del-modal__close { margin-top: 8px; }
/* the same scroll lock the previous design used while the modal is open */
body.nav-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .del-modal__panel { animation: del-pop .2s var(--ease); }
  @keyframes del-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
}

/* =========================================================
   EMBED MODE (?embed=1) — the page inside the app's webview
   assets/js/embed.js puts `is-embed` on <html> before first paint.
   The webview has its own title bar and back button, so the site
   header, footer and skip link are left out. Content, meta tags and
   canonicals are unchanged.
   ========================================================= */
.is-embed .site-header,
.is-embed .site-footer,
.is-embed .skip-link { display: none !important; }
.is-embed .doc-hero { padding-top: 28px; }

/* =========================================================
   PRINT — the legal pages get printed; drop the chrome
   ========================================================= */
@media print {
  .site-header, .site-footer, .skip-link, .doc-nav, .policy-links, .del-form, .del-modal { display: none !important; }
  body, .doc-page { background: #fff !important; color: #000 !important; }
  .doc-page { --ink: #000; --ink-muted: #222; --rule: #ccc; --frame: #ccc; --accent: #000; --surface: #fff; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .prose, .doc-body { max-width: none; }
}

/* Floating WhatsApp chat button (every page). Sits under the mobile menu, modals and toasts. */
.wa-float {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 15;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover { color: #fff; transform: scale(1.06); box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }
.wa-float:focus-visible { outline: 3px solid #128c7e; outline-offset: 3px; }
.wa-float svg { width: 30px; height: 30px; }
@media (max-width: 600px) {
  .wa-float { width: 52px; height: 52px; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
  .wa-float svg { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } .wa-float:hover { transform: none; } }
@media print { .wa-float { display: none; } }