/* SUBHASAHIT — pahade kagaj design system (v2)
   ─────────────────────────────────────────────
   Warmer than v1. Drop caps for opening paragraphs, mandala-style
   dividers, temple-inscription stats band, sanskrit colophon, and
   a trilingual language switcher. Pure CSS + tiny inline JS for
   language persistence — zero external dependencies.
*/

:root {
    /* ── Pahade kagaj palette (warmer than v1) ─────────────── */
    --paper-base:   #F8E8C7;   /* warm Lokta cream, deeper */
    --paper-soft:   #FCF1D8;   /* card surface */
    --paper-edge:   #EDD9AC;   /* fold shadow */
    --paper-deep:   #DCBE82;   /* tea-stained inner */

    /* ── Ink palette ──────────────────────────────────────── */
    --saffron:      #D9531E;   /* sindoor saffron */
    --saffron-2:    #B33F0E;
    --sindoor:      #A8211B;
    --kumkum:       #7A1A14;
    --gold:         #B07F1D;
    --gold-soft:    #C49A2C;
    --gold-deep:    #886413;
    --ink:          #2A1A0B;
    --ink-soft:     #4D3823;
    --muted:        #7A6242;
    --line:         #C9B384;
    --line-soft:    #E0CC9C;

    /* ── Fluid type scale ─────────────────────────────────── */
    --t-xs:    clamp(11px, 0.74vw + 9px,  13px);
    --t-sm:    clamp(13px, 0.85vw + 11px, 15px);
    --t-base:  clamp(15px, 1.0vw + 13px,  17px);
    --t-md:    clamp(17px, 1.2vw + 14px,  20px);
    --t-lg:    clamp(20px, 1.6vw + 16px,  26px);
    --t-xl:    clamp(24px, 2.2vw + 18px,  34px);
    --t-2xl:   clamp(28px, 3.4vw + 18px,  48px);
    --t-3xl:   clamp(40px, 5.5vw + 22px,  74px);
    --t-4xl:   clamp(56px, 8vw + 32px,    120px);

    /* ── Fluid spacing ────────────────────────────────────── */
    --sp-1:    clamp(4px,  0.4vw + 3px,  6px);
    --sp-2:    clamp(8px,  0.8vw + 6px,  12px);
    --sp-3:    clamp(12px, 1.2vw + 8px,  20px);
    --sp-4:    clamp(20px, 2.0vw + 12px, 32px);
    --sp-5:    clamp(32px, 3.5vw + 18px, 56px);
    --sp-6:    clamp(48px, 5.5vw + 22px, 88px);

    /* ── Layout ───────────────────────────────────────────── */
    --max-w:   min(780px, 92vw);
    --max-w-wide: min(960px, 94vw);

    /* ── Paper texture (CSS-only — SVG fractal noise) ─────── */
    --paper-noise:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.27  0 0 0 0 0.08  0 0 0 0.10 0'/></filter><rect width='220' height='220' filter='url(%23f)'/></svg>");
    --paper-fibre:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.32  0 0 0 0 0.10  0 0 0 0.08 0'/></filter><rect width='400' height='400' filter='url(%23f)'/></svg>");
}

* {
    box-sizing: border-box;
    /* Disable iOS Safari's blue tap-highlight on every interactive
       element — we handle hover/focus state ourselves. */
    -webkit-tap-highlight-color: transparent;
}
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* `text-rendering: optimizeLegibility` enables ligatures and
       kerning — important for Devanagari conjuncts (क्ष, ज्ञ, etc.). */
    text-rendering: optimizeLegibility;
}
/* Use dynamic viewport units where supported (iOS Safari +
   modern Chrome) so the layout doesn't jump when the browser's
   bottom toolbar shows/hides. Fallback to vh on older browsers. */
@supports (height: 100dvh) {
    .fullh { height: 100dvh; min-height: 100dvh; }
}
@supports not (height: 100dvh) {
    .fullh { height: 100vh; min-height: 100vh; }
}

body {
    margin: 0;
    /* Safe-area insets for notched iPhones */
    padding-left:  env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--ink);
    font: 400 var(--t-base)/1.75
          'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia,
          'Noto Serif Devanagari', 'Mukta', serif;
    background-color: var(--paper-base);
    /* Position context for the ॐ watermark (::before below). */
    position: relative;
    overflow-x: hidden;
    background-image:
        radial-gradient(120% 80% at 50% -10%,
            rgba(217, 83, 30, 0.14) 0%,
            rgba(217, 83, 30, 0.00) 55%),
        radial-gradient(80% 60% at 85% 110%,
            rgba(176, 127, 29, 0.14) 0%,
            rgba(176, 127, 29, 0.00) 60%),
        radial-gradient(60% 40% at 15% 15%,
            rgba(168, 33, 27, 0.08) 0%,
            rgba(168, 33, 27, 0.00) 50%),
        var(--paper-fibre),
        var(--paper-noise);
    background-size: 100% 100%, 100% 100%, 100% 100%, 400px 400px, 220px 220px;
    background-attachment: fixed, fixed, fixed, fixed, fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(217, 83, 30, 0.30); color: var(--kumkum); }

