/* ARAYA inner pages — SAME design system as the home (tokens, gold pattern, kicker, buttons,
   card boxes, display headings). page.php / single.php via render-inner. */
.an-inner { background: var(--an-cream); }

/* hero band — maroon + the same gold Islamic pattern used on the home hero/about */
.an-inner-hero { background-color: var(--an-maroon); color: var(--an-cream); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'170'%20height%3D'170'%20viewBox%3D'0%200%20170%20170'%20fill%3D'none'%20stroke%3D'%23C6A15B'%20stroke-opacity%3D'0.18'%20stroke-width%3D'1'%3E%3Cpath%20d%3D%22M85%2073%20Q94%2058%2085%2043%20Q76%2058%2085%2073%20Z%22%2F%3E%3Cpath%20d%3D%22M85%2097%20Q94%20112%2085%20127%20Q76%20112%2085%2097%20Z%22%2F%3E%3Cpath%20d%3D%22M73%2085%20Q58%2094%2043%2085%20Q58%2076%2073%2085%20Z%22%2F%3E%3Cpath%20d%3D%22M97%2085%20Q112%2094%20127%2085%20Q112%2076%2097%2085%20Z%22%2F%3E%3Cpath%20d%3D%22M0%20-7%20Q5%20-15.5%200%20-24%20Q-5%20-15.5%200%20-7%20Z%22%2F%3E%3Cpath%20d%3D%22M0%207%20Q5%2015.5%200%2024%20Q-5%2015.5%200%207%20Z%22%2F%3E%3Cpath%20d%3D%22M-7%200%20Q-15.5%205%20-24%200%20Q-15.5%20-5%20-7%200%20Z%22%2F%3E%3Cpath%20d%3D%22M7%200%20Q15.5%205%2024%200%20Q15.5%20-5%207%200%20Z%22%2F%3E%3Cpath%20d%3D%22M170%20-7%20Q175%20-15.5%20170%20-24%20Q165%20-15.5%20170%20-7%20Z%22%2F%3E%3Cpath%20d%3D%22M170%207%20Q175%2015.5%20170%2024%20Q165%2015.5%20170%207%20Z%22%2F%3E%3Cpath%20d%3D%22M163%200%20Q154.5%205%20146%200%20Q154.5%20-5%20163%200%20Z%22%2F%3E%3Cpath%20d%3D%22M177%200%20Q185.5%205%20194%200%20Q185.5%20-5%20177%200%20Z%22%2F%3E%3Cpath%20d%3D%22M0%20163%20Q5%20154.5%200%20146%20Q-5%20154.5%200%20163%20Z%22%2F%3E%3Cpath%20d%3D%22M0%20177%20Q5%20185.5%200%20194%20Q-5%20185.5%200%20177%20Z%22%2F%3E%3Cpath%20d%3D%22M-7%20170%20Q-15.5%20175%20-24%20170%20Q-15.5%20165%20-7%20170%20Z%22%2F%3E%3Cpath%20d%3D%22M7%20170%20Q15.5%20175%2024%20170%20Q15.5%20165%207%20170%20Z%22%2F%3E%3Cpath%20d%3D%22M170%20163%20Q175%20154.5%20170%20146%20Q165%20154.5%20170%20163%20Z%22%2F%3E%3Cpath%20d%3D%22M170%20177%20Q175%20185.5%20170%20194%20Q165%20185.5%20170%20177%20Z%22%2F%3E%3Cpath%20d%3D%22M163%20170%20Q154.5%20175%20146%20170%20Q154.5%20165%20163%20170%20Z%22%2F%3E%3Cpath%20d%3D%22M177%20170%20Q185.5%20175%20194%20170%20Q185.5%20165%20177%20170%20Z%22%2F%3E%3C%2Fsvg%3E"); }
.an-inner-hero .an-wrap { padding: clamp(44px,7vw,84px) 20px clamp(34px,4vw,52px); }
.an-crumb { font-size: 13px; color: rgba(232,213,184,.8); margin-bottom: 16px; }
.an-crumb a { color: var(--an-sand); text-decoration: none; }
.an-crumb a:hover { color: var(--an-cream); }
.an-kicker-light { color: var(--an-gold); }
.an-inner-title { font-family: var(--an-font-display); font-weight: 400; font-size: clamp(30px,4.6vw,52px); line-height: 1.14; margin: 12px 0 0; color: var(--an-cream); text-wrap: pretty; max-width: 20ch; }
.an-inner-orn { margin-top: 22px; }

/* body prose — display headings in maroon, gold-marker lists, systematic spacing */
.an-inner-body { padding: clamp(38px,5vw,64px) 0 clamp(30px,4vw,44px); }
.an-prose { max-width: 820px; margin: 0 auto; font-family: var(--an-font-body); font-size: 17.5px; line-height: 1.85; color: var(--an-ink); }
.an-prose > *:first-child { margin-top: 0; }
.an-prose > p:first-of-type { font-size: 19px; color: var(--an-ink-soft); }
.an-prose h1,.an-prose h2,.an-prose h3,.an-prose h4,.an-prose h5 { font-family: var(--an-font-display); font-weight: 400; color: var(--an-maroon); line-height: 1.22; margin: 1.7em 0 .5em; }
.an-prose h2 { font-size: clamp(25px,3vw,34px); }
.an-prose h3 { font-size: clamp(21px,2.4vw,26px); }
.an-prose h4 { font-size: 20px; }
.an-prose p { margin: 0 0 1.15em; }
.an-prose a { color: var(--an-gold-strong); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.an-prose a:hover { color: var(--an-maroon); }
.an-prose ul,.an-prose ol { margin: 0 0 1.3em; padding-inline-start: 1.5em; }
.an-prose ul { list-style: none; padding-inline-start: 0; }
.an-prose ul > li { position: relative; padding-inline-start: 1.6em; margin: .5em 0; }
.an-prose ul > li::before { content: ""; position: absolute; inset-inline-start: .2em; top: .62em; width: 7px; height: 7px; border: 1.4px solid var(--an-gold); transform: rotate(45deg); }
.an-prose ol > li { margin: .5em 0; }
.an-prose blockquote { border-inline-start: 3px solid var(--an-gold); background: var(--an-cream-tint); margin: 1.7em 0; padding: 16px 24px; border-radius: 12px; color: var(--an-ink-soft); font-size: 18px; }
.an-prose strong { color: var(--an-maroon-ink); }
.an-prose hr { border: 0; height: 1px; background: rgba(94,27,38,.14); margin: 2.2em 0; }

/* media */
.an-prose img,.an-prose video { max-width: 100%; height: auto; border-radius: var(--an-radius-card); display: block; margin: 1.5em auto; }
.an-prose figure { margin: 1.6em 0; }
.an-prose figcaption { font-size: 13.5px; color: var(--an-ink-muted); text-align: center; margin-top: 8px; }
.an-prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 15.5px; }
.an-prose th,.an-prose td { border: 1px solid rgba(94,27,38,.14); padding: 11px 13px; text-align: start; }
.an-prose th { background: var(--an-cream-tint); font-weight: 600; color: var(--an-maroon); }

/* closing CTA band — same card language as the home */
.an-inner-cta { padding: 0 0 clamp(52px,7vw,84px); }
.an-inner-cta-card { background: var(--an-cream-card); border: 1px solid rgba(94,27,38,.14); border-radius: var(--an-radius-card); padding: clamp(26px,3vw,38px); display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; box-shadow: 0 18px 40px rgba(94,27,38,.08); }
.an-inner-cta-title { font-family: var(--an-font-display); font-weight: 400; font-size: clamp(24px,3vw,32px); color: var(--an-maroon); margin: 8px 0 0; }
.an-inner-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.an-btn-ghost-dark { text-decoration: none; border: 1.5px solid rgba(94,27,38,.4); color: var(--an-maroon); padding: 15px 26px; border-radius: var(--an-radius-pill); font-size: 15.5px; font-weight: 600; }
.an-btn-ghost-dark:hover { border-color: var(--an-maroon); background: rgba(94,27,38,.05); }

/* --- responsive media: embeds, galleries (desktop/tablet/mobile) --- */
.an-prose .an-embed { margin: 1.6em auto; width: 100%; }
.an-prose .an-embed-video { position: relative; }
.an-prose .an-embed-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--an-radius-card); }
.an-prose .an-embed-card { margin-inline: auto; }
.an-prose .an-embed-card iframe { width: 100%; height: 100%; border: 0; display: block; }
.an-prose .wp-block-gallery,.an-prose .blocks-gallery-grid,.an-prose .gallery { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 10px; margin: 1.6em 0; list-style: none; padding: 0; }
.an-prose .wp-block-gallery figure,.an-prose .gallery-item { margin: 0 !important; width: auto !important; }
.an-prose .wp-block-gallery img,.an-prose .gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; aspect-ratio: 4/3; }
.an-prose .alignleft,.an-prose .alignright { max-width: 46%; }
.an-prose .aligncenter { margin-inline: auto; }

