/* ============================================================
   Sawamani Online — Shared Design System
   Used by every page. Mirrors the homepage design language.
   ============================================================ */

/* ─── Design Tokens ─── */
:root {
  /* Light-only, stated outright. Brave and Chrome will auto-generate a dark
     theme for any site that has not said otherwise, and a generic inverter
     applied to this palette is worse than no dark mode: cream turns to mud,
     the brown text washes out, and the saffron stops meaning anything. `only`
     is the part that matters — plain `light` still permits forced dark.
     Every page also carries <meta name="color-scheme" content="only light">,
     which is what prevents a flash of darkened content before this file has
     been parsed. This is the declaration, not the belt and braces. */
  color-scheme: only light;

  --saffron:      #E8720C;
  --saffron-deep: #C45A00;
  --marigold:     #F5A623;
  --gold:         #FFD166;
  --cream:        #FFFBF0;
  --warm-white:   #FFF8ED;
  --deep:         #3D1400;
  --deep-mid:     #5C2500;
  --dark-section: #1E0A00;
  --text-dark:    #2D0F00;
  --text-mid:     #6B3600;
  --text-light:   #A06020;
  --border:       #F0D4A8;
  --shadow:       0 4px 24px rgba(61,20,0,0.10);
  --shadow-hover: 0 12px 40px rgba(232,114,12,0.22);
  --radius:       16px;
  --radius-sm:    10px;
  --transition:   0.25s ease;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Available to assistive technology, not on screen. Clip rather than
   display:none, which would take the text out of the accessibility tree too. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Icon sprite (assets/icons.svg), used as
   <svg class="ico" aria-hidden="true"><use href="/assets/icons.svg#i-name"/></svg>.
   Sized in em so one definition works in the announcement bar, a button and the
   footer alike; colour comes from currentColor, so it is never set here. */
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex-shrink: 0; }
/* Holders built around emoji never set a colour, because the emoji carried its
   own. A currentColor icon inside one would inherit --deep and come out
   near-black, so they take the same saffron .feature-icon-wrap already uses. */
.ts-icon .ico, .way-icon .ico, .review-avatar .ico, .svc-icon .ico,
.ss-ico .ico, .trc-plus .ico, .hero-proof-icon .ico,
.step-icon .ico, .info-icon .ico, .account-head strong .ico,
h3 .ico, .page-hero p .ico { color: var(--saffron-deep); }
/* The step badges sit on the dark band, where saffron-deep goes muddy.
   Marigold is already their border and step-number colour. */
.hiw-badge .ico { color: var(--marigold); }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Poppins', sans-serif;
  background: var(--cream);
  color: var(--text-dark);
  line-height: 1.6;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ─── Typography ─── */
.section-label {
  display: inline-block;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--saffron); margin-bottom: 12px;
}
h1, h2, h3 { font-family: 'Tiro Devanagari Sanskrit', serif; line-height: 1.2; }
h2.section-heading { font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--deep); margin-bottom: 16px; }
.section-sub { font-size: 1.05rem; color: var(--text-mid); max-width: 580px; margin: 0 auto 48px; }

/* ─── Layout ─── */
.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.text-center { text-align: center; }
section { padding: 80px 0; }

/* ─── Announcement Bar ─── */
#ann-bar {
  background: var(--deep); color: var(--gold);
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em;
  text-align: center; padding: 10px 16px;
}
#ann-bar span { color: #fff; }

/* ─── Header ─── */
#site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,251,240,0.88);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--transition);
}
#site-header.scrolled { box-shadow: 0 2px 20px rgba(61,20,0,0.12); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 16px; }
.logo-wrap { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo-wrap img { height: 52px; width: auto; }
.logo-text { display: flex; flex-direction: column; gap: 6px; line-height: 1.1; }
.logo-text strong { font-family: 'Tiro Devanagari Sanskrit', serif; font-size: 1.32rem; color: var(--deep); }
.logo-text small { font-size: 0.76rem; letter-spacing: 0.1em; color: var(--saffron); text-transform: uppercase; }
nav ul { display: flex; align-items: center; gap: 8px; }
nav ul li a {
  padding: 7px 14px; border-radius: 40px;
  font-size: 0.9rem; font-weight: 500; color: var(--text-mid);
  transition: background var(--transition), color var(--transition);
}
nav ul li a:hover, nav ul li a.active { background: rgba(232,114,12,0.1); color: var(--saffron); }
.header-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ─── Buttons ─── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--saffron); color: #fff; font-weight: 600; font-size: 0.88rem;
  padding: 10px 20px; border-radius: 40px;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 16px rgba(232,114,12,0.3);
}
.btn-primary:hover { background: var(--saffron-deep); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(232,114,12,0.4); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--saffron); font-weight: 600; font-size: 0.88rem;
  padding: 9px 20px; border-radius: 40px; border: 2px solid var(--saffron);
  transition: background var(--transition), color var(--transition);
}
.btn-secondary:hover { background: var(--saffron); color: #fff; }
.btn-lg { font-size: 1rem; padding: 14px 30px; }
.btn-cta-wa {
  display: inline-flex; align-items: center; gap: 10px;
  background: #25D366; color: #fff; font-weight: 700; font-size: 1rem;
  padding: 14px 30px; border-radius: 50px;
  box-shadow: 0 6px 28px rgba(37,211,102,0.3);
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn-cta-wa:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(37,211,102,0.4); }

/* Secondary "ask a question" affordance under a primary CTA. It is a button
   now, but deliberately a small one that hugs its label: it sits directly
   under a full-width Add to Cart, and when the two were the same size the
   WhatsApp route cannibalised the cart. Size is what keeps the hierarchy, not
   colour.
   Note the contrast: white on brand #25D366 is only 1.98:1. It matches
   .btn-cta-wa elsewhere on the site, so the pack is at least consistent, but
   #0E7A40 would reach 5.42:1 if this ever needs to pass AA. */
/* The question sits in front of the button and wraps above it when the card is
   too narrow to hold both on one line. */
.order-card-ask-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 9px; margin: 0;
  font-size: 0.82rem; line-height: 1.4; color: var(--text-mid); text-align: center;
}
.order-card-ask {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  align-self: center;
  background: #25D366; color: #fff;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 5px 16px; border-radius: 40px;
  transition: background var(--transition), transform var(--transition);
}
.order-card-ask svg { flex-shrink: 0; color: currentColor; }
.order-card-ask:hover { background: #1DB954; transform: translateY(-1px); }
.order-card-hours { font-size: 0.76rem; color: var(--text-light); text-align: center; margin: 0; }
.order-card-authnote { font-size: 0.78rem; color: var(--text-light); text-align: center; margin: -4px 0 0; }
/* Where the prasad is going, on the order-received page. */
.os-deliver {
  margin-top: 14px; padding: 16px 20px; text-align: left;
  background: var(--warm-white); border: 1px solid var(--border); border-radius: 12px;
}
.os-deliver p { margin: 0; }
.os-deliver-label { font-size: 0.78rem; color: var(--text-light); margin-bottom: 6px !important; }
.os-deliver-who { font-weight: 600; color: var(--deep); font-size: 0.92rem; }
.os-deliver-where { color: var(--text-mid); font-size: 0.9rem; line-height: 1.5; }
.os-deliver-note { font-size: 0.78rem; color: var(--text-light); margin-top: 10px !important; }

#co-prefill-note {
  margin: -4px 0 16px; font-size: 0.82rem; color: var(--text-mid);
}
.auth-resume-note {
  max-width: 920px; margin: 0 auto 22px;
  padding: 13px 18px; border-radius: var(--radius-sm);
  background: rgba(232,114,12,0.08); border: 1px solid rgba(232,114,12,0.22);
  color: var(--saffron-deep); font-size: 0.9rem; font-weight: 600; text-align: center;
}

