/* ==========================================================================
   KUMAON AFTER DARK - inner-page theme layer (rev 23, 2026-09-24)

   The homepage runs its own "Kumaon After Dark" design system inline in
   index.html. Every other page runs the older light system (style.css, or a
   legacy inlined copy of it). This file carries the homepage look onto every
   inner page without touching the homepage and without moving any homepage
   block into the inner system.

   How it works
   1. It is linked as the LAST stylesheet in <head> on every inner page, so at
      equal specificity it wins over style.css and over the inlined copies.
   2. The light system is written almost entirely against design tokens, so
      step 1 below re-points the tokens at the homepage values. That alone
      converts most components, including the ~4,900 inline style="" colours.
   3. The light system also uses a few tokens "the other way round"
      (--charcoal as a background, --pine as text). Those spots are fixed
      explicitly in the component sections that follow.
   4. Runtime widgets (site-search, tts-reader) read the same tokens and follow
      automatically. ld-rail.js carries its own dark palette.

   Token note: --terracotta-deep is lifted from #A8431F to #E8764F here. In
   the light system it is mostly a TEXT accent (chips, prices, table strongs),
   and #A8431F on the dark ground fails contrast. #E8764F is the colour the
   homepage already uses for button hover, so hover states stay identical.
   ========================================================================== */

/* ---- 1. tokens: identical to the homepage except --terracotta-deep ---- */
:root{
  --terracotta:#D9633C; --terracotta-deep:#E8764F; --terracotta-soft:#3A241C;
  --pine:#16302A; --pine-soft:#1E3E35; --pine-text:#8FD3B4;
  --gold:#D9B45F; --gold-soft:#3A3220;
  --night:#100E0C; --surface:#1A1714; --surface-2:#211D19;
  --cream:#1A1714; --paper:#211D19;
  --ink:#F4EFE6; --charcoal:#F4EFE6; --slate:#A79E92; --line:rgba(244,239,230,.13);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 10px 30px rgba(0,0,0,.45);
  --shadow-lg:0 30px 70px rgba(0,0,0,.55);
  --radius-sm:8px; --radius:14px; --radius-lg:22px;
  --container:1260px; --container-narrow:860px;
  color-scheme:dark;
}