@media (max-width: 1024px) { .an-prose { font-size: 16.5px; } }
@media (max-width: 640px) {
  .an-prose { font-size: 16px; }
  .an-prose > p:first-of-type { font-size: 17.5px; }
  .an-prose .an-embed-card { max-width: 100% !important; }
  .an-prose .alignleft,.an-prose .alignright { float: none; max-width: 100%; margin-inline: auto; }
  .an-prose .wp-block-gallery,.an-prose .gallery { grid-template-columns: repeat(2,1fr); }
  .an-inner-cta-card { flex-direction: column; align-items: stretch; text-align: start; }
  .an-inner-cta-actions { }
}

/* consolidation: inner titles reference the shared scale */
.an-inner-title { font-size: var(--an-h1); }
.an-prose h2 { font-size: var(--an-h2); }
.an-prose h3 { font-size: var(--an-h3); }
.an-inner-cta-title { font-size: var(--an-h2); }
.an-inner-cta-card { box-shadow: 0 18px 40px rgba(94,27,38,.12); }   /* match home card shadow */

/* bilingual quote block (converted from legacy text-images) */
.an-prose .an-bq { border: 0; border-inline-start: 3px solid var(--an-gold); background: var(--an-cream-tint); border-radius: 12px; padding: 18px 22px; margin: 1.6em 0; }
.an-prose .an-bq p { margin: 0; font-family: var(--an-font-display); font-size: 19px; line-height: 1.6; color: var(--an-maroon); }
.an-prose .an-bq .an-bq-en { margin-top: 8px; font-family: var(--an-font-body); font-size: 14.5px; color: var(--an-ink-muted); font-style: italic; }

