/* Dil Se with Daaji, the webapp.
   Tokens read from storybook.heartfulness.org. Values are theirs; the mapping onto this page is
   ours. Public Sans is their only face, so hierarchy comes from weight. */
:root{
  /* Heartfulness design system, read from storybook.heartfulness.org on 18 September 2026.
     Ramp names and values are theirs; only the mapping onto this page is ours. */
  --color-primary-50:#e6ebf5; --color-primary-75:#96abd5; --color-primary-100:#6b89c4;
  --color-primary-200:#2b56aa; --color-primary-300:#003399; --color-primary-400:#00246b;
  --color-primary-500:#001f5d;
  --color-teal-300:#005f5f; --color-teal-200:#2b7a7a; --color-teal-50:#e6efef;
  --color-secondary-300:#8e24a0; --color-secondary-50:#f4e9f6;
  --color-secondary-alt-300:#8b001f; --color-secondary-alt-50:#f3e6e9;
  --color-tertiary-300:#3a4a3f; --color-tertiary-50:#ebedec;
  --color-accent-300:#12b76a; --color-accent-50:#e7f8f0;
  --color-warning-300:#f79009; --color-warning-50:#fef4e6;
  --color-error-300:#f04438;
  --color-gray-50:#e8e8e9; --color-gray-100:#b7b9bb; --color-gray-200:#94979a;
  --color-gray-300:#63676c; --color-gray-400:#454950; --color-gray-500:#161c24;

  --radius-sm:.25rem; --radius-md:.375rem; --radius-lg:.5rem; --radius-xl:.75rem;
  --radius-2xl:1rem;
  --tracking-tight:-.025em; --tracking-wide:.025em; --tracking-widest:.1em;

  /* This page, expressed in their tokens. The five lanes take five different ramps so a
     reader can tell them apart, which the system supports and does not name. */
  --brand:var(--color-primary-300); --brand-deep:var(--color-primary-400);
  --spiritual:var(--color-primary-200); --health:var(--color-teal-300);
  --wealth:var(--color-tertiary-300); --family:var(--color-secondary-alt-300);
  --personal:var(--color-secondary-300);
  /* Their warning ramp. It is the only warm colour the system has, and it is used here the
     way the system uses it, for a rule and a mark, never as body text. */
  --saffron:var(--color-warning-300); --saffron-wash:var(--color-warning-50);
  /* Saffron as TEXT. The wash is light and the ramp colour is too pale to read on
     it, so writing needs a darker one. In dark the wash is nearly black and the
     ramp colour is the readable one, so the two swap. */
  /* The system's green and red are ramp colours, made to be seen rather than read. On white
     #12b76a is 2.6 to 1 and #f04438 is 3.8, and both are used as small text: "Link copied" and
     the line under the contact box saying a number is too short. Darkened here for the light
     theme only, the same way --saffron-ink exists because the saffron ramp cannot be read on
     its own wash. In dark the ramp colours are the readable ones and are used as they are. */
  --saffron-ink:#8a5100; --ok:#087a45; --danger:#b42318;
  /* What is written ON a filled control. White, until dark.
     Every filled button takes its background from --brand or from a lane colour, and in dark
     both of those are LIGHTENED: --brand goes from #003399 to #96abd5 and the lane colours to
     pastels. White on #96abd5 is about 2 to 1 and cannot be read. So the ink on a fill is a
     token of its own and it flips with the theme. */
  --on-brand:#ffffff;
  color-scheme:light;
  --ink:var(--color-gray-500); --ink-soft:var(--color-gray-400);
  --ink-faint:var(--color-gray-300);
  --page:#f6f7f9; --panel:#ffffff; --tint:#fafbfc; --wash:var(--color-primary-50);
  --rule:var(--color-gray-50); --rule-soft:#f1f1f2;
  --display:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --lift:0 1px 2px rgba(22,28,36,.05), 0 14px 40px rgba(22,28,36,.07);
  --lift-sm:0 1px 2px rgba(22,28,36,.05), 0 6px 18px rgba(22,28,36,.06);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --on-brand:#0e1319; --saffron-ink:#fcd19a; --ok:#5fc496; --danger:#f0897c;
  --brand:var(--color-primary-75); --brand-deep:var(--color-primary-50);
  --spiritual:var(--color-primary-75); --health:#6ba2a2;
  --wealth:#aeb5b0; --family:#cf96a3; --personal:#d1a5d8;
  --saffron:#fcd19a; --saffron-wash:#2a2014;
  --ink:#e8e8e9; --ink-soft:#b7b9bb; --ink-faint:#94979a;
  --page:#090c0f; --panel:#141921; --tint:#10141a; --wash:#10141a;
  --rule:#2a2f36; --rule-soft:#1c2128;
  --lift:0 1px 2px rgba(0,0,0,.34), 0 14px 40px rgba(0,0,0,.3);
  --lift-sm:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.26);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --on-brand:#0e1319; --saffron-ink:#fcd19a; --ok:#5fc496; --danger:#f0897c;
  --brand:var(--color-primary-75); --brand-deep:var(--color-primary-50);
  --spiritual:var(--color-primary-75); --health:#6ba2a2;
  --wealth:#aeb5b0; --family:#cf96a3; --personal:#d1a5d8;
  --saffron:#fcd19a; --saffron-wash:#2a2014;
  --ink:#e8e8e9; --ink-soft:#b7b9bb; --ink-faint:#94979a;
  --page:#090c0f; --panel:#141921; --tint:#10141a; --wash:#10141a;
  --rule:#2a2f36; --rule-soft:#1c2128;
  --lift:0 1px 2px rgba(0,0,0,.34), 0 14px 40px rgba(0,0,0,.3);
  --lift-sm:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.26);
}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
.page{max-width:1120px;margin:0 auto;padding-inline:20px}

/* ---------- the note above the mockup ---------- */




.stamp{display:inline-flex;align-items:center;gap:8px;margin-top:20px;background:var(--saffron-wash);
  border-radius:999px;padding:6px 14px;font:500 12px var(--sans);color:var(--saffron-ink);
  letter-spacing:.03em}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stamp{color:var(--saffron)}}
:root[data-theme="dark"] .stamp{color:var(--saffron)}

/* The bar the portal sits under inside the Heartfulness site. The mockup is the application
   itself now rather than a picture of one, so there is no browser chrome and nothing below it
   arguing a case. That belongs in the deck. */







/* On a phone the four nav items and the avatar could not fit beside the logo, and the row
   pushed 25px past the screen so the whole page scrolled sideways. The nav scrolls inside
   itself instead, and the avatar stops being squeezed by a flex row that has run out of room. */
@media (max-width:640px){
  
  
  
  .avatar{flex:none}
}
.appbar .who{display:block}
.appbar .who b{display:block;font-family:var(--display);font-weight:300;letter-spacing:var(--tracking-tight);
  font-size:clamp(20px,2.4vw,27px);color:var(--ink);line-height:1.15;margin-bottom:2px}

/* His words open the portal, as they do the page an abhyasi arrives from. */
.epigraph{margin:0 0 clamp(18px,2.4vw,26px);max-width:52ch;
  padding-left:clamp(14px,2vw,20px);border-left:3px solid var(--saffron)}
.epigraph blockquote{font-family:var(--display);font-weight:300;letter-spacing:var(--tracking-tight);font-style:italic;
  font-size:clamp(17px,2vw,23px);line-height:1.4;margin:0 0 8px;color:var(--ink)}
.epigraph figcaption{font:600 11.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint)}

/* The flow, shown rather than hidden behind a disclosure. It is the difference between a
   search box and a practice, so it should not need opening to be seen. */
.how{border:1px solid var(--rule);border-radius:14px;background:var(--tint);
  margin:0 0 clamp(20px,2.8vw,30px);padding:clamp(16px,2.2vw,22px)}
.how h3{font-family:var(--display);font-weight:300;letter-spacing:var(--tracking-tight);font-size:clamp(19px,2.2vw,25px);
  margin:0 0 4px;color:var(--ink)}
.howsub{font-size:14px;color:var(--ink-soft);margin:0 0 clamp(12px,1.6vw,18px)}
.orpick{font:600 11.5px var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 11px}
.steps{display:grid;grid-template-columns:repeat(7,1fr);gap:11px;padding:0}
.st{border-top:2px solid var(--rule);padding-top:9px}
.st:first-child{border-top-color:var(--saffron)}
/* The icon says what the step is, the number says where it sits. Both, because these seven
   are a sequence somebody walks through rather than a set of features. */
/* `.st span` below is (0,0,1,1) and would win over a bare `.sti`, forcing this back to
   display:block and collapsing the row. Scoped so the cascade lands the right way round. */
.st .sti{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.st .sti svg{width:20px;height:20px;flex:0 0 20px;stroke:var(--brand);stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.st b{font-family:var(--display);font-weight:600;font-size:19px;color:var(--brand);
  line-height:1;margin:0}
.st i{display:block;font-style:normal;font:600 12.5px var(--sans);color:var(--ink);
  margin-bottom:2px}
.st span{font-size:12.8px;color:var(--ink-soft);line-height:1.35;display:block}
.howq{font-family:var(--display);font-style:italic;font-size:14.5px;color:var(--ink-soft);
  margin:clamp(13px,1.8vw,18px) 0 0;padding-top:clamp(12px,1.6vw,16px);
  border-top:1px solid var(--rule)}
.howq i{display:block;font-style:normal;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-top:5px}
@media (max-width:760px){.steps{grid-template-columns:1fr 1fr}}

/* ---------- the device ---------- */






.addr{flex:1;background:var(--panel);border:1px solid var(--rule);border-radius:8px;
  padding:5px 12px;font:400 12.5px var(--sans);color:var(--ink-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addr b{color:var(--ink-soft);font-weight:500}

/* ---------- the portal ---------- */
.app{padding:clamp(20px,3vw,34px) clamp(18px,3vw,38px) clamp(26px,4vw,44px)}
.appbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:16px;border-bottom:1px solid var(--rule-soft);margin-bottom:clamp(20px,3vw,32px)}
.bartools{display:flex;align-items:center;gap:14px}
.tiers{display:inline-flex;background:var(--tint);border:1px solid var(--rule);
  border-radius:999px;padding:3px}
.tierbtn{border:0;background:none;border-radius:999px;padding:6px 15px;cursor:pointer;
  font:500 13px var(--sans);color:var(--ink-soft);white-space:nowrap}
.tierbtn[aria-selected="true"]{background:var(--brand);color:var(--on-brand);font-weight:600}
.tabbar{display:flex;gap:clamp(14px,2.4vw,30px);border-bottom:1px solid var(--rule);
  margin:0 0 clamp(18px,2.6vw,26px)}
.tb{border:0;background:none;cursor:pointer;padding:0 0 12px;position:relative;
  font:500 15px var(--sans);color:var(--ink-soft);white-space:nowrap}
.tb[aria-selected="true"]{color:var(--c,var(--brand));font-weight:600}
.tb[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:2px;background:var(--c,var(--brand))}
.how.bare{border:0;background:none;padding:0}
@media (max-width:560px){.tabbar{overflow-x:auto;scrollbar-width:none}
  .tabbar::-webkit-scrollbar{display:none}.tb{font-size:14px}
  .appbar{flex-wrap:wrap}.bartools{width:100%;justify-content:space-between}}
.appbar .who{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--ink-soft)}
.avatar{width:34px;height:34px;flex:none;border-radius:50%;background:var(--brand);color:var(--on-brand);
  display:grid;place-items:center;font:600 13px var(--sans)}

/* Where Daaji's own introduction would sit. Drawn as an empty frame on purpose: a still
   borrowed from another talk would read as though the message already existed. */
.welcome{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:clamp(16px,2.4vw,28px);
  background:var(--tint);border:1px solid var(--rule);border-radius:16px;
  padding:clamp(14px,2vw,20px);margin:0 0 clamp(22px,3vw,32px);align-items:center}
.reel{position:relative;aspect-ratio:16/9;border-radius:11px;overflow:hidden;
  background:linear-gradient(150deg,var(--brand) 0%,#0b1220 100%);display:grid;place-items:center}
.reel .ply{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);
  display:grid;place-items:center}
.reel .ply svg{width:20px;height:20px;fill:var(--brand);margin-left:3px}
.reel .slate{position:absolute;left:11px;bottom:10px;color:rgba(255,255,255,.88);
  font:500 11.5px var(--sans)}
.wtext .tag{display:inline-block;background:var(--saffron-wash);color:var(--saffron-ink);border-radius:999px;
  padding:4px 11px;font:600 10.5px var(--sans);letter-spacing:.07em;text-transform:uppercase;
  margin-bottom:9px}
.wtext h3{font-family:var(--display);font-weight:300;letter-spacing:var(--tracking-tight);font-size:clamp(19px,2.3vw,25px);
  margin:0 0 7px;line-height:1.16}
.wtext p{margin:0 0 12px;font-size:14px;color:var(--ink-soft);line-height:1.5;max-width:52ch}
.skip{border:1px solid var(--rule);background:var(--panel);border-radius:9px;padding:8px 15px;
  font:500 13px var(--sans);color:var(--ink-soft);cursor:pointer}
.skip:hover{border-color:var(--brand);color:var(--brand)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wtext .tag{color:var(--saffron)}}
:root[data-theme="dark"] .wtext .tag{color:var(--saffron)}
@media (max-width:700px){.welcome{grid-template-columns:1fr}}

.ask h2{font-family:var(--display);font-weight:300;letter-spacing:var(--tracking-tight);font-size:clamp(26px,3.6vw,40px);
  line-height:1.1;margin:0 0 8px;text-wrap:balance}
.ask .sub{color:var(--ink-soft);font-size:15.5px;margin:0 0 22px;max-width:56ch}
/* Sticky, so the box is reachable from anywhere in the app without going back first. It takes
   the colour of whichever lane is open, which is the only chrome that tells you where you are
   once you have scrolled past the heading. */
.askbar{position:sticky;top:0;z-index:12;background:var(--panel);
  padding:clamp(12px,1.8vw,18px) 0 clamp(14px,2vw,20px);
  margin:0 0 clamp(4px,1vw,10px);border-bottom:1px solid var(--rule-soft)}
.field{display:grid;grid-template-columns:auto 1fr auto;gap:11px;background:var(--panel);
  border:1.5px solid var(--rule);border-radius:var(--radius-2xl);padding:7px 7px 7px 15px;
  align-items:center;box-shadow:var(--lift-sm);transition:border-color .14s ease}
.field:focus-within{border-color:var(--c,var(--brand))}
.field .mag{width:19px;height:19px;stroke:var(--c,var(--ink-faint));fill:none;stroke-width:1.8;
  stroke-linecap:round;flex:none}
.field input{border:0;outline:none;background:none;font:400 16px var(--sans);color:var(--ink);
  padding:12px 0;width:100%;min-width:0}
.field input::placeholder{color:var(--ink-faint)}
.field button{border:0;border-radius:var(--radius-lg);background:var(--c,var(--brand));color:var(--on-brand);
  cursor:pointer;font:600 14.5px var(--sans);padding:12px 22px;white-space:nowrap}
.field button:hover{filter:brightness(.93)}
@media (max-width:520px){.field button{padding:12px 15px}}

.lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:12px}
/* Four lanes since Personal folded into Livelihood and life, its requests having moved to the
   Reach out tab. Four columns where there is room, two on a tablet, one on a phone. */
@media (min-width:1000px){.lanes{grid-template-columns:repeat(4,1fr)}}
.lane{text-align:left;background:var(--panel);border:1px solid var(--rule);border-radius:14px;
  padding:18px 18px 16px;cursor:pointer;display:flex;flex-direction:column;gap:9px;
  box-shadow:var(--lift-sm);border-top:3px solid var(--c)}
.lane:hover{border-color:var(--c);transform:translateY(-2px)}
.lane{transition:transform .14s ease,border-color .14s ease}
@media (prefers-reduced-motion:reduce){.lane{transition:none}.lane:hover{transform:none}}
.lane .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 12%,transparent)}
.lane .ic svg{width:20px;height:20px;stroke:var(--c);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.lane h3{font:600 16px var(--sans);margin:0;color:var(--ink)}
.lane p{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.45}
.lane .end{font:500 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--c);margin-top:auto;padding-top:6px}