/* ─────────────────────────────────────────────────────────────
   ॐ — Devanagari watermark
   ─────────────────────────────────────────────────────────────
   A massive faint ॐ glyph sits behind the page content, fixed
   to the viewport so it stays as the user scrolls. The Devanagari
   character is rendered as text (not an image) so it scales
   perfectly and respects the system font for the script.

   On mobile we tone it down a bit (smaller, lower opacity) so
   it doesn't fight with the content on small screens.
*/
/* ─────────────────────────────────────────────────────────────
   ॐ — Hand-illuminated Devanagari watermark
   ─────────────────────────────────────────────────────────────
   Designed in the spirit of early-20th-century Tanjore /
   Pichwai / Pahari manuscript illumination, where the sacred
   syllable was painted in gold leaf at the centre of a warm
   crimson aureole, surrounded by a halo of lamplight. Three
   stacked CSS layers reproduce this without any image asset:

     1. body::before — the warm aureole. A soft radial gradient
        in dawn-saffron + kumkum-red colours, mildly blurred so
        it reads as lamp-glow on the kagaj paper.

     2. body — the underlying Lokta-cream + fibre noise (already
        set above). Provides the "aged paper" substrate.

     3. body::after — the ॐ glyph itself, rendered in real
        Devanagari (Noto Serif Devanagari / Mukta — the same
        scripts a Banaras printer would have used in 1925), with
        a multi-stop radial gradient applied via background-clip:
        text. The fill runs from a pale gold core (where the
        oil-lamp light catches the stroke) through saffron and
        kumkum to deep sindoor at the edges — the colour
        progression of a hand-painted ॐ that has aged a century.

   A gentle 9-second "breath" animation softens the aureole's
   opacity, evoking the flicker of a diyo. The whole stack is
   purely behind content (z-index 0), pointer-disabled, and
   collapses to a quieter version on phones / reduced-data /
   reduced-motion modes.
*/

/* Layer 1 — warm aureole (lamp-glow halo) */
body::before {
    content: "";
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width:  clamp(420px, 88vmin, 1040px);
    height: clamp(420px, 88vmin, 1040px);
    background: radial-gradient(circle at 50% 45%,
        rgba(255, 222, 152, 0.22) 0%,
        rgba(232, 130, 50, 0.16)  16%,
        rgba(217, 83, 30, 0.11)  32%,
        rgba(176, 127, 29, 0.06) 48%,
        rgba(168, 33, 27, 0.025) 65%,
        rgba(168, 33, 27, 0.00)  82%);
    border-radius: 50%;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    filter: blur(6px);
    animation: omBreath 9s ease-in-out infinite;
}

/* Layer 3 — the ॐ inscription itself, hand-illuminated gradient.
   Optical centre is slightly above the geometric centre because
   the chandrabindu (the dot + crescent) sits at the top — pull
   the whole glyph up ~3% so it visually balances on the page. */
body::after {
    content: "ॐ";
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -53%);
    font-family: 'Noto Serif Devanagari', 'Mukta',
                 'Tiro Devanagari Hindi',
                 'Kohinoor Devanagari', serif;
    font-weight: 700;
    font-size: clamp(280px, 64vmin, 780px);
    line-height: 1;
    /* The hand-painted gold-to-sindoor fill — pale lamp-cream at
       the top-left where the brush starts, deepening through
       saffron and kumkum to sindoor at the bottom-right. */
    background: radial-gradient(circle at 42% 32%,
        #FFEAB3  0%,
        #F4B946 16%,
        #DD811C 36%,
        #B23A12 62%,
        #7A1A14 92%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    opacity: 0.22;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    /* Two-stop drop-shadow stack mimics a) the deep red ink
       soaking into the paper fibre, b) the warm halo where the
       gold leaf catches lamplight. */
    filter: drop-shadow(0 4px 8px  rgba(168, 33, 27, 0.18))
            drop-shadow(0 0   24px rgba(255, 195, 95, 0.22));
    animation: omBreath 9s ease-in-out infinite;
}

@keyframes omBreath {
    0%, 100% {
        opacity: 0.20;
        filter: drop-shadow(0 4px 8px  rgba(168, 33, 27, 0.16))
                drop-shadow(0 0   22px rgba(255, 195, 95, 0.18));
    }
    50% {
        opacity: 0.27;
        filter: drop-shadow(0 4px 10px rgba(168, 33, 27, 0.22))
                drop-shadow(0 0   34px rgba(255, 195, 95, 0.30));
    }
}