/* Running total for the 1 kg / 1-2 kg box split, injected by product.js.
   A confirmed split gets a green tick but keeps neutral body text, so only the
   error state is loud. */
.pack-note {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 0.8rem; line-height: 1.45; color: var(--text-mid); margin: -6px 0 0;
}
/* A quiet line under a single field, explaining a constraint the field itself
   can only express by refusing input — same size and colour as .pack-note,
   without the icon or its states. */
.field-note {
  font-size: 0.8rem; line-height: 1.45; color: var(--text-mid); margin: 7px 0 0;
}
.pack-note .pack-icon { flex-shrink: 0; font-weight: 700; }
.pack-note.is-ok .pack-icon { color: #0E7A40; }
.pack-note.is-invalid, .pack-note.is-invalid .pack-icon { color: #b0301c; }

/* ─── Hamburger + Mobile Drawer ─── */
/* 44px box around a 26x14 stack of bars. The bars are unchanged; the padding
   is what carries the touch target, which was 26x18 — under the 24x24 floor in
   WCAG 2.5.8, on the one control that opens navigation on every phone. */
.hamburger { display: none; flex-direction: column; justify-content: space-between; width: 44px; height: 44px; padding: 15px 9px; flex-shrink: 0; }
.hamburger span { display: block; height: 2px; background: var(--deep); border-radius: 2px; }
/* The panel slides in from the right, the scrim fades with it. display:none
   cannot be transitioned, so the drawer stays laid out and the panel is parked
   offscreen instead. visibility is what keeps it untabbable and unclickable
   while closed; its own transition is delayed by the slide duration so the
   panel finishes leaving before the drawer is taken out of the page. */
#mobile-drawer {
  position: fixed; inset: 0; z-index: 999; display: flex;
  visibility: hidden; transition: visibility 0s linear 0.32s;
}
#mobile-drawer.open { visibility: visible; transition: visibility 0s; }
.drawer-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.45);
  opacity: 0; transition: opacity 0.32s ease;
}
#mobile-drawer.open .drawer-overlay { opacity: 1; }
.drawer-panel {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(320px, 85vw); background: var(--cream);
  padding: 28px 24px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
#mobile-drawer.open .drawer-panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  #mobile-drawer, .drawer-overlay, .drawer-panel { transition-duration: 0s; transition-delay: 0s; }
}
.drawer-close { align-self: flex-end; font-size: 1.5rem; color: var(--text-mid); margin-bottom: 16px; }
.drawer-panel a { padding: 12px 8px; font-size: 1rem; font-weight: 500; color: var(--text-dark); border-bottom: 1px solid var(--border); display: block; }

/* Account entries in the drawer, shown only where the header button is hidden.
   Repeating the panel's flex column keeps them on the same 8px rhythm as the
   nav links; api.js sets data-auth on every .account-wrap, so this block
   switches between the signed-out and signed-in sets with the header one. */
.drawer-account,
.drawer-account .auth-out,
.drawer-account .auth-in { display: flex; flex-direction: column; gap: 8px; }
.drawer-account a.acc-logout { color: #b23a1e; }
@media (min-width: 601px) { .drawer-account { display: none; } }

/* ─── Rate card on temple pages ───
   The prices product.js would otherwise only fetch at runtime. Scrolls
   horizontally on phones rather than shrinking the type: these are numbers
   people compare, so legibility beats fitting the viewport. */
.rate-note { font-size: 0.94rem; line-height: 1.75; color: var(--text-mid); max-width: 68ch; margin: 0 auto; }
.rate-note-after { margin-top: 18px; }
.rate-table {
  width: 100%; border-collapse: collapse; margin: 0 auto;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
}
.rate-table caption { text-align: left; }
.rate-table th, .rate-table td { padding: 12px 16px; text-align: right; font-size: 0.92rem; }
.rate-table thead th {
  background: var(--warm-white); color: var(--deep);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.rate-table th:first-child, .rate-table td:first-child { text-align: left; }
.rate-table tbody th { font-weight: 500; color: var(--text-dark); }
.rate-table tbody td { color: var(--text-mid); font-variant-numeric: tabular-nums; }
.rate-table tbody td:last-child { color: var(--deep); font-weight: 600; }
.rate-table tbody tr + tr th, .rate-table tbody tr + tr td { border-top: 1px solid var(--border); }
@media (max-width: 600px) {
  .rate-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rate-table th, .rate-table td { padding: 10px 12px; white-space: nowrap; }
}

/* ─── Page Hero / Breadcrumb ─── */
.page-hero {
  background:
    radial-gradient(ellipse 70% 80% at 80% 0%, rgba(245,166,35,0.16) 0%, transparent 60%),
    var(--warm-white);
  padding: 64px 0 56px; text-align: center; position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.page-hero .mandala-wrap {
  position: absolute; right: -80px; top: -80px; width: 380px; height: 380px;
  pointer-events: none;
}
.page-hero .mandala-wrap .mandala-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.10;
  animation: spin 90s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); color: var(--deep); margin-bottom: 14px; position: relative; z-index: 2; }
.page-hero > p { font-size: 1.08rem; color: var(--text-mid); max-width: 620px; margin: 0 auto; position: relative; z-index: 2; }
/* Hero that carries its own content instead of sitting above a separate
   section. Saves the hero's 56px bottom padding plus the next section's 80px
   top padding, which otherwise puts 136px and a rule between a heading and
   the form it introduces. */
.page-hero.hero-with-content { padding-bottom: 64px; }
/* The body is tagged explicitly rather than matched as any direct .container,
   because some heroes wrap their own title in one and it must stay centred. */
.page-hero.hero-with-content > .hero-body {
  position: relative; z-index: 2; margin-top: 36px;
}
.page-hero.hero-with-content > .hero-body:not(.text-center) { text-align: left; }
.breadcrumb { font-size: 0.82rem; color: var(--text-light); margin-bottom: 18px; position: relative; z-index: 2; }
.breadcrumb a { color: var(--saffron); }
.breadcrumb a:hover { text-decoration: underline; }

/* ─── How It Works — enhanced hero ─── */
.hiw-hero {
  padding: 76px 0 68px;
  background:
    radial-gradient(ellipse 60% 70% at 82% -5%, rgba(245,166,35,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 55% 65% at 12% 105%, rgba(232,114,12,0.12) 0%, transparent 60%),
    var(--warm-white);
}
.hiw-hero-intro { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: 0 24px; }
.hiw-hero-eyebrow, .about-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 18px; border-radius: 999px;
  background: rgba(232,114,12,0.10); border: 1px solid var(--border);
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--saffron-deep); margin-bottom: 22px;
}
.hiw-hero h1 { margin-bottom: 16px; letter-spacing: -0.5px; }
.hiw-hero-accent, .about-hero-accent {
  color: var(--saffron-deep);
  background: linear-gradient(120deg, var(--saffron), var(--marigold));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* Enhanced step cards inside the hero — connected flow */
.hiw-hero-steps { position: relative; z-index: 2; margin-top: 52px; gap: 20px; }
.hiw-hero-steps .step-card {
  position: relative;
  border-top: 3px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--saffron), var(--marigold)) border-box;
  border: 1px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition);
}
.hiw-hero-steps .step-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(61,20,0,0.14);
}
/* Flow arrow connecting each card to the next */
.hiw-hero-steps .step-card:not(:last-child)::after {
  content: '\2192'; position: absolute; right: -16px; top: 50%;
  transform: translateY(-50%); z-index: 3;
  font-size: 1.4rem; color: var(--saffron); font-weight: 700;
}
.hiw-hero-steps .step-num {
  background: linear-gradient(145deg, var(--saffron), var(--saffron-deep));
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px rgba(196,90,0,0.28);
}
.hiw-hero-steps .step-icon { filter: drop-shadow(0 3px 6px rgba(196,90,0,0.18)); }
.hiw-hero-steps .step-card h3 { font-family: 'Tiro Devanagari Sanskrit', serif; font-size: 1.1rem; }