/* ---------- a lane, opened ---------- */
.view{display:grid;gap:clamp(16px,2.4vw,24px)}
.viewhead{display:flex;align-items:flex-start;gap:14px}
.viewhead .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 12%,transparent);flex:none}
.viewhead .ic svg{width:23px;height:23px;stroke:var(--c);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.viewhead h2{font-family:var(--display);font-weight:300;letter-spacing:var(--tracking-tight);font-size:clamp(23px,3vw,32px);
  line-height:1.12;margin:0 0 4px}
.viewhead p{margin:0;color:var(--ink-soft);font-size:14.5px;max-width:58ch}
.cols{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(16px,2.4vw,28px);align-items:start}
/* One column. The answer uses the width it is given; nothing is parked beside it. */
.lanebody{display:grid;gap:clamp(14px,2vw,20px);justify-items:stretch}
.lanebody .answer{max-width:none}
.finder{margin:0 0 14px}
.ltoplab{font:600 11px var(--sans);letter-spacing:var(--tracking-widest);text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 9px}
.lfind{width:100%;border:1px solid var(--rule);border-radius:var(--radius-xl);padding:11px 14px;
  font:400 14.5px var(--sans);color:var(--ink);background:var(--panel);outline:none;
  margin:12px 0 0}
.lfind:focus{border-color:var(--c)}
/* Topics are chosen the same way the lane was: a row of boxes, not a row of chips. A chip row
   reads as a filter bar somebody has to notice. The lane cards above set the pattern for
   picking one thing out of a few, so picking a topic uses it too. */
.ltopics{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:9px}
.ltop{text-align:left;background:var(--panel);border:1px solid var(--rule);
  border-top:3px solid color-mix(in srgb,var(--c) 45%,var(--rule));
  border-radius:var(--radius-xl);padding:12px 13px 11px;cursor:pointer;
  display:flex;flex-direction:column;gap:3px;
  font:500 13.5px var(--sans);color:var(--ink);line-height:1.25;
  transition:border-color .14s ease,transform .14s ease}
.ltop:hover{border-color:var(--c);border-top-color:var(--c);transform:translateY(-1px)}
.ltop[aria-pressed="true"]{border-color:var(--c);border-top-color:var(--c);
  background:color-mix(in srgb,var(--c) 7%,transparent);font-weight:600}
.ltop em{font-style:normal;font:400 11.5px var(--sans);color:var(--ink-faint);
  font-variant-numeric:tabular-nums}
.ltop[aria-pressed="true"] em{color:var(--c)}
@media (prefers-reduced-motion:reduce){.ltop{transition:none}.ltop:hover{transform:none}}
.nores{font-size:14px;color:var(--ink-faint);margin:0 0 14px;max-width:46ch}
/* The questions were a 270 pixel scroll box inside a page that already scrolls, so a reader saw
   four of them and had to scroll a panel to find the rest. They lay out as cards now and the
   page scrolls once. */
.qpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:9px;
  margin:0 0 16px}
.qpick a{text-align:left;background:var(--panel);border:1px solid var(--rule);
  border-radius:var(--radius-xl);padding:13px 15px;cursor:pointer;color:var(--ink);
  display:flex;flex-direction:column;gap:5px;font:400 14.5px/1.35 var(--sans);
  transition:border-color .14s ease,transform .14s ease}
.qpick a span{display:block}
.qpick a em{font-style:normal;font:500 10.5px var(--sans);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:auto}
.qpick a:hover{border-color:var(--c);transform:translateY(-1px)}
.qpick a[aria-pressed="true"]{border-color:var(--c);border-width:1.5px;
  background:color-mix(in srgb,var(--c) 6%,transparent);font-weight:500}
.qpick a[aria-pressed="true"] em{color:var(--c)}
@media (prefers-reduced-motion:reduce){.qpick a{transition:none}
  .qpick a:hover{transform:none}}
.answer{background:var(--panel);border:1px solid var(--rule);border-radius:14px;overflow:hidden;
  box-shadow:var(--lift-sm)}
.answer .thumb{position:relative;aspect-ratio:16/9;background:#0b1220;display:block}
.answer .thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.82}
.answer .play{position:absolute;inset:0;display:grid;place-items:center}
.answer .play span{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;box-shadow:0 4px 18px rgba(0,0,0,.3)}
.answer .play svg{width:20px;height:20px;fill:var(--brand);margin-left:3px}
.answer .at{position:absolute;right:10px;bottom:10px;background:rgba(11,18,32,.86);color:#fff;
  border-radius:6px;padding:3px 8px;font:500 11.5px var(--sans)}
.answer .body{padding:18px 20px 20px}
.answer .quote{font-family:var(--display);font-size:17px;line-height:1.5;margin:0 0 14px;
  color:var(--ink)}
.answer .quote mark{background:var(--saffron-wash);color:inherit;
  box-shadow:inset 0 -2px 0 var(--saffron);border-radius:2px;padding:0 1px}
.answer .src{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--ink-faint);
  border-top:1px solid var(--rule-soft);padding-top:12px}
.answer .src b{color:var(--ink-soft);font-weight:500}
.resolve{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:14px;
  font-size:14px;color:var(--ink-soft)}
.resolve button{border:1px solid var(--rule);background:var(--panel);border-radius:9px;
  padding:8px 15px;font:500 13.5px var(--sans);cursor:pointer;color:var(--ink)}
.resolve button.yes{background:var(--c);border-color:var(--c);color:var(--on-brand)}
.resolve button:hover{border-color:var(--c)}

/* Reading the answer is not the end of it, and He says so himself. */
.sit{border-top:1px solid var(--rule-soft);margin-top:15px;padding-top:15px;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.sitq{font-family:var(--display);font-style:italic;font-size:14.5px;line-height:1.45;
  color:var(--ink-soft);margin:0;max-width:40ch}
.sitq span{display:block;font:500 11px var(--sans);font-style:normal;color:var(--ink-faint);
  margin-top:4px;letter-spacing:.03em}
.sitgo{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--c);
  background:color-mix(in srgb,var(--c) 8%,transparent);color:var(--c);border-radius:10px;
  padding:10px 16px;font:600 13.5px var(--sans);cursor:pointer;white-space:nowrap}
.sitgo svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.sitgo:hover{background:var(--c);color:var(--on-brand)}
.more{border-top:1px solid var(--rule-soft);margin-top:15px;padding-top:13px}
.more h5{font:600 11px var(--sans);letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 8px}
.more a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;font-size:14px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--rule-soft)}
.more a:last-child{border-bottom:0}
.more a:hover{color:var(--c)}
.more a svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none;
  opacity:.45}
.more a:hover svg{opacity:1}

.side{display:grid;gap:12px}
.note{background:var(--tint);border:1px solid var(--rule);border-radius:13px;padding:16px 17px}
.note h4{font:600 12px var(--sans);letter-spacing:.07em;text-transform:uppercase;
  color:var(--c);margin:0 0 8px}
.note p{margin:0 0 8px;font-size:13.8px;color:var(--ink-soft);line-height:1.5}
.note p:last-child{margin:0}
.note ol{margin:0;padding-left:18px;font-size:13.8px;color:var(--ink-soft);line-height:1.6}
.note li{margin-bottom:5px}
.note li b{color:var(--ink)}

/* The sources, grouped by whose words they are rather than by how they were made. A reader
   cares that Whispers and the Complete Works are both Babuji; they do not care that one was a
   PDF and the other an mbox. */
.tstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px;
  margin:0 0 clamp(22px,3vw,32px)}
.tstat{border-top:3px solid var(--c,var(--brand));padding-top:11px}
.tstat b{display:block;font:300 clamp(26px,3.6vw,40px)/1 var(--display);color:var(--ink);
  letter-spacing:var(--tracking-tight)}
.tstat b i{font-style:normal;font-size:.44em;color:var(--ink-soft);margin-left:.12em}
.tstat span{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:6px}
.tsec{display:flex;align-items:flex-start;gap:12px;margin:0 0 15px}
.tsec h3{font:300 clamp(19px,2.3vw,25px)/1.2 var(--display);color:var(--ink);margin:0 0 2px;
  letter-spacing:var(--tracking-tight)}
.tsec p{font-size:13px;color:var(--ink-faint);margin:0}
.sic{width:34px;height:34px;flex:none;border-radius:var(--radius-lg);display:grid;
  place-items:center;background:color-mix(in srgb,var(--c,var(--brand)) 11%,transparent)}
.sic svg{width:18px;height:18px;stroke:var(--c,var(--brand));fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.whose{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:12px;
  margin:0 0 6px}
.wcard{border:1px solid var(--rule);border-radius:var(--radius-xl);padding:15px 16px 14px;
  background:var(--panel);display:grid;gap:3px;border-top:3px solid var(--wc)}
.wcard.faint{opacity:.72}
.wic{width:30px;height:30px;border-radius:var(--radius-md);display:grid;place-items:center;
  background:color-mix(in srgb,var(--wc) 13%,transparent);margin-bottom:6px}
.wic svg{width:17px;height:17px;stroke:var(--wc);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.wpc{font:300 clamp(30px,4vw,42px)/1 var(--display);color:var(--wc);
  letter-spacing:var(--tracking-tight)}
.wpc i{font-style:normal;font-size:.42em;margin-left:.08em}
.wname{font:600 14px var(--sans);color:var(--ink);margin-top:2px}
.wmeta{font-size:12px;color:var(--ink-faint);line-height:1.4}
.wtrack{height:5px;border-radius:999px;background:var(--rule-soft);overflow:hidden;margin-top:9px}
.wtrack i{display:block;height:100%;background:var(--wc);border-radius:999px}
.tnote{font-size:12.5px;color:var(--ink-faint);line-height:1.5;margin:0 0 clamp(26px,3.4vw,38px);
  max-width:74ch;padding-top:11px;border-top:1px solid var(--rule-soft)}
.tbars{display:grid;gap:9px;margin:0 0 14px}
.tbar{display:grid;grid-template-columns:minmax(0,190px) 1fr 56px;gap:14px;align-items:center}
.tbname{font-size:13.5px;color:var(--ink)}
.tbtrack{height:14px;border-radius:4px;background:var(--rule-soft);overflow:hidden}
.tbtrack i{display:block;height:100%;border-radius:0 4px 4px 0}
.tbn{font-size:13px;color:var(--ink-soft);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:560px){.tbar{grid-template-columns:1fr 52px;gap:4px 10px}
  .tbname{grid-column:1}.tbn{grid-column:2;grid-row:1}
  .tbtrack{grid-column:1/-1}}
/* The lane opens on a quotation rather than on a sentence of ours summarising one. Nothing on
   this page describes a teaching in our own words. */
.carou{border:1px solid var(--rule);border-radius:var(--radius-2xl);
  padding:clamp(18px,2.6vw,26px);background:var(--panel);margin:0 0 clamp(22px,3vw,30px)}
.carhead{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.carhead h3{font:300 clamp(18px,2.1vw,23px)/1.2 var(--display);color:var(--ink);margin:0 0 2px;
  letter-spacing:var(--tracking-tight)}
.carhead p{font-size:12.5px;color:var(--ink-faint);margin:0}
.carq{margin:0;min-height:132px;display:flex;flex-direction:column;justify-content:center;
  padding-left:clamp(14px,2vw,20px);border-left:3px solid var(--c,var(--brand))}
.cartag{font:600 10.5px var(--sans);letter-spacing:var(--tracking-widest);text-transform:uppercase;
  color:var(--c,var(--brand));margin-bottom:9px}
.carq blockquote{margin:0 0 10px;font:300 clamp(17px,2.1vw,23px)/1.42 var(--display);
  color:var(--ink);letter-spacing:var(--tracking-tight);max-width:58ch}
.carq figcaption{font:600 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint)}
.carq figcaption a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.carnav{display:flex;align-items:center;gap:14px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--rule-soft)}
.carbtn{border:1px solid var(--rule);background:var(--panel);border-radius:50%;width:32px;
  height:32px;display:grid;place-items:center;cursor:pointer;flex:none}
.carbtn svg{width:15px;height:15px;stroke:var(--ink-soft);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.carbtn:hover{border-color:var(--c,var(--brand))}
.carbtn:hover svg{stroke:var(--c,var(--brand))}
.cardots{display:flex;gap:6px;flex:1}
.cardot{width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--rule)}
.cardot[aria-current="true"]{background:var(--c,var(--brand));width:20px;border-radius:999px}
.laneq{margin:0 0 clamp(20px,2.8vw,28px);padding-left:clamp(14px,2vw,20px);
  border-left:3px solid var(--c,var(--brand));max-width:62ch}
.laneq blockquote{margin:0 0 8px;font:300 clamp(17px,2vw,22px)/1.4 var(--display);
  color:var(--ink);letter-spacing:var(--tracking-tight)}
.laneq figcaption{font:600 11px var(--sans);letter-spacing:var(--tracking-widest);
  text-transform:uppercase;color:var(--ink-faint)}
.laneq figcaption a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.rlab{font:600 11px var(--sans);letter-spacing:var(--tracking-widest);text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 11px}
.purposes{display:grid;grid-template-columns:1fr;gap:11px;margin:0 0 clamp(20px,3vw,30px)}
/* Five of them. Left to auto fit they broke four and one, and the last box sat alone under a
   gap. Three and two is a shape somebody chose. */
@media (min-width:620px){.purposes{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.purposes{grid-template-columns:repeat(3,1fr)}}
.pbox{text-align:left;background:var(--panel);border:1px solid var(--rule);
  border-radius:var(--radius-xl);padding:15px 16px;cursor:pointer;display:grid;gap:4px;
  transition:border-color .14s ease,transform .14s ease}
.pbox .pic{width:32px;height:32px;border-radius:var(--radius-md);display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,var(--brand)) 11%,transparent);margin-bottom:5px}
.pbox .pic svg{width:18px;height:18px;stroke:var(--c,var(--brand));fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.pbox b{font:600 14.5px var(--sans);color:var(--ink);line-height:1.3}
.pbox span{font-size:12.5px;color:var(--ink-soft);line-height:1.4}
.pbox:hover{border-color:var(--c,var(--brand));transform:translateY(-1px)}
.pbox[aria-pressed="true"]{border-color:var(--c,var(--brand));border-width:1.5px;
  background:color-mix(in srgb,var(--c,var(--brand)) 6%,transparent)}
.rform{border-top:1px solid var(--rule);padding-top:clamp(18px,2.6vw,26px);max-width:620px}
/* ---- the preview, and the publish box ------------------------------------
   Six classes on this screen had no styles at all: the preview block, the inferred list, its
   values and warnings, the passage samples, and the publish box itself. The admin page threw
   before it could draw until 26 September 2026, so nobody had ever seen it rendered. It is the
   one screen in this service that changes what a reader is shown, and it looked like a draft. */
.astage{max-width:760px;margin-top:26px;border-top:1px solid var(--rule);padding-top:22px}
.astage h4{font:600 15px var(--sans);color:var(--ink);margin:0 0 10px}
.aprev{background:var(--tint);border:1px solid var(--rule-soft);border-radius:var(--radius-lg);
  padding:13px 16px;margin:0 0 9px;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.ainfer{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden}
.ainfer li{background:var(--panel);padding:11px 15px;display:grid;
  grid-template-columns:minmax(120px,1fr) minmax(0,1.4fr);gap:4px 16px;align-items:baseline}
.ainfer li b{font:600 12.5px var(--sans);color:var(--ink-soft)}
.ainfer .aval{font:500 14px var(--sans);color:var(--ink);overflow-wrap:anywhere}
.ainfer li em{grid-column:1/-1;font-style:normal;font-size:12px;color:var(--ink-faint)}
.ainfer li.warn{background:var(--saffron-wash)}
.awarn{grid-column:1/-1;margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--saffron-ink)}
.apub{margin-top:28px;border-top:1px solid var(--rule);padding-top:20px;display:grid;gap:14px;
  max-width:560px}
.apub select{width:100%;border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:12px 14px;font:400 15px var(--sans);color:var(--ink);background:var(--panel)}
.apub .rfoot{margin:0}

/* What happened, said in the page.
   It was an alert() carrying whatever the fetch threw, so "/admin/read returned 500" was
   printed at the person using the tool. Giri met exactly that the first time he pasted a link,
   on 28 September 2026. */
.asay{border-radius:var(--radius-xl);padding:14px 18px;margin:0 0 20px;max-width:620px;
  border:1px solid var(--rule)}
.asay b{display:block;font:600 14.5px var(--sans);color:var(--ink)}
.asay p{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.asay.good{background:var(--wash);border-color:color-mix(in srgb,var(--brand) 30%,transparent)}
.asay.warn{background:var(--saffron-wash);
  border-color:color-mix(in srgb,var(--saffron) 45%,transparent)}
/* One, two, three. The tool always had a preview between reading and publishing; it never
   said so, so it read as one button that did something irreversible. */
.astep2{font:600 11px var(--sans);letter-spacing:var(--tracking-widest);text-transform:uppercase;
  color:var(--brand);margin:0 0 10px}

/* ---- the practices --------------------------------------------------------
   Step by step, with the recording beside it on a laptop and above it on a phone. The steps
   are the page: numbered, one thought each, in a reading measure, with the source under them
   rather than in the middle of them. Nothing here is written by us, so the sources are part of
   the design and not a footnote. */
.pjwrap{display:flex;align-items:flex-start;gap:8px;margin:0 0 24px}
.pjwrap .pjump{flex:1 1 auto;min-width:0;margin:0}
.pjarr{flex:none;width:32px;height:32px;margin-top:-6px;border:1px solid var(--rule);
  border-radius:50%;background:var(--panel);color:var(--ink-soft);font:600 18px/1 var(--sans);
  cursor:pointer}
.pjarr:hover:not(:disabled){color:var(--brand);border-color:var(--brand)}
.pjarr:disabled{opacity:.35;cursor:default}
.pjarr[hidden]{display:none}
.pjump{display:flex;flex-wrap:nowrap;gap:clamp(16px,2.2vw,28px);margin:0 0 24px;
  border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:none;
  scroll-margin-top:90px}
.pjump::-webkit-scrollbar{display:none}
.pjump a{flex:none;position:relative;padding:0 0 11px;white-space:nowrap;
  font:500 14px var(--sans);color:var(--ink-soft);text-decoration:none}
.pjump a:hover{color:var(--ink)}
.pjump a[aria-selected="true"]{color:var(--brand);font-weight:600}
.pjump a[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:2px;border-radius:2px;background:var(--brand)}

.prac{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius-2xl);
  margin:0 0 22px;overflow:hidden;scroll-margin-top:90px}
.prachd{padding:clamp(18px,2.4vw,24px) clamp(18px,2.6vw,28px) 0}
.prachd h3{margin:0;font:300 clamp(22px,2.6vw,28px)/1.2 var(--display);color:var(--ink);
  letter-spacing:var(--tracking-tight)}
.pwhen{margin:6px 0 0;font:500 13px var(--sans);color:var(--saffron-ink)}
.ptrainer{margin:6px 0 0;font:400 13.5px var(--sans);color:var(--ink-soft);font-style:italic}
.pbody{display:grid;gap:clamp(16px,2.4vw,26px);padding:clamp(16px,2.4vw,24px) clamp(18px,2.6vw,28px)
  clamp(18px,2.4vw,24px)}
@media (min-width:900px){.prac:has(.pvid) .pbody{grid-template-columns:1fr 300px}}
.pmain{min-width:0}

.pwhy{margin:0 0 16px;padding:0 0 0 16px;border-left:3px solid var(--saffron);
  font:400 clamp(15px,1.6vw,16.5px)/1.65 var(--sans);color:var(--ink)}
.pwhy .psrc{display:block;margin-top:7px}
.psrc{font:500 12px var(--sans);color:var(--ink-faint);text-decoration:none}
a.psrc:hover{color:var(--brand);text-decoration:underline}
.psrc + .psrc{margin-left:12px}

.ploc,.pdiff,.padd{background:var(--tint);border:1px solid var(--rule-soft);
  border-radius:var(--radius-lg);padding:14px 16px;margin:0 0 16px}
.ploc b,.pdiff b{display:block;font:600 12.5px var(--sans);letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px}
.ploc p,.pdiff p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink)}
.palso{margin:9px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.palso em{font-style:normal;color:var(--ink-faint)}
.ptwo{display:grid;gap:12px;margin-top:10px}
@media (min-width:640px){.ptwo{grid-template-columns:1fr 1fr}}
.ptwo > div{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius-md);
  padding:12px 14px}