/* TikTok embeds -> centered portrait video card in the design system */
.an-page .an-embed-tiktok, .an-page blockquote.tiktok-embed {
  max-width: 325px; margin: 1.8em auto; border-radius: var(--an-radius-card);
  overflow: hidden; background: var(--an-cream-card); border: 1px solid var(--an-cream-tint);
  box-shadow: 0 10px 30px rgba(94,27,38,.10);
}
.an-page .an-embed-tiktok iframe { width: 100%; height: 100%; border: 0; display: block; }
.an-page blockquote.tiktok-embed { padding: 0; border-inline-start: 0; min-width: 0 !important; }
.an-page blockquote.tiktok-embed iframe { border-radius: var(--an-radius-card); }
@media (max-width: 640px) { .an-page .an-embed-tiktok, .an-page blockquote.tiktok-embed { max-width: min(325px, 86vw); } }

/* short atmosphere gallery — mobile-safe (fixed ratio, no broken layouts) */
.an-prose .an-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 1.6em 0; padding: 0; list-style: none; }
.an-prose .an-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; display: block; margin: 0; }
@media (max-width: 640px) { .an-prose .an-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* founder 2026-07-12: NO portrait images in content — every prose image crops to landscape 16:9 */
.an-prose p img, .an-prose figure img, .an-prose > img { width: 100%; aspect-ratio: 16/9 !important; object-fit: cover; border-radius: 14px; height: auto; }
.an-prose .an-embed img, .an-prose .an-embed-tiktok img { aspect-ratio: auto; } /* video posters keep their frame */

/* video boxes (founder 2026-07-12): portrait TikTok = SMALL compact card, never dominates the page */
.an-page .an-embed-tiktok, .an-page blockquote.tiktok-embed { max-width: 250px; margin: 1.4em auto; }
/* landscape video (YouTube/Vimeo) already fluid 16:9 via .an-embed-video — full column width */

/* members-only gate card (inactive until AN_MEMBERS_GATE) */
.an-prose .an-members-gate { margin: 2em 0; padding: 26px; text-align: center; background: var(--an-cream-tint); border: 1px dashed var(--an-gold); border-radius: var(--an-radius-card); }
.an-prose .an-members-gate p { margin: 0 0 16px; color: var(--an-ink-soft); }

/* document/prose polish (founder: clean pretty boxes) — tables & warning quotes as cards */
.an-prose table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.6em 0; background: var(--an-cream-card); border: 1px solid rgba(198,161,91,.35); border-radius: 14px; overflow: hidden; font-size: 14.5px; }
.an-prose table th { background: var(--an-maroon); color: var(--an-cream); text-align: left; padding: 12px 14px; font-weight: 600; }
.an-prose table td { padding: 11px 14px; border-top: 1px solid var(--an-cream-tint); vertical-align: top; }
.an-prose table tr:nth-child(even) td { background: var(--an-cream); }
.an-prose blockquote:not(.an-bq) { border: 0; border-inline-start: 4px solid var(--an-gold); background: var(--an-cream-tint); border-radius: 12px; padding: 18px 22px; margin: 1.6em 0; }
.an-prose blockquote:not(.an-bq) li { margin: 6px 0; }
.an-doc-backlink { margin-top: 2em; } .an-doc-backlink a { color: var(--an-maroon); font-weight: 700; text-decoration: none; } .an-doc-backlink a:hover { color: var(--an-gold-strong); }
@media (max-width: 640px) { .an-prose table { display: block; overflow-x: auto; } }