@media (max-width: 900px) {
  .hiw-hero-steps .step-card:not(:last-child)::after { display: none; }
}

/* ─── Trust Strip (dark) ─── */
.trust-strip { background: var(--deep); padding: 30px 0; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.08); }
.trust-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 18px; background: var(--deep); text-align: center; }
.trust-item .t-icon { font-size: 1.8rem; }
.trust-item .t-num { font-family: 'Tiro Devanagari Sanskrit', serif; font-size: 1.8rem; font-weight: 700; color: var(--gold); line-height: 1; }
.trust-item .t-label { font-size: 0.8rem; color: rgba(255,255,255,0.65); }

/* ─── Cards / Grids ─── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.card-img { width: 100%; height: 220px; object-fit: cover; transition: transform 0.4s; }
.card:hover .card-img { transform: scale(1.04); }
.card-body { padding: 20px 22px 24px; }
.card-tag {
  display: inline-block; background: rgba(232,114,12,0.1); color: var(--saffron);
  font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 20px; margin-bottom: 8px; letter-spacing: 0.05em;
}
.card h3 { font-size: 1.05rem; color: var(--deep); margin-bottom: 6px; }
.card p { font-size: 0.85rem; color: var(--text-mid); line-height: 1.55; }
.card .card-link { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--saffron); }
.card .card-link:hover { text-decoration: underline; }
.card .card-price { display: block; margin-top: 10px; font-weight: 600; color: var(--deep); font-size: 0.92rem; }

/* ─── Prose (content pages) ─── */
.prose { max-width: 820px; margin: 0 auto; }
.prose h2 { font-size: 1.6rem; color: var(--deep); margin: 40px 0 14px; }
.prose h3 { font-size: 1.2rem; color: var(--saffron-deep); margin: 28px 0 10px; }
.prose p { font-size: 1rem; color: var(--text-mid); margin-bottom: 16px; line-height: 1.8; }
.prose ul.bullets { margin: 0 0 20px; padding-left: 0; }
.prose ul.bullets li {
  position: relative; padding-left: 30px; margin-bottom: 12px; color: var(--text-mid); line-height: 1.7;
}
.prose ul.bullets li::before { content: "\1FA94"; position: absolute; left: 0; top: 0; }

/* ─── Feature items (why-us style) ─── */
.feature-item { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 26px; }
.feature-icon-wrap {
  width: 52px; height: 52px; border-radius: 14px; background: rgba(232,114,12,0.1);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0;
  color: var(--saffron-deep);
}
.feature-icon-wrap svg { width: 26px; height: 26px; }
.feature-text h3 { font-size: 1rem; color: var(--deep); margin-bottom: 5px; }
.feature-text p { font-size: 0.9rem; color: var(--text-mid); line-height: 1.6; }

/* ─── Steps ─── */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.step-card { padding: 34px 22px 30px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); text-align: center; box-shadow: var(--shadow); }
.step-num {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(232,114,12,0.12); border: 2px solid var(--saffron);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Tiro Devanagari Sanskrit', serif; font-size: 1.3rem; font-weight: 700;
  color: var(--saffron-deep); margin: 0 auto 18px;
}
.step-icon { font-size: 2rem; margin-bottom: 12px; }
.step-card h3 { font-size: 1rem; color: var(--deep); margin-bottom: 10px; }
.step-card p { font-size: 0.85rem; color: var(--text-mid); line-height: 1.6; }

/* ─── How It Works — detailed timeline ─── */
.hiw-detail {
  position: relative;
  display: flex; flex-direction: column; gap: 34px;
  padding-left: 12px;
}
/* Vertical connecting line through the badges */
.hiw-detail::before {
  content: ''; position: absolute; top: 30px; bottom: 30px; left: 42px;
  width: 2px;
  background: linear-gradient(to bottom, var(--saffron) 0%, var(--marigold) 50%, var(--gold) 100%);
  opacity: 0.5;
}
.hiw-detail-step {
  position: relative; z-index: 1;
  display: flex; gap: 28px; align-items: flex-start;
}
.hiw-detail-num {
  flex: 0 0 auto;
  width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(145deg, var(--saffron), var(--saffron-deep));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Tiro Devanagari Sanskrit', serif; font-size: 1.7rem; font-weight: 700;
  color: #fff;
  box-shadow: 0 8px 22px rgba(196,90,0,0.28);
  border: 4px solid var(--warm-white);
  outline: 1px solid var(--border);
}
.hiw-detail-body {
  flex: 1;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 30px 24px; box-shadow: var(--shadow);
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
/* Little arrow connecting the card back to the timeline */
.hiw-detail-body::before {
  content: ''; position: absolute; left: -9px; top: 24px;
  width: 16px; height: 16px; background: #fff;
  border-left: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}
.hiw-detail-body:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(61,20,0,0.12);
  border-color: var(--saffron);
}
.hiw-detail-body h3 {
  font-family: 'Tiro Devanagari Sanskrit', serif;
  font-size: 1.3rem; color: var(--deep); margin-bottom: 10px;
}
.hiw-detail-body p { font-size: 0.94rem; color: var(--text-mid); line-height: 1.75; margin-bottom: 16px; }
.hiw-detail-points {
  list-style: none; padding: 16px 0 0; margin: 0;
  border-top: 1px dashed var(--border);
  display: flex; flex-direction: column; gap: 9px;
}
.hiw-detail-points li {
  position: relative; padding-left: 28px;
  font-size: 0.88rem; color: var(--text-dark); line-height: 1.55;
}
.hiw-detail-points li::before {
  content: '\2713'; position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(232,114,12,0.12); color: var(--saffron-deep);
  font-size: 0.7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 600px) {
  .hiw-detail { padding-left: 0; gap: 26px; }
  .hiw-detail::before { display: none; }
  .hiw-detail-step { flex-direction: column; gap: 14px; align-items: stretch; }
  .hiw-detail-num { width: 52px; height: 52px; font-size: 1.4rem; }
  .hiw-detail-body::before { display: none; }
}

/* ─── FAQ Accordion ─── */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 14px; overflow: hidden; }
.faq-q {
  width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 24px; font-size: 1rem; font-weight: 600; color: var(--deep); font-family: 'Poppins', sans-serif;
}
.faq-q .faq-icon { flex-shrink: 0; color: var(--saffron); font-size: 1.3rem; transition: transform var(--transition); }
.faq-item.open .faq-q .faq-icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-a-inner { padding: 0 24px 20px; color: var(--text-mid); font-size: 0.94rem; line-height: 1.75; }