.ptwo span{display:block;font:600 11.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand);margin-bottom:6px}
.ptwo p{margin:0;font-size:14px;line-height:1.6;color:var(--ink)}

.pprayer{margin:0 0 18px;padding:18px 20px;background:var(--wash);border-radius:var(--radius-lg);
  font:300 clamp(17px,2vw,20px)/1.7 var(--display);color:var(--ink);text-align:center}

.psteps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.psteps li{display:grid;grid-template-columns:26px 1fr;gap:13px;align-items:start}
.pn{width:26px;height:26px;border-radius:50%;background:var(--wash);color:var(--brand);
  display:grid;place-items:center;font:600 12px var(--sans);font-variant-numeric:tabular-nums}
.psteps li > span:last-child{font:400 clamp(15px,1.6vw,16.5px)/1.7 var(--ink);color:var(--ink);
  font-family:var(--sans);max-width:64ch}

.padd h4{margin:0 0 4px;font:600 14.5px var(--sans);color:var(--ink)}
.padd .psteps{margin-top:12px}
.pclose{margin:12px 0 8px;font-size:14px;line-height:1.6;color:var(--ink-soft)}
.pfrom{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--rule-soft);
  font:400 12.5px var(--sans);color:var(--ink-faint)}

.pvid{align-self:start}
.pvid .thumb{width:100%;border-radius:var(--radius-lg);overflow:hidden}
.pvid p{margin:9px 0 0;font-size:13px;line-height:1.5;color:var(--ink-soft)}

.pwhyblock{margin-top:34px;padding-top:26px;border-top:1px solid var(--rule)}
.pwhyblock h3{margin:0 0 6px;font:300 clamp(21px,2.4vw,26px)/1.25 var(--display);color:var(--ink)}
.plead{margin:0 0 20px;font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:70ch}
.pq2{margin:0 0 16px;padding:16px 18px;background:var(--panel);border:1px solid var(--rule);
  border-radius:var(--radius-lg);font:400 15.5px/1.7 var(--sans);color:var(--ink);max-width:78ch}
.pq2 footer{margin-top:10px;padding:0;border:0;font:500 12.5px var(--sans);color:var(--ink-faint)}
.pq2 footer b{color:var(--ink-soft);margin-right:10px}
/* A card's questions, each answered in a Master's words. */
.pqs{margin-top:18px}
.pqa{margin-top:18px}
.pqa h4{margin:0 0 10px;font:600 14.5px var(--sans);color:var(--ink)}
.pqa .pq2{margin-bottom:10px}

/* The four the Seeker is offered, under the questions on the home screen. */
.hprac{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
  margin:22px 0 0}
.hprac span{font:500 12.5px var(--sans);color:var(--ink-faint);margin-right:2px}
.hprac a{font:500 13px var(--sans);color:var(--brand);text-decoration:none;
  border-bottom:1px solid transparent;padding:2px 0}
.hprac a:hover{border-bottom-color:var(--brand)}

/* ---- add a source --------------------------------------------------------
   The link box was an unstyled input about 150 pixels wide, because .rq only ever dressed a
   textarea and this pane is the one place that puts a plain input inside one. The admin page
   threw before it could draw until 26 September 2026, so nobody had seen it. */
.afeed{max-width:620px}
.afeed .rq input[type="url"],.afeed .rq input[type="search"]{width:100%;border:1px solid var(--rule);
  border-radius:var(--radius-xl);padding:13px 15px;font:400 15px var(--sans);color:var(--ink);
  background:var(--panel);outline:none}
.afeed .rq input[type="url"]:focus,.afeed .rq input[type="search"]:focus{border-color:var(--brand)}
.afeed .rq input[type="file"]{width:100%;font:400 13.5px var(--sans);color:var(--ink-soft);
  border:1px dashed var(--rule);border-radius:var(--radius-xl);padding:14px;
  background:var(--tint)}
.afeed .rq input:disabled{opacity:.55}

.rq{display:block;margin:0 0 18px}
.rq > span{display:block;font:600 14.5px var(--sans);color:var(--ink);margin-bottom:8px}
.rq textarea{width:100%;border:1px solid var(--rule);border-radius:var(--radius-xl);
  padding:12px 14px;font:400 15px var(--sans);color:var(--ink);background:var(--panel);
  outline:none;resize:vertical}
.rq textarea:focus{border-color:var(--c,var(--brand))}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid var(--rule);background:var(--panel);border-radius:999px;padding:8px 14px;
  cursor:pointer;font:400 13.5px var(--sans);color:var(--ink-soft)}
.chip.on{border-color:var(--c,var(--brand));color:var(--c,var(--brand));font-weight:600;
  background:color-mix(in srgb,var(--c,var(--brand)) 7%,transparent)}
.dates{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dates input{border:1px solid var(--rule);border-radius:var(--radius-lg);padding:10px 12px;
  font:400 14px var(--sans);color:var(--ink);background:var(--panel)}
.dates em{font-style:normal;color:var(--ink-faint);font-size:13.5px}
.rhint{display:block;font-style:normal;font-size:12px;color:var(--ink-faint);margin-top:8px}
.sendbtn{border:0;border-radius:var(--radius-lg);background:var(--c,var(--brand));color:var(--on-brand);
  cursor:pointer;font:600 14.5px var(--sans);padding:13px 22px}
.sendbtn:hover{filter:brightness(.93)}
.rfoot{font-size:12.5px;color:var(--ink-faint);margin:13px 0 0;max-width:62ch}
.sentbox{border:1px solid var(--rule);border-radius:var(--radius-2xl);padding:clamp(20px,3vw,30px);
  background:var(--panel);max-width:640px}
.sentbox h3{font:300 clamp(20px,2.4vw,27px)/1.25 var(--display);color:var(--ink);margin:12px 0 12px;
  letter-spacing:var(--tracking-tight)}
.sentbox p{font-size:14.5px;color:var(--ink-soft);margin:0 0 11px;line-height:1.55}
.sentbox p.strong{color:var(--ink);font-weight:500}
.states{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0}
.state{font:500 12px var(--sans);color:var(--ink-faint);border:1px solid var(--rule);
  border-radius:999px;padding:6px 13px}
.state.now{border-color:var(--c,var(--brand));color:var(--c,var(--brand));font-weight:600;
  background:color-mix(in srgb,var(--c,var(--brand)) 7%,transparent)}
.srcs{border:1px solid var(--rule);border-radius:var(--radius-xl);padding:16px 18px;
  background:var(--panel);margin-bottom:14px}
.srchead{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  margin-bottom:14px;flex-wrap:wrap}
.srchead h4{font:600 14.5px var(--sans);color:var(--ink);margin:0 0 2px}
.srchead p{font:400 12.5px var(--sans);color:var(--ink-faint);margin:0}
.tiers{display:inline-flex;background:var(--tint);border:1px solid var(--rule);
  border-radius:999px;padding:3px}
.tierbtn{border:0;background:none;border-radius:999px;padding:6px 14px;cursor:pointer;
  font:500 12.5px var(--sans);color:var(--ink-soft);white-space:nowrap}
.tierbtn[aria-selected="true"]{background:var(--c,var(--brand));color:var(--on-brand);font-weight:600}
.srcgrp{padding:10px 0;border-top:1px solid var(--rule-soft)}
.srcgrp:first-of-type{border-top:0;padding-top:0}
.srcgrp b{display:flex;align-items:center;gap:8px;font:600 13.5px var(--sans);color:var(--ink);
  margin-bottom:2px}
.srcgrp span{display:block;font-size:12.5px;color:var(--ink-soft);line-height:1.45}
.srcgrp i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-faint);margin-top:4px}
.locked{font-style:normal;font:600 10px var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--saffron);background:var(--saffron-wash);border-radius:999px;padding:3px 8px}
.offgrp{opacity:.45}
.spoken{border:1px solid var(--rule);border-radius:var(--radius-xl);padding:16px 18px;
  background:var(--panel)}
.spoken h4{font:600 14.5px var(--sans);color:var(--ink);margin:0 0 3px}
.spokensub{font:400 12.5px var(--sans);color:var(--ink-faint);margin:0 0 13px}
.sprow{display:grid;grid-template-columns:minmax(0,1fr) 62px 46px;gap:9px;align-items:center;
  margin-bottom:7px}
