/* Yagyanam marketing — cinematic dark-glass theme.
 *
 * Typography:
 *   - Reckless (variable font) for every heading. No italic, weight set
 *     explicitly so the variable axis is fixed.
 *   - Fedra Sans Std for body + all UI text. Three static weights:
 *     Book (400), Medium (500), Bold (700).
 *
 * Mobile rendering:
 *   - The atmospheric warm-gradient + dot-pattern + ॐ aura live on a
 *     real fixed <div class="bg">, not on body::before/::after. iOS
 *     Safari has a long-standing quirk where backdrop-filter does not
 *     reliably pick up content rendered by body pseudo-elements, which
 *     made the glass cards look flat on phones. A real DOM layer fixes
 *     it.
 *   - Glass cards keep -webkit-backdrop-filter alongside the standard
 *     property; both -webkit- and unprefixed are required by some iOS
 *     versions.
 *   - We use 100svh / 100dvh fallbacks for the shell so the URL bar
 *     hiding behavior doesn't cause layout jumps.
 */

/* ── @font-face ─────────────────────────────────────────────── */
@font-face {
  font-family: "Reckless";
  src: url("/fonts/Reckless-VF.woff2?v=20260511r") format("woff2-variations"),
       url("/fonts/Reckless-VF.woff2?v=20260511r") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fedra Sans";
  src: url("/fonts/FedraSansStd-Book.otf?v=20260511r") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fedra Sans";
  src: url("/fonts/FedraSansStd-Medium.otf?v=20260511r") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fedra Sans";
  src: url("/fonts/FedraSansStd-Bold.otf?v=20260511r") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette — earth-toned, refined warmth. Anchored to Deep
   * Charcoal as the page base so it bleeds seamlessly into Safari's
   * status / URL bar. Replaces the earlier vivid-orange scheme with
   * the more sophisticated "ember + amber + taupe + sage" set
   * specified in the project design system. */
  --bg: #1A1714;             /* Deep Charcoal — main background */
  --bg-deep: #0F0D0B;        /* derived deeper variant for radial fade */
  --surface: #23201C;        /* Warm Concrete — cards, panels (solid) */
  --surface-elevated: #2D2925; /* Elevated Surface — modals, hover */
  --border-strong: #3A352F;  /* Stone Border — solid dividers */

  --cream: #E8E2D6;          /* Linen White — primary text, headings */
  --cream-soft: #C9C2B5;     /* derived — between Linen and Taupe */
  --cream-mute: #A89F90;     /* Muted Taupe — secondary text */

  --amber: #D4A574;          /* Amber Glow — buttons, links, key icons */
  --ember: #B8703D;          /* Ember Orange — primary CTAs, highlights */
  --ember-deep: #8C5328;     /* derived deeper variant for CTA gradient end */
  --sage: #7A8471;           /* Misty Sage — secondary buttons, status badges */
  --gold: #D4A574;           /* alias of amber for legacy refs */

  /* Logo color — used for the SVG wordmark mark */
  --mark: #D4A574;

  /* Glass surface tokens — barely-there tint. Uses Linen White rgb so
   * any visible tint matches the headings/body text rather than the
   * earlier off-white. Blur + saturate + brightness do the readability
   * work; the surface itself feels like clear water. */
  --glass-bg: rgba(232, 226, 214, 0.015);
  --glass-bg-strong: rgba(232, 226, 214, 0.03);
  --glass-border: rgba(232, 226, 214, 0.16);
  --glass-border-strong: rgba(232, 226, 214, 0.26);

  /* Motion tokens — UI/UX Pro Max recommends 300-400ms for the
   * "Liquid Glass" feel, with cubic-bezier ease-out for the natural
   * settling motion of fluid. Linear / 150ms feels cheap. */
  --motion-quick: 180ms;
  --motion-base: 300ms;
  --motion-slow: 480ms;
  --ease-liquid: cubic-bezier(0.32, 0.72, 0.2, 1);
  --ease-spring: cubic-bezier(0.5, 1.4, 0.4, 1);

  /* Focus ring — visible Amber Glow halo on any interactive element
   * when the user is navigating by keyboard. WCAG 2.4.7. */
  --focus-ring: 0 0 0 3px rgba(212, 165, 116, 0.5);

  /* Z-index scale */
  --z-bg: 0;
  --z-content: 10;
  --z-sticky: 20;
  --z-modal: 50;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* dvh fills the viewport including the area behind the URL bar on
   * mobile, so the warm gradient genuinely reaches edge-to-edge. */
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--cream);
  font-family: "Fedra Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0; /* explicit: no tracking anywhere */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Stop iOS Safari from over-scrolling into a white area at top/bottom
   * — keeps the warm atmosphere visible all the way to the edge. */
  overscroll-behavior-y: contain;
  background-attachment: fixed;
  /* Belt-and-braces guard against any descendant pushing the layout
   * wider than the viewport. `clip` is preferred over `hidden` because
   * it doesn't create a scroll container (so `position: sticky` still
   * works); both Safari 16+ and Chromium support it. */
  overflow-x: clip;
}
html { overflow-x: clip; }

/* Tone down body's hard edges so the system chrome blends in. */
html { background: var(--bg); }

/* ── Global accessibility ──────────────────────────────────── */
/* Visible amber focus ring whenever an element is reached by
 * keyboard navigation. We never use plain `:focus { outline: none }`
 * — that's a WCAG 2.4.7 violation. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
button:focus-visible,
a:focus-visible,
.tab:focus-visible,
.action:focus-visible {
  border-radius: 14px;
}
/* When the user is using a mouse/touch, no extra ring — only show
 * the ring during real keyboard navigation. */
:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* ── Entrance animations ────────────────────────────────────
 * On first load, the hero + actions + form fade up gently in a
 * staggered cascade. Subtle (12px / 480ms) so it never feels jumpy.
 * Respects prefers-reduced-motion. */
@keyframes lift-fade {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .topbar      { animation: lift-fade var(--motion-slow) var(--ease-liquid) both;          animation-delay:  40ms; }
  .hero        { animation: lift-fade var(--motion-slow) var(--ease-liquid) both;          animation-delay: 100ms; }
  .actions     { animation: lift-fade var(--motion-slow) var(--ease-liquid) both;          animation-delay: 180ms; }
  .form-card   { animation: lift-fade var(--motion-slow) var(--ease-liquid) both;          animation-delay: 260ms; }
  .tabbar      { animation: lift-fade var(--motion-slow) var(--ease-liquid) both;          animation-delay: 340ms; }
  .legal-card  { animation: lift-fade var(--motion-slow) var(--ease-liquid) both;          animation-delay: 100ms; }
}

/* Slow soft pulse on the "currently open" status dot — signals the
 * service is live without being distracting. UIPro's rule says
 * continuous animation is OK only for status indicators.
 * Tinted with Misty Sage (the palette's "secondary buttons, badges"
 * colour) so the live-status reads as a calm signal rather than the
 * urgent CTA-orange used elsewhere. */
@keyframes ember-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(122, 132, 113, 0.22); }
  50%      { box-shadow: 0 0 0 6px rgba(122, 132, 113, 0.08); }
}
@media (prefers-reduced-motion: no-preference) {
  .chip .dot,
  .hero .eyebrow::before {
    animation: ember-pulse 2.6s var(--ease-liquid) infinite;
  }
}

/* ── Atmospheric backdrop (real DOM, not pseudo) ─────────────── */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Solid base = theme-color so the page's top and bottom edges blend
   * into Safari's status / URL bar with zero visible seam. The warm
   * radial blobs live on the .bg-glow child so they can be animated
   * independently by the parallax script. */
  background: var(--bg);
}

/* The warm "glow" layer. Lives inside .bg so .bg's overflow:hidden
 * masks any animation overshoot. Centred radials concentrated in the
 * middle vertical band so they fade out before reaching y=0 / y=100%.
 * Animated by JS via the --scroll-progress CSS custom property below. */
.bg-glow {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  pointer-events: none;
  /* Warm radials in the new earth-toned palette. Amber Glow + Ember
   * Orange + deeper ember create the same agni-flame atmosphere with
   * a refined, less saturated feel. */
  background:
    radial-gradient(40% 22% at 50% 50%, rgba(212, 165, 116, 0.50) 0%, transparent 75%),
    radial-gradient(32% 20% at 85% 60%, rgba(184, 112, 61, 0.42) 0%, transparent 75%),
    radial-gradient(38% 22% at 15% 70%, rgba(140, 83, 40, 0.36) 0%, transparent 75%);
  /* `--scroll-progress` is set by an rAF-throttled scroll handler in
   * index.html / legal.html. It runs 0 → 1 as the user scrolls from
   * top to bottom of the page. The transform here gives a slow
   * upward parallax + a subtle scale, so the glow appears to "breathe"
   * against the still text. translate3d keeps the layer on the GPU. */
  --scroll-progress: 0;
  transform:
    translate3d(0, calc(var(--scroll-progress) * -60px), 0)
    scale(calc(1 + var(--scroll-progress) * 0.06));
  will-change: transform;
}
@property --scroll-progress {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

.bg::before {
  /* Dotted micro-texture overlay on top of .bg-glow */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 235, 210, 0.06) 1px, transparent 1.4px);
  background-size: 18px 18px;
  background-position: 0 0;
  mix-blend-mode: screen;
  opacity: 0.65;
}

@media (prefers-reduced-motion: reduce) {
  /* Don't animate the glow for users who opt out of motion. */
  .bg-glow { transform: none; }
}

/* (The blurred-logo .aura class was removed — it leaked through the
 * top dark cap and created an awkward lighter band where Safari
 * paints its status bar. The warm radial gradient carries the
 * atmosphere on its own.) */

/* All actual content sits above the atmosphere.
 * Safe-area-inset padding lets the warm gradient extend edge-to-edge
 * around the iPhone notch and home indicator while content stays
 * inside the safe area. */
.shell {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* ── Typography ─────────────────────────────────────────────── */
a {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 179, 122, 0.35);
  transition:
    color var(--motion-base) var(--ease-liquid),
    border-color var(--motion-base) var(--ease-liquid);
}
a:hover { color: var(--cream); border-color: var(--cream); }

h1, h2, h3, h4 {
  font-family: "Reckless", "Georgia", serif;
  font-style: normal;
  font-weight: 500;
  color: var(--cream);
  margin: 0 0 0.4em;
  letter-spacing: 0;
}
/* Editorial H1 — light weight Reckless with tight tracking. The Reckless
 * variable font carries the personality at 320 weight; at 500 it would
 * read as default web text and the user noted "looks AI-generated". */
h1 {
  font-size: clamp(2.4rem, 6vw, 4.25rem);
  line-height: 1.02;
  font-weight: 320;
  letter-spacing: -0.022em;
  text-wrap: balance; /* avoids orphans on the last line */
}
h2 {
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -0.012em;
}
h3 { font-size: 1.05rem; }

p { margin: 0 0 1em; color: var(--cream-soft); }
strong { font-weight: 500; color: var(--cream); }

/* ── Top bar ────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.2rem 0.6rem;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "Reckless", "Georgia", serif;
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--cream);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: opacity var(--motion-base) var(--ease-liquid);
}
.wordmark:hover { opacity: 0.85; }
.wordmark .mark {
  transition:
    transform var(--motion-base) var(--ease-spring),
    box-shadow var(--motion-base) var(--ease-liquid);
}
.wordmark:hover .mark {
  transform: rotate(-4deg) scale(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 220, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 8px 18px -6px rgba(212, 162, 127, 0.4);
}
.wordmark .mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255, 240, 220, 0.14), rgba(255, 240, 220, 0.02) 60%, transparent),
    var(--glass-bg);
  -webkit-backdrop-filter: blur(22px) saturate(200%) brightness(108%);
  backdrop-filter: blur(22px) saturate(200%) brightness(108%);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 220, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  color: var(--mark);
  padding: 7px;
  overflow: hidden;
}
.wordmark .mark::after {
  content: "";
  position: absolute;
  top: 0;
  left: 22%;
  right: 22%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 220, 0.65), transparent);
}
.wordmark .mark svg { width: 100%; height: 100%; display: block; }

/* Pill chip in the topbar */
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 240, 220, 0.14), transparent 70%),
    var(--glass-bg);
  -webkit-backdrop-filter: blur(22px) saturate(200%) brightness(108%);
  backdrop-filter: blur(22px) saturate(200%) brightness(108%);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 220, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
  font-size: 0.8rem;
  color: var(--cream-soft);
  overflow: hidden;
}
.chip::after {
  content: "";
  position: absolute;
  top: 0;
  left: 22%;
  right: 22%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 220, 0.55), transparent);
  border-radius: inherit;
}
.chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  /* Misty Sage = "live / open / available" — calm status indicator. */
  background: var(--sage);
  box-shadow: 0 0 0 4px rgba(122, 132, 113, 0.22);
}

/* ── Main content layout ────────────────────────────────────── */
main {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 1rem 1.2rem 3rem;
}

/* ── Liquid glass primitive ─────────────────────────────────────
 *
 * Real glass isn't just a blurred box. It has:
 *   1. A blur of what's behind  → backdrop-filter
 *   2. A faint surface tint     → background rgba
 *   3. A specular highlight     → ::before linear-gradient from top-left
 *   4. An edge bright-line      → ::after thin top-edge stroke
 *   5. An inner dark rim        → inset shadow at the bottom
 *   6. Subtle saturation/contrast on the backdrop so colours behind feel
 *      vivified (iOS 26 trick)
 *
 * Together these read as a physical material rather than a CSS card.
 * Every glass surface in the site (cards, chips, icon buttons, tabs)
 * inherits this construction.
 */
.glass {
  position: relative;
  isolation: isolate;
  /* Pin to GPU compositing so the heavy backdrop-filter renders on a
   * stable layer. Without this, Safari briefly re-paints during the
   * initial layout pass, which the eye reads as cards "shifting" then
   * "snapping back" — that was the homepage load-time overlap. */
  transform: translateZ(0);
  /* Almost-no surface tint. A subtle vertical lightness wash on top
   * simulates the curved-glass reflection without making the card
   * feel like a solid panel. */
  background:
    linear-gradient(180deg,
      rgba(255, 240, 220, 0.07) 0%,
      transparent 40%,
      rgba(0, 0, 0, 0.04) 100%),
    var(--glass-bg);
  /* Heavy blur + strong saturate/brightness/contrast — the iOS 26 trick.
   * The colours behind the glass appear more vivid through it than they
   * are in reality, which is how real refractive glass actually behaves. */
  -webkit-backdrop-filter: blur(56px) saturate(220%) brightness(112%) contrast(112%);
  backdrop-filter: blur(56px) saturate(220%) brightness(112%) contrast(112%);
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  /* Box-shadow stack:
   *   - bright top inset highlight (the lit upper bevel)
   *   - dark bottom inset (gives thickness)
   *   - subtle warm + cool rim tints on horizontal edges simulate
   *     chromatic aberration like light bending through a water droplet
   *   - outer drop shadow anchors the card in space */
  box-shadow:
    /* Linen White top highlight, dark bottom, subtle Amber Glow warm
     * rim left + Misty Sage cool rim right (chromatic aberration). */
    inset 0 1px 0 rgba(232, 226, 214, 0.36),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    inset 1px 0 0 rgba(212, 165, 116, 0.06),
    inset -1px 0 0 rgba(122, 132, 113, 0.05),
    inset 0 0 0 1px rgba(232, 226, 214, 0.04),
    0 30px 80px -30px rgba(0, 0, 0, 0.6);
}

/* Specular highlight — bright wash from top-left + warmer glow top-right,
 * imitating an angled studio light striking the glass face. Static
 * position. (An earlier version animated this on scroll via the new
 * animation-timeline API to mimic iOS 26's water-droplet light catch —
 * but it caused the cards to shift mid-scroll on Safari, with the form
 * card briefly overlapping the action row. Removed.) */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  /* Specular highlights — Linen White wash from top-left plus an
   * Amber Glow warm glaze top-right, mimicking a studio key + fill
   * light striking the glass face. */
  background:
    radial-gradient(120% 70% at 15% -20%, rgba(232, 226, 214, 0.30) 0%, transparent 55%),
    radial-gradient(90% 70% at 100% 5%, rgba(212, 165, 116, 0.20) 0%, transparent 60%),
    radial-gradient(80% 80% at 110% 110%, rgba(0, 0, 0, 0.25) 0%, transparent 60%);
  border-radius: inherit;
}

/* Thin bright top-edge line — the bevel reflection */
.glass::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 240, 220, 0.7) 50%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Note: an earlier version layered an SVG feDisplacementMap into the
 * backdrop-filter to refract the warm gradient through each card.
 * Safari renders displaced pixels up to `scale` pixels past the card's
 * actual edge, which leaked a faint ghost-strip into the gap between
 * the hero and form cards. The SVG filter is kept in the HTML head as
 * an inert hook for future use, but is no longer wired to .glass —
 * heavy blur + saturate + chromatic rim now carries the look on their
 * own. */

/* Solid fallback for browsers without backdrop-filter at all — keeps
 * the card coherent. The specular highlights still render. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background:
      linear-gradient(180deg, rgba(255, 240, 220, 0.06), rgba(255, 240, 220, 0.02) 50%, transparent),
      rgba(18, 12, 8, 0.86);
  }
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  padding: 2rem 1.6rem 1.8rem;
  margin-top: 1.4rem;
  position: relative;
}
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.86rem;
  color: var(--amber);
  margin: 0 0 1.4rem;
}
.hero .eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--sage);
  box-shadow: 0 0 0 4px rgba(122, 132, 113, 0.22);
}
/* Hero rhythm:
 *   eyebrow → H1 :  1.4rem (above)
 *   H1 → lede   :  1.5rem (below)
 *   lede ends   :  card padding takes over
 * Generous vertical space between the display H1 and the supporting
 * lede is what makes the hero read as composed editorial typography
 * rather than dense web copy. Avoids the "AI-generated wall of text"
 * feel the user flagged. */
.hero h1 {
  margin: 0 0 1.5rem;
  /* Widened from 22ch → 28ch for the longer descriptive headline.
   * `text-wrap: balance` on the global h1 rule composes line breaks. */
  max-width: 28ch;
}
.hero .lede {
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--cream-soft);
  /* UIPro line-length rule: 65-75 chars for optimal readability. */
  max-width: 62ch;
  text-wrap: pretty;
  margin: 0;
}

/* Quick action row — now a standalone section that sits between the
 * hero card and the form card, NOT inside the hero. Keeps the visual
 * hierarchy clean: each glass surface has its own breathing room. */
.actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 1.2rem 0 0;
}
.form-card { margin-top: 1.2rem; }
.action {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.15rem 0.5rem 1rem;
  border-radius: 18px;
  background:
    linear-gradient(180deg,
      rgba(255, 240, 220, 0.12) 0%,
      rgba(255, 240, 220, 0.02) 50%,
      rgba(0, 0, 0, 0.05) 100%),
    var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(26px) saturate(200%) brightness(108%);
  backdrop-filter: blur(26px) saturate(200%) brightness(108%);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 220, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  color: var(--cream-soft);
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.25;
  overflow: hidden;
  cursor: pointer;
  /* Liquid hover: 300ms with the same ease-out curve fluids settle
   * on. transform + box-shadow + border-color all interpolate together
   * for a coherent material response. */
  transition:
    transform var(--motion-base) var(--ease-liquid),
    box-shadow var(--motion-base) var(--ease-liquid),
    border-color var(--motion-base) var(--ease-liquid),
    color var(--motion-base) var(--ease-liquid);
}
.action::after {
  content: "";
  position: absolute;
  top: 0;
  left: 16%;
  right: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 220, 0.58), transparent);
  transition: opacity var(--motion-base) var(--ease-liquid);
}
.action:hover {
  border-color: var(--glass-border-strong);
  color: var(--cream);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 220, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 18px 36px -14px rgba(0, 0, 0, 0.55);
}
.action:active {
  transform: translateY(0) scale(0.98);
  transition-duration: var(--motion-quick);
}
.action svg {
  /* Bumped from 22 → 28px so the icons read as distinct
   * design elements, not afterthought decorations. */
  width: 28px;
  height: 28px;
  stroke-width: 1.6;
  color: var(--amber);
  /* Soft Amber Glow drop-shadow — feels lit-from-within without the
   * earlier vivid-orange halo. */
  filter: drop-shadow(0 0 6px rgba(212, 165, 116, 0.28));
  transition:
    transform var(--motion-base) var(--ease-spring),
    filter var(--motion-base) var(--ease-liquid);
}
.action:hover svg {
  transform: translateY(-2px) scale(1.06);
  filter: drop-shadow(0 0 10px rgba(212, 165, 116, 0.42));
}
/* The Expert Purohits card uses Misty Sage as a quiet accent —
 * distinct from the three Amber Glow siblings without breaking the
 * earth-toned palette. */
.action.is-accent svg {
  color: var(--sage);
  filter: drop-shadow(0 0 6px rgba(122, 132, 113, 0.3));
}
.action.is-accent:hover svg {
  filter: drop-shadow(0 0 10px rgba(122, 132, 113, 0.45));
}

/* ── Form card ──────────────────────────────────────────────── */
.form-card {
  padding: 1.8rem 1.5rem 1.5rem;
  margin-top: 1.2rem;
}
.form-card h2 { margin: 0 0 0.3rem; line-height: 1.1; }
.form-card .sub {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--cream-mute);
  margin: 0 0 1.6rem;
  max-width: 56ch;
}

form { display: grid; gap: 0.85rem; }
.row {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) {
  .row { grid-template-columns: 1fr; }
}
label { display: flex; flex-direction: column; gap: 0.35rem; }
label.full { grid-column: 1 / -1; }
label > span {
  font-size: 0.82rem;
  color: var(--cream-mute);
  font-weight: 400;
}

input, select, textarea {
  font: inherit;
  font-family: "Fedra Sans", system-ui, sans-serif;
  color: var(--cream);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.08));
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  width: 100%;
  min-height: 44px; /* WCAG 2.5.5 — touch target */
  transition:
    border-color var(--motion-base) var(--ease-liquid),
    box-shadow var(--motion-base) var(--ease-liquid),
    background var(--motion-base) var(--ease-liquid);
  -webkit-appearance: none;
  appearance: none;
  box-shadow: inset 0 1px 0 rgba(255, 240, 220, 0.06);
}
input::placeholder, textarea::placeholder { color: rgba(168, 159, 144, 0.55); }
input:hover, select:hover, textarea:hover { border-color: rgba(232, 226, 214, 0.24); }
input:focus, select:focus, textarea:focus {
  outline: none;
  /* Amber Glow border + Ember Orange halo on focus — palette's
   * "Buttons, links, key icons" tone applied to the active field. */
  border-color: rgba(212, 165, 116, 0.7);
  background: rgba(0, 0, 0, 0.45);
  box-shadow:
    0 0 0 4px rgba(184, 112, 61, 0.22),
    inset 0 1px 0 rgba(232, 226, 214, 0.1);
}
select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cream-soft) 50%),
    linear-gradient(135deg, var(--cream-soft) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}
select option { background: #14100c; color: var(--cream); }
textarea { resize: vertical; min-height: 110px; }

.submit-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.5rem;
  border-radius: 999px;
  font: inherit;
  font-family: "Fedra Sans", system-ui, sans-serif;
  font-weight: 500;
  color: #1A1714;  /* Deep Charcoal text on warm CTA — high contrast */
  /* Amber Glow → Ember Orange — the palette's "Primary CTAs" tone. */
  background: linear-gradient(180deg, var(--amber) 0%, var(--ember) 100%);
  border: 1px solid rgba(212, 165, 116, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 220, 0.45),
    0 12px 28px -10px rgba(184, 112, 61, 0.55);
  cursor: pointer;
  min-height: 44px;
  transition:
    transform var(--motion-base) var(--ease-spring),
    filter var(--motion-base) var(--ease-liquid),
    box-shadow var(--motion-base) var(--ease-liquid);
}
button[type="submit"] svg {
  width: 16px;
  height: 16px;
  transition: transform var(--motion-base) var(--ease-spring);
}
button[type="submit"]:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.06) saturate(108%);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 220, 0.55),
    0 22px 42px -14px rgba(184, 112, 61, 0.65);
}
button[type="submit"]:hover:not(:disabled) svg { transform: translateX(2px); }
button[type="submit"]:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
  transition-duration: var(--motion-quick);
}
button[type="submit"]:disabled { opacity: 0.55; cursor: progress; }

.reassure {
  font-size: 0.82rem;
  color: var(--cream-mute);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.reassure svg { width: 14px; height: 14px; color: var(--cream-mute); }

#formStatus { margin: 0.4rem 0 0; font-size: 0.92rem; }
/* Success → Misty Sage (palette's "badges" tone reads as quiet
 * confirmation). Error → Ember Orange (warm warning, in-palette). */
#formStatus.ok {
  color: #B5C0A8;
  background: rgba(122, 132, 113, 0.14);
  border: 1px solid rgba(122, 132, 113, 0.32);
  padding: 0.7rem 0.95rem;
  border-radius: 14px;
}
#formStatus.err {
  color: #E8C5A8;
  background: rgba(184, 112, 61, 0.12);
  border: 1px solid rgba(184, 112, 61, 0.32);
  padding: 0.7rem 0.95rem;
  border-radius: 14px;
}

/* ── Bottom tabbar (decorative) ─────────────────────────────── */
.tabbar {
  /* Centered via a flex parent (`.tabbar-wrap`) instead of the
   * position:relative + left:50% + transform:translateX(-50%) trick
   * which can push a hair past viewport on narrow phones and cause
   * horizontal scroll. */
  margin: 2rem auto 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 240, 220, 0.14), rgba(255, 240, 220, 0.02) 50%, transparent),
    var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(30px) saturate(200%) brightness(108%);
  backdrop-filter: blur(30px) saturate(200%) brightness(108%);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 220, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 18px 40px -18px rgba(0, 0, 0, 0.55);
  max-width: 100%;
  overflow: hidden;
}
/* Centering wrapper for the inline tabbar — keeps it horizontally
 * centered without any transform tricks. */
.tabbar-wrap {
  display: flex;
  justify-content: center;
  max-width: 100%;
}
.tabbar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 220, 0.6), transparent);
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-radius: 14px;
  border: 1px solid transparent;
  color: var(--cream-soft);
  font-size: 0.88rem;
  text-decoration: none;
  cursor: pointer;
  min-height: 40px;
  transition:
    background var(--motion-base) var(--ease-liquid),
    color var(--motion-base) var(--ease-liquid),
    border-color var(--motion-base) var(--ease-liquid),
    transform var(--motion-quick) var(--ease-spring);
}
.tab:hover {
  color: var(--cream);
  background: rgba(255, 240, 220, 0.06);
  border-color: var(--glass-border);
}
.tab:active { transform: scale(0.97); }
.tab.primary {
  background: linear-gradient(180deg, rgba(255, 240, 220, 0.1), rgba(255, 240, 220, 0.03));
  border-color: var(--glass-border-strong);
  color: var(--cream);
}
.tab svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.5;
  transition: transform var(--motion-base) var(--ease-spring);
}
.tab:hover svg { transform: translateY(-1px); }
.tab-label {
  display: inline-block;
  white-space: nowrap;
}
/* On narrow phones, the bottom tray has 4 items — collapse labels to
 * icon-only so the pill never crowds the viewport edge. On screens
 * where the labels DO fit, they stay visible (better discoverability). */
@media (max-width: 480px) {
  .tab { padding: 0.6rem 0.85rem; gap: 0.4rem; font-size: 0.82rem; }
  .tabbar { gap: 0.3rem; padding: 0.45rem; }
}
@media (max-width: 380px) {
  .tab-label { display: none; }
  .tab { padding: 0.65rem 0.7rem; }
}

/* ── Footer ─────────────────────────────────────────────────── */
footer {
  padding: 1.6rem 1.2rem 2rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--cream-mute);
}
footer a { color: var(--cream-soft); border-color: rgba(214, 203, 182, 0.35); }
footer a:hover { color: var(--cream); border-color: var(--cream); }

/* ── Legal page ─────────────────────────────────────────────── */
.legal {
  max-width: 760px;
  margin: 1rem auto 0;
  padding: 1rem 1.2rem 3rem;
  position: relative;
  z-index: 2;
}
.legal .back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  margin-bottom: 1.4rem;
  color: var(--cream-soft);
  border: 1px solid var(--glass-border);
  background:
    linear-gradient(180deg, rgba(255, 240, 220, 0.08), transparent),
    var(--glass-bg);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  padding: 0.55rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition:
    color var(--motion-base) var(--ease-liquid),
    border-color var(--motion-base) var(--ease-liquid),
    transform var(--motion-base) var(--ease-spring);
}
.legal .back:hover {
  color: var(--cream);
  border-color: var(--glass-border-strong);
  transform: translateX(-2px);
}
.legal-card { padding: 2rem 1.6rem; }
.legal h1 { margin-bottom: 0.3rem; line-height: 1.06; }
.legal .updated {
  color: var(--cream-mute);
  font-size: 0.88rem;
  margin-bottom: 1.8rem;
}
.legal h2 {
  margin-top: 2.4rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--glass-border);
}
.legal h3 { margin-top: 1.6rem; color: var(--cream); }
/* Long-form reading needs more relaxed line-height + measured
 * line-length. UIPro typography rule: body 1.5-1.75 line-height,
 * 65-75 chars per line. */
.legal p, .legal li {
  color: var(--cream-soft);
  line-height: 1.72;
  max-width: 66ch;
}
.legal ul, .legal ol { padding-left: 1.3rem; max-width: 66ch; }
.legal li { margin-bottom: 0.45rem; }
.legal a { transition: color var(--motion-base) var(--ease-liquid), border-color var(--motion-base) var(--ease-liquid); }

/* ── Mobile tuning ──────────────────────────────────────────── */
@media (max-width: 600px) {
  main { padding: 0.6rem 1rem 2.4rem; }
  .topbar { padding: 1rem 1rem 0.4rem; }
  .hero { padding: 1.5rem 1.2rem 1.3rem; }
  .form-card { padding: 1.5rem 1.2rem 1.3rem; }
  .legal-card { padding: 1.6rem 1.2rem; }
  .actions { grid-template-columns: repeat(2, 1fr); }
  .glass { border-radius: 22px; }
  /* Lighter blur on small viewports — preserves the glass look but
   * keeps GPU cost manageable on older phones. */
  .glass,
  .action,
  .tabbar,
  .chip,
  .wordmark .mark {
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
  }
  /* Inputs at 16px keep iOS from zooming on focus. */
  input, select, textarea { font-size: 16px; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}