@media (max-width: 640px) {
    body::before {
        width: clamp(360px, 92vmin, 600px);
        height: clamp(360px, 92vmin, 600px);
        filter: blur(4px);
    }
    body::after {
        font-size: clamp(240px, 84vmin, 480px);
        opacity: 0.18;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::before, body::after { animation: none; }
}

@media (prefers-reduced-data: reduce) {
    body::before, body::after { display: none; }
}

/* Print — drop the heavy watermark for clean legal printouts */
@media print {
    body::before, body::after { display: none; }
}

/* Lift content above the watermark layer */
header.site, main, footer.site { position: relative; z-index: 1; }

/* ── Devanagari refinement (Nepali + Hindi) ───────────────── */
:lang(ne), :lang(hi), .dev {
    font-family:
        'Noto Serif Devanagari', 'Mukta', 'Tiro Devanagari Hindi',
        'Iowan Old Style', Georgia, serif;
    letter-spacing: 0.005em;
    line-height: 1.85;
}

a {
    color: var(--saffron);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.25s, border-color 0.25s;
}
a:hover {
    color: var(--saffron-2);
    border-bottom-color: rgba(179, 63, 14, 0.4);
}

/* ─────────────────────────────────────────────────────────────
   LANGUAGE SWITCHER + visibility
   ─────────────────────────────────────────────────────────────
   The page contains three copies of each block (.lang-ne,
   .lang-en, .lang-hi). The tiny inline JS at the bottom of every
   page reads `localStorage.subhasahit_lang` (default 'ne') and
   sets `<html data-lang="ne|en|hi">`. This block hides the
   non-active language. Pure CSS — no flash of unstyled content
   because the JS runs synchronously before paint.
*/
html[data-lang="ne"] .lang-en, html[data-lang="ne"] .lang-hi { display: none !important; }
html[data-lang="en"] .lang-ne, html[data-lang="en"] .lang-hi { display: none !important; }
html[data-lang="hi"] .lang-ne, html[data-lang="hi"] .lang-en { display: none !important; }
/* Fallback before JS runs — show Nepali only */
html:not([data-lang]) .lang-en, html:not([data-lang]) .lang-hi { display: none !important; }

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background-color: var(--paper-soft);
    background-image: var(--paper-noise);
    background-blend-mode: multiply;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 2px;
    box-shadow: 0 1px 2px rgba(122, 90, 50, 0.10);
}
.lang-switch button {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font-family: 'Noto Serif Devanagari', 'Iowan Old Style', Georgia, serif;
    font-size: var(--t-xs);
    font-weight: 600;
    /* Hit-target — Apple HIG says minimum 44×44 for fingers.
       The visible button is smaller; the hit zone extends via
       padding so the chip stays compact but still tappable. */
    min-height: 34px;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: background 0.2s, color 0.2s;
}
.lang-switch button:hover { color: var(--saffron); }
.lang-switch button[aria-pressed="true"] {
    background: linear-gradient(180deg, var(--saffron), var(--saffron-2));
    color: #FFF8E8;
    box-shadow: 0 1px 2px rgba(168, 33, 27, 0.30) inset;
}

/* ─────────────────────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────────────────────── */
header.site {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(180deg,
            rgba(252, 241, 216, 0.55),
            rgba(252, 241, 216, 0));
}
header.site .wrap {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
}
header.site .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: 'Noto Serif Devanagari', 'Mukta',
                 'Iowan Old Style', Georgia, serif;
    font-size: var(--t-md);
    font-weight: 600;
    color: var(--kumkum);
    letter-spacing: 0.02em;
    border-bottom: none;
}
header.site .brand:hover { color: var(--saffron); }
header.site .brand-logo {
    /* Same logo image as the iOS app icon — rounded square mark,
       Apple-style corner radius, soft warm shadow so it looks like
       a tile resting on the kagaj. */
    width: clamp(34px, 4.5vw + 22px, 44px);
    height: clamp(34px, 4.5vw + 22px, 44px);
    border-radius: 22%;          /* Apple icon-style continuous curve */
    flex-shrink: 0;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 2px 4px rgba(168, 33, 27, 0.20),
        0 6px 14px rgba(122, 90, 50, 0.12);
    background: #FFF;            /* prevent flash before image loads */
}
header.site nav { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
header.site nav a {
    color: var(--ink-soft);
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: 0.03em;
}

/* ─────────────────────────────────────────────────────────────
   MAIN
   ───────────────────────────────────────────────────────────── */
main {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-4) var(--sp-6);
}

/* ─────────────────────────────────────────────────────────────
   MANDALA / LOTUS DIVIDERS
   ───────────────────────────────────────────────────────────── */