/* ─── Reviews ─── */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card { background: #fff; border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px; border-top: 3px solid var(--marigold); }
.review-stars { color: var(--marigold); font-size: 1rem; letter-spacing: 2px; }
.review-text { font-size: 0.9rem; color: var(--text-mid); line-height: 1.7; font-style: italic; }
.review-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review-avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(232,114,12,0.15); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.review-name { font-weight: 600; font-size: 0.88rem; color: var(--deep); }
.review-from { font-size: 0.75rem; color: var(--text-light); }

/* ─── Forms ─── */
.form-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 36px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--deep); margin-bottom: 7px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px; font-family: inherit; font-size: 0.92rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--cream); color: var(--text-dark);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--saffron); box-shadow: 0 0 0 3px rgba(232,114,12,0.12); background: #fff;
}
.form-group textarea { resize: vertical; min-height: 120px; }

/* Phone entry: a typeable country-code box welded to the number input, built
   by api.js around every tel field. */
.phone-field { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
/* Wide enough for "+9999" and no wider, so the number keeps the rest of the
   row. Centred, which also keeps the short code evenly spaced in its box. */
.phone-field .phone-cc {
  flex: 0 0 auto; width: 76px; text-align: center;
  padding-left: 8px; padding-right: 8px;
}
/* The basis is a floor, not a target: in a cell too narrow for both, the
   number drops to its own line instead of being squeezed to a few pixels. */
.phone-field input:not(.phone-cc) { flex: 1 1 120px; min-width: 0; }

/* iOS Safari zooms the page in whenever a focused field is under 16px, and it
   does not zoom back out afterwards — so checkout and sign-in were left
   scrolled sideways mid-form. 16px is the threshold, not a design choice. */
@media (max-width: 600px) {
  .form-group input, .form-group select, .form-group textarea,
  input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
  input[type="date"], input[type="number"], input[type="search"], select, textarea {
    font-size: 16px;
  }
}

/* Date fields need their own block because Safari treats them as a native
   widget that sizes itself, so neither the width nor the height the rest of
   the form uses applies. On an iPhone the offering date was wider than every
   other control; stripping the native appearance fixed that and then left the
   box shorter than its neighbours, because an empty date input has no content
   to give it height. Both dimensions have to be stated outright.
   A grid item is min-width:auto, which is what let the overflow escape. */
.form-row > .form-group { min-width: 0; }
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  /* Anchor for the placeholder below. */
  position: relative;
  /* Matches what the selects and number fields resolve to: one line of text
     plus this rule set's 12px padding and 1.5px border, top and bottom. Written
     as a calc so it tracks the 16px font bump at the mobile breakpoint instead
     of freezing today's 51px, and as height rather than min-height because the
     native box is 2px taller than everything around it even in Chrome. */
  height: calc(1.5em + 27px);
}
/* Safari centres the value in whatever width is left and adds margins of its
   own, so the date sits off-centre against left-aligned labels. */
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}
/* An empty date input renders nothing at all in Safari — no dd/mm/yyyy, no
   hint that it is even tappable, which reads as a broken field rather than an
   empty one. Chrome and Firefox draw the format themselves, so this is scoped
   to iOS: -webkit-touch-callout is supported nowhere else, and every browser
   on iOS is WebKit underneath and shares the behaviour. Unscoped, it lands a
   second dd/mm/yyyy directly on top of Chrome's own.
   `data-empty` comes from api.js: CSS cannot ask an input whether it holds a
   value, and the date field on the temples page is optional, so :invalid would
   not have caught it. Positioned out of flow — as a normal child it stacks
   against the empty value box and the field grows a line taller. */
@supports (-webkit-touch-callout: none) {
  input[type="date"][data-empty]::before {
    content: attr(data-format);
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    pointer-events: none;
  }
  input[type="date"][data-empty]:focus::before { content: none; }
}

/* Show/hide password toggle (injected by api.js around every password input) */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; }
.pw-toggle {
  position: absolute; top: 0; right: 0; height: 100%; width: 42px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--text-mid); transition: color var(--transition);
}
.pw-toggle:hover { color: var(--saffron); }
.pw-toggle:focus-visible { outline: 2px solid var(--saffron); outline-offset: -2px; border-radius: var(--radius-sm); }
.pw-toggle svg { width: 20px; height: 20px; display: block; }
.pw-toggle .icon-hide { display: none; }
.pw-toggle[aria-pressed="true"] .icon-show { display: none; }
.pw-toggle[aria-pressed="true"] .icon-hide { display: block; }

/* ─── Contact info cards ─── */
.info-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; text-align: center; }
.info-card .info-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: rgba(232,114,12,0.1); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.info-card h3 { font-size: 1rem; color: var(--deep); margin-bottom: 8px; }
.info-card p, .info-card a { font-size: 0.9rem; color: var(--text-mid); line-height: 1.6; }
.info-card a:hover { color: var(--saffron); }

/* Contact page. With no enquiry form, WhatsApp is the only interactive way to
   reach us, so it gets a full-width band instead of a sidebar card. */
.contact-primary {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 28px;
  background: var(--deep); color: #fff;
  border-radius: var(--radius); padding: 32px 36px; text-align: left;
}
.contact-primary h2 {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.35rem; color: var(--gold); margin-bottom: 8px;
}
.contact-primary p {
  margin: 0; max-width: 54ch;
  color: rgba(255,255,255,0.78); font-size: 0.95rem; line-height: 1.65;
}
.contact-primary .contact-hours {
  display: block; margin-top: 10px;
  font-size: 0.84rem; color: rgba(255,255,255,0.52);
}
@media (max-width: 780px) {
  .contact-primary { padding: 26px; }
  .contact-primary .btn-cta-wa { width: 100%; justify-content: center; }
}

/* ─── Product page ─── */
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.product-gallery img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.product-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 20px; }
.product-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(232,114,12,0.08); color: var(--saffron-deep); font-size: 0.78rem; font-weight: 600; padding: 6px 12px; border-radius: 30px; }
.product-price { font-family: 'Tiro Devanagari Sanskrit', serif; font-size: 2rem; color: var(--saffron-deep); font-weight: 700; margin: 8px 0 4px; }
.product-price small { font-size: 0.85rem; color: var(--text-light); font-weight: 400; display: block; font-family: 'Poppins', sans-serif; }
.product-desc { color: var(--text-mid); line-height: 1.8; margin: 18px 0; }
.product-options { display: flex; flex-direction: column; gap: 14px; margin: 22px 0; }