.spname{font-size:12.8px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.spbar{height:6px;border-radius:999px;background:var(--rule);overflow:hidden}
.spbar i{display:block;height:100%;background:var(--c);border-radius:999px}
.spn{font-size:12px;color:var(--ink-faint);text-align:right;font-variant-numeric:tabular-nums}
.spoketail{font:400 11.5px var(--sans);color:var(--ink-faint);margin:11px 0 0;line-height:1.45;
  padding-top:10px;border-top:1px solid var(--rule-soft)}
@media (max-width:520px){.sprow{grid-template-columns:minmax(0,1fr) 40px}.spbar{display:none}}
.outcome{border-radius:13px;padding:16px 18px;display:flex;gap:13px;align-items:flex-start;
  background:color-mix(in srgb,var(--c) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 26%,transparent)}
.outcome svg{width:21px;height:21px;stroke:var(--c);fill:none;stroke-width:1.7;flex:none;
  stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.outcome b{display:block;font:600 14.5px var(--sans);color:var(--ink);margin-bottom:3px}
.outcome span{font-size:13.6px;color:var(--ink-soft);line-height:1.5}

.form{display:grid;gap:12px}
.form label{display:grid;gap:5px;font:500 12.5px var(--sans);color:var(--ink-soft)}
.form input,.form select,.form textarea{border:1px solid var(--rule);border-radius:10px;
  padding:11px 13px;font:400 14.5px var(--sans);color:var(--ink);background:var(--panel);
  outline:none;font-family:var(--sans)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--c)}
.form textarea{resize:vertical;min-height:88px}
.form .send{border:0;background:var(--c);color:var(--on-brand);border-radius:10px;padding:12px 20px;
  font:600 14.5px var(--sans);cursor:pointer;justify-self:start}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sent{text-align:center;padding:26px 20px}
.sent .tick{width:56px;height:56px;border-radius:50%;margin:0 auto 14px;display:grid;
  place-items:center;background:color-mix(in srgb,var(--c) 13%,transparent)}
.sent .tick svg{width:27px;height:27px;stroke:var(--c);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.sent h3{font-family:var(--display);font-weight:300;letter-spacing:var(--tracking-tight);font-size:24px;margin:0 0 7px}
.sent p{color:var(--ink-soft);font-size:14.5px;margin:0 auto;max-width:44ch}

/* ---------- the routing map and the argument ---------- */
.section{padding-block:clamp(30px,5vw,58px);border-top:1px solid var(--rule)}
.section h2{font-family:var(--display);font-weight:300;letter-spacing:var(--tracking-tight);font-size:clamp(24px,3.4vw,36px);
  line-height:1.12;margin:0 0 10px;text-wrap:balance;max-width:24ch}
.section .lede{color:var(--ink-soft);font-size:15.5px;max-width:62ch;margin:0 0 26px}
.flowmap{display:grid;gap:10px}
.flowrow{display:grid;grid-template-columns:minmax(0,1.1fr) auto minmax(0,1.4fr);gap:14px;
  align-items:center;background:var(--panel);border:1px solid var(--rule);border-radius:13px;
  padding:14px 16px;box-shadow:var(--lift-sm);border-left:3px solid var(--c)}
.flowrow .from{display:flex;align-items:center;gap:10px;min-width:0}
.flowrow .from svg{width:19px;height:19px;stroke:var(--c);fill:none;stroke-width:1.6;flex:none;
  stroke-linecap:round;stroke-linejoin:round}
.flowrow .from b{font:600 14.5px var(--sans);color:var(--ink)}
.flowrow .arrow{color:var(--ink-faint);font-size:17px}
.flowrow .to{font-size:14px;color:var(--ink-soft);min-width:0}
.flowrow .to b{color:var(--ink);font-weight:600}
.given{font-family:var(--display);font-weight:300;letter-spacing:var(--tracking-tight);font-size:clamp(20px,2.6vw,27px);
  margin:34px 0 4px;color:var(--ink)}
.tally{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;
  margin-top:16px}
@media (min-width:900px){.tally{grid-template-columns:repeat(4,1fr)}}
.givenfoot{font-size:14px;color:var(--ink-soft);max-width:66ch;margin:16px 0 0}
.givenfoot b{color:var(--ink)}
/* Eleven per cent, drawn rather than only stated, because the gap is the argument for
   finishing the work and a sentence hides it. */

.bar .done{display:block;height:100%;background:var(--brand);border-radius:999px 0 0 999px}
.tallybox{background:var(--panel);border:1px solid var(--rule);border-radius:13px;padding:18px;
  box-shadow:var(--lift-sm)}
.tallybox b{font-family:var(--display);font-weight:300;letter-spacing:var(--tracking-tight);font-size:clamp(28px,3.2vw,36px);
  line-height:1;display:block;margin-bottom:8px;color:var(--brand)}
.tallybox span{font-size:13.5px;color:var(--ink-soft);line-height:1.45;display:block}
.before{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.bcard{border-radius:13px;padding:18px 20px;border:1px solid var(--rule);background:var(--panel)}
.bcard h4{font:600 11.5px var(--sans);letter-spacing:.07em;text-transform:uppercase;margin:0 0 10px}
.bcard.old h4{color:var(--family)} .bcard.new h4{color:var(--health)}
.bcard ul{margin:0;padding-left:17px;font-size:14px;color:var(--ink-soft);line-height:1.62}
.bcard li{margin-bottom:5px}
.mail{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:var(--wash);border-radius:5px;padding:1px 6px}
.mail.gone{text-decoration:line-through;opacity:.65}
.corpus{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:8px}
.corpus div{font-size:13px;color:var(--ink-faint)}
.corpus b{display:block;font:600 19px var(--sans);color:var(--ink-soft);
  font-variant-numeric:tabular-nums}
footer{padding-block:26px 50px;border-top:1px solid var(--rule);font-size:13px;
  color:var(--ink-faint)}
footer p{max-width:74ch;margin:0 0 7px}

@media (max-width:820px){
  .cols{grid-template-columns:1fr}
  .before{grid-template-columns:1fr}
  .flowrow{grid-template-columns:1fr;gap:8px}
  .flowrow .arrow{display:none}
}
/* On a phone the magnifier stays beside the words; it had a line of its own once the button
   went (22 October 2026). The button is back (23 October 2026) and sits on the same row,
   small, so the box is still one line. */
@media (max-width:560px){
  .field{grid-template-columns:auto 1fr auto;gap:8px}
  .field button{padding:9px 13px}
  .two{grid-template-columns:1fr}
}

/* ---------- the webapp shell, which the mockup did not need ---------- */
.appshell{max-width:1120px;margin:0 auto;padding:0 clamp(16px,3vw,28px) 72px}
.topbar{position:sticky;top:0;z-index:40;background:var(--panel);
  border-bottom:1px solid var(--rule)}
.topin{max-width:1120px;margin:0 auto;padding:11px clamp(16px,3vw,28px);
  display:flex;align-items:center;gap:14px}
/* ---- light or dark -------------------------------------------------------
   Last in the row and the quietest thing in it. A reader who wants it has to be able to find
   it; a reader who does not should never notice it. So: the same size as a tap target should
   be, no fill, no border until it is under the cursor, and the icon in the faint ink the rest
   of the furniture uses. */
.themebtn{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;
  border:1px solid transparent;border-radius:var(--radius-lg);background:none;cursor:pointer;
  color:var(--ink-faint);padding:0}
.themebtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.themebtn:hover{color:var(--ink);border-color:var(--rule);background:var(--tint)}
.themebtn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.brand{display:flex;align-items:center;gap:11px;margin-right:auto;min-width:0}
.brand img{height:24px;width:auto;flex:none}
/* Only the Heartfulness mark inverts. It is a black line drawing and nothing else in the bar
   is, and inverting the wordmark would turn the blue yellow. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .hfn{filter:invert(1)}}
:root[data-theme="dark"] .brand .hfn{filter:invert(1)}

/* ---- the wordmark --------------------------------------------------------
   Two lines, set tight, the way the printed logo is: the name large and italic, "with Daaji"
   under its tail. The ellipsis is the pause in "Dil Se..." and it carries the one warm colour
   the Heartfulness system has, which is also the only place in this bar where anything is warm.
   Nothing here is an image, so it stays sharp on any screen and costs one font. */
/* The rule between the mark and the name, which is how daaji.org sets its own lockup: the
   Heartfulness mark, a hairline, then the signature. It is a separator and not a border, so it
   is drawn on the wordmark rather than on the bar. */
.wordmark{display:flex;flex-direction:column;line-height:1;white-space:nowrap;min-width:0;
  padding-top:1px;padding-left:17px;margin-left:3px;position:relative}
.wordmark::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;
  background:var(--rule)}
.wordmark .w1{font:400 31px/0.8 'Great Vibes','Snell Roundhand','Apple Chancery',cursive;
  color:var(--brand)}
.wordmark .w1 i{font-style:normal;color:var(--saffron);letter-spacing:.04em}
.wordmark .w2{font:400 15px/1 'Great Vibes','Snell Roundhand','Apple Chancery',cursive;
  color:var(--ink-soft);align-self:flex-end;margin-top:4px}
.wordmark .w2 small{font:500 9.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin-right:4px;vertical-align:middle}

.loading{display:grid;place-items:center;padding:clamp(40px,8vw,90px) 0;gap:14px}
.spin{width:26px;height:26px;border:2.5px solid var(--rule);border-top-color:var(--brand);
  border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}
.loading p{font-size:13.5px;color:var(--ink-faint);margin:0}

.errbox{border:1px solid var(--danger);border-radius:var(--radius-xl);
  padding:16px 18px;background:var(--panel);margin:0 0 18px}
.errbox b{display:block;font:600 14.5px var(--sans);color:var(--ink);margin-bottom:4px}
.errbox p{font-size:13.5px;color:var(--ink-soft);margin:0 0 10px}
.errbox button{border:1px solid var(--rule);background:var(--panel);border-radius:var(--radius-lg);
  padding:9px 16px;cursor:pointer;font:500 13.5px var(--sans);color:var(--ink)}

.routed{border:1px solid var(--saffron);border-radius:var(--radius-xl);
  padding:18px 20px;background:var(--saffron-wash);margin:0 0 18px}
.routed b{display:block;font:600 15px var(--sans);color:var(--ink);margin-bottom:6px}
.routed p{font-size:14px;color:var(--ink-soft);margin:0 0 8px;line-height:1.55}

.meta{font-size:12.5px;color:var(--ink-faint);margin:0 0 14px}
.badge-thin{display:inline-block;font:600 10px var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--saffron);background:var(--saffron-wash);
  border-radius:999px;padding:3px 8px;margin-left:7px}
button.asked{background:none;border:0;padding:0;font:inherit;color:var(--brand);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
button.asked:hover{color:var(--brand-deep)}
.fixline{font-size:13px;color:var(--ink-soft);margin:0 0 10px}
.fixline b{color:var(--ink)}
.absence{border:1px solid var(--rule);border-radius:var(--radius-xl);padding:18px 20px;
  background:var(--panel)}
.absence b{display:block;font:600 15px var(--sans);color:var(--ink);margin-bottom:7px}
.absence p{font-size:14px;color:var(--ink-soft);margin:0 0 9px;line-height:1.55}
.offline{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:60;
  background:var(--color-gray-500);color:#fff;border-radius:999px;padding:9px 18px;
  font:500 13px var(--sans);box-shadow:var(--lift)}

/* ---------- the answer, which is the only thing on this page that matters ---------- */
.answer{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius-2xl);
  overflow:hidden;margin:0 0 16px;box-shadow:var(--lift-sm);
  display:grid;grid-template-columns:1fr}
@media (min-width:860px){
  /* The picture keeps its own shape.
     It used to stretch to the height of the text beside it, which meant a 16 by 9 still was
     cropped to a tall slot and the title was cut in half: "ng Being", "W TO GET GRY?". Venkat
     saw it on 26 September 2026 and he was right. It sits at 16 by 9 at the top of its column
     now, with the panel behind it where the text runs longer. */
  /* The picture and the words are the same height.
     Three versions of this. It stretched first, which cropped the still and cut the title in
     half: "ng Being", "W TO GET GRY?". Then it kept 16 by 9 and sat at the top, which showed
     the whole still and left a band of empty panel under it wherever the passage ran long.
     Giri asked on 27 September 2026 for the two to match.

     So the box fills the height and the image is CONTAINED inside it: whole, centred, never
     cropped, with the channel's own black where the shapes differ. The block reads as one
     object instead of a picture with a hole beneath it. */
  .answer:has(.thumb){grid-template-columns:360px 1fr;align-items:stretch}
  .answer:has(.thumb) .thumb{aspect-ratio:auto;height:100%;min-height:100%;
    border-radius:var(--radius-2xl) 0 0 0;display:flex}
  .answer:has(.thumb) .thumb img{height:100%;width:100%;object-fit:contain}
  .answer:has(.thumb) .acite{grid-column:1/-1}
  .answer:has(.playing){grid-template-columns:360px 1fr;align-items:stretch}
  .answer .playing{height:100%;min-height:100%;aspect-ratio:auto}
}
/* Show the whole still, never a slice of it. `cover` fills the box by cropping, which is right
   for a decorative image and wrong for one with words on it. The letterbox is the channel's
   own black. */
.answer .thumb{position:relative;display:block;aspect-ratio:16/9;background:var(--color-gray-500);
  overflow:hidden}
/* contain, not cover. cover filled the box by cutting the still, and a YouTube still is mostly
   title card: "Mastering Being" came through as "ng Being". The whole frame, centred, on the
   channel's own dark ground where the shapes differ. Venkat, 26 September 2026. */
.answer .thumb img{width:100%;height:100%;object-fit:contain;display:block;opacity:.9}
.answer .thumb .play{position:absolute;inset:0;display:grid;place-items:center}
.answer .thumb .play svg{width:46px;height:46px;fill:#fff;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}
.answer .thumb .at{position:absolute;right:9px;bottom:9px;background:rgba(0,0,0,.76);color:#fff;
  font:600 11px var(--sans);padding:4px 9px;border-radius:var(--radius-sm)}
.answer .thumb:hover img{opacity:1}

/* Reading measure. A passage set across 1100 pixels is not read, it is skimmed and abandoned. */
/* The reading column.
 *
 * A passage is the only thing on this page somebody reads rather than scans, and most of the
 * traffic is phones. Two testers said so directly: Sunder, that descriptive information on a
 * small screen is a challenge, and Bhadresh, that the results were very large.
 *
 *   size    16px on a phone rising to 19px on a laptop. It was 15.5 to 17, which is a caption
 *           on a desktop, not a reading size.
 *   measure 68ch caps the line on a wide screen. On a phone the padding is the constraint and
 *           the line lands near 45 to 55 characters on its own.
 *   leading 1.68, looser than the 1.66 it was, because a narrow column needs more vertical
 *           separation for the eye to find the next line without re reading the last.
 *   padding 16px at the edge of a phone, opening to 28px where there is room. Narrow but
 *           protective: the text must never touch the physical edge.
 */
/* One height for every answer on the page.
 *
 * Read more used to appear only on passages over a thousand characters, so five answers came
 * back five different heights: a two line card, then a full screen, then a two line card. There
 * was nothing for the eye to travel along and no way to see how many answers there were without
 * scrolling through all of them. Giri asked on 27 September 2026 for one size across the
 * results, with Read more where there is more.
 *
 * 12em of passage is about six lines on a laptop and eight on a phone, which is enough to judge
 * whether an answer is the one you wanted. It is also close to the height of a 16 by 9 still at
 * the width of the media column, so the picture and the words come out level. Short passages
 * are padded out to it, long ones stop at it. */
.atext{padding:clamp(1rem,5vw,1.75rem);
  --passage-box:calc(12em + 2 * clamp(1rem,5vw,1.75rem));min-height:var(--passage-box)}
/* A card with no picture beside it is as tall as its words. Padding a one line passage to the
   height of the rest left "Do not fight with thoughts" about 70% blank (Bhadresh's review, 22
   October 2026; Giri agreed 23 October). A card with a still keeps the height, so the words and
   the picture stay level. */
.answer:not(:has(.thumb)):not(:has(.playing)) .atext{min-height:0}
.atext p{margin:0;font-size:clamp(1rem,0.95rem + 0.3vw,1.1875rem);line-height:1.68;
  color:var(--ink);max-width:68ch;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.atext mark{background:var(--saffron-wash);color:var(--ink);
  box-shadow:inset 0 -0.55em 0 var(--saffron-wash);padding:0 1px;
  border-bottom:2px solid var(--saffron)}

.acite{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
  padding:13px clamp(18px,2.4vw,24px);border-top:1px solid var(--rule-soft);
  background:var(--tint)}
.citemain{display:flex;flex-direction:column;gap:2px;margin-right:auto;min-width:0}
.citemain b{font:600 13.5px var(--sans);color:var(--ink)}
.citemain span{font-size:12.5px;color:var(--ink-faint)}
.sessionof{font-size:11.5px;color:var(--ink-faint)}
.playlink{font:600 13px var(--sans);color:var(--c,var(--brand));text-decoration:none;
  white-space:nowrap}
.playlink:hover{text-decoration:underline}
.unver{font-style:normal;font-size:11.5px;color:var(--saffron);flex-basis:100%}

/* Bars grow into place. The transition lives here rather than in the script so a reader who
   has asked for reduced motion is served by the media query, not by a branch. */
.tbtrack i{transition:width .85s cubic-bezier(.22,1,.36,1)}
.tstat b{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.tbtrack i{transition:none}}
.pane{animation:rise .34s cubic-bezier(.22,1,.36,1) both}
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pane{animation:none}}
.answer{animation:rise .38s cubic-bezier(.22,1,.36,1) both}
.answer:nth-child(2){animation-delay:.05s}
.answer:nth-child(3){animation-delay:.1s}
.answer:nth-child(4){animation-delay:.15s}
@media (prefers-reduced-motion:reduce){.answer{animation:none}}

/* ---------- the ask screen ---------- */
.greet{font:300 clamp(26px,4vw,40px)/1.1 var(--display);color:var(--ink);margin:0 0 8px;
  letter-spacing:var(--tracking-tight);text-wrap:balance}
.greetsub{font-size:clamp(14.5px,1.5vw,16px);color:var(--ink-soft);margin:0 0 clamp(20px,3vw,28px);
  max-width:58ch}
.lanehead{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.lanehead h2{font:300 clamp(22px,3vw,32px)/1.15 var(--display);color:var(--ink);margin:0;
  letter-spacing:var(--tracking-tight)}
.lanehead .ic{width:40px;height:40px;border-radius:var(--radius-lg);display:grid;
  place-items:center;background:color-mix(in srgb,var(--c) 12%,transparent);flex:none}
.lanehead .ic svg{width:21px;height:21px;stroke:var(--c);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.lane .blurb{font-size:13px;color:var(--ink-soft);line-height:1.45}
.lane .end{font-style:normal;font:600 10.5px var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--c);margin-top:auto;padding-top:8px}

/* ---------- the figures page ----------
   A page about a spiritual lineage should read as a quiet document, not a dashboard. So: large
   restrained type, generous air between blocks, one accent per block, and no chrome that is not
   carrying a number. */
.figures{max-width:none}
.fighero{padding:clamp(10px,2vw,22px) 0 clamp(26px,4vw,40px);
  border-bottom:1px solid var(--rule);margin-bottom:clamp(26px,4vw,40px)}
.figkick{font:600 11px var(--sans);letter-spacing:var(--tracking-widest);text-transform:uppercase;
  color:var(--brand);margin:0 0 14px}
.fighero h2{font:300 clamp(27px,4.4vw,50px)/1.18 var(--display);color:var(--ink);
  margin:0 0 14px;letter-spacing:var(--tracking-tight);max-width:20ch;text-wrap:balance}
.fighero h2 span{color:var(--brand);font-variant-numeric:tabular-nums}
.figsub{font-size:clamp(13.5px,1.4vw,15px);color:var(--ink-faint);margin:0;max-width:56ch}
.figblock{margin:0 0 clamp(32px,5vw,52px)}

/* The years. One column a year, stacked by whose words, growing from the baseline. */
.years{display:flex;align-items:flex-end;gap:clamp(2px,.5vw,5px);height:clamp(150px,20vw,220px);
  margin:0 0 12px;padding-bottom:22px;position:relative}
.years::after{content:"";position:absolute;left:0;right:0;bottom:22px;height:1px;
  background:var(--rule)}
.yr{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;height:100%;
  position:relative}
.yrstack{display:flex;flex-direction:column-reverse;width:100%;
  height:var(--grown,var(--h));border-radius:3px 3px 0 0;overflow:hidden;
  transition:height .7s cubic-bezier(.22,1,.36,1)}
.yrstack i{display:block;width:100%}
.yr em{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-style:normal;
  font:500 10.5px var(--sans);color:var(--ink-faint);white-space:nowrap}
.yr:hover .yrstack{filter:brightness(1.12)}
@media (prefers-reduced-motion:reduce){.yrstack{transition:none}}
@media (max-width:560px){
  .years{height:130px;gap:1.5px}
  .yr em{font-size:9.5px}
  /* Only every tenth year is labelled anyway, and at this width even those crowd. */
  .yr em{transform:translateX(-50%) rotate(-52deg);transform-origin:top center;bottom:-20px}
}

/* The timeline is stacked by whose words, which means nothing without saying which is which. */
.ykey{display:flex;flex-wrap:wrap;gap:8px 18px;margin:4px 0 12px}
.yk{display:inline-flex;align-items:center;gap:7px;font:500 12.5px var(--sans);
  color:var(--ink-soft)}
.yk i{width:10px;height:10px;border-radius:3px;flex:none}

/* On a narrow phone the wordmark and the tier pill were fighting for the same row, and the
   wordmark lost a few letters. The logo carries the identity on its own at that width. */
@media (max-width:430px){
  .wordmark{padding-left:13px}
  .topin{gap:10px;padding-left:14px;padding-right:14px}
  .tierbtn{padding:6px 12px;font-size:12.5px}
}

/* Steps three and seven: sit with it, then say whether it helped. */
/* The row of controls under an answer: Meditate, Did this help, Share.
   It wrapped onto three lines because it sat inside the TEXT column of the two column card and
   never spanned the whole of it, so there was about half the width available. */
.after{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  padding:12px clamp(18px,2.4vw,24px);border-top:1px solid var(--rule-soft);
  grid-column:1/-1}
.med{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--c,var(--brand));
  background:none;border-radius:999px;padding:8px 16px;cursor:pointer;
  font:600 13px var(--sans);color:var(--c,var(--brand))}
.med svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
.med:hover{background:color-mix(in srgb,var(--c,var(--brand)) 7%,transparent)}
/* The label and its two buttons are one thing and wrap as one thing. Letting them wrap
   internally put "Not quite" alone on a line under "Yes, thank you", which reads as a third,
   unrelated control rather than the second half of a pair. */
.helped{font-size:13px;color:var(--ink-faint);display:inline-flex;
  align-items:center;gap:8px;flex-wrap:nowrap;white-space:nowrap}
.hbtn{border:1px solid var(--rule);background:var(--panel);border-radius:999px;padding:6px 13px;
  cursor:pointer;font:500 12.5px var(--sans);color:var(--ink-soft)}
.hbtn:hover{border-color:var(--c,var(--brand));color:var(--c,var(--brand))}
/* The thumbs. An inline svg with a viewBox and no size collapses to nothing inside a button, so
   both votes rendered as empty circles; found on the candidate, 6 October 2026. */
.hbtn.vote{display:inline-grid;place-items:center;padding:7px 11px}
.hbtn.vote svg{width:16px;height:16px;fill:currentColor;display:block}
.helped.said{white-space:normal;flex-wrap:wrap;max-width:44ch;text-align:right}
/* Narrow enough that the pair cannot sit beside the meditate button: it takes its own row and
   keeps its own shape, rather than breaking in half. */
@media (max-width:620px){
  .after{gap:12px}
  .helped{margin-left:0;width:100%}
}

/* Sitting with a passage means the rest of the page should stop competing for the eye. */
.answer.meditating{box-shadow:0 0 0 2px var(--c,var(--brand)), var(--lift)}
.answer.meditating .atext{background:var(--tint);max-height:none}
.answer.meditating .atext p{font-size:clamp(17px,1.8vw,19.5px);line-height:1.8}
.answer.meditating .after .med{background:color-mix(in srgb,var(--c,var(--brand)) 9%,transparent)}
@media (prefers-reduced-motion:no-preference){
  .answer.meditating .atext{transition:background .4s ease}
  .answer.meditating .atext p{transition:font-size .4s ease,line-height .4s ease}
}

/* ---------- Dil Se, session by session ----------
 *
 * The block sits inside the figures pane but reads differently on purpose: everything above it
 * counts the corpus, and this counts the people who came to Him. It is given the saffron rail
 * rather than the brand blue for exactly that reason, so the change of subject is visible
 * before the heading is read.
 */
.dsblock{border-top:1px solid var(--rule);padding-top:clamp(26px,3.6vw,40px)}
.dsblock .sic{--c:var(--color-warning-400,#c77b18)}
.dslede{font-size:clamp(14px,1.45vw,15.5px);color:var(--ink-soft);max-width:62ch;
  margin:0 0 clamp(18px,2.4vw,26px);line-height:1.6}

.dstiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;
  margin:0 0 clamp(26px,3.4vw,36px)}
.dstile{border:1px solid var(--rule);border-radius:var(--radius-xl);background:var(--panel);
  padding:15px 16px 14px;display:grid;gap:2px;border-top:3px solid var(--saffron)}
.dsic{width:30px;height:30px;border-radius:var(--radius-md);display:grid;place-items:center;
  background:var(--saffron-wash);margin-bottom:7px}
.dsic svg{width:17px;height:17px;stroke:var(--color-warning-400,#c77b18);fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dstile b{font:300 clamp(28px,3.6vw,38px)/1 var(--display);color:var(--ink);
  font-variant-numeric:tabular-nums}
.dslab{font-size:13.5px;color:var(--ink);font-weight:600;margin-top:3px}
.dsnote{font-size:12px;color:var(--ink-faint);line-height:1.45}

/* A sub-heading inside a block. Smaller than the block's own heading and carrying its own icon,
   so the reader can tell a section from the section that contains it. */
.tsec.sub{margin:clamp(24px,3vw,34px) 0 13px}
.tsec.sub h4{font:400 clamp(16px,1.9vw,19px)/1.25 var(--display);color:var(--ink);margin:0 0 2px;
  letter-spacing:var(--tracking-tight)}
.tsec.sub .sic{width:29px;height:29px}
.tsec.sub .sic svg{width:15px;height:15px}

.dsgroups{display:grid;gap:9px;margin:0 0 6px}
.dsg{border:1px solid var(--rule);border-radius:var(--radius-xl);background:var(--panel);
  overflow:hidden}
.dsg[open]{border-color:color-mix(in srgb,var(--saffron) 60%,var(--rule))}
.dsg summary{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:14px 16px;
  cursor:pointer;list-style:none;align-items:start}
.dsg summary::-webkit-details-marker{display:none}
.dsg summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.dsn{grid-row:span 2;font:300 26px/1 var(--display);color:var(--ink);
  font-variant-numeric:tabular-nums;background:var(--saffron-wash);border-radius:var(--radius-lg);
  min-width:52px;padding:11px 6px;text-align:center;align-self:center}
.dsn i{font-style:normal;font-size:15px;color:var(--ink-faint);margin-left:1px}
.dsq{font-size:14.5px;color:var(--ink);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dsg[open] .dsq{-webkit-line-clamp:unset;overflow:visible}
.dsmeta{font-size:12px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.dsasked{list-style:none;margin:0;padding:0 16px 14px;display:grid;gap:10px;
  border-top:1px solid var(--rule);padding-top:13px}
.dsasked li{display:grid;grid-template-columns:78px 1fr auto;gap:12px;align-items:start}
.dsdate{font-size:12px;color:var(--ink-faint);font-variant-numeric:tabular-nums;padding-top:2px}
.dsasked q{font-size:13.5px;color:var(--ink-soft);line-height:1.55;quotes:'\201C' '\201D'}
.dsplay{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--brand);
  text-decoration:none;border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:5px 10px;white-space:nowrap}
.dsplay:hover{background:var(--wash);border-color:var(--brand)}
.dsplay svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

.dsmethod{margin:0 0 16px;padding-left:20px;display:grid;gap:9px;max-width:68ch}
.dsmethod li{font-size:13.5px;color:var(--ink-soft);line-height:1.6}
.dsmethod li::marker{color:var(--saffron)}
.dsmethod b{color:var(--ink);font-weight:600}

@media (max-width:560px){
  .dsasked li{grid-template-columns:1fr;gap:5px}
  .dsplay{justify-self:start}
  .dsg summary{grid-template-columns:auto 1fr;padding:12px 13px}
  .dsn{min-width:44px;font-size:22px;padding:9px 5px}
}

/* ---------- asking in another language ----------
 *
 * The English passage is the record and stays where it is. The translation opens underneath it
 * carrying its own mark, because a translated passage that has lost its label is a sentence
 * attributed to somebody who never said it.
 */
.langbar,.widebar{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--rule);
  border-left:3px solid var(--brand);border-radius:var(--radius-lg);background:var(--wash);
  padding:12px 14px;margin:0 0 14px}
.widebar{border-left-color:var(--saffron);background:var(--saffron-wash)}
.langbar svg,.widebar svg{width:18px;height:18px;flex:none;margin-top:2px;stroke:var(--brand);
  fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.widebar svg{stroke:var(--color-warning-400,#c77b18)}
.langbar b,.widebar b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:2px}
.langbar span,.widebar span{font-size:12.5px;color:var(--ink-soft);line-height:1.5}

/* The translation shares the passage's box: the control and the mark at the top, the words
   where the English was, same type, same highlight. */
.trow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px}
.tbtn{display:inline-flex;align-items:center;gap:7px;background:var(--panel);
  border:1px solid var(--rule);
  border-radius:var(--radius-lg);padding:6px 11px;font:inherit;font-size:12.5px;
  color:var(--brand);cursor:pointer}
.tbtn:hover{background:var(--wash);border-color:var(--brand)}
.tbtn[disabled]{opacity:.55;cursor:default}
.tbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.atext p.ttext{white-space:pre-line}
.tmark,.atext p.tmark{display:flex;align-items:center;gap:6px;font-size:11.5px;line-height:1.4;
  color:var(--ink-faint);margin:0;flex:1 1 220px}
.tmark[hidden]{display:none}
.tmark svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6}
.tload{font-size:12.5px;color:var(--ink-faint);margin:0}
.searched{font-size:12.5px;color:var(--ink-faint);margin:8px 0 0}

/* ---------- what others asked, verbatim ----------
 *
 * These are transcript lines, so some of them ramble. They are clamped to two lines rather than
 * shortened, because shortening somebody's question is writing it for them.
 */
.askedin{margin:clamp(30px,4vw,44px) 0 0;border-top:1px solid var(--rule);
  padding-top:clamp(22px,3vw,32px)}
.askedin .sic{--c:var(--color-warning-400,#c77b18)}
.alist{display:grid;gap:8px}
.arow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.aq{text-align:left;background:var(--panel);border:1px solid var(--rule);
  border-radius:var(--radius-lg);padding:11px 14px;font:inherit;font-size:13.5px;
  color:var(--ink);line-height:1.5;cursor:pointer;min-width:0}
.aq span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.aq:hover{border-color:var(--brand);background:var(--wash)}
.amore{margin-top:12px;background:none;border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:8px 14px;font:inherit;font-size:12.5px;color:var(--brand);cursor:pointer}
.amore:hover{background:var(--wash);border-color:var(--brand)}
@media (max-width:560px){
  .arow{grid-template-columns:1fr}
  .arow .dsplay{justify-self:start}
}

/* Lanes, topics and question tiles are links now, not buttons, so they need the two things a
   button gave them for free. Everything else about them is unchanged. */
.lane,.ltop,.qpick a{text-decoration:none}
.lane,.qpick a{color:var(--ink)}
.ltop{color:var(--ink);display:flex;flex-direction:column}

/* ---------- the trail ----------
 *
 * Replaces a single "Start again" button. Every crumb but the last is a link to a URL that
 * exists, so going up one step keeps the steps above it, which one button could not do.
 */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:2px 4px;margin:0 0 16px;
  font-size:12.5px;line-height:1.5}
.crumb-up{color:var(--brand);text-decoration:none;padding:3px 5px;border-radius:var(--radius-sm)}
.crumb-up:hover{background:var(--wash);text-decoration:underline}
.crumb-sep{display:inline-flex;color:var(--ink-faint)}
.crumb-sep svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.crumb-now{color:var(--ink-faint);padding:3px 5px;max-width:52ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ---------- everything, watch, read: one segmented control ---------- */
.medbar{display:inline-flex;gap:2px;margin:0 0 16px;padding:3px;background:var(--panel);
  border:1px solid var(--rule);border-radius:999px;max-width:100%}
.medbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:none;
  border:1px solid transparent;border-radius:999px;padding:8px 18px;cursor:pointer;
  font:500 13.5px var(--sans);color:var(--ink-soft);min-height:38px}
.medbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.medbtn:hover{border-color:var(--brand);color:var(--brand)}
.medbtn[aria-pressed="true"]{border-color:var(--brand);color:var(--on-brand);
  background:var(--brand);font-weight:600}
.medbtn[aria-pressed="true"]:hover{color:var(--on-brand)}
@media (max-width:560px){.medbar{display:flex}.medbtn{flex:1;padding:8px 10px}}
.mednote{font-size:12px;color:var(--ink-faint);margin:0 0 14px;max-width:70ch;line-height:1.5}

/* A sub topic box: its icon, its name, its count. `.all` is the way back to the whole lane and
   is marked so it does not read as one more sibling topic. */
.ltop .lti{display:inline-flex;align-items:center;margin-right:8px;vertical-align:-4px}
.ltop .lti svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.ltop.all{border-color:var(--saffron)}
.ltop.all[aria-pressed="false"]{background:var(--saffron-wash)}

/* Reach out, as one list rather than five boxes. Five doorways into one form read as five
   different flows, and on a phone they pushed the form off the screen. */
/* As wide as its longest reason, not the page (Nirban, 23 October 2026). */
.rpick select{display:block;width:auto;max-width:100%;margin-top:6px;padding:12px 14px;font:inherit;color:var(--ink);
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius-md);
  appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),
  linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:44px}
.rpick select:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.rpick .rhint{display:block;margin-top:8px;color:var(--ink-faint);font-size:13px;font-style:normal}

/* The welcome video. A still until it is clicked, so the page makes no request to another
   company before a seeker has asked for anything. */
.reel{position:relative;display:block;padding:0;border:0;cursor:pointer;overflow:hidden;
  border-radius:var(--radius-lg);background:var(--color-gray-500);aspect-ratio:16/9;width:100%}
.reel img{width:100%;height:100%;object-fit:cover;display:block;opacity:.86;
  transition:opacity .2s}
.reel:hover img{opacity:1}
.reel .ply{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.94);display:grid;place-items:center}
.reel .ply svg{width:26px;height:26px;fill:var(--color-gray-500);margin-left:3px}
.reel .slate{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;color:#fff;
  font:600 13px var(--sans);text-align:left;
  background:linear-gradient(transparent,rgba(0,0,0,.72))}
.reel:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.reelframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius-lg);display:block}