.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    margin: var(--sp-5) auto;
}
.divider::before, .divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent, var(--line) 25%, var(--line) 75%, transparent);
    max-width: 180px;
}
.divider .ornament {
    width: 38px;
    height: 38px;
    color: var(--saffron);
    flex-shrink: 0;
}
.divider .ornament svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ─────────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────────── */
.hero {
    text-align: center;
    padding: var(--sp-5) var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    position: relative;
}
.hero .hero-logo {
    /* Hero logo — large version of the app icon, displayed prominently
       above the शुभसाइत wordmark. Same warm shadow stack as the
       header logo, sized up. */
    width: clamp(96px, 14vw + 40px, 180px);
    height: clamp(96px, 14vw + 40px, 180px);
    border-radius: 22%;
    margin: 0 auto var(--sp-3);
    display: block;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 4px 10px rgba(168, 33, 27, 0.20),
        0 16px 36px rgba(122, 90, 50, 0.18);
    background: #FFF;
}
.hero .dev-mark {
    font-family: 'Noto Serif Devanagari', 'Mukta', serif;
    font-size: var(--t-3xl);
    line-height: 1.05;
    color: var(--sindoor);
    margin-bottom: var(--sp-2);
    letter-spacing: 0.02em;
    text-shadow: 0 1px 0 rgba(255, 250, 240, 0.6);
    font-weight: 600;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 {
    font-family: 'Iowan Old Style', Georgia, serif;
    font-size: var(--t-xl);
    font-weight: 600;
    line-height: 1.25;
    margin: var(--sp-2) auto var(--sp-2);
    max-width: 22ch;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.hero h1.dev {
    font-family: 'Noto Serif Devanagari', 'Mukta', serif;
    font-size: var(--t-xl);
    max-width: 26ch;
    color: var(--kumkum);
    font-weight: 600;
    line-height: 1.4;
}
.hero .tagline {
    font-size: var(--t-base);
    color: var(--ink-soft);
    max-width: 52ch;
    margin: var(--sp-2) auto var(--sp-4);
    line-height: 1.75;
}
.hero .tagline.dev {
    font-family: 'Noto Serif Devanagari', 'Mukta', serif;
    line-height: 1.95;
}

/* ─────────────────────────────────────────────────────────────
   CTA buttons (context-aware via data-apple + data-platform)
   ───────────────────────────────────────────────────────────── */

/* Default CTA — saffron pill, fits the paper aesthetic everywhere. */
.cta {
    /* min 44px touch target on all platforms (WCAG 2.1 AAA + Apple HIG) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 12px 24px;
    margin: var(--sp-1) calc(var(--sp-1) + 2px);
    background: linear-gradient(180deg, var(--saffron), var(--saffron-2));
    color: #FFF8E8 !important;
    border-radius: 999px;
    font-family: 'Iowan Old Style', Georgia, serif;
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    border-bottom: none;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 2px 4px rgba(168, 33, 27, 0.22),
        0 6px 14px rgba(217, 83, 30, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    /* No outline by default — replaced by focus-visible below */
    outline: none;
}

/* Keyboard-only focus ring — accessibility for non-mouse navigation */
.cta:focus-visible,
.lang-switch button:focus-visible,
a:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}
.cta.dev {
    font-family: 'Noto Serif Devanagari', 'Mukta', serif;
}
.cta:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 3px 6px rgba(168, 33, 27, 0.28),
        0 12px 22px rgba(217, 83, 30, 0.28);
    color: #FFFAEB !important;
}
.cta.secondary {
    background: transparent;
    color: var(--saffron) !important;
    border: 1px solid var(--saffron);
    box-shadow: none;
}
.cta.secondary:hover {
    background: rgba(217, 83, 30, 0.08);
    color: var(--saffron-2) !important;
}

/* ─── CTA ornament — small ॐ glyph inside the primary button.
       Sits to the left of the label, with a thin divider line. */
