/* v2: manuscript-dense, mobile-first. ink/marigold/cream kept; deeper
   cream ground, double-rule frames, gold accents, tight leading. */
:root{
  --ink:#1F2A44; --ink-deep:#161E2F; --marigold:#C96A06; --mg-deep:#9C4E03;
  --cream:#F3EBD8; --cream-deep:#EADFC4; --card:#FAF5E8; --gold:#B08A3E;
  --good:#1E6B3A;
  --serif:"Spectral",Georgia,serif; --disp:"Marcellus",Georgia,serif;
  --ui:"IBM Plex Sans",system-ui,sans-serif; --skt:"Tiro Devanagari Sanskrit",serif;
}
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* anchored sections must clear the sticky bars, or a menu jump lands the
   heading underneath them */
[id]{scroll-margin-top:104px}
@media(min-width:900px){[id]{scroll-margin-top:24px}}
.sidebar{display:none}
@media(min-width:900px){.sidebar{display:block}}
/* The floor the sticky dock stands on. It was a fixed 76px against a
   dock that grows: at 320px 'Free 5-week reading — Darshanam' wraps to
   three lines and the dock measures 110px, so the last 34px of every
   page sat underneath it. scrollhint.js measures the dock and sets
   --dock-h; the 76px here is what it is without scripting. */
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--serif);
     font-size:17.5px;font-weight:500;line-height:1.52;
     padding-bottom:var(--dock-h,76px);
     -webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 14px}

/* masthead: compact, framed */
.mast{background:var(--cream);border-bottom:3px double var(--ink);padding:8px 14px;
      display:flex;align-items:center;gap:10px}
.mast img{width:44px;height:44px}
/* The masthead carries the name at the top of every page, so it should
   read as the strongest thing there and not the faintest. */
.mast .word{font-family:var(--disp);font-size:22px;letter-spacing:.14em;
  color:var(--ink-deep);-webkit-text-stroke:.4px var(--ink-deep)}
.mast .tag{font-family:var(--skt);font-size:12.5px;display:block;
  color:var(--mg-deep);font-weight:600}
.mast .brand{text-decoration:none;color:inherit}
.mast .menu{margin-left:auto;font-family:var(--ui);font-size:22px;line-height:1}