/* simple in-page TOC box (document pages) */
.an-prose .an-toc { background: var(--an-cream-card); border: 1px solid rgba(198,161,91,.35); border-radius: 14px; padding: 18px 22px; margin: 1.6em 0; }
.an-prose .an-toc strong { color: var(--an-maroon); display: block; margin-bottom: 10px; }
.an-prose .an-toc ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; }
.an-prose .an-toc a { color: var(--an-gold-strong); font-weight: 600; text-decoration: none; font-size: 14.5px; }
.an-prose .an-toc a:hover { color: var(--an-maroon); text-decoration: underline; }
@media (max-width: 640px) { .an-prose .an-toc ul { grid-template-columns: 1fr; } }

/* certificate-type boxes -> click through to their document table */
.an-prose a.an-typebox { display: block; background: var(--an-cream-card); border: 1px solid rgba(198,161,91,.4); border-radius: var(--an-radius-card); padding: 22px 26px; margin: 1.4em 0; text-decoration: none; color: var(--an-ink); transition: box-shadow var(--an-transition), transform var(--an-transition); }
.an-prose a.an-typebox:hover { box-shadow: 0 12px 36px rgba(94,27,38,.12); transform: translateY(-2px); }
.an-prose a.an-typebox h3 { margin-top: 0; color: var(--an-maroon); }
.an-prose a.an-typebox li, .an-prose a.an-typebox p { color: var(--an-ink-soft); }
.an-prose .an-typebox-go { display: inline-block; margin-top: 12px; color: var(--an-gold-strong); font-weight: 700; font-size: 14.5px; }
.an-prose a.an-typebox:hover .an-typebox-go { color: var(--an-maroon); text-decoration: underline; }

/* two type boxes side-by-side with clear separation */
.an-prose .an-typebox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 1.6em 0; }
.an-prose .an-typebox-grid a.an-typebox { margin: 0; display: flex; flex-direction: column; }
.an-prose .an-typebox-grid a.an-typebox .an-typebox-go { margin-top: auto; padding-top: 12px; }
@media (max-width: 800px) { .an-prose .an-typebox-grid { grid-template-columns: 1fr; } }

/* typebox v2: div + stretched go-link (wpautop-safe) */
.an-prose .an-typebox { position: relative; background: var(--an-cream-card); border: 1px solid rgba(198,161,91,.4); border-radius: var(--an-radius-card); padding: 22px 26px; }
.an-prose .an-typebox:hover { box-shadow: 0 12px 36px rgba(94,27,38,.12); }
.an-prose .an-typebox .an-typebox-go { display: inline-block; margin-top: 14px; color: var(--an-gold-strong); font-weight: 700; font-size: 14.5px; text-decoration: none; }
.an-prose .an-typebox .an-typebox-go::after { content: ""; position: absolute; inset: 0; }
.an-prose .an-typebox:hover .an-typebox-go { color: var(--an-maroon); text-decoration: underline; }

/* Wali order-of-precedence — vertical DAG stepper (master wali article 6513/6516).
 * One gold-numbered node per tier, connected by a vertical line; tiers 7-8 (ARAYA
 * alternative arrangements, not the religious family order) get the gold-tinted card. */