/* Live price breakdown panel (rendered by product.js) */
.price-panel { background: var(--cream, #fff8f0); border: 1px solid #f0e6df; border-radius: var(--radius-sm); padding: 16px 18px; }
.price-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.95rem; color: var(--text-mid); padding: 5px 0; }
.price-row span:last-child { font-variant-numeric: tabular-nums; }

/* All-in total leads; the cost split sits behind a disclosure. */
.pp-headline { display: flex; flex-direction: column; gap: 2px; }
.pp-headline .pp-total {
  font-size: 1.7rem; font-weight: 700; line-height: 1.15;
  color: var(--saffron); font-variant-numeric: tabular-nums;
}
.pp-headline .pp-rate { font-size: 0.82rem; color: var(--text-mid); }
.pp-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; margin: 0; padding: 9px 0 0;
  font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--deep); cursor: pointer;
}
.pp-toggle:hover { color: var(--saffron); }
.pp-chev { font-size: 0.7em; transition: transform var(--transition); }
.pp-toggle[aria-expanded="true"] .pp-chev { transform: rotate(180deg); }
.pp-details { margin-top: 9px; padding-top: 10px; border-top: 1px dashed #e2d4c8; }
.pp-includes { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.pp-includes li {
  position: relative; padding-left: 20px;
  font-size: 0.83rem; line-height: 1.45; color: var(--text-mid);
}
.pp-includes li::before { content: "✓"; position: absolute; left: 0; color: #0E7A40; font-weight: 700; }
.pp-details .price-row { font-size: 0.83rem; padding: 3px 0; }

/* ─── Temple product page: detail + sticky booking card ─── */
.breadcrumb { padding: 18px 0 0; font-size: 0.85rem; color: var(--text-light); }
.breadcrumb a { color: var(--text-mid); }
.breadcrumb a:hover { color: var(--saffron); }
.breadcrumb span { margin: 0 4px; }
.breadcrumb span[aria-current] { color: var(--deep); font-weight: 600; margin: 0; }

.temple-buy { padding-top: 28px; }
.temple-buy-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 36px; align-items: start; }

.temple-photo { margin: 0 0 22px; }
.temple-photo img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
.temple-title { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--deep); margin: 6px 0 0; }
/* Answers "can I afford this?" before the form does. Static value is the
   crawlable one; product.js overwrites it from live prices. */
.temple-from-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin: 14px 0 4px; }
.temple-from-price .tfp-amount { font-size: 1.3rem; font-weight: 700; color: var(--deep); }
.temple-from-price .tfp-note { font-size: 0.85rem; color: var(--text-mid); }


.order-card-wrap { position: sticky; top: 96px; }
.order-card { background: #fff; border: 1px solid #efe3da; border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; margin: 0; }
/* The card is a flex column with its own gap, so the global 18px form-group
   margin doubled the space between every field. The gap is the single source
   of vertical rhythm here; children contribute none of their own. */
.order-card .form-group { margin-bottom: 0; }
.order-card .form-row { gap: 14px; }
.order-card-title { font-size: 1.3rem; color: var(--deep); margin: 0; }
.order-card-sub { font-size: 0.88rem; color: var(--text-mid); margin: -4px 0 0; line-height: 1.55; }
/* A policy note, not a trust badge — quiet weight so it does not compete
   with the CTA above it. */
.order-card-secure { font-size: 0.8rem; color: var(--text-mid); margin: 0; text-align: center; }
.order-card .price-panel { margin-top: 0; }

/* Rating / social proof */
/* Trust list inside the order card */
/* Photo-proof reassurance band */

/* Testimonials */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.testimonial-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.testimonial-card blockquote { margin: 0; color: var(--text-mid); font-size: 0.94rem; line-height: 1.7; font-style: italic; }
.testimonial-card figcaption { color: var(--deep); font-weight: 600; font-size: 0.9rem; }

@media (max-width: 900px) {
  .temple-buy-grid { grid-template-columns: 1fr; gap: 26px; }
  .order-card-wrap { position: static; }
  .testimonial-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
}

/* ─── Gallery ─── */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-grid img { width: 100%; height: 260px; object-fit: cover; border-radius: var(--radius-sm); box-shadow: var(--shadow); transition: transform var(--transition); }
.gallery-grid img:hover { transform: scale(1.03); }

/* ─── CTA band ─── */
.cta-band { background: linear-gradient(135deg, var(--saffron) 0%, var(--marigold) 50%, var(--gold) 100%); padding: 70px 0; text-align: center; position: relative; overflow: hidden; }
.cta-band h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); color: var(--deep); margin-bottom: 14px; }
.cta-band p { font-size: 1.05rem; color: var(--deep-mid); max-width: 520px; margin: 0 auto 32px; opacity: 0.9; }
.cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.btn-cta-main { display: inline-flex; align-items: center; gap: 10px; background: var(--deep); color: var(--gold); font-weight: 700; font-size: 1.05rem; padding: 16px 36px; border-radius: 50px; box-shadow: 0 6px 28px rgba(61,20,0,0.25); transition: transform var(--transition), box-shadow var(--transition); }
.btn-cta-main:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(61,20,0,0.35); }