/* Ask yourself. A question He left, and nothing under it. */
.epig{margin:22px 0 4px;padding:22px 24px;background:var(--wash);border-radius:var(--radius-lg)}
.epig blockquote{font:500 clamp(18px,2.4vw,24px)/1.35 var(--display);color:var(--brand-deep);
  letter-spacing:var(--tracking-tight);max-width:24ch}
.epig figcaption{margin-top:12px;font-size:12.5px;color:var(--ink-faint)}
.carou.refl{margin-top:22px}
ol.asked{list-style:none;margin:14px 0 0;padding:0}
ol.asked li{padding:16px 0;border-bottom:1px solid var(--rule)}
ol.asked li:last-child{border-bottom:0}
ol.asked b{display:block;font-weight:600;font-size:16.5px;line-height:1.45;color:var(--ink);
  max-width:60ch}
ol.asked span{display:block;margin-top:6px;font-size:12.5px;color:var(--ink-faint)}

/* The Masters. Four lives, and what the corpus holds of each. */
.mtabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:20px 0 0}
.mtab{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius-md);
  padding:12px 10px;cursor:pointer;text-align:center;font:inherit;color:var(--ink-faint)}
.mtab b{display:block;font-weight:600;font-size:15px;color:var(--ink)}
.mtab span{display:block;font-size:11.5px;margin-top:3px}
.mtab[aria-selected="true"]{border-color:var(--brand);background:var(--wash)}
.mtab[aria-selected="true"] b{color:var(--brand-deep)}
.mhead{margin-top:22px}
.mhead h3{font:600 19px var(--display);letter-spacing:var(--tracking-tight)}
.mnums{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:14px}
.mnums div{background:var(--wash);border-radius:var(--radius-md);padding:14px 14px}
.mnums b{display:block;font:700 22px var(--sans);color:var(--brand);
  font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-tight)}
.mnums span{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:6px}
.mquote{margin-top:22px;padding:24px;background:var(--panel);border-radius:var(--radius-lg);
  box-shadow:var(--lift-sm)}
.mquote blockquote{font:500 clamp(17px,2.2vw,22px)/1.4 var(--display);color:var(--ink);
  letter-spacing:var(--tracking-tight);max-width:40ch}
.mquote figcaption{margin-top:12px;font-size:12.5px;color:var(--ink-faint)}
.mlife{margin-top:24px}
.mlife h4{font-size:12px;font-weight:600;letter-spacing:var(--tracking-widest);
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px}
.mlife p{padding:12px 0;border-bottom:1px solid var(--rule);font-size:15px;color:var(--ink-soft)}
.mlife p:last-child{border-bottom:0}
.mlife em{display:block;font-style:normal;font-size:12px;color:var(--ink-faint);margin-top:6px}

/* Ask yourself: what a question is for, in His words, and the themes. */
.about{margin:22px 0 0;padding:22px 24px;background:var(--panel);border-radius:var(--radius-lg);
  box-shadow:var(--lift-sm)}
.about h4{font-size:12px;font-weight:600;letter-spacing:var(--tracking-widest);
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px}
.about .apass{font-size:16px;line-height:1.6;color:var(--ink);max-width:62ch}
.about .asrc{margin-top:10px;font-size:12.5px;color:var(--ink-faint)}
.about .anote{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule);
  font-size:13.5px;color:var(--ink-soft);max-width:62ch}
.pthemes{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 4px}
.pth{display:inline-flex;align-items:center;gap:7px;background:var(--panel);
  border:1px solid var(--rule);border-radius:999px;padding:7px 14px;cursor:pointer;
  font:500 13.5px var(--sans);color:var(--ink-soft)}
.pth span{font-size:11.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.pth[aria-pressed="true"]{border-color:var(--brand);background:var(--wash);color:var(--brand-deep)}
.pth[aria-pressed="true"] span{color:var(--brand)}
.pth.clear{border-style:dashed}
.mcaveat{margin-top:18px;padding:14px 16px;background:var(--saffron-wash);color:var(--saffron-ink);
  border-radius:var(--radius-md);font-size:13.5px;max-width:70ch}

/* Ask yourself: sit with the question, then read what He said. */
.revbtn{display:inline-flex;align-items:center;gap:8px;margin-top:10px;background:none;
  border:1px dashed var(--rule);border-radius:999px;padding:7px 15px;cursor:pointer;
  font:500 13px var(--sans);color:var(--ink-faint)}
.revbtn:hover{border-color:var(--brand);color:var(--brand)}
.revbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.reveal{margin-top:12px;padding:16px 18px;background:var(--wash);border-radius:var(--radius-md)}
.reveal .rtext{font-size:15px;line-height:1.62;color:var(--ink);max-width:62ch}
.reveal .rwho{margin-top:10px;font-size:12px;color:var(--ink-faint)}

/* Sub topics inside a theme. */
.subs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 20px}
.sub{display:inline-flex;align-items:center;gap:7px;background:var(--panel);
  border:1px solid var(--rule);border-radius:999px;padding:7px 14px;cursor:pointer;
  font:500 13.5px var(--sans);color:var(--ink-soft)}
.sub span{font-size:11.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.sub[aria-pressed="true"]{border-color:var(--c,var(--brand));background:var(--wash);
  color:var(--ink)}

/* Add a source: progress, the sample, and the gate. */
.asteps{margin:22px 0 0;display:grid;gap:2px}
.astep{display:flex;align-items:center;gap:11px;padding:9px 0;font-size:14px;
  color:var(--ink-faint)}
.astep .adot{width:9px;height:9px;border-radius:50%;background:var(--rule);flex:none}
.astep.now{color:var(--ink);font-weight:500}
.astep.now .adot{background:var(--brand);animation:apulse 1.4s ease-in-out infinite}
.astep.done .adot{background:var(--brand);opacity:.4}
@keyframes apulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.astep.now .adot{animation:none}}
ol.asample{list-style:none;margin:10px 0 0;padding:0}
ol.asample li{padding:11px 0;border-bottom:1px solid var(--rule2);font-size:15.5px;
  font-weight:500;color:var(--ink)}
ol.asample li:last-child{border-bottom:0}
ol.asample li::before{content:"“";color:var(--ink-faint);margin-right:4px}
ol.asample li::after{content:"”";color:var(--ink-faint);margin-left:2px}
.acheck{display:flex;align-items:flex-start;gap:10px;margin:16px 0;font-size:14px;
  color:var(--ink-soft);cursor:pointer;max-width:56ch}
.acheck input{margin-top:3px;flex:none}

/* What has been read: one row per kind of source, with its own unit. */
.srcgrid{display:grid;gap:2px;margin-top:14px}
.srcrow{display:grid;grid-template-columns:34px 1fr 90px;gap:12px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--rule2)}
.srcrow:last-child{border-bottom:0}
.srci{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--wash)}
.srci svg{width:15px;height:15px;stroke:var(--brand);fill:none;stroke-width:1.6}
.srcmain{min-width:0}
.srcmain b{display:block;font-size:14.5px;font-weight:600}
.srcn{display:block;font-size:12px;color:var(--ink-faint);margin-top:2px;
  font-variant-numeric:tabular-nums}
.srcnote{display:block;font-style:normal;font-size:12px;color:var(--ink-faint);margin-top:5px;
  max-width:62ch;line-height:1.45}
.srcbar{display:block;height:8px;border-radius:2px;background:var(--rule2);overflow:hidden}
.srcbar i{display:block;height:100%;background:var(--brand);border-radius:2px}
@media (max-width:640px){.srcrow{grid-template-columns:30px 1fr}.srcbar{display:none}}

/* The Masters. No counts here: counting is What He speaks of. What this page carries is the
   years, the words, and where a life came from. */
.myrs{margin-top:4px;font-size:13px;color:var(--ink-faint)}
.mlsrc{padding:0 0 10px!important;border-bottom:0!important;font-size:12px!important;
  color:var(--ink-faint)!important;letter-spacing:.01em}
.mlnone{padding:12px 0;font-size:14px;color:var(--ink-soft);line-height:1.6}
.mlink{margin-top:12px;font-size:12.5px;color:var(--ink-faint)}
.mlink a{color:var(--brand)}

/* Stories. One card per story, the passage as recorded. Wide measure, because a story read in a
   narrow column reads as a quotation, and these are meant to be read as stories. */
.stories{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));
  gap:16px;margin-top:20px;align-items:start}
.story{background:var(--panel,#fff);border:1px solid var(--rule);border-radius:var(--radius-md);
  padding:22px 24px 18px;box-shadow:var(--lift-sm);display:flex;flex-direction:column}
.skick{margin:0 0 8px;font:600 11.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.skick span{color:var(--c,var(--brand));background:var(--tint,transparent);
  border:1px solid var(--rule);border-radius:999px;padding:2px 9px;letter-spacing:.02em;
  text-transform:none;font-weight:600}
.story h4{font-family:var(--display);font-weight:400;font-size:clamp(19px,2vw,22px);
  letter-spacing:-.01em;line-height:1.25;margin:0 0 12px;color:var(--ink)}
/* The fold the answer cards use, so a story opens the same way a passage does. */
.story .atext.stext{padding:0;min-height:0;--passage-box:12.5em}
.story .stext p{font-size:15.5px;line-height:1.72;color:var(--ink);max-width:68ch;margin:0}
.story .stext p+p{margin-top:.85em}
.story .readmore{width:100%;margin:12px 0 0}
.story footer{margin-top:14px;padding:12px 0 0;border-top:1px solid var(--rule-soft);
  font-size:12.5px;color:var(--ink-faint);display:flex;flex-wrap:wrap;gap:4px 14px;line-height:1.5}
.story footer .ssrc{color:var(--ink-soft);font-weight:500;flex-basis:100%}
.story footer a{color:var(--brand)}

.smark{font-size:11.5px!important;color:var(--ink-faint)!important;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}

/* His life, filmed. Links out, never embedded: an embed loads a player from a host the page
   cannot reach anyway, and the film costs nothing to watch where it already lives. */
.mfilms{margin-top:26px}
.mfilms h4{font-size:12px;font-weight:600;letter-spacing:var(--tracking-widest);
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.filmrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:14px;margin-top:14px}
.film{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;
  border:1px solid var(--rule);border-radius:var(--radius-md);overflow:hidden;
  padding-bottom:12px;background:var(--panel,#fff)}
.film img{width:100%;height:auto;display:block;background:var(--wash);aspect-ratio:16/9;
  object-fit:cover}
.film b{font-size:14px;font-weight:600;line-height:1.35;padding:0 12px}
.film em{font-style:normal;font-size:12px;color:var(--ink-faint);padding:0 12px}
.film:hover{border-color:var(--brand)}
.film:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.mquote figcaption .qsrc{display:block;margin-top:4px;font-size:11.5px;color:var(--ink-faint)}

/* How it is built. A page rather than a PDF, because a PDF is wrong the day after it is made. */
.bignums{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;
  margin:20px 0 6px}
.bignums div{background:var(--wash);border-radius:var(--radius-md);padding:16px}
.bignums b{display:block;font:700 24px var(--sans);color:var(--brand);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bignums span{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:6px}
.bh{margin-top:30px;font-size:12px;font-weight:600;letter-spacing:var(--tracking-widest);
  text-transform:uppercase;color:var(--ink-faint)}
.steps{margin-top:12px;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:28px 1fr;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--rule)}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(s);font:700 12px var(--sans);color:var(--brand);
  background:var(--wash);border-radius:50%;width:24px;height:24px;display:grid;
  place-items:center;grid-row:span 2}
.steps li b{font-size:15px;font-weight:600}
.steps li span{font-size:13.5px;color:var(--ink-soft);line-height:1.6;grid-column:2}
.brule{margin-top:14px;padding:14px 16px;background:var(--saffron-wash);color:var(--saffron-ink);
  border-radius:var(--radius-md);font-size:13.5px;line-height:1.6}
.costs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;
  margin-top:14px}
.cost{border:1px solid var(--rule);border-radius:var(--radius-md);padding:16px 18px}
.cost h4{font-size:14px;font-weight:700;margin-bottom:4px}
.cnote{font-size:12px;color:var(--ink-faint);margin-bottom:10px;line-height:1.5}
.cost table,.stack{width:100%;border-collapse:collapse;font-size:13px}
.cost td,.stack td{padding:8px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.cost tr:last-child td,.stack tr:last-child td{border-bottom:0}
.cost td.u{color:var(--ink-faint);font-size:11.5px;text-align:right;white-space:nowrap;
  padding-left:8px}
.cost td.n{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap;padding-left:10px}
.cost tr.waste td{color:var(--saffron-ink)}
.cost tr.waste em{display:block;font-style:normal;font-size:11.5px;margin-top:3px}
.stack{margin-top:12px}
.stack td:first-child{color:var(--ink-faint);width:42%}
.mistake{margin-top:20px;border:1px solid var(--rule);border-left:3px solid var(--saffron);
  border-radius:var(--radius-md);padding:18px 20px}
.mistake h4{font-size:14px;font-weight:700;margin-bottom:8px}
.mistake p{font-size:13.5px;line-height:1.65;color:var(--ink-soft);max-width:70ch}

/* The heading on a card box. A box of 153 stories arrived with no title on the page, only the
   name of the tile that was pressed to reach it. */
.cardhead{margin:22px 0 4px}
.cardhead h3{font-size:19px;font-weight:700;letter-spacing:-.015em;
  display:flex;align-items:baseline;gap:10px}
.cardhead h3 em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--brand);
  background:var(--wash);border-radius:999px;padding:3px 10px;font-variant-numeric:tabular-nums}
.cardhead p{margin-top:8px;font-size:13.5px;color:var(--ink-soft);line-height:1.6;max-width:68ch}
.cardhead .cardholds{margin-top:6px;font-size:11.5px;color:var(--ink-faint);
  letter-spacing:.06em;text-transform:uppercase}

/* The question everybody asks, answered before the detail. */
.mistake.asked{border-left-color:var(--brand)}
.mistake.asked .bigans{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:10px}
.mistake.asked p+p{margin-top:10px}
/* What changed. Not numbered as a process, because it was not one. */
.steps.did{counter-reset:none}
.steps.did li::before{content:"";background:var(--brand);width:7px;height:7px;
  border-radius:50%;margin-top:7px;place-self:start center}

.story footer .alsoin{display:block;flex-basis:100%;margin-top:2px;line-height:1.5}
.story footer .alsoin a{color:var(--brand)}

/* Opening a passage out, in place. A fragment can be true and still leave a reader unsure what
   was being discussed, so the section opens here rather than sending them away. */
.sheetback{position:fixed;inset:0;background:rgba(12,16,22,.55);z-index:50;
  display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow:auto}
.sheet{background:var(--panel,#fff);border-radius:var(--radius-md);max-width:760px;width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.28);position:relative;margin:auto}
.sheetx{position:absolute;top:10px;right:12px;appearance:none;border:0;background:transparent;
  font:400 26px/1 var(--sans);color:var(--ink-faint);cursor:pointer;padding:6px 10px;
  border-radius:8px}
.sheetx:hover{background:var(--wash);color:var(--ink)}
.sheetbody{padding:26px 28px 24px}
.sheetbody h3{font-size:18px;font-weight:700;letter-spacing:-.015em;padding-right:36px}
.sheetwho{margin-top:5px;font-size:12px;color:var(--ink-faint)}
.sheetvid{margin-top:16px;aspect-ratio:16/9;background:#000;border-radius:var(--radius-md);
  overflow:hidden}
.sheetvid iframe{width:100%;height:100%;border:0;display:block}
.sheetpos{margin-top:16px;font-size:11.5px;color:var(--ink-faint);line-height:1.5}
.sheettext{margin-top:14px;max-height:46vh;overflow:auto;padding-right:6px}
.sheettext p{font-size:15px;line-height:1.7;color:var(--ink-soft);padding:10px 0;
  border-bottom:1px solid var(--rule)}
.sheettext p:last-child{border-bottom:0}
.sheettext p.was{color:var(--ink);background:var(--saffron-wash);border-radius:6px;
  padding:12px 14px;border-bottom:0;margin:6px 0}
.sheettext p a{color:var(--brand);font-size:12px;text-decoration:none;white-space:nowrap}
.sheetfoot{margin-top:16px;font-size:12.5px}
.sheetfoot a{color:var(--brand)}
.playlink.open{appearance:none;border:1px solid var(--brand);background:transparent;
  color:var(--brand);cursor:pointer;font:600 12.5px var(--sans);padding:6px 12px;
  border-radius:999px}
.playlink.open:hover{background:var(--brand);color:var(--on-brand)}
.playlink.quiet{color:var(--ink-faint)}
@media (max-width:560px){.sheetbody{padding:20px 18px}.sheettext{max-height:40vh}}

/* A preceptor asking how to help somebody in difficulty gets the teaching, and this above it.
   The answer is useful. It is not the whole of what that abhyasi needs. */
.alsoperson{margin:0 0 16px;padding:16px 18px;background:var(--saffron-wash);
  border-radius:var(--radius-md);border-left:3px solid var(--saffron)}
.alsoperson b{display:block;font-size:14.5px;font-weight:700;color:var(--saffron-ink)}
.alsoperson p{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--saffron-ink)}

.absence .absnext{margin-top:8px;font-size:13.5px;color:var(--ink-soft);line-height:1.6}

/* ============================================================================
   The redesign of 26 September 2026.

   Everything below answers something a tester said or something the logs showed. Every colour
   is a token already defined at the top of this file, read from storybook.heartfulness.org;
   nothing here introduces a value of its own, so a change to the design system still reaches
   this page in one edit. Hierarchy comes from weight and space, because Public Sans is the
   only face the system has.
   ============================================================================ */

/* ---- the bare home, for a Seeker -----------------------------------------
   Nothing between a person and their first question. 57 of the first 70 visitors opened the
   page and never typed anything, and four testers said there was too much on it. The pane is
   narrower than the rest of the app on purpose: one column, one action. */
.pane.bare{max-width:620px;margin-inline:auto}
.pane.bare .greet{margin-top:26px}
.popular{display:grid;gap:8px;margin-top:10px}
@media (min-width:760px){.popular{grid-template-columns:1fr 1fr}}
.popular .pq{text-align:left;font:400 14px var(--sans);color:var(--ink-soft);cursor:pointer;
  background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:11px 13px;
  transition:border-color .14s ease,color .14s ease}
.popular .pq:hover{border-color:var(--brand);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.popular .pq{transition:none}}

/* Where this reads best. Not an apology, a warning: the passages are long. */
.laptop{margin-top:26px;font-size:12.5px;color:var(--ink-faint);text-align:center}

/* ---- the question mark on a lane tile -------------------------------------
   The blurb is three sentences and it used to sit in the tile, so five tiles were five
   paragraphs before a reader reached a question. The mark is a sibling of the link, never a
   child, because a button inside an anchor is invalid and would navigate on tap. */
.lanewrap{position:relative;display:flex;flex-direction:column}
.lanewrap .lane{flex:1}
.qm{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--rule);background:var(--panel);color:var(--ink-faint);cursor:pointer;
  font:700 12px var(--sans);line-height:1;display:grid;place-items:center;padding:0;
  transition:border-color .14s ease,color .14s ease}
.qm:hover,.qm[aria-expanded="true"]{border-color:var(--c,var(--brand));color:var(--c,var(--brand))}
@media (prefers-reduced-motion:reduce){.qm{transition:none}}
.tip{margin:8px 0 0;padding:11px 13px;background:var(--wash);border:1px solid var(--rule);
  border-left:3px solid var(--c,var(--brand));border-radius:0 10px 10px 0;
  font-size:13px;line-height:1.5;color:var(--ink-soft)}

/* ---- the clamp ------------------------------------------------------------
   "pranayama" put 12,253 characters on one screen across four cards, the first of them 1,156
   words. The clamp is on the wrapper, not on the string: the whole passage is in the markup,
   so selecting it still gets everything and opening it costs no round trip. The corpus median
   passage is 782 characters, so about 70 percent of answers never reach this at all. */
.atext.clamped{position:relative;max-height:var(--passage-box);overflow:hidden}
/* 3em of fade, not 5. Every card folds now, so a fade that washed out the last five lines
   of a twelve line box was covering nearly half of what a reader came to read. Enough to say
   the passage continues, not enough to take the text with it. */
.atext.clamped::after{content:"";position:absolute;inset:auto 0 0 0;height:3em;
  background:linear-gradient(to bottom,transparent,var(--panel))}
.readmore{display:block;width:calc(100% - 2 * clamp(18px,2.4vw,24px));
  margin:0 clamp(18px,2.4vw,24px) clamp(14px,2vw,18px);padding:9px 12px;cursor:pointer;
  background:none;border:1px solid var(--rule);border-radius:9px;
  font:600 13.5px var(--sans);color:var(--brand)}
.readmore:hover{border-color:var(--brand)}

/* ---- Read the whole section ----------------------------------------------
   The button existed on every answer since the webapp was built and threw a ReferenceError,
   because openSection was called and never defined. Victor and Venkat both found it. */
.section{border-top:1px solid var(--rule-soft);padding:clamp(16px,2.2vw,22px);
  background:var(--tint)}
.sechd{margin:0 0 12px;font:600 12.5px var(--sans);letter-spacing:.04em;color:var(--ink-faint);
  text-transform:uppercase}
.secp{margin:0 0 1.4em;font-size:clamp(0.975rem,0.93rem + 0.28vw,1.15rem);line-height:1.68;
  color:var(--ink-soft);max-width:68ch;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.secp em{font-style:normal;font-size:12px;color:var(--ink-faint);margin-right:7px;
  font-variant-numeric:tabular-nums}
.secp.here{color:var(--ink);border-left:3px solid var(--saffron);padding-left:13px}
.secnote{margin:14px 0 0;font-size:12px;color:var(--ink-faint);line-height:1.5}

/* ---- ten at a time --------------------------------------------------------
   laneView mapped every question with no slice, so the Practice lane rendered 734 links in one
   DOM list. On a phone that is not a list, it is a wall. */
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;
  flex-wrap:wrap}
.pbtn{cursor:pointer;background:var(--panel);border:1px solid var(--rule);border-radius:10px;
  padding:10px 22px;font:600 13.5px var(--sans);color:var(--brand)}
.pbtn:hover{border-color:var(--brand)}
.pcount{font-size:12.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums}

/* ---- three grades ---------------------------------------------------------
   Across 63 real questions we received one judgement of answer quality, and it was "Not
   quite". A yes or no says a card missed but not whether it was close, and close is the only
   distinction that can be acted on. */

/* ---- the flow buttons -----------------------------------------------------
   Four now, not two, and drawn from config. They wrap on a phone rather than shrinking the
   labels to nothing. */
.tiers{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:620px){
  .tierbtn{padding:5px 11px;font-size:12.5px}
}

/* The tab bar is hidden outright for a Seeker, who is given no tabs. Hidden rather than empty,
   so it takes no height and the question box is the first thing on the page. */
.tabbar[hidden]{display:none}

/* ---- Past Dil Se recordings ------------------------------------------------
   The evenings, newest first. This tab used to render the figures panel from What He speaks of,
   so a reader met the same counts twice and every tile on it showed zero, because the numbers
   are filled by animateFigures and that only runs on the figures route. Giri found both on
   26 September 2026. What is here now is the thing the tab was for. */
.dsrange{margin:0 0 20px;font-size:12.5px;color:var(--ink-faint);
  font-variant-numeric:tabular-nums}
.sessions{display:flex;flex-direction:column;gap:8px}
.sess{background:var(--panel);border:1px solid var(--rule);border-radius:12px;
  box-shadow:var(--lift-sm);overflow:hidden}
.sess summary{display:flex;align-items:baseline;gap:12px;padding:14px 16px;cursor:pointer;
  list-style:none;font:600 15px var(--sans)}
.sess summary::-webkit-details-marker{display:none}
.sess summary::before{content:"";width:0;height:0;flex:0 0 auto;align-self:center;
  border:5px solid transparent;border-left-color:var(--ink-faint);
  transition:transform .14s ease;transform-origin:3px 50%}
.sess[open] summary::before{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.sess summary::before{transition:none}}
.sessdate{font-variant-numeric:tabular-nums;color:var(--ink)}
.sessn{margin-left:auto;font:500 12.5px var(--sans);color:var(--ink-faint)}
.sessq{margin:0;padding:0 16px 14px;list-style:none;display:flex;flex-direction:column;gap:14px}
.sessq li{border-top:1px solid var(--rule-soft);padding-top:13px}
.sessq q{display:block;font-size:14.5px;line-height:1.6;color:var(--ink-soft);quotes:none;
  max-width:66ch}
.sessbefore{margin:8px 0 0;max-width:66ch;font-size:13px;line-height:1.55;color:var(--ink-faint);
  overflow-wrap:anywhere}
.sessbefore b{font-weight:600;color:var(--ink-soft)}
.sessbefore a{color:var(--brand)}
.sessbefore span{display:inline-block;margin-left:4px}
.sessacts{display:flex;align-items:center;gap:10px;margin-top:9px;flex-wrap:wrap}
.sessask{cursor:pointer;background:none;border:1px solid var(--rule);border-radius:999px;
  padding:6px 14px;font:600 12.5px var(--sans);color:var(--brand)}
.sessask:hover{border-color:var(--brand)}

/* ---- the recording plays in the page -------------------------------------
   The thumbnail was an anchor with target="_blank", so the most tappable thing on a card sent
   the reader to YouTube mid answer. It is a button now and the iframe replaces it in place, so
   the passage, the source and the feedback controls stay on screen beside the video. A button
   carries agent styling, hence the reset. */
.answer button.thumb{border:0;padding:0;margin:0;background:var(--color-gray-500);
  font:inherit;color:inherit;cursor:pointer;width:100%;text-align:left;display:block;
  appearance:none}
.answer button.thumb:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.playing{width:100%;aspect-ratio:16/9;border:0;display:block;background:var(--color-gray-500)}
@media (min-width:860px){
  /* Inside the two column card the video holds the thumbnail's column rather than spanning. */
  .answer:has(.playing){grid-template-columns:300px 1fr}
  .answer .playing{height:100%;min-height:172px;aspect-ratio:auto}
}

/* ============================================================================
   One navigation row, after the mockup.
   It was a header with the brand and the reader on one line, and a separate tab strip below
   it. The mockup read better as a single line, the way a product does rather than a document
   with a table of contents. Giri, 26 September 2026: "tabs are more professional".
   ============================================================================ */
.topin{flex-wrap:wrap;row-gap:0}
.brand{margin-right:clamp(8px,2vw,22px)}

.tabbar{display:flex;align-items:center;gap:clamp(13px,2vw,26px);
  border-bottom:0;margin:0;flex:1 1 auto;min-width:0;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.tabbar::-webkit-scrollbar{display:none}
/* A fade at whichever end of the strip still has tabs beyond it. */
.tabbar.more-right,.pjump.more-right{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
.tabbar.more-left,.pjump.more-left{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent)}
.tabbar.more-left.more-right,.pjump.more-left.more-right{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px,
  #000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,transparent,#000 36px,
  #000 calc(100% - 36px),transparent)}
.tb{padding:16px 0;font:500 13.5px var(--sans);color:var(--ink-faint)}
.tb[aria-selected="true"]{color:var(--ink);font-weight:700}
.tb[aria-selected="true"]::after{bottom:0;background:var(--brand);height:2px}
.tiers{flex:0 0 auto;margin-left:auto}
/* With the full name signed in (22 October 2026) the tabs no longer fit beside the brand, and the
   theme button fell to a third line. On a wide screen the top row is now brand, name and theme,
   with every tab on one full row beneath. */
@media (min-width:861px){
  .tiers{order:2}
  .themebtn{order:3}
  .tabbar{order:4;flex-basis:100%}
}

/* A phone cannot hold a brand, six tabs and four flow buttons on one line, so it takes two:
   brand and reader, then the tabs scrolling underneath. Same elements, same order, no second
   markup. */
@media (max-width:860px){
  .topin{padding-bottom:0}
  .brand{margin-right:auto}
  .tiers{order:2;margin-left:0}
  .tabbar{order:3;flex-basis:100%;border-top:1px solid var(--rule-soft);margin-top:9px}
  .tb{padding:11px 0;font-size:13px}
}
@media (max-width:560px){
  .wordmark .w1{font-size:27px}
  .wordmark .w2{font-size:13.5px}
  .brand img{height:21px}
}

/* The pane used to sit under a tab strip that supplied the gap. It supplies its own now. */
.appshell{padding-top:clamp(18px,2.6vw,28px)}

/* ============================================================================
   The mockup, exactly.
   Giri, 26 September 2026: "i wanted a pixel perfect webapp", against
   mockup/index.html. Class names below are the mockup's, so the two can be read side by side.
   Every value still resolves through the Heartfulness tokens at the top of this file.
   ============================================================================ */

/* Two columns: the thing being read, and a rail of context beside it. The rail stacks under
   the content on a phone, which is why it is last in the markup. */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:clamp(22px,3vw,34px)}
@media (max-width:860px){.cols{grid-template-columns:1fr}}
.side{border-left:1px solid var(--rule-soft);padding-left:clamp(16px,2vw,24px);align-self:start}
@media (max-width:860px){
  .side{border-left:0;padding-left:0;border-top:1px solid var(--rule-soft);padding-top:20px}
}
.side h4{font:600 10.5px var(--sans);letter-spacing:var(--tracking-widest);text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 8px}
.side p{font-size:13px;color:var(--ink-soft);margin:0 0 20px;line-height:1.55}
.side p:last-child{margin-bottom:0}

/* The hero a Seeker lands on. One column, centred, and nothing else on the page. */
.hero{max-width:620px;margin:0 auto;text-align:center}
.hero h2{font:300 clamp(25px,3.4vw,34px)/1.1 var(--display);color:var(--ink);margin:0 0 8px;
  letter-spacing:var(--tracking-tight)}
.hero .herosub{color:var(--ink-soft);font-size:clamp(14px,1.4vw,15px);margin:0 0 22px}
.hero .askbar{text-align:left}
.hero .foot{margin-top:24px;font-size:12px;color:var(--ink-faint)}

/* The questions somebody else asked. Two columns where there is room, because six in one
   column is a list to scroll and six in two is a set to glance at. */
.wgrid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px;text-align:left}
@media (min-width:620px){.wgrid{grid-template-columns:1fr 1fr}}
.wgrid .pq{text-align:left;font:400 13.5px var(--sans);color:var(--ink-soft);cursor:pointer;
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:11px 13px;transition:border-color .14s ease,color .14s ease}
.wgrid .pq:hover{border-color:var(--brand);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.wgrid .pq{transition:none}}

/* Topic cards. Name, a mark that opens the explanation, and how many questions are behind it. */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:10px;
  margin-top:10px}
/* Four to a row on a wide screen, so the Preceptor's eight topics sit as two even rows of four
   rather than five and three (Giri, 22 October 2026). A phone keeps as many as fit. */
@media (min-width:861px){.tgrid{grid-template-columns:repeat(4,1fr)}
  /* An Abhyasi has five topics: one row of five rather than four and one left over. */
  .tgrid:has(> .tcard:nth-child(5):last-child){grid-template-columns:repeat(5,1fr)}}
.tcard{position:relative;border:1px solid var(--rule);border-radius:var(--radius-xl);
  background:var(--panel);border-top:3px solid var(--c,var(--brand));
  transition:border-color .14s ease,transform .14s ease}
.tcard:hover{border-color:var(--c,var(--brand));transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.tcard{transition:none}.tcard:hover{transform:none}}
.tcard > a{display:block;padding:13px 14px;text-decoration:none}
.tcard b{display:block;font:600 14px var(--sans);color:var(--ink);padding-right:26px}
.tcard em{font-style:normal;display:block;font-size:12px;color:var(--ink-faint);margin-top:5px}
.tcard .qm{top:12px;right:12px}

/* A topic's questions. One line each, the sub topic on the right. */
.wq{font:300 clamp(20px,2.6vw,27px)/1.2 var(--display);color:var(--ink);margin:0 0 14px;
  letter-spacing:var(--tracking-tight);text-wrap:balance}
.qtable{display:flex;flex-direction:column}
.qline{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--rule-soft);font-size:14px;color:var(--ink);
  text-decoration:none}
.qline:hover{color:var(--c,var(--brand))}
.qline em{font-style:normal;font-size:11.5px;color:var(--ink-faint);flex:0 0 auto}

/* Sub topic chips carry their count, so narrowing is a decision made before the click. */
.subs .sub{display:inline-flex;align-items:baseline;gap:7px}
.subs .sub span{font-variant-numeric:tabular-nums;opacity:.72;font-size:11.5px}

/* The explanation, open at the top of a topic rather than hidden behind the mark. On the topic
   page the reader has already chosen it, so the answer to "what is this" is wanted, not offered. */
.tipopen{background:var(--wash);border:1px solid var(--rule);
  border-left:3px solid var(--c,var(--brand));border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  padding:13px 15px;margin:0 0 16px;max-width:66ch;font-size:13px;line-height:1.55;
  color:var(--ink-soft)}
.tipopen b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:4px}

/* ---- who is asking, as a list ---------------------------------------------
   Four buttons in a segmented control cost four labels of width in the navigation and pushed
   the tabs into a scroll on anything narrower than a laptop. One control now, showing only the
   reader's own view. Native select on purpose: on a phone it opens the system picker, which is
   a better list than anything built here, and it is keyboard reachable for free. */
.tiers{background:none;border:0;padding:0;display:flex}
.viewpick{display:inline-flex;align-items:center;gap:8px;background:var(--tint);
  border:1px solid var(--rule);border-radius:999px;padding:4px 6px 4px 13px}
.viewlab{font:500 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);white-space:nowrap}
#flowpick{appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
  background:var(--brand);color:var(--on-brand);border-radius:999px;padding:6px 30px 6px 13px;
  font:600 12.5px var(--sans);font-family:var(--sans);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;background-size:11px}
#flowpick:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (max-width:560px){.viewlab{display:none}.viewpick{padding:3px;border:0;background:none}}
.signin{display:inline-flex;align-items:center;gap:8px;margin-left:10px;font:500 13px var(--sans);
  white-space:nowrap}
.signin a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.signin .who{color:var(--ink-soft);max-width:16em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:560px){.signin{margin-left:6px}.signin .who{max-width:10em;font-size:12px}}

/* ---- choosing a section, at two levels, in one control --------------------
   It was section links in one style and, inside a section, sub topic buttons in another,
   stacked and looking unrelated, so a reader could not see that the second narrows the first.
   Both are chips now, the second indented under its own label. */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 4px}
.chips .chip{display:inline-flex;align-items:baseline;gap:7px;text-decoration:none;
  border:1px solid var(--rule);background:var(--panel);border-radius:999px;padding:7px 14px;
  font:500 13px var(--sans);color:var(--ink-soft);cursor:pointer;
  transition:border-color .14s ease,color .14s ease}
.chips .chip em{font-style:normal;font-size:11.5px;font-variant-numeric:tabular-nums;
  color:var(--ink-faint)}
.chips .chip:hover{border-color:var(--c,var(--brand));color:var(--ink)}
.chips .chip.on{background:var(--c,var(--brand));border-color:var(--c,var(--brand));
  color:var(--on-brand);font-weight:600}
.chips .chip.on em{color:var(--on-brand);opacity:.78}
@media (prefers-reduced-motion:reduce){.chips .chip{transition:none}}

/* The second level is inside the first, and is drawn that way. */
.narrow{margin:14px 0 0;padding-left:14px;border-left:2px solid var(--rule)}
.lab + .chips{margin-top:8px}

/* ---- handing it to the Wellness team -------------------------------------
   Shown under a routed answer, where the message ends by offering it. Two fields and a button:
   a name, and any way at all to be reached. Neither is required on its own, because somebody
   writing this is not in a mood to be validated at. */
.wellform{display:grid;gap:11px;margin-top:16px;padding-top:15px;
  border-top:1px solid color-mix(in srgb,var(--saffron) 40%,transparent)}
.wellform label{display:grid;gap:5px;font:500 12px var(--sans);color:var(--ink-soft)}
.wellform input,.wellform select{border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:11px 13px;font:400 14.5px var(--sans);color:var(--ink);background:var(--panel);
  outline:none;font-family:var(--sans);width:100%;min-width:0}
.wellform input:focus,.wellform select:focus{border-color:var(--brand)}

/* How to reach you: the way of reaching, then the thing itself.
   It was a free text box taking a phone number, a WhatsApp number or an email address, with a
   separate box asking which of the three it was, and nothing checking that the two agreed.
   Flex rather than grid columns, because the country code disappears when Email is picked and
   a fixed three column track would leave the address sitting in a five character box. */
.reachrow{display:flex;flex-wrap:wrap;gap:8px}
.reachrow select{flex:0 0 auto}
.reachrow #wcode{flex:0 0 5.5rem;text-align:center;font-variant-numeric:tabular-nums}
.reachrow #wcontact{flex:1 1 11rem;min-width:0}
.reacherr{margin:7px 0 0;font:500 12.5px var(--sans);color:var(--danger);line-height:1.5}
/* Four fields now, and on a laptop two of them are short. Name beside contact, how beside
   where, so the form reads as one block rather than a column somebody has to scroll. */
@media (min-width:640px){
  .wellform{grid-template-columns:1fr 1fr}
  .wellform .reachlab,.wellform button,.reacherr{grid-column:1/-1}
}

/* ---- the English behind a translation -------------------------------------
   Our own messages are said back in the language the question was asked in, and the English is
   kept one click away rather than printed twice. Quiet: it is a footnote to a sentence
   somebody has already read. */
.inen{margin-top:10px}
.inen summary{cursor:pointer;font:500 12px var(--sans);color:var(--ink-faint);
  list-style:none;display:inline-flex;gap:6px;align-items:center}
.inen summary::before{content:"\203A";font-size:15px;line-height:1;transition:transform .15s}
.inen[open] summary::before{transform:rotate(90deg)}
.inen summary::-webkit-details-marker{display:none}
.inen summary:hover{color:var(--ink-soft)}
.inen p{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--ink-soft)}

/* ---- an offer after an empty answer ---------------------------------------
   An empty answer used to end at "your question has been noted". Closed by default and one
   quiet line: on a question with no answer this is an offer, not a summons. */
.askback{margin-top:14px;border-top:1px solid var(--rule-soft);padding-top:12px}
.askback summary{cursor:pointer;font:500 13px var(--sans);color:var(--brand);
  list-style:none;display:inline-flex;gap:6px;align-items:center}
.askback summary::before{content:"\203A";font-size:16px;line-height:1;transition:transform .15s}
.askback[open] summary::before{transform:rotate(90deg)}
.askback summary::-webkit-details-marker{display:none}
.askback .wellform{border-top:0;margin-top:6px;padding-top:6px}
.wellform button{border:0;border-radius:var(--radius-lg);background:var(--brand);color:var(--on-brand);
  cursor:pointer;font:600 14px var(--sans);padding:12px 20px;justify-self:start}
.wellform button:hover{filter:brightness(.93)}
.wellform button:disabled{opacity:.55;cursor:default}
.wellsent{font-size:14px;color:var(--ink);margin:0;line-height:1.55}

/* ---- share -----------------------------------------------------------------
   Copies the link. Not the Web Share API: that exists only on a phone, needs a secure context,
   and silently does nothing on a laptop. */
.shr{margin-left:auto;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rule);
  background:var(--panel);border-radius:999px;padding:7px 14px;cursor:pointer;
  font:600 12.5px var(--sans);color:var(--ink-soft);white-space:nowrap}
.shr svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.shr:hover{border-color:var(--brand);color:var(--brand)}
.shr.done{border-color:var(--ok);color:var(--ok)}

/* ============================================================================
   The phone.
   Most of the traffic is phones and the answer page was overflowing sideways: the passage, the
   thumbnail and the controls were all cut at the right edge. The cause is the oldest one in
   CSS grid and flex, that a child's default minimum size is its CONTENT, so a long title, a
   search input or a wide image pushes its track past the viewport instead of shrinking. Every
   rule below is that same fix applied where it bites.
   ============================================================================ */
.appshell,.topin,.pane,.answer,.atext,.acite,.citemain,.after,.qtable,.tgrid,.wgrid,
.field,.askbar,.sessions,.sess,.sessq{min-width:0}
.answer > *,.acite > *,.after > *{min-width:0}

/* A search input carries an intrinsic width of about twenty characters. In a 1fr track that
   becomes a floor the track cannot go under, and on a narrow phone it is the whole overflow. */
.field input{min-width:0;width:100%}

/* A long source title with no spaces to break on, and any stray long token in a passage. */
.citemain b,.citemain span,.atext p,.secp,.qline span,.sessq q{overflow-wrap:anywhere}

/* Last line of defence. If something new overflows tomorrow the page still does not scroll
   sideways, which is the part a reader actually suffers. */
html,body{max-width:100%;overflow-x:hidden}

@media (max-width:560px){
  /* The picture keeps 16 by 9 and the whole width, above the words rather than beside them. */
  .answer:has(.thumb),.answer:has(.playing){grid-template-columns:1fr}
  .answer .thumb,.answer .playing{aspect-ratio:16/9;width:100%;height:auto;border-radius:0}
  .answer .thumb img{object-fit:contain}

  /* The controls under an answer stack rather than crowd. Share stops being pushed to the far
     right, where it was falling off the edge. */
  .after{gap:10px 12px}
  .shr{margin-left:0}
  .helped{width:100%}

  /* The source line and its control, one under the other. */
  .acite{display:grid;gap:10px}
  .playlink.open{justify-self:start}
}

/* ---- Past sessions with Daaji: the series figures and the series label ----
   Eight columns do not fit a phone, so the table scrolls inside its own box and the page
   never scrolls sideways. Giri, 6 October 2026. */
.sstats{overflow-x:auto;margin:0 0 8px;border:1px solid var(--rule);border-radius:12px;
  background:var(--panel)}
.sstats table{width:100%;border-collapse:collapse;font:500 13px var(--sans);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sstats th,.sstats td{padding:9px 10px;text-align:right;border-bottom:1px solid var(--rule-soft)}
.sstats th[scope=row],.sstats thead th:first-child{text-align:left;color:var(--ink)}
.sstats thead th{font-weight:600;font-size:12px;color:var(--ink-faint);white-space:normal;
  vertical-align:bottom;line-height:1.3}
.sstats tbody td{color:var(--ink-soft)}
.sstats tr.sstot th,.sstats tr.sstot td{font-weight:700;color:var(--ink);border-bottom:0}
/* Below a laptop the table would hide columns behind a sideways scroll, so each series becomes
   a card of label and figure pairs, two pairs a row, smaller on a phone. */
@media (max-width:1000px){
  .sstats{overflow:visible;border:0;background:none}
  .sstats table,.sstats tbody,.sstats tr,.sstats th,.sstats td{display:block;white-space:normal}
  .sstats thead{display:none}
  .sstats tr{background:var(--panel);border:1px solid var(--rule);border-radius:12px;
    margin:0 0 10px;padding:4px 14px 8px;display:grid;grid-template-columns:1fr 1fr;
    column-gap:24px}
  .sstats tbody th[scope=row]{grid-column:1 / -1;font-size:14.5px;padding:10px 0 6px;
    border-bottom:1px solid var(--rule-soft);margin-bottom:2px}
  .sstats td{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
    border-bottom:1px solid var(--rule-soft)}
  .sstats td{white-space:nowrap;align-items:baseline}
  .sstats td::before{content:attr(data-label);color:var(--ink-faint);font-weight:500;
    white-space:normal;text-align:left}
  .sstats tr.sstot{border-color:var(--ink-faint)}
  .sstats tr.sstot td{border-bottom:1px solid var(--rule-soft)}
}
@media (max-width:560px){.sstats tr{column-gap:14px;padding:2px 12px 6px}
  .sstats td{font-size:12.5px;padding:6px 0;gap:6px}.sstats td::before{font-size:11.5px}}
.sesser{font:500 12.5px var(--sans);color:var(--brand)}
/* On a phone the date, the series and the count did not fit one line, and the date broke as
   "2026-10-" over "04". The date and count never wrap; the series takes a line of its own. */
.sessdate,.sessn{white-space:nowrap}
@media (max-width:560px){
  .sess summary{flex-wrap:wrap;row-gap:2px}
  .sesser{order:3;flex-basis:100%;padding-left:22px}
}

/* The feedback form, 7 October 2026. The Reach out form's pieces, with room for the answers. */
.fbform{max-width:640px;border-top:0;padding-top:4px}
.fbform .rq textarea{min-height:84px}
.sendbtn:disabled{opacity:.6;cursor:default}
.sitefoot{max-width:1120px;margin:-40px auto 0;padding:18px clamp(16px,3vw,28px) 36px;
  border-top:1px solid var(--rule-soft);display:flex;flex-wrap:wrap;gap:6px 14px;
  align-items:baseline;font-size:13px;color:var(--ink-faint)}
.sitefoot[hidden]{display:none}
.sitefoot a{color:var(--brand);font-weight:600}

.asearchk{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.avscroll{overflow-x:auto;max-width:100%}
.avis{border-collapse:collapse;font:400 14px var(--sans);color:var(--ink)}
.avis th,.avis td{padding:8px 12px;border-bottom:1px solid var(--rule-soft);text-align:center}
.avis th[scope=row]{text-align:left;font-weight:500}
.avis thead th{font:600 11.5px var(--sans);letter-spacing:.04em;color:var(--ink-soft);vertical-align:bottom}
.avis td.achg{background:var(--tint)}
.avis td.achg input{outline:2px solid var(--brand);outline-offset:2px}
.areset{border:0;background:none;color:var(--brand);font:500 13px var(--sans);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;padding:4px}
.anum{width:72px;padding:6px 8px;border:1px solid var(--rule);border-radius:8px;font:400 14px var(--sans);
  color:var(--ink);background:var(--panel)}
.avis select{padding:6px 8px;border:1px solid var(--rule);border-radius:8px;font:400 14px var(--sans);
  color:var(--ink);background:var(--panel)}
.achgdot{font:600 11px var(--sans);color:var(--brand);text-transform:uppercase;letter-spacing:.05em}
.aroster td,.aroster th{text-align:left;white-space:nowrap}
.aroster td.adet{white-space:normal;color:var(--ink-soft);font-size:13px;min-width:260px}
.aroster{margin-bottom:24px}

/* The sign in screen, all a reader sees before signing in with the Heartfulness login. */
.gate{max-width:520px;margin:12vh auto;text-align:center;padding:0 16px}
.gate h1{font:300 clamp(28px,4vw,40px)/1.2 var(--display);color:var(--ink);margin:0 0 12px}
.gate p{color:var(--ink-soft);font-size:16px;margin:0 0 28px}
.gatebtn{display:inline-block;background:var(--brand);color:var(--on-brand);text-decoration:none;
  border-radius:999px;padding:12px 30px;font:600 15px var(--sans)}
.gatebtn:hover{filter:brightness(1.08)}

/* Meditate now: the Heartfulness app's own screen, full page over Dil Se. The background is one
   of the app's own images, so the colours here are fixed rather than themed. */
body.medopen{overflow:hidden}
.mednow{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:28px;padding:24px 16px;color:#fff;text-align:center;
  background:#2b2d6e center/cover no-repeat}
.mednow[hidden]{display:none}
.mednow::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,20,60,.25),rgba(20,20,60,.45))}
.mednow h2{margin:0;font:500 clamp(26px,5vw,34px) var(--sans);letter-spacing:.04em;
  text-shadow:0 2px 12px rgba(0,0,0,.35)}
.medclose{position:absolute;top:max(14px,env(safe-area-inset-top));right:16px;width:44px;height:44px;
  border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:26px;
  line-height:1;cursor:pointer}
.medgo{width:150px;height:150px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.35);
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.22),rgba(140,90,200,.25) 70%);
  box-shadow:0 0 40px rgba(170,140,255,.35)}
.medplay{width:0;height:0;margin-left:8px;border-style:solid;border-width:22px 0 22px 36px;
  border-color:transparent transparent transparent #fff}
.medgo.running .medplay{margin:0;width:30px;height:40px;border:0;
  background:linear-gradient(90deg,#fff 0 35%,transparent 35% 65%,#fff 65%)}
.medtime{font:300 clamp(40px,10vw,56px) var(--sans);font-variant-numeric:tabular-nums;
  letter-spacing:.04em;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.medmins{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(320px,100%)}
.medmins[hidden]{display:none}
.medmins output{font:500 18px var(--sans)}
.medmins input{width:100%;accent-color:#fff}
.medreset{border:1px solid rgba(255,255,255,.7);background:none;color:#fff;cursor:pointer;
  font:500 16px var(--sans);padding:10px 34px;border-radius:999px}
.medgo:focus-visible,.medmins input:focus-visible,.medreset:focus-visible,.medclose:focus-visible{
  outline:2px solid #fff;outline-offset:3px}

/* The link from an answer to the same teaching step by step on the practices tab. */
.stepslink{display:flex;align-items:center;gap:12px;margin:4px 0 14px;padding:13px 16px;
  border:1px solid var(--rule);border-left:3px solid var(--brand);border-radius:var(--radius-lg);
  background:var(--panel);color:var(--ink);text-decoration:none}
.stepslink:hover{border-color:var(--brand)}
.stepslink svg{width:20px;height:20px;flex:0 0 auto;stroke:var(--brand);fill:none;stroke-width:1.6}
.stepslink span{display:flex;flex-direction:column;gap:2px}
.stepslink b{font:600 15px var(--sans)}
.stepslink em{font:400 12.5px var(--sans);font-style:normal;color:var(--ink-faint)}

/* A booklet technique opened inside a Trainer topic, and its chip. */
.lanesteps{margin-top:16px}
.chip.stepchip{display:inline-flex;align-items:center;gap:6px}
.chip.stepchip svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.lanesteps .prachd h3{display:none}

/* Which view the record gives, beside the name. */
.signin .viewtag{font:600 11.5px var(--sans);letter-spacing:.02em;color:var(--brand);
  border:1px solid color-mix(in srgb,var(--brand) 35%,transparent);border-radius:999px;
  padding:2px 9px;white-space:nowrap}
.sessline{margin:4px 0 12px;color:var(--ink-soft)}
.sesschips{margin:0 0 16px}
/* Reach out, a header button rather than a tab (Bhadresh's review, 22 October 2026). */
.hdrbtn{display:inline-flex;align-items:center;font:600 12.5px var(--sans);color:var(--brand);
  border:1px solid var(--brand);border-radius:999px;padding:5px 12px;text-decoration:none;
  white-space:nowrap;margin-left:10px}
.hdrbtn:hover{background:color-mix(in srgb,var(--brand) 10%,transparent)}
@media (max-width:560px){.hdrbtn{padding:4px 9px;font-size:11.5px;margin-left:4px}}
.bysess{display:inline-block;margin-top:6px;font:600 13px var(--sans);color:var(--brand)}
.mednow .medhow{margin:10px auto 0;max-width:30ch;text-align:center;font:400 16px/1.5 var(--sans);
  color:inherit;opacity:.92;text-shadow:0 1px 8px rgba(0,0,0,.45)}
/* Reach out: a question left unanswered when Send is pressed. */
.rq.rqmiss > span{color:var(--danger,#b3261e)}
.rq.rqmiss textarea,.rq.rqmiss input,.rq.rqmiss .chips{outline:2px solid var(--danger,#b3261e);outline-offset:2px;border-radius:8px}
.rmissing{margin:4px 0 10px;color:var(--danger,#b3261e);font:600 14px var(--sans)}
.rmissing[hidden]{display:none}