.an-prose .an-wali-dag { position: relative; margin: 26px 0 10px; padding: 0; }
.an-prose .an-wali-dag::before { content: ""; position: absolute; left: 21px; top: 14px; bottom: 26px; width: 2px; background: linear-gradient(180deg, rgba(198,161,91,.85), rgba(198,161,91,.25)); }
.an-prose .an-wali-node { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 0 0 22px 0; }
.an-prose .an-wali-node:last-child { padding-bottom: 0; }
.an-prose .an-wali-num { position: relative; z-index: 1; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: var(--an-maroon); color: #F5E9D8; font-family: 'Marcellus', serif; font-size: 19px; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(198,161,91,.9); box-shadow: 0 4px 14px rgba(94,27,38,.22); }
.an-prose .an-wali-body { flex: 1; background: var(--an-cream-card); border: 1px solid rgba(198,161,91,.38); border-radius: var(--an-radius-card); padding: 14px 18px; }
.an-prose .an-wali-body > strong { display: block; color: var(--an-maroon); font-size: 16.5px; line-height: 1.45; }
.an-prose .an-wali-note { display: block; margin-top: 6px; color: rgba(58,34,38,.78); font-size: 14.5px; line-height: 1.65; }
.an-prose .an-wali-note strong { display: inline; color: var(--an-maroon); font-size: inherit; }
.an-prose .an-wali-node-alt .an-wali-num { background: var(--an-gold-strong); color: var(--an-maroon); border-color: var(--an-maroon); }
.an-prose .an-wali-node-alt .an-wali-body { background: rgba(198,161,91,.12); border-color: rgba(198,161,91,.65); }
@media (max-width: 640px) {
  .an-prose .an-wali-dag::before { left: 17px; }
  .an-prose .an-wali-num { flex-basis: 36px; width: 36px; height: 36px; font-size: 16px; }
  .an-prose .an-wali-body { padding: 12px 14px; }
}

/* Wali DAG group separation (founder 2026-07-13): tiers 1-6 = religious fiqh order,
 * tiers 7-8 = ARAYA's own arrangements — labelled groups + dashed divider between them. */
.an-prose .an-wali-group-label { position: relative; z-index: 1; display: inline-block; margin: 0 0 16px 60px; padding: 6px 14px; border: 1px solid rgba(198,161,91,.55); border-radius: var(--an-radius-pill); background: var(--an-cream-card); color: var(--an-maroon); font-weight: 700; font-size: 13.5px; letter-spacing: .02em; }
.an-prose .an-wali-divider { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin: 4px 0 20px; }
.an-prose .an-wali-divider::before { content: ""; flex: 0 0 46px; border-top: 2px dashed rgba(198,161,91,.75); }
.an-prose .an-wali-divider::after { content: ""; flex: 1; border-top: 2px dashed rgba(198,161,91,.75); }
.an-prose .an-wali-divider span { flex: 0 1 auto; padding: 6px 14px; border: 1px dashed rgba(198,161,91,.8); border-radius: var(--an-radius-pill); background: rgba(198,161,91,.12); color: var(--an-maroon); font-weight: 700; font-size: 13.5px; }
@media (max-width: 640px) { .an-prose .an-wali-group-label { margin-left: 48px; } .an-prose .an-wali-divider::before { flex-basis: 34px; } }

/* Package page "convenience-store menu" — scan-fast items with dotted price leaders,
 * top menuboard index jumps to per-item anchors (founder 2026-07-14). */
.an-prose .an-menuboard { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 18px 0 10px; }
.an-prose .an-menuboard-col { background: var(--an-cream-card); border: 1px solid rgba(198,161,91,.4); border-radius: var(--an-radius-card); padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; }
.an-prose .an-menuboard-col > strong { color: var(--an-maroon); font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; }
.an-prose .an-menuboard-col a { text-decoration: none; color: var(--an-ink); font-size: 14.5px; line-height: 1.5; border-bottom: 1px dashed rgba(198,161,91,.4); padding-bottom: 6px; }
.an-prose .an-menuboard-col a:hover { color: var(--an-gold-strong); }
.an-prose .an-menu { margin: 14px 0 6px; }
.an-prose .an-menu-item { display: flex; align-items: baseline; gap: 10px; padding: 13px 2px; border-bottom: 1px solid rgba(94,27,38,.08); scroll-margin-top: 90px; }
.an-prose .an-menu-name { flex: 1 1 auto; min-width: 0; }
.an-prose .an-menu-name strong { color: var(--an-maroon); font-size: 16.5px; }
.an-prose .an-menu-desc { display: block; color: rgba(58,34,38,.72); font-size: 14px; line-height: 1.6; margin-top: 2px; }
.an-prose .an-menu-note { display: block; color: var(--an-gold-strong); font-size: 13px; line-height: 1.55; margin-top: 4px; font-weight: 600; }
.an-prose .an-menu-dots { flex: 0 1 60px; border-bottom: 2px dotted rgba(198,161,91,.7); transform: translateY(-4px); }
.an-prose .an-menu-price { flex: 0 0 auto; color: var(--an-maroon); font-weight: 700; font-size: 15.5px; white-space: nowrap; }
.an-prose .an-menu-wa { flex: 0 0 auto; text-decoration: none; background: var(--an-gold); color: var(--an-maroon-ink) !important; font-weight: 700; font-size: 13.5px; padding: 7px 14px; border-radius: var(--an-radius-pill); }
.an-prose .an-menu-fact { font-size: 13.5px; color: var(--an-ink-muted); line-height: 1.7; margin-top: 4px; }
@media (max-width: 720px) {
  .an-prose .an-menuboard { grid-template-columns: 1fr; }
  .an-prose .an-menu-item { flex-wrap: wrap; }
  .an-prose .an-menu-dots { display: none; }
  .an-prose .an-menu-price { margin-left: auto; }
  .an-prose .an-menu-wa { margin-left: auto; }
}
.an-prose .an-menu-reco { background: rgba(198,161,91,.10); border: 1px solid rgba(198,161,91,.5); border-radius: var(--an-radius-card); padding: 13px 14px; }
.an-prose .an-menu-badge { display: inline-block; margin-left: 8px; background: var(--an-gold); color: var(--an-maroon-ink); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; padding: 2px 10px; border-radius: var(--an-radius-pill); vertical-align: 2px; }
.an-prose .an-menu-fallback { margin: 10px 0 0; padding: 12px 16px; background: var(--an-cream-tint); border: 1px dashed rgba(198,161,91,.6); border-radius: var(--an-radius-card); font-size: 14px; line-height: 1.7; }

/* Package page v2 refinements from the Claude Design mock (designs/package-page.html):
 * sticky category jump bar, numbered section rings, zebra menu rows, aligned price column. */
.an-prose .an-menu-stickynav { position: sticky; top: 0; z-index: 9; background: var(--an-cream); border-bottom: 1px solid rgba(198,161,91,.35); padding: 10px 0; display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.an-prose .an-menu-stickynav a { text-decoration: none; color: var(--an-maroon); font-size: 13px; font-weight: 700; border: 1px solid rgba(198,161,91,.5); border-radius: var(--an-radius-pill); padding: 6px 13px; background: var(--an-cream-card); }
.an-prose .an-menu-stickynav a:hover { background: var(--an-gold); color: var(--an-maroon-ink); }
.an-prose h2 .an-sec-n { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; background: var(--an-maroon); color: #F5E9D8; align-items: center; justify-content: center; font-size: 15px; border: 2px solid var(--an-gold); margin-right: 10px; vertical-align: -6px; font-family: var(--an-font-body); }
.an-prose .an-menu-item:nth-child(even) { background: rgba(198,161,91,.05); }
.an-prose .an-menu-price { min-width: 92px; text-align: right; }

/* Package v3 — card grid, no descriptions (founder 2026-07-14): each category in its own
 * boxed section, items as separate cards (name + price + book), 2-col desktop, 1-col mobile. */
.an-prose .an-menu-sec { background: var(--an-cream-card); border: 1px solid rgba(198,161,91,.42); border-radius: var(--an-radius-card); padding: 20px 22px 22px; margin: 22px 0; }
.an-prose .an-menu-sec > h2 { margin-top: 0; font-size: clamp(21px,2.6vw,27px); }
.an-prose .an-menu-sec .an-menu { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin: 8px 0 0; }
.an-prose .an-menu-sec .an-menu-item, .an-prose .an-menu-sec .an-menu-item:nth-child(even) { display: flex; flex-direction: column; align-items: stretch; gap: 8px; background: var(--an-cream); border: 1px solid rgba(198,161,91,.38); border-radius: 14px; padding: 16px 16px 14px; border-bottom: 1px solid rgba(198,161,91,.38); }
.an-prose .an-menu-sec .an-menu-item:hover { box-shadow: 0 10px 26px rgba(94,27,38,.10); }
.an-prose .an-menu-sec .an-menu-reco { background: rgba(198,161,91,.13); border-color: rgba(198,161,91,.75); }
.an-prose .an-menu-sec .an-menu-name strong { font-size: 17px; display: block; }
.an-prose .an-menu-sec .an-menu-price { text-align: left; font-size: 18px; margin-top: auto; }
.an-prose .an-menu-sec .an-menu-wa { align-self: flex-start; margin-top: 2px; }
.an-prose .an-menu-advisor { display: flex; flex-direction: column; gap: 10px; background: var(--an-cream-card); border: 1.5px solid var(--an-gold); border-radius: var(--an-radius-card); padding: 18px 20px; margin: 16px 0 6px; }
.an-prose .an-menu-advisor strong { color: var(--an-maroon); font-size: 16.5px; }
.an-prose .an-menu-advisor span { font-size: 14px; color: rgba(58,34,38,.78); line-height: 1.7; }
.an-prose .an-menu-advisor .an-btn-gold { align-self: flex-start; color: var(--an-maroon-ink) !important; text-decoration: none !important; }
.an-prose .an-menuboard-col a em { font-style: normal; color: var(--an-maroon); font-weight: 700; font-size: 12.5px; }
@media (max-width: 720px) { .an-prose .an-menu-sec .an-menu { grid-template-columns: 1fr; } .an-prose .an-menu-sec { padding: 16px 14px; } }

/* Package v4 — trust strip + terms card + editorial polish (founder 2026-07-14: v3 "still not
 * approved", scan-fast + prices instantly visible + separated cards + new trust strip at menu end). */
.an-prose .an-trust-strip { margin: 32px 0 8px; padding: 32px 28px 30px; background: var(--an-cream-card); border: 1px solid rgba(198,161,91,.42); border-top: 3px solid var(--an-gold); border-radius: var(--an-radius-card); text-align: center; }
.an-prose .an-trust-strip h2 { margin: 6px 0 20px; }
.an-prose .an-trust-flags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin: 0 auto 24px; max-width: 640px; }
.an-prose .an-trust-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--an-ink-soft); border: 1px solid rgba(198,161,91,.3); border-radius: var(--an-radius-pill); padding: 5px 12px; }
.an-prose .an-trust-flag .an-flag-emoji { font-size: 18px; line-height: 1; }
.an-prose .an-trust-quote { font-family: var(--an-font-display); font-style: italic; font-size: clamp(17px,2.1vw,21px); line-height: 1.6; color: var(--an-maroon); max-width: 640px; margin: 0 auto; }
.an-prose .an-trust-quote-who { display: block; font-family: var(--an-font-body); font-style: normal; font-size: 13.5px; color: var(--an-ink-muted); margin-top: 12px; }
.an-prose .an-trust-cta { margin-top: 22px; }
@media (max-width: 640px) { .an-prose .an-trust-strip { padding: 24px 16px 24px; } .an-prose .an-trust-flag { font-size: 12.5px; padding: 4px 10px; } }
.an-prose .an-terms-card { background: var(--an-cream-card); border: 1px solid rgba(198,161,91,.4); border-radius: var(--an-radius-card); padding: 22px 26px 20px; margin: 22px 0; }
.an-prose .an-terms-card > h2 { margin-top: 0; }
.an-prose .an-terms-card ul { margin-bottom: 0; }
.an-prose .an-menuboard { gap: 18px; margin: 26px 0 18px; }
.an-prose .an-menuboard-col { padding: 18px 20px; }
.an-prose .an-menu-sec { margin: 30px 0; padding: 26px 26px 30px; }
.an-prose .an-menu-sec .an-menu-item { box-shadow: 0 6px 18px rgba(94,27,38,.05); }
.an-prose .an-menu-sec .an-menu-price { font-family: var(--an-font-display); font-size: 20px; }
/* Package v4.1 — product icons (gold line style, matches theme icon language) */
.an-prose .an-menu-ico { display: inline-flex; width: 38px; height: 38px; border-radius: 10px; background: rgba(198,161,91,.12); border: 1px solid rgba(198,161,91,.4); align-items: center; justify-content: center; margin-bottom: 6px; }
.an-prose .an-menu-ico svg { width: 22px; height: 22px; }
/* Package v4.2 — compact menuboard rows with mini icons */
.an-prose .an-menuboard-col a { display: flex; align-items: center; gap: 8px; }
.an-prose .an-bico { display: inline-flex; width: 20px; height: 20px; flex: 0 0 20px; align-items: center; justify-content: center; }
.an-prose .an-bico svg { width: 17px; height: 17px; }
.an-prose .an-menuboard-col a em { margin-left: auto; white-space: nowrap; }
/* Faith-inclusion badge (founder 2026-07-14): short mobile-friendly symbol, wording matches home FAQ */
.an-prose .an-faith-badge { display: flex; align-items: flex-start; gap: 10px; background: rgba(198,161,91,.10); border: 1px solid rgba(198,161,91,.45); border-radius: var(--an-radius-card); padding: 12px 14px; margin: 14px 0 6px; font-size: 13.5px; line-height: 1.65; color: rgba(58,34,38,.85); }
.an-prose .an-faith-badge strong { display: block; color: var(--an-maroon); font-size: 14px; }
.an-prose .an-faith-ico { flex: 0 0 30px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--an-cream); border: 1px solid rgba(198,161,91,.4); }
.an-prose .an-faith-ico svg { width: 19px; height: 19px; }