.cta-primary {
    gap: 10px;
}
.cta-primary .cta-ornament {
    font-family: 'Noto Serif Devanagari', 'Mukta', serif;
    font-size: 1.35em;
    font-weight: 700;
    line-height: 1;
    /* Soft gold-cream glow on the ॐ so it pops against the saffron
       gradient. Slight upward shift to optically center. */
    color: rgba(255, 245, 215, 0.95);
    text-shadow: 0 0 8px rgba(255, 230, 160, 0.5);
    padding-right: 8px;
    margin-right: 2px;
    border-right: 1px solid rgba(255, 245, 215, 0.30);
    transform: translateY(-1px);
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   STATS INSCRIPTION (like a temple plaque)
   ───────────────────────────────────────────────────────────── */
.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
    max-width: var(--max-w);
    margin: var(--sp-5) auto;
    padding: var(--sp-4);
    background-color: var(--paper-soft);
    background-image: var(--paper-noise);
    background-blend-mode: multiply;
    border: 1px solid var(--line);
    border-radius: 18px 14px 20px 12px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 8px 24px rgba(122, 90, 50, 0.10);
    position: relative;
}
.stats::before {
    /* Corner ornaments — top-left and top-right diamond */
    content: "";
    position: absolute;
    top: -1px; left: -1px;
    width: 14px; height: 14px;
    border-top: 2px solid var(--gold);
    border-left: 2px solid var(--gold);
    border-radius: 18px 0 0 0;
}
.stats::after {
    content: "";
    position: absolute;
    bottom: -1px; right: -1px;
    width: 14px; height: 14px;
    border-bottom: 2px solid var(--gold);
    border-right: 2px solid var(--gold);
    border-radius: 0 0 18px 0;
}
@media (min-width: 640px) {
    .stats { grid-template-columns: repeat(4, 1fr); }
}
.stat {
    text-align: center;
    padding: var(--sp-2);
}
.stat .num {
    font-family: 'Iowan Old Style', Georgia, serif;
    font-size: var(--t-2xl);
    font-weight: 700;
    color: var(--sindoor);
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}
.stat .num.dev {
    font-family: 'Noto Serif Devanagari', 'Mukta', serif;
    color: var(--sindoor);
}
.stat .label {
    font-size: var(--t-xs);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1.4;
}
.stat .label.dev {
    font-family: 'Noto Serif Devanagari', 'Mukta', serif;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: var(--t-sm);
}

/* Hero CTA group — flex-wrap so the row breaks gracefully on
   narrow screens (iPhone SE, iPad split view) instead of
   overflowing horizontally. */
.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

/* ─────────────────────────────────────────────────────────────
   FEATURE GRID
   ───────────────────────────────────────────────────────────── */