/* ─── Footer ─── */
#site-footer { background: var(--deep); color: rgba(255,255,255,0.75); }
.footer-top { padding: 64px 0 48px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
/* The footer reuses the header's logo lockup, which was drawn for a light page:
   the temple is outlined in the same brown as --deep, so straight onto the
   footer only about a fifth of it stayed visible. It gets a cream tile instead
   of being inverted — inverting flattens the temple to a silhouette and loses
   the diya and the plates of prasad, which are the point of the mark.
   The name needs lifting for the same reason: the header sets it in --deep. */
.footer-brand .logo-wrap { align-items: center; }
.footer-brand .logo-wrap img {
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  box-sizing: content-box;
}
.footer-brand .logo-text strong { color: var(--cream); }
.footer-brand .logo-text small { color: var(--gold); }
.footer-brand p { font-size: 0.88rem; line-height: 1.7; margin-top: 14px; color: rgba(255,255,255,0.55); }
.footer-brand .footer-contact { margin-top: 16px; font-size: 0.85rem; color: rgba(255,255,255,0.6); line-height: 1.9; }
.footer-brand .footer-contact a:hover { color: var(--gold); }
/* Rows rather than <br />-separated lines, so the icon holders align on one
   edge and long addresses do not reflow underneath them. */
.footer-contact { display: flex; flex-direction: column; gap: 11px; line-height: 1.45; }
.footer-contact .fc-row { display: flex; align-items: center; gap: 11px; }
.footer-contact .chip {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: rgba(255,255,255,0.09); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
}
.footer-contact .chip .ico { width: 15px; height: 15px; }
.footer-col h4 { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a { font-size: 0.88rem; color: rgba(255,255,255,0.55); transition: color var(--transition); }
.footer-col ul a:hover { color: var(--gold); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-bottom span { font-size: 0.8rem; color: rgba(255,255,255,0.35); }
.footer-bottom a { font-size: 0.8rem; color: rgba(255,255,255,0.45); }
.footer-bottom a:hover { color: var(--gold); }

/* ─── Hindi nudge ─── */
/* Offered once to visitors whose browser asks for Hindi and who landed on an
   English page, and only on phones — above 600px the EN/हिं toggle is visible
   in the header, so the bar would be noise rather than help.
   Fixed rather than in flow: it is injected after load, so anything in flow
   would shove the page down under the reader. */
.lang-nudge {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--deep); color: #fff;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.22);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.lang-nudge.show { transform: translateY(0); }
.lang-nudge p { flex: 1; margin: 0; font-size: 0.88rem; line-height: 1.45; }
.lang-nudge .lang-nudge-go {
  flex-shrink: 0; background: var(--saffron); color: #fff;
  padding: 10px 14px; border-radius: 8px; font-weight: 600; font-size: 0.88rem;
  white-space: nowrap;
}
.lang-nudge .lang-nudge-x {
  flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center;
  justify-content: center; font-size: 1.3rem; line-height: 1;
  background: none; border: 0; color: rgba(255,255,255,0.7); cursor: pointer;
}
/* The bar would otherwise sit on top of the WhatsApp and back-to-top buttons.
   Its height is measured rather than assumed — the Hindi line wraps to two
   rows on the narrowest phones. */
body.has-lang-nudge .fab-group { bottom: calc(28px + var(--lang-nudge-h, 0px)); }
@media (prefers-reduced-motion: reduce) { .lang-nudge { transition: none; } }

/* ─── FABs ─── */
.fab-group { position: fixed; bottom: 28px; right: 24px; display: flex; flex-direction: column; gap: 12px; z-index: 90; transition: bottom 0.3s ease; }
.fab { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: 0 4px 20px rgba(0,0,0,0.2); transition: transform var(--transition); }
.fab:hover { transform: scale(1.1); }
.fab-wa { background: #25D366; color: #fff; }
.fab-top { background: var(--saffron); color: #fff; font-size: 1.1rem; }

/* ─── Responsive ─── */
@media (max-width: 1100px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .product-layout { grid-template-columns: 1fr; gap: 28px; }
  .reviews-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  nav ul { display: none; }
  .hamburger { display: flex; }
  .header-cta .btn-primary { display: none; }
}
@media (max-width: 700px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  section { padding: 56px 0; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  h2.section-heading { font-size: 1.6rem; }
  .form-card { padding: 24px; }
}
@media (max-width: 420px) {
  .steps-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
}

/* ─── Header fit on phones ───
   .logo-wrap and .header-cta are both flex-shrink:0, so the logo lockup plus
   the language toggle api.js injects at runtime set a wide minimum for the
   header. Under that width the account, cart and menu buttons were pushed
   past the right edge, and body{overflow-x:hidden} made them unreachable
   rather than merely off-view. Below 600px the logo mark carries the brand on
   its own; the link keeps its aria-label, so its accessible name is intact. */
@media (max-width: 600px) {
  .header-inner { gap: 10px; }
  /* The tagline fits here only because the account button moved into the
     drawer: that hands back 46px, taking the brand from 120px to 166px on a
     390px screen. Uppercase at 0.76rem/0.1em still needs 218px of that, so the
     phone tagline drops the transform — sentence case at 0.66rem measures
     154px, inside the 156px even a 360px screen leaves. */
  .logo-text small { font-size: 0.66rem; letter-spacing: 0.02em; text-transform: none; }
  .logo-wrap img { height: 44px; }
  .header-cta { gap: 6px; }
  #site-header .icon-btn { width: 40px; height: 40px; }
  /* Account lives in the drawer at this width — see .drawer-account, which is
     hidden above it, so there is one account entry point at every size. */
  .header-cta .account-wrap { display: none; }
  /* Reclaiming the 80px this occupies is what makes room for the wordmark, and
     language is the one control here that is not core navigation. api.js puts
     the switch in the drawer instead whenever the page has a counterpart.
     Scoped to the header rather than bare .lang-toggle: the base rule below
     sets display:inline-flex and, at equal specificity, would win on order. */
  .header-cta .lang-toggle { display: none; }
}
@media (max-width: 380px) {
  .container.header-inner { padding-left: 14px; padding-right: 14px; }
  /* At 360px the lockup and the controls sit under a pixel apart, so a render
     of the tagline even slightly wider than measured would push the cart and
     menu off-screen. Tightening both header gaps buys back 6px. */
  .header-inner { gap: 8px; }
  .logo-wrap { gap: 8px; }
}
/* Under 360px the tagline cannot fit at any size worth reading, and going over
   is not merely cosmetic: body{overflow-x:hidden} makes the controls that spill
   past the edge unreachable. The mark and wordmark carry the brand there. */
@media (max-width: 359px) {
  .logo-text small { display: none; }
}

/* ─── Language toggle ─── */
.lang-toggle {
  display: inline-flex; align-items: center; padding: 3px;
  background: rgba(232,114,12,0.08); border: 1px solid var(--border); border-radius: 40px;
}
.lang-opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 5px 11px; border-radius: 40px;
  font-size: 0.8rem; font-weight: 600; color: var(--text-mid); line-height: 1;
  transition: background var(--transition), color var(--transition);
}
.lang-opt.active { background: var(--saffron); color: #fff; box-shadow: 0 2px 8px rgba(232,114,12,0.3); }
a.lang-opt:hover { color: var(--saffron); }
a.lang-opt.active:hover { color: #fff; }

/* ─── Icon buttons (account + cart) ─── */
.icon-btn {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-mid); background: rgba(232,114,12,0.06);
  border: 1px solid var(--border); flex-shrink: 0; cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.icon-btn:hover { background: rgba(232,114,12,0.12); color: var(--saffron); border-color: var(--saffron); }
.icon-btn svg { width: 20px; height: 20px; }
.cart-count {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--saffron); color: #fff; font-size: 0.68rem; font-weight: 700; line-height: 18px;
  border-radius: 20px; text-align: center; box-shadow: 0 2px 6px rgba(232,114,12,0.4);
}
.cart-count[data-count="0"] { display: none; }

/* ─── Account dropdown ─── */
.account-wrap { position: relative; }
.account-menu {
  position: absolute; top: calc(100% + 12px); right: 0; width: 232px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(61,20,0,0.16); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 200;
}
.account-menu::before {
  content: ""; position: absolute; top: -6px; right: 16px; width: 12px; height: 12px;
  background: #fff; border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.account-wrap.open .account-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.account-wrap.open .icon-btn { background: rgba(232,114,12,0.12); color: var(--saffron); border-color: var(--saffron); }
.account-head {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 18px 14px 16px; margin: -8px -8px 4px; border-radius: var(--radius-sm, 12px) var(--radius-sm, 12px) 0 0;
  background:
    radial-gradient(ellipse 90% 120% at 50% -10%, rgba(245,166,35,0.20) 0%, transparent 70%),
    var(--warm-white);
  border-bottom: 1px solid var(--border);
}
.account-head::before {
  content: "\1F64F"; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 10px; border-radius: 50%;
  background: #fff; box-shadow: 0 4px 14px rgba(232,114,12,0.22);
  font-size: 1.35rem; line-height: 1; border: 1px solid var(--border);
}
.account-head strong { display: block; font-size: 0.95rem; font-weight: 600; color: var(--deep); font-family: 'Poppins', sans-serif; }
.account-head span { display: block; font-size: 0.76rem; color: var(--text-mid); margin-top: 3px; }
.account-menu hr { border: none; border-top: 1px solid var(--border); margin: 6px 2px; }
.account-menu .auth-out hr:first-of-type,
.account-menu .auth-in hr:first-of-type { display: none; }
.account-menu a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
  font-size: 0.86rem; font-weight: 500; color: var(--text-mid);
  transition: background var(--transition), color var(--transition);
}
.account-menu a:hover { background: rgba(232,114,12,0.08); color: var(--saffron); }
.account-menu a svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.8; }
.account-menu a.acc-primary { background: var(--saffron); color: #fff; justify-content: center; font-weight: 600; margin-top: 2px; }
.account-menu a.acc-primary:hover { background: var(--saffron-deep); color: #fff; }
.account-menu .auth-out a:not(.acc-primary) { justify-content: center; }
.account-menu a.acc-logout { color: #b23a1e; }
.account-menu a.acc-logout:hover { background: rgba(178,58,30,0.08); color: #b23a1e; }
.account-wrap[data-auth="out"] .auth-in,
.account-wrap[data-auth="in"] .auth-out { display: none; }

@media (max-width: 900px) {
  .header-cta { gap: 8px; }
}

/* Personal-confirmation notice shown at checkout and on the order-received
   page, where the devotee is deciding whether to trust us with the offering. */
.care-note {
  max-width: 760px;
  margin: 0 auto 40px;
  padding: 20px 24px;
  text-align: left;
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--saffron);
  border-radius: 12px;
}
.care-note strong { display: block; color: var(--deep); font-size: 1.02rem; margin-bottom: 6px; }
.care-note p { color: var(--text-mid); font-size: 0.94rem; line-height: 1.65; margin: 0; }
.care-note .care-hours {
  display: block;
  margin-top: 10px;
  font-size: 0.84rem;
  color: var(--text-mid);
  opacity: 0.85;
}

/* WhatsApp call-to-action. Uses the WhatsApp brand green so it reads as a
   handoff to a person rather than a generic site button. */
.btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #1FA855;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 15px 26px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease;
}
.btn-wa:hover { background: #17924a; color: #fff; }
.btn-wa[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn-wa svg { flex-shrink: 0; }

.order-lines { text-align: left; }
.order-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.9rem;
  color: var(--text-mid);
  margin-bottom: 10px;
}
.order-line-total {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-weight: 700;
  color: var(--deep);
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.order-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--deep);
  letter-spacing: 0.04em;
}
.form-error { color: #b23a1e; font-size: 0.88rem; margin-top: 10px; }

/* ============================================================
   About page
   A document-style layout: a margin note on the left names each
   section, the substance sits in a single reading column on the
   right. Deliberately unlike the home page's centred, card-led
   rhythm — this page is meant to read as a record, not a pitch.
   All selectors are .about-* scoped so no other page is affected.
   ============================================================ */

/* ─── Masthead ─── */
.about-masthead {
  padding: 46px 0 60px;
  background:
    radial-gradient(ellipse 55% 70% at 88% -10%, rgba(245,166,35,0.16) 0%, transparent 62%),
    var(--warm-white);
  border-bottom: 1px solid var(--border);
}
.about-masthead-grid {
  display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 64px; align-items: start;
}
.about-masthead .breadcrumb { margin-bottom: 20px; }
.about-masthead h1 {
  font-size: clamp(1.85rem, 3.9vw, 2.85rem); color: var(--deep);
  letter-spacing: -0.5px; margin-bottom: 20px; max-width: 15em;
}
.about-lede { font-size: 1.05rem; color: var(--text-mid); line-height: 1.8; margin-bottom: 14px; max-width: 34em; }
.about-masthead-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.about-masthead-actions .btn-primary,
.about-masthead-actions .btn-secondary { font-size: 0.95rem; padding: 12px 24px; }
.about-masthead-note { font-size: 0.86rem; color: var(--text-light); line-height: 1.6; margin-top: 14px; max-width: 40em; }

/* ─── Identity card: the hard facts, in the first screen ─── */
.about-idcard {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.about-idcard-head {
  display: flex; align-items: center; gap: 9px;
  background: var(--deep); color: var(--gold);
  font-family: 'Poppins', sans-serif; font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 14px 22px; margin: 0;
}
.about-idlist { margin: 0; }
.about-idrow {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px;
  padding: 13px 22px; border-bottom: 1px solid var(--border);
}
.about-idrow dt {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-light); padding-top: 2px;
}
/* The email and account details are long unbreakable tokens; let them wrap
   rather than run past the card edge when the column narrows. */
.about-idrow dd { margin: 0; font-size: 0.88rem; color: var(--deep); line-height: 1.65; overflow-wrap: break-word; }
.about-idrow dd a { color: var(--saffron-deep); text-decoration: underline; text-underline-offset: 2px; }
.about-idrow dd a:hover { color: var(--saffron); }
.about-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.03em; }
.about-idcard-note {
  padding: 16px 22px; margin: 0; background: var(--warm-white);
  font-size: 0.82rem; color: var(--text-mid); line-height: 1.65;
}
.about-idcard-note strong { display: block; color: var(--deep); margin-bottom: 3px; }

/* ─── Document grid ─── */
.about-sec { padding: 58px 0; }
.about-sec + .about-sec { border-top: 1px solid var(--border); }
.about-sec-alt { background: var(--warm-white); }
.about-doc { display: grid; grid-template-columns: 236px 1fr; gap: 60px; align-items: start; }
/* The margin note trails the reader down its own section rather than
   scrolling away with the first paragraph. */
.about-doc-aside { position: sticky; top: 92px; }
.about-doc-aside h2 { font-size: 1.4rem; color: var(--deep); margin-top: 2px; }
.about-doc-aside p { font-size: 0.86rem; color: var(--text-light); line-height: 1.65; margin-top: 10px; }
/* Prose is capped to a readable measure while grids below keep the full
   column width. */
.about-doc-body > p { font-size: 1rem; color: var(--text-mid); line-height: 1.85; margin-bottom: 16px; max-width: 68ch; }
.about-doc-body > p:last-child { margin-bottom: 0; }
.about-doc-body strong { color: var(--deep); }
.about-inline-link {
  display: inline-block; margin-top: 22px;
  font-size: 0.9rem; font-weight: 600; color: var(--saffron-deep);
  border-bottom: 1px solid rgba(196,90,0,0.35); padding-bottom: 2px;
}
.about-inline-link:hover { color: var(--saffron); border-bottom-color: var(--saffron); }
.about-note { font-size: 0.9rem; color: var(--text-mid); line-height: 1.7; margin-top: 24px; }
.about-note a { color: var(--saffron-deep); text-decoration: underline; text-underline-offset: 2px; }

/* ─── Scope: a plain register of what we do ─── */
.about-scope { border-top: 1px solid var(--border); }
.about-scope-item { padding: 20px 0; border-bottom: 1px solid var(--border); }
.about-scope-item h3 { font-size: 1.15rem; color: var(--deep); margin-bottom: 7px; }
.about-scope-item p { font-size: 0.95rem; color: var(--text-mid); line-height: 1.75; margin: 0; max-width: 72ch; }

/* ─── Verification chain: each step states what you receive ─── */
.about-chain { list-style: none; margin: 0; padding: 0; }
.about-chain-step { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 22px; padding-bottom: 28px; }
.about-chain-step:last-child { padding-bottom: 0; }
.about-chain-step:not(:last-child)::before {
  content: ''; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px;
  background: linear-gradient(to bottom, rgba(232,114,12,0.45), rgba(232,114,12,0.10));
}
.about-chain-num {
  position: relative; z-index: 1;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--saffron);
  font-family: 'Poppins', sans-serif; font-size: 0.9rem; font-weight: 700;
  color: var(--saffron-deep);
}
.about-chain-body h3 { font-size: 1.05rem; color: var(--deep); margin-bottom: 6px; }
.about-chain-body p { font-size: 0.95rem; color: var(--text-mid); line-height: 1.75; margin: 0; max-width: 68ch; }
.about-chain-proof {
  display: inline-block; margin-top: 11px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(232,114,12,0.08); border: 1px solid var(--border);
  font-size: 0.8rem; font-weight: 600; color: var(--saffron-deep);
}

/* ─── Straight answers ─── */
.about-qa { border-top: 1px solid var(--border); }
.about-qa-row {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 34px;
  padding: 20px 0; border-bottom: 1px solid var(--border);
}
.about-qa-row h3 { font-size: 1rem; color: var(--deep); margin: 0; }
.about-qa-row p { font-size: 0.93rem; color: var(--text-mid); line-height: 1.75; margin: 0; }

/* ─── Commitments: the one grave beat on the page ─── */
.about-never-sec { background: var(--dark-section); border-top: none; }
.about-never-sec .section-label { color: var(--gold); }
.about-never-sec .about-doc-aside h2 { color: #fff; }
.about-never-sec .about-doc-aside p { color: rgba(255,255,255,0.55); }
.about-never { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.about-never li {
  position: relative; padding: 16px 20px 16px 50px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-sm);
  font-size: 0.93rem; color: rgba(255,255,255,0.72); line-height: 1.65;
}
.about-never li::before {
  content: '\2715'; position: absolute; left: 20px; top: 16px;
  color: var(--marigold); font-weight: 700; font-size: 0.9rem;
}
.about-never strong { display: block; color: #fff; font-weight: 600; margin-bottom: 3px; }

/* ─── Coverage: every temple named, not rounded up ─── */
.about-list-head {
  font-family: 'Poppins', sans-serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--saffron);
  margin-bottom: 8px;
}
.about-list-head + .about-temple-list { margin-bottom: 30px; }
.about-temple-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px;
}
.about-temple-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px dashed var(--border);
}
.about-temple-list a, .about-temple-list .t-name { font-size: 0.94rem; font-weight: 500; color: var(--deep); }
.about-temple-list a:hover { color: var(--saffron); text-decoration: underline; text-underline-offset: 3px; }
.about-temple-list span:last-child { font-size: 0.82rem; color: var(--text-light); white-space: nowrap; }
.about-temple-list.is-request .t-name { color: var(--text-mid); }

/* ─── Giving back ─── */
.about-give-split { display: grid; grid-template-columns: 1fr 0.72fr; gap: 34px; align-items: start; }
.about-give-split p { font-size: 1rem; color: var(--text-mid); line-height: 1.8; margin-bottom: 16px; }
.about-give-split img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.about-tick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.about-tick li {
  position: relative; padding-left: 26px;
  font-size: 0.93rem; color: var(--text-mid); line-height: 1.6;
}
.about-tick li::before {
  content: '\2713'; position: absolute; left: 0; top: 0;
  color: var(--saffron); font-weight: 700;
}

/* ─── Devotee quotes: collected testimony, not a carousel of cards ─── */
.about-quotes { display: flex; flex-direction: column; gap: 14px; }
.about-quote {
  display: grid; grid-template-columns: 1fr 180px; gap: 28px; align-items: center;
  margin: 0; padding: 20px 24px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  border-left: 3px solid var(--marigold);
}
.about-quote blockquote {
  margin: 0; font-size: 0.94rem; color: var(--text-mid);
  line-height: 1.75; font-style: italic;
}
.about-quote figcaption { font-size: 0.86rem; font-weight: 600; color: var(--deep); }
.about-quote figcaption span { display: block; font-size: 0.78rem; font-weight: 400; color: var(--text-light); margin-top: 2px; }

/* ─── Close: a person, not a banner ─── */
.about-contact { padding: 58px 0 70px; background: var(--warm-white); border-top: 1px solid var(--border); }
.about-contact-panel {
  display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 44px; align-items: center;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 38px 40px;
}
.about-contact-copy h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--deep); margin-bottom: 12px; }
.about-contact-copy p { font-size: 1rem; color: var(--text-mid); line-height: 1.8; max-width: 46em; }
.about-contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.about-contact-actions .btn-primary { font-size: 0.95rem; padding: 12px 24px; }
.about-contact-actions .btn-cta-wa { font-size: 0.95rem; padding: 11px 22px; }
.about-contact-address {
  font-style: normal; font-size: 0.9rem; color: var(--text-mid); line-height: 1.9;
  padding-left: 40px; border-left: 1px solid var(--border);
}
.about-contact-address strong { display: block; color: var(--deep); margin-bottom: 6px; }
.about-contact-address a { color: var(--saffron-deep); }
.about-contact-address a:hover { text-decoration: underline; }

/* ─── Responsive ─── */
/* Below ~1280px the fixed WhatsApp and back-to-top buttons float over the
   right edge of the container. The identity card carries the fraud warning
   and is the first thing a wary visitor reads, so it is inset clear of that
   strip rather than being partly covered by it. */
@media (max-width: 1280px) and (min-width: 1001px) {
  .about-idcard { margin-right: 64px; }
}
@media (max-width: 1000px) {
  .about-masthead-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-idcard { max-width: 560px; }
  .about-doc { grid-template-columns: 1fr; gap: 26px; }
  /* Un-stick once the margin note becomes a heading stacked above its
     own content — a sticky heading there would overlap the body text. */
  .about-doc-aside { position: static; }
  .about-doc-aside p { max-width: 52em; }
  .about-give-split { grid-template-columns: 1fr; }
  .about-give-split img { max-width: 460px; }
  .about-contact-panel { grid-template-columns: 1fr; gap: 30px; padding: 32px 30px; }
  .about-contact-address { padding-left: 0; padding-top: 26px; border-left: none; border-top: 1px solid var(--border); }
}
@media (max-width: 860px) {
  .about-quote { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 700px) {
  .about-temple-list { grid-template-columns: 1fr; }
  .about-qa-row { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 600px) {
  .about-sec { padding: 44px 0; }
  .about-masthead { padding: 32px 0 44px; }
  .about-idrow { grid-template-columns: 1fr; gap: 3px; }
  .about-chain-step { grid-template-columns: 30px 1fr; gap: 16px; }
  .about-chain-num { width: 30px; height: 30px; font-size: 0.82rem; }
  .about-chain-step:not(:last-child)::before { left: 14px; top: 34px; }
  .about-masthead-actions .btn-primary,
  .about-masthead-actions .btn-secondary,
  .about-contact-actions .btn-primary,
  .about-contact-actions .btn-cta-wa,
  .about-contact-actions .btn-secondary { flex: 1 1 auto; justify-content: center; }
  .about-contact-panel { padding: 26px 22px; }
}

/* ─── 404 ─── */
/* Shared by /404.html and /hi/404.html rather than duplicated into both, since
   the two differ only in wording. */
.err-code {
  display: block; font-size: clamp(4.5rem, 16vw, 8rem); line-height: 1;
  font-weight: 700; color: var(--saffron); opacity: 0.22;
  letter-spacing: -0.03em; margin-bottom: -6px;
  position: relative; z-index: 2;
}
.err-actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: 30px; position: relative; z-index: 2;
}
/* Smaller, quieter destinations under the two main buttons — for someone who
   knows roughly where they were headed but not the exact page. */
.err-links {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
  margin-top: 34px; padding-top: 24px;
  border-top: 1px solid var(--border);
  position: relative; z-index: 2;
}
.err-links a { color: var(--text-mid); font-size: 0.9rem; }
.err-links a:hover { color: var(--saffron); text-decoration: underline; }
@media (max-width: 600px) {
  .err-actions .btn-primary,
  .err-actions .btn-secondary { flex: 1 1 auto; justify-content: center; }
  .err-links { gap: 10px 18px; }
}