/* ---- 2. base type and ground ---- */
html{background:var(--night)}
body{background:var(--night);color:var(--ink);line-height:1.75;font-family:'Lato','Noto Sans Devanagari',sans-serif}
h1,h2,h3,h4,h5{color:var(--ink);font-weight:700;line-height:1.12;letter-spacing:-.02em}
h1{letter-spacing:-.03em}
h3{font-weight:600}
a{color:var(--terracotta)}
a:hover{color:var(--gold)}
::selection{background:var(--terracotta);color:#fff}
strong,b{color:inherit}
.lead,.section-head p,.section-head>p{color:var(--slate)}
hr,.divider{background:var(--line);border-color:var(--line)}
blockquote{border-color:var(--gold)}
code,kbd{background:rgba(255,255,255,.06);color:var(--ink);border-radius:4px;padding:1px 5px}

.eyebrow{font-size:.72rem;letter-spacing:.24em;font-weight:700;color:var(--gold)}
.eyebrow::before{width:24px;height:1px;border-radius:0;background:var(--gold);margin-right:11px;vertical-align:5px}
.micro,.feature-card .micro{font-size:.7rem;letter-spacing:.18em;font-weight:700;color:var(--gold)}
.motif-divider,.motif-divider .glyph{color:var(--gold)}
.motif-divider::before,.motif-divider::after{background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* ---- 3. buttons: homepage set ---- */
.btn{font-weight:700}
.btn-primary{background:var(--terracotta);color:#fff!important;box-shadow:0 10px 30px rgba(217,99,60,.34)}
.btn-primary:hover{background:#E8764F;color:#fff!important;transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.07);color:#fff!important;border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(255,255,255,.15);color:#fff!important}
/* .btn-dark and .btn-outline become the homepage .btn-line */
.btn-dark,.btn-outline,.hotel-card .btn-dark{background:transparent;color:var(--ink)!important;border:1.5px solid var(--gold)}
.btn-dark:hover,.btn-outline:hover,.hotel-card .btn-dark:hover{background:var(--gold);border-color:var(--gold);color:var(--night)!important}
.read-more,.link-arrow,.feature-card .read-more{color:var(--gold);font-weight:700}
.read-more:hover,.link-arrow:hover,.feature-card .read-more:hover{color:var(--terracotta)}

/* ---- 4. header chrome: match the homepage glass exactly ---- */
.site-header{background:rgba(16,14,12,.82);border-bottom:1px solid var(--line)}
.nav-links>li>a::after,.nav-links a.active::after{height:1.5px;border-radius:0;background:var(--gold)}
.nav-links a.active{color:var(--gold)}
.nav-cta{border:1.5px solid rgba(244,239,230,.4)}
.nav-cta:hover{background:var(--ink);color:var(--night)!important}
.nav-cta-search,.nav-cta.nav-cta-search{background:var(--terracotta);border:1.5px solid var(--terracotta);color:#fff!important}
.nav-cta-search:hover,.nav-cta.nav-cta-search:hover{background:#E8764F;border-color:#E8764F;color:#fff!important}
.mobile-open .nav-links{background:var(--surface);border-bottom:1px solid var(--line)}
/* the light system centred the open mobile menu; the homepage aligns it left */
@media (max-width:1080px){
  .mobile-open .nav-links{align-items:flex-start;padding:20px 24px;gap:18px}
  .mobile-open .nav-links>li{width:auto}
  .mobile-open .has-dropdown{width:100%;display:block}
  .nav-dropdown-toggle{width:100%;justify-content:space-between}
}
/* brand lock-up and header controls: homepage sizes, spacing and tracking,
   measured element by element against index.html at 1366, 1024, 600 and 375 px */
.brand{font-family:'Playfair Display','Noto Serif Devanagari',serif;font-size:1.18rem;font-weight:700;gap:10px;letter-spacing:normal}
.brand small{font-family:'Lato','Noto Sans Devanagari',sans-serif;font-size:.6rem;letter-spacing:.22em;font-weight:700}
.nav-lang{font-family:inherit;font-weight:700;font-size:.83rem;padding:9px 16px;gap:6px;line-height:1.75}
.menu-toggle{font-family:inherit;font-size:1rem;padding:8px 10px;border-radius:8px;line-height:normal}
@media (max-width:600px){
  .brand{font-size:1.02rem}
  body{font-size:16.5px}
  .nav-lang{padding:6px 10px;font-size:.8rem}
  .menu-toggle{padding:7px 9px;font-size:.92rem}
}

/* ---- 5. heroes: fade into the night ground like the homepage ---- */
.hero,.page-hero,.hero-v3{color:#fff;background-color:var(--night)}
.hero::after{background:
  linear-gradient(180deg,rgba(16,14,12,.62) 0%,rgba(16,14,12,.30) 34%,rgba(16,14,12,.74) 78%,var(--night) 100%),
  radial-gradient(ellipse at 50% 84%,rgba(217,99,60,.26),transparent 58%)}
.page-hero::after{background:
  linear-gradient(180deg,rgba(16,14,12,.55) 0%,rgba(16,14,12,.32) 38%,rgba(16,14,12,.80) 82%,var(--night) 100%),
  radial-gradient(ellipse at 30% 86%,rgba(217,99,60,.24),transparent 58%)}
.hero-v3::after{background:
  linear-gradient(100deg,rgba(16,14,12,.72) 0%,rgba(16,14,12,.40) 50%,rgba(16,14,12,.28) 100%),
  linear-gradient(180deg,rgba(16,14,12,.10) 0%,rgba(16,14,12,.30) 60%,var(--night) 100%),
  radial-gradient(ellipse at 20% 80%,rgba(217,99,60,.24),transparent 55%)}
.hero h1,.page-hero h1,.hero-v3 h1{color:#fff;text-shadow:0 4px 40px rgba(0,0,0,.55)}
.hero h1 em,.page-hero h1 em{font-style:italic;font-weight:400;color:var(--gold)}
.hero p,.page-hero p{color:rgba(255,255,255,.9)}
.page-hero .eyebrow,.hero .eyebrow{color:var(--gold)}
.hero-credit{background:rgba(16,14,12,.5);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.6)}
.hero-panel{background:rgba(16,14,12,.5);border-color:rgba(255,255,255,.16)}

/* ---- 6. sections: alternate night and surface bands like the homepage ---- */
section{background-color:transparent}
section[style*="background: var(--paper)"],section[style*="background:var(--paper)"],
section[style*="background: var(--cream)"],section[style*="background:var(--cream)"]{
  background:var(--surface)!important;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---- 7. trust strip = homepage ledger ---- */
.trust-strip{background:var(--night);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-item{position:relative}
.trust-item + .trust-item{border-left:none}
.trust-item + .trust-item::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;
  background:linear-gradient(180deg,transparent,var(--gold),transparent);opacity:.5}
.trust-item strong{color:var(--gold)}
.trust-item span{color:var(--slate);font-size:.73rem;letter-spacing:.2em;font-weight:700}

/* ---- 8. cards: glass cards on surface-2, gold on hover (homepage .mcard/.jcard) ---- */
.feature-card,.hotel-card,.author-card,.tier-item,.post-toc,.table-wrap,.blog-empty,
.event-hero .event-hero-img{background:var(--surface-2);border:1px solid var(--line);box-shadow:none}
.feature-card,.hotel-card,.author-card,.post-toc{border-radius:var(--radius-lg)}
.feature-card,.hotel-card{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.feature-card:hover,.hotel-card:hover{transform:translateY(-6px);border-color:rgba(217,180,95,.45);box-shadow:var(--shadow-lg)}
.feature-card h4,.hotel-card h3{color:var(--ink)}
.feature-card p,.hotel-card .hotel-desc,.hotel-card .price-tag{color:var(--slate)}
.hotel-card .price-tag strong{color:var(--gold)}
.hotel-card .price-tag{border-top-color:var(--line)}
.hotel-card .features{color:var(--ink)}
.hotel-card .features li::before{color:var(--gold)}
.hotel-card .rank{background:var(--terracotta);color:#fff;box-shadow:var(--shadow-md)}
.blog-empty{border-style:dashed}
.feature-img,.hotel-img,.category-card,.event-hero-img,
.feature-img img,.hotel-img img,.category-card img,.split img,.event-hero-img img{
  background:linear-gradient(150deg,var(--pine-soft) 0%,var(--surface-2) 100%)}
.split img{border:1px solid var(--line);outline:none;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}

/* category cards = homepage immersive tiles */
.category-card{border-radius:var(--radius-lg);box-shadow:none;border:1px solid var(--line)}
.category-card::after{background:linear-gradient(180deg,rgba(16,14,12,.10) 0%,rgba(16,14,12,.55) 55%,rgba(16,14,12,.92) 100%)}
.category-card .tag{background:transparent;color:var(--gold);border:1px solid rgba(217,180,95,.5);
  font-size:.62rem;letter-spacing:.2em;font-weight:700;backdrop-filter:none}
.category-card:hover{border-color:rgba(217,180,95,.45);box-shadow:var(--shadow-lg)}

/* journal feature */
.featured-flag{background:var(--terracotta);color:#fff}

/* ---- 9. chips and status pills: translucent tints, never light slabs ---- */
.chip{background:rgba(217,180,95,.12);color:var(--gold);border:1px solid rgba(217,180,95,.32)}
.chip.pine{background:rgba(143,211,180,.10);color:var(--pine-text);border-color:rgba(143,211,180,.32)}
.chip.terracotta{background:rgba(217,99,60,.14);color:#F0A283;border-color:rgba(217,99,60,.38)}
.event-status{background:rgba(143,211,180,.10);color:var(--pine-text);border:1px solid rgba(143,211,180,.32)}
.post-meta span{background:var(--surface-2);border-color:var(--line);color:var(--slate)}
.post-meta strong{color:var(--ink)}

/* ---- 10. article furniture ---- */
.speakable-summary{background:linear-gradient(140deg,rgba(217,180,95,.13) 0%,rgba(217,180,95,.03) 75%);
  border:1px solid rgba(217,180,95,.32);border-left:4px solid var(--gold);color:var(--ink);box-shadow:none}
.speakable-summary strong,.speakable-summary b{color:#fff}
.post-toc-label{color:var(--gold)}
.post-toc-label::before{height:1px;border-radius:0}
.post-toc a{color:var(--ink)}
.post-toc a::before{color:var(--gold)}
.post-toc a:hover{background:rgba(255,255,255,.05);color:var(--gold)}
.tier-item{border-left:3px solid var(--gold)}
.tier-item>strong:first-child{color:var(--gold)}
.author-byline{background:var(--surface-2);border-color:var(--line);color:var(--slate)}
.author-byline strong{color:var(--ink)}
.author-byline a,.author-card .author-tag{color:var(--gold)}
.author-card .author-bio{color:var(--slate)}
.author-card .author-contact span{background:rgba(255,255,255,.05);border-color:var(--line);color:var(--ink)}
.author-card .author-avatar-img{background:var(--surface)}
.event-hero .event-quickfacts{color:var(--slate)}
.event-hero .event-quickfacts b{color:var(--ink)}

/* ---- 11. tables ---- */
.table-wrap{border-radius:var(--radius)}
.data-table{color:var(--ink)}
.data-table thead th{background:var(--pine);color:var(--ink);border-bottom:1px solid rgba(217,180,95,.35)}
.data-table tbody td{border-top-color:var(--line)}
.data-table tbody tr:nth-child(even){background:rgba(255,255,255,.025)}
.data-table tbody tr:hover{background:rgba(217,180,95,.06)}
.data-table td strong{color:var(--gold)}
/* links on striped rows: the brighter terracotta keeps AA on the stripe tint */
.data-table td a,.table-wrap td a{color:var(--terracotta-deep)}
.data-table td a:hover,.table-wrap td a:hover{color:var(--gold)}
table th{color:var(--ink)}
table td,table th{border-color:var(--line)}

/* ---- 12. FAQ = homepage FAQ ---- */
.faq-item{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none}
.faq-item[open]{border-color:rgba(217,180,95,.5);background:rgba(217,180,95,.05);box-shadow:none}
.faq-item summary{color:var(--ink);font-weight:600}
.faq-item summary::after{background:transparent;border:1px solid var(--line);color:var(--gold)}
.faq-item[open] summary::after{border-color:var(--gold)}
.faq-item p{color:var(--slate)}

/* ---- 13. CTA band = homepage CTA band ---- */
.cta-band{color:#fff;background:linear-gradient(135deg,#7A2E14 0%,var(--terracotta) 58%,#C9853F 100%)}
.cta-band::before{inset:0;top:0;right:0;width:auto;height:auto;border-radius:0;opacity:1;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 30px)}
.cta-band .eyebrow{color:#FBE6C8}
.cta-band .eyebrow::before{background:#FBE6C8}
.cta-band h2,.cta-band h3{color:#fff}
.cta-band p{color:rgba(255,255,255,.9)}
.cta-band a:not(.btn){color:#fff;text-decoration:underline}
.cta-band input{background:rgba(16,14,12,.35);color:#fff;border:1px solid rgba(255,255,255,.3)}
.cta-band input::placeholder{color:rgba(255,255,255,.7)}

/* ---- 14. forms ---- */
input,select,textarea{color-scheme:dark}
.form-group label,label{color:var(--ink)}
.form-group input,.form-group select,.form-group textarea,
input[type=text],input[type=email],input[type=tel],input[type=search],input[type=number],
input[type=date],input[type=url],input[type=password],select,textarea{
  background:var(--surface);color:var(--ink);border:1px solid rgba(244,239,230,.2)}
input::placeholder,textarea::placeholder{color:#8A8176;opacity:1}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus,
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--terracotta);box-shadow:0 0 0 3px rgba(217,99,60,.25)}
select option{background:var(--surface-2);color:var(--ink)}
/* trip-planner.js injects its own field style after this sheet, so match it with a heavier selector */
html body .tp-f select,html body .tp-f input,html body .tp-f textarea{background:var(--surface);color:var(--ink);border:1px solid rgba(244,239,230,.2)}
.form-msg.err{background:rgba(217,99,60,.14);color:#F0A283;border:1px solid rgba(217,99,60,.38)}
.demo-banner{background:rgba(217,180,95,.10)!important;color:var(--ink)!important;border-color:rgba(217,180,95,.35)!important}
.demo-banner b{color:var(--gold)!important}
.qsearch input[type=search]{background:var(--surface);color:var(--ink)}

/* ---- 15. breadcrumbs ---- */
.breadcrumbs,.breadcrumb{color:var(--slate)}
.breadcrumbs a,.breadcrumb a{color:var(--slate)}
.breadcrumbs a:hover,.breadcrumb a:hover{color:var(--gold)}
.breadcrumbs .sep,.breadcrumb li:not(:last-child)::after{color:rgba(244,239,230,.3)}
.breadcrumb li[aria-current="page"]{color:var(--ink)}

/* ---- 16. footer = homepage footer ---- */
.site-footer{background:#1A1612;color:rgba(244,239,230,.7);border-top:4px solid;
  border-image:linear-gradient(90deg,var(--gold),var(--terracotta)) 1}
.footer-grid{border-bottom:1px solid rgba(244,239,230,.08)}
.footer-grid .brand{color:#fff}
.footer-grid .brand small{color:rgba(244,239,230,.5)}
.footer-grid .footer-head{color:#fff;font-size:.71rem;letter-spacing:.2em;font-weight:700;line-height:1.12}
.footer-grid a{color:rgba(244,239,230,.7)}
.footer-grid a:hover{color:var(--gold)}
.footer-grid .blurb,.blurb{color:rgba(244,239,230,.55)}
.footer-social{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.15)}
.footer-social:hover{background:rgba(255,255,255,.12);color:#fff}
.footer-bottom{color:rgba(244,239,230,.45)}
.footer-meta,.footer-meta a{color:rgba(244,239,230,.55)}
.footer-meta a:hover{color:var(--gold)}

/* ---- 17. Google Preferred Sources strip ---- */
.preferred-sources-strip{background:linear-gradient(135deg,rgba(217,180,95,.10) 0%,var(--surface) 55%,rgba(217,99,60,.10) 100%);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ps-strip-copy p{color:var(--slate)}

/* ---- 18. inline style="" colours the tokens cannot reach ---- */
[style*="background: white"],[style*="background:white"],[style*="background: #fff"],[style*="background:#fff"]{background:var(--surface-2)!important}
[style*="background: var(--charcoal)"],[style*="background:var(--charcoal)"]{background:#0B0A09!important}
[style*="color: var(--pine)"],[style*="color:var(--pine)"]{color:var(--pine-text)!important}
span[style*="font-size: 3rem"][style*="color: var(--pine)"]{color:var(--gold)!important}
[style*="#E6D2A6"]{border-color:rgba(217,180,95,.32)!important}
[style*="color:var(--line)"],[style*="color: var(--line)"]{color:rgba(244,239,230,.3)!important}
.img-disclosure{color:var(--slate)}

/* ---- 19. Kumaon Landslide Detector page ---- */
.ld-live-badge{background:var(--pine);color:var(--ink);border:1px solid rgba(143,211,180,.3)}
.ld-r-low,.ld-stamp.is-fresh{background:rgba(143,211,180,.10)!important;color:var(--pine-text)!important;border-color:rgba(143,211,180,.32)!important}
.ld-r-elev{background:rgba(217,180,95,.12)!important;color:var(--gold)!important;border-color:rgba(217,180,95,.35)!important}
.ld-r-high,.ld-stamp.is-stale,.ld-alert{background:rgba(217,99,60,.13)!important;color:#F0A283!important;border-color:rgba(217,99,60,.38)!important}
.ld-sev-major .ld-sev{color:#1A1612}
.ld-src-links a:hover{color:var(--gold)}

/* ---- 19b. every other spot that used --pine as a TEXT colour ---- */
.map-toggle{background:rgba(143,211,180,.10);color:var(--pine-text);border-color:rgba(143,211,180,.32)}
.lc-onrequest,.amenity-grid li svg,.feature-card.ld-hub-card .micro{color:var(--pine-text)}
.form-msg.ok,.status-pill.live{background:rgba(143,211,180,.10);color:var(--pine-text);border:1px solid rgba(143,211,180,.32)}
.ld-open .ld-pill,.ld-sev-moderate .ld-sev{background:rgba(143,211,180,.10);color:var(--pine-text)}
.ld-caution .ld-pill{background:rgba(217,180,95,.14);color:var(--gold)}
html body .tp-v{background:rgba(143,211,180,.10);color:var(--pine-text)}
/* gold slabs with text on them (the "Editor pick" badge) */
[style*="background: var(--gold)"],[style*="background:var(--gold)"]{color:var(--night)!important}
/* the "this event has passed" note sits on a green tint */
.passed-note a,[style*="background:var(--pine-soft)"] a,[style*="background: var(--pine-soft)"] a{color:var(--gold)}
.passed-note a:hover{color:#fff}

/* listing cards on search-hotels: titles in ivory like every other card */
.lc-body h3 a{color:var(--ink)}
.lc-body h3 a:hover{color:var(--gold)}

/* ---- 19c. listing portal and search page header band (get-listed, search-hotels) ----
   In the light system this was a flat terracotta slab. It becomes the homepage
   hero language: dark ground, warm glow, gold eyebrow. */
.page-head{background:radial-gradient(ellipse at 18% 120%,rgba(217,99,60,.30),transparent 60%),
  radial-gradient(ellipse at 90% -20%,rgba(217,180,95,.12),transparent 55%),var(--surface);
  color:var(--ink);border-bottom:1px solid var(--line)}
.page-head .eyebrow{color:var(--gold)}
.page-head h1{color:var(--ink)}
.page-head p{color:rgba(244,239,230,.82)}

/* ---- 20. Devanagari: same tracking rules the homepage applies ---- */
html[lang="hi-IN"] body{line-height:1.85}
html[lang="hi-IN"] h1,html[lang="hi-IN"] h2,html[lang="hi-IN"] h3,html[lang="hi-IN"] h4,html[lang="hi-IN"] h5{line-height:1.32;letter-spacing:0}
html[lang="hi-IN"] .eyebrow,html[lang="hi-IN"] .micro,html[lang="hi-IN"] .post-toc-label,
html[lang="hi-IN"] .trust-item span,html[lang="hi-IN"] .category-card .tag,
html[lang="hi-IN"] .footer-grid .footer-head,html[lang="hi-IN"] .brand small{letter-spacing:.06em}

/* ---- 21. print stays ink on paper ---- */
@media print{html,body{background:#fff!important;color:#000!important}
  .page-hero,.hero{color:#000}}

/* ---- trip tools CTA (rev 31, 2026-10-03) ----
   Cards that send readers to the trip planner and the public amenities map.
   Markup sits between TOOL-CTA comment markers on blog, hub and event pages.
   --tc is the tile's accent: terracotta for the planner, green for the map. */
.tool-cta-inline{margin:32px 0 8px}
.tool-cta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.tool-tile{--tc:var(--terracotta);position:relative;display:flex;gap:16px;align-items:flex-start;padding:22px 24px 22px 26px;border-radius:var(--radius);border:1px solid var(--line);background:var(--paper);color:var(--charcoal)!important;text-decoration:none!important;overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.tool-tile::before{content:"";position:absolute;top:0;bottom:0;left:0;width:4px;background:var(--tc)}
.tool-tile::after{content:"";position:absolute;right:-60px;top:-60px;width:160px;height:160px;border-radius:50%;background:var(--tc);opacity:.07;pointer-events:none}
.tool-tile:hover,.tool-tile:focus-visible{transform:translateY(-2px);border-color:var(--tc);box-shadow:var(--shadow-md)}
.tool-tile:focus-visible{outline:2px solid var(--tc);outline-offset:3px}
.tool-tile--amen{--tc:var(--pine-text,#8FD3B4)}
.tool-ico{flex:0 0 46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--tc);background:rgba(255,255,255,.05);background:color-mix(in srgb,var(--tc) 15%,transparent)}
.tool-ico svg{width:24px;height:24px}
.tool-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.tool-kicker{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--tc)}
.tool-title{font-family:'Playfair Display',Georgia,serif;font-size:1.16rem;line-height:1.3;font-weight:600;color:var(--charcoal)}
.tool-text{font-size:.93rem;line-height:1.55;color:var(--slate)}
.tool-go{margin-top:4px;font-weight:700;font-size:.92rem;color:var(--tc)}
.tool-tile:hover .tool-go{text-decoration:underline;text-underline-offset:3px}
html[lang="hi-IN"] .tool-kicker{letter-spacing:.04em}
@media (max-width:520px){.tool-tile{padding:18px 18px 18px 22px;gap:12px}.tool-ico{flex-basis:40px;height:40px}.tool-title{font-size:1.06rem}}
@media (prefers-reduced-motion:reduce){.tool-tile{transition:none}.tool-tile:hover{transform:none}}

/* ---- narrow-screen guard (rev 32, 2026-10-03) ----
   Grid items default to min-width:auto, so a <select> sized to its longest
   option (the Hindi contact form's topic list) pushed /hi-in/contact 10px
   past a 360px viewport. Let split columns and form fields shrink. */
.split>*,.form>*,.form-group>*{min-width:0}
.form select,.form input,.form textarea{max-width:100%;min-width:0}