.features {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
}
@media (min-width: 640px) {
    .features { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
}
.feature {
    position: relative;
    padding: var(--sp-4);
    background-color: var(--paper-soft);
    border-radius: 14px 12px 16px 11px;
    border: 1px solid var(--line);
    background-image: var(--paper-noise);
    background-blend-mode: multiply;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4) inset,
        0 1px 3px rgba(122, 90, 50, 0.08),
        0 8px 22px rgba(122, 90, 50, 0.10);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature:hover {
    transform: translateY(-3px) rotate(-0.25deg);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4) inset,
        0 2px 4px rgba(122, 90, 50, 0.12),
        0 16px 32px rgba(122, 90, 50, 0.14);
}
.feature .icon {
    font-size: var(--t-lg);
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #FFF8E8, #ECD8A4);
    border: 1px solid var(--line);
    margin-bottom: var(--sp-2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset,
                0 4px 8px rgba(176, 127, 29, 0.18);
}
.feature h3 {
    font-family: 'Iowan Old Style', Georgia, serif;
    font-size: var(--t-md);
    font-weight: 600;
    margin: 0 0 var(--sp-2);
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.3;
}
.feature h3.dev {
    font-family: 'Noto Serif Devanagari', 'Mukta', serif;
    color: var(--kumkum);
    line-height: 1.45;
}
.feature p {
    font-size: var(--t-sm);
    color: var(--ink-soft);
    margin: 0;
    line-height: 1.8;
}
.feature p.dev {
    font-family: 'Noto Serif Devanagari', 'Mukta', serif;
    line-height: 1.9;
}

/* ─────────────────────────────────────────────────────────────
   SECTION HEADINGS
   ───────────────────────────────────────────────────────────── */
section h2 {
    font-family: 'Iowan Old Style', Georgia, serif;
    font-size: var(--t-xl);
    font-weight: 600;
    color: var(--kumkum);
    text-align: center;
    margin: 0 0 var(--sp-2);
    line-height: 1.3;
    letter-spacing: -0.005em;
}
section h2.dev {
    font-family: 'Noto Serif Devanagari', 'Mukta', serif;
    line-height: 1.45;
}
section .section-tag {
    display: block;
    text-align: center;
    text-transform: uppercase;
    font-size: var(--t-xs);
    letter-spacing: 0.20em;
    color: var(--gold);
    margin-bottom: var(--sp-2);
    font-weight: 600;
}
section .section-tag.dev {
    font-family: 'Noto Serif Devanagari', 'Mukta', serif;
    text-transform: none;
    letter-spacing: 0.06em;
    font-size: var(--t-sm);
}

/* ─────────────────────────────────────────────────────────────
   DROP CAP (for first paragraph of long sections)
   ───────────────────────────────────────────────────────────── */
.drop-cap::first-letter {
    initial-letter: 3;
    -webkit-initial-letter: 3;
    color: var(--sindoor);
    font-family: 'Iowan Old Style', Georgia, serif;
    font-weight: 700;
    padding-right: 0.12em;
    margin-right: 0.05em;
}

/* ─────────────────────────────────────────────────────────────
   COLOPHON (Sanskrit-style closing block)
   ───────────────────────────────────────────────────────────── */
.colophon-block {
    text-align: center;
    margin: var(--sp-6) auto var(--sp-3);
    padding: var(--sp-4) var(--sp-3);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(180deg,
            rgba(176, 127, 29, 0.04),
            rgba(176, 127, 29, 0)),
        var(--paper-noise);
    background-blend-mode: multiply, normal;
    font-family: 'Noto Serif Devanagari', 'Mukta', serif;
    color: var(--kumkum);
    font-size: var(--t-md);
    line-height: 2;
    font-style: italic;
}
.colophon-block .translit {
    display: block;
    font-family: 'Iowan Old Style', Georgia, serif;
    font-size: var(--t-sm);
    color: var(--muted);
    font-style: italic;
    margin-top: var(--sp-2);
}
.colophon-block .gloss {
    display: block;
    font-family: 'Iowan Old Style', Georgia, serif;
    font-size: var(--t-sm);
    color: var(--ink-soft);
    margin-top: var(--sp-1);
    font-style: normal;
}

/* ─────────────────────────────────────────────────────────────
   LEGAL PAGES
   ───────────────────────────────────────────────────────────── */
.legal h1 {
    font-family: 'Iowan Old Style', Georgia, serif;
    font-size: var(--t-2xl);
    color: var(--sindoor);
    border-bottom: 2px solid var(--saffron);
    padding-bottom: var(--sp-2);
    margin: 0 0 var(--sp-2);
    line-height: 1.25;
}
.legal h1.dev {
    font-family: 'Noto Serif Devanagari', 'Mukta', serif;
    line-height: 1.4;
}
.legal .updated {
    color: var(--muted);
    font-size: var(--t-sm);
    margin-bottom: var(--sp-4);
    font-style: italic;
}
.legal h2 {
    font-family: 'Iowan Old Style', Georgia, serif;
    font-size: var(--t-lg);
    color: var(--saffron);
    text-align: left;
    margin: var(--sp-5) 0 var(--sp-2);
    padding-bottom: var(--sp-1);
    border-bottom: 1px dashed var(--line);
    line-height: 1.3;
}
.legal h2.dev {
    font-family: 'Noto Serif Devanagari', 'Mukta', serif;
    line-height: 1.5;
}
.legal h3 {
    font-family: 'Iowan Old Style', Georgia, serif;
    font-size: var(--t-md);
    color: var(--ink);
    margin: var(--sp-4) 0 var(--sp-2);
    line-height: 1.4;
}
.legal h3.dev {
    font-family: 'Noto Serif Devanagari', 'Mukta', serif;
    color: var(--kumkum);
}
.legal p, .legal li {
    color: var(--ink);
    line-height: 1.9;
}
.legal p.dev, .legal li.dev {
    font-family: 'Noto Serif Devanagari', 'Mukta', serif;
    line-height: 2;
}
.legal strong { color: var(--sindoor); font-weight: 600; }
.legal blockquote {
    border-left: 3px solid var(--gold);
    margin: var(--sp-3) 0;
    padding: var(--sp-2) var(--sp-3);
    background-color: var(--paper-soft);
    background-image: var(--paper-noise);
    background-blend-mode: multiply;
    border-radius: 0 8px 6px 0;
    color: var(--ink-soft);
    font-style: normal;
}
.legal blockquote.dev {
    font-family: 'Noto Serif Devanagari', 'Mukta', serif;
}
.legal code, .legal .mono {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.92em;
    background: var(--paper-edge);
    color: var(--kumkum);
    padding: 1px 6px;
    border-radius: 3px;
}

/* ─────────────────────────────────────────────────────────────
   CONTACT CARD
   ───────────────────────────────────────────────────────────── */
.contact-card {
    background-color: var(--paper-soft);
    background-image: var(--paper-noise);
    background-blend-mode: multiply;
    border: 1px solid var(--line);
    border-radius: 16px 14px 18px 12px;
    padding: var(--sp-4);
    margin: var(--sp-4) 0;
    text-align: center;
    box-shadow: 0 8px 24px rgba(122, 90, 50, 0.10);
    position: relative;
}
.contact-card::before,
.contact-card::after {
    /* Corner gold diamonds */
    content: "✦";
    position: absolute;
    color: var(--gold);
    font-size: var(--t-sm);
    opacity: 0.55;
}
.contact-card::before { top: 6px; left: 12px; }
.contact-card::after { bottom: 6px; right: 12px; }
.contact-card .email {
    display: inline-block;
    font-family: 'Iowan Old Style', Georgia, serif;
    font-size: var(--t-lg);
    font-weight: 600;
    color: var(--saffron);
    margin: var(--sp-1) 0;
    border-bottom: 1px solid rgba(217, 83, 30, 0.3);
}
.contact-card .email:hover {
    color: var(--saffron-2);
    border-bottom-color: rgba(179, 63, 14, 0.7);
}
.contact-card p {
    color: var(--muted);
    margin: 0;
    font-size: var(--t-sm);
}
.contact-card p.dev {
    font-family: 'Noto Serif Devanagari', 'Mukta', serif;
}

/* ─────────────────────────────────────────────────────────────
   FAQ
   ───────────────────────────────────────────────────────────── */
.faq details {
    background-color: var(--paper-soft);
    background-image: var(--paper-noise);
    background-blend-mode: multiply;
    border: 1px solid var(--line);
    border-radius: 12px 10px 14px 11px;
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-2);
    box-shadow: 0 4px 10px rgba(122, 90, 50, 0.07);
    transition: box-shadow 0.25s;
}
.faq details[open] {
    box-shadow: 0 10px 24px rgba(122, 90, 50, 0.12);
    border-color: var(--gold);
}
.faq summary {
    cursor: pointer;
    list-style: none;
    font-family: 'Iowan Old Style', Georgia, serif;
    font-weight: 600;
    font-size: var(--t-base);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    line-height: 1.5;
}
.faq summary.dev { font-family: 'Noto Serif Devanagari', 'Mukta', serif; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    color: var(--saffron);
    font-size: var(--t-lg);
    font-weight: 400;
    line-height: 1;
    transition: transform 0.25s;
    flex-shrink: 0;
}
.faq details[open] summary::after { content: "−"; }
.faq details[open] summary { color: var(--saffron); }
.faq details p {
    margin: var(--sp-2) 0 var(--sp-1);
    color: var(--ink-soft);
    font-size: var(--t-sm);
    line-height: 1.9;
}
.faq details p.dev { font-family: 'Noto Serif Devanagari', 'Mukta', serif; }

/* ─────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────── */
footer.site {
    margin-top: var(--sp-5);
    padding: var(--sp-4) var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg,
        rgba(252, 241, 216, 0),
        rgba(252, 241, 216, 0.55));
    color: var(--muted);
    font-size: var(--t-sm);
}
footer.site .wrap {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}
footer.site .colophon { font-style: italic; }
footer.site .colophon.dev { font-family: 'Noto Serif Devanagari', 'Mukta', serif; }
footer.site nav { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
footer.site nav a { color: var(--ink-soft); font-weight: 500; }

/* ─────────────────────────────────────────────────────────────
   Container queries — feature grid adapts to its container,
   not the viewport. So when this page lives inside a wider
   layout (e.g. an iPad split-view sidebar opens to make the
   content narrower), the cards collapse to 1 column even
   though the viewport is wide.
   ───────────────────────────────────────────────────────────── */
@supports (container-type: inline-size) {
    main { container-type: inline-size; }
    @container (max-width: 540px) {
        .features  { grid-template-columns: 1fr; }
        .stats     { grid-template-columns: repeat(2, 1fr); }
    }
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE BREAKPOINTS — tuned for joy on each form factor
   ─────────────────────────────────────────────────────────────
   The fluid `clamp()` scale handles most of the work, but these
   targeted media queries fix the corner cases where each device
   class feels off without intent.
*/

/* ── Tiny phones (iPhone SE, older Android, foldable cover) ── */
@media (max-width: 380px) {
    :root { --max-w: 96vw; }
    header.site { padding: 10px 14px; }
    header.site .brand { font-size: var(--t-sm); gap: 8px; }
    header.site .brand-logo { width: 32px; height: 32px; }
    /* Stack header + lang switcher on tiny screens */
    header.site .wrap { gap: 8px; }
    .lang-switch button { padding: 7px 11px; font-size: 11px; }
    .hero { padding: var(--sp-4) var(--sp-2) var(--sp-3); }
    .hero .hero-logo {
        width: clamp(76px, 22vw, 110px);
        height: clamp(76px, 22vw, 110px);
    }
    .hero .dev-mark { font-size: var(--t-2xl); }
    .stats { padding: var(--sp-3); gap: var(--sp-2); }
    .feature { padding: var(--sp-3); }
    .cta { padding: 11px 18px; font-size: 13px; }
    .cta-primary .cta-ornament { font-size: 1.2em; padding-right: 6px; }
}

/* ── Standard phones (iPhone 12-17, Pixel) ─────────────────── */
@media (min-width: 381px) and (max-width: 640px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
    main { padding: var(--sp-4) var(--sp-3) var(--sp-5); }
    .hero-ctas { gap: 10px; flex-direction: column; }
    .hero-ctas .cta { width: min(100%, 320px); }
}

/* ── iPad portrait & small tablets (768-900px) ─────────────── */
@media (min-width: 760px) and (max-width: 1023px) {
    :root { --max-w: 88vw; }
    main { padding: var(--sp-5) var(--sp-4) var(--sp-6); }
    .features { gap: var(--sp-4); }
    .stats { grid-template-columns: repeat(4, 1fr); }
    .divider::before, .divider::after { max-width: 200px; }
}

/* ── iPad landscape & laptops (1024-1279px) ────────────────── */
@media (min-width: 1024px) and (max-width: 1279px) {
    :root { --max-w: min(800px, 80vw); }
    .hero { padding-top: var(--sp-6); }
    .features { gap: var(--sp-4); }
}

/* ── Desktop (1280px+) ─────────────────────────────────────── */
@media (min-width: 1280px) {
    :root {
        --max-w: 860px;
        --max-w-wide: 1100px;
    }
    .hero { padding-top: var(--sp-6); padding-bottom: var(--sp-5); }
    .hero .hero-logo {
        width: 200px;
        height: 200px;
    }
    .features { gap: var(--sp-4); }
}

/* ── Big monitors (1600px+) ────────────────────────────────── */
@media (min-width: 1600px) {
    :root { --max-w: 920px; }
    /* Don't grow further — long lines kill readability */
}

/* ─────────────────────────────────────────────────────────────
   Awkward landscape sizes (iPhone landscape, foldables)
   ───────────────────────────────────────────────────────────── */
@media (max-height: 480px) and (orientation: landscape) {
    .hero { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
    .hero .hero-logo {
        width: clamp(64px, 12vh + 16px, 96px);
        height: clamp(64px, 12vh + 16px, 96px);
        margin-bottom: var(--sp-2);
    }
    .hero .dev-mark { font-size: var(--t-2xl); }
}

/* ─────────────────────────────────────────────────────────────
   Scrollbars (Chrome / Safari) — warm-tinted, subtle
   ───────────────────────────────────────────────────────────── */
@media (pointer: fine) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background: rgba(122, 90, 50, 0.25);
        border: 2px solid var(--paper-base);
        border-radius: 999px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(122, 90, 50, 0.45);
    }
    /* Firefox */
    html { scrollbar-color: rgba(122, 90, 50, 0.35) transparent; }
}

/* ─────────────────────────────────────────────────────────────
   Touch device fine-tuning
   ───────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
    /* Drop the rotation/translate on feature-card hover — looks
       buggy on touch (hover state persists after tap). */
    .feature:hover {
        transform: none;
    }
    /* Make accordion summaries even tappier */
    .faq summary { padding: 6px 0; }
}

/* ─────────────────────────────────────────────────────────────
   Dark-mode preference — we don't fully invert (paper aesthetic
   doesn't work in dark mode), but we soften the brightness and
   shift to a cooler cream that hurts the eyes less at night.
   ───────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    body {
        /* A muted paper for night — still cream-toned, not pure dark */
        background-color: #2A1E0D;
        color: #F0DDB0;
    }
    /* Re-tint the texture noise so it doesn't appear inverted */
    .feature, .faq details, .contact-card, .stats,
    .legal blockquote {
        background-color: #3A2A14;
        color: #F0DDB0;
        border-color: #5C4222;
    }
    .feature h3, .legal h3 { color: #F0DDB0; }
    .feature p, .legal p, .legal li { color: #D5C193; }
    section h2, .legal h1, .legal h2 { color: #F2C266; }
    .hero h1, .hero h1.dev { color: #F0DDB0; }
    .hero .dev-mark { color: #F4A65A; }
    .stat .num { color: #F4A65A; }
    .cta { color: #FFFAEB !important; }
    .cta.secondary { color: #F4A65A !important; border-color: #F4A65A; }
    a { color: #F4A65A; }
    a:hover { color: #FFC880; }
    .updated { color: #B89F6D; }
}

/* ─────────────────────────────────────────────────────────────
   Accessibility & motion
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Reduced-data — drop the SVG noise textures and rich shadows
   so users on slow / metered connections see a lighter page. */
@media (prefers-reduced-data: reduce) {
    body { background-image: none; }
    .feature, .faq details, .contact-card, .stats,
    .legal blockquote { background-image: none; }
}

/* ─────────────────────────────────────────────────────────────
   Print
   ───────────────────────────────────────────────────────────── */
@media print {
    header.site, footer.site, .cta, .lang-switch, .divider {
        display: none;
    }
    body { background: white; color: black; }
    main { max-width: none; padding: 0; }
    .legal a { color: black; border-bottom: none; }
    .feature, .faq details, .contact-card, .stats { box-shadow: none; }
}