/* Price-menu DAG (founder 2026-07-14): menuboard becomes a vertical stepper — numbered
 * category rings on a gold spine, items cascade with icon + dotted leader + price. */
.an-prose .an-pricedag { position: relative; margin: 18px 0 10px; padding-left: 2px; }
.an-prose .an-pricedag::before { content: ""; position: absolute; left: 17px; top: 16px; bottom: 16px; width: 2px; background: linear-gradient(180deg, rgba(198,161,91,.85), rgba(198,161,91,.25)); }
.an-prose .an-pricedag-group { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; }
.an-prose .an-pricedag-num { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: var(--an-maroon); color: #F5E9D8; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; border: 2px solid var(--an-gold); }
.an-prose .an-pricedag-leader { flex: 1 1 auto; border-bottom: 2px dotted rgba(198,161,91,.55); transform: translateY(-4px); min-width: 14px; }
.an-prose .an-pricedag-group strong { color: var(--an-maroon); font-size: 15.5px; letter-spacing: .02em; }
.an-prose .an-pricedag-item { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px 34px; padding: 7px 2px; background: none; border: none; text-decoration: none; color: var(--an-ink); font-size: 14.5px; }
.an-prose .an-pricedag-item:hover .an-pricedag-name { color: var(--an-gold-strong); }
.an-prose .an-pricedag-name { font-weight: 600; color: var(--an-maroon); flex: 0 1 auto; min-width: 0; }
.an-prose .an-pricedag-item em { font-style: normal; font-weight: 700; color: var(--an-maroon); white-space: nowrap; font-size: 13.5px; flex: 0 0 auto; }
@media (max-width: 640px) { .an-prose .an-pricedag-item { margin-left: 22px; } .an-prose .an-pricedag-name { font-size: 13px; } .an-prose .an-pricedag-item em { font-size: 12.5px; } }
/* Package v4.4 — per-card detail links (mirror the home cards' read-more affordance) */
.an-prose .an-menu-more { display: block; margin-top: 8px; }
.an-prose .an-menu-more a { color: var(--an-gold-strong); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.an-prose .an-menu-more a:hover { color: var(--an-maroon); text-decoration: underline; }

/* ===== Mobile overhaul 2026-07-14 — inline prose link tap comfort =====
 * Audit (DOM measurement @390px): standalone one-line prose links ("เช็คลิสต์เอกสารนิกะห์ฉบับเต็ม →",
 * "แชทกับ ARAYA ทาง WhatsApp", hashtag/caption-style links) measured only ~19-23px tall on a real
 * phone — well under the 40-44px guideline. These are inline text runs inside sentences/short
 * lines (not standalone buttons), so we can't force a fixed min-height without breaking wrapped
 * text; instead add symmetric vertical padding + matching negative margin so the extra tap area
 * expands the hit target without shifting the visible line position or reflowing content. */
@media (max-width: 640px) {
  .an-prose a { padding-top: 5px; padding-bottom: 5px; margin-top: -5px; margin-bottom: -5px; }
}
/* Package page MOBILE ONLY (founder 2026-07-14): hero section hidden — land straight on the price menu.
 * Desktop unchanged; H1 stays in DOM for SEO. */
@media (max-width: 899px) { .an-inner .an-nk-hero { display: none; } }
/* Whole-card click (founder 2026-07-14): stretched link replaces the 'read full details' text */
.an-prose .an-menu-sec .an-menu-item { position: relative; }
.an-prose .an-menu-golink { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

/* Portfolio hub (founder 2026-07-14): bigger, taller image-first galleries than the default
 * atmosphere strip — 2-col mobile / 3-col desktop, portrait-leaning crop so real event photos
 * read as the hero content, not a decorative strip. Append-only, .an-gallery base untouched. */
.an-prose .an-gallery.an-portfolio-gallery { gap: 14px; }
.an-prose .an-gallery.an-portfolio-gallery img { aspect-ratio: 3/4; }
@media (max-width: 640px) { .an-prose .an-gallery.an-portfolio-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (min-width: 641px) { .an-prose .an-gallery.an-portfolio-gallery { grid-template-columns: repeat(3, 1fr); } }
.an-prose .an-portfolio-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 2em 0 1em; }
.an-prose .an-menu-item:hover { border-color: var(--an-gold-strong); }
/* ── booking-steps DAG ([an_booking_dag], single source: inc/services-data.php) ── */
.an-prose .an-bookdag { background: var(--an-cream-card); border: 1px solid rgba(198,161,91,.42); border-radius: var(--an-radius-card); padding: 20px 22px 22px; margin: 22px 0; }
.an-prose .an-bookdag-steps { list-style: none; margin: 10px 0 0; padding: 0; }
.an-prose .an-bookdag-step { display: flex; align-items: flex-start; gap: 12px; position: relative; padding: 0 0 18px 0; margin: 0; }
.an-prose .an-bookdag-step::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: rgba(198,161,91,.35); }
.an-prose .an-bookdag-step:last-child { padding-bottom: 0; }
.an-prose .an-bookdag-step:last-child::before { display: none; }
.an-prose .an-bookdag-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--an-gold); color: #3a1116; font-size: 13px; font-weight: 700; flex: none; position: relative; z-index: 1; }
.an-prose .an-bookdag-branch .an-bookdag-num { background: var(--an-maroon); color: var(--an-cream); }
.an-prose .an-bookdag-body { display: block; min-width: 0; }
.an-prose .an-bookdag-body strong { display: block; color: var(--an-maroon); }
.an-prose .an-bookdag-body > span { display: block; font-size: 14.5px; color: var(--an-ink-muted); overflow-wrap: break-word; }
.an-prose .an-bookdag-note { margin: 12px 0 0; font-size: 13.5px; color: var(--an-ink-muted); }
.an-prose .an-bookdag-body strong a { color: inherit; text-decoration: underline; text-decoration-color: rgba(198,161,91,.6); }
.an-prose .an-bookdag-ico { flex: none; width: 26px; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.an-prose .an-bookdag-ico svg { width: 24px; height: 24px; }