/* Deity art is PORTRAIT (868x1160) and must be fully visible: fit by
   HEIGHT and let the width follow. object-fit:cover fits by width and
   crops the deity's head off - 138px on the hero, 128px on the rail.
   Photographs (the guru portrait) keep cover; cropping a photo is fine. */

/* Palette :root comes from templates/partials/_tokens.html via base.html —
   product.html extends base, so the vars are always defined before this sheet. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ash);font-family:'Cormorant Garamond',serif;font-size:19px;line-height:1.65;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
/* THE 76px IS ROOM FOR THE FIXED BOOKING BAR, AND THE SCALE PAGES HAVE NONE.
   `.bookbar` is `position:fixed;bottom:0` and would otherwise cover the last
   76px of the page, so the body reserves it. The two enquiry-only rites —
   /product/chandi-homa/ and /product/rudra-homa/ — are sold by scale and have
   no bar at all (the element is absent from the served HTML; only the script
   that looks for it remains), so on those two the reservation is a blank strip
   below the footer: 76px of it, measured 5 Sep 2026 on both.
   Behind @supports so a browser without :has() keeps today's behaviour, which
   errs the safe way — a strip of ivory rather than a hidden Pay button.
   The inset rides along because the bar took one too (6 Sep 2026, see the
   `.bookbar` rule): the reservation has to be the bar's whole height or the
   footer goes back under it on the phones where env() is not zero. It stays
   exactly 76px everywhere else, and zero on the two scale rites either way. */
@supports selector(body:has(.bookbar)){
  body:not(:has(.bookbar)){padding-bottom:0}
}
h1,h2,h3,h4{font-family:'Cormorant SC',serif;font-weight:700;color:var(--maroon-deep);margin:0}
.eyebrow{font-family:'Karla',sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:12.5px;font-weight:600;color:var(--copper)}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
section{padding:48px 0}
/* THE PHONE STEP, WHICH WAS A STEP IN NAME ONLY. The rhythm between
   sections is padding-bottom + padding-top, so 48px is a 96px gap, and it
   was carried unchanged onto a 390px phone where 96px is an eighth of the
   screen. The step that existed cut 48 to 46 — 4%. The client's own master
   (astrobhavacontactus) steps 72 to 44, a 39% cut, and that proportion is
   what is applied here: 30px, a 60px gap. Measured 6 Sep 2026 across 59
   template families: the median blank band on a phone was 97px. */
@media(max-width:640px){section{padding:30px 0}}
section.tinted{background:var(--ivory-light);border-top:1px solid var(--copper-line);border-bottom:1px solid var(--copper-line)}
.section-head{max-width:740px;margin-bottom:34px}
.section-head h2{font-size:clamp(26px,3.4vw,36px);margin-top:10px}
.section-head p{color:#4a3c33;margin-top:12px}
:focus-visible{outline:2px solid var(--vermillion);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.ribbon{background:var(--maroon-deep);color:var(--ivory-light);font-family:'Karla',sans-serif;font-size:13px;font-weight:600}
.ribbon .wrap{display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 32px;text-align:center}
.pulse{width:8px;height:8px;border-radius:50%;background:#E8503C;flex-shrink:0;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.ribbon a{color:var(--ember)}

header.nav{position:sticky;top:0;z-index:80;background:rgba(243,234,214,.96);border-bottom:1px solid var(--copper-line)}
.nav-inner{max-width:1120px;margin:0 auto;padding:12px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:9px;font-family:'Cormorant SC',serif;font-weight:700;font-size:21px;color:var(--maroon-deep);text-decoration:none}
.navlinks{display:flex;gap:22px;list-style:none;margin:0;padding:0;font-family:'Karla',sans-serif;font-size:13px;font-weight:600}
.navlinks a{text-decoration:none;opacity:.8}.navlinks a:hover{opacity:1;color:var(--vermillion)}
.nav-cta{font-family:'Karla',sans-serif;font-weight:700;font-size:13.5px;background:var(--vermillion);color:var(--ivory-light);padding:10px 20px;text-decoration:none}
@media(max-width:860px){.navlinks{display:none}}
/* 12.5px, as partials/_chrome_css.html sets `.crumbs,.crumb`. This file is the
   product fleet's stylesheet, so 13 here made the breadcrumb on 200 pages half
   a pixel larger than the same breadcrumb everywhere else. Colour and padding
   are this page's own and are left. */
.crumb{font-family:'Karla',sans-serif;font-size:12.5px;color:#6E5C48;padding:16px 0 0}
.crumb a{text-decoration:none;color:#6E5C48}.crumb a:hover{color:var(--vermillion)}

/* HERO */
.hero{padding:36px 0 56px}
.hero-grid{display:grid;grid-template-columns:440px 1fr;gap:56px;align-items:start}
/* Client ruling 30 Aug 2026: no border line around the hero art. Client
   ruling 4 Sep 2026, which supersedes the rest of that one: "all the homa hero
   images has an white boarder. remove the boarder and make the containter
   tight." The padding WAS the white border — 14px of --ivory-light, a lighter
   cream than the page ground, so it read as a printed mount on every homa.

   NOTHING LETTERBOXES INTO THE MISSING BACKGROUND, and that was measured
   before it was removed rather than after. The box below is aspect-ratio:3/4
   with object-fit:contain, so art of another shape leaves a gap where the mat
   colour used to show: all 198 live homa heroes are exactly 3:4, so the art
   fills the box edge to edge and the background had nothing left to paint. If
   a rite is ever given a square or landscape hero, its gap will show the page
   ground rather than a mount — which reads as tight, not as a frame, but it
   is the thing to look at first if a hero ever looks wrong. */
.hero-img{position:relative}
/* The deity art is 3:4 PORTRAIT — measured across the library, 164 of ~180
   files sit at 0.748, and the stored <img> tags declare a square 600x600 that
   matches neither. A 1/1 box therefore letterboxed every rite: on Vamana the
   painted art came out 410 tall by 307 wide inside a 410 square, leaving ~51px
   of dead ivory down each side. The box now takes the art's own shape.
   `contain` stays so the handful of landscape and square files letterbox
   instead of cropping — these are devotional images with painted borders, and
   a cropped border looks like a mistake in a way a margin does not. */
.hero-img img.deity{display:none;width:100%;height:auto;aspect-ratio:3/4;object-fit:contain}
.hero-img.show-image img.deity{display:block}
.hero-img.show-image.img-failed img.deity{display:none}
.hero-img .fallback{display:none;aspect-ratio:3/4;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,rgba(200,120,40,.25),transparent 65%),var(--ivory)}
.hero-img .fallback svg{width:58%}
.hero-img.show-image.img-failed .fallback{display:flex}
.vfacade{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;cursor:pointer;background:#1a0d08;overflow:hidden;text-decoration:none}
.vfacade>img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.vf-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,13,8,.1),rgba(62,16,16,.68) 80%)}
.vf-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:var(--ember);color:var(--maroon-deep);display:flex;align-items:center;justify-content:center;font-size:22px;padding-left:5px;font-family:'Karla',sans-serif;box-shadow:var(--shadow);transition:background .15s}
.vfacade:hover .vf-play{background:#f0a05a}
.vf-cap{position:absolute;left:16px;right:16px;bottom:13px;font-family:'Karla',sans-serif;font-weight:700;font-size:14.5px;color:var(--ivory-light);line-height:1.35}
.vf-cap small{display:block;font-weight:600;font-size:12px;color:#e9c9a8}
.hero-img.show-image .vfacade,.hero-img.show-image .vslot{display:none}
.hero-img:not(.show-image) .deity,.hero-img:not(.show-image) .fallback{display:none!important}
.hero-img.playing .vfacade{display:none}
.hero-img .vslot{display:none;aspect-ratio:16/9;background:#000}
.hero-img.playing .vslot{display:block}
.hero-img .vslot iframe{width:100%;height:100%;border:0;display:block}
/* 26px was 14px of mat plus a 12px inset into the picture. With the mat gone
   the inset is all that is left, or the badge lands 26px inside the art. */
.live-tag{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:7px;background:rgba(62,16,16,.92);color:var(--ivory-light);font-family:'Karla',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:6px 12px;z-index:2}
.media-thumbs{display:flex;gap:10px;margin-top:10px}
.mthumb{position:relative;border:1px solid var(--copper-line);background:var(--ivory-light);cursor:pointer;padding:0;overflow:hidden;height:72px;flex-shrink:0;text-decoration:none}
.mthumb[aria-selected="true"]{border-color:var(--vermillion);box-shadow:inset 0 0 0 2px var(--vermillion)}
.mthumb img{height:72px;width:auto;max-width:72px;margin:0 auto;object-fit:contain;display:block}
.mthumb.vid{flex:1;background:#1a0d08 url('https://img.youtube.com/vi/8knxbMGXaJM/hqdefault.jpg') center/cover no-repeat;display:flex;align-items:center;gap:11px;padding:0 14px}
.mthumb.vid::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(62,16,16,.88),rgba(62,16,16,.3))}
.vt-play{position:relative;width:34px;height:34px;border-radius:50%;background:var(--ember);color:var(--maroon-deep);display:flex;align-items:center;justify-content:center;font-size:13px;padding-left:3px;flex-shrink:0;font-family:'Karla',sans-serif}
.vt-label{position:relative;font-family:'Karla',sans-serif;font-weight:700;font-size:13px;color:var(--ivory-light);text-align:left;line-height:1.35}
.vt-label small{display:block;font-weight:600;font-size:11.5px;color:#e9c9a8;letter-spacing:.04em}
.img-note{font-family:'Karla',sans-serif;font-size:12px;color:#6E5C48;margin-top:8px}

.hero h1{font-size:clamp(31px,4.4vw,48px);line-height:1.06;margin:10px 0 4px}
.alt-name{font-family:'Karla',sans-serif;font-size:13px;color:#6E5C48;margin:0 0 6px}
.sanskrit{font-family:'Yatra One',cursive;color:var(--vermillion);display:block;font-size:clamp(17px,2vw,21px);margin-bottom:16px}
.hero .lede{font-size:19px;color:#4a3c33;margin:0 0 20px;max-width:560px}
.qual{list-style:none;margin:0 0 22px;padding:0}
.qual li{position:relative;padding:6px 0 6px 28px;font-size:16.5px;color:#3a2f27}
.qual li::before{content:"✓";position:absolute;left:0;top:6px;color:var(--green);font-weight:700;font-family:'Karla',sans-serif}
.pricebar{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:15px 0;border-top:1px solid var(--copper-line);border-bottom:1px solid var(--copper-line);margin-bottom:22px}
.pricebar .from{font-family:'Karla',sans-serif;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--copper)}
.pricebar .amt{font-family:'Karla',sans-serif;font-size:31px;font-weight:700;color:var(--maroon-deep)}
.pricebar .note{font-family:'Karla',sans-serif;font-size:13px;color:#7a6a58}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}

/* ---- the scale strip, on the two rites sold by scale ---------------------
   chandi-homa and rudra-homa render from their own masters, which carry a
   `.buybox` the standard hero has never had. Not one of its parts had a rule
   here, so the values and their labels ran together on the served page —
   "9 · 100 · 1,000Parayanams", "From₹147,900" — and the primary CTA drew as a
   bare underlined link. Client reported it 4 September 2026 as "the layout is
   not as other homa", and it was: markup with no CSS.

   The strip is what these two rites have that the fleet does not — a rite
   whose scale changes the recitation count has to state the counts. It reads
   in the fleet's own vocabulary: the label in the .pricebar's uppercase Karla
   copper, the value in its maroon. The price and the button that sat in this
   box are NOT styled here; they are removed by rituals/inject.py, which has
   the pricebar and the hero CTA row state them once each instead of twice. */
.buybox{margin:0 0 22px}
.bb-spec{display:flex;flex-wrap:wrap;gap:10px 34px;padding:15px 0;
  border-top:1px solid var(--copper-line);border-bottom:1px solid var(--copper-line)}
.bb-s{display:flex;flex-direction:column;gap:2px}
.bb-s b{font-family:'Karla',sans-serif;font-size:21px;font-weight:700;
  color:var(--maroon-deep);line-height:1.2}
.bb-s span{font-family:'Karla',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--copper)}
@media(max-width:560px){
  .bb-spec{gap:10px 22px}
  .bb-s b{font-size:18px}
}
.btn-primary{font-family:'Karla',sans-serif;font-weight:700;font-size:15.5px;background:var(--vermillion);color:var(--ivory-light);padding:15px 30px;text-decoration:none;box-shadow:var(--shadow);border:none;cursor:pointer}
.btn-primary:hover{background:#8f281c}
.btn-ghost{font-family:'Karla',sans-serif;font-weight:700;font-size:15.5px;color:var(--maroon-deep);padding:15px 24px;text-decoration:none;border:1px solid var(--copper)}

/* ---- the extra a rite offers, made choosable -------------------------------
   Injected markup owns its CSS. Built from the same tokens as the booking box
   it sits under, so the row reads as part of that box rather than as a stray
   form control: the copper hairline, the ivory ground, the Karla label.

   The whole row is the label, so the tick target is the sentence and not a
   13px square -- the same reason the sign-in strip gives its buttons a full
   row. `accent-color` tints the native box copper instead of the browser's
   blue, which is the only part of a checkbox that can be styled without
   rebuilding it and losing its keyboard behaviour. */
.addon-pick{display:flex;align-items:center;gap:12px;cursor:pointer;
  margin:14px 0 0;padding:13px 15px;border:1px solid var(--copper-line);
  background:var(--ivory-light)}
.addon-pick input{width:17px;height:17px;flex:none;accent-color:var(--copper);
  cursor:pointer}
.addon-pick .ap-t{font-family:'Karla',sans-serif;font-size:14.5px;
  font-weight:600;color:var(--ash);flex:1}
.addon-pick .ap-p{font-family:'Karla',sans-serif;font-size:14.5px;
  font-weight:700;color:var(--maroon-deep);white-space:nowrap}
.addon-pick:hover{border-color:var(--copper)}
@media(max-width:560px){
  .addon-pick{align-items:flex-start;flex-wrap:wrap}
  .addon-pick .ap-p{width:100%;padding-left:29px}
}
/* Stacked, the art keeps its 420px cap — and used to keep the column's left
   edge with it, so at 820px a 420px picture sat in a 756px column with 336px
   of blank paper beside it and the H1 below (measured 5 Sep 2026). Centred,
   the stack reads as a choice. */
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;gap:30px}.hero-img{max-width:420px;margin-inline:auto}}

/* IMPORTANCE */
.imp-lead{font-size:23px;color:var(--maroon-deep);font-weight:500;margin:0 0 18px;line-height:1.45}
.imp-lead em{color:var(--vermillion);font-style:italic}
.imp{margin:0 0 16px;color:#3a2f27;max-width:780px}
.imp-sanskrit{font-family:'Yatra One',cursive;color:var(--copper);font-size:19px;display:block;margin-top:26px}
.imp-sanskrit small{font-family:'Karla',sans-serif;font-size:13px;color:#6E5C48;margin-left:10px}

/* BENEFITS — light rows */
.ben-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
.ben-row{padding:18px 0 18px 24px;border-top:1px solid var(--copper-line);position:relative}
.ben-row::before{content:"";position:absolute;left:0;top:27px;width:9px;height:9px;background:var(--vermillion);transform:rotate(45deg)}
.ben-row:nth-last-child(-n+2){border-bottom:1px solid var(--copper-line)}
.ben-row h3{font-size:18.5px;margin-bottom:5px}
.ben-row p{font-size:15px;color:#4a3c33;margin:0;font-family:'Karla',sans-serif;line-height:1.6}
/* The second grid under the benefits: who books the rite (5 Sep 2026). */
.ben-sub{font-size:22px;margin:38px 0 6px;color:var(--maroon-deep)}
@media(max-width:760px){.ben-grid{grid-template-columns:1fr}.ben-row:nth-last-child(2){border-bottom:none}}

.timing.nolead{margin:0;padding:0;border:none}
.timing-head{max-width:700px;margin-bottom:24px}
.timing-head h3{font-size:clamp(21px,2.5vw,26px);margin:8px 0 8px}
.timing-head p{font-size:16px;color:#4a3c33;margin:0}
.timing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 34px}
.tm{padding-left:16px;border-left:2px solid var(--saffron)}
.tm-day{display:block;font-family:'Cormorant SC',serif;font-size:16.5px;font-weight:700;color:var(--maroon-deep);line-height:1.3;margin-bottom:5px}
.tm p{font-family:'Karla',sans-serif;font-size:13px;color:#5a4a38;margin:0;line-height:1.6}
.timing-note{font-family:'Karla',sans-serif;font-size:13px;color:#5a4a38;line-height:1.75;margin:26px 0 0;max-width:860px;background:rgba(199,134,43,.12);border-left:3px solid var(--vermillion);padding:14px 18px}
.timing-note strong{color:var(--maroon-deep)}
@media(max-width:900px){.timing-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.timing-grid{grid-template-columns:1fr}}

/* MAHA BAND — what separates this line from the standard homa.
   The band's MARKUP is copied into all 64 Maha bodies by apply_maha_template,
   which read it out of pages/rendered/maha-homa-product.html. Its CSS lived
   only in that master's own <style>, so every stored page served the tiles as
   run-together prose on the page's cream background: "Priests5 or 10Chanting
   in unison". Injected markup owns its CSS — copied here from the master
   verbatim, breakpoints included, so the two cannot drift — except for its two
   muted creams, which the hex ratchet in pages/tests_standards.py will not take
   as new colour values, not even as new tokens: the palette is twelve and
   _tokens.html is in the same scope. (The ratchet counts literals wherever they
   appear, a comment quoting one included, so this note does not name them.)
   Both are the same cream over the same maroon, so they become the cream token
   at .94 and .75 — within three RGB points of the master on every channel but
   one, on 12.5px caption text. */
.maha-band{background:var(--maroon-deep);color:var(--ivory-light);padding:56px 0}
.maha-band h2{color:var(--ivory-light);font-size:clamp(25px,3.2vw,34px);margin:10px 0 8px}
.maha-band .eyebrow{color:var(--ember)}
.maha-band .mb-lead{color:var(--ivory);opacity:.94;max-width:660px;margin:0 0 30px;font-size:17.5px;line-height:1.75}
.mb-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(232,138,60,.28);border:1px solid rgba(232,138,60,.28)}
.mb-tile{background:var(--maroon-deep);padding:22px 20px 20px;display:flex;flex-direction:column;gap:5px}
.mb-k{font-family:'Karla',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember)}
.mb-tile strong{font-family:'Cormorant SC',serif;font-size:24px;color:var(--ivory-light);font-weight:700;letter-spacing:.01em;line-height:1.15}
.mb-d{font-family:'Karla',sans-serif;font-size:12.5px;color:var(--ivory);opacity:.75;line-height:1.55}
.mb-foot{font-family:'Karla',sans-serif;font-size:13.5px;color:var(--ivory);opacity:.75;margin:26px 0 0;line-height:1.75;max-width:790px;border-left:2px solid var(--ember);padding-left:16px}
@media(max-width:900px){.mb-specs{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.mb-specs{grid-template-columns:1fr}.maha-band{padding:44px 0}}

/* TRUST BAND */
.trust-band{background:var(--maroon-deep);color:var(--ivory-light);padding:44px 0}
.tb-grid{display:grid;grid-template-columns:230px 1.15fr .95fr;gap:38px;align-items:center}
.guru{margin:0}
.guru img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block}
.guru .guru-ph{display:none;aspect-ratio:3/4;align-items:center;justify-content:center;background:rgba(251,245,233,.06);border:1px solid rgba(232,138,60,.45)}
.guru .guru-ph svg{width:52%;opacity:.7}
.guru.no-photo img{display:none}
.guru.no-photo .guru-ph{display:flex}
.guru figcaption{font-family:'Karla',sans-serif;font-size:12px;color:#e9c9a8;line-height:1.5;margin-top:11px}
.guru figcaption strong{display:block;font-family:'Cormorant SC',serif;font-size:16px;color:var(--ivory-light);font-weight:700;margin-bottom:2px}
.tb-grid h2{color:var(--ivory-light);font-size:clamp(23px,2.8vw,30px);margin:8px 0 12px}
.tb-grid .lead{color:#e9dcc8;font-size:17px;margin:0 0 14px}
.tb-grid .lead strong{color:var(--ember)}
.tb-link{font-family:'Karla',sans-serif;font-weight:700;font-size:13.5px;color:var(--ember);text-decoration:none}
.badges{margin:0;padding:0;list-style:none}
.badges li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-family:'Karla',sans-serif;font-size:13.5px;color:#e9dcc8;line-height:1.5;border-top:1px solid rgba(232,138,60,.25)}
.badges li:last-child{border-bottom:1px solid rgba(232,138,60,.25)}
.badges .diamond{width:8px;height:8px;background:var(--ember);transform:rotate(45deg);flex-shrink:0;margin-top:6px}
.badges strong{color:var(--ivory-light)}
@media(max-width:1000px){.tb-grid{grid-template-columns:180px 1fr;gap:28px}.badges{grid-column:1/-1}}
@media(max-width:660px){.tb-grid{grid-template-columns:1fr;gap:22px}.guru{max-width:200px}}

/* PACKAGES */
.step-label{font-family:'Karla',sans-serif;font-size:15px;font-weight:700;color:var(--maroon-deep);margin:0 0 16px;display:flex;align-items:baseline;gap:10px}
.step-label span{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory-light);background:var(--vermillion);padding:4px 10px}
.step-label em{font-weight:400;color:#6E5C48;font-style:normal;font-size:13px}
.tier-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:34px}
.tp{position:relative;text-align:left;background:var(--ivory);border:1px solid var(--copper-line);padding:24px 22px;cursor:pointer;font-family:inherit;transition:border-color .15s, box-shadow .15s}
.tp:hover{border-color:var(--copper)}
.tp[aria-checked="true"]{border-color:var(--vermillion);box-shadow:inset 0 0 0 2px var(--vermillion), var(--shadow);background:var(--ivory-light)}
.tp .tp-n{font-family:'Cormorant SC',serif;font-size:38px;color:var(--saffron);line-height:1;display:block}
.tp .tp-name{font-family:'Cormorant SC',serif;font-size:19px;font-weight:700;color:var(--maroon-deep);display:block;margin:8px 0 0}
.tp .tp-sub{font-family:'Karla',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--copper);display:block;margin:2px 0 4px}
.tp .tp-price{font-family:'Karla',sans-serif;font-weight:700;font-size:20px;color:var(--maroon-deep);display:block;margin-bottom:10px}
.tp .tp-inc{display:block;font-family:'Karla',sans-serif;font-size:12px;font-weight:700;color:var(--green);line-height:1.4;margin:-6px 0 10px}
.tp .tp-why{font-family:'Karla',sans-serif;font-size:13px;color:#5a4a38;line-height:1.6;display:block}
.tp .tp-tag{position:absolute;top:-11px;right:14px;font-family:'Karla',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--vermillion);color:var(--ivory-light);padding:4px 10px}
.addon{width:100%;text-align:left;display:flex;gap:16px;align-items:flex-start;background:var(--ivory);border:1px dashed var(--copper);padding:20px 22px;cursor:pointer;font-family:inherit;margin-bottom:30px;transition:border-color .15s}
.addon[aria-pressed="true"]{border-style:solid;border-color:var(--vermillion);background:rgba(199,134,43,.14);box-shadow:inset 0 0 0 1px var(--vermillion)}
.ad-media{flex-shrink:0;width:170px}
.ad-media img{width:100%;height:auto;display:block;border:1px solid var(--copper-line);background:#fff}
.ad-media em{display:block;font-family:'Karla',sans-serif;font-style:normal;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--copper);margin-top:6px;text-align:center;line-height:1.5}
.ad-note{font-family:'Karla',sans-serif;font-size:12px;color:#6E5C48;line-height:1.6;margin:-18px 0 22px;max-width:900px}
@media(max-width:700px){.addon{flex-wrap:wrap}.ad-media{width:130px}.ad-note{margin-top:-14px}}
.ad-check{width:22px;height:22px;border:2px solid var(--copper);flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;color:var(--ivory-light);font-family:'Karla',sans-serif;font-weight:700}
.addon[aria-pressed="true"] .ad-check{background:var(--vermillion);border-color:var(--vermillion)}
.addon[aria-pressed="true"] .ad-check::after{content:"\2713"}
.ad-name{font-family:'Cormorant SC',serif;font-size:19px;font-weight:700;color:var(--maroon-deep);display:block;margin-bottom:6px}
.ad-delta{font-family:'Karla',sans-serif;font-size:15px;color:var(--vermillion);margin-left:8px}
.ad-sub{font-family:'Karla',sans-serif;font-size:13px;color:#5a4a38;line-height:1.65;display:block;max-width:760px}
.pkg-total{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;background:var(--maroon-deep);color:var(--ivory-light);padding:18px 24px;margin-bottom:18px}
.pt-label{display:block;font-family:'Karla',sans-serif;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ember)}
.pkg-total strong{font-family:'Cormorant SC',serif;font-size:20px;display:block}
.pt-desc{font-family:'Karla',sans-serif;font-size:12.5px;color:#d9c8ae}
.pt-right{display:flex;align-items:center;gap:18px}
.pt-price{font-family:'Karla',sans-serif;font-weight:700;font-size:26px}
.pkg-foot{font-family:'Karla',sans-serif;font-size:13px;color:#7a6a58;margin:0;line-height:1.7;max-width:820px}
.after-book{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:30px;padding-top:24px;border-top:1px solid var(--copper-line)}
.after-book>div{display:flex;gap:12px;align-items:flex-start}
.ab-n{font-family:'Karla',sans-serif;font-weight:700;font-size:26px;color:var(--copper);line-height:1;flex-shrink:0}
.after-book p{font-family:'Karla',sans-serif;font-size:13px;color:#4a3c33;margin:0;line-height:1.55}
.after-book strong{color:var(--maroon-deep)}
@media(max-width:860px){.tier-pick{grid-template-columns:1fr}.after-book{grid-template-columns:1fr 1fr}}

/* RECEIVE — light checklist */
.recv-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;margin-bottom:30px}
.recv-row{padding:15px 0 15px 24px;border-top:1px solid var(--copper-line);position:relative}
.recv-row::before{content:"";position:absolute;left:0;top:24px;width:8px;height:8px;background:var(--vermillion);transform:rotate(45deg)}
.recv-row:nth-last-child(-n+2){border-bottom:1px solid var(--copper-line)}
.recv-row h3{font-family:'Karla',sans-serif;font-size:14.5px;margin-bottom:3px}
.recv-row p{font-family:'Karla',sans-serif;font-size:13px;color:#5a4a38;margin:0;line-height:1.6}
@media(max-width:760px){.recv-grid{grid-template-columns:1fr}.recv-row:nth-last-child(2){border-bottom:none}}
.sealing{background:var(--ivory);border:1px solid var(--copper-line);border-top:3px solid var(--saffron);padding:26px 30px;margin:0 0 34px;max-width:900px}
.sealing h3{font-size:21px;margin-bottom:10px}
.sealing p{font-size:16.5px;color:#3a2f27;margin:0;line-height:1.7}
.sealing strong{color:var(--maroon-deep)}
@media(max-width:700px){.sealing{padding:22px 20px}}
.tradition{border-left:3px solid var(--saffron);padding:6px 0 6px 22px;max-width:700px}
.tradition h3{font-size:18px;margin-bottom:8px}
.tradition p{font-family:'Karla',sans-serif;font-size:13.5px;color:#5a4a38;margin:0 0 8px;line-height:1.7}
.tradition p:last-child{margin:0}

.ritual-grid{display:grid;grid-template-columns:400px 1fr;gap:44px;align-items:start}
/* No video for this rite, so no column for one: the steps run the full
   width of the wrap, left-aligned under their own heading. The class is
   put there by rituals.inject.collapse_empty_media. */
.ritual-grid.solo{grid-template-columns:1fr}
.ritual-media{position:sticky;top:88px}
.vfacade.small{aspect-ratio:4/3}
.vfacade.small .vf-play{width:52px;height:52px;font-size:18px}
.vfacade.small .vf-cap{font-size:13.5px}
.vslot2{display:none;aspect-ratio:16/9;background:#000}
.vslot2 iframe{width:100%;height:100%;border:0;display:block}
.ritual-media.playing .vfacade{display:none}
.ritual-media.playing .vslot2{display:block}
.ritual-steps .step:first-child{border-top:none}
@media(max-width:900px){.ritual-grid{grid-template-columns:1fr;gap:26px}.ritual-media{position:static}.vfacade.small{aspect-ratio:16/9}}

/* WEAR PROCEDURE + RITUAL — numbered light rows */
.step{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:16px 0;border-top:1px solid var(--copper-line)}
.step:last-child{border-bottom:1px solid var(--copper-line)}
.stepnum{font-family:'Cormorant SC',serif;font-size:28px;color:var(--copper);line-height:1.1}
.step h3{font-size:18px;margin-bottom:4px}
.step p{margin:0;font-size:15px;color:#4a3c33}

/* DEITY */
.deity-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.deity-grid p{margin:0 0 14px;color:#3a2f27}
.deity-link{display:block;background:var(--maroon-deep);color:var(--ivory-light);padding:28px 28px;text-decoration:none}
.deity-link .eyebrow{color:var(--ember)}
.deity-link h3{color:var(--ivory-light);font-size:22px;margin:8px 0 8px}
.deity-link p{color:#e9dcc8;font-size:15px;margin:0 0 14px}
.deity-link .go{font-family:'Karla',sans-serif;font-weight:700;font-size:13.5px;color:var(--ember)}
@media(max-width:880px){.deity-grid{grid-template-columns:1fr;gap:26px}}

/* CONSULT */
.consult-band{background:var(--maroon-deep);color:var(--ivory-light);padding:52px 0}
.consult-inner{display:flex;justify-content:space-between;align-items:center;gap:36px;flex-wrap:wrap}
.consult-band h2{color:var(--ivory-light);font-size:clamp(23px,2.8vw,30px);margin:8px 0 10px}
.consult-band p{color:#e9dcc8;margin:0;max-width:560px;font-size:16.5px}
.consult-band p strong{color:var(--ember)}
/* `flex-shrink:0` keeps this column at its natural width beside the heading
   on desktop, which is right — but its natural width is set by its widest
   child, the opening-hours line ("We're open now · Mon-Sat, 9:30-18:00 IST
   (…where you are)"), and that is 421px. On a 390px phone the column
   therefore refused to fit, and `html,body{overflow-x:hidden}` quietly CUT
   47px off the right of it: the phone number, the WhatsApp link, the email
   address and the opening hours were all clipped, with no way to scroll to
   them. Measured at 390x844 on 1 Sep 2026.
   `max-width:100%` caps it at the container so the hours line wraps instead;
   `min-width:0` lets it do so inside a flex parent. Desktop is unchanged —
   there the column is narrower than 100% anyway. */
.consult-ctas{display:flex;flex-direction:column;gap:12px;flex-shrink:0;max-width:100%;min-width:0}
.g-solid{font-family:'Karla',sans-serif;font-weight:700;font-size:14.5px;background:var(--ember);color:var(--maroon-deep);padding:14px 26px;text-decoration:none;text-align:center}
.contact-lines{margin-top:6px;font-family:'Karla',sans-serif;font-size:13px;color:#e9dcc8;text-align:center;line-height:1.9}
.contact-lines a{display:block;color:var(--ember);text-decoration:none;font-weight:700}
.contact-lines a:hover{text-decoration:underline}
.contact-lines span{display:block;color:#c9b49a;font-size:12px}
.oh b{font-weight:700}
.oh .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle}
.oh .dot.open{background:#5FA36B}
.oh .dot.shut{background:#B9793A}
.contact-lines .oh b{color:var(--ivory-light)}
.oh-foot{color:#4a3c33}
.oh-foot b{color:var(--maroon-deep)}
.g-line{font-family:'Karla',sans-serif;font-weight:700;font-size:14.5px;border:1px solid var(--ember);color:var(--ember);padding:14px 26px;text-decoration:none;text-align:center}

/* REVIEWS */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rev{background:var(--ivory-light);border:1px solid var(--copper-line);padding:22px 20px}
.rev .stars{color:var(--saffron);font-size:13px;letter-spacing:2px;margin-bottom:9px}
.rev p{font-size:16px;font-style:italic;color:#3a2f27;margin:0 0 12px}
.rev-author{font-family:'Karla',sans-serif;font-weight:700;font-size:13px;color:var(--maroon-deep)}
.rev-loc{font-family:'Karla',sans-serif;font-size:12px;color:#6E5C48}
@media(max-width:880px){.rev-grid{grid-template-columns:1fr}}

/* FAQ */
.faq-item{border-top:1px solid var(--copper-line)}
.faq-item:last-child{border-bottom:1px solid var(--copper-line)}
/* The FAQ question is Cormorant SC 18px 700 everywhere else on the site —
   partials/_editorial_css.html declares it and twenty-eight templates repeat
   it. This file styles every product page, so its Cormorant Garamond 18.5px
   600 was the one place the question changed typeface, on 200 pages.
   Measured 5 Sep 2026. The padding is left as this page has it. */
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:19px 4px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:'Cormorant SC',serif;font-size:18px;font-weight:700;color:var(--maroon-deep)}
.faq-q .icon{font-size:19px;color:var(--vermillion);transition:transform .25s;flex-shrink:0}
.faq-item.open .icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a-inner{padding:0 4px 20px;font-size:15.5px;color:#4a3c33;max-width:780px}
.faq-a-inner a{font-weight:700;color:var(--vermillion)}

/* RELATED */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* Phones: a swipe rail, not three screens of scrolling. Measured 24 Aug 2026
   (client screenshot): stacked cards made #related 1,915px tall at 375px —
   each card a full viewport. The rail scrolls INSIDE its own container, so
   the page body still never scrolls sideways (the blog-overflow rule). */
/* ONE CARD AT A TIME, AT THE WIDTH OF THE PHONE. Client, 2 Sep 2026: "One
   image, increase size and auto scroll." The 240px cap was the whole of the
   "small": on a 390px phone it held the card to 240px inside a 358px column,
   so the deity art rendered at roughly two thirds of the space available to
   it. The card is now the column, and the art with it.

   The 62% peek was the swipe affordance and it is deliberately given up —
   `static/js/rail.js` advances the rail on its own, which announces it is a
   rail far better than half a card ever did, and the client asked for one
   image rather than one and a half. The snap still holds each card square. */
@media(max-width:820px){
  .rel-grid{display:flex;grid-template-columns:none;overflow-x:auto;gap:14px;
    padding-bottom:10px;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch}
  .rel{flex:0 0 100%;max-width:430px;scroll-snap-align:start}
  .rel h3{font-size:18px}
  /* The lift-on-hover transform fights the snap on a touch rail.
     SCOPED TO THE RAIL so the cascade cannot decide this by line
     order: the base `.rel:hover` rule sits LATER in this file at
     equal specificity, and a media query adds none — so the plain
     override written here on 1 Sep never applied at all. */
  .rel-grid .rel:hover{transform:none}
}
.rel{background:var(--ivory-light);border:1px solid var(--copper-line);padding:0 0 20px;text-decoration:none;transition:transform .15s;overflow:hidden;display:block}
/* 3:4 — the deity art's own shape. See category.css: the library is
   overwhelmingly portrait at 0.748, and any other frame leaves the
   painting stranded in the middle of an empty box. */
.rel-img{display:block;position:relative;aspect-ratio:3/4;background:var(--ivory);border-bottom:1px solid var(--copper-line);overflow:hidden}
.rel-img img{height:100%;width:auto;max-width:100%;margin:0 auto;object-fit:contain;display:block}
.rel-ph{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font-family:'Yatra One',cursive;font-size:38px;color:var(--saffron);background:radial-gradient(circle at 50% 45%,rgba(200,120,40,.18),transparent 70%)}
.rel-img.noimg img{display:none}
.rel-img.noimg .rel-ph{display:flex}
.rel:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.rel h3{font-size:19px;margin-top:16px;margin-bottom:6px}
.rel p{font-family:'Karla',sans-serif;font-size:13px;color:#5a4a38;margin-top:0;margin-bottom:12px;line-height:1.55}
.rel .pr{font-family:'Karla',sans-serif;font-weight:700;font-size:14px;color:var(--maroon-deep)}
/* The card's text inset, LAST and in longhand on purpose. The image is a direct
   child and must stay full-bleed, so the inset lives on the text children — and
   it used to sit above these rules, where `.rel p{margin:0 0 12px}` silently
   reset it. Shorthand margin sets all four sides: the blurb lost its 20px and
   ran edge to edge while the h3, which only ever used longhand, kept its own.
   Declared after everything, any future shorthand above cannot win. */
.rel h3,.rel p,.rel .pr{margin-left:20px;margin-right:20px}
/* `@media(max-width:820px){.rel-grid{grid-template-columns:1fr}}` was here.
   It is what the rail replaces: below 820px this grid stacked its three cards
   into one column, which is the 1,915px-of-scrolling shape measured on 24 Aug
   and fixed on phones then — but only below 640px, so the 640-820px tablet
   band kept it. The rail now starts where the columns stop, and the two rules
   cannot both own that range. */

/* THE CLOSING CTA IS A PANEL, NOT A FULL-BLEED BAND.
   It was var(--maroon-deep) edge to edge and the footer is the same colour, so
   the two met with no boundary and rendered as one continuous dark slab: the
   offer read as the top of the footer rather than as the page's last word
   (client screenshot, 26 Aug 2026). The fix is a container — the section keeps
   the page's ivory ground and the maroon shrinks to a bounded card inside it,
   so ivory shows on all four sides and the footer starts somewhere visible.

   The background moves to `> .wrap`, the element the stored markup already
   provides; nothing in the 209 body_post_html rows changes. The child selector
   matters: `.bookbar` also carries a `.wrap`, and a descendant selector would
   paint the sticky bar's inner div as well. */
.final-cta{background:transparent;color:var(--ivory-light);text-align:center;padding:8px 32px 72px}
/* The `!important` is fighting an INLINE max-width:640px that sits in all 209
   stored body_post_html rows — the one width no stylesheet can reach without
   it. 640 was the width of a text COLUMN, which is right for the paragraph and
   too narrow for a panel: it left the card looking lost under the 1120px
   related-rituals grid, and it broke the heading across two lines with "yours"
   orphaned on the second. The paragraph keeps its own 540px cap below, so the
   copy measure is unchanged — only the card around it grew. */
/* 880 -> 860 on 6 Sep 2026. 880 was chosen against 640 and the reasoning above
   still holds — but it left this card's left edge 10px OUTSIDE the prose bands
   (193 against their 203 at 1280), so the column stepped in and out down the
   page. 860 aligns it with them exactly. The 26 Aug fix survives the change,
   measured rather than assumed: at 860 the heading is still ONE line on every
   rite including the longest (chandi-homa, 42 chars) at 1280 and at 1024, the
   card height is unchanged at 364px, and the paragraph keeps its own 540px cap
   so the copy measure never depended on this number. */
.final-cta > .wrap{max-width:860px!important;background:var(--maroon-deep);padding:56px 48px}
.final-cta h2{color:var(--ivory-light);font-size:clamp(26px,3.8vw,38px)}
.final-cta p{color:#e9dcc8;max-width:540px;margin:14px auto 24px}
@media(max-width:620px){
  /* Narrower gutters on a phone: 32px each side would cost 64px of a 375px
     screen. 16px still shows ivory down both edges, which is what makes the
     panel read as a panel; below that the gap above the footer is doing most
     of the separating anyway. */
  .final-cta{padding:8px 16px 48px}
  .final-cta > .wrap{padding:40px 22px}
}

.footer-note{font-size:12px;color:#6E5C48;margin-top:10px;max-width:840px;margin-left:auto;margin-right:auto;line-height:1.7}


/* ★ THE BAR THE CLIENT PHOTOGRAPHED IN THE MIDDLE OF THE HERO (6 Sep 2026).
   It is parked 74px below the fold, and on iOS Safari's slow scrolling path a
   fixed element is carried with the document during a drag — so on the way up
   this full-width maroon bar crosses the page. The same screenshot has no
   ribbon and no header at the top, which is how you know every fixed element
   moved together and not just this one; partials/_chrome_shell_css.html has
   the mechanism and the two changes made to the chrome for it.

   `will-change`, NOT the `translateZ(0)` used on the chrome and on `.chat-fab`.
   The promotion has to survive the reveal, and the reveal is an inline
   `bar.style.transform` written by a script living in 200-plus stored
   body_post_html rows — an inline transform replaces this rule's transform
   whole, so a translateZ declared here would be dropped at exactly the moment
   the bar is on screen. A 2D translate does not force a layer of its own, so
   the bar was never promoted at rest either. This says the one thing that
   holds in both states.

   The inset is the second half, and it is the same one `.chat-fab` needed:
   `bottom` is measured against the LAYOUT viewport, which on iOS is the full
   height as though Safari's toolbar were hidden, so the bar's own content sat
   under that toolbar and the home indicator. Padding lifts the content while
   the ground stays flush to the edge. `env()` is 0 wherever it does not apply,
   so desktop is byte-identical — body's reservation below is written the same
   way and stays 76px there. */
.bookbar{position:fixed;left:0;right:0;bottom:0;z-index:75;transform:translateY(110%);transition:transform .3s;will-change:transform;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--maroon-deep);color:var(--ivory-light);box-shadow:0 -8px 30px rgba(42,33,28,.3)}
.bookbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 32px}
.bb-sel{font-family:'Karla',sans-serif;font-size:13px;line-height:1.4;min-width:0}
.bb-sel strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-sel span{color:#d9c8ae}
.bb-right{display:flex;align-items:center;gap:16px;flex-shrink:0}
.bb-price{font-family:'Karla',sans-serif;font-weight:700;font-size:22px}
.bb-book{font-family:'Karla',sans-serif;font-weight:700;font-size:14.5px;background:var(--ember);color:var(--maroon-deep);padding:13px 28px;text-decoration:none;border:none;cursor:pointer}
.bb-book:hover{background:#f0a05a}
@media(max-width:640px){.bb-sel span{display:none}.bb-price{font-size:18px}.bb-book{padding:12px 18px}}

/* An Aradhana card whose own page is not built yet. Same card, no pointer and
   no hover lift — it must not look like something that leads somewhere. */
.prod-flat{cursor:default}
.prod-flat:hover{transform:none;box-shadow:none}
.prod-flat .bk{opacity:.7}


/* The yantra sealing figure on the rudra master is a 480px image with no max
   width; on a 390px phone it ran 77-557px and body{overflow-x:hidden} cut it
   (measured 5 Sep 2026 after the ladder fix). */
.seal-fig .seal-img img,.seal-img img{max-width:100%;height:auto}

/* "What a Maha Homa is" — the THREE-CARD form, which chandi-homa and
   rudra-homa carry because their own masters draw it. The fleet's 196
   generated rites use the four-tile `.mb-specs` grid above; these two are
   spec_locked, and a rite that carries its own spec carries its own design.

   ★ THESE RULES LIVED ONLY INSIDE THE MASTERS' OWN <style>. Restoring the
   band from a master copies the MARKUP into a stored body and leaves the CSS
   behind, so the three cards rendered as one run of unstyled prose: the band
   measured 5,385px and the whole page went from 16,272px to 76,751px. That is
   the same fault, in the same section, that the client reported on 2 September
   ("this has been rendered but the template layout is ..."), and the tile
   grid's own seven classes were copied here for exactly this reason. INJECTED
   MARKUP OWNS ITS CSS — see MahaBandStylesheetTests, which asserts it.

   Copied verbatim from pages/rendered/rudra-homa-product.html, breakpoint
   included. */
.mb-points{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:28px;padding-top:26px;
  border-top:1px solid rgba(232,138,60,.3)}
.mb-pt h3{font-family:'Cormorant SC',serif;font-size:19px;color:var(--ivory-light);margin:0 0 8px;
  line-height:1.25;display:flex;gap:10px;align-items:baseline}
.mb-pt h3::before{content:'';width:7px;height:7px;background:var(--ember);flex-shrink:0;
  transform:rotate(45deg);position:relative;top:-2px}
.mb-pt p{font-family:'Karla',sans-serif;font-size:13.5px;color:#c9b79c;line-height:1.75;margin:0}
@media(max-width:860px){.mb-points{grid-template-columns:1fr;gap:22px}}

/* ---------------------------------------------------------------------
 * THE SCALE SECTIONS were re-written here on 5 September 2026 and that block
 * has been REMOVED. It was an invention: the classes were found unstyled and
 * new rules were written rather than the masters' own copied, so 26 of its 31
 * selectors disagreed with the client's templates — the schedule panel cream
 * where the client draws it maroon, the arithmetic row padded and centred
 * until it wrapped onto two lines.
 *
 * ★ SCOPING THE MASTERS' RULES OVER THE TOP WAS NOT ENOUGH, and that is the
 * part worth remembering. `body.rite-chandi-homa .ar-eq` outranks `.ar-eq` on
 * every property it MENTIONS — and the master sets `padding-bottom`, not
 * `padding`, and sets no background at all, so the invented `padding:18px 16px`
 * and its cream fill survived underneath a rule that had already won. A more
 * specific selector overrides declarations, not rules. Measured on UAT:
 * padding computed to "18px 16px 14px", which is the two rules interleaved.
 *
 * The per-rite blocks at the end of this file are now the only source for
 * .sched, .sc-*, .arith, .ar*, .ladder — copied verbatim from each master and
 * scoped to that rite's page, because the two templates are different designs
 * sharing class names. See the comment there.
 * --------------------------------------------------------------------- */

/* ---- the hero buybox, on the two rites sold by scale ----------------------
   chandi-homa and rudra-homa open with their masters' own `.buybox`: the
   counts on a dark bar, the From price, "Choose Your Scale", and the client's
   own subline ("Three scales — free energised Sri Chakra Yantra with every
   one..."). It is the design the client sent back on 6 September 2026.

   ★ HALF OF IT WAS NEVER STYLED HERE, because half of it used to be DELETED.
   `normalise_hero_buybox` stripped `.bb-buy` and `.bb-note` and moved the CTA
   out, so nobody had reason to copy their rules across. Same lesson as
   `.mb-points` above and the tile grid before it: INJECTED MARKUP OWNS ITS CSS.

   ★★ EVERY RULE IS SCOPED UNDER `.buybox`, AND THAT IS LOAD-BEARING, NOT TIDY.
   `.bb-spec`, `.bb-s`, `.bb-s b`, `.bb-s span` and `.bb-price` are ALL used by
   a second component on the same page — the light-ground spec strip and the
   sticky booking bar, both styled earlier in this file in `--maroon-deep` on
   cream. Unscoped, the two sets fight on source order, and the direction they
   lose in is invisible: measured on UAT with the first version of this block,
   `.bb-s b` computed to rgb(62,16,16) against a panel background of
   rgb(62,16,16) — THE COUNTS WERE MAROON TEXT ON MAROON, present in the
   markup, in the accessibility tree, and in every heading check, and not on
   the page. The `.wrap`/`.crumbs` collision again, and it took a screenshot to
   see it. Scoping keeps the two components apart.

   Copied from pages/rendered/chandi-homa-product.html; both masters match. */
.buybox{background:var(--maroon-deep);color:var(--ivory-light);margin:2px 0 18px;box-shadow:var(--shadow)}
.buybox .bb-spec{display:flex;flex-wrap:nowrap;gap:0;padding:0;border:none;
  border-bottom:1px solid rgba(232,138,60,.3)}
.buybox .bb-s{display:block;flex:1;padding:15px 18px;
  border-right:1px solid rgba(232,138,60,.22);min-width:0}
.buybox .bb-s:last-child{border-right:none}
.buybox .bb-s b{display:block;font-family:'Cormorant SC',serif;font-weight:700;font-size:22px;
  color:var(--ivory-light);line-height:1.1}
.buybox .bb-s span{display:block;font-family:'Karla',sans-serif;font-weight:400;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ember);margin-top:5px;line-height:1.3}
.buybox .bb-buy{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:17px 18px 6px;flex-wrap:wrap}
.buybox .bb-from{display:block;font-family:'Karla',sans-serif;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ember);margin-bottom:3px}
.buybox .bb-price{font-family:'Cormorant SC',serif;font-weight:700;font-size:38px;
  color:var(--ivory-light);line-height:1}
.buybox .bb-cta{font-family:'Karla',sans-serif;font-weight:700;font-size:14.5px;
  background:var(--ember);color:var(--maroon-deep);padding:14px 26px;text-decoration:none;
  white-space:nowrap;border:none;cursor:pointer}
.buybox .bb-cta:hover{background:#f0a05a}
.buybox .bb-note{font-family:'Karla',sans-serif;font-size:11.5px;color:#c9b79c;margin:0;
  padding:6px 18px 17px;line-height:1.65}
@media(max-width:520px){
  .buybox .bb-spec{flex-wrap:wrap}
  .buybox .bb-s{flex:1 1 50%;border-bottom:1px solid rgba(232,138,60,.22)}
  .buybox .bb-s:nth-child(2n){border-right:none}
  .buybox .bb-price{font-size:32px}
  .buybox .bb-cta{width:100%;text-align:center}
}

/* ---- the Latcharchana add-on, on chandi-homa ------------------------------
   "Step 2 — Add the Latcharchana? (optional)", from the client's master. Its
   step is inserted by `restore_spec_masters` only when the add-on has a price,
   and the price was 0 until the client authorised it on 6 September 2026, so
   none of these classes had ever needed a rule here. Fourth time in one day
   that restoring the client's markup would have shipped it unstyled — checked
   before deploying this time. INJECTED MARKUP OWNS ITS CSS.

   Unscoped deliberately: unlike `.bb-*` and `.mb-*`, no `.addon2` / `.ad2-*`
   class exists anywhere else in this file or in any master, so there is no
   second component to collide with. Verified before writing it. */
.addon2{width:100%;text-align:left;background:var(--ivory-light);border:1px solid var(--copper-line);
  padding:20px 22px;cursor:pointer;display:grid;grid-template-columns:26px 1fr;gap:16px;
  align-items:start;font-family:'Karla',sans-serif;margin-bottom:24px}
.addon2[aria-pressed="true"]{border-color:var(--vermillion);background:#fff}
.ad2-check{width:22px;height:22px;border:1.5px solid var(--copper);display:block;
  position:relative;margin-top:2px}
.addon2[aria-pressed="true"] .ad2-check{background:var(--vermillion);border-color:var(--vermillion)}
.addon2[aria-pressed="true"] .ad2-check::after{content:'';position:absolute;left:7px;top:2px;
  width:6px;height:12px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ad2-name{display:block;font-family:'Cormorant SC',serif;font-weight:700;font-size:18px;
  color:var(--maroon-deep);margin-bottom:5px}
.ad2-delta{color:var(--vermillion)}
.ad2-sub{display:block;font-size:13px;color:#5a4a38;line-height:1.7}

/* ---- the rest of the two spec masters' own design ------------------------
   The two rites the client drew page by page use 33 classes that had NO rule
   anywhere in this file. Whole sections rendered as unstyled prose on the
   served page while every text check agreed they were present:

     .terms .term        the Rudram / Chamakam glossary
     .flow .flow-note    the step-by-step running order
     .arith .ar .ar-big  the scale arithmetic ("11 rounds x 4 priests")
     .ordercard .oc-*    "Where the time goes"
     .reqform .rf-*      THE ENQUIRY FORM — the only way to buy the Maha
                         Rudram, the Athi Rudra and the Sahasra Chandi, which
                         are by-arrangement and have no Add to Cart at all
     .yfig .ycopy .yph   the Sri Chakra figure on Chandi

   Found by DIFFING THE CLASSES the served page uses against the selectors this
   file defines, after the same fault had been fixed one component at a time
   four times in one day — the tile grid, `.mb-points`, the hero buybox, the
   Latcharchana step. Each of those was found by looking at a picture and
   noticing something wrong. This is the general form of the question, and it
   answers for the whole page at once.

   SAFE TO LEAVE UNSCOPED, CHECKED RATHER THAN ASSUMED. Several names are
   generic enough to worry about — `.hi`, `.wide`, `.four`, `.rep`, `.term`,
   `.fl`, `.flow`. Every one of them is used by ONLY the two spec-master
   product pages across all 198 captured, and this stylesheet is loaded by
   `rituals/product.html` alone, so the dashboards and the checkout master that
   carry `.flow` and `.hi` in their own <style> cannot see these rules.

   Copied verbatim from the two masters, media queries included, deduplicated
   where both carry the same rule. */
/* ── THE SHAPE OF THE RITE — glossary + the sequence every scale shares ────── */
.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 30px;margin:0 0 34px}
.term dt{font-family:'Cormorant SC',serif;font-weight:700;font-size:19px;color:var(--maroon-deep);margin:0 0 5px}
.term dd{margin:0;font-family:'Karla',sans-serif;font-size:13px;color:#5a4a38;line-height:1.75}
.term dd em{font-style:normal;color:var(--vermillion);font-weight:700}
@media(max-width:820px){.terms{grid-template-columns:1fr;gap:18px}}
.flow{display:flex;align-items:stretch;gap:0;border:1px solid var(--copper-line);
  background:var(--ivory-light);margin:0 0 6px;flex-wrap:wrap}
.fl{flex:1 1 0;min-width:150px;padding:20px 18px;border-right:1px solid var(--copper-line);position:relative}
.fl:last-child{border-right:none}
.fl-n{font-family:'Karla',sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--copper);font-weight:700;display:block;margin-bottom:6px}
.fl h4{font-family:'Cormorant SC',serif;font-weight:700;font-size:17px;color:var(--maroon-deep);margin:0 0 5px;line-height:1.2}
.fl p{font-family:'Karla',sans-serif;font-size:12.5px;color:#5a4a38;margin:0;line-height:1.6}
.fl.rep{background:#fff;border-top:3px solid var(--vermillion)}
.fl.rep h4{color:var(--vermillion)}
@media(max-width:760px){.fl{flex:1 1 100%;border-right:none;border-bottom:1px solid var(--copper-line)}
  .fl:last-child{border-bottom:none}}
.flow-note{font-family:'Karla',sans-serif;font-size:12.5px;color:#7a6a58;margin:10px 0 0;line-height:1.7}
/* ── THE FOUR SCALES as an arithmetic strip ───────────────────────────────── */
.arith{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.ar{border:1px solid var(--copper-line);background:var(--ivory-light);padding:20px 18px}
.ar.hi{border-color:var(--vermillion);border-width:2px;background:#fff}
.ar h3{font-size:18px;margin:0 0 12px;line-height:1.2}
.ar-big{font-family:'Cormorant SC',serif;font-weight:700;font-size:34px;color:var(--vermillion);
  line-height:1;display:block}
.ar-lab{font-family:'Karla',sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--copper);display:block;margin:5px 0 12px}
@media(max-width:1000px){.arith{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.arith{grid-template-columns:1fr}}
/* MERGE NOTE */
.mergenote{background:var(--ivory-light);border:1px solid var(--copper-line);border-left:3px solid var(--saffron);
  padding:18px 22px;margin:0 0 26px;font-family:'Karla',sans-serif;font-size:14px;color:#4a3c33;line-height:1.75}
.mergenote strong{color:var(--maroon-deep)}
/* FOUR-RUNG CHOOSER */
.tier-pick.four{grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1000px){.tier-pick.four{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tier-pick.four{grid-template-columns:1fr}}
.tp-scale{display:block;font-family:'Karla',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--vermillion);margin:2px 0 10px;line-height:1.5}
.ladder .lnum{font-family:'Cormorant SC',serif;font-weight:700;font-size:18px;color:var(--vermillion)}
.seal-copy h3{margin-top:0}
.seal-copy p + p{margin-top:14px}
/* ORDER CARD in the ritual-media slot (no telecast recording yet) */
.ordercard{background:var(--maroon-deep);color:var(--ivory-light);padding:26px 24px;margin-top:14px}
.ordercard h3{color:var(--ivory-light);font-size:20px;margin:0 0 5px}
.oc-sub{font-family:'Karla',sans-serif;font-size:12.5px;color:#c9b79c;margin:0 0 18px;line-height:1.6}
.oc-list{list-style:none;margin:0;padding:0;counter-reset:oc}
.oc-list li{counter-increment:oc;font-family:'Karla',sans-serif;font-size:13.5px;color:var(--ivory-light);
  padding:10px 0;border-bottom:1px solid rgba(232,138,60,.22);display:flex;gap:12px;align-items:baseline}
.oc-list li:last-child{border-bottom:none}
.oc-list li::before{content:counter(oc);font-family:'Cormorant SC',serif;font-size:14px;color:var(--ember);
  width:16px;flex-shrink:0}
.oc-list em{font-style:normal;color:#c9b79c;font-size:11.5px;display:block;margin-top:1px}
.oc-foot{font-family:'Karla',sans-serif;font-size:11.5px;color:#c9b79c;margin:18px 0 0;line-height:1.65}
.oc-foot a{color:var(--ember);font-weight:700;text-decoration:none}
/* ── ENQUIRY-ONLY — rites above the cart threshold are arranged directly ───── */
.tp-req{display:inline-block;font-family:'Karla',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-light);background:var(--copper);
  padding:4px 9px;margin:0 0 9px;align-self:flex-start}
.reqnote{background:var(--ivory-light);border:1px solid var(--copper-line);border-left:3px solid var(--copper);
  padding:17px 21px;margin:0 0 22px;font-family:'Karla',sans-serif;font-size:13.5px;color:#4a3c33;line-height:1.75}
.reqnote[hidden]{display:none}
.reqnote strong{color:var(--maroon-deep)}
.reqform{border:1px solid var(--copper-line);background:var(--ivory-light);padding:26px 28px;margin:0 0 24px}
.reqform[hidden]{display:none}
.reqform h3{font-size:21px;margin:0 0 6px}
.rf-sub{font-family:'Karla',sans-serif;font-size:13px;color:#5a4a38;line-height:1.75;margin:0 0 20px;max-width:660px}
.rf-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 20px}
.rf-f{display:flex;flex-direction:column;gap:5px}
.rf-f.wide{grid-column:1/-1}
.rf-f label{font-family:'Karla',sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--copper)}
.rf-f input,.rf-f textarea{font-family:'Karla',sans-serif;font-size:14px;color:var(--ash);
  border:1px solid var(--copper-line);background:#fff;padding:11px 12px}
.rf-f input[readonly]{background:var(--ivory);color:var(--maroon-deep);font-weight:700}
.rf-f textarea{min-height:86px;resize:vertical}
.rf-f input:focus,.rf-f textarea:focus{outline:2px solid var(--vermillion);outline-offset:-1px}
.rf-send{margin-top:20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.rf-note{font-family:'Karla',sans-serif;font-size:12px;color:#7a6a58;line-height:1.6}
@media(max-width:660px){.rf-grid{grid-template-columns:1fr}.reqform{padding:22px 20px}}
/* ── HOW THE COUNT WORKS — the clarity section ────────────────────────────── */
.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:0 0 38px;
  padding-bottom:32px;border-bottom:1px solid var(--copper-line)}
.term dt{font-family:'Cormorant SC',serif;font-weight:700;font-size:20px;color:var(--maroon-deep);margin:0 0 6px}
.term dd{margin:0;font-family:'Karla',sans-serif;font-size:13.5px;color:#5a4a38;line-height:1.75}
@media(max-width:820px){.terms{grid-template-columns:1fr;gap:20px}}
.arith{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ar{border:1px solid var(--copper-line);background:var(--ivory-light);padding:24px 22px}
.ar h3{font-size:20px;margin:0 0 16px}
@media(max-width:900px){.arith{grid-template-columns:1fr}}
/* SCALE CHOOSER */
.tp-scale{display:block;font-family:'Karla',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--vermillion);margin:2px 0 10px}
/* SRI CHAKRA YANTRA figure */
.yfig{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start}
.yfig .yph{aspect-ratio:1/1;background:radial-gradient(circle at 50% 45%,rgba(199,134,43,.22),transparent 68%),var(--ivory-light);
  border:1px solid var(--copper-line);display:flex;align-items:center;justify-content:center}
.yfig figcaption{font-family:'Karla',sans-serif;font-size:11.5px;color:#8a7a68;line-height:1.65;margin-top:9px}
.yfig figure{margin:0}
.ycopy h3{margin-top:0}
.ycopy p + p{margin-top:14px}
@media(max-width:760px){.yfig{grid-template-columns:1fr;gap:18px}}

/* ---- the scale sections, per rite -----------------------------------------
   ★ CHANDI AND RUDRA ARE TWO SEPARATE CLIENT TEMPLATES THAT SHARE CLASS NAMES.
   Client, 6 September 2026: "this template is only for chandi not for all
   homa — chandi and rudra have separate template". They are not variants of
   one design, and the same selector means different things in each:

       .arith        3 columns on Chandi, 4 on Rudra (it sells four scales)
       .ar           padding 24px 22px  /  20px 18px
       .ar h3        20px  /  18px with its own line-height
       .ar-out       Rudra adds a rule above it
       .sc-rows li   first column 150px  /  165px
       and each has arithmetic classes the other does not —
       .ar-eq .ar-t .ar-op on Chandi, .ar-big .ar-lab on Rudra

   THE BLOCK THIS REPLACES WAS AN INVENTION. On 5 September these classes were
   found unstyled and were RE-WRITTEN from scratch rather than copied from the
   masters, which is how the schedule panel became cream-on-white when the
   client draws it maroon-on-ivory, and how the arithmetic row gained padding
   and wider columns until it wrapped onto two lines. 26 of 31 selectors
   disagreed with the template. The client sent a screenshot of both.

   So each master's rules are copied VERBATIM and scoped to that rite's own
   page via `body.rite-<slug>` (base.html, from `body_class`). Duplication
   between the two blocks is deliberate: it is what stops one template's
   design reaching the other page, and it is what a third spec master would
   need too. */

/* chandi-homa-product — the client's own rules, scoped to body.rite-chandi-homa */
body.rite-chandi-homa .arith{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
body.rite-chandi-homa .ar{border:1px solid var(--copper-line);background:var(--ivory-light);padding:24px 22px}
body.rite-chandi-homa .ar.hi{border-color:var(--vermillion);border-width:2px;background:#fff}
body.rite-chandi-homa .ar h3{font-size:20px;margin:0 0 16px}
body.rite-chandi-homa .ar-eq{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;
  padding-bottom:14px;border-bottom:1px solid var(--copper-line)}
body.rite-chandi-homa .ar-t{text-align:center;min-width:52px}
body.rite-chandi-homa .ar-t b{display:block;font-family:'Cormorant SC',serif;font-weight:700;font-size:26px;
  color:var(--maroon-deep);line-height:1}
body.rite-chandi-homa .ar-t span{display:block;font-family:'Karla',sans-serif;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--copper);margin-top:4px;line-height:1.3}
body.rite-chandi-homa .ar-op{font-family:'Cormorant SC',serif;font-size:22px;color:var(--saffron);line-height:1}
body.rite-chandi-homa .ar-res b{color:var(--vermillion);font-size:30px}
body.rite-chandi-homa .ar-out{font-family:'Karla',sans-serif;font-size:13px;color:#4a3c33;line-height:1.75;margin:0}
body.rite-chandi-homa .ar-out strong{color:var(--maroon-deep)}
@media(max-width:900px){body.rite-chandi-homa .arith{grid-template-columns:1fr}}
body.rite-chandi-homa .sched{background:var(--maroon-deep);color:var(--ivory-light);padding:26px 28px;margin:0 0 8px}
body.rite-chandi-homa .sched[hidden]{display:none}
body.rite-chandi-homa .sc-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;
  margin:0 0 6px}
body.rite-chandi-homa .sc-head h3{color:var(--ivory-light);font-size:21px;margin:0}
body.rite-chandi-homa .sc-when{font-family:'Karla',sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ember)}
body.rite-chandi-homa .sc-rows{list-style:none;margin:18px 0 0;padding:0}
body.rite-chandi-homa .sc-rows li{display:grid;grid-template-columns:150px 1fr auto;gap:18px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid rgba(232,138,60,.22);font-family:'Karla',sans-serif;font-size:13.5px}
body.rite-chandi-homa .sc-rows li:last-child{border-bottom:none}
body.rite-chandi-homa .sc-w{font-family:'Cormorant SC',serif;font-weight:700;font-size:16px;color:var(--ivory-light)}
body.rite-chandi-homa .sc-d{color:#e4d6bf;line-height:1.6}
body.rite-chandi-homa .sc-n{color:var(--ember);font-weight:700;white-space:nowrap;text-align:right}
body.rite-chandi-homa .sc-sum{margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(232,138,60,.3);
  font-family:'Karla',sans-serif;font-size:14px;color:#e9dcc8}
body.rite-chandi-homa .sc-sum b{font-family:'Cormorant SC',serif;font-size:19px;color:var(--ivory-light)}
@media(max-width:700px){body.rite-chandi-homa .sc-rows li{grid-template-columns:1fr;gap:3px}body.rite-chandi-homa .sc-n{text-align:left}}
body.rite-chandi-homa .ladder{width:100%;border-collapse:collapse;margin:0;font-family:'Karla',sans-serif;font-size:13px}
body.rite-chandi-homa .ladder th{text-align:left;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);
  font-weight:700;padding:0 14px 9px 0;border-bottom:1px solid var(--copper-line)}
body.rite-chandi-homa .ladder td{padding:13px 14px 13px 0;border-bottom:1px solid var(--copper-line);color:#4a3c33;vertical-align:top}
body.rite-chandi-homa .ladder tr:last-child td{border-bottom:none}
body.rite-chandi-homa .ladder .lrite{font-family:'Cormorant SC',serif;font-weight:700;font-size:16px;color:var(--maroon-deep)}
body.rite-chandi-homa .ladder .lnum{font-family:'Cormorant SC',serif;font-weight:700;font-size:18px;color:var(--vermillion)}
@media(max-width:760px){body.rite-chandi-homa .ladder thead{display:none}body.rite-chandi-homa .ladder tr{display:block;border-bottom:1px solid var(--copper-line);padding:12px 0}body.rite-chandi-homa .ladder tr:last-child{border-bottom:none}body.rite-chandi-homa .ladder td{display:flex;justify-content:space-between;gap:16px;border:none;padding:4px 0}body.rite-chandi-homa .ladder td::before{content:attr(data-l);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--copper);font-weight:700;flex-shrink:0}}

/* rudra-homa-product — the client's own rules, scoped to body.rite-rudra-homa */
body.rite-rudra-homa .arith{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
body.rite-rudra-homa .ar{border:1px solid var(--copper-line);background:var(--ivory-light);padding:20px 18px}
body.rite-rudra-homa .ar.hi{border-color:var(--vermillion);border-width:2px;background:#fff}
body.rite-rudra-homa .ar h3{font-size:18px;margin:0 0 12px;line-height:1.2}
body.rite-rudra-homa .ar-big{font-family:'Cormorant SC',serif;font-weight:700;font-size:34px;color:var(--vermillion);
  line-height:1;display:block}
body.rite-rudra-homa .ar-lab{font-family:'Karla',sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--copper);display:block;margin:5px 0 12px}
body.rite-rudra-homa .ar-out{font-family:'Karla',sans-serif;font-size:12.5px;color:#4a3c33;line-height:1.7;margin:0;
  padding-top:12px;border-top:1px solid var(--copper-line)}
body.rite-rudra-homa .ar-out strong{color:var(--maroon-deep)}
@media(max-width:1000px){body.rite-rudra-homa .arith{grid-template-columns:1fr 1fr}}
@media(max-width:560px){body.rite-rudra-homa .arith{grid-template-columns:1fr}}
body.rite-rudra-homa .sched{background:var(--maroon-deep);color:var(--ivory-light);padding:26px 28px;margin:0 0 8px}
body.rite-rudra-homa .sched[hidden]{display:none}
body.rite-rudra-homa .sc-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;margin:0 0 6px}
body.rite-rudra-homa .sc-head h3{color:var(--ivory-light);font-size:21px;margin:0}
body.rite-rudra-homa .sc-when{font-family:'Karla',sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ember)}
body.rite-rudra-homa .sc-rows{list-style:none;margin:18px 0 0;padding:0}
body.rite-rudra-homa .sc-rows li{display:grid;grid-template-columns:165px 1fr auto;gap:18px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid rgba(232,138,60,.22);font-family:'Karla',sans-serif;font-size:13.5px}
body.rite-rudra-homa .sc-rows li:last-child{border-bottom:none}
body.rite-rudra-homa .sc-w{font-family:'Cormorant SC',serif;font-weight:700;font-size:16px;color:var(--ivory-light)}
body.rite-rudra-homa .sc-d{color:#e4d6bf;line-height:1.6}
body.rite-rudra-homa .sc-n{color:var(--ember);font-weight:700;white-space:nowrap;text-align:right}
body.rite-rudra-homa .sc-sum{margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(232,138,60,.3);
  font-family:'Karla',sans-serif;font-size:14px;color:#e9dcc8}
body.rite-rudra-homa .sc-sum b{font-family:'Cormorant SC',serif;font-size:19px;color:var(--ivory-light)}
@media(max-width:700px){body.rite-rudra-homa .sc-rows li{grid-template-columns:1fr;gap:3px}body.rite-rudra-homa .sc-n{text-align:left}}
body.rite-rudra-homa .ladder{width:100%;border-collapse:collapse;margin:0;font-family:'Karla',sans-serif;font-size:13px}
body.rite-rudra-homa .ladder th{text-align:left;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);
  font-weight:700;padding:0 14px 9px 0;border-bottom:1px solid var(--copper-line)}
body.rite-rudra-homa .ladder td{padding:13px 14px 13px 0;border-bottom:1px solid var(--copper-line);color:#4a3c33;vertical-align:top}
body.rite-rudra-homa .ladder tr:last-child td{border-bottom:none}
body.rite-rudra-homa .ladder .lrite{font-family:'Cormorant SC',serif;font-weight:700;font-size:16px;color:var(--maroon-deep)}
body.rite-rudra-homa .ladder .lnum{font-family:'Cormorant SC',serif;font-weight:700;font-size:18px;color:var(--vermillion)}
@media(max-width:760px){body.rite-rudra-homa .ladder thead{display:none}body.rite-rudra-homa .ladder tr{display:block;border-bottom:1px solid var(--copper-line);padding:12px 0}body.rite-rudra-homa .ladder tr:last-child{border-bottom:none}body.rite-rudra-homa .ladder td{display:flex;justify-content:space-between;gap:16px;border:none;padding:4px 0}body.rite-rudra-homa .ladder td::before{content:attr(data-l);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--copper);font-weight:700;flex-shrink:0}}