/* offer ribbon */
.ribbon{background:linear-gradient(180deg,#33405E,var(--ink-deep));color:var(--cream);
  font-family:var(--ui);font-size:14px;text-align:center;padding:11px 14px;
  border-bottom:3px solid var(--gold);
  display:flex;gap:10px;align-items:center;justify-content:safe center;overflow-x:auto;
  white-space:nowrap;scrollbar-width:none}
.ribbon::-webkit-scrollbar{display:none}
.ribbon .rdot{color:var(--gold)}
.ribbon b{font-family:var(--disp);letter-spacing:.05em;color:#F5C36B;font-weight:400;font-size:17px}
.ribbon .rcode{border:1px dashed var(--gold);background:rgba(245,195,107,.12);
  color:#F5C36B;padding:4px 12px;letter-spacing:.16em;font-weight:700;font-size:14px}

/* the free reading line, where the offer ribbon was (13 Oct 2026) */
.ribbon.freeline{white-space:normal;justify-content:center}
.ribbon.freeline a{color:#F5C36B;font-weight:700;text-decoration:underline;
  text-underline-offset:3px}
.ribbon.freeline a:hover,.ribbon.freeline a:focus{color:var(--cream)}
body.myoffer-on .ribbon.freeline,body.myoffer-wait .ribbon.freeline{display:none}

/* utility menu bar */
.menubar{display:flex;gap:2px;overflow-x:auto;justify-content:safe center;background:var(--cream-deep);
  border-bottom:1.5px solid var(--ink);padding:0 6px;scrollbar-width:none}
.menubar::-webkit-scrollbar{display:none}
.menubar a{flex:0 0 auto;font-family:var(--ui);font-size:14px;font-weight:600;
  color:var(--ink);text-decoration:none;padding:12px 14px;letter-spacing:.01em;
  border-right:1px solid rgba(31,42,68,.3);transition:background .12s,color .12s}
.menubar a:hover{background:var(--ink);color:var(--cream)}
.menubar a:active{background:var(--ink-deep);color:var(--cream)}
/* The emphasis belongs to the free Darshanam, which carries a `first`
   class for exactly that. Hanging it on :first-child meant it moved to
   whatever happened to sit at the front — and adding Home handed it to
   the wrong link. */
.menubar a.first{color:var(--mg-deep);font-weight:700}
.menubar a.first:hover{color:var(--cream)}

/* product strip — always visible, scrolls horizontally on phones */
.strip{position:sticky;top:0;z-index:30;background:var(--ink);border-bottom:2px solid var(--gold);
       display:flex;gap:8px;overflow-x:auto;padding:8px 10px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;background:var(--ink-deep);border:1px solid var(--gold);
      color:var(--cream);font-family:var(--ui);font-size:13.5px;font-weight:600;
      line-height:1.25;padding:8px 13px;border-radius:3px;text-decoration:none;
      text-align:center;transition:transform .06s ease-out,filter .12s}
.chip:hover{filter:brightness(1.25)}
.chip:active{transform:translateY(2px)}
.chip b{display:block;font-family:var(--disp);font-size:14px;letter-spacing:.04em}
.chip.free b{color:#F5C36B}
.chip .p{color:#F5C36B}
/* The strip's own version of the same emphasis. The chip ground is
   --ink-deep and the price sits on it in #F5C36B at 10.23:1, so the
   word can take size and weight without approaching the 4.5:1 floor.
   A chip is 70px of sticky nav, so this is one step up, not three. */
.chip.free .p{font-size:16px;font-weight:700;letter-spacing:.01em}

/* hero: the document itself */
.hero{padding:22px 0 18px;border-bottom:1px solid var(--ink)}
.hero .grid{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:start}
.cover{border:1.5px solid var(--ink);outline:1px solid var(--gold);outline-offset:3px;
       background:var(--card);padding:12px 8px;text-align:center}
.cover img{width:110px;height:110px;display:block;margin:0 auto}
.cover .cw{font-family:var(--disp);font-size:11px;letter-spacing:.12em;margin-top:7px}
.cover .cl{font-family:var(--ui);font-size:8.5px;margin-top:3px}
.cover .pp{font-family:var(--ui);font-size:9px;margin-top:6px;color:var(--mg-deep)}
/* On a phone the seal was taking a third of the width beside the text,
   which left the prose running at about thirty characters a line —
   unreadable for a passage of any length. The seal now lies across the
   top as a short strip, and every line of type gets the full column. */
@media(max-width:520px){
  .hero .grid{grid-template-columns:1fr;gap:12px}
  .hero .cover{display:flex;flex-direction:row;align-items:center;
    justify-content:flex-start;gap:10px;text-align:left;padding:8px 11px}
  .hero .cover img{width:58px;height:58px;flex:0 0 auto;margin:0}
  .hero .cover .cw{font-size:10px;letter-spacing:.14em;margin-top:0}
  .hero .cover .cl{margin-top:0}
  .hero .cover .pp{margin-top:0;margin-left:auto}
}

/* the seal, given room — the page a buyer lands on, and the method page */
.sealpage{text-align:center}
.sealpage .bigseal{width:min(200px,52vw);height:auto;display:block;margin:4px auto 10px}
.sealpage .kick::after{display:none}
.sealpage .kick{justify-content:center}
h1{font-family:var(--disp);font-weight:400;font-size:clamp(23px,6vw,34px);
   line-height:1.18;margin:0 0 8px;letter-spacing:.01em}
.lede{font-size:18.5px;line-height:1.5;margin:0 0 8px}
/* Darker than the marigold it used to take. At 15px in a serif face on
   cream, #9C4E03 was legible and read as faded; this is the same hue
   carried down to where it holds its weight. */
.skt{font-family:var(--skt);color:#6E3602;font-size:15px}
/* The landing passage. A reader who has come to read rather than to
   buy needs somewhere to stand before the tiers; this is it. Narrow
   measure, ordinary ink, no ornament. */
.heroread{margin-top:15px;padding-top:15px;max-width:62ch;border-top:1px solid rgba(201,106,6,.28)}
.heroread p{font-size:15.5px;line-height:1.6;margin:0 0 8px;color:var(--ink)}
.heroread p:last-child{margin-bottom:0}
/* Same treatment under the tiers lede: it answers "which one is me",
   which nothing on the page did before. */
.tierread{margin:10px 0 18px;max-width:64ch}
.tierread p{font-size:15.5px;line-height:1.62;margin:0 0 9px;color:var(--ink)}
.tierread p:last-child{margin-bottom:0}
/* What the form asks for, and why, said once above the boxes
   (2026-09-20, his call). A person filling in a birth time wants to know
   what it is for before they give it. Narrow measure, ordinary ink. */
.formwhy{max-width:62ch;font-size:15.5px;line-height:1.6;color:var(--ink);
  margin:2px 0 16px}
.btnrow{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
/* Buttons you can feel (JP-434).

   The primary action was navy on cream — handsome, and it did not read
   as "buy". It is marigold now, which is the brand's own accent and the
   warmest thing on the page, so the one thing a visitor is meant to do
   is the one thing that catches the eye.

   The tactility is three cheap tricks doing one job: a gradient that is
   lighter at the top, a hairline of light along the top edge, and a
   solid drop shadow with no blur so the face sits on a physical ledge.
   Hover lifts it off that ledge and deepens the shadow; pressing pushes
   it flat into the page, which is the whole point — the travel is the
   feedback. */
.btn{position:relative;font-family:var(--ui);font-size:15.5px;font-weight:700;
     letter-spacing:.01em;padding:14px 22px;
     border-radius:3px;text-decoration:none;border:2.5px solid var(--ink);
     text-align:center;cursor:pointer;display:inline-block;
     box-shadow:0 4px 0 var(--ink-deep);
     transition:transform .08s ease-out,box-shadow .08s ease-out,filter .14s}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px);
     box-shadow:0 5px 0 var(--ink-deep)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink-deep)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

.btn.pri{color:#fff;border-color:#6d3502;background-color:#B35A05;
  background-image:linear-gradient(180deg,#C4650A 0%,#B35A05 52%,#8F4604 100%);
  box-shadow:0 4px 0 #7d3e02, inset 0 1px 0 rgba(255,226,180,.55);
  text-shadow:0 1px 0 rgba(0,0,0,.28)}
.btn.pri:hover{box-shadow:0 5px 0 #7d3e02, inset 0 1px 0 rgba(255,226,180,.7)}
.btn.pri:active{box-shadow:0 0 0 #7d3e02, inset 0 1px 0 rgba(255,226,180,.35)}
.btn.pri:focus-visible{outline-color:#7d3e02}

.btn.sec{color:var(--ink);background-color:var(--card);
  background-image:linear-gradient(180deg,#FFFCF4,var(--card));
  box-shadow:0 4px 0 rgba(31,42,68,.4), inset 0 1px 0 #fff}
.btn.sec:hover{box-shadow:0 5px 0 rgba(31,42,68,.45), inset 0 1px 0 #fff}
.btn.sec:active{box-shadow:0 0 0 rgba(31,42,68,.4)}

@media(prefers-reduced-motion:reduce){
  .btn{transition:none}
  .btn:hover,.btn:active{transform:none}
}

/* trust stat strip */
.stats{display:grid;grid-template-columns:repeat(2,1fr);border:1.5px solid var(--ink);
       background:var(--card);margin:16px 0}
.stat{padding:10px 8px;text-align:center;border:.5px solid var(--ink)}
.stat b{font-family:var(--disp);font-size:19px;display:block}
.stat .g{font-style:normal;color:var(--mg-deep);font-size:15px;display:block;line-height:1}
.stat span{font-family:var(--ui);font-size:12.5px;letter-spacing:.04em;
  color:var(--ink-deep);font-weight:600}

/* navagraha ornament divider */
.grahas{display:flex;justify-content:center;gap:14px;font-size:16px;color:var(--mg-deep);
  padding:10px 0 2px;letter-spacing:.05em}
/* The nine, twinkling. The sky is the subject of this whole site and
   this row is the one place on the page that literally is the sky, so
   it is where a little movement belongs.

   Each glyph is on its own slow cycle and they never all brighten
   together — staggered delays and a long period, so it reads as
   starlight rather than as something blinking for attention. The floor
   of the cycle is full-strength marigold: this brightens past normal
   rather than fading below it, because nothing here should ever look
   dull. */
.grahas span{display:inline-block;color:var(--mg-deep);
  animation:twinkle 6.5s ease-in-out infinite;will-change:filter}
.grahas span:nth-child(1){animation-delay:0s}
.grahas span:nth-child(2){animation-delay:1.7s}
.grahas span:nth-child(3){animation-delay:.6s}
.grahas span:nth-child(4){animation-delay:3.1s}
.grahas span:nth-child(5){animation-delay:2.2s}
.grahas span:nth-child(6){animation-delay:4.4s}
.grahas span:nth-child(7){animation-delay:1.1s}
.grahas span:nth-child(8){animation-delay:5.2s}
.grahas span:nth-child(9){animation-delay:3.7s}
@keyframes twinkle{
  0%,100%{filter:none;transform:scale(1)}
  50%{filter:brightness(1.5) drop-shadow(0 0 5px rgba(224,124,16,.75));
      transform:scale(1.14)}
}
@media(prefers-reduced-motion:reduce){.grahas span{animation:none}}

/* section frame */
section{padding:20px 0;border-bottom:1px solid var(--ink)}
.kick{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.16em;
      text-transform:uppercase;color:var(--mg-deep);margin-bottom:5px}
h2{font-family:var(--disp);font-weight:400;font-size:22px;margin:0 0 10px}
h2 .sk{font-family:var(--skt);font-size:17px;color:var(--mg-deep)}

/* contents grid — dense numbered */
.parts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ink);
       border:1.5px solid var(--ink)}
.part{background:var(--card);padding:10px}
.part b{font-family:var(--disp);font-size:14.5px;display:flex;align-items:center;gap:6px}
.pi{width:19px;height:19px;color:var(--mg-deep);flex:0 0 auto}
.part .n{color:var(--mg-deep);font-family:var(--disp)}
.part p{font-size:12.5px;margin:3px 0 0;line-height:1.4}

/* darshanam form teaser */
.formcard{border:1.5px solid var(--ink);outline:1px solid var(--gold);outline-offset:3px;
          background:var(--card);padding:14px;margin-top:6px}
.formcard .row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.formcard .full{grid-column:1/-1}
.fine{font-family:var(--ui);font-size:12.5px;margin-top:8px;color:var(--ink-deep)}
/* links: coloured, underlined, and they respond */
.measure a,.lib a,.lede a,p a,li a,.fnote a,.formnote a{color:var(--mg-deep);
  font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:2px;transition:background .12s,color .12s}
.measure a:hover,.lib a:hover,.lede a:hover,p a:hover,li a:hover,
.formnote a:hover{background:var(--mg-deep);color:var(--cream);
  text-decoration-color:transparent}
.fnote a{color:var(--cream);text-decoration-thickness:1.5px}
.fnote a:hover{background:var(--cream);color:var(--ink-deep)}

/* tiers — cards on mobile, sidebar on desktop */
.tier{border:2px solid var(--ink);background:var(--card);margin-bottom:17px;
      display:grid;grid-template-columns:1fr auto;gap:8px 26px;
      padding:13px 15px;align-items:center;
      box-shadow:0 2px 5px rgba(31,42,68,.10)}
.tier.feature{background:var(--ink);color:var(--cream)}
.tier.feature .meta{color:var(--cream-deep)}
.tier b{font-family:var(--disp);font-size:19.5px;letter-spacing:.03em}
.skm{font-family:var(--skt);font-size:12.5px;color:var(--mg-deep)}
.tier.feature .skm{color:#F5C36B}
.tier .meta{font-family:var(--ui);font-size:13px;line-height:1.45}
.tier .price{font-family:var(--disp);font-size:27px;text-align:right;color:var(--mg-deep)}
/* The currency, said once beside every price (owner, 2026-09-23): a bare
   "$69" reads as their own dollar in Canada or Australia. */
.cur{font-family:var(--sans);font-size:.46em;font-weight:700;letter-spacing:.08em;
  margin-left:.28em;vertical-align:.28em;color:inherit;opacity:.85}
.tprice .cur,.addrow .ap .cur{font-size:.62em;vertical-align:.12em}
.tier.feature .price{color:#F5C36B}
.tier .go{font-family:var(--ui);font-size:12.5px;color:var(--mg-deep);text-align:right}

/* "Free" is the offer we most want taken, and at 27px in the price
   colour it was the first rung of a ladder that runs $29, $49, $99,
   $169 — the cheapest item in a list rather than no cost at all.

   Size and weight carry this, not colour. Two moves:

   1. The word, not a shout. "FREE" in capitals is the register of a
      sale flash, and nothing here is discounted. Marcellus at 44px sets
      "Free" as a word, and at that size it is the largest thing in any
      price slot on the page without a sticker, a burst or a rule.
   2. Off the ladder. The other prices are --mg-deep because that is the
      price colour, and keeping Free in it kept it on the ladder. It
      takes --ink-deep instead — the same ink as the reading's own name
      — so it reads as a statement rather than an amount. That is the
      site's strongest pair, 15.30:1 on --card, and it puts no text on a
      coloured ground, so there is nothing here that can fail 4.5:1.
      (--marigold as a ground was not available in any case: cream on it
      is 3.19:1 and it on --card is 3.48:1, and both fail.)

   The hairline stroke is the masthead's trick, for the masthead's
   reason: a display face at weight 400 can read faint exactly where it
   is meant to read strongest. */
.tier.free .price{font-size:44px;line-height:1;color:var(--ink-deep);
  -webkit-text-stroke:.5px var(--ink-deep);letter-spacing:.005em}
/* The link under it is the click target for the biggest word on the
   page, so it is no longer set at caption size. --mg-deep on --card is
   5.50:1. */
.tier.free .go{font-size:13.5px;font-weight:700}

.tier.feature .go{color:#F5C36B}

/* What a stranger reads first (JP-430). The name keeps the heading; the
   line under it is one a first-time visitor could repeat to a friend,
   and the three facts below line up card to card so the eye compares
   down a column rather than reading five paragraphs. The Sanskrit gloss
   moves to the foot, where it is charm and not orientation. */
.tier{position:relative}
.tier .plain{display:block;font-family:var(--ui);font-size:14px;
  font-weight:600;line-height:1.3;margin-top:1px}
.tier.feature .plain{color:var(--cream)}
.tier .facts{margin:9px 0 0;padding:8px 0;display:grid;gap:4px;
  border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.tier .facts>div{display:flex;justify-content:space-between;gap:10px}
.tier .facts dt{font-family:var(--ui);font-size:12.5px;margin:0;color:var(--ink);
  font-weight:600}
.tier .facts dd{font-family:var(--ui);font-size:12.5px;font-weight:600;
  margin:0;text-align:right;font-variant-numeric:tabular-nums}
.tier .who{font-family:var(--ui);font-size:12.5px;line-height:1.5;color:var(--ink);
  margin:8px 0 6px}
/* The rail's one-line version of the same facts. */
.tier .brief{font-family:var(--ui);font-size:12px;line-height:1.45;
  margin-top:4px;font-variant-numeric:tabular-nums;color:var(--ink);
  font-weight:600}
/* What is in the document, in three lines — the thing that replaced the
   page count. Ink, never grey: these lines are now the only argument on
   the card that a Jatakam is a substantial document, so they are set at
   reading contrast and not as a caption. The hanging bullet keeps a
   wrapped second line under its own text rather than under the marker. */
.insidehead{font-family:var(--ui);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;color:var(--ink);margin:9px 0 3px}
.tier.feature .insidehead{color:#F5C36B}
ul.inside{list-style:none;margin:0;padding:0}
ul.inside li{font-family:var(--ui);font-size:12.5px;line-height:1.45;
  color:var(--ink);padding-left:12px;position:relative;margin:0 0 4px;
  text-align:left}
ul.inside li:last-child{margin-bottom:0}
ul.inside li::before{content:"\2022";position:absolute;left:1px;top:0;
  color:var(--mg-deep);font-weight:700}
.tier.feature ul.inside li{color:var(--cream)}
.tier.feature ul.inside li::before{color:#F5C36B}
/* In the rail the same lines are set one notch smaller, because .thead
   centres everything else in that card and a wrapped sentence cannot be
   read centred. Tight, so five cards still fit the column: three lines
   cost about 54px here, which holds a card near 150px and nowhere near
   the 280px that used to hide the other products. */
.sidebar ul.inside,.insidedrop ul.inside{margin-top:5px;padding-top:5px;
  border-top:1px solid rgba(31,42,68,.25)}
.sidebar .tier.feature ul.inside{border-top-color:rgba(245,195,107,.45)}
.sidebar ul.inside li,.insidedrop ul.inside li{font-size:11.5px;
  line-height:1.36;margin-bottom:3px}
/* The rail's version opens on a tap. See rail() for why: printed open,
   three lines cost 147px a card and put the Jatakam at 286px, which is
   the crowding this rail exists to avoid. */
/* It has to LOOK like a control. At 11px with a 9px chevron and two
   pixels of padding it read as a caption, and the owner said so: nobody
   would think to click it. It is now a full-width row with a real tap
   target, a chevron big enough to see, and a ground that answers the
   pointer. */
.insidedrop{margin-top:6px;border-top:1px solid rgba(31,42,68,.14)}
.insidedrop>summary{font-family:var(--ui);font-size:11.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--mg-deep);
  cursor:pointer;list-style:none;padding:9px 6px;min-height:36px;
  display:flex;align-items:center;justify-content:space-between;gap:7px;
  /* The chevron is pushed right by the general summary::after rule
     further down. Keep that, and let the label sit left against it:
     a label at one end and a marker at the other is what a person
     already recognises as something that opens. */
  border-radius:5px;transition:background .13s ease}
.insidedrop>summary::-webkit-details-marker{display:none}
.insidedrop>summary::after{content:"▾";font-size:15px;line-height:1;
  transition:transform .16s ease}
.insidedrop[open]>summary::after{transform:rotate(180deg)}
.insidedrop>summary:hover{background:rgba(201,106,6,.10)}
.insidedrop>summary:active{background:rgba(201,106,6,.17)}
.tier.feature .insidedrop{border-top-color:rgba(245,195,107,.26)}
.tier.feature .insidedrop>summary:hover{background:rgba(245,195,107,.13)}
.insidedrop>summary:focus-visible{outline:2px solid var(--marigold);
  outline-offset:2px}
.tier.feature .insidedrop>summary{color:#F5C36B}
/* the joint rows' disclosure sits under an anchor, inside the addbox */
.insidedrop.joint{margin:0;padding:0 11px 6px;
  border-bottom:1px dashed rgba(31,42,68,.3)}
.insidedrop.joint>summary{text-align:left}
.tier .skm{display:block;font-style:italic}
.ttag{position:absolute;top:-11px;left:13px;background:#C79C48;
  color:var(--ink-deep);font-family:var(--ui);font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;padding:2px 8px;
  white-space:nowrap}
.tierlede{font-family:var(--disp);font-size:19px;line-height:1.45;
  max-width:34em;margin:0 0 16px}
.tierlede b{color:var(--mg-deep)}
/* The weekly cap (JP-206). A standing fact about the practice, not a
   live count — so it is set as a quiet note, not a scarcity banner. */
.capnote{font-family:var(--ui);font-size:13.5px;line-height:1.5;
  max-width:40em;margin:0 0 18px;padding-left:12px;
  border-left:2px solid var(--gold)}
.capnote b{color:#6E3602}

.codeline{font-family:var(--ui);font-size:12.5px;border:1px dashed var(--ink);
  background:var(--cream-deep);padding:8px 11px;margin:2px 0 0}

/* add-on panel — small money, made to be seen */
.addhead{background:var(--mg-deep);color:#fff;font-family:var(--ui);font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;text-align:center;padding:6px 6px;font-weight:600}
.addrow{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:6px 11px;text-decoration:none;color:var(--ink);
  border-bottom:1px dashed rgba(31,42,68,.3)}
.addrow:hover{background:var(--cream-deep)}
.addrow b{font-family:var(--disp);font-size:16.5px;display:block;line-height:1.14;
  letter-spacing:.01em}
.addrow i{font-family:var(--ui);font-size:13px;font-weight:600;font-style:normal;
  display:block;line-height:1.3;margin-top:2px}
/* A row that has a disclosure under it keeps its own dashed rule off, so
   the row and its three lines read as one block. */
.addrow:has(+ .insidedrop){border-bottom:none}
/* One width for the whole column. Each chip used to size to its own
   text, so "$39", "$9-39" and "from $119" stacked up ragged against the
   92px Order buttons directly above them. Same width, same centre. */
.addrow .ap{font-family:var(--disp);font-size:15px;color:#fff;white-space:nowrap;
  background-color:#B35A05;
  background-image:linear-gradient(180deg,#C4650A,#8F4604);border:2px solid #6d3502;
  border-radius:3px;padding:6px 4px;line-height:1.1;
  flex:0 0 92px;width:92px;text-align:center;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
  box-shadow:0 2px 0 rgba(90,45,2,.85), inset 0 1px 0 rgba(255,226,180,.45);
  transition:transform .08s ease-out,box-shadow .08s ease-out,filter .14s}
.addrow:hover .ap{filter:brightness(1.07);transform:translateY(-1px);
  box-shadow:0 3px 0 rgba(90,45,2,.85), inset 0 1px 0 rgba(255,226,180,.6)}
.addrow:active .ap{transform:translateY(2px);box-shadow:0 0 0 rgba(90,45,2,.85)}
@media(prefers-reduced-motion:reduce){
  .sidebar .go,.addrow .ap{transition:none}
  .sidebar .go:hover,.sidebar .go:active,
  .addrow:hover .ap,.addrow:active .ap{transform:none}
}
.addpay{font-family:var(--ui);font-size:11px;text-align:center;padding:6px;
  background:var(--cream-deep)}

/* the running offer — the eye-catcher (JP-412)

   Built to hold whatever Stripe is running, because there is meant to
   be an offer on most of the time. The figure can be "50% off" or
   "Free palm reading", which is seven characters or seventeen, so its
   size is set from its own length in offer.js rather than fixed — a
   nowrap 46px headline is a broken panel the first time a wordy offer
   goes up.

   Only the sentence wraps. The eyebrow, the code, the expiry and the
   button are all single things and are held on one line; letting them
   break was what made the panel look untidy.

   Everything that moves is decoration over something that already
   works: the figure has a solid colour under the gradient, the sparkles
   are aria-hidden, and prefers-reduced-motion stops all of it. */
.offerwrap{border-bottom:none;padding-bottom:6px}
.offerpanel{position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  /* The campaign's name gets the full width of its own row. Squeezed
     into the middle column it was being truncated with an ellipsis at
     any reasonable panel width — and a cut-off campaign name is worse
     than a wrapped one. */
  grid-template-areas:"eyebrow eyebrow eyebrow"
                      "amount  words   code";
  gap:6px 20px;align-items:center;
  /* A clean night ground, and nothing else. There were two radial
     gradients over this — a rust one anchored at 12% 0% and a brass one
     at the bottom right — and the top-left one read as a smudge on the
     corner rather than as light. The sparkle belongs to the stars. */
  background:linear-gradient(180deg,#2E3C59,#161E2F);
  color:var(--cream);
  border:2px solid var(--gold);outline:1px solid var(--gold);outline-offset:3px;
  box-shadow:0 6px 22px rgba(22,30,47,.30);
  padding:20px 22px}

/* the saving. `data-len` is set by offer.js from the text itself */
.oamt{grid-area:amount;font-family:var(--disp);font-weight:400;line-height:1.02;
  letter-spacing:-.01em;text-align:center;
  color:#F5C36B;                       /* the floor, if the clip fails */
  padding-right:20px;border-right:1px dashed rgba(245,195,107,.45);
  max-width:34vw}
.oamt[data-len="short"]{font-size:clamp(34px,5vw,46px);white-space:nowrap}
.oamt[data-len="medium"]{font-size:clamp(26px,3.4vw,33px);white-space:nowrap}
.oamt[data-len="long"]{font-size:clamp(19px,2.4vw,24px);
  white-space:normal;text-wrap:balance;max-width:8.5em}
.oamt span{
  background:linear-gradient(100deg,#F5C36B 0%,#FFF0C9 26%,#E9A23B 48%,
                                     #F5C36B 72%,#FFF0C9 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:oshimmer 7s linear infinite}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .oamt span{-webkit-text-fill-color:#F5C36B;color:#F5C36B}
}
@keyframes oshimmer{to{background-position:280% 0}}

.oeyebrow{grid-area:eyebrow;font-family:var(--ui);font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding-bottom:2px;border-bottom:1px solid rgba(245,195,107,.28)}
.oeyebrow span{color:#FFE6AE}
.oleft{grid-area:words;min-width:0}
.oblurb{font-size:15.5px;line-height:1.45;margin-top:5px;text-wrap:pretty}
.oright{grid-area:code;text-align:center;border-left:1px dashed rgba(245,195,107,.5);
  padding-left:20px}
.olabel{font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);white-space:nowrap}
.ocode{font-family:var(--disp);font-size:clamp(18px,2.2vw,25px);letter-spacing:.16em;
  color:#161E2F;white-space:nowrap;
  background:linear-gradient(180deg,#FFE6AE,#F5C36B);
  border:1px solid var(--gold);padding:6px 16px;margin:5px 0;
  box-shadow:0 2px 0 rgba(0,0,0,.28)}
/* White on --marigold measures 3.79:1 and fails. The primary button
   beside it already uses the darker #B35A05, which measures 4.79:1,
   so this is the same ink at a legible weight rather than a new one. */
.obtn{background:#B35A05;border-color:#7d3e02;color:#fff;
  padding:10px 18px;font-size:14.5px;box-shadow:0 3px 0 #7d3e02;
  white-space:nowrap}

/* sparkle — small, few, and off the reading line */
.osparkle{position:absolute;color:#FFE6AE;opacity:.65;pointer-events:none;
  font-size:13px;animation:otwinkle 4.5s ease-in-out infinite}
.osparkle.s1{top:10px;left:29%;font-size:11px;animation-delay:.4s}
.osparkle.s2{bottom:13px;left:18%;font-size:15px;animation-delay:1.9s}
.osparkle.s3{top:18px;right:25%;font-size:12px;animation-delay:3.1s}
.osparkle.s4{top:44%;left:7px;font-size:10px;animation-delay:2.4s}
.osparkle.s5{bottom:26px;right:9%;font-size:13px;animation-delay:.9s}
.osparkle.s6{top:8px;right:7%;font-size:9px;animation-delay:3.8s}
.osparkle.s7{bottom:9px;left:47%;font-size:10px;animation-delay:1.4s}
.osparkle.s8{top:52%;right:6px;font-size:11px;animation-delay:2.9s}
.osparkle.s9{top:30px;left:9%;font-size:13px;animation-delay:4.4s}
@keyframes otwinkle{
  0%,100%{opacity:.18;transform:scale(.8)}
  50%{opacity:.9;transform:scale(1.15)}
}
@media(prefers-reduced-motion:reduce){
  .oamt span,.osparkle{animation:none}
  .osparkle{opacity:.5}
}

@media(max-width:760px){
  .offerpanel{grid-template-columns:1fr;text-align:center;padding:16px 14px;gap:11px;
    grid-template-areas:"eyebrow" "amount" "words" "code"}
  .oamt{border-right:none;border-bottom:1px dashed rgba(245,195,107,.45);
    padding:0 0 10px;max-width:none}
  .oamt[data-len="long"]{max-width:none}
  .oeyebrow{white-space:normal}
  .oright{border-left:none;border-top:1px dashed rgba(245,195,107,.5);
    padding:13px 0 0}
  .ocode{display:inline-block}
  .osparkle.s1{left:8%}.osparkle.s3{right:8%}
}

/* add-ons */
.addons{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.addon{border:2px solid var(--ink);background:var(--card);padding:14px 13px;text-align:center;
  box-shadow:0 2px 5px rgba(31,42,68,.10)}
.addon .ai{width:34px;height:34px;color:var(--mg-deep)}
.addon b{font-family:var(--disp);font-size:16.5px;display:block;margin-top:4px}
.addon .skm{display:block;margin:2px 0 4px}
.addon p{font-size:13.5px;margin:0;line-height:1.45}
.addon .aprice{font-family:var(--disp);font-size:21px;color:var(--mg-deep);margin-top:8px;
  border-top:1px solid var(--ink);padding-top:6px}
@media(max-width:640px){.addons{grid-template-columns:1fr}}

/* disclaimer — the counsel note */
.disc{border-bottom:none}
.discbox{border:1.5px solid var(--ink);border-left:5px solid var(--marigold);
  background:var(--card);padding:14px 16px}
.discbox p{font-size:13.5px;line-height:1.55;margin:0}
.discbox .dfine{font-family:var(--ui);font-size:12px;margin-top:8px;
  border-top:1px solid var(--cream-deep);padding-top:7px}

/* library */
.lib li{margin-bottom:7px;font-size:15px}
.lib a{color:var(--mg-deep)}
.lib .yr{font-family:var(--ui);font-size:11.5px;color:var(--ink)}

/* faq — one rule per group, a hairline between the questions inside it.
   Before, a group boundary stacked three: the last answer's bottom
   border, the section's, and the next section's first border. */
details{border-top:1px solid rgba(31,42,68,.16)}
details:first-of-type{border-top:none}
summary{font-family:var(--disp);font-size:16.5px;padding:13px 2px;cursor:pointer;
  list-style:none;display:flex;gap:14px;align-items:baseline}
summary::after{content:"+";margin-left:auto;color:var(--mg-deep);
  font-family:var(--ui);font-size:17px;line-height:1;flex:0 0 auto}
details[open] summary{color:var(--mg-deep)}
details[open] summary::after{content:"–"}
details p{font-size:15px;line-height:1.6;padding:0 28px 15px 2px;margin:0}
.qgroup{padding:22px 0 10px}
.qgroup .kick{margin-bottom:10px}
/* the counsel note, when it opens a page rather than closing it */
.disctop{border-bottom:1px solid var(--ink);padding:18px 0 20px}

/* sticky bottom bar (mobile) */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:8px;
      padding:9px 10px calc(9px + env(safe-area-inset-bottom));
      background:var(--ink-deep);border-top:2px solid var(--gold)}
.dock a{flex:1;text-align:center;font-family:var(--ui);font-size:14.5px;
        padding:12px 6px;border-radius:3px;text-decoration:none;
        display:flex;flex-direction:column;align-items:center;justify-content:center;
        line-height:1.25}
/* Two deliberate lines rather than a wrap. The label was one string with
   an em-dash in the middle and the browser broke it wherever it ran out
   of room, which at 320px was after "reading —". */
.dock .dl1{display:block}
.dock .dl2{display:block;font-weight:700}
.dock .d1{background:var(--card);color:var(--ink);font-weight:600}
.dock .d2{background:var(--mg-deep);color:#fff;font-weight:600}
.pay{font-family:var(--ui);font-size:11px;color:var(--cream);
     position:fixed;right:12px;bottom:calc(var(--dock-h,76px) - 12px);
     background:var(--ink);border:1px solid var(--gold);padding:3px 8px;border-radius:10px;z-index:39}

footer{background:var(--ink-deep);color:var(--cream);padding:22px 14px 20px;
       font-family:var(--ui);font-size:13px;margin-top:20px}
footer .verse{font-family:var(--skt);margin-top:8px}

/* desktop: sidebar layout */
@media(min-width:900px){
  body{padding-bottom:0}
  .dock,.pay{display:none}
  .main2{display:grid;grid-template-columns:300px 1fr;gap:30px;align-items:start}
  .hero{padding-top:26px}
  .sidebar{position:sticky;top:14px;order:-1;margin-top:22px;align-self:start}
  .sidebar .shead{font-family:var(--ui);font-size:11px;letter-spacing:.2em;
    text-transform:uppercase;background:var(--ink);color:var(--cream);
    padding:7px 10px;border:1.5px solid var(--ink);text-align:center}
  .sidebar{display:grid;grid-auto-rows:auto;max-height:calc(100vh - 26px);
    overflow-y:auto;scrollbar-width:thin}
  /* align-items:stretch undoes the base .tier rule's `center`, which
     survived the switch to a column flex and was centring the footer
     instead of letting it fill the card. The Order button therefore
     stopped 61px short of the card's right edge while the price chips
     below reached it, and the column stepped in and out. */
  .sidebar .tier{margin-bottom:0;border-top:none;padding:8px 11px 7px;
    display:flex;flex-direction:column;align-items:stretch;gap:5px;
    box-shadow:none;min-height:94px}
  .sidebar .thead{flex:1;text-align:center}
  .sidebar .tier b{font-size:16.5px;display:block;line-height:1.14}
  .sidebar .skm{display:block;margin-top:1px}
  .sidebar .meta{margin-top:4px}
  .sidebar .tfoot{display:flex;align-items:flex-end;justify-content:space-between;
    gap:8px;border-top:1px solid rgba(31,42,68,.25);padding-top:7px}
  .sidebar .tier.feature .tfoot{border-top-color:rgba(245,195,107,.45)}
  .sidebar .price{font-size:21px;line-height:1;text-align:left}
  /* Same move as the homepage card, scaled to the rail: 30px against the
     21px of $29/$49/$99/$169. --ink-deep on --card, 15.30:1. The rail
     card grows 9px and stays around 160px, so nothing is pushed out and
     the contents disclosure under it is untouched. */
  .sidebar .tier.free .price{font-size:30px}
  /* The rail's order buttons get the same ledge as the page CTAs: a
     gradient, a hairline of light on the top edge, and travel under the
     finger. These are the ones actually clicked most — they sit beside
     every reading on every page. */
  .sidebar .go{font-family:var(--ui);font-size:13.5px;font-weight:700;
    letter-spacing:.04em;color:#fff;border-radius:3px;padding:10px 0;
    border:2px solid #6d3502;
    background-color:#B35A05;
    background-image:linear-gradient(180deg,#C4650A 0%,#B35A05 52%,#8F4604 100%);
    text-decoration:none;white-space:nowrap;line-height:1;
    width:92px;text-align:center;flex:0 0 92px;
    text-shadow:0 1px 0 rgba(0,0,0,.3);
    box-shadow:0 3px 0 rgba(90,45,2,.9), inset 0 1px 0 rgba(255,226,180,.5);
    transition:transform .08s ease-out,box-shadow .08s ease-out,filter .14s}
  .sidebar .go:hover{filter:brightness(1.07);transform:translateY(-1px);
    box-shadow:0 4px 0 rgba(90,45,2,.9), inset 0 1px 0 rgba(255,226,180,.65)}
  .sidebar .go:active{transform:translateY(3px);
    box-shadow:0 0 0 rgba(90,45,2,.9), inset 0 1px 0 rgba(255,226,180,.3)}
  .sidebar .go:focus-visible{outline:3px solid #7d3e02;outline-offset:2px}
  .sidebar .tier.feature .go{border-color:#7d5610;color:var(--ink-deep);
    text-shadow:0 1px 0 rgba(255,255,255,.35);
    background:linear-gradient(180deg,#FFE6AE 0%,#F5C36B 52%,#DCA23F 100%);
    box-shadow:0 3px 0 rgba(150,105,20,.9), inset 0 1px 0 rgba(255,255,255,.6)}
  .sidebar .tier.feature .go:hover{
    box-shadow:0 4px 0 rgba(150,105,20,.9), inset 0 1px 0 rgba(255,255,255,.75)}
  .sidebar .tier.feature .go:active{
    box-shadow:0 0 0 rgba(150,105,20,.9), inset 0 1px 0 rgba(255,255,255,.4)}
  .sidebar .tier.feature .price{color:#F5C36B}
  .sidebar .addbox{border:2px solid var(--ink);border-top:none;background:var(--card)}
  .strip{display:none}
  .mast{padding:12px 24px}
}


/* ================================================================
   Forms, controls and notices — the working end of the site.
   ================================================================ */

[hidden]{display:none !important}

form.intake{max-width:760px}
/* A field the message named. The border carries it as well as the
   announcement, because a list of five missing fields at the bottom of
   a long form is not the same as being shown which five. */
[aria-invalid="true"]{border-color:var(--mg-deep)!important;
  box-shadow:inset 0 0 0 1px var(--mg-deep)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.frow{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.frow.full{grid-column:1/-1}
label{font-family:var(--ui);font-size:13px;letter-spacing:.03em;font-weight:500}
label .opt{font-weight:400}
input[type=text],input[type=email],input[type=date],input[type=time],
input[type=tel],select,textarea{
  font-family:var(--ui);font-size:16px;color:var(--ink);background:#fff;
  border:1.5px solid var(--ink);border-radius:2px;padding:12px;width:100%}
textarea{min-height:84px;resize:vertical;font-size:15.5px}
input:focus,select:focus,textarea:focus,summary:focus-visible,
a:focus-visible,button:focus-visible{outline:2px solid var(--marigold);outline-offset:1px}
/* The box sits on the first line of its own label, and the wrapped lines
   hang under the text rather than under the box. `.frow.check` carries
   flex-wrap so the palm slots can take a full row below; without a
   min-width of 0 the long label counts as unshrinkable and takes that
   new row for itself, which put every box on a line of its own. */
.check{flex-direction:row;align-items:flex-start;gap:12px;
  font-family:var(--ui);font-size:14px;margin-bottom:14px}
.check input{width:21px;height:21px;margin-top:1px;flex:0 0 21px;
  accent-color:var(--mg-deep);cursor:pointer}
/* basis 0, not auto: with `auto` the label asks for its whole text width,
   which exceeds the line and — because the row must wrap for the palm
   slots — sent every label to a line of its own below its box. */
.check > label{flex:1 1 0;min-width:0;font-weight:400;font-size:14.5px;
  line-height:1.55;cursor:pointer}
.check > label b{font-size:15px}
/* the discount code — small money, so it has to look like it is there */
.offerrow{border-top:1px dashed var(--ink);margin-top:6px;padding-top:14px}
.offerrow label{font-family:var(--ui);font-size:13.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mg-deep)}
#offer_code{font-family:var(--ui);font-size:18px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;border:2px solid var(--mg-deep);
  background:#fff;padding:13px 14px}
#offer_code::placeholder{font-weight:500;letter-spacing:.08em;
  text-transform:none;color:rgba(31,42,68,.45)}

fieldset{border:1.5px solid var(--ink);padding:14px 15px 4px;margin:0 0 16px;background:var(--card)}
/* 2026-09-21, his call: every form heading on the site is bold, 17px,
   deep marigold (was 16px ink; .strong and .placegroup got it first). */
legend{font-family:var(--disp);font-size:17px;font-weight:700;
  color:var(--mg-deep);letter-spacing:.01em;padding:0 7px}
button.btn{cursor:pointer;font-weight:600;width:auto}
.btn.wide{display:block;width:100%;text-align:center;margin-top:4px}
.formnote{font-family:var(--ui);font-size:12.5px;border-left:3px solid var(--marigold);
  padding:8px 0 8px 12px;margin:14px 0}
.qblock{border-top:1px dashed var(--ink);padding-top:12px;margin-top:12px}
.formcard .fine{margin-top:10px}

/* the Darshanam card on the home page */
.formcard{border:2px solid var(--ink);outline:1px solid var(--gold);outline-offset:3px;
  background:var(--card);padding:15px}

/* tier picker */
/* Three across, not four. Six readings sit here and each now carries
   three lines of contents; in a 174px column those wrapped to a 383px
   tower, and 4 + 2 left a ragged second row. Three gives two even rows
   of three and a column wide enough that a line wraps once, not twice. */
.tierpick{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:20px}
.tierpick label{border:2px solid var(--ink);background:var(--card);padding:12px 11px;
  cursor:pointer;display:block;font-weight:400;text-align:center}
.tierpick input{position:absolute;opacity:0}
.tierpick label:has(input:checked){background:var(--ink);color:var(--cream)}
.tierpick label:has(input:focus-visible){outline:2px solid var(--marigold);outline-offset:2px}
.tierpick .tname{font-family:var(--disp);font-size:16px;display:block}
.tierpick .tprice{font-family:var(--disp);font-size:22px;display:block;margin:3px 0;
  color:var(--mg-deep)}
.tierpick label:has(input:checked) .tprice{color:#F5C36B}
.tierpick .tmeta{font-size:11.5px;display:block;line-height:1.35}
/* The radio is where the choice is actually made, so it gets the three
   contents lines too. The label centres its name and price; the lines
   are left-aligned under them, because a centred wrapped sentence is
   not readable. */
.tierpick ul.inside{margin-top:7px;padding-top:6px;
  border-top:1px solid rgba(31,42,68,.3)}
.tierpick label:has(input:checked) ul.inside{
  border-top-color:rgba(245,195,107,.45)}
.tierpick ul.inside li{font-size:11.5px;line-height:1.36;margin-bottom:4px}
.tierpick label:has(input:checked) ul.inside li{color:var(--cream)}
.tierpick label:has(input:checked) ul.inside li::before{color:#F5C36B}

/* notices */
.notice{border:1.5px solid var(--ink);background:var(--cream-deep);padding:12px 14px;
  font-family:var(--ui);font-size:14px;margin-top:12px}
.notice.good{border-left:5px solid var(--good)}
.notice.warn{border-left:5px solid var(--warn)}
/* the Disha offer under the free confirmation (order.js showNextStep) */
/* The optional question on the free form (6 Oct 2026). */
.focusrow .fine{margin-top:6px}
.focusrow input{width:100%;max-width:100%;box-sizing:border-box}
.nextstep{border:1.5px solid var(--ink);background:var(--card);padding:12px 14px;
  margin-top:10px;font-family:var(--ui);font-size:14px;color:var(--ink)}
.nextstep p{margin:0 0 10px;line-height:1.45}
.nextstep .btn{display:inline-block;max-width:100%;text-align:center;text-decoration:none}
#order-out pre{overflow-x:auto;border:1px solid var(--ink);background:var(--card);
  padding:12px;font-size:12.5px;margin-top:10px}

/* birthplace autocomplete */
.placelist{position:absolute;z-index:20;left:0;right:0;top:100%;background:var(--card);
  border:1.5px solid var(--ink);border-top:none;font-family:var(--ui);font-size:15px;
  box-shadow:0 6px 14px rgba(31,42,68,.2)}
.placeopt{padding:11px 12px;cursor:pointer}
.placeopt:hover,.placeopt.active{background:var(--ink);color:var(--cream)}
.placestatus{font-family:var(--ui);font-size:12.5px;margin-top:5px;
  border-left:3px solid var(--good);padding-left:9px;color:var(--ink)}
/* Something about the place needs the client: the town was not found,
   or not yet picked. Same ink as the rest of the form — only the rule
   changes colour. */
.placestatus.warnish{border-left-color:var(--mg-deep);line-height:1.5}
/* "Did you mean Punjab, India?" — one button per correction, full ink,
   under the line that says the town was not found. */
.placesuggest{display:flex;flex-direction:column;align-items:flex-start;
  gap:6px;margin-top:6px}
.placefix{font-family:var(--ui);font-size:14px;line-height:1.3;color:var(--ink);
  background:var(--card);border:1.5px solid var(--ink);padding:9px 12px;
  min-height:40px;max-width:100%;text-align:left;cursor:pointer}
.placefix:hover,.placefix:focus-visible{background:var(--ink);color:var(--cream)}
.tdform .placesuggest{display:none}
.regionin{width:100%}
/* The birthplace group (JP-443). The form's heading style is a fieldset
   with a legend, so this is that one size down — inside "Your birth" on
   the order form it would be a box within a box, and the transparent
   ground and tighter padding keep it reading as a sub-heading. */
.placegroup{grid-column:1/-1;background:transparent;padding:11px 13px 1px;
  margin:2px 0 12px}
/* 2026-09-21, his call: the two group headings ("When you were born",
   "Where you were born") are what tell a first-time visitor these boxes
   are about their birth, not their delivery. Bold, a size up, in the
   deep marigold (6.2:1 on the card ground). */
/* 2026-09-21: the other form headings (You, Your birth date and time,
   Your questions, Add-ons) match them. */
.placegroup > legend,legend.strong{font-size:17px;font-weight:700;color:var(--mg-deep);
  letter-spacing:.01em}
/* The line above the submit button: what the chart will be cast from, in
   words. Ink, never grey — a client reads this to check a birth minute. */
.castline{font-family:var(--ui);font-size:13.5px;line-height:1.5;
  color:var(--ink);border-left:3px solid var(--good);padding-left:10px;
  margin:2px 0 12px}
.castline.warnish{border-left-color:var(--mg-deep)}
.castline:empty{display:none}

/* palm photo check */
.palmcheckui{margin:10px 0 4px 29px}
.pchint{font-family:var(--ui);font-size:13px;margin-bottom:9px}
.pcbtn{position:relative;display:inline-block;cursor:pointer}
.pccard{font-family:var(--ui);font-size:13px;border:1.5px solid var(--ink);
  background:var(--card);padding:10px 13px;margin-top:9px}
.pccard.good{border-left:5px solid var(--good)}
.pccard.warnish{border-left:5px solid var(--mg-deep)}
.pccard.bad{border-left:5px solid var(--warn)}
.pccard ul{margin:5px 0 3px;padding-left:19px}
.pccard .pcnum{display:block;margin-top:5px;font-size:11.5px}
.pcguide{margin-top:11px;font-family:var(--ui);font-size:13px}
.pcguide summary{cursor:pointer;font-weight:500;font-family:var(--ui);font-size:13px;padding:6px 0}
.pcguide ol{margin:7px 0 3px;padding-left:19px}
.pcguide li{margin-bottom:4px}

/* footer */
footer .fword{font-family:var(--disp);letter-spacing:.12em}
footer .fnote{margin-top:8px;max-width:64ch}
footer a{color:#F5C36B}
/* The site nav of last resort. Laid out with flex and gap so the
   separators wrap cleanly instead of stranding a lone dot on its own
   line, and every link is 44px tall so it is a real target on a phone —
   the old footer links measured 25.8px. */
footer .fnav{margin-top:14px;padding-top:12px;border-top:1px solid rgba(245,195,107,.35);
  display:flex;flex-wrap:wrap;gap:2px 10px;align-items:center;justify-content:center;
  font-family:var(--ui);font-size:14px;line-height:1.2}
footer .fnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
  text-decoration-thickness:1.5px}
footer .fnav a:hover{background:var(--cream);color:var(--ink-deep)}

/* small screens */
@media(max-width:640px){
  .tierpick{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr}
  .formcard{padding:13px}
}


/* masthead is a link home — it must not look like body copy link */
.mast .brand{display:flex;align-items:center;gap:10px;text-decoration:none;
  color:var(--ink)}
.mast .brand:hover .word{color:var(--mg-deep)}
.mast .menu{margin-left:auto;text-decoration:none;color:var(--ink);
  font-family:var(--ui);font-size:22px;line-height:1}
.strip a,.menubar a,.dock a,.addrow,.tier .go{text-decoration:none}

/* data tables on the content pages */
.tbl{overflow-x:auto;border:1.5px solid var(--ink);background:var(--card)}
table.dtable{border-collapse:collapse;width:100%;min-width:520px;
  font-family:var(--serif);font-size:14.5px}
.dtable th{background:var(--ink);color:var(--cream);font-family:var(--ui);
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  text-align:left;padding:9px 11px;font-weight:500}
.dtable td{border-top:1px solid rgba(31,42,68,.28);padding:9px 11px;vertical-align:top}
.dtable td.n{font-family:var(--disp);font-size:17px;color:var(--mg-deep);text-align:center}
.dtable tr:nth-child(even) td{background:rgba(31,42,68,.035)}
.dtable .yr{font-family:var(--ui);font-size:11px}

/* the counsel note reads as a colophon — centred */
.discbox{text-align:center}
.discbox p{max-width:62ch;margin-left:auto;margin-right:auto}
.disc .kick{justify-content:center}
.disc .kick::after{display:none}

/* honeypot — off-screen for people, present for scripts */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}


/* touch: every menu item a comfortable target, and the footer links legible */
@media (max-width: 900px) {
  .menubar a{padding:12px 12px;min-height:44px;display:flex;align-items:center}
  footer .fnote a{display:inline-block;padding:3px 0}
  .addrow{padding:11px}
}


/* the footer bar reads as a colophon: centred, measured */
footer{text-align:center}
footer .fnote{margin-left:auto;margin-right:auto}
footer .verse{text-align:center}

/* palm photographs — named boxes, so handedness is never guessed, and
   one hand per column so the boxes sit where the hand does */
.hands{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 12px;
  min-width:0}
.hand{display:flex;flex-direction:column;gap:8px;min-width:0}
.handhead{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:var(--ink);
  padding:7px 10px;text-align:center}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 10px}
.slot{position:relative;border:1.5px solid var(--ink);background:var(--card);padding:10px 11px;
  cursor:pointer;display:block;font-weight:400;min-width:0}
.slot .sname{font-family:var(--disp);font-size:14.5px;display:block}
.slot .shint{font-family:var(--ui);font-size:11px;display:block;margin:2px 0 6px}
.slot .sthumb{display:block;width:100%;height:112px;object-fit:cover;
  border:1px solid var(--ink);margin:0 0 7px;background:var(--cream-deep)}
.slot .sstate{font-family:var(--ui);font-size:11.5px;display:block;
  border-top:1px dashed rgba(31,42,68,.35);padding-top:6px;color:var(--mg-deep)}
.slot.good{border-left:5px solid var(--good)}
.slot.warnish{border-left:5px solid var(--mg-deep)}
.slot.bad{border-left:5px solid var(--warn)}
.slot.checking{opacity:.75}
/* The file input itself: off-screen but still focusable, so the six
   boxes are reachable by keyboard. `hidden` here put them out of the
   tab order and made the whole page mouse-only. */
.slot .svisually{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.slot:focus-within{outline:3px solid var(--mg-deep);outline-offset:2px}
@media(max-width:640px){
  .hands{grid-template-columns:1fr;gap:18px}
  .slots{grid-template-columns:1fr}
}

/* terms at the point of payment — plain, framed, unmissable */
.terms{border:2px solid var(--ink);background:var(--cream-deep);padding:13px 15px;
  margin:16px 0 12px;font-family:var(--ui);font-size:13px;line-height:1.55}
.terms b{font-family:var(--disp);font-size:15px}
.terms ul{margin:8px 0 0;padding-left:19px}
.terms li{margin-bottom:6px}

/* the palm slots are appended into the checkbox row, which is a flex line:
   without this they become a narrow third column beside the label */
.frow.check{flex-wrap:wrap}
/* The slots take a full row of their own beneath the checkbox. A basis of
   100% PLUS the indent is 33px wider than the line, which pushed the
   boxes out through the right edge of the fieldset — take the indent out
   of the basis instead. */
.palmcheckui{flex:1 0 calc(100% - 33px);min-width:0;margin-left:33px}
@media(max-width:640px){.palmcheckui{flex-basis:100%;margin-left:0}}

/* The review form (JP-423): a rating and a did-it-land answer, both as
   button-like radios so a phone can answer with a thumb. */
.stars,.landed{display:flex;gap:7px;flex-wrap:wrap;margin-top:5px}
.stars label,.landed label{position:relative}
.stars input,.landed input{position:absolute;opacity:0;inset:0;cursor:pointer}
.landed span{display:block;border:2px solid var(--ink);
  background:var(--card);font-family:var(--ui);font-size:14px;font-weight:600;
  padding:9px 17px;cursor:pointer;line-height:1}
.landed input:checked+span{background:var(--ink);color:var(--cream)}
.landed input:focus-visible+span{outline:2px solid var(--mg-deep);outline-offset:2px}
/* The rating is a row of five stars (1 Oct 2026). A tap on the third
   fills the first three, the way every rating looks everywhere else;
   review.js marks the filled ones with .on. Unfilled stars are outlines
   in ink, so the empty ones are still plainly there to tap. */
.stars{gap:2px;align-items:center;flex-wrap:nowrap}
.stars label span{display:block;font-size:40px;line-height:1;padding:2px 3px;
  cursor:pointer;color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.stars label.on span{color:var(--marigold);-webkit-text-stroke-color:var(--mg-deep)}
.stars input:focus-visible+span{outline:2px solid var(--mg-deep);outline-offset:2px}
.starsay{font-family:var(--ui);font-size:15px;font-weight:600;color:var(--ink);
  margin-left:8px;white-space:nowrap}

/* Published reviews. Quiet, and never more prominent than the reading
   it is about. */
.revavg{font-family:var(--ui);font-size:15px;font-weight:600;color:var(--ink);
  margin:0 0 12px}
.revgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.revcard{border:2px solid var(--ink);background:var(--card);padding:13px 15px}
.revstars{font-family:var(--ui);font-size:13px;color:var(--mg-deep);
  letter-spacing:.14em;margin-bottom:5px}
.revbody{font-family:var(--disp);font-size:15px;line-height:1.5;margin:0 0 8px}
.revwho{font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--mg-deep)}

/* Saying that a bar scrolls (JP-433).

   The menu and the readings strip both run wider than a phone, and a row
   that ends flush at the screen edge looks finished — people were taking
   the four menu items they could see for the whole menu. A fade on
   whichever side has more, and a chevron on the right while there is
   still something to reach; both go when the travel does, which is what
   makes them mean anything.

   The fade is a mask on the scroller itself rather than a gradient laid
   over it, so it stays at the screen edge instead of scrolling away with
   the content. */
.menubar,.strip,.ribbon{
  --sc-fade:22px;
  -webkit-mask-image:none;mask-image:none;
  transition:-webkit-mask-image .2s,mask-image .2s}
.menubar.sc-right,.strip.sc-right,.ribbon.sc-right{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--sc-fade)),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - var(--sc-fade)),transparent)}
.menubar.sc-left,.strip.sc-left,.ribbon.sc-left{
  -webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--sc-fade)),transparent);
          mask-image:linear-gradient(to left,#000 calc(100% - var(--sc-fade)),transparent)}
.menubar.sc-left.sc-right,.strip.sc-left.sc-right,.ribbon.sc-left.sc-right{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--sc-fade),
    #000 calc(100% - var(--sc-fade)),transparent);
          mask-image:linear-gradient(to right,transparent,#000 var(--sc-fade),
    #000 calc(100% - var(--sc-fade)),transparent)}

/* the chevron: only while there is more to the right */
.scwrap{position:relative}
.scnudge{position:absolute;top:0;right:0;bottom:0;width:34px;z-index:31;
  display:none;align-items:center;justify-content:center;cursor:pointer;
  border:0;padding:0;font-family:var(--ui);font-size:19px;line-height:1;
  color:var(--ink);background:linear-gradient(90deg,rgba(234,223,196,0),var(--cream-deep) 55%);
  animation:scbeckon 2.4s ease-in-out infinite}
.scwrap:has(.sc-right) .scnudge{display:flex}
.scwrap.stripwrap .scnudge{color:#FFE6AE;
  background:linear-gradient(90deg,rgba(22,30,47,0),var(--ink-deep) 55%)}
@keyframes scbeckon{0%,100%{transform:translateX(0)}50%{transform:translateX(-3px)}}
@media(prefers-reduced-motion:reduce){.scnudge{animation:none}}
@media(min-width:900px){.scnudge{display:none!important}}

/* The rail is stickied at the viewport height and runs taller than it —
   920px of rail in a 674px frame — so the last stretch, which is where
   the joint readings and the add-ons live, sits below its own fold.
   Same treatment as the horizontal bars, turned ninety degrees. */
.sidebar{--sc-fade:26px;
  -webkit-mask-image:none;mask-image:none;
  transition:-webkit-mask-image .2s,mask-image .2s}
.sidebar.sc-right{
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--sc-fade)),transparent);
          mask-image:linear-gradient(to bottom,#000 calc(100% - var(--sc-fade)),transparent)}
.sidebar.sc-left{
  -webkit-mask-image:linear-gradient(to top,#000 calc(100% - var(--sc-fade)),transparent);
          mask-image:linear-gradient(to top,#000 calc(100% - var(--sc-fade)),transparent)}
.sidebar.sc-left.sc-right{
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--sc-fade),
    #000 calc(100% - var(--sc-fade)),transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 var(--sc-fade),
    #000 calc(100% - var(--sc-fade)),transparent)}

/* The terms, in a box that has to be reached the end of (JP-435).

   Tall enough to read in, short enough that scrolling is obviously the
   thing to do. The inner shadow at the foot says there is more below
   without needing a line of instructions; it lifts once the end has
   been reached, which is also the moment the checkbox unlocks. */
/* Tall as the viewport sensibly allows. At a fixed 230px the panel was
   4483px of terms in a 228px window on a phone — 19.7 screenfuls of
   mandatory scrolling before the consent box would even unlock, in a
   700px viewport that could have shown three times as much at a time.
   The floor keeps it usable on a short landscape window; the cap stops
   it swallowing a tall desktop page. */
.termsbox{max-height:clamp(230px,52vh,460px);overflow-y:auto;overscroll-behavior:contain;
  border:1.5px solid var(--ink);background:var(--card);
  padding:12px 15px;margin-bottom:10px;
  font-size:13.5px;line-height:1.5;
  box-shadow:inset 0 -18px 18px -18px rgba(31,42,68,.55);
  transition:box-shadow .25s,border-color .2s}
.termsbox:focus-visible{outline:3px solid var(--mg-deep);outline-offset:2px}
.termsbox.read{box-shadow:none;border-color:var(--good)}
.termsbox.wants{border-color:var(--mg-deep);
  box-shadow:0 0 0 3px rgba(156,78,3,.28),
             inset 0 -18px 18px -18px rgba(31,42,68,.55)}
.termsbox p{margin:0 0 7px}
.termsbox .tend{margin-top:14px;padding-top:9px;
  border-top:1px solid var(--gold);font-family:var(--ui);font-size:13px}
.termsrow input:disabled + label{opacity:.62}
.termsrow input:disabled{cursor:not-allowed}
#agreehint{display:block;margin-top:2px}

/* the same clauses as a page */
/* Set smaller than the body copy. It is a contract, read once and
   referred back to, not prose to be read through — and at the body's
   17.5px it ran to an essay. The colour is untouched: still the full
   ink on cream at 15.3:1, because small is not the same as faint. */
/* No measure cap: the paragraphs use the column they are in.
   A 66ch cap was left over from when this text was the body's 17.5px.
   Dropping the font to 15px shrank the ch unit with it, so the cap
   tightened exactly as the type got smaller — 509px of text in a 651px
   column, with 142px of dead gutter down the right of every line. The
   column is already bounded (.wrap caps at 1080px and the rail takes a
   fixed slice), so it cannot run away on a wide screen. */
.termspage p{margin:0 0 10px;font-size:15px;line-height:1.5}

/* The featured card is dark, so the marigold used for these labels on a
   cream card becomes brown on navy. Its own pale tone instead — full
   strength, no opacity. */
.tier.feature .facts dt{color:#E7C88A}
.tier.feature .brief{color:#E7C88A}
.tier.feature .who{color:var(--cream)}
.tier.feature .facts dd{color:#fff}

/* In the rail the cards touch, so a badge that straddles the border
   would sit on the card above. It tucks inside instead. */
.sidebar .tier.feature{margin-top:0}
.sidebar .ttag{top:0;left:0;right:0;width:100%;text-align:center;
  padding:3px 8px}

/* Touch targets on the order form (JP-436).

   Measured at 320px on the live site: the tier cards and the add-on
   rows give big targets, but three did not. "Me" and "Someone else"
   were 43x17 and 111x17, and the approximate-time checkbox 220x22 —
   all under the 24px WCAG 2.2 asks for, and well under what a thumb
   wants. This audience skews 30-65 and mostly arrives on a phone.

   The controls themselves were 13x13, the browser default, which is
   small to see as well as to hit. Scaled up, and the labels padded so
   the whole row is the target rather than the box alone. */
/* Only the short radio labels become inline-flex. Doing it to the
   checkbox labels too made their (long) text a flex item that would not
   shrink, and pushed the order form 29px wider than a 320px phone —
   caught by re-measuring after the change rather than by assuming it
   was an improvement. Those stay in normal flow and get their height
   from padding. */
.radiorow .rr{display:inline-flex;align-items:center;gap:8px;
  min-height:28px;padding:4px 2px;cursor:pointer}
.frow.check > label{flex:1 1 0;min-width:0;padding:4px 0;
  min-height:26px;cursor:pointer}
.radiorow{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.frow.check input[type="checkbox"],
.frow.check input[type="radio"],
.radiorow input[type="radio"]{width:19px;height:19px;
  accent-color:var(--mg-deep);flex:0 0 auto;cursor:pointer;margin:0}
.frow.check input[type="checkbox"]{margin-top:3px}

/* The facts table needs a measure of its own (JP-436).

   On the home page the text column is ~629px wide, and
   justify-content:space-between threw "Reads ahead" and "6 months" to
   opposite ends of it — a quarter of a metre apart, which is not a
   table anyone can read across. It also drove every value hard against
   the price column, which sat 4px away: the two read as colliding, and
   they did.

   A column gap you can see, and a width the eye can cross. Found by
   looking at the page — the overflow and alignment checks both passed,
   because nothing overflowed and nothing was misaligned. They were
   simply too close together, and no measurement I had was asking that. */
#readings .tier .facts{max-width:330px}
#readings .tier .who{max-width:52ch}

/* Phone reading size, last in the file so it wins on order rather than
   on !important. A line of 45 characters at 16px is the comfortable
   setting on a 375px screen; 15.5px was a touch tight. */
@media(max-width:520px){
  .heroread p,.tierread p{font-size:16px;line-height:1.58}
}

/* Weekly horoscope (/horoscope and /horoscope/<monday>). Ink throughout;
   the one colour is --good on a planet that is favourable, which is a
   verdict and the only thing here that gets one. */
.hsjump{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.hsjump a{font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--ink);
  text-decoration:none;border:1px solid var(--ink);background:var(--card);
  padding:6px 10px;border-radius:3px}
.hsjump a:hover{background:var(--ink);color:var(--cream)}
.hsmethod{font-size:15.5px;line-height:1.6;color:var(--ink)}
.hsnak{font-family:var(--ui);font-size:13.5px;color:var(--ink);margin:0 0 10px}
.hslabels{list-style:none;padding:0;margin:0 0 10px;display:flex;flex-wrap:wrap;gap:6px}
.hslabels li{font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--ink-deep);
  border:1.5px solid var(--marigold);background:var(--card);padding:4px 9px;border-radius:3px}
.hsrules{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:4px 14px;
  font-family:var(--ui);font-size:13.5px;color:var(--ink)}
.hsrules li.fav{color:var(--good);font-weight:600}
.hsdays{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ink);
  border:1.5px solid var(--ink);margin:0 0 12px}
.hsdays div{background:var(--card);padding:8px 10px}
.hsdays dt{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mg-deep)}
.hsdays dd{margin:3px 0 0;font-size:15.5px;color:var(--ink)}
@media(max-width:480px){.hsdays{grid-template-columns:1fr}}
.hsprose{font-size:17px;line-height:1.6;color:var(--ink)}
.hscta{font-size:15.5px;line-height:1.6;color:var(--ink);margin-top:6px}
.hsarchive{margin:0;padding-left:20px}
.hsarchive li{margin:4px 0}

/* Find your rasi, on the horoscope pages (rasi.js). Ink throughout; the
   marigold rule marks the reader's own section, and a refusal takes the
   same deep-marigold rule the birthplace notes use. */
.rasifind{margin-top:14px}
.rasifind h2{margin:0 0 4px}
.rasifind .formwhy{margin:0 0 10px}
/* when the paragraph follows the form box (home, /free), give it air */
form + .formwhy{margin-top:24px}
.rasifind .placegroup{margin-bottom:6px}
.rasiout{margin-top:10px}
.rasiout.warnish{border-left:5px solid var(--mg-deep)}
.rasiout p{margin:0;color:var(--ink);line-height:1.5}
.hsrasi.hsmine{border-left:5px solid var(--marigold);padding-left:12px;
  background:var(--card)}
.rasimine{border:1.5px solid var(--ink);background:var(--cream);padding:12px 14px;
  margin:4px 0 12px;font-family:var(--ui);font-size:15px;color:var(--ink)}
.rasimine:focus{outline:2px solid var(--marigold);outline-offset:2px}
.rasimine p{margin:0 0 10px;line-height:1.5;color:var(--ink)}
.rasimine .rasicusp{border-left:3px solid var(--mg-deep);padding-left:10px}
.rasimine .btn{display:block;text-align:center;white-space:normal;max-width:100%}
.hsjump a.mine{background:var(--ink);color:var(--cream)}

/* The instant birth chart (chart.js, JP-410), on the home page and at the
   top of /free. Ink throughout; the deep-marigold rule marks a note that
   the birth time decides something, as the birthplace notes do, and the
   marigold corner marks the lagna as it does in the reading PDFs. */
.chartfind{margin-top:0}
.chartfind h2{margin:0 0 4px}
.chartfind .formwhy{margin:0 0 10px}
.chartfind .placegroup{margin-bottom:6px}
.chartmsg{margin-top:10px}
.chartmsg.warnish{border-left:5px solid var(--mg-deep)}
.chartout{margin-top:16px;border:2px solid var(--ink);outline:1px solid var(--gold);
  outline-offset:3px;background:var(--card);padding:15px}
.chartout:focus{outline:2px solid var(--marigold);outline-offset:3px}
.chead{font-family:var(--disp);font-weight:400;font-size:22px;margin:0 0 2px;
  color:var(--ink-deep)}
.cwhen{font-family:var(--ui);font-size:13.5px;line-height:1.45;margin:0 0 12px;
  color:var(--ink)}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.cfacts{margin:0;border:1.5px solid var(--ink);background:var(--cream);max-width:560px}
.cfact{display:grid;grid-template-columns:104px minmax(0,1fr);
  border-bottom:1px solid var(--ink)}
.cfact:last-child{border-bottom:0}
.cfact dt{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-deep);padding:12px 10px;
  border-right:1px solid var(--ink)}
.cfact dd{margin:0;padding:8px 10px;font-family:var(--disp);font-size:21px;
  line-height:1.25;color:var(--ink-deep)}
.cfsub{font-family:var(--ui);font-size:13.5px;color:var(--ink);white-space:nowrap}
.cnote{font-family:var(--ui);font-size:13.5px;line-height:1.5;color:var(--ink);
  border-left:3px solid var(--mg-deep);padding-left:10px;margin:10px 0 0}
.chakramfig{margin:0}
svg.chakram{display:block;width:100%;max-width:360px;height:auto;background:#fff;
  border:1.5px solid var(--ink)}
.ckframe,.ckcell{fill:none;stroke:var(--ink);stroke-width:1.2}
.cklagna{fill:var(--marigold);opacity:.45}
.cksign{font-family:var(--ui);font-size:10px;fill:var(--ink)}
.ckgraha{font-family:var(--ui);font-size:13.5px;font-weight:700;fill:var(--ink-deep);
  text-anchor:middle}
.ckgraha.tight{font-size:11.5px}
.ckmid{font-family:var(--disp);font-size:24px;fill:var(--ink-deep);text-anchor:middle}
.ckwhen{font-family:var(--ui);font-size:11.5px;fill:var(--ink);text-anchor:middle}
.ckkey{font-family:var(--ui);font-size:12.5px;line-height:1.6;color:var(--ink);
  margin-top:8px}
.cnext{margin-top:16px;border-top:1.5px solid var(--ink);padding-top:12px}
.cnextline{font-size:15.5px;line-height:1.55;color:var(--ink);margin:0 0 10px}
.cnext .btn{white-space:normal}
/* On a phone the chart card keeps two boxes to a row (date and time,
   country and state), so the Darshanam form below stays one short scroll
   away on /free. Inputs sit on a common line however the labels wrap. */
@media(max-width:640px) and (min-width:340px){
  .chartfind .placegroup .fgrid{grid-template-columns:1fr 1fr;gap:0 10px}
  .chartfind .placegroup .frow{justify-content:flex-end;min-width:0}
  .chartfind .placegroup .frow:last-child:not(:nth-child(2)){grid-column:1/-1}
}
.chskip{margin:12px 0 0;text-align:center;font-size:16.5px;font-weight:700}
.chskip a{color:var(--mg-deep)}
.chartfind input::placeholder{color:var(--ink);opacity:.75}
@media(max-width:359px){.cfact{grid-template-columns:94px minmax(0,1fr)}.cfact dt{letter-spacing:.04em;padding:12px 8px}}

/* ---- the reading library (JP-440): /nakshatra/<slug>, /rashi/<slug> ---- */
.crumbs{font-family:var(--ui);font-size:13px;padding:12px 0 0;color:var(--ink);
  overflow-wrap:anywhere}
.crumbs a{color:var(--mg-deep);font-weight:600;text-decoration:underline;
  text-underline-offset:2px}
.crumbs .crsep{margin:0 4px}
.crumbs [aria-current]{font-weight:600}
.libfacts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ink);
  border:1.5px solid var(--ink);margin:0}
.libfacts>div{background:var(--card);padding:9px 11px;min-width:0}
.libfacts dt{font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mg-deep)}
.libfacts dd{margin:2px 0 0;font-size:15.5px;line-height:1.45;overflow-wrap:anywhere}
.libfacts dd a{color:var(--mg-deep);font-weight:600;text-decoration:underline;
  text-underline-offset:2px}
@media(max-width:560px){.libfacts{grid-template-columns:1fr}}
section h3{font-family:var(--disp);font-weight:400;font-size:18px;margin:14px 0 6px}
.libul{padding-left:20px;margin:10px 0 0}
.libul li{font-size:15.5px;line-height:1.55}
.padanotes{margin-top:14px}
.libpadas{min-width:420px}
.dtable a{color:var(--mg-deep);font-weight:600;text-decoration:underline;
  text-underline-offset:2px}
.libq{padding:4px 0 6px;border-top:1px solid rgba(31,42,68,.16)}
.libq:first-of-type{border-top:none}
.libq h3{font-size:17.5px;margin:12px 0 4px}
.libq p{margin:0 0 8px}
.libnext{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px 0 4px}
.libnext a{display:block;border:1.5px solid var(--ink);background:var(--card);
  padding:10px 12px;font-family:var(--disp);font-size:18px;color:var(--ink-deep);
  text-decoration:none;min-width:0;overflow-wrap:anywhere}
.libnext a:hover{background:var(--ink);color:var(--cream)}
.libnext span{display:block;font-family:var(--ui);font-size:11.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--mg-deep)}
.libnext a:hover span{color:#F5C36B}
.libnext .lnnext{text-align:right}
.libalso{font-size:15px;margin:10px 0 18px}
.libcta{border-bottom:none}
.libcta .btn{white-space:normal}
/* the rashi index cards link to each sign's page (JP-440) */
.linkparts .part b a{color:var(--mg-deep);text-decoration:underline;
  text-underline-offset:2px}
/* the chart result's quiet links on to the library (JP-440) */
.creads{font-family:var(--ui);font-size:14px;line-height:1.7;margin:14px 0 0;
  color:var(--ink)}
.creads a{color:var(--mg-deep);font-weight:600;text-decoration:underline;
  text-underline-offset:2px}
.creads .crsep{color:var(--ink)}
/* the home page's Read section (JP-440) */
.readparts{margin-top:10px}
.readparts .part p{font-size:13.5px}
.readsigns{font-family:var(--ui);font-size:14px;line-height:1.9;margin-top:12px}
/* ---- Today in your city (today.js), the line above the hero ---- */
/* Ink throughout; the one colour is the deep marigold on "more" and on
   the change-city control, which are controls, not verdicts. */
.today{margin:10px 0 0;border:1.5px solid var(--ink);background:var(--card);
  font-family:var(--ui);font-size:13.5px;line-height:1.45;color:var(--ink)}
.today > summary{list-style:none;cursor:pointer;padding:8px 10px;
  display:flex;gap:8px;align-items:baseline;
  font-family:var(--ui);font-size:13.5px;font-weight:500;color:var(--ink)}
.today > summary::-webkit-details-marker{display:none}
/* the general summary rule's "+" / "-"; this one says more and less */
.today > summary::after{content:none}
.today .tdline{flex:1 1 auto;min-width:0}
.today .tdline b{font-weight:700;color:var(--ink-deep)}
.today .tdmore{flex:0 0 auto;color:var(--mg-deep);font-weight:600;
  text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.today .tdmore::after{content:"more"}
.today[open] .tdmore::after{content:"less"}
.tdbody{padding:9px 10px 10px;border-top:1px solid var(--ink)}
.tdfacts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0}
.tdfacts > div{display:contents}
.tdfacts dt{font-weight:600;color:var(--mg-deep)}
.tdfacts dd{margin:0;color:var(--ink)}
.tdchange{margin:9px 0 0}
.tdlink{font-family:var(--ui);font-size:13.5px;font-weight:600;background:none;
  border:0;padding:0;color:var(--mg-deep);text-decoration:underline;
  text-underline-offset:2px;cursor:pointer}
.tdform{margin:9px 0 0}
.tdgrid{display:grid;grid-template-columns:1fr 1.3fr;gap:8px}
.tdtown{position:relative}
.tdform select,.tdform input{font-size:15px;padding:9px}
/* place.js prints the pinned town's coordinates under the box. This line
   is one row of a strip, and the town's own name coming back into it is
   the confirmation that the pick landed. */
.tdform .placestatus{display:none}
/* Two lines of this type on a 375px phone, so the line stands that tall
   from the first paint and filling it in moves nothing below it. */
@media(max-width:560px){
  .today > summary{min-height:56px}
  .tdgrid{grid-template-columns:1fr}
}

/* ---- This week for your Moon sign (week.js), under the chart card ---- */
.wkgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:12px 0 0}
@media(max-width:700px){.wkgrid{grid-template-columns:repeat(4,1fr)}}
.wkbtn{font-family:var(--disp);font-size:15px;line-height:1.15;color:var(--ink-deep);
  background:var(--card);border:1.5px solid var(--ink);border-radius:3px;
  padding:8px 3px 7px;min-width:0;min-height:52px;cursor:pointer;
  overflow-wrap:anywhere}
@media(max-width:420px){.wkbtn{font-size:13px;padding:8px 1px 7px}}
.wkbtn .wken{display:block;font-family:var(--ui);font-size:11.5px;font-weight:600;
  color:var(--ink);margin-top:3px}
.wkbtn[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.wkbtn[aria-pressed="true"] .wken{color:var(--cream)}
.wkpanel{margin-top:14px;border:1.5px solid var(--ink);
  border-left:5px solid var(--marigold);background:var(--card);padding:12px 14px}
.wkpanel .hslabels{margin-bottom:8px}
.wkprose{font-size:17px;line-height:1.6;color:var(--ink);margin:0 0 12px}
.wklink{font-family:var(--ui);font-size:14.5px;line-height:1.5;margin:7px 0 0;
  color:var(--ink)}
.wkcta{font-size:15.5px;line-height:1.6;color:var(--ink);margin:12px 0 0}

/* ---- Today in your city (today.js), the line above the hero ---- */
/* Ink throughout; the one colour is the deep marigold on the town's name
   and on "more", which is a control, not a verdict. */
.today{margin:10px 0 0;border:1.5px solid var(--ink);background:var(--card);
  font-family:var(--ui);font-size:13.5px;line-height:1.45;color:var(--ink)}
.today > summary{list-style:none;cursor:pointer;padding:8px 10px;
  display:flex;gap:8px;align-items:baseline}
.today > summary::-webkit-details-marker{display:none}
.today .tdline{flex:1 1 auto;min-width:0}
.today .tdline b{font-weight:700;color:var(--ink-deep)}
.today .tdmore{flex:0 0 auto;color:var(--mg-deep);font-weight:600;
  text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.today .tdmore::after{content:"more"}
.today[open] .tdmore::after{content:"less"}
.tdbody{padding:9px 10px 10px;border-top:1px solid var(--ink)}
.tdfacts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0}
.tdfacts > div{display:contents}
.tdfacts dt{font-weight:600;color:var(--mg-deep)}
.tdfacts dd{margin:0;color:var(--ink)}
.tdchange{margin:9px 0 0}
.tdlink{font-family:var(--ui);font-size:13.5px;font-weight:600;background:none;
  border:0;padding:0;color:var(--mg-deep);text-decoration:underline;
  text-underline-offset:2px;cursor:pointer}
.tdform{margin:9px 0 0}
.tdgrid{display:grid;grid-template-columns:1fr 1.3fr;gap:8px}
.tdtown{position:relative}
.tdform select,.tdform input{font-size:15px;padding:9px}
/* place.js prints the pinned town's coordinates under the box; this line
   is one row of a strip, and the town's name coming back in it is the
   confirmation that the pick landed. */
.tdform .placestatus{display:none}
/* Two lines of this type on a 375px phone, so the line is that tall from
   the first paint and filling it in moves nothing below it. */
@media(max-width:560px){
  .today > summary{min-height:56px}
  .tdgrid{grid-template-columns:1fr}
}

/* ---- This week for your Moon sign (week.js), under the chart card ---- */
.wkgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:12px 0 0}
@media(max-width:700px){.wkgrid{grid-template-columns:repeat(4,1fr)}}
.wkbtn{font-family:var(--disp);font-size:15px;line-height:1.15;color:var(--ink-deep);
  background:var(--card);border:1.5px solid var(--ink);border-radius:3px;
  padding:8px 3px 7px;min-width:0;min-height:52px;cursor:pointer;
  overflow-wrap:anywhere}
@media(max-width:420px){.wkbtn{font-size:13px;padding:8px 1px 7px}}
.wkbtn .wken{display:block;font-family:var(--ui);font-size:11.5px;font-weight:600;
  color:var(--ink);margin-top:3px}
.wkbtn[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.wkbtn[aria-pressed="true"] .wken{color:var(--cream)}
.wkpanel{margin-top:14px;border:1.5px solid var(--ink);
  border-left:5px solid var(--marigold);background:var(--card);padding:12px 14px}
.wkpanel .hslabels{margin-bottom:8px}
.wkprose{font-size:17px;line-height:1.6;color:var(--ink);margin:0 0 12px}
.wklink{font-family:var(--ui);font-size:14.5px;line-height:1.5;margin:7px 0 0;
  color:var(--ink)}
.wkcta{font-size:15.5px;line-height:1.6;color:var(--ink);margin:12px 0 0}

/* ---------- an emailed offer, for the one visitor who holds it (JP-431)
   Shown at the top of the order page by offer.js when the code in the
   link is live in Stripe. The same night ground and gold as the public
   offer panel, so it reads as the site's own; every line of text is in
   full-strength cream or gold, never a faded tint. */
.myoffer{padding:14px 0 8px;border-bottom:none}
.mycard{background:linear-gradient(180deg,#2E3C59,#161E2F);color:var(--cream);
  border:2px solid var(--gold);outline:1px solid var(--gold);outline-offset:3px;
  box-shadow:0 6px 22px rgba(22,30,47,.30);padding:16px 16px 18px;
  text-align:center;overflow-wrap:anywhere}
.myeyebrow{font-family:var(--ui);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:#FFE6AE;
  padding-bottom:6px;border-bottom:1px solid rgba(245,195,107,.45)}
.myeyebrow span{color:#F5C36B;letter-spacing:.14em}
.myname{font-family:var(--disp);font-weight:400;font-size:clamp(21px,5.6vw,28px);
  line-height:1.2;margin:10px 0 4px;color:var(--cream)}
.myprice{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:4px 12px;margin:4px 0 6px}
.mynew{font-family:var(--disp);font-size:clamp(36px,11vw,48px);line-height:1.05;
  color:#F5C36B}
.myold{font-family:var(--disp);font-size:21px;color:var(--cream);
  text-decoration-thickness:2px}
.mycard .cur{opacity:1}
.myoff{font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;background:#F5C36B;color:#161E2F;padding:3px 9px;
  border-radius:2px;white-space:nowrap}
.myline,.myfilled{font-family:var(--ui);font-size:14.5px;line-height:1.45;
  margin:4px 0 0;color:var(--cream)}
.myfilled{margin-top:8px}
.mygo{margin-top:14px}
@media(min-width:760px){.mycard{padding:20px 26px 22px}}

/* An offer price where a full price was: the new figure, then the old
   one struck through in the same ink. */
.was{font-size:.72em;margin-left:.2em;text-decoration-thickness:2px;color:inherit}
.chip .p .isnow,.chip .p .was{color:#F5C36B}

/* Read aloud, never drawn. */
.vh{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.prefillnote{margin:0 0 14px}

/* While an emailed offer shows, and while it is being checked, the free
   reading's buttons step aside: this visitor has had theirs, and the
   dock leads to finishing this order. The dock's one button then takes
   the full width. */
body.myoffer-on .dock .d1,body.myoffer-wait .dock .d1,
body.myoffer-on .strip .chip.free,body.myoffer-wait .strip .chip.free,
body.myoffer-on .sidebar .tier.free,body.myoffer-wait .sidebar .tier.free,
body.myoffer-on .menubar a.first,body.myoffer-wait .menubar a.first{display:none}
/* A discount code that does not apply to the order chosen (offer.js). */
.offernote{border-left:4px solid var(--mg-deep);padding-left:8px;overflow-wrap:anywhere}