/* Partner4Me public site.
   Hand-written, no build step, no CDN, no JavaScript. The CSP is
   `default-src 'self'` with `font-src 'self' data:` and the public-web tests
   forbid any <script> but the JSON-LD block, so every motion on these pages
   is CSS: load animations in the hero, scroll-driven reveals where the browser
   supports `animation-timeline`, and native <details> for the FAQ.

   Faces are self-hosted subsets (see ../fonts/README.md): "P4M Display" for
   headings, numbers and buttons, "P4M Icons" for the Font Awesome glyphs, the
   system UI stack for body text.

   Palette: ink #08040F, violet #7C3AED, amber #FFB13C, cream #F7F3FF, with
   brand accents on top: electric violet #A855F7, hot pink #FF4FA3,
   tangerine #FF8A3D and mint #5EEAD4. The accents live on components -
   buttons, icon tiles, gradient headings, borders - and never on the ambient
   wash: every large glow on the page (body wash, hero aurora, orbs, page-head
   aurora) is drawn from --wash-rgb / --wash-2-rgb only, so a mood still
   retints all of it and the wet-weather mood stays cool grey-blue. Text over
   a gradient is either a light colour on ink or near-black on a light fill,
   and clears AA either way.

   DELIBERATELY NO PHOTOGRAPHY, NO TESTIMONIALS, NO BADGES. Stock images of
   attractive people are what would make a companionship marketplace read as a
   dating product; invented reviews, ratings and certifications are what would
   make it a liar. Every visual here is type, colour, geometry and numbers the
   engine computed.

   The one pill that looks like a badge, `.hot` ("HOT" with a fire glyph), is
   NOT a trust badge and makes no claim about anybody. It is a merchandising
   label a SUPER_ADMIN switches on for a service (services.is_hot, audited as
   service.hot_changed), and it changes nothing about price, payout, KYC or
   booking. The no-trust-badges rule above stands: nothing here may print
   "verified", "top rated", "most booked" or any count the database does not
   hold.

   THE AMBIENT WASH SHIFTS WITH THE HOUR, THE CALENDAR AND THE WEATHER, and
   the rain mood is SHELTER: cooler, greyer, lower-glow. Not warmer, not
   dimmer, not candlelit. "Rain, therefore cosy, therefore intimate" is an
   easy and well-meant re-derivation, and it is the one register this product
   cannot wear - the footer of the page it would tint says in as many words
   that bookings are never for romantic or intimate arrangements. Rain in
   India is waterlogging and travel time, and an appointment that still has
   to happen. app/web/mood.py holds the full reasoning and the only palettes
   there are. */

:root {
  --r-s: 14px; --r-m: 22px; --r-l: 30px; --r-xl: 40px;
  --ease-soft: cubic-bezier(.25, .46, .45, .94);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --shadow-card: 0 30px 70px -20px rgba(0, 0, 0, .7);
  --rule: 1px solid var(--line);
  --electric: #A855F7; --pink: #FF4FA3; --tangerine: #FF8A3D; --lilac: #C4B5FD;
  --pink-rgb: 255, 79, 163; --tangerine-rgb: 255, 138, 61; --mint-rgb: 94, 234, 212; --electric-rgb: 168, 85, 247;
  --grad-amber: linear-gradient(120deg, var(--amber) 0%, var(--tangerine) 50%, var(--pink) 100%);
  --grad-violet: linear-gradient(135deg, var(--violet), #6D28D9);
  /* Heading highlight: every stop is light enough to clear AA on ink. */
  --grad-pop: linear-gradient(100deg, var(--lilac) 0%, #FF7AC6 35%, #FFB13C 65%, var(--mint) 100%);
  --grad-edge: linear-gradient(120deg, rgba(var(--electric-rgb), .9), rgba(var(--pink-rgb), .9), rgba(var(--tangerine-rgb), .9));
  --glass: linear-gradient(160deg, rgba(40, 22, 74, .62), rgba(16, 7, 34, .72));
  --glass-blur: blur(14px) saturate(150%);
  --accent: var(--violet-soft); --accent-rgb: 167, 139, 250;
  interpolate-size: allow-keywords;
}

/* --------------------------------------------------------------- typography */
h1, h2, h3, h4 {
  font-family: var(--display); color: var(--cream); font-weight: 700;
  line-height: 1.08; letter-spacing: -.025em; margin: 0 0 .6em;
}
h1 { font-size: clamp(2.3rem, 1.2rem + 3.9vw, 4.2rem); font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: clamp(1.85rem, 1.2rem + 2.4vw, 3rem); }
h3 { font-size: clamp(1.05rem, 1rem + .3vw, 1.3rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
h4 { font-size: .95rem; font-weight: 600; }
h1 em, h2 em { font-style: normal; color: var(--amber); }
/* The highlighted words wear a slowly drifting gradient. The flat amber above
   is the fallback wherever background-clip: text is not supported. In the
   hero the words are separate inline-blocks (they animate in one by one), so
   each word carries the gradient itself. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 em, h2 em, .hero h1 em .w, .wordmark em {
    background: var(--grad-pop); background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: gradientDrift 9s ease-in-out infinite alternate;
  }
  .hero h1 em { background: none; animation: none; }
  .hero h1 em .w {
    animation: wordIn .8s var(--ease-out) forwards, gradientDrift 9s ease-in-out infinite alternate;
    animation-delay: calc(.25s + var(--i, 0) * .055s), 1.2s;
  }
}
@keyframes gradientDrift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

p, ul, ol, dl, table { margin: 0 0 1rem; }
p { font-size: 1.02rem; }
a { text-underline-offset: .18em; transition: color .25s ease; }
a:hover { color: var(--cream); }
strong { font-weight: 600; color: var(--cream); }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em; background: rgba(34, 18, 63, .6); border: var(--rule);
  border-radius: 6px; padding: .08em .35em;
}
hr { border: 0; border-top: var(--rule); margin: 2.5rem 0; }
::selection { background: var(--violet); color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--lilac);
  margin: 0 0 1rem; padding: .4rem .9rem .4rem .8rem; border-radius: 999px;
  background: linear-gradient(120deg, rgba(var(--electric-rgb), .16), rgba(var(--pink-rgb), .12));
  border: 1px solid rgba(var(--pink-rgb), .28);
}
/* An eyebrow that already carries the HOT pill does not need a pill of its own. */
.eyebrow:has(.hot) { padding: 0; background: none; border: 0; }
.eyebrow:has(.hot)::before { display: none; }
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--grad-amber); box-shadow: 0 0 10px rgba(var(--pink-rgb), .8);
}
.lede {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem); line-height: 1.6;
  color: var(--muted); max-width: 40rem;
}
.fineprint { font-size: .88rem; color: var(--muted); max-width: 44rem; }
.meta {
  font-size: .74rem; color: var(--faint); margin: .6rem 0 0;
  letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
}
.updated { font-size: .9rem; color: var(--faint); }
.empty { color: var(--muted); }
.section-head { max-width: 680px; margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.section-head h2 { margin: 0 0 1rem; }
.section-head p { font-size: 1.05rem; color: var(--muted); margin: 0; }
.section-more { margin: 2.25rem 0 0; }

/* -------------------------------------------------------------------- icons */
/* Font Awesome glyphs, by Font Awesome's own icon names, from the subset in
   ../fonts/p4m-icons.woff. A service whose icon_key is not mapped here still
   gets a glyph: the base rule draws "users" until someone adds the key. */
.ico { display: inline-block; font-family: "P4M Icons"; font-weight: 400; font-style: normal;
  line-height: 1; -webkit-font-smoothing: antialiased; }
.ico::before { content: "\f0c0"; }
.ico-camera::before { content: "\f030"; }
.ico-dumbbell::before { content: "\f44b"; }
.ico-graduation-cap::before { content: "\f19d"; }
.ico-paw::before { content: "\f1b0"; }
.ico-book-open::before { content: "\f518"; }
.ico-briefcase::before { content: "\f0b1"; }
.ico-car::before { content: "\f1b9"; }
.ico-cart-shopping::before { content: "\f07a"; }
.ico-child-reaching::before { content: "\e59d"; }
.ico-clipboard-list::before { content: "\f46d"; }
.ico-compass::before { content: "\f14e"; }
.ico-house::before { content: "\f015"; }
.ico-microphone::before { content: "\f130"; }
.ico-mountain-sun::before { content: "\e52f"; }
.ico-palette::before { content: "\f53f"; }
.ico-person-cane::before { content: "\e53c"; }
.ico-person-walking::before { content: "\f554"; }
.ico-pills::before { content: "\f484"; }
.ico-spa::before { content: "\f5bb"; }
.ico-store::before { content: "\f54e"; }
.ico-suitcase-rolling::before { content: "\f5c1"; }
.ico-tree-city::before { content: "\e587"; }
.ico-film::before { content: "\f008"; }
.ico-mug-hot::before { content: "\f7b6"; }
.ico-bag-shopping::before { content: "\f290"; }
.ico-map-location-dot::before { content: "\f5a0"; }
.ico-calendar-check::before { content: "\f274"; }
.ico-plane::before { content: "\f072"; }
.ico-hand-holding-heart::before { content: "\f4be"; }
.ico-stethoscope::before { content: "\f0f1"; }
.ico-gamepad::before { content: "\f11b"; }
.ico-handshake::before { content: "\f2b5"; }
.ico-music::before { content: "\f001"; }
.ico-utensils::before { content: "\f2e7"; }
.ico-champagne-glasses::before { content: "\f79f"; }
.ico-broom::before { content: "\f51a"; }
.ico-users::before { content: "\f0c0"; }
.ico-masks-theater::before { content: "\f630"; }
.ico-fire::before { content: "\f06d"; }
.ico-shield-halved::before { content: "\f3ed"; }
.ico-file-lines::before { content: "\f15c"; }
.ico-lock::before { content: "\f023"; }
.ico-location-dot::before { content: "\f3c5"; }
.ico-indian-rupee-sign::before { content: "\e1bc"; }
.ico-clock::before { content: "\f017"; }
.ico-user-check::before { content: "\f4fc"; }
.ico-mobile-screen-button::before { content: "\f3cd"; }
.ico-circle-check::before { content: "\f058"; }
.ico-arrow-right::before { content: "\f061"; }
.ico-receipt::before { content: "\f543"; }
.ico-wallet::before { content: "\f555"; }
.ico-calendar-days::before { content: "\f073"; }
.ico-eye-slash::before { content: "\f070"; }
.ico-headset::before { content: "\f590"; }
.ico-id-card::before { content: "\f2c2"; }
.ico-snowflake::before { content: "\f2dc"; }
.ico-hourglass-half::before { content: "\f252"; }
.ico-user-shield::before { content: "\f505"; }
.ico-check::before { content: "\f00c"; }
.ico-quote-left::before { content: "\f10d"; }
.ico-city::before { content: "\f64f"; }
.ico-sliders::before { content: "\f1de"; }
.ico-ban::before { content: "\f05e"; }
.ico-comments::before { content: "\f086"; }
.ico-arrow-trend-up::before { content: "\e098"; }
.ico-user-group::before { content: "\f500"; }
.ico-hospital::before { content: "\f0f8"; }
.ico-xmark::before { content: "\f00d"; }
.ico-chevron-down::before { content: "\f078"; }
.ico-chevron-right::before { content: "\f054"; }
.ico-bell::before { content: "\f0f3"; }
.ico-triangle-exclamation::before { content: "\f071"; }
.ico-scale-balanced::before { content: "\f24e"; }
.ico-key::before { content: "\f084"; }
.ico-map-pin::before { content: "\f276"; }
.ico-building::before { content: "\f1ad"; }
.ico-bolt::before { content: "\f0e7"; }
.ico-hand::before { content: "\f256"; }
.ico-plus::before { content: "\2b"; }
.ico-minus::before { content: "\f068"; }
.ico-people-group::before { content: "\e533"; }
.ico-signature::before { content: "\f5b7"; }
.ico-list-check::before { content: "\f0ae"; }
.ico-ruler::before { content: "\f545"; }
.ico-star::before { content: "\f005"; }
.ico-ticket::before { content: "\f145"; }
.ico-globe::before { content: "\f0ac"; }

/* ------------------------------------------------------------------- header */
.mainnav { margin-left: auto; }
.mainnav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.9rem; list-style: none; margin: 0; padding: 0; }
.mainnav a {
  display: inline-block; padding: .4rem .05rem; color: var(--muted);
  text-decoration: none; font-weight: 500; font-size: .9rem; position: relative;
}
.mainnav a::after {
  content: ""; position: absolute; left: 0; bottom: .05rem; height: 2px; width: 0; border-radius: 2px;
  background: var(--grad-amber); transition: width .3s var(--ease-out);
}
.mainnav a:hover { color: var(--cream); }
.mainnav a:hover::after, .mainnav a[aria-current="page"]::after { width: 100%; }
.mainnav a[aria-current="page"] { color: var(--cream); }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .8rem 1.5rem; border-radius: 999px;
  font-family: var(--display); font-weight: 600; font-size: .9rem; letter-spacing: -.01em;
  text-decoration: none; border: 1px solid transparent; white-space: nowrap;
  transition: transform .3s var(--ease-out), box-shadow .3s ease,
              background-color .3s ease, border-color .3s ease, color .3s ease;
}
/* Near-black text on the amber-tangerine-pink fill: the darkest stop (pink)
   still measures above 6:1 against #1A0B00. */
.btn-primary {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--grad-amber); background-size: 180% 100%; background-position: 0% 50%; color: #1A0B00;
  font-weight: 700; box-shadow: 0 10px 30px -10px rgba(var(--pink-rgb), .7), 0 6px 20px -10px var(--amber-glow);
  transition: transform .35s var(--ease-pop), box-shadow .3s ease, background-position .6s var(--ease-out), color .3s ease;
}
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%); animation: sheen 4.5s ease-in-out 2s infinite;
}
@keyframes sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.btn-primary:hover {
  color: #1A0B00; transform: translateY(-3px) scale(1.03); background-position: 100% 50%;
  box-shadow: 0 18px 40px -10px rgba(var(--pink-rgb), .75), 0 0 0 1px rgba(255, 255, 255, .25);
}
.btn-primary:active { transform: translateY(0) scale(.98); }
.btn-ghost {
  border-color: rgba(var(--accent-rgb), .35); color: var(--cream);
  background: rgba(167, 139, 250, .07); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  border-color: var(--pink); color: var(--cream);
  background: rgba(var(--pink-rgb), .12); transform: translateY(-3px);
  box-shadow: 0 12px 30px -14px rgba(var(--pink-rgb), .8);
}
.btn .btn-arrow { font-size: .8em; transition: transform .3s var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(3px); }
.headcta { padding: .6rem 1.1rem; font-size: .83rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2rem 0 1.5rem; }

/* -------------------------------------------------------------------- bands */
.band { padding: clamp(4rem, 2.5rem + 6vw, 8rem) 0; position: relative; }
.band.alt { background: linear-gradient(180deg, rgba(24, 11, 48, .55), rgba(24, 11, 48, .25)); border-block: var(--rule); }
.band.alt + .band.alt { border-top: 0; }
.band h2 { max-width: 22ch; }
.band > .wrap > .lede { margin-bottom: 2.5rem; }

/* --------------------------------------------------------------------- hero */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(3.5rem, 2rem + 5vw, 6.5rem) 0 clamp(3rem, 2rem + 3vw, 5rem);
}
/* The aurora: a slowly turning gradient behind the hero, drawn from the two
   wash channels only, so the ambient mood retints it along with the page
   (and shelter keeps it grey-blue). It sits to the right, behind the card
   stack, and fades out before the copy column. */
.hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: min(900px, 110vw); aspect-ratio: 1; right: -18%; top: -30%; border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(var(--wash-rgb), calc(.34 * var(--wash-k))),
    rgba(var(--wash-2-rgb), calc(.20 * var(--wash-k))),
    rgba(var(--wash-rgb), calc(.10 * var(--wash-k))),
    rgba(var(--wash-2-rgb), calc(.22 * var(--wash-k))),
    rgba(var(--wash-rgb), calc(.34 * var(--wash-k))));
  filter: blur(90px); opacity: .9;
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  animation: auroraSpin 28s linear infinite;
}
@keyframes auroraSpin { to { transform: rotate(1turn); } }
.hero > .wrap { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; }

.badge {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem 1.05rem .5rem .8rem; border-radius: 999px;
  background: linear-gradient(var(--deep), var(--deep)) padding-box, var(--grad-edge) border-box;
  border: 1px solid transparent; box-shadow: 0 8px 30px -12px rgba(var(--pink-rgb), .6);
  font-size: .78rem; font-weight: 600; color: var(--cream); margin: 0 0 1.6rem;
  opacity: 0; transform: scale(.9); animation: badgeIn .6s var(--ease-out) .15s forwards;
}
@keyframes badgeIn { to { opacity: 1; transform: scale(1); } }
.badge .ping { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); position: relative; }
.badge .ping::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--amber); animation: ping 1.8s ease-out infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }

.hero h1 { max-width: 15ch; margin-bottom: 1.4rem; }
.hero h1 .w {
  display: inline-block; opacity: 0; transform: translateY(60%) rotateX(-40deg);
  animation: wordIn .8s var(--ease-out) forwards;
  animation-delay: calc(.25s + var(--i, 0) * .055s);
}
@keyframes wordIn { to { opacity: 1; transform: translateY(0) rotateX(0); } }
.hero-sub {
  font-size: 1.1rem; color: var(--text); max-width: 33rem; margin-bottom: 2rem;
  opacity: 0; transform: translateY(14px); animation: fadeUp .7s var(--ease-out) 1s forwards;
}
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
.hero-actions {
  display: flex; gap: .85rem; flex-wrap: wrap; margin: 0 0 1.75rem;
  opacity: 0; transform: translateY(14px); animation: fadeUp .7s var(--ease-out) 1.15s forwards;
}
.hero-fine {
  border-left: 3px solid var(--pink); padding-left: 1rem; margin: 0 0 2rem;
  opacity: 0; animation: fadeUp .7s var(--ease-out) 1.3s forwards;
}
.trust-strip {
  list-style: none; margin: 0; padding: 1.6rem 0 0; border-top: var(--rule);
  display: flex; gap: 2.25rem; flex-wrap: wrap;
  opacity: 0; animation: fadeUp .7s var(--ease-out) 1.45s forwards;
}
.trust-item { display: flex; flex-direction: column; }
.trust-item strong {
  font-family: var(--display); font-size: 1.9rem; font-weight: 800; color: var(--amber);
  letter-spacing: -.03em; line-height: 1.1;
}
.trust-item:nth-child(2) strong { color: #FF7AC6; }
.trust-item:nth-child(3) strong { color: var(--mint); }
.trust-item strong small { font-size: .95rem; color: var(--faint); font-weight: 600; letter-spacing: 0; }
.trust-item span { font-size: .72rem; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; margin-top: .3rem; }

/* Hero visual: two ambient orbs and a stack of three cards. The front card is
   a real quote priced by the engine; the two behind are frosted placeholders. */
.hero-visual { position: relative; margin: 0; min-height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.orb {
  position: absolute; width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, rgba(var(--wash-rgb), calc(.55 * var(--wash-k))), rgba(var(--wash-rgb), 0) 68%);
  filter: blur(50px); will-change: transform; animation: orbFloat 14s ease-in-out infinite;
}
.orb.two {
  width: 300px; height: 300px; top: 40px; right: 10px;
  background: radial-gradient(circle at 60% 40%, rgba(var(--wash-2-rgb), calc(.30 * var(--wash-k))), rgba(var(--wash-2-rgb), 0) 70%);
  animation-duration: 18s; animation-direction: reverse;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -30px) scale(1.08); }
  66% { transform: translate(-20px, 20px) scale(.95); }
}
.card-stack { position: relative; width: 100%; max-width: 380px; height: 440px; perspective: 1200px; }
.pcard {
  position: absolute; inset: 0; border-radius: var(--r-l); padding: 1.6rem;
  background: linear-gradient(160deg, rgba(34, 18, 63, .92), rgba(24, 11, 48, .96));
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: flex; flex-direction: column; opacity: 0; animation: cardIn 1s var(--ease-out) forwards;
}
.pcard.ghost { gap: .8rem; justify-content: flex-start; padding-top: 2.2rem; }
.pcard:nth-child(1) { transform: rotate(-9deg) translate(-28px, 18px) scale(.94); animation-delay: .6s; z-index: 1; filter: brightness(.6); }
.pcard:nth-child(2) { transform: rotate(5deg) translate(22px, 34px) scale(.96); animation-delay: .8s; z-index: 2; filter: brightness(.8); }
.pcard:nth-child(3) {
  z-index: 3; animation: cardInFront 1s var(--ease-out) 1s forwards, floaty 7s ease-in-out 2s infinite;
  background: linear-gradient(160deg, rgba(40, 22, 74, .96), rgba(24, 11, 48, .98)) padding-box, var(--grad-edge) border-box;
  border: 1.5px solid transparent;
  box-shadow: var(--shadow-card), 0 0 60px -20px rgba(var(--pink-rgb), .55);
}
@keyframes cardIn { to { opacity: 1; } }
@keyframes floaty { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -12px; rotate: -.6deg; } }
@keyframes cardInFront {
  0% { opacity: 0; transform: translateY(50px) rotateY(18deg) scale(.9); }
  100% { opacity: 1; transform: translateY(0) rotateY(0) scale(1); }
}
.pcard-top { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.2rem; }
.avatar {
  width: 56px; height: 56px; border-radius: 18px; flex-shrink: 0; font-size: 1.35rem;
  background: linear-gradient(135deg, var(--electric), var(--pink) 55%, var(--tangerine)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .18);
}
.pcard-name { font-family: var(--display); font-weight: 600; color: var(--cream); font-size: 1rem; line-height: 1.3; }
.pcard-role { font-size: .76rem; color: var(--violet-soft); margin-top: .1rem; }
.pcard-verified { display: inline-flex; align-items: center; gap: .35rem; font-size: .68rem; color: var(--mint); margin-top: .25rem; }
.pcard-body { display: flex; flex-direction: column; gap: .7rem; }
.pcard-row {
  display: flex; justify-content: space-between; gap: 1rem; font-size: .82rem;
  padding-bottom: .6rem; border-bottom: 1px dashed var(--line);
}
.pcard-row span:first-child { color: var(--faint); }
.pcard-row span:last-child { color: var(--text); font-weight: 500; white-space: nowrap; }
.pcard-price { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-top: 1rem; }
.pcard-price .amt { font-family: var(--display); font-size: 1.7rem; font-weight: 700; color: var(--amber); letter-spacing: -.03em; line-height: 1; }
.pcard-price .per { font-size: .72rem; color: var(--faint); margin-top: .35rem; }
.pcard-lock { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--cream); }
.pcard-lock .ico { color: var(--amber); }
.stack-note { font-size: .78rem; color: var(--faint); text-align: center; max-width: 24rem; margin: 1.4rem auto 0; line-height: 1.5; }

/* ----------------------------------------------------------------- services */
.svc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1.1rem; }
/* Cards cycle through the four accents, so a grid reads as a set of stickers
   rather than a wall of one purple. --accent drives the icon tile, the hover
   glow and the hover border; body text colours never change. */
.svc:nth-child(4n + 1), .step:nth-child(4n + 1), .trust-card:nth-child(4n + 1), .card:nth-child(4n + 1) { --accent: var(--violet-soft); --accent-rgb: 167, 139, 250; }
.svc:nth-child(4n + 2), .step:nth-child(4n + 2), .trust-card:nth-child(4n + 2), .card:nth-child(4n + 2) { --accent: #FF7AC6; --accent-rgb: var(--pink-rgb); }
.svc:nth-child(4n + 3), .step:nth-child(4n + 3), .trust-card:nth-child(4n + 3), .card:nth-child(4n + 3) { --accent: #FFA25C; --accent-rgb: var(--tangerine-rgb); }
.svc:nth-child(4n + 4), .step:nth-child(4n + 4), .trust-card:nth-child(4n + 4), .card:nth-child(4n + 4) { --accent: var(--mint); --accent-rgb: var(--mint-rgb); }
.svc {
  position: relative; overflow: hidden; border-radius: var(--r-m); padding: 1.7rem 1.55rem 1.4rem;
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: var(--rule); display: flex; flex-direction: column;
  transition: transform .45s var(--ease-pop), border-color .4s ease, box-shadow .4s ease;
}
.svc::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at 20% 0%, rgba(var(--accent-rgb), .22), transparent 50%);
  opacity: 0; transition: opacity .4s ease;
}
.svc:hover, .svc:focus-within {
  transform: translateY(-8px) rotate(-.4deg); border-color: rgba(var(--accent-rgb), .55);
  box-shadow: 0 26px 50px -22px rgba(var(--accent-rgb), .6);
}
.svc:hover::before, .svc:focus-within::before { opacity: 1; }
.svc-icon {
  width: 50px; height: 50px; border-radius: 16px; font-size: 1.25rem; color: var(--accent);
  background: linear-gradient(140deg, rgba(var(--accent-rgb), .3), rgba(var(--accent-rgb), .06));
  border: 1px solid rgba(var(--accent-rgb), .4); display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem; transition: transform .45s var(--ease-pop), box-shadow .4s ease;
}
.svc:hover .svc-icon { transform: scale(1.14) rotate(-10deg); box-shadow: 0 10px 24px -8px rgba(var(--accent-rgb), .7); animation: wiggle .7s ease-in-out .15s; }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: 8deg; } 50% { rotate: -6deg; } 75% { rotate: 3deg; } }
.svc h3 { margin-bottom: .45rem; font-size: 1.05rem; }
.svc h3 a { color: var(--cream); text-decoration: none; }
.svc h3 a::after { content: ""; position: absolute; inset: 0; }   /* the whole card is the link */
.svc p { font-size: .86rem; line-height: 1.6; color: var(--muted); margin-bottom: 1rem; flex: 1; }
.svc-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.price { font-family: var(--display); font-weight: 700; color: var(--amber); font-size: .92rem; }
.price small { display: block; font-family: var(--body); font-weight: 400; color: var(--faint); font-size: .7rem; margin-top: .15rem; }
.svc-link {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700; color: var(--accent);
  opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .3s var(--ease-out);
}
.svc-link .ico { font-size: .75em; }
.svc:hover .svc-link, .svc:focus-within .svc-link { opacity: 1; transform: translateX(0); }

/* ---------------------------------------------------------------- how (home) */
.how-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.step {
  position: relative; padding: 2rem 1.7rem 1.7rem; border-radius: var(--r-m); border: var(--rule);
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); overflow: hidden;
  transition: border-color .35s ease, transform .45s var(--ease-pop), box-shadow .35s ease;
}
.step:hover { border-color: rgba(var(--accent-rgb), .5); transform: translateY(-6px); box-shadow: 0 22px 44px -22px rgba(var(--accent-rgb), .6); }
.step-num {
  position: absolute; top: .8rem; right: 1.2rem; font-family: var(--display); font-weight: 800;
  font-size: 3.6rem; line-height: 1; color: rgba(var(--accent-rgb), .16); letter-spacing: -.05em;
}
.step-ico {
  width: 50px; height: 50px; border-radius: 16px; font-size: 1.2rem; color: var(--accent);
  background: linear-gradient(140deg, rgba(var(--accent-rgb), .26), rgba(var(--accent-rgb), .05));
  border: 1px solid rgba(var(--accent-rgb), .38); display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem;
  animation: bob 5s ease-in-out infinite; animation-delay: calc(var(--bob, 0) * -1.3s);
}
.step:nth-child(2) .step-ico { --bob: 1; } .step:nth-child(3) .step-ico { --bob: 2; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.step h3 { margin-bottom: .5rem; }
.step p { color: var(--muted); font-size: .92rem; margin: 0; }

/* ---------------------------------------------------- plainly stated (trust) */
.band.candour {
  background:
    radial-gradient(800px 400px at 15% 0%, rgba(124, 58, 237, .18), transparent 60%),
    linear-gradient(180deg, rgba(16, 7, 34, .7), rgba(8, 4, 15, .2));
  border-block: var(--rule);
}
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.1rem; }
.trust-card {
  padding: 1.9rem 1.7rem; border-radius: var(--r-m); border: var(--rule);
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  transition: border-color .35s ease, transform .45s var(--ease-pop), box-shadow .35s ease;
}
.trust-card:hover { border-color: rgba(var(--accent-rgb), .5); transform: translateY(-6px); box-shadow: 0 22px 44px -22px rgba(var(--accent-rgb), .6); }
.trust-icon {
  width: 54px; height: 54px; border-radius: 18px; font-size: 1.25rem; color: var(--accent);
  background: linear-gradient(140deg, rgba(var(--accent-rgb), .3), rgba(var(--accent-rgb), .06));
  border: 1px solid rgba(var(--accent-rgb), .4); transition: transform .45s var(--ease-pop); display: flex; align-items: center; justify-content: center; margin-bottom: 1.2rem;
}
.trust-card:hover .trust-icon { transform: scale(1.1) rotate(8deg); }
.trust-card h3 { font-size: 1.02rem; margin-bottom: .6rem; }
.trust-card p { font-size: .88rem; line-height: 1.65; color: var(--muted); margin: 0; }

.marquee {
  margin-top: 3rem; overflow: hidden; padding: .4rem 0;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; gap: .85rem; width: max-content; will-change: transform; animation: marquee 44s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - .425rem)); } }
.chip {
  display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1.1rem; border-radius: 999px;
  background: rgba(34, 18, 63, .6); border: var(--rule); font-size: .79rem; color: var(--muted); white-space: nowrap;
}
.chip .ico { color: var(--mint); font-size: .75em; }
.chip:nth-child(3n + 2) .ico { color: #FF7AC6; }
.chip:nth-child(3n + 3) .ico { color: #FFA25C; }

/* ----------------------------------------------------------------- partners */
.partner-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items: center; }
.partner-grid > div > p:not(.eyebrow) { color: var(--muted); }
.worked {
  margin-top: 1.75rem; padding: 1.6rem; border-radius: var(--r-l); border: 1.5px solid transparent;
  background: linear-gradient(160deg, rgba(34, 18, 63, .96), rgba(16, 7, 34, .98)) padding-box, var(--grad-edge) border-box;
  box-shadow: 0 30px 60px -30px rgba(var(--pink-rgb), .45);
}
.worked-label { font-size: .88rem; color: var(--muted); margin: 0 0 1rem; }
.worked table { width: 100%; border-collapse: collapse; margin: 0; font-size: .9rem; }
.worked th, .worked td { text-align: left; padding: .65rem .5rem; border-bottom: 1px dashed var(--line); }
.worked thead th { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); font-weight: 600; border-bottom: var(--rule); }
.worked tbody th { font-family: var(--display); font-weight: 600; color: var(--cream); }
.worked td { color: var(--text); font-variant-numeric: tabular-nums; }
.worked td.keep { font-family: var(--display); font-weight: 700; color: var(--amber); font-size: 1.05rem; }
.worked tbody tr:last-child th, .worked tbody tr:last-child td { border-bottom: 0; }
.worked-note { font-size: .74rem; color: var(--faint); margin: 1rem 0 0; line-height: 1.55; }

.hl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.hl {
  display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem 1.3rem; border-radius: var(--r-m);
  border: var(--rule); background: var(--glass);
  transition: border-color .3s ease, background .3s ease, transform .3s var(--ease-out);
}
.hl:hover { border-color: var(--line-strong); background: rgba(34, 18, 63, .7); transform: translateX(5px); }
.hl-num {
  font-family: var(--display); font-weight: 800; font-size: .8rem; width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: var(--grad-amber); color: #1A0B00; box-shadow: 0 6px 16px -8px rgba(var(--pink-rgb), .8);
}
.hl h3 { font-size: .95rem; margin-bottom: .25rem; }
.hl p { font-size: .84rem; line-height: 1.6; color: var(--muted); margin: 0; }

/* ----------------------------------------------------------------- coverage */
.coverage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.coverage-grid > div > p:not(.eyebrow) { color: var(--muted); }
.net {
  position: relative; margin: 0; aspect-ratio: 1 / .85; border-radius: var(--r-l); border: var(--rule); overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(124, 58, 237, .14), rgba(16, 7, 34, .6) 70%);
}
.net svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.net line { stroke: rgba(167, 139, 250, .2); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 1.1s var(--ease-out) forwards; animation-delay: calc(.3s + var(--i, 0) * .06s); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.net circle { fill: var(--violet-soft); animation: nodePulse 3.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .22s); }
.net circle.hub { fill: var(--amber); }
@keyframes nodePulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.net-label { position: absolute; bottom: 1rem; left: 1.25rem; right: 1.25rem; font-size: .68rem; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; }

/* -------------------------------------------------------------------- chips */
.chips { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.chips a, .chips.plain li {
  display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.05rem; border: var(--rule); border-radius: 999px;
  text-decoration: none; color: var(--text); font-size: .9rem; font-weight: 500;
  background: rgba(34, 18, 63, .5); transition: all .25s var(--ease-out);
}
.chips a .ico { color: var(--violet-soft); font-size: .8em; }
.chips a:hover { border-color: var(--pink); color: var(--cream); transform: translateY(-3px) rotate(-1.5deg); background: rgba(var(--pink-rgb), .14); box-shadow: 0 10px 24px -12px rgba(var(--pink-rgb), .8); }
.tag {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700;
  color: var(--amber); background: rgba(255, 177, 60, .12); border: 1px solid rgba(255, 177, 60, .3);
  border-radius: 999px; padding: .1rem .5rem;
}

/* ---------------------------------------------------------------------- hot */
/* The HOT pill: the amber .tag language, a notch louder. Presentation only -
   see the header comment. It sits beside a heading, never inside one, so a
   service's accessible name and <title> stay its own title. */
.hot {
  display: inline-flex; align-items: center; gap: .35em; vertical-align: middle;
  font-family: var(--display); font-size: .66rem; font-weight: 700; line-height: 1;
  text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;
  color: var(--amber); background: rgba(255, 177, 60, .14); border: 1px solid rgba(255, 177, 60, .42);
  border-radius: 999px; padding: .3rem .6rem;
}
.hot .ico { font-size: .95em; }
.svc .hot, .card .hot { align-self: flex-start; margin-bottom: .7rem; }
.pagehead .hot { margin: 0 0 1rem; }
.band.hot-now { padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.band.hot-now + .band { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.hot-now .svc { border-color: rgba(255, 177, 60, .3); }

/* ---------------------------------------------------------------------- app */
.app-band {
  border-radius: var(--r-xl); border: 1px solid rgba(var(--pink-rgb), .3); padding: 3.5rem 3.25rem;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; overflow: hidden; position: relative;
  background:
    radial-gradient(700px 400px at 20% 0%, rgba(124, 58, 237, .28), transparent 60%),
    radial-gradient(500px 400px at 90% 100%, rgba(255, 177, 60, .12), transparent 60%),
    linear-gradient(160deg, #1B0F33, #0D0520);
}
.app-band h2 { margin-bottom: 1rem; }
.app-band p:not(.eyebrow):not(.cta-row) { color: var(--muted); max-width: 30rem; }
.app-band .cta-row { margin: 1.5rem 0 1rem; }
.phone-stage { display: flex; justify-content: center; perspective: 1000px; }
.phone {
  width: 250px; height: 500px; border-radius: 38px; border: 7px solid #0A0416; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #2A1650, #14082B);
  box-shadow: 0 40px 90px -25px rgba(124, 58, 237, .55), 0 0 0 1px rgba(167, 139, 250, .16);
  transform: rotateY(-8deg) rotateX(3deg); transition: transform .5s var(--ease-out);
}
.phone-stage:hover .phone { transform: rotateY(0) rotateX(0); }
.phone::before { content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 78px; height: 20px; border-radius: 100px; background: #0A0416; z-index: 5; }
.phone-screen { padding: 44px 18px 18px; height: 100%; display: flex; flex-direction: column; gap: 14px; }
.ps-head { display: flex; align-items: center; gap: 10px; }
.ps-av { width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(135deg, var(--electric), var(--pink), var(--tangerine)); flex-shrink: 0; }
.ps-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.ps-line { display: block; height: 8px; border-radius: 100px; background: rgba(167, 139, 250, .2); }
.ps-line.w60 { width: 60%; } .ps-line.w40 { width: 40%; } .ps-line.w80 { width: 80%; }
.ps-card { border-radius: 14px; padding: 14px; background: rgba(124, 58, 237, .14); border: 1px solid rgba(167, 139, 250, .2); display: flex; flex-direction: column; gap: 8px; }
.ps-pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .62rem; color: var(--mint); text-transform: uppercase; letter-spacing: .08em; }
.ps-amt { font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--amber); letter-spacing: -.02em; }
.ps-map {
  flex: 1; border-radius: 14px; position: relative; overflow: hidden; border: 1px solid rgba(167, 139, 250, .14);
  background:
    radial-gradient(circle at 30% 30%, rgba(124, 58, 237, .3), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(255, 177, 60, .16), transparent 55%), rgba(255, 255, 255, .02);
}
.ps-map::after {
  content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); top: 44%; left: 52%;
  box-shadow: 0 0 0 8px rgba(255, 177, 60, .15), 0 0 0 16px rgba(255, 177, 60, .06); animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.ps-btn {
  height: 40px; border-radius: 12px; background: var(--grad-amber); display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: .76rem; font-weight: 700; color: #1A0B00;
}

/* ---------------------------------------------------------------------- faq */
.faq-list { display: flex; flex-direction: column; gap: .65rem; max-width: 820px; }
.faq {
  border: var(--rule); border-radius: var(--r-m); background: rgba(28, 15, 56, .45); overflow: hidden;
  transition: border-color .3s ease, background .3s ease;
}
.faq[open] { border-color: rgba(var(--pink-rgb), .4); background: rgba(34, 18, 63, .65); box-shadow: 0 18px 40px -26px rgba(var(--pink-rgb), .7); }
.faq:hover:not([open]) { border-color: var(--line-strong); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.3rem 1.5rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: .98rem; }
.faq-ico {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--line-strong); position: relative;
  transition: transform .35s var(--ease-out), background .3s ease, border-color .3s ease;
}
.faq-ico::before, .faq-ico::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--violet-soft); border-radius: 2px; transition: transform .35s var(--ease-out), background .3s ease; }
.faq-ico::before { width: 11px; height: 1.6px; transform: translate(-50%, -50%); }
.faq-ico::after { width: 1.6px; height: 11px; transform: translate(-50%, -50%); }
.faq[open] .faq-ico { transform: rotate(180deg); background: rgba(124, 58, 237, .22); border-color: var(--violet-soft); }
.faq[open] .faq-ico::before, .faq[open] .faq-ico::after { background: var(--amber); }
.faq[open] .faq-ico::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-a p { padding: 0 1.5rem 1.4rem; font-size: .9rem; line-height: 1.75; color: var(--muted); margin: 0; }
.faq::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--ease-soft), content-visibility .4s allow-discrete; }
.faq[open]::details-content { block-size: auto; }

/* -------------------------------------------------------------------- final */
.band.closing { text-align: center; }
.final {
  position: relative; overflow: hidden; border-radius: var(--r-xl); border: 1px solid rgba(var(--pink-rgb), .3);
  padding: clamp(3.5rem, 2.5rem + 5vw, 6rem) 2rem;
  background: radial-gradient(600px 400px at 50% 0%, rgba(124, 58, 237, .32), transparent 65%), linear-gradient(160deg, #1E0F3D, #0A0418);
}
.final::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 220%; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(var(--pink-rgb), .07) 46%, rgba(255, 177, 60, .08) 52%, transparent 62%);
  will-change: transform; animation: shimmer 8s ease-in-out infinite;
}
@keyframes shimmer { 0%, 100% { transform: translateX(-25%); } 50% { transform: translateX(25%); } }
.final .eyebrow { justify-content: center; }
.final h2 { max-width: 20ch; margin: 0 auto 1rem; }
.final p:not(.eyebrow):not(.cta-row) { max-width: 32rem; margin: 0 auto; color: var(--muted); }
.final .cta-row { justify-content: center; position: relative; z-index: 2; margin-bottom: 0; }
.band.closing:not(#start) .cta-row { justify-content: center; }
.band.closing:not(#start) h2, .band.closing:not(#start) .lede, .band.closing:not(#start) p { margin-inline: auto; }
.band.closing:not(#start) .ticks { display: inline-block; text-align: left; }

/* ------------------------------------------------------- inner page frames */
.pagehead { position: relative; overflow: hidden; isolation: isolate; padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0 clamp(1.5rem, 1rem + 2vw, 3rem); border-bottom: var(--rule); }
/* Inner pages get a smaller cousin of the hero aurora, from the same two wash
   channels, so a mood reaches every page frame the same way. */
.pagehead::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; width: 620px; aspect-ratio: 1; right: -160px; top: -300px; border-radius: 50%;
  background: conic-gradient(from 90deg, rgba(var(--wash-rgb), calc(.30 * var(--wash-k))), rgba(var(--wash-2-rgb), calc(.18 * var(--wash-k))), rgba(var(--wash-rgb), calc(.30 * var(--wash-k))));
  filter: blur(80px); animation: auroraSpin 34s linear infinite;
}
.pagehead h1 { animation: riseIn .8s var(--ease-out) both; }
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.pagehead h1 { max-width: 20ch; }
.crumbs { font-size: .8rem; color: var(--faint); margin: 0 0 1.4rem; letter-spacing: .02em; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; opacity: .45; margin-right: .5rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--cream); }

.more {
  display: inline-flex; align-items: center; gap: .4rem; font-family: var(--display); font-weight: 600; font-size: .88rem;
  text-decoration: none; color: var(--violet-soft); transition: color .25s ease, gap .25s var(--ease-out);
}
.more::after { content: "\f061"; font-family: "P4M Icons"; font-size: .8em; }
.more:hover { color: var(--cream); gap: .7rem; }

.prose { max-width: 42rem; }
.prose p, .prose li { color: var(--text); }
.prose h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); margin-top: 2.5rem; }
.prose h3 { margin-top: 1.8rem; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.grievance { margin-top: 2.5rem; }
.grievance-details { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; }
.grievance-details dt { font-weight: 600; }
.grievance-details dd { margin: 0; overflow-wrap: anywhere; }
.prose li { margin-bottom: .4rem; }
.prose-page { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); }

.cards { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.card {
  position: relative; overflow: hidden; border-radius: var(--r-m); padding: 1.7rem 1.55rem 1.45rem;
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--rule);
  transition: transform .45s var(--ease-pop), border-color .4s ease, box-shadow .4s ease;
}
.card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-edge); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.card:hover { transform: translateY(-7px); border-color: rgba(var(--accent-rgb), .5); box-shadow: 0 24px 48px -22px rgba(var(--accent-rgb), .6); }
.card:hover::after { transform: scaleX(1); }
.card h2, .card h3 { margin-bottom: .45rem; font-size: 1.1rem; }
.card h2 a, .card h3 a { color: var(--cream); text-decoration: none; }
.card h2 a:hover, .card h3 a:hover { color: var(--amber); }
.card p { color: var(--muted); font-size: .92rem; margin: 0; }
.card .meta + p { margin-top: .5rem; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); counter-reset: step; }
.steps li { counter-increment: step; padding: 2rem 1.75rem 2rem 0; border-top: var(--rule); position: relative; }
.steps li::before { content: "0" counter(step); display: block; font-family: var(--display); font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--amber); margin-bottom: 1rem; letter-spacing: -.04em; }
.steps li:nth-child(3n + 2)::before { color: #FF7AC6; }
.steps li:nth-child(3n + 3)::before { color: var(--mint); }
.steps h3 { margin-bottom: .5rem; }
.steps p { color: var(--muted); margin: 0; font-size: .96rem; }

.ticks { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.ticks li { position: relative; padding-left: 1.7rem; margin-bottom: .6rem; }
.ticks li::before { content: "\f00c"; font-family: "P4M Icons"; position: absolute; left: 0; top: .3em; font-size: .8rem; color: var(--mint); }
.factlist { display: grid; gap: .6rem 1.5rem; grid-template-columns: auto 1fr; margin: 0 0 1.5rem; }
.factlist div { display: contents; }
.factlist dt { font-family: var(--display); font-weight: 600; color: var(--violet-soft); font-size: .86rem; }
.factlist dd { margin: 0; color: var(--text); }

table.coverage { width: 100%; border-collapse: collapse; font-size: .95rem; margin-bottom: 1.5rem; }
table.coverage caption { caption-side: bottom; text-align: left; font-size: .8rem; color: var(--faint); padding-top: .8rem; }
table.coverage th, table.coverage td { text-align: left; padding: .8rem .6rem; border-bottom: var(--rule); }
table.coverage thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); font-weight: 600; }
table.coverage tbody th { font-weight: 500; color: var(--cream); }
table.coverage a { color: var(--cream); text-decoration: none; }
table.coverage a:hover { color: var(--amber); }
.twocol { display: grid; gap: 2.5rem 4rem; grid-template-columns: 1fr; margin-bottom: 2.5rem; }
@media (min-width: 48rem) { .twocol { grid-template-columns: 1fr 1fr; } }
.notfound { text-align: center; border-bottom: 0; padding-block: clamp(4rem, 3rem + 6vw, 8rem); }
.notfound h1, .notfound .lede { margin-inline: auto; }
.notfound .chips { justify-content: center; }
.plain { list-style: none; padding: 0; margin: 0; }

/* ------------------------------------------------------------------- footer */
.sitefoot {
  border-top: var(--rule); background: linear-gradient(180deg, rgba(16, 7, 34, 0), rgba(8, 4, 15, .9));
  padding: clamp(3rem, 2rem + 4vw, 5rem) 0 2rem; font-size: .9rem; position: relative; z-index: 1;
}
.footgrid {
  display: grid; gap: 2.5rem 2.5rem; grid-template-columns: minmax(14rem, 1.6fr) repeat(4, minmax(8rem, 1fr));
  padding-bottom: 2.75rem; border-bottom: var(--rule); margin-bottom: 2rem;
}
.footbrand p { color: var(--muted); max-width: 20rem; margin-top: 1rem; font-size: .88rem; }
.footcol h2 { font-family: var(--display); font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--cream); margin-bottom: 1.1rem; }
.footcol ul { list-style: none; margin: 0; padding: 0; }
.footcol li { margin-bottom: .6rem; }
.footcol a { display: inline-block; color: var(--muted); text-decoration: none; font-size: .86rem; transition: color .25s ease, transform .25s ease; }
.footcol a:hover { color: #FF7AC6; transform: translateX(4px); }
.sitefoot::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; pointer-events: none;
  background: var(--grad-edge); background-size: 200% 100%; animation: gradientDrift 8s ease-in-out infinite alternate; opacity: .7;
}
.positioning { font-weight: 500; color: var(--text); max-width: 52rem; }
/* The weather data credit. Deliberately the quietest text in the footer: it
   is a licence obligation, not a statement about the product, and it sits in
   a block whose other lines are load-bearing. */
.credit { font-size: .82rem; color: var(--faint); margin-top: .35rem; }
.honesty { color: var(--faint); font-size: .82rem; max-width: 60rem; line-height: 1.6; }
.copyright { color: var(--faint); font-size: .8rem; margin: 0; }

/* ------------------------------------------------ scroll-driven enhancements */
/* Nothing here is required: without support, .reveal is simply visible and
   the progress bar stays hidden. */
@supports (animation-timeline: scroll()) {
  .progress { display: block; animation: progress linear both; animation-timeline: scroll(root); }
  .progress { height: 3px; background: linear-gradient(90deg, var(--electric), var(--pink), var(--tangerine), var(--mint)); }
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: reveal .9s var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    /* Cards pop in with a little tilt, alternating left and right. */
    .svc.reveal, .step.reveal, .trust-card.reveal { animation-name: popIn; animation-range: entry 0% entry 45%; }
    .svc.reveal:nth-child(even), .step.reveal:nth-child(even), .trust-card.reveal:nth-child(even) { --tilt: 2.5deg; }
  }
}
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes popIn {
  from { opacity: 0; transform: translateY(40px) scale(.92) rotate(var(--tilt, -2.5deg)); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- live activity */
/* The side strip (templates/_activity.html). Rendered only when the route
   passes real recent events; the template prints nothing otherwise, so there
   is never a placeholder or an invented line here. It is decorative and
   aria-hidden, and it never takes a click: pointer-events is off on the whole
   stack. One slot, bottom-left; the items share it and take turns, each in
   its own 6s window, via per-item animation-delay. The keyframe set is picked
   by the item count (data-n) so the cycle has no dead air. */
.activity {
  position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 800; pointer-events: none;
  width: min(21rem, calc(100vw - 2.2rem)); height: 4.4rem;
}
.activity-item {
  position: absolute; inset: 0; display: flex; align-items: center; gap: .8rem;
  padding: .75rem 1rem .75rem .8rem; border-radius: 20px;
  background: linear-gradient(150deg, rgba(40, 22, 74, .95), rgba(16, 7, 34, .97)) padding-box, var(--grad-edge) border-box;
  border: 1px solid transparent;
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8), 0 0 36px -18px rgba(var(--pink-rgb), .7);
  opacity: 0; transform: translateX(-115%);
  animation: toast6 36s var(--ease-out) infinite both;
  animation-delay: calc(2.5s + var(--i, 0) * 6s);
}
.activity[data-n="2"] .activity-item { animation-name: toast2; animation-duration: 12s; }
.activity[data-n="3"] .activity-item { animation-name: toast3; animation-duration: 18s; }
.activity[data-n="4"] .activity-item { animation-name: toast4; animation-duration: 24s; }
.activity[data-n="5"] .activity-item { animation-name: toast5; animation-duration: 30s; }
.activity[data-n="7"] .activity-item { animation-name: toast7; animation-duration: 42s; }
.activity[data-n="8"] .activity-item { animation-name: toast8; animation-duration: 48s; }
.activity[data-n="9"] .activity-item { animation-name: toast9; animation-duration: 54s; }
.activity[data-n="10"] .activity-item { animation-name: toast10; animation-duration: 60s; }
/* A single event slides in once and stays: looping it would read as the same
   thing happening again and again. */
.activity[data-n="1"] .activity-item { animation: toastOnce .7s var(--ease-pop) 2.5s both; }
.activity-ico {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: #1A0B00; background: var(--grad-amber); position: relative;
}
.activity-item.is-partner .activity-ico { background: linear-gradient(135deg, var(--mint), #A5F3FC); }
.activity-ico::after {
  content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 0 2px var(--deep); animation: ping 1.8s ease-out infinite;
}
.activity-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.activity-text strong {
  font-size: .82rem; font-weight: 600; color: var(--cream);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.activity-text small { font-size: .7rem; color: var(--muted); letter-spacing: .02em; }
/* Slide in over ~.6s, hold, slide out over ~.5s, all inside the item's own
   6s window; the rest of the cycle belongs to the other items. */
@keyframes toastOnce { from { opacity: 0; transform: translateX(-115%); } to { opacity: 1; transform: none; } }
@keyframes toast2 { 0% { opacity: 0; transform: translateX(-115%); } 5%, 43% { opacity: 1; transform: none; } 48%, 100% { opacity: 0; transform: translateX(-115%); } }
@keyframes toast3 { 0% { opacity: 0; transform: translateX(-115%); } 3.4%, 28.7% { opacity: 1; transform: none; } 32%, 100% { opacity: 0; transform: translateX(-115%); } }
@keyframes toast4 { 0% { opacity: 0; transform: translateX(-115%); } 2.5%, 21.5% { opacity: 1; transform: none; } 24%, 100% { opacity: 0; transform: translateX(-115%); } }
@keyframes toast5 { 0% { opacity: 0; transform: translateX(-115%); } 2%, 17.2% { opacity: 1; transform: none; } 19.2%, 100% { opacity: 0; transform: translateX(-115%); } }
@keyframes toast6 { 0% { opacity: 0; transform: translateX(-115%); } 1.7%, 14.3% { opacity: 1; transform: none; } 16%, 100% { opacity: 0; transform: translateX(-115%); } }
@keyframes toast7 { 0% { opacity: 0; transform: translateX(-115%); } 1.43%, 12.26% { opacity: 1; transform: none; } 13.71%, 100% { opacity: 0; transform: translateX(-115%); } }
@keyframes toast8 { 0% { opacity: 0; transform: translateX(-115%); } 1.25%, 10.73% { opacity: 1; transform: none; } 12.00%, 100% { opacity: 0; transform: translateX(-115%); } }
@keyframes toast9 { 0% { opacity: 0; transform: translateX(-115%); } 1.11%, 9.54% { opacity: 1; transform: none; } 10.67%, 100% { opacity: 0; transform: translateX(-115%); } }
@keyframes toast10 { 0% { opacity: 0; transform: translateX(-115%); } 1.00%, 8.58% { opacity: 1; transform: none; } 9.60%, 100% { opacity: 0; transform: translateX(-115%); } }
@media (max-width: 48rem) {
  .activity { left: .75rem; bottom: .75rem; width: min(19rem, calc(100vw - 1.5rem)); height: 4rem; }
  .activity-ico { width: 34px; height: 34px; border-radius: 11px; font-size: .9rem; }
}
@media print { .activity { display: none; } }

/* ------------------------------------------------------------- responsive */
@media (max-width: 64rem) {
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero-visual { min-height: 0; order: 2; }
  .card-stack { height: 400px; }
  .partner-grid, .coverage-grid, .app-band { grid-template-columns: 1fr; gap: 2.75rem; }
  .app-band { padding: 2.75rem 2rem; }
  .footgrid { grid-template-columns: 1fr 1fr; }
  .footbrand { grid-column: 1 / -1; }
}
@media (max-width: 48rem) {
  :root { --pad: 20px; }
  /* Sticky would hold a third of a phone's viewport hostage, so on small
     screens the header scrolls away and the nav becomes a swipeable row. */
  .masthead { position: static; }
  .masthead .wrap { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; padding-block: .7rem; }
  .mainnav { grid-column: 1 / -1; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .mainnav::-webkit-scrollbar { display: none; }
  .mainnav ul { flex-wrap: nowrap; gap: 1.25rem; }
  .mainnav a { font-size: .86rem; white-space: nowrap; }
  .hero-actions, .cta-row { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .cta-row .btn { width: 100%; }
  .trust-strip { gap: 1.25rem 1.75rem; }
  .trust-item strong { font-size: 1.4rem; }
  .svc-grid { grid-template-columns: 1fr; }
  .footgrid { grid-template-columns: 1fr; }
  .footbrand { grid-column: auto; }
  .phone { width: 220px; height: 440px; }
  .worked { padding: 1.2rem; }
  .worked th, .worked td { padding: .55rem .35rem; font-size: .84rem; }
  .hero .lede, .lede { font-size: 1.02rem; }
  .final { padding-inline: 1.25rem; }
}
@media (max-width: 30rem) {
  .pcard.ghost { display: none; }
  .card-stack { max-width: 320px; height: auto; }
  .pcard { position: relative; }
}

/* ------------------------------------------------------------- high contrast */
/* A reader who turned on forced colours or asked for more contrast asked the
   operating system to remove exactly this kind of thing. The wash is the one
   purely decorative layer on the site and it is the one that varies, so it is
   also the one most likely to sit behind text at an alpha nobody checked on
   that reader's palette. Remove it rather than tune it. */
@media (forced-colors: active), (prefers-contrast: more) {
  body::before { display: none; }
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .badge, .hero h1 .w, .hero-sub, .hero-actions, .hero-fine, .trust-strip, .pcard, .reveal { opacity: 1; transform: none; }
  .net line { stroke-dashoffset: 0; }
  .btn:hover, .card:hover, .svc:hover, .hl:hover, .trust-card:hover, .step:hover { transform: none; }
  /* Decorative loops stop outright rather than running at .01ms. */
  .hero::before, .pagehead::before, .orb, .marquee-track, .final::after, .btn-primary::after,
  .step-ico, .pcard, .svc-icon, .sitefoot::before, .badge .ping::after, .activity-ico::after,
  h1 em, h2 em, .hero h1 em .w, .wordmark em, .pagehead h1 { animation: none !important; }
  .btn-primary::after { display: none; }
  /* The activity strip holds still: the first item shows, the rest do not. */
  .activity-item { animation: none !important; opacity: 0; transform: none; }
  .activity-item:first-child { opacity: 1; }
}