/*
* jyotisoft.com — one stylesheet, no build step, no dependencies.
*
* Palette = the JyotiSoft brand (assets/brand/jyotisoft/tokens.json, the
* @JyotiSoftBot avatar): navy #162B47 and orange #fd5a01 on white. Copied, not
* imported — this is plain static HTML behind nginx with no bundler. The brand
* orange is 2.78:1 on white, so text in orange uses the darker orange_ink
* #c2410c (4.93:1 on the sheet); the raw orange is for fills, marks and
* buttons with navy text. The variable NAMES (--teal, --gold) are historical.
*
* Type: Piazzolla (variable, opsz 8..30, wght 400..700), self-hosted in
* assets/fonts/ because the nginx CSP says `font-src 'self'` — a Google Fonts
* would be blocked. Subsets: latin (every page), cyrillic (ru, uk),
* latin-ext (pl, tr diacritics), plus Noto Serif Devanagari for hi — Piazzolla
* has no Devanagari glyphs and the page would fall to the system serif.
* unicode-range makes the browser fetch only the subsets a page actually uses.
*/
@font-face {
font-family: "Piazzolla";
font-style: normal;
font-weight: 400 700;
font-display: optional;
src: url(/assets/fonts/piazzolla-normal-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Piazzolla";
font-style: normal;
font-weight: 400 700;
font-display: optional;
src: url(/assets/fonts/piazzolla-normal-cyrillic.woff2) format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Piazzolla";
font-style: normal;
font-weight: 400 700;
font-display: optional;
src: url(/assets/fonts/piazzolla-normal-latin-ext.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Piazzolla";
font-style: normal;
font-weight: 400 700;
font-display: optional;
src: url(/assets/fonts/piazzolla-normal-vietnamese.woff2) format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: "Noto Serif Devanagari";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/assets/fonts/noto-serif-devanagari.woff2) format("woff2");
unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/*
* Redesign 2026-09-26 (AO-449). Modern SaaS layout on the same brand:
* serif display (Piazzolla) over a system sans for body text — 0 extra bytes
* of font for paragraphs and far better small-size legibility on phones.
* Cards on a tinted ground, a glowing hero, a bento grid of the product's
* sections, and a menu on phones that works without JavaScript.
*
* Contrast (WCAG AA): --accent-ink #c2410c on #fff 4.93:1, on --bg 4.6:1;
* navy #162b47 on the orange button #fd5a01 5.1:1; dark: #fd5a01 on #0f1e33 5.4:1.
*/
:root {
/* Colours are the Telegram Mini App's tokens by value (app/packages/ui/src/
* tokens/tma-jyotisoft.css, light and dark blocks; prototype astro-108-764),
* so the site and the app read as one product. */
--bg: #f3f8fc;
--surface: #ffffff;
--surface-2: #eef2f7;
--ink: #080b26;
--ink-2: #53668b;
--navy: #142a45;
--navy-2: #1a3758;
--on-navy: #eef4fa;
--on-navy-2: #b3c4d4;
--orange: #fd5a01;
--orange-2: #ff8a5c;
--accent-ink: #c2410c;
--t-good: #44d98b; --t-best: #00a95c; --t-bad: #ff6266; --t-bad-soft: #fbe6e4;
--p-ju: #8a5a00; --p-sa: #3b44b0; --p-ra: #4b5563; --p-me: #15803d;
--line: #e1ebf5;
--line-strong: rgba(19, 35, 59, .24);
--head-bg: rgba(243, 248, 252, .82);
--shadow: 0 6px 20px rgba(24, 61, 92, .05);
--shadow-lift: 0 2px 4px rgba(19, 35, 59, .08), 0 16px 40px rgba(19, 35, 59, .12);
--glow: radial-gradient(60rem 30rem at 85% -10%, rgba(253, 90, 1, .20), transparent 60%), radial-gradient(50rem 30rem at -10% 10%, rgba(22, 43, 71, .10), transparent 60%);
--radius: 20px;
--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
--serif: "Piazzolla", "Noto Serif Devanagari", Georgia, "Times New Roman", serif;
color-scheme: light;
}
/* Theme (AO-449, owner: light AND dark everywhere). Default = the OS
* preference, no script needed. A choice made with the header toggle sets
* (assets/site.js, before first paint in ) and wins
* both ways. The dark tokens are written twice on purpose: CSS cannot share a
* declaration block between a media query and an attribute selector. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0a1524;
--surface: #0f1e33;
--surface-2: #142a45;
--ink: #e8eef5;
--ink-2: #a3b6c7;
--navy: #162b47;
--navy-2: #1f3a5e;
--accent-ink: #fd5a01;
--t-best: #14c77c; --t-bad: #ff7376; --t-bad-soft: rgba(255, 154, 144, .14);
--p-ju: #f4cd55; --p-sa: #b3b8ff; --p-ra: #d0d4dc; --p-me: #8fe7b3;
--line: rgba(232, 238, 245, .12);
--line-strong: rgba(232, 238, 245, .26);
--head-bg: rgba(10, 21, 36, .82);
--shadow: none;
--shadow-lift: 0 2px 4px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .4);
--glow: radial-gradient(60rem 30rem at 85% -10%, rgba(253, 90, 1, .18), transparent 60%), radial-gradient(50rem 30rem at -10% 10%, rgba(80, 130, 200, .12), transparent 60%);
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--bg: #0a1524;
--surface: #0f1e33;
--surface-2: #142a45;
--ink: #e8eef5;
--ink-2: #a3b6c7;
--navy: #162b47;
--navy-2: #1f3a5e;
--accent-ink: #fd5a01;
--t-best: #14c77c; --t-bad: #ff7376; --t-bad-soft: rgba(255, 154, 144, .14);
--p-ju: #f4cd55; --p-sa: #b3b8ff; --p-ra: #d0d4dc; --p-me: #8fe7b3;
--line: rgba(232, 238, 245, .12);
--line-strong: rgba(232, 238, 245, .26);
--head-bg: rgba(10, 21, 36, .82);
--shadow: none;
--shadow-lift: 0 2px 4px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .4);
--glow: radial-gradient(60rem 30rem at 85% -10%, rgba(253, 90, 1, .18), transparent 60%), radial-gradient(50rem 30rem at -10% 10%, rgba(80, 130, 200, .12), transparent 60%);
color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
img, svg { display: block; max-width: 100%; height: auto; }
b, strong { font-weight: 600; }
.wrap { width: min(1160px, 100% - 2.5rem); margin-inline: auto; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; padding: .6rem 1rem; background: var(--navy); color: var(--on-navy); border-radius: 10px; }
.skip:focus { top: 1rem; }
/* ── type ────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 500; margin: 0; text-wrap: balance; }
:lang(ja) :is(h1, h2, h3) { word-break: auto-phrase; overflow-wrap: anywhere; } /* a phrase wider than a phone still breaks (site QA 2026-10-18: /ja/tools/manglik/ +147px) */
h1 { font-size: clamp(2.4rem, 1.2rem + 4vw, 4.2rem); line-height: 1.04; letter-spacing: -.022em; }
h2 { font-size: clamp(1.8rem, 1.15rem + 2.1vw, 2.8rem); line-height: 1.1; letter-spacing: -.015em; margin-bottom: 1rem; max-width: 26ch; }
h3 { font-size: 1.3rem; line-height: 1.25; letter-spacing: -.005em; }
p { margin: 0; }
.lead { font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: 34em; }
.muted { color: var(--ink-2); }
.small { font-size: .92rem; }
.kicker { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 1.1rem; }
.kicker::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(253, 90, 1, .2); }
html:lang(hi) body { font-size: 18px; line-height: 1.8; }
html:lang(hi) h1 { line-height: 1.25; letter-spacing: 0; }
html:lang(hi) h2 { line-height: 1.3; letter-spacing: 0; }
html:lang(hi) h3, html:lang(hi) .faq summary { line-height: 1.45; }
html:lang(hi) .kicker { text-transform: none; letter-spacing: 0; }
/* ── header ──────────────────────────────────────────────────────── */
.site-head { position: sticky; top: 0; z-index: 30; background: var(--head-bg); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 1rem; min-height: 4rem; }
.brand { display: inline-flex; align-items: center; font-family: var(--serif); font-size: 1.3rem; white-space: nowrap; font-weight: 600; letter-spacing: -.01em; text-decoration: none; margin-right: auto; flex-shrink: 0; /* the nav must not squeeze the Logo 3 lockup (img max-width: 100%) */ }
/* Two marks, one shown per theme: a source can follow only the OS. */
.brand-mark--dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-mark--light { display: none; } :root:not([data-theme="light"]) .brand-mark--dark { display: block; } }
:root[data-theme="dark"] .brand-mark--light { display: none; }
:root[data-theme="dark"] .brand-mark--dark { display: block; }
/* The toggle needs the script; without it the page follows the OS and shows no dead button. */
.theme-toggle { display: none; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.js .theme-toggle { display: inline-grid; }
.theme-toggle:hover { border-color: var(--ink); background: var(--surface-2); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theme-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .moon { display: block; } }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
.brand-mark { width: 2rem; height: 2rem; flex: none; margin-right: .55rem; }
/* Logo 3 (H1: G10 mark + «JyotiSoft», owner 2026-10-31): one image per theme, swapped by .brand-mark--light/--dark */
.brand-lockup { height: 2rem; width: auto; flex: none; }
/* Logo 3 in the narrow header too (owner 2026-11-01, Parents book QR page: «логотип нужно обновить» — C1 read as the old mark) */
/* The JyotiSoft wordmark (owner 2026-10-28, tokens.json → wordmark): Jyoti in the logo orange, Soft in
the logo navy, as on the logo; on dark grounds Soft is the light navy. A logotype: WCAG 1.4.3 exempt. */
.js-wordmark { white-space: nowrap; }
/* the logo + wordmark lockup is never underlined (owner 2026-10-28: «кривая подпись» in the footer); hover = a soft fade */
.brand:hover, .site-foot .brand:hover { text-decoration: none; opacity: .82; }
.brand { transition: opacity .15s ease; }
.js-wordmark__j { color: #FD5A01; }
.js-wordmark__s { color: #01224E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .js-wordmark__s { color: #B4C5E0; } }
:root[data-theme="dark"] .js-wordmark__s { color: #B4C5E0; }
/* running-text name on a navy band in the light theme: Soft turns light navy there too */
:root:root .hero--ask .js-wordmark__s { color: #01224E; } /* the hero is a light scheme in every theme (photo ground) */
:root:root .sale-ribbon .js-wordmark__s, :root:root .way--hot .js-wordmark__s, :root:root .cta .js-wordmark__s, :root:root .skip .js-wordmark__s, :root:root .phone .js-wordmark__s { color: #B4C5E0; }
.nav { display: flex; gap: .2rem; }
.nav a { color: var(--ink-2); text-decoration: none; padding: .45rem .7rem; border-radius: 999px; font-size: .95rem; white-space: nowrap; }
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--surface-2); font-weight: 500; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .75rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .95rem; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { stroke: currentColor; fill: none; stroke-width: 1.8; }
.menu nav { position: absolute; right: 0; top: calc(100% + .5rem); display: grid; min-width: 15rem; padding: .4rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lift); }
.menu nav a { padding: .7rem .85rem; border-radius: 10px; text-decoration: none; }
.menu nav a:hover, .menu nav a[aria-current="page"] { background: var(--surface-2); }
@media (max-width: 1120px) { .site-head .nav { display: none; } .menu { display: block; } }
/* site.js: the pills do not fit in this language at this width — use the menu. */
.site-head.nav-tight .nav { display: none; }
.site-head.nav-tight .menu { display: block; }
.site-head.nav-season-off .nav .nav-season { display: none; }
.site-head.nav-tighter .lang-menu__current, .site-head.nav-tighter .menu summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 640px) {
.site-head .wrap { gap: .5rem; }
.site-head .wrap > .button { display: none; }
.brand { font-size: 1.15rem; }
.brand-mark { width: 1.75rem; height: 1.75rem; margin-right: .4rem; }
.brand-lockup { height: 1.75rem; }
.lang-menu__current, .menu summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.lang-menu { position: relative; font-size: .95rem; }
.lang-menu__button { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .7rem .45rem .6rem; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; white-space: nowrap; }
.lang-menu__button::after { content: ""; width: .38em; height: .38em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-.12em) rotate(45deg); transition: transform .15s; }
.lang-menu.is-open .lang-menu__button::after { transform: translateY(.12em) rotate(225deg); }
.lang-menu__button:hover, .lang-menu.is-open .lang-menu__button { border-color: var(--ink); background: var(--surface-2); }
.lang-menu__globe { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
.lang-menu__list { max-height: calc(100vh - 5rem); max-height: calc(100dvh - 5rem); overflow-y: auto; display: none; position: absolute; right: 0; top: calc(100% + .5rem); z-index: 40; margin: 0; padding: .4rem; list-style: none; min-width: 12rem; max-width: calc(100vw - 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lift); }
.lang-menu.is-open .lang-menu__list { display: grid; }
.lang-menu__list a { display: block; padding: .5rem .75rem; border-radius: 8px; text-decoration: none; white-space: nowrap; }
.lang-menu__list a:hover, .lang-menu__list a:focus-visible { background: var(--surface-2); }
.lang-menu__list a[aria-current="page"] { color: var(--accent-ink); font-weight: 600; }
/* Language offer (assets/site.js): a small pop-over under the language button. Out of flow, so
* showing it never moves the page; hidden while the menu list itself is open. */
.lang-suggest { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); left: auto; z-index: 45; display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem .75rem; width: max-content; max-width: min(26rem, calc(100vw - 24px)); padding: .35rem .3rem .35rem 1rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow-lift); font-size: .92rem; visibility: hidden; animation: lang-suggest-in .3s ease 6s forwards; }
.lang-suggest:empty, .lang-menu.is-open .lang-suggest { display: none; }
@keyframes lang-suggest-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; visibility: visible; } }
@media (prefers-reduced-motion: reduce) { .lang-suggest { animation-duration: .01s; } }
.lang-suggest p { flex: 1 1 auto; margin: 0; line-height: 1.4; }
.lang-suggest__go { flex: none; display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1.1rem; border-radius: 999px; background: var(--orange); color: #13233b; font-weight: 650; text-decoration: none; }
.lang-suggest__go:hover { background: var(--orange-2); }
.lang-suggest__close { flex: none; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.lang-suggest__close:hover { background: var(--surface-2); color: var(--ink); }
/* Owner P0 2026-10-26: the offer is a fixed bottom card that appears after 6 s (CSS delay, hidden and unfocusable till then), so it never covers the first screen, never shifts content, and sits above the phone's sticky CTA. */
@media (max-width: 860px) { .lang-suggest { right: 8px; left: 8px; bottom: calc(5rem + env(safe-area-inset-bottom)); width: auto; max-width: none; } .lang-suggest p { font-size: .88rem; line-height: 1.3; } }
/* ── buttons ─────────────────────────────────────────────────────── */
.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.9rem; padding: .7rem 1.35rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink); background: var(--surface); text-decoration: none; font-weight: 600; font-size: .98rem; line-height: 1.2; white-space: nowrap; transition: background-color .15s, border-color .15s, transform .15s, box-shadow .15s; }
@media (max-width: 600px) { .button { white-space: normal; text-align: center; } } /* a long label (de nakshatra CTA) wraps instead of widening the page */
.button:hover { border-color: var(--ink); }
/* a calculator request in flight (assets/calc-pdf.js jyBusy): the pressed button turns into a spinner + «Calculating…» */
.button.is-busy, button.is-busy { cursor: progress; opacity: .85; }
.button.is-busy::before, button.link.is-busy::before { content: ""; flex: none; display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: jy-busy-spin .8s linear infinite; }
@keyframes jy-busy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .button.is-busy::before, button.link.is-busy::before { animation-duration: 2.4s; } }
.button-solid { background: var(--orange); border-color: var(--orange); color: #13233b; box-shadow: 0 6px 18px rgba(253, 90, 1, .28); }
.button-solid:hover { background: var(--orange-2); border-color: var(--orange-2); transform: translateY(-1px); }
.actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.actions + .small { margin-top: 1rem; }
.link { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.link:hover { text-decoration-thickness: 2px; }
button.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
@media (max-width: 480px) { .actions .button { flex: 1 1 100%; white-space: normal; text-align: center; } .tool-result .actions[role="group"] .button { flex: 1 1 0; } }
/* ── sections ────────────────────────────────────────────────────── */
/* 2026-10-20 owner «too much empty space»: 88 px a side at 1440 gave 230–290 px between sections; now 60 px. */
section { padding-block: clamp(2.25rem, 4.5vw, 3.75rem); }
.section-lead { margin: -.25rem 0 2rem; }
.more { margin-top: 1.75rem; }
.note-gap { margin-top: 1.25rem; }
.band { background: var(--surface); border-block: 1px solid var(--line); }
/* ── hero ────────────────────────────────────────────────────────── */
.hero { background: var(--glow); padding-block: clamp(2rem, 4.5vw, 4rem) clamp(2rem, 4vw, 3.25rem); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero h1 { margin-bottom: 1.2rem; }
.hero .lead { margin-bottom: 1.9rem; }
.hero--plain .wrap { grid-template-columns: minmax(0, 1fr); }
.hero--plain .lead { max-width: 40em; }
/* Reference and tool pages (2026-10-18): a compact top and a short gap, so the breadcrumb is near the header and the tool is on the first screen. */
.hero--plain { padding-block: clamp(.75rem, 1.5vw, 1.25rem) clamp(.5rem, 1vw, .75rem); }
.hero--plain .lead { margin-bottom: .5rem; }
.hero--plain + section { padding-top: clamp(1rem, 2vw, 1.5rem); }
/* The chart calculator (owner TZ 2026-10-31): beside the form the chart drawing and what the chart shows
(side by side where both fit; on a phone the list under the form and no drawing, so the button stays near). */
.tool-first { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.25rem 2rem; align-items: start; }
.tool-first__aside .orb { width: min(100%, 220px); margin: 0 auto 1rem; }
.tool-first .tool-form { margin: 0; }
.tool-form .button { white-space: normal; max-width: 100%; } /* a long call to action (book pages) wraps instead of widening the card */
.tool-result .read-each, .learn-steps { margin-block: 1rem; }
/* the chart's plain reading as accordions (owner 2026-11-01): the row's title is a sentence, only its is bold */
.tool-result .faq.read, .tool-result .read-d9 { margin-block: 1rem; }
.tool-result .faq.read summary { font-size: 1rem; font-weight: 400; line-height: 1.5; }
.tool-result .read-d9 .faq-answer { max-width: none; }
.orb { position: relative; width: min(100%, 440px); margin-inline: auto; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 40%, var(--surface) 0 55%, transparent 72%); }
.orb::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; border: 1px solid var(--line); box-shadow: inset 0 0 80px rgba(253, 90, 1, .10); }
.chart { width: 86%; color: var(--ink); position: relative; }
.chart .ring { stroke: var(--line-strong); stroke-width: 2; }
.chart .frame { stroke: currentColor; }
.chart .planet { fill: currentColor; }
.chart .lagna { fill: var(--orange); }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } .orb { width: min(80%, 300px); order: 1; } }
/* Home hero (2026-10-10): question chips, one way in, an example answer card
* instead of the drawing, and a QR for a desktop without Telegram. */
.hero--ask .wrap > * { min-width: 0; }
.hero--ask h1 { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.3rem); }
.hero--ask .lead { margin-bottom: 1.4rem; }
.ask-label { margin: 0 0 .6rem; }
.ask-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.ask-chip { display: inline-block; padding: .5rem .95rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; font-size: .95rem; }
.ask-chip:hover { border-color: var(--orange); }
.qr { display: none; }
@media (min-width: 1024px) and (hover: hover) {
.qr { display: flex; align-items: center; gap: .9rem; margin-top: 1.4rem; }
.qr svg { width: 92px; height: 92px; border-radius: 10px; border: 1px solid var(--line); flex: none; }
.qr p { max-width: 16em; margin: 0; }
}
/* The home sample answer = the Mini App's answer card (owner 2026-10-11):
navy in both themes, question bubble, accent headings, serif window, the
transit timeline (build_site.answer_card ← answer_sample.json ← the
product's llm_core.timing_window.card), a hairline, why, what to do.
The bars take the on-navy planet tones in both themes, as the app's -nv tokens. */
.answer { --p-sa: #b3b8ff; --p-ju: #f4cd55; --p-ra: #d0d4dc; --awin-line: color-mix(in srgb, var(--on-navy) 14%, transparent); margin: 0; padding: clamp(20px, 2.4vw, 30px); background: radial-gradient(26rem 14rem at 92% -25%, rgba(253, 90, 1, .30), transparent 62%), var(--navy); color: var(--on-navy); border-radius: 24px; box-shadow: var(--shadow-lift); display: flex; flex-direction: column; gap: 16px; }
.awin-q { align-self: flex-end; max-width: 85%; margin: 0; padding: 11px 16px; border-radius: 18px 18px 4px 18px; background: var(--orange); color: var(--navy); font-weight: 650; line-height: 1.35; }
.awin-dl { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.awin dt { font: 650 14px/1.3 var(--sans); color: var(--orange-2); margin-top: 4px; }
.awin dd { margin: 4px 0 0; font-size: 15.5px; line-height: 1.5; }
.awin .awin-win { font: 600 clamp(26px, 2.6vw, 32px)/1.1 var(--serif); }
.awin-tl { margin-top: 6px; display: grid; gap: 10px; }
.awin-row { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 13px; line-height: 1.25; color: var(--on-navy-2); }
.awin-band, .awin-ax { display: block; overflow: visible; }
.awin-track { fill: var(--awin-line); }
.awin-bar.g-saturn { fill: var(--p-sa); }
.awin-bar.g-jupiter { fill: var(--p-ju); }
.awin-bar.g-rahu, .awin-bar.g-ketu { fill: var(--p-ra); }
.awin-bar.win { fill: var(--t-best); }
.awin-bar.awin-glow { opacity: .55; }
.awin-now rect, .awin-now circle { fill: var(--orange); }
.awin-now .awin-now-ring { opacity: .3; }
.awin-ax text { font: 600 12.5px var(--sans); fill: var(--on-navy-2); }
.awin-dl > div:nth-child(2) { border-top: 1px solid var(--awin-line); padding-top: 14px; }
.awin .awin-tl { margin-top: 6px; }
.answer figcaption { padding-top: 12px; border-top: 1px solid var(--awin-line); font-size: .82rem; color: var(--on-navy-2); }
@media (max-width: 600px) { .awin-row { grid-template-columns: 88px minmax(0, 1fr); } }
@media (max-width: 860px) { .ask-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter, 1.25rem)); padding: 0 var(--gutter, 1.25rem) .4rem; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, rgba(0, 0, 0, .3)); mask-image: linear-gradient(90deg, #000 85%, rgba(0, 0, 0, .3)); } .ask-chip { white-space: nowrap; } }
/* Home «three ways to start» (replaced the six section tiles) and the launch
* ribbon, shown by assets/site.js only while /api/v1/landing/card has a sale. */
.sale-ribbon { margin: 0; padding: .55rem 1.25rem; text-align: center; font-size: .92rem; background: var(--navy); color: var(--on-navy); }
/* Owner 2026-10-26: no sale, no ribbon, no gap above the hero (a reserved empty box left ~110 px
* of air under the offers strip). While a sale runs, the ribbon appears when the API answers. */
.sale-ribbon:not(.is-on) { display: none; }
.hero--ask { padding-top: 0; }
/* Home hero photo (JyotiSoft's own picture, marble terrace, misty river and palm-leaf manuscripts at dawn; owner 2026-10-26): the same light sheet and inks in dark, so the text stays readable; the navy cards below keep their theme. The photo sits at the top at its own aspect (no crop), fades into the page colour below; on a phone it is a 540px strip showing the manuscripts. Size is picked by width (AVIF first, WebP fallback). */
.hero--ask { --hero-photo: url(/assets/hero-terrace-1672.webp); --hero-h: 56.25vw; --hero-pos: center top; --hero-size: 100% auto; --hero-veil: .42; --hero-bg: linear-gradient(90deg, rgba(246, 250, 253, .94), rgba(246, 250, 253, .75) 42%, rgba(246, 250, 253, 0) 72%), linear-gradient(180deg, rgba(246, 250, 253, var(--hero-veil)), rgba(246, 250, 253, var(--hero-veil))), linear-gradient(180deg, rgba(243, 248, 252, 0) 72%, #f3f8fc 100%) top / 100% var(--hero-h) no-repeat, var(--hero-photo) var(--hero-pos) / var(--hero-size) no-repeat #f3f8fc; }
@supports (background: image-set(url(a.avif) type("image/avif"))) { .hero--ask { --hero-photo: image-set(url(/assets/hero-terrace-1672.avif) type("image/avif"), url(/assets/hero-terrace-1672.webp) type("image/webp")); } }
@media (max-width: 1280px) { .hero--ask { --hero-photo: url(/assets/hero-terrace-1200.webp); } @supports (background: image-set(url(a.avif) type("image/avif"))) { .hero--ask { --hero-photo: image-set(url(/assets/hero-terrace-1200.avif) type("image/avif"), url(/assets/hero-terrace-1200.webp) type("image/webp")); } } }
@media (max-width: 800px) { .hero--ask { --hero-photo: url(/assets/hero-terrace-800.webp); --hero-h: 540px; --hero-pos: 82% top; --hero-size: auto 540px; --hero-veil: .4; } @supports (background: image-set(url(a.avif) type("image/avif"))) { .hero--ask { --hero-photo: image-set(url(/assets/hero-terrace-800.avif) type("image/avif"), url(/assets/hero-terrace-800.webp) type("image/webp")); } } }
/* phone: the picture is a 300px band above the headline (temple + manuscripts + diya), so the subject is never under the text */
@media (max-width: 560px) { .hero--ask { --hero-h: 300px; --hero-size: auto 300px; --hero-pos: 84% top; --hero-veil: .6; } }
.hero--ask { --ink: #080b26; --ink-2: #53668b; --surface: #fff; --surface-2: #eef2f7; --line: #e1ebf5; --line-strong: rgba(19, 35, 59, .24); --accent-ink: #c2410c; --shadow: 0 6px 20px rgba(24, 61, 92, .05); color: var(--ink); color-scheme: light; background: var(--hero-bg); }
/* RBUG-4099: keep the reserved ribbon, with a compact gap below it. */
.hero--ask > .sale-ribbon { margin-bottom: clamp(.75rem, 1.5vw, 1.25rem); }
.sale-ribbon a { color: var(--on-navy); font-weight: 600; }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.6rem; align-items: stretch; }
.way { display: flex; flex-direction: column; gap: .75rem; padding: clamp(1.3rem, 3vw, 1.8rem); background: var(--surface); border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
.way h3 { font-size: 1.5rem; }
.way__tag { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-ink); }
html:lang(hi) .way__tag { text-transform: none; letter-spacing: 0; }
.way__p { margin: 0; color: var(--ink-2); }
.way ul.checks { gap: .5rem; font-size: .95rem; }
.way__shots { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .8rem 0; }
.way__shots img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 2px 10px rgba(20, 33, 61, .18); }
.way__price { margin: auto 0 0; padding-top: .6rem; font-family: var(--serif); font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.way__plus { margin: -.4rem 0 0; color: var(--ink-2); }
.ways-note { margin: 1rem 0 0; }
.ways-veda { margin-top: 2rem; }
[data-plus-price] s { opacity: .7; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.way .button { margin-top: .4rem; }
.way--hot { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.way--hot .way__tag { color: var(--orange-2); }
.way--hot .way__p, .way--hot .way__plus { color: var(--on-navy-2); }
@media (max-width: 860px) { .ways { grid-template-columns: 1fr; } }
/* The offer under a calculator result and at the end of every reference page (owner 2026-10-30): two or
three .way cards, each saying FREE or its price; a card's notes stay readable on the navy card. */
.offer { margin: 2rem 0 0; }
.offer .ways { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.way--hot .muted, .way--hot [data-offer-promo] { color: var(--on-navy-2); }
/* A book's QR page (owner 2026-11-01): the PDF ad and the bot ad side by side, the field for the book's code */
.book-ads .way h2 { margin: 0; font-size: clamp(1.45rem, 3.2vw, 1.9rem); }
.book-ads .way--hot h2 { color: var(--on-navy); }
.promo { margin: .4rem 0 0; }
.promo label { display: block; font-weight: 600; margin-bottom: .45rem; }
.promo__row { display: flex; gap: .5rem; }
.promo__row input { flex: 1; min-width: 0; font: inherit; padding: .6rem .75rem; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); text-transform: uppercase; letter-spacing: .06em; }
.promo__row input::placeholder { text-transform: none; letter-spacing: 0; }
.promo__row .button { margin-top: 0; flex: none; }
.promo .promo__status { margin: .45rem 0 0; min-height: 1.4em; color: var(--on-navy); font-weight: 600; }
.promo .promo__status.is-error { color: var(--orange-2); }
.way__price s { color: var(--on-navy-2); font-size: .7em; font-weight: 400; }
.book-ads .way__price { margin-top: .2rem; padding-top: 0; }
.offer .way[hidden] { display: none; } /* the save/day cards wait for a chart (tools.js) */
.offer .way > .button { margin-top: auto; }
.offer .way__plus { margin: auto 0 0; padding-top: .6rem; }
.offer .way__price + .button, .offer .way__plus + .button { margin-top: .4rem; }
/* Home comparison: JyotiSoft against a sun-sign horoscope and a consultation. */
.cmp-wrap { overflow-x: auto; margin-top: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.cmp { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cmp th, .cmp td { padding: .8rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp thead th { font-size: .82rem; font-weight: 600; color: var(--ink-2); background: var(--surface-2); }
.cmp tbody th { font-weight: 600; color: var(--ink-2); }
.cmp td:nth-of-type(1), .cmp thead th:nth-of-type(1) { background: rgba(253, 90, 1, .09); color: var(--ink); font-weight: 600; }
/* Phone: the comparison is one card per row (no sideways scroll to hide a column; data-label names each cell) */
@media (max-width: 640px) {
.cmp-wrap { overflow: visible; border: 0; background: none; box-shadow: none; }
.cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
.cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cmp tr { margin: 0 0 .9rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.cmp tbody th { padding: .7rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cmp td { display: flex; gap: .8rem; padding: .6rem 1rem; }
.cmp td::before { content: attr(data-label); flex: 0 0 38%; min-width: 0; color: var(--ink-2); font-size: .82rem; font-weight: 600; overflow-wrap: anywhere; }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 1px solid var(--line); }
.cmp tr td:last-child { border-bottom: 0; }
}
/* First screen (home review 2026-10-23): one primary action. The header's «open app» is an outline button, the live
block is its own card with air above it, and the sample question reads as a chat bubble, not as a button. */
.site-head .button.button-solid { color: var(--ink); background: transparent; border: 1px solid var(--line-strong); box-shadow: none; }
.now-card { margin-top: 2rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.now-card p { margin: 0 0 .4rem; }
.now-card .actions { margin: .8rem 0 0; }
.now-card .button.button-solid { color: var(--ink); background: transparent; border: 1px solid var(--line-strong); box-shadow: none; }
.awin-q { background: color-mix(in srgb, var(--on-navy) 12%, transparent); color: var(--on-navy); border: 1px solid var(--awin-line); }
/* Home sticky «ask» button on phones: slides in once the hero (with the same
* button) has scrolled away — assets/site.js toggles .is-on. */
.sticky-cta { display: none; }
@media (max-width: 860px) {
.sticky-cta { display: block; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; margin: 0; transform: translateY(110%); transition: transform .2s; padding: .6rem 1.25rem calc(.6rem + env(safe-area-inset-bottom)); background: var(--head-bg); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.sticky-cta .button { width: 100%; }
.sticky-cta.is-on { transform: none; }
main:has(.sticky-cta) { padding-bottom: 4.5rem; }
}
/* Home «here is what you get»: PDF pages left, the app's guest calendar right. */
.proof { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; margin-top: 1.6rem; }
.proof__phone { margin: 0; text-align: center; }
.proof__phone figcaption { margin-top: .8rem; }
/* a real handset (9:19.5) as tall as the PDF cards beside it, not a 2.4:1 tower; the buttons sit below the frame with a gap (owner 2026-10-26) */
/* owner 2026-10-26: the screen must read without zoom: frame ~320 px, taller than the card row on purpose; PDF pages 2x2 beside it */
.proof .grid-4 { grid-template-columns: repeat(2, minmax(0, 16rem)); justify-content: center; }
.proof__phone .phone { width: min(100%, 320px); margin-inline: auto; }
.proof__phone .phone__screen { min-height: 0; aspect-ratio: 9 / 19.5; }
.proof__phone .live-cta { margin: 1rem 0 0; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 860px) { .proof { grid-template-columns: 1fr; } .proof__phone { width: 100%; max-width: 20rem; margin-inline: auto; } }
@media (prefers-reduced-motion: no-preference) {
.chart .frame, .chart .ring { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s cubic-bezier(.4, 0, .2, 1) forwards; }
.chart .ring { transform-origin: 200px 200px; animation: draw 1.6s cubic-bezier(.4, 0, .2, 1) .5s forwards, spin 120s linear 2.1s infinite; }
.chart .planet, .chart .lagna { opacity: 0; animation: appear .6s ease-out 1.4s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
}
/* ── facts strip: only numbers that are true ─────────────────────── */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.facts li { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.2rem; box-shadow: var(--shadow); }
.facts b { display: block; font-family: var(--serif); font-size: 2.1rem; line-height: 1; font-weight: 500; color: var(--accent-ink); margin-bottom: .35rem; font-variant-numeric: tabular-nums; }
.facts span { color: var(--ink-2); font-size: .92rem; line-height: 1.4; display: block; }
.facts-wrap { padding-block: 0 clamp(2rem, 4vw, 3rem); margin-top: -1rem; }
@media (max-width: 860px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ── cards and the bento grid ────────────────────────────────────── */
.card, .tile, .course { background: var(--surface); border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
.card { padding: clamp(1.4rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .8rem; }
.card p { color: var(--ink-2); }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tile { position: relative; display: flex; flex-direction: column; gap: .6rem; padding: 1.6rem 1.5rem 1.5rem; text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.tile p { color: var(--ink-2); flex: 1; }
.tile .icon { font-size: 1.7rem; line-height: 1; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 14px; background: var(--surface-2); margin-bottom: .3rem; }
.tile .go { color: var(--accent-ink); font-weight: 600; font-size: .95rem; }
.tile .go::after { content: " →"; }
.tile .card-index { position: absolute; top: 1.3rem; right: 1.4rem; font-size: .82rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tile--lead { grid-column: span 2; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); border-color: transparent; color: var(--on-navy); }
.tile--lead p, .tile--lead .card-index { color: var(--on-navy-2); }
.tile--lead h3 { font-size: 1.8rem; }
.tile--lead .icon { background: rgba(255, 255, 255, .1); }
.tile--lead .go { color: var(--orange-2); }
.tile--wide { grid-column: 1 / -1; }
@media (max-width: 960px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile--wide { grid-column: span 2; } }
@media (max-width: 600px) { .bento { grid-template-columns: 1fr; } .tile--lead, .tile--wide { grid-column: span 1; } }
/* catalog cards (the tools and articles hubs, 1691 review #8): compact on phones — the icon beside the
title, the summary in two lines (its full text stays in the page) */
@media (max-width: 640px) {
.catalog .grid-3 { gap: .6rem; }
.catalog .tile { gap: .3rem; padding: .95rem 1.1rem; }
.catalog .tile:has(.icon) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .85rem; align-content: start; }
.catalog .tile:has(.icon) > :not(.icon) { grid-column: 2; }
.catalog .tile .icon { grid-row: 1 / span 3; width: 2.4rem; height: 2.4rem; font-size: 1.3rem; margin: 0; }
.catalog .tile p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } .card .data td, .card .data th { overflow-wrap: anywhere; } } /* a long German word must not widen the track (/de/nakshatras/ +17px at 360) */
.card .emoji { font-size: 1.8rem; line-height: 1; }
.card .level { font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
html:lang(hi) .card .level { text-transform: none; letter-spacing: 0; }
.card .actions { margin-top: auto; padding-top: .6rem; }
/* ── screenshots ─────────────────────────────────────────────────── */
.shot { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lift); background: var(--surface-2); }
/* A browser frame: three window dots on a thin bar. */
.shot::before { content: ""; display: block; height: 1.6rem; border-bottom: 1px solid var(--line); background:
radial-gradient(circle, #ff5f57 .26rem, transparent .28rem) .7rem 50% / .8rem .8rem no-repeat,
radial-gradient(circle, #febc2e .26rem, transparent .28rem) 1.6rem 50% / .8rem .8rem no-repeat,
radial-gradient(circle, #28c840 .26rem, transparent .28rem) 2.5rem 50% / .8rem .8rem no-repeat,
var(--surface); }
.shot figcaption { padding: .6rem .9rem; font-size: .85rem; color: var(--ink-2); background: var(--surface); border-top: 1px solid var(--line); }
.phone { width: min(100%, 300px); margin: 0 auto; border-radius: 36px; padding: 10px; background: #0b1422; box-shadow: var(--shadow-lift); }
.phone img { border-radius: 28px; }
.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }
/* ── lists ───────────────────────────────────────────────────────── */
ul.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
ul.checks li { padding-left: 1.6rem; position: relative; }
ul.checks li::before { content: ""; position: absolute; left: .1rem; top: .55em; width: .75rem; height: .45rem; border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(-45deg); }
.trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 760px) { .trust { grid-template-columns: 1fr; } }
.trust h3 { margin-bottom: 1rem; }
.trust li b { display: block; }
ul.checks.nots li::before { content: "×"; width: auto; height: auto; top: 0; left: .15rem; border: 0; transform: none; color: var(--orange); font-weight: 700; line-height: 1.55; }
ol.plain { margin: 0; padding-left: 1.3rem; display: grid; gap: .35rem; color: var(--ink-2); }
ol.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
ol.steps li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; color: var(--ink-2); box-shadow: var(--shadow); }
ol.steps li::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--orange); color: #162b47; font-weight: 700; margin-bottom: .9rem; }
ol.steps li b { display: block; color: var(--ink); font-size: 1.1rem; font-weight: 600; margin-bottom: .35rem; }
@media (max-width: 760px) { ol.steps { grid-template-columns: 1fr; } }
ol.steps.steps--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1080px) { ol.steps.steps--five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { ol.steps.steps--five { grid-template-columns: 1fr; } }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }
.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 0 1.2rem; }
.faq summary { cursor: pointer; list-style: none; display: block; position: relative; padding: 1rem 2.8rem 1rem 0; /* block, not flex: inline words/wordmarks in a question must not become flex items (phone overflow) */ font-size: 1.05rem; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--surface-2); color: var(--accent-ink); font-size: 1.2rem; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-answer { color: var(--ink-2); padding-bottom: 1.1rem; max-width: 64ch; }
.faq summary { color: var(--ink); }
.faq summary:hover { color: var(--accent-ink); }
.faq summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 8px; }
.faq details[open] { border-color: var(--line-strong); box-shadow: inset 3px 0 0 var(--orange); }
.faq details[open] summary::after { background: var(--accent-ink); color: var(--surface); }
.faq details[open] .faq-answer { margin-top: 0; padding-bottom: 1.1rem; padding-inline-start: .9rem; border-inline-start: 2px solid var(--line-strong); }
ol.contents { counter-reset: c; list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
ol.contents li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .3rem 0; padding: 1.1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
ol.contents li::before { counter-increment: c; content: counter(c, upper-roman); color: var(--accent-ink); font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; grid-row: span 2; }
ol.contents h3 { font-size: 1.15rem; }
ol.contents p { color: var(--ink-2); max-width: 60ch; }
.notice { margin-top: 1rem; padding: .85rem 1.1rem; border: 1px solid var(--line-strong); border-left: 3px solid var(--orange); border-radius: 12px; color: var(--ink-2); background: var(--surface); max-width: 44em; }
.price { font-size: 1.25rem; font-weight: 600; margin-bottom: 1.3rem; font-variant-numeric: tabular-nums; }
.price-tag { font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--accent-ink); }
/* ── closing call ────────────────────────────────────────────────── */
.cta { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); background-color: var(--navy); color: var(--on-navy); border-radius: 28px; padding: clamp(2rem, 5vw, 3.75rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.cta::after { content: ""; position: absolute; width: 26rem; height: 26rem; right: -8rem; top: -10rem; border-radius: 50%; background: radial-gradient(circle, rgba(253, 90, 1, .35), transparent 65%); pointer-events: none; }
.cta h2 { margin-bottom: .4rem; }
.cta p { color: var(--on-navy-2); font-size: 1.08rem; }
.cta .actions { position: relative; z-index: 1; }
.cta .button:not(.button-solid) { background: transparent; color: var(--on-navy); border-color: rgba(255, 255, 255, .35); }
/* one column at every width (owner 2026-10-28: the heading was squeezed into a 4-line column beside
floating buttons): heading and text up to ~60ch, the buttons in a row under them, wrapping on a phone */
.cta > div:first-child { position: relative; z-index: 1; max-width: 60ch; }
.cta .actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
/* ── footer ──────────────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--line); background: var(--surface); padding: 3rem 0; font-size: .93rem; color: var(--ink-2); }
/* labels audit 2026-10-28: the logo opens the footer on its own row; the four columns all have a
heading; the last lines never sit under the phone's sticky CTA or the language suggestion */
.site-foot .foot-brand { display: inline-flex; margin-bottom: 1.5rem; }
@media (max-width: 860px) { body:has(.sticky-cta) .site-foot::after { content: ""; display: block; height: calc(4.5rem + env(safe-area-inset-bottom)); } }
body:has(.lang-suggest:not(:empty)) .site-foot { padding-bottom: 4.5rem; }
.site-foot .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.site-foot .cols > div { display: grid; gap: .35rem; align-content: start; }
.site-foot .foot-langs { margin-bottom: 1.25rem; }
.site-foot .foot-langs summary { cursor: pointer; color: var(--ink); font-weight: 600; min-height: 2.75rem; display: flex; align-items: center; }
.site-foot .foot-langs div { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.site-foot .foot-langs a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-foot .cols b { color: var(--ink); margin-bottom: .2rem; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }
.site-foot p { max-width: 75ch; }
/* ── mini-courses (catalog, course page) ─────────────────────────── */
.course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.course { padding: 1.4rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
.course:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.course-emoji { font-size: 1.8rem; line-height: 1; }
.course h3 { font-size: 1.2rem; }
.course p { color: var(--ink-2); flex: 1; font-size: .96rem; }
.course-meta { align-self: flex-start; color: var(--accent-ink); font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; background: var(--surface-2); padding: .25rem .65rem; border-radius: 999px; }
@media (max-width: 960px) { .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .course-grid { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.chip { padding: .5rem .95rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; white-space: nowrap; font-size: .95rem; }
.chip:hover { border-color: var(--ink); }
.back { margin-bottom: 1.1rem; }
.course-mark { font-size: clamp(6rem, 4rem + 8vw, 10rem); line-height: 1; text-align: center; filter: drop-shadow(0 20px 40px rgba(253, 90, 1, .25)); }
@media (max-width: 860px) { .course-mark { display: none; } }
ol.days { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
ol.days li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: .85rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
ol.days b { color: var(--accent-ink); font-weight: 600; }
ol.days span { color: var(--ink-2); }
.sample { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: 0 16px 16px 0; padding: 1.6rem 1.8rem; display: grid; gap: .9rem; max-width: 68ch; }
.sample h3 { font-size: 1rem; font-weight: 600; color: var(--accent-ink); margin-top: .4rem; font-family: var(--sans); }
/* ── report page: pages of a real JyotiSoft PDF ──────────────────── */
.samples .shot::before { display: none; }
.samples img { width: 100%; aspect-ratio: 700 / 989; object-fit: cover; background: #fff; }
/* Phones: the drawing is decoration — keep the facts within the first two screens. */
@media (max-width: 640px) { .orb { width: min(58%, 220px); margin-top: .5rem; } .tool-first__aside .orb { display: none; } }
/* PDF sales page /pdf- (2026-10-05): plan cards and the landing order
* form (assets/order.js — the shared order script, so its class names). */
ol.steps.steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { ol.steps.steps--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { ol.steps.steps--four { grid-template-columns: 1fr; } }
.price-grid { align-items: stretch; margin-top: 1.5rem; }
.price-card h3 { font-size: 1.5rem; }
.price-card .price-value { font-family: var(--serif); font-size: 2.4rem; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; margin: .2rem 0 0; }
.price-card .checks { margin: .4rem 0 0; }
.price-card .actions .button { width: 100%; }
.price-card.is-pick { border: 2px solid var(--orange); box-shadow: var(--shadow-lift); }
.price-card.is-pick .price-value { color: var(--accent-ink); }
@media (min-width: 961px) { .price-card.is-pick { transform: translateY(-.5rem); } }
.button-gold { background: var(--orange); border-color: var(--orange); color: #162b47; }
.button-gold:hover { background: var(--orange-2); border-color: var(--orange-2); }
.order-box { max-width: 52rem; margin-inline: auto; }
.order-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.order-fields .wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .order-fields { grid-template-columns: 1fr; } }
.order-field { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; }
/* Order form variant cards (owner 2026-10-28): a radio built in markup per edition, the recommended one checked. */
.variant-pick { display: grid; gap: .6rem; min-width: 0; }
.variant-pick__label { font-weight: 600; font-size: .95rem; margin: 0; }
.variant-pick__list { display: grid; gap: .6rem; }
.variant-card { position: relative; display: grid; gap: .3rem; width: 100%; text-align: left; font: inherit; color: var(--ink); padding: .85rem 1rem .85rem 2.6rem; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); cursor: pointer; }
.variant-card::before { content: ""; position: absolute; left: 1rem; top: 1.05rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--line-strong); box-sizing: border-box; }
.variant-card[aria-checked="true"] { border: 2px solid var(--orange); padding: calc(.85rem - 1px) calc(1rem - 1px) calc(.85rem - 1px) calc(2.6rem - 1px); }
.variant-card[aria-checked="true"]::before { left: calc(1rem - 1px); top: calc(1.05rem - 1px); border: 5px solid var(--orange); }
.variant-card:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.variant-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.variant-card__price { font-weight: 700; color: var(--accent-ink); white-space: nowrap; }
.variant-card__sub { color: var(--ink-2); font-size: .9rem; font-weight: 400; line-height: 1.4; }
.variant-card__badge { justify-self: start; background: var(--orange); color: #13233b; font-weight: 700; font-size: .78rem; padding: .15rem .6rem; border-radius: 999px; }
.order-field input, .order-field select { font: inherit; font-weight: 400; color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 12px; min-height: 2.9rem; padding: .55rem .8rem; width: 100%; }
.order-check { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink-2); font-size: .95rem; }
.order-check input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--orange); }
.order-status { color: var(--ink-2); min-height: 1.2em; }
.order-status.is-error { color: var(--accent-ink); font-weight: 600; }
.order-card-note { width: 100%; color: var(--ink-2); font-size: .9rem; }
.place-results { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.place-results:empty { display: none; }
.place-results button { font: inherit; width: 100%; text-align: left; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .8rem; cursor: pointer; }
.place-results button:hover { border-color: var(--orange); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#o-done { display: grid; gap: 1rem; justify-items: start; }
#o-done[hidden], .order-box [hidden] { display: none; }
.more .button { white-space: normal; text-align: center; max-width: 100%; }
/* A live sale on /pdf (pdf.js drawSale): regular price struck, −N%, the window. */
.price-card .price-was { display: flex; align-items: center; gap: .5rem; margin: .2rem 0 -.3rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.price-card .price-was[hidden], .price-card .sale-window[hidden] { display: none; }
.price-card .price-was s { text-decoration-thickness: 2px; }
.sale-badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; background: var(--orange); color: #162b47; font-weight: 700; font-size: .85rem; }
.price-card .sale-window { color: var(--accent-ink); font-weight: 600; margin-top: -.3rem; }
/* Reference pages ///… (seo.py): long-form text, fact tables. */
.crumbs { margin-bottom: 1rem; color: var(--ink-2); }
.crumbs a { color: inherit; }
.prose { max-width: 46rem; }
/* numbered steps that the content wrote in one paragraph (seo.steps_list): one step per line, air between them */
ol.read-steps { margin: 0 0 1.2rem; padding-left: 1.7rem; line-height: 1.6; }
ol.read-steps li { padding-left: .25rem; }
ol.read-steps li + li { margin-top: .85rem; }
ol.read-steps li::marker { font-weight: 700; color: var(--ink); }
.ref-body { padding-top: 0; }
.prose h2 { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem); margin: 2.6rem 0 .9rem; max-width: none; }
.prose p, .prose ul, .prose ol { margin: 0 0 1rem; line-height: 1.65; }
.prose .faq { margin-top: .5rem; }
/* Owner 2026-11-04, docs/sites/TEXT_FORMATTING_STANDARD.md: T1 — 46rem ran 83–91 characters a line on a desktop;
text takes ~34em (≈ 66–70), tables and FAQ cards keep the whole column. T12 — a link that is a table cell's
whole content (cities, signs, planets) is a 44 px target. RBUG-4598 — a code sample scrolls in its own box. */
.prose > :is(p, ul, ol, blockquote) { max-width: 34em; }
td > a.link:only-child { display: inline-flex; align-items: center; min-height: 44px; }
main pre { max-width: 100%; overflow-x: auto; }
/* deploy/jyotisoft/site_readable.py (TEXT_FORMATTING_STANDARD.md T2/T4/T8): the lead's second half, the page's own
contents, the facts table as the «In short» card */
.lead-rest { margin-top: .7rem; color: var(--ink-2); max-width: 34em; }
.toc { margin: 0 0 1.6rem; padding: 0 1.2rem; max-width: 34em; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.toc > summary { display: flex; justify-content: space-between; align-items: center; min-height: 48px; font-weight: 600; cursor: pointer; list-style: none; }
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::after { content: "+"; color: var(--accent-ink); font-size: 1.3em; }
.toc[open] > summary::after { content: "–"; }
.toc ol { display: grid; gap: .15rem; margin: 0 0 1rem; padding-left: 1.4rem; }
.toc li { padding: .25rem 0; }
.toc a { color: var(--accent-ink); }
.prose .card.key { margin: 0 0 1.4rem; }
.prose .card.key > h2 { margin: 0; font-size: 1.15rem; }
.prose .card.key > table { margin: 0; }
.prose .card.key th { min-width: 8.5em; overflow-wrap: normal; }
.table-scroll { overflow-x: auto; }
.data { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: .97rem; }
.data caption { caption-side: bottom; text-align: left; padding-top: .6rem; color: var(--ink-2); font-size: .88rem; }
.data th, .data td { text-align: left; vertical-align: top; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
.data tbody th { width: 38%; font-weight: 600; color: var(--ink-2); }
.data thead th { font-weight: 600; border-bottom: 2px solid var(--line-strong); }
/* calculator: a mahadasha row opens its antardashas (book gap G1, tools.js drawDashas) */
.dasha-toggle { text-align: left; }
.dasha-toggle::before { content: "▸"; display: inline-block; width: 1.1em; }
.dasha-toggle[aria-expanded="true"]::before { content: "▾"; }
.data .dasha-antar { padding-left: 2rem; font-weight: 400; }
/* a wide table scrolls inside its own box on a phone instead of pushing the page sideways (site forms audit 2026-10-28) */
@media (max-width: 700px) { .prose .data, .ref-body .data { display: block; max-width: 100%; overflow-x: auto; } }
.see { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; padding: 0; list-style: none; }
.key { margin: 0 0 1.5rem; }
.key h2 { margin-top: 0; font-size: 1.25rem; }
/* Home reviews (site.js fills them from /api/v1/reviews). */
.review { margin: 0; }
.review blockquote { margin: 0; color: var(--ink); }
.card .review__stars { color: var(--accent-ink); letter-spacing: .1em; }
/* Home «Jyotish reference»: whole cards are links to the hubs. */
.ref-card { color: inherit; text-decoration: none; }
.ref-card:hover h3, .ref-card:focus-visible h3 { color: var(--accent-ink); }
/* Compatibility landing: the Mini App's match screen in words — engine scores,
* app labels (build_site.compatibility). */
.compat-card { margin: 0; min-width: 0; }
.compat-card .kicker { margin: 0; }
.compat-card__title { font-size: 1.5rem; }
.compat-card__total { color: var(--ink-2); }
.compat-card__total b { font-family: var(--serif); font-size: 2.2rem; font-weight: 600; color: var(--ink); }
.kutas { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.kutas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .8rem; font-size: .92rem; color: var(--ink-2); }
.kutas li b { color: var(--ink); }
.kutas .bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.kutas .bar i { display: block; height: 100%; border-radius: 3px; background: var(--t-good); }
/* Bar colours mean what they mean on the app's time scale (tma-jyotisoft.css
* --jy-tma-day-*): best = full score, fine = some, zero = a limit to know. */
.kutas .bar--best i { background: var(--t-best); }
.kutas .bar--zero { background: var(--t-bad-soft); }
#calculator .card { gap: .7rem; }
.kuta-list { margin: 0; padding-left: 1.2rem; display: grid; gap: .55rem; }
.tool-form { display: grid; gap: .8rem; margin-bottom: 1.5rem; }
.tool-person { border: 0; padding: 0; margin: 0; display: grid; gap: .6rem; }
.tool-person legend { font-weight: 600; margin-bottom: .3rem; }
.tool-person label { display: grid; gap: .3rem; font-size: .95rem; }
.tool-person input[type="date"], .tool-person input[type="time"], .tool-person input[type="text"] { font: inherit; padding: .6rem .75rem; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); }
.tool-person .tool-check { display: flex; align-items: center; gap: .5rem; }
.tool-result { margin: 0 0 2rem; }
/* result cards of the site tools (owner 2026-10-28: readable results, no plain-text walls):
a key number in a badge, the label and its ruler beside it, the meaning below */
.res-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.25rem; margin: 0 0 1rem; box-shadow: var(--shadow); }
.res-card__head { display: flex; gap: .9rem; align-items: center; margin-bottom: .7rem; }
.res-card__num { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--surface-2); color: var(--accent-ink); font: 600 1.5rem/1 var(--serif); }
.res-card__title { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.res-card__ruler { margin: .2rem 0 0; color: var(--ink-2); font-weight: 600; font-size: .95rem; }
.res-card__body { margin: 0; }
.res-card > * + * { margin-top: .6rem; }
.res-card > .res-card__head + * { margin-top: 0; }
.nm-latin { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.nm-latin label { font-weight: 600; font-size: .95rem; }
.nm-latin__row { display: flex; gap: .6rem; align-items: stretch; }
.nm-latin__row input { flex: 1 1 0; width: 0; min-width: 0; }
.nm-latin__row .button { flex: none; }
.nm-latin p { margin: 0; }
/* Lo Shu: a real 3×3 square; a digit you have is filled (repeated as often as it occurs), a missing one dashed */
.loshu { border-collapse: separate; border-spacing: .4rem; margin: -.4rem 0 .2rem; }
.loshu td { width: 3.6rem; height: 3.6rem; padding: 0; text-align: center; vertical-align: middle; border-radius: 12px; font: 600 1.15rem/1.1 var(--serif); letter-spacing: .02em; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.loshu td.is-missing { background: transparent; border: 1px dashed var(--line-strong); color: var(--ink-2); font-weight: 400; }
/* Chart calculator (seo.py tool "chart", assets/tools.js drawChart): the South
* Indian layout, signs fixed in the 4x4 frame; the same data is in the table. */
.sichart { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-areas: "s11 s0 s1 s2" "s10 mid mid s3" "s9 mid mid s4" "s8 s7 s6 s5"; gap: 1px; max-width: 28rem; margin: .6rem 0 1.4rem; border: 1px solid var(--line-strong); background: var(--line-strong); }
.sichart > * { background: var(--surface); padding: .35rem .4rem; min-height: 4.6rem; font-size: .95rem; line-height: 1.35; overflow-wrap: anywhere; }
.sichart small { display: block; color: var(--ink-2); font-size: .72rem; }
.sichart b { font-weight: 600; }
.sichart .lg { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--orange); }
.sichart__mid { grid-area: mid; display: grid; place-items: center; text-align: center; font-family: var(--serif); font-size: 1.1rem; color: var(--ink-2); }
.sichart .s0 { grid-area: s0; } .sichart .s1 { grid-area: s1; } .sichart .s2 { grid-area: s2; } .sichart .s3 { grid-area: s3; } .sichart .s4 { grid-area: s4; } .sichart .s5 { grid-area: s5; }
.sichart .s6 { grid-area: s6; } .sichart .s7 { grid-area: s7; } .sichart .s8 { grid-area: s8; } .sichart .s9 { grid-area: s9; } .sichart .s10 { grid-area: s10; } .sichart .s11 { grid-area: s11; }
/* Aspect layer on the calculator's chart (assets/chart-aspects.js, flag aspect_layer). */
/* North Indian diamond of the chart calculator (tools.js drawNorthChart): one SVG, houses 1, 5 and 10 tinted. */
.nchart { max-width: 28rem; margin: .6rem 0 1.4rem; }
.nchart__svg { display: block; width: 100%; height: auto; background: var(--surface); border: 1px solid var(--line-strong); }
.nchart__svg rect, .nchart__svg path { fill: none; stroke: var(--line-strong); stroke-width: .5; vector-effect: non-scaling-stroke; }
.nchart__hl { fill: var(--orange); fill-opacity: .1; stroke: none; }
.nchart__pl { fill: var(--ink); font-weight: 600; }
.nchart .is-lagna { fill: var(--orange); }
.nchart__r { fill: var(--ink-2); font-weight: 400; }
.nchart__n { fill: var(--ink-2); }
.nchart__key li { margin: .35rem 0; }
.sichart--asp { position: relative; }
.sichart--asp [data-pl] { cursor: pointer; outline-offset: 2px; border-radius: 3px; }
.sichart--asp .sichart__c { cursor: pointer; }
.sichart--asp .sichart__c.asp-sel { background: var(--surface-2); }
.asp-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
/* the overlay is not a grid cell: no cell sheet over the chart (it hid the South chart, owner 2026-10-30) */
.sichart > .asp-svg { background: none; padding: 0; min-height: 0; }
/* the North diamond under the layer: each house a tap target, each graha its own */
.nchart__h { fill: transparent; stroke: none; }
.nchart__n { pointer-events: none; }
.nchart__pl { pointer-events: none; }
.nchart__pl [data-pl] { pointer-events: auto; }
.nchart--asp { position: relative; }
.nchart--asp .nchart__h, .nchart--asp [data-pl] { cursor: pointer; }
.nchart--asp .nchart__h.asp-sel { fill: var(--ink); fill-opacity: .06; }
.nchart--asp [data-pl]:focus { outline: none; }
.nchart--asp [data-pl]:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.asp-tgt { fill: currentColor; fill-opacity: .1; stroke: currentColor; stroke-width: 2.4; stroke-dasharray: 6 4; }
.asp-tgt.partial { stroke-dasharray: 2 4; }
.asp-arw { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-dasharray: 5 4; }
.asp-arw.partial { stroke-dasharray: 2 4; }
.asp-head, .asp-dot { fill: currentColor; }
.asp-ring { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-dasharray: 3 3; }
@media (prefers-reduced-motion: no-preference) { .asp-arw { animation: asp-march 1s linear infinite; } .asp-ring { animation: asp-march 2s linear infinite; } }
@keyframes asp-march { to { stroke-dashoffset: -18; } }
.asp-csun { color: #d9822b; } .asp-cmoon { color: #6b7fa3; } .asp-cmars { color: #c0392b; } .asp-cmercury { color: #2e8b57; } .asp-cjupiter { color: #b8941f; }
.asp-cvenus { color: #c2589b; } .asp-csaturn { color: #4b5d8a; } .asp-crahu { color: #7a5c96; } .asp-cketu { color: #8a6a4d; } .asp-clagna { color: var(--orange); }
.asp-bar { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; max-width: 28rem; }
.asp-mode { display: inline-flex; gap: .4rem; }
.asp-card { max-width: 28rem; padding: .6rem .8rem; border-radius: 12px; background: var(--surface-2); margin: .6rem 0; }
.asp-card h4 { margin: .6rem 0 .2rem; font-size: .9rem; color: var(--ink-2); }
.asp-facts, .asp-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .25rem; }
.asp-why { display: block; font-size: .8rem; color: var(--ink-2); }
.asp-lesson { border-left: 3px solid var(--orange); padding-left: .6rem; }
.asp-time { max-width: 28rem; }
ul.read { display: grid; gap: .6rem; padding-left: 1.2rem; }
.data.positions tbody th { width: auto; }
@media (max-width: 600px) { .data.positions { font-size: .88rem; } .data.positions th, .data.positions td { padding: .5rem .4rem; } }
/* «Time of day» page: today's strip from the API (panchanga_day.band, SSI).
* Segment colours and glow follow the app's time scale (tma-jyotisoft.css
* --jy-tma-day-*): green = the best window, red = a limit. Plain elements with
* box-shadow, not an SVG filter (WebKit ignores CSS filters inside SVG). */
.day-card { margin: 0; min-width: 0; gap: .9rem; }
.day-band { display: grid; gap: .8rem; }
.day-band__when { margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.day-band__sun { margin: 0; font-family: var(--serif); font-size: 1.45rem; font-weight: 600; color: var(--ink); }
.day-band__track { position: relative; height: 10px; border-radius: 5px; background: var(--line); }
.day-band__track i { position: absolute; top: 0; bottom: 0; border-radius: 5px; }
.day-band__track .best { background: var(--t-best); box-shadow: 0 0 2px var(--t-best), 0 0 10px color-mix(in srgb, var(--t-best) 50%, transparent); }
.day-band__track .bad { background: var(--t-bad); box-shadow: 0 0 2px var(--t-bad), 0 0 10px color-mix(in srgb, var(--t-bad) 50%, transparent); }
.day-band__list { list-style: none; margin: 0; padding: 0; display: grid; }
.day-band__list li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: .1rem .7rem; padding: .6rem 0; border-top: 1px solid var(--line); font-size: .92rem; color: var(--ink-2); text-align: left; }
.day-band__list li b { color: var(--ink); font-weight: 600; min-width: 0; }
.day-band__list li::before { content: ""; width: 18px; height: 6px; border-radius: 3px; background: var(--t-bad); }
.day-band__list li.best::before { background: var(--t-best); }
/* «Today by Moon sign»: Chandra/Tara bala tones; the ✓ ○ × marks and words carry the same meaning. */
.moon-today .mt-good { color: color-mix(in srgb, var(--t-best) 72%, var(--ink)); font-weight: 600; }
.moon-today .mt-mid { color: var(--p-ju); }
.moon-today .mt-bad { color: color-mix(in srgb, var(--t-bad) 72%, var(--ink)); font-weight: 600; }
/* Four columns scroll sideways on a phone instead of breaking CJK words one glyph per line. */
.moon-today .data { min-width: 36rem; }
.moon-today .data tbody th { width: auto; }
.day-band__time { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-band__cap { grid-column: 2 / -1; font-size: .88em; }
/* ── «Ритм дня» (modules/landing/day_rhythm.py, SSI ?view=rhythm) ─────────────────────────
* The Vedic day, sunrise to sunrise, layer by layer: rows on a wide screen, columns on a phone
* (no sideways scroll at 390 px). Positions are --a/--b, fractions of the day; --l is a window's
* lane. Colours are the Mini App's (tma-jyotisoft.css), so the site and the app read as one
* product; a mark (▲ ● ! ▼) carries the verdict too. Dark values written twice, as above. */
.dr {
--dr-best: #62e7a0; --dr-best-i: #10221d; --dr-best-e: #008a43;
--dr-good: #e2f2e9; --dr-good-i: #1d7349; --dr-good-e: #1d7349;
--dr-neutral: #e3e9f1; --dr-neutral-i: #53668b; --dr-neutral-e: rgba(19, 35, 59, .24);
--dr-caution: #fff1d1; --dr-caution-i: #8a5a00; --dr-caution-e: #ff8b00;
--dr-bad: #fbe6e4; --dr-bad-i: #b3261e; --dr-bad-e: #e50b3b;
--dr-su: #c2410c; --dr-mo: #1d6fa3; --dr-ma: #c0262d; --dr-me: #15803d; --dr-ju: #8a5a00; --dr-ve: #a8327a; --dr-sa: #3b44b0;
--dr-tint: 7%;
--dr-windows: #c2410c; --dr-windows-s: #ffe9df; --dr-choghadiya: #1d5fbf; --dr-choghadiya-s: #e4edfb;
--dr-hora: #8a5a00; --dr-hora-s: #fbf1d6; --dr-tithi: #0369a1; --dr-tithi-s: #e0f0fa;
--dr-nakshatra: #5f36a8; --dr-nakshatra-s: #efe8fb; --dr-yoga: #0d6660; --dr-yoga-s: #dff3f0;
--dr-karana: #761680; --dr-karana-s: #f7e6f9;
margin: 2rem 0;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .dr {
--dr-best: #62e7a0; --dr-best-i: #10221d; --dr-best-e: #3ddc8a;
--dr-good: rgba(127, 217, 168, .14); --dr-good-i: #7fd9a8; --dr-good-e: #4fbf86;
--dr-neutral: #1a3758; --dr-neutral-i: #a3b6c7; --dr-neutral-e: #5a7190;
--dr-caution: rgba(244, 205, 85, .15); --dr-caution-i: #f4cd55; --dr-caution-e: #ff9a1f;
--dr-bad: rgba(255, 154, 144, .15); --dr-bad-i: #ff9a90; --dr-bad-e: #ff4d6a;
--dr-su: #ff9a52; --dr-mo: #72cff2; --dr-ma: #ff7a7a; --dr-me: #8fe7b3; --dr-ju: #f4cd55; --dr-ve: #f58cc8; --dr-sa: #b3b8ff;
--dr-tint: 14%;
--dr-windows: #f7a482; --dr-windows-s: rgba(194, 65, 12, .2); --dr-choghadiya: #8cb4ee; --dr-choghadiya-s: rgba(29, 95, 191, .22);
--dr-hora: #f2c46b; --dr-hora-s: rgba(161, 98, 7, .22); --dr-tithi: #7dcffd; --dr-tithi-s: rgba(3, 105, 161, .22);
--dr-nakshatra: #b39bde; --dr-nakshatra-s: rgba(109, 63, 192, .22); --dr-yoga: #89f0e8; --dr-yoga-s: rgba(15, 118, 110, .22);
--dr-karana: #e9a6ef; --dr-karana-s: rgba(134, 25, 143, .24);
}
}
:root[data-theme="dark"] .dr {
--dr-best: #62e7a0; --dr-best-i: #10221d; --dr-best-e: #3ddc8a;
--dr-good: rgba(127, 217, 168, .14); --dr-good-i: #7fd9a8; --dr-good-e: #4fbf86;
--dr-neutral: #1a3758; --dr-neutral-i: #a3b6c7; --dr-neutral-e: #5a7190;
--dr-caution: rgba(244, 205, 85, .15); --dr-caution-i: #f4cd55; --dr-caution-e: #ff9a1f;
--dr-bad: rgba(255, 154, 144, .15); --dr-bad-i: #ff9a90; --dr-bad-e: #ff4d6a;
--dr-su: #ff9a52; --dr-mo: #72cff2; --dr-ma: #ff7a7a; --dr-me: #8fe7b3; --dr-ju: #f4cd55; --dr-ve: #f58cc8; --dr-sa: #b3b8ff;
--dr-tint: 14%;
--dr-windows: #f7a482; --dr-windows-s: rgba(194, 65, 12, .2); --dr-choghadiya: #8cb4ee; --dr-choghadiya-s: rgba(29, 95, 191, .22);
--dr-hora: #f2c46b; --dr-hora-s: rgba(161, 98, 7, .22); --dr-tithi: #7dcffd; --dr-tithi-s: rgba(3, 105, 161, .22);
--dr-nakshatra: #b39bde; --dr-nakshatra-s: rgba(109, 63, 192, .22); --dr-yoga: #89f0e8; --dr-yoga-s: rgba(15, 118, 110, .22);
--dr-karana: #e9a6ef; --dr-karana-s: rgba(134, 25, 143, .24);
}
.dr h2 { margin-bottom: .2rem; }
.dr-sub { color: var(--ink-2); font-size: .95rem; margin-bottom: 1rem; }
.dr-chart { --lab: 8.5rem; position: relative; display: grid; gap: 5px; }
.dr-axis { position: relative; height: 2.4rem; margin-left: var(--lab); font-size: .75rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dr-axis span { position: absolute; left: calc(var(--a) * 100%); top: 0; transform: translateX(-50%); white-space: nowrap; }
.dr-axis .dr-sun { top: 1.15rem; color: var(--accent-ink); font-weight: 700; }
.dr-axis .dr-sun[style="--a:0"] { transform: none; }
.dr-axis .dr-end { transform: translateX(-100%); }
.dr-row { display: grid; grid-template-columns: var(--lab) 1fr; align-items: stretch; min-height: 2.1rem; }
.dr-r-windows { min-height: calc(var(--lanes) * 24px + 6px); }
.dr-r-choghadiya, .dr-r-hora { min-height: 2.5rem; }
.dr-r-windows { margin-top: .6rem; }
/* the day's one summary (modules/daily_render/summary.py): the scale's fill with its edge */
.dr-r-summary .dr-p { border-bottom: 3px solid var(--e); }
.dr-best { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: 0 0 1rem; font-size: .9rem; }
.dr-best b { font-weight: 600; }
.dr-pill { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .65rem; border-radius: 999px; border: 1px solid var(--e); background: var(--f); color: var(--i); font-weight: 600; font-size: .85rem; font-variant-numeric: tabular-nums; }
.dr-pill.dr-past { opacity: .55; }
.dr-r-tithi { margin-top: .6rem; }
.dr-name { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; padding-right: .5rem; }
.dr-ico { display: inline-grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 8px; }
.dr-ico svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dr-r-summary .dr-ico { color: var(--orange-2); background: var(--navy); }
.dr-r-windows .dr-ico { color: var(--dr-windows); background: var(--dr-windows-s); }
.dr-r-choghadiya .dr-ico { color: var(--dr-choghadiya); background: var(--dr-choghadiya-s); }
.dr-r-hora .dr-ico { color: var(--dr-hora); background: var(--dr-hora-s); }
.dr-r-tithi { --hue: var(--dr-tithi); --soft: var(--dr-tithi-s); }
.dr-r-nakshatra { --hue: var(--dr-nakshatra); --soft: var(--dr-nakshatra-s); }
.dr-r-yoga { --hue: var(--dr-yoga); --soft: var(--dr-yoga-s); }
.dr-r-karana { --hue: var(--dr-karana); --soft: var(--dr-karana-s); }
:is(.dr-r-tithi, .dr-r-nakshatra, .dr-r-yoga, .dr-r-karana) .dr-ico { color: var(--hue); background: var(--soft); }
.dr-track { position: relative; border-radius: 8px; background: var(--surface-2); }
.dr-night { position: absolute; inset: 0 0 0 calc(var(--a) * 100%); background: rgba(10, 21, 36, .07); border-radius: 0 8px 8px 0; pointer-events: none; }
.dr-now { position: absolute; top: -3px; bottom: -3px; left: calc(var(--a) * 100%); width: 2px; background: var(--orange); z-index: 3; pointer-events: none; }
.dr-p { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); display: flex; align-items: center; justify-content: center; gap: .2em; overflow: visible; font-size: .72rem; font-weight: 600; line-height: 1.1; color: var(--i); background: var(--f); box-shadow: inset 1px 0 0 var(--surface); cursor: default; outline: none; }
.dr-p > b { font-size: .7em; flex: none; }
.dr-lbl { overflow: hidden; white-space: nowrap; min-width: 0; }
.dr-lv, .dr-nm-s { display: none; }
.dr-r-choghadiya .dr-p { font-size: .66rem; }
.dr-r-choghadiya .dr-p > b { position: absolute; top: 2px; left: 3px; font-size: .5rem; }
/* a narrow window's name beside it, on the track: the page ink */
.dr-out { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; color: var(--ink); font-weight: 600; pointer-events: none; }
.dr-out-r { left: calc(100% + 4px); }
.dr-out-l { right: calc(100% + 4px); }
.dr-q-best { --f: var(--dr-best); --i: var(--dr-best-i); --e: var(--dr-best-e); }
.dr-q-good { --f: var(--dr-good); --i: var(--dr-good-i); --e: var(--dr-good-e); }
.dr-q-neutral { --f: var(--dr-neutral); --i: var(--dr-neutral-i); --e: var(--dr-neutral-e); }
.dr-q-caution { --f: var(--dr-caution); --i: var(--dr-caution-i); --e: var(--dr-caution-e); }
.dr-q-bad { --f: var(--dr-bad); --i: var(--dr-bad-i); --e: var(--dr-bad-e); }
.dr-r-windows .dr-p { top: calc(3px + var(--l) * 24px); bottom: auto; height: 21px; border: 1.5px solid var(--e); border-radius: 6px; box-shadow: none; }
.dr-hatch { background-image: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--e) 18%, transparent) 5px 7px); }
:is(.dr-r-tithi, .dr-r-nakshatra, .dr-r-yoga, .dr-r-karana) .dr-p { justify-content: flex-start; padding-left: .5rem; background: var(--soft); color: var(--hue); border-bottom: 3px solid var(--e); }
.dr-r-hora .dr-p { font-size: .95rem; font-weight: 400; }
.dr-pl-sun { --pc: var(--dr-su); } .dr-pl-moon { --pc: var(--dr-mo); } .dr-pl-mars { --pc: var(--dr-ma); } .dr-pl-mercury { --pc: var(--dr-me); }
.dr-pl-jupiter { --pc: var(--dr-ju); } .dr-pl-venus { --pc: var(--dr-ve); } .dr-pl-saturn { --pc: var(--dr-sa); }
.dr-r-hora .dr-p { color: var(--pc); background: color-mix(in srgb, var(--pc) var(--dr-tint), var(--surface)); }
/* the period's card: its name, time and verdict on hover, tap or keyboard focus */
.dr-p:hover, .dr-p:focus-visible, .dr-p:focus { z-index: 4; box-shadow: inset 0 0 0 2px var(--orange); }
.dr-p:hover::after, .dr-p:focus::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 5; width: max-content; max-width: min(18rem, 80vw); padding: .45rem .7rem; border-radius: 10px; background: var(--navy); color: var(--on-navy); font-size: .8rem; font-weight: 500; line-height: 1.35; white-space: normal; text-align: left; box-shadow: var(--shadow-lift); pointer-events: none; }
.dr-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1rem; font-size: .82rem; color: var(--ink-2); }
.dr-sw { display: inline-flex; align-items: center; gap: .35rem; }
.dr-sw i { display: inline-grid; place-items: center; width: 1.4rem; height: 1rem; border-radius: 4px; font-style: normal; font-size: .62rem; color: var(--i); background: var(--f); border-bottom: 3px solid var(--e); }
@media (max-width: 720px) {
/* a phone: time runs down, one column per layer */
.dr-chart { --lab: 0; grid-template-columns: 2.6rem .8fr minmax(2.4rem, calc(var(--lanes) * .9rem)) repeat(6, 1fr); grid-template-rows: auto 1080px; gap: 0 3px; }
.dr-r-summary .dr-p { border-bottom: 0; border-left: 3px solid var(--e); }
.dr-axis { grid-column: 1; grid-row: 2; height: auto; margin: 0; }
.dr-axis span { left: auto; right: .3rem; top: calc(var(--a) * 100%); transform: translateY(-50%); font-size: .68rem; }
.dr-axis .dr-sun { top: calc(var(--a) * 100%); }
.dr-axis .dr-sun[style="--a:0"] { transform: none; }
.dr-axis .dr-end { transform: translateY(-100%); }
.dr-row { grid-row: 1 / span 2; grid-template-columns: 1fr; grid-template-rows: auto 1080px; min-height: 0; margin: 0; }
.dr-name { flex-direction: column; justify-content: flex-end; gap: .2rem; padding: 0 0 .4rem; font-size: .62rem; text-align: center; overflow-wrap: anywhere; }
.dr-night { inset: calc(var(--a) * 100%) 0 0 0; border-radius: 0 0 8px 8px; }
.dr-now { top: calc(var(--a) * 100%); bottom: auto; left: -3px; right: -3px; width: auto; height: 2px; }
.dr-p { top: calc(var(--a) * 100%); bottom: auto; left: 0; width: auto; right: 0; height: calc((var(--b) - var(--a)) * 100%); flex-direction: column; justify-content: flex-start; padding-top: 3px; box-shadow: inset 0 1px 0 var(--surface); }
.dr-lh, .dr-out, .dr-nm { display: none; }
.dr-nm-s { display: block; }
.dr-lv { display: block; writing-mode: vertical-rl; transform: rotate(180deg); max-height: calc(100% - 1.2rem); }
.dr-r-windows .dr-p { top: calc(var(--a) * 100%); left: calc(var(--l) * 100% / var(--lanes) + 1px); width: calc(100% / var(--lanes) - 2px); right: auto; height: calc((var(--b) - var(--a)) * 100%); }
:is(.dr-r-tithi, .dr-r-nakshatra, .dr-r-yoga, .dr-r-karana) .dr-p { padding-left: 0; border-bottom: 0; border-left: 3px solid var(--e); justify-content: flex-start; }
.dr-r-hora .dr-p { justify-content: center; }
.dr-p:hover::after, .dr-p:focus::after { position: fixed; top: auto; bottom: 1rem; left: 1rem; right: 1rem; transform: none; width: auto; max-width: none; font-size: .9rem; padding: .8rem 1rem; }
}
.card .chips { margin-top: 0; }
/* the courses index on a phone: the categories are one scrolling row, so a course shows in the first screen */
@media (max-width: 640px) { .chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1.25rem; padding-inline: 1.25rem; } .chips--scroll::-webkit-scrollbar { display: none; } .chips--scroll .chip { flex: 0 0 auto; } }
.card .chip { font-size: .85rem; padding: .35rem .75rem; }
.price-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
.price-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .95rem 1.2rem; border-top: 1px solid var(--line); }
.price-list li:first-child { border-top: 0; }
.price-list b { font-family: var(--serif); font-weight: 600; white-space: nowrap; }
/* «Forecast» page: the next twelve months from the API (sky_year.py, SSI).
* A planet's segment wears the planet's colour from the Mini App tokens
* (tma-jyotisoft.css --jy-tma-ju/sa/ra/me); the tooltip names the sign. */
.sky-card { margin: 0; min-width: 0; gap: .9rem; }
.sky-year { display: grid; gap: .9rem; }
.sky-year__span { margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.sky-year__row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .3rem .9rem; align-items: center; }
.sky-year__row b { color: var(--ink); font-weight: 600; }
.sky-year__row p { grid-column: 2; margin: 0; }
.sky-year__track { position: relative; height: 10px; border-radius: 5px; background: var(--line); }
.sky-year__track i { position: absolute; top: 0; bottom: 0; border-radius: 5px; border-right: 2px solid var(--surface); }
.sky-year__track .ju { background: var(--p-ju); }
.sky-year__track .sa { background: var(--p-sa); }
.sky-year__track .ra { background: var(--p-ra); }
.sky-year__track .me { background: var(--p-me); }
.sky-year__ecl-h { margin: 0; font-weight: 600; color: var(--ink); }
.sky-year__ecl { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; font-size: .92rem; color: var(--ink-2); }
@media (max-width: 560px) { .sky-year__row { grid-template-columns: 1fr; } .sky-year__row p { grid-column: 1; } }
/* Mini App page: each tab card opens that tab in the app. */
.tab-card { color: inherit; text-decoration: none; }
.tab-card:hover h3, .tab-card:focus-visible h3 { color: var(--accent-ink); }
/* The Mini App's «Today» screen in HTML (build_site.live_phone): the app's own
* surfaces — background, white card, tab bar with the active tab in orange. */
.phone--live { padding: 10px; }
.phone__screen { text-align: left; display: flex; flex-direction: column; gap: .8rem; min-height: 560px; padding: 1.4rem 1rem .6rem; border-radius: 28px; background: var(--bg); color: var(--ink); overflow: hidden; }
.phone__title { margin: 0; font-family: var(--serif); font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.phone__card { display: grid; gap: .6rem; padding: 1rem; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.phone__h { margin: 0; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.phone__card .day-band__sun { font-size: 1.05rem; }
.phone__card .day-band__list li { font-size: .8rem; padding: .45rem 0; }
/* five app tab names, spaced and on one line however long the language's words (visual QA 2026-10-20: they ran together) */
.phone__tabs { display: flex; justify-content: space-between; gap: .1rem; margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--line); font-size: .47rem; white-space: nowrap; color: var(--ink-2); }
.phone__tabs .on { color: var(--accent-ink); font-weight: 700; }
/* In the narrow phone the window's time goes under its name. */
.phone__card .day-band__list li { grid-template-columns: 14px minmax(0, 1fr); }
.phone__card .day-band__list li::before { width: 14px; }
.phone__card .day-band__time, .phone__card .day-band__cap { grid-column: 2; }
/* Static fallback of the phone (before/without the live app frame): the app's own look — tinted rows, a thicker timeline, a tab bar with an orange dot — so a slow frame still looks designed. */
.phone--live .phone__screen { background: linear-gradient(180deg, color-mix(in srgb, var(--orange) 9%, var(--bg)), var(--bg) 38%); }
.phone__card .day-band__track { height: 14px; border-radius: 7px; }
.phone__card .day-band__track i { border-radius: 7px; }
.phone__card .day-band__list { gap: .4rem; }
.phone__card .day-band__list li { border-top: 0; padding: .55rem .7rem; border-radius: 12px; background: var(--surface-2); }
.phone__tabs { font-size: .55rem; padding-bottom: .3rem; }
.phone__tabs span { display: grid; justify-items: center; gap: .25rem; }
.phone__tabs span::before { content: ""; width: 1.2rem; height: .35rem; border-radius: .2rem; background: var(--line); }
.phone__tabs .on::before { background: var(--orange); }
/* Touch targets >= 44px (WCAG 2.5.8 asks 24, phones want 44): header controls, chips, and
* the stacked link lists (mobile menu, footer) on a touch screen or a narrow window. */
.theme-toggle { width: 2.75rem; height: 2.75rem; }
.lang-menu__button, .brand, .ask-chip, .chip, .menu summary { min-height: 2.75rem; }
.ask-chip, .chip { display: inline-flex; align-items: center; }
@media (pointer: coarse), (max-width: 760px) {
.menu nav a, .site-foot .cols a, .lang-menu__list a { display: flex; align-items: center; min-height: 2.75rem; }
.site-foot .cols > div { gap: 0; }
}
@media (min-width: 1121px) { .nav a { display: inline-flex; align-items: center; min-height: 2.75rem; } }
/* Destiny Navigator page and games hub (2026-10-11). The hero gives the
* scene preview the wider column; the loop keeps its poster's aspect while it loads. */
.hero--media .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
@media (max-width: 860px) { .hero--media .wrap { grid-template-columns: 1fr; } }
.shot video { display: block; width: 100%; height: auto; aspect-ratio: 960 / 542; object-fit: cover; background: var(--surface-2); }
.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.area { gap: .55rem; }
.area__icon { flex: none; width: 2.75rem; height: 2.75rem; }
.area h3 { margin: 0; }
.area ul { margin: 0; padding-left: 1.1rem; color: var(--ink-2); font-size: .95rem; display: grid; gap: .25rem; }
.song figcaption { font-weight: 600; }
.song audio { width: 100%; }
.games { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; margin-bottom: 1.2rem; }
@media (max-width: 760px) { .games { grid-template-columns: 1fr; } }
.game img { display: block; width: 100%; height: auto; border-radius: 12px; }
.game h3 { margin: 0; }
.game .way__tag { margin-bottom: .3rem; }
.game--soon { background: var(--surface-2); box-shadow: none; border: 1px dashed var(--line-strong); }
.game--soon .way__tag { color: var(--ink-2); }
.game--soon .emoji { font-size: 3rem; }
/* Lessons (seo.py widget_block + assets/learn.js): steps as a numbered list,
a calculator card whose controls come with the page. */
ol.steps.steps--list { grid-template-columns: 1fr; gap: .7rem; margin-bottom: 1.5rem; }
ol.steps.steps--list li { padding: 1rem 1.2rem; display: grid; grid-template-columns: 2.2rem 1fr; column-gap: .9rem; }
ol.steps.steps--list li::before { margin: 0; grid-row: span 2; }
ol.steps.steps--list li b { margin: 0; }
.learn { margin: 0 0 2rem; }
.learn-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .8rem; align-items: end; }
.learn-controls label { display: grid; gap: .3rem; font-size: .95rem; }
.learn-controls input, .learn-controls select { font: inherit; padding: .55rem .7rem; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); min-width: 0; }
.learn-controls input[type="range"] { padding: 0; border: 0; background: none; accent-color: var(--orange); }
.learn-controls output { font-weight: 600; font-variant-numeric: tabular-nums; }
.learn-out { min-height: 12rem; }
.learn[data-widget="nakshatra-steps"] .learn-out { min-height: 0; }
.learn-out tr.on td { background: var(--surface-2); font-weight: 600; }
ol.learn-steps { margin: .4rem 0 1rem; padding-left: 1.3rem; display: grid; gap: .45rem; color: var(--ink-2); }
.learn-grid { display: grid; grid-template-columns: 13.75rem 1fr; gap: 1.2rem; align-items: center; }
@media (max-width: 600px) { .learn-grid { grid-template-columns: 1fr; justify-items: center; } }
.learn-svg { display: block; max-width: 100%; height: auto; margin: .3rem 0 .6rem; }
.learn-svg .seg { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1; }
.learn-svg .seg.on, .learn-svg .k.k-rahu { fill: var(--orange); }
.learn-svg .moon { fill: var(--ink); }
.learn-svg .earth { fill: var(--accent-ink); }
.learn-svg .sun { fill: var(--orange); }
.learn-svg .disc { fill: #1c2a3d; stroke: var(--line-strong); }
.learn-svg .lit { fill: #f4ead2; }
.learn-svg .orbit { fill: none; stroke: var(--line-strong); stroke-dasharray: 3 4; }
.learn-svg .ray { stroke: var(--line-strong); stroke-width: 1.5; }
.learn-svg .ray.on { stroke: var(--orange); stroke-width: 2; }
.learn-svg .k { fill: var(--surface-2); stroke: var(--line-strong); }
.learn-svg .k.k-yama { fill: #e7b36a; }
.learn-svg .k.k-gulika { fill: #9fb4cf; }
.learn-svg text { fill: var(--ink); font-size: 12px; }
.learn-svg.sw { display: inline-block; margin: 0 .35rem 0 0; vertical-align: -1px; }
.learn-svg text.big { font-size: 28px; font-weight: 600; }
.learn-svg text.small { font-size: 11px; fill: var(--ink-2); }
/* ── pricing page /pricing- (tiers Lite / Pro / Academy, 2026-10-14; mockup astro-108-946) ── */
.hero--tiers { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.hero--tiers .lead { margin: 1.2rem 0 0; }
.hero--tiers h1 { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 3.6rem); max-width: 18ch; }
.tier-trust { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.4rem; padding: 0; list-style: none; color: var(--ink-2); font-size: .95rem; }
.tier-trust li { position: relative; padding-left: 1.4rem; }
.tier-trust li::before { content: ""; position: absolute; left: .1rem; top: .5em; width: .7rem; height: .4rem; border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(-45deg); }
#plans { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.tier-seg { display: flex; width: fit-content; margin: .5rem auto 0; padding: .25rem; gap: .25rem; background: var(--surface-2); border-radius: 999px; }
.tier-seg button { border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-weight: 600; padding: .55rem 1.1rem; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; }
.tier-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lift); }
.tier-save { font-size: .78rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; background: var(--orange); color: #13233b; }
/* The switch needs the script (assets/site.js); without it the monthly prices show. */
html:not(.js) .tier-seg { display: none; }
html:not([data-period="y"]) .py, html[data-period="y"] .pm { display: none; }
.tier-grid { margin-top: 1.6rem; }
.price-card { position: relative; }
.price-card .tier-name { font-family: var(--serif); font-size: 1.65rem; line-height: 1.15; }
.price-card .tier-name small { display: block; font-family: var(--sans); font-size: .95rem; font-weight: 500; color: var(--ink-2); margin-top: .25rem; letter-spacing: 0; }
.price-card .badge { position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%); background: var(--orange); color: #13233b; font-weight: 700; font-size: .82rem; padding: .3rem .9rem; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 18px rgba(253, 90, 1, .28); }
.price-line { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; margin-top: .3rem; }
.price-line .price-value { margin: 0; }
.price-line .per { color: var(--ink-2); font-size: .98rem; }
.price-sub { min-height: 1.4em; color: var(--ink-2); font-size: .9rem; font-variant-numeric: tabular-nums; }
.price-sub b { color: var(--accent-ink); }
.tier-grid .price-card .checks { flex: 1; align-content: start; }
.tier-grid .price-card .actions { display: grid; gap: .5rem; margin-top: .6rem; }
.tier-legal { margin-top: 1.4rem; font-size: .88rem; line-height: 1.55; color: var(--ink-2); max-width: 78ch; }
.pay-note { margin-top: 1rem; }
.compare-wrap { overflow-x: auto; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); margin-top: 1.5rem; }
.compare { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .95rem; }
.compare th, .compare td { padding: .8rem 1rem; border-bottom: 1px solid var(--line); text-align: center; vertical-align: top; }
.compare th:first-child, .compare td:first-child { text-align: left; color: var(--ink); width: 34%; }
.compare thead th { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; background: var(--surface); }
.compare thead th:nth-child(4), .compare td:nth-child(4) { background: color-mix(in srgb, var(--orange) 9%, transparent); }
.compare tr:last-child td { border-bottom: 0; }
.compare td { color: var(--ink-2); }
.compare td.yes { color: var(--t-best); font-weight: 700; }
.compare .grp td { background: var(--surface-2); color: var(--ink); font-weight: 600; text-align: left; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.free-grid .card h3 { font-size: 1.12rem; }
.free-grid .card .ico { font-size: 1.5rem; line-height: 1; }
@media (max-width: 640px) {
.tier-grid .price-card.is-pick { order: -1; margin-top: .8rem; }
}
/* Books (site_books.py, 2026-10-17): the cover, the sample pages (two a row on a phone, four on a desk). */
.book-cover { display: block; width: 100%; height: auto; max-width: 320px; margin-inline: auto; border-radius: 12px; box-shadow: var(--shadow-lift); }
.book-card { margin: 0 0 2rem; }
.book-teaser { display: flex; gap: 1.2rem; align-items: center; margin: 2rem 0; }
.book-teaser img { flex: none; width: 96px; height: auto; border-radius: 8px; box-shadow: var(--shadow-lift); }
.book-teaser h3 { margin: 0 0 .3rem; }
.book-samples { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.book-samples img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) { .book-cover { max-width: 240px; } .book-samples { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .book-samples figcaption { font-size: .78rem; } }
/* dp:begin */
/* The house date picker (assets/datepicker.js, owner 2026-10-18): a typed field with a calendar
* button; the calendar starts with the year. A bottom sheet on phones, same flow. */
.dp { position: relative; display: flex; min-width: 0; }
.dp > input.dp-in { flex: 1 1 auto; width: 100%; min-width: 0; padding-inline-end: 3rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.dp > input.dp-in[aria-invalid="true"] { border-color: var(--t-bad); }
.dp-btn { position: absolute; inset-block: 0; inset-inline-end: 0; width: 2.9rem; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink-2); cursor: pointer; border-radius: 10px; }
.dp-btn:hover, .dp-btn[aria-expanded="true"] { color: var(--accent-ink); }
.dp-btn svg { width: 1.25rem; height: 1.25rem; }
.dp-pop { position: absolute; z-index: 60; inset-block-start: calc(100% + .4rem); inset-inline-start: 0; width: 20.5rem; max-width: calc(100vw - 2rem); padding: .75rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow-lift); font: 400 .95rem/1.2 var(--sans); text-align: start; }
.dp-pop.dp-up { inset-block-start: auto; inset-block-end: calc(100% + .4rem); }
.dp-pop.dp-end { inset-inline-start: auto; inset-inline-end: 0; }
.dp-pop[hidden], .dp-shade[hidden] { display: none; }
.dp-pop button { font: inherit; color: inherit; background: none; border: 0; border-radius: 10px; padding: 0; min-height: 2.5rem; cursor: pointer; }
@media (hover: hover) { .dp-pop button:hover:not(:disabled) { background: var(--surface-2); } }
.dp-pop button:focus-visible { outline: 2px solid var(--orange); outline-offset: 0; }
.dp-pop button:disabled { opacity: .35; cursor: default; }
.dp-head { display: flex; align-items: center; gap: .25rem; margin-bottom: .4rem; }
.dp-head .dp-nav { width: 2.5rem; font-size: 1.4rem; color: var(--ink-2); }
.dp-head .dp-title { flex: 1; font-family: var(--serif); font-size: 1.08rem; font-weight: 600; }
.dp-head .dp-title:disabled { opacity: 1; }
.dp-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.dp-grid th { padding: .2rem 0 .35rem; font-size: .75rem; font-weight: 600; color: var(--ink-2); text-align: center; text-transform: capitalize; }
.dp-grid td { padding: 2px; text-align: center; }
.dp-grid button { width: 100%; font-variant-numeric: tabular-nums; }
.dp-years button, .dp-months button { min-height: 2.9rem; }
.dp-grid [aria-current="date"] button { box-shadow: inset 0 0 0 1.5px var(--accent-ink); }
.dp-grid [aria-selected="true"] button, .dp-grid [aria-selected="true"] button:hover { background: var(--accent-ink); color: var(--surface); font-weight: 600; }
.dp-foot { display: flex; justify-content: space-between; gap: .5rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.dp-foot button { padding-inline: .8rem; color: var(--accent-ink); font-weight: 600; }
.dp-multi { display: grid; gap: .5rem; }
.dp-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.dp-chips:empty { display: none; }
.dp-chip { display: inline-flex; align-items: center; gap: .2rem; padding-inline-start: .75rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-2); font-variant-numeric: tabular-nums; }
.dp-chip-x { min-width: 2.25rem; min-height: 2.25rem; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: inherit; font-size: 1.15rem; cursor: pointer; }
.dp-chip-x:hover { color: var(--t-bad); }
@media (max-width: 640px) {
.dp-pop, .dp-pop.dp-up { position: fixed; z-index: 1001; inset: auto 0 0 0; width: auto; max-width: none; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; border-inline: 0; border-bottom: 0; font-size: 1.05rem; }
.dp-pop button { min-height: 2.9rem; }
.dp-years button, .dp-months button { min-height: 3.4rem; }
.dp-shade { position: fixed; z-index: 1000; inset: 0; background: rgba(8, 11, 38, .45); }
}
/* dp:end */
/* «≈ money» next to a ⭐ price (price_money_hint) */
/* Prices in stars (modules/landing/stars.py writes the markup at build): a price keeps its number and
sign on one line; a Telegram Star is the svg sign, one text-em wide, sitting like an emoji. */
.jy-price { white-space: nowrap; }
.jy-tgstar { display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; overflow: visible; }
.cur-pick { margin: 8px 0 12px; font-size: 0.9em; max-width: 22rem; }
.cur-pick select { font: inherit; margin-left: 4px; padding: 2px 6px; border-radius: 8px; }
.price-get { margin: 6px 0 0; font-weight: 600; }
.money-hint { opacity: 0.7; font-size: 0.82em; font-weight: 400; white-space: nowrap; }
.price-line + .money-hint, .price-value + .money-hint, .price-tag + .money-hint { display: block; margin-top: 2px; }
/* ctl:begin */
.ctl-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; }
.ctl { position: relative; display: block; min-width: 0; }
.ctl-sel__btn, .ctl-time {
box-sizing: border-box; display: flex; align-items: center; width: 100%; min-height: 46px; padding: 8px 14px; gap: 8px;
color: var(--ink, CanvasText); font: inherit; font-weight: 500; text-align: start;
background: transparent; border: 1px solid var(--line-strong, ButtonBorder); border-radius: 12px;
}
.ctl-sel__btn { justify-content: space-between; cursor: pointer; }
.ctl-sel__btn:disabled { opacity: .5; cursor: not-allowed; }
.ctl-sel__btn:focus-visible, .ctl-time:focus-within { outline: 2px solid var(--orange, var(--gold, Highlight)); outline-offset: 1px; }
.ctl-sel__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.ctl-sel__text.is-empty { opacity: .62; }
.ctl-sel__chev { flex: none; width: 8px; height: 8px; margin-inline-end: 2px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.ctl-sel__btn[aria-expanded="true"] .ctl-sel__chev { transform: translateY(2px) rotate(-135deg); }
.ctl-pop {
position: fixed; z-index: 1000; box-sizing: border-box; margin: 0; padding: 6px; list-style: none; overflow-y: auto; overscroll-behavior: contain;
color: var(--ink, CanvasText); background: var(--ctl-pop-bg, var(--surface, var(--night-soft, Canvas)));
border: 1px solid var(--line-strong, ButtonBorder); border-radius: 12px; box-shadow: 0 12px 32px color-mix(in srgb, CanvasText 28%, transparent); font: 500 16px/1.3 var(--sans, system-ui, sans-serif);
}
.ctl-pop__o { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 8px; overflow-wrap: anywhere; cursor: pointer; }
.ctl-pop__o.is-active { background: color-mix(in srgb, var(--orange, var(--gold, Highlight)) 14%, transparent); }
.ctl-pop__o[aria-selected="true"] { font-weight: 700; }
.ctl-pop__o[aria-selected="true"]::after { content: "✓"; margin-inline-start: auto; padding-inline-start: 10px; }
.ctl-pop__o[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ctl-time { width: max-content; max-width: 100%; min-width: 8.5rem; display: inline-flex; justify-content: center; padding-block: 0; }
/* hh/mm cells fill the field's height and are 44px wide: each is a tap target of its own (forms audit 2026-10-28: 33x34) */
.ctl-time input.ctl-time__f { min-height: 44px; width: 2.75rem; min-width: 0; padding: 0 2px; text-align: center; font: inherit; font-size: 16px; font-variant-numeric: tabular-nums; color: inherit; background: transparent; border: 0; outline: 0; }
.ctl-time input.ctl-time__f::placeholder { opacity: .5; }
.ctl-time input.ctl-time__f:focus { background: color-mix(in srgb, var(--orange, var(--gold, Highlight)) 14%, transparent); border-radius: 6px; }
.ctl-time input.ctl-time__f[aria-invalid] { color: var(--t-bad, var(--terracotta, LinkText)); }
.ctl-time__sep { color: var(--ink-2, var(--ink-soft, inherit)); } /* full ink-2: a faded colon fell below AA (1.33:1, site forms audit 2026-10-28) */
.ctl-copy { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, CanvasText 45%, transparent); }
.ctl-copy__box { box-sizing: border-box; display: grid; gap: 12px; width: min(440px, 100%); padding: 18px; color: var(--ink, CanvasText); background: var(--ctl-pop-bg, var(--surface, var(--night-soft, Canvas))); border: 1px solid var(--line-strong, ButtonBorder); border-radius: 16px; }
.ctl-copy__in { box-sizing: border-box; width: 100%; min-height: 46px; padding: 8px 12px; font: 500 16px/1.3 var(--sans, system-ui, sans-serif); color: inherit; background: transparent; border: 1px solid var(--line-strong, ButtonBorder); border-radius: 12px; }
.ctl-copy__btn { min-height: 46px; padding: 0 18px; font: 600 15px var(--sans, system-ui, sans-serif); color: var(--ctl-on-accent, Canvas); background: var(--orange, var(--gold, Highlight)); border: 0; border-radius: 12px; cursor: pointer; }
.ctl-copy__in:focus-visible, .ctl-copy__btn:focus-visible { outline: 2px solid var(--orange, var(--gold, Highlight)); outline-offset: 2px; }
/* checkbox: the real input, drawn (no browser mark) */
input[type="checkbox"] {
appearance: none; -webkit-appearance: none; flex: none; display: inline-grid; place-content: center; box-sizing: border-box;
width: 22px; height: 22px; margin: 0; cursor: pointer; background: transparent;
border: 1.5px solid var(--line-strong, ButtonBorder); border-radius: 6px;
}
input[type="checkbox"]::before { content: ""; width: 12px; height: 12px; transform: scale(0); transition: transform .12s; background: var(--orange, var(--gold, Highlight)); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--orange, var(--gold, Highlight)); outline-offset: 2px; }
input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
input[aria-invalid="true"] { border-color: var(--t-bad, var(--terracotta, LinkText)); }
input[type="checkbox"][aria-invalid="true"] { outline: 2px solid var(--t-bad, var(--terracotta, LinkText)); outline-offset: 2px; }
/* number: no spinner */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* range: own track and thumb */
input[type="range"] { appearance: none; -webkit-appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--line-strong, ButtonBorder); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line-strong, ButtonBorder); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border: 0; border-radius: 50%; background: var(--orange, var(--gold, Highlight)); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--orange, var(--gold, Highlight)); }
input[type="range"]:focus-visible { outline: 2px solid var(--orange, var(--gold, Highlight)); outline-offset: 3px; border-radius: 6px; }
/* a plain outside .faq (article questions): our marker; question bold in ink, answer muted and indented */
main :not(.faq) > details:not([class]) > summary:not([class]) { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink, CanvasText); }
main :not(.faq) > details:not([class]) > summary:not([class])::-webkit-details-marker { display: none; }
main :not(.faq) > details:not([class]) > summary:not([class])::after { content: "+"; flex: none; font-size: 1.3em; line-height: 1; }
main :not(.faq) > details[open]:not([class]) > summary:not([class])::after { content: "–"; }
main :not(.faq) > details:not([class]) > summary:not([class]):hover { color: var(--accent-ink, var(--gold-light, var(--ink, CanvasText))); }
main :not(.faq) > details:not([class]) > summary:not([class]):focus-visible { outline: 2px solid var(--orange, var(--gold, Highlight)); outline-offset: 2px; border-radius: 6px; }
main :not(.faq) > details:not([class]) > summary:not([class]) ~ * { margin-inline-start: .25rem; padding-inline-start: .9rem; border-inline-start: 2px solid var(--line-strong, ButtonBorder); color: var(--ink-2, var(--ink-soft, GrayText)); }
@media (prefers-reduced-motion: reduce) { input[type="checkbox"]::before { transition: none; } }
/* A text field no form styles is never a raw browser box (owner 2026-10-28): the kit's field look, at zero
specificity (:where), so every form's own field rules still win. Text-like types only. */
:where(main) :where(input:is([type="text"], [type="email"], [type="tel"], [type="search"], [type="url"], [type="number"], :not([type])), textarea) {
box-sizing: border-box; min-height: 46px; max-width: 100%; padding: 8px 14px; color: var(--ink, CanvasText); font: inherit;
background: transparent; border: 1px solid var(--line-strong, ButtonBorder); border-radius: 12px;
}
:where(main) :where(input:is([type="text"], [type="email"], [type="tel"], [type="search"], [type="url"], [type="number"], :not([type])), textarea):focus-visible {
outline: 2px solid var(--orange, var(--gold, Highlight)); outline-offset: 2px;
}
/* Phones zoom the page into a field whose text is under 16px (iOS), and every site field was 15.2px
(site forms audit 2026-10-28): text-entry fields keep 16px on narrow screens. !important because form
rules set `font: inherit`; this is a floor, not a look. */
@media (max-width: 760px) {
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]), textarea, select) { font-size: max(16px, 1em) !important; }
}
/* ctl:end */
/* Only the independent sunlight inside the SVG breathes. */
/* Readability 2026-10-29: hero copy sits over a photo/glow ground; mix toward --ink so every line holds 4.5:1 on the rendered pixels
(app/web/scripts/contrast-pixels.mjs, site suite). color-mix keeps both themes: --ink is the theme's own text colour. */
.hero .kicker, .hero .back a { color: color-mix(in srgb, var(--accent-ink) 78%, var(--ink)); }
.hero .lead, .hero .hero-trust { color: color-mix(in srgb, var(--ink-2) 62%, var(--ink)); }
/* Readability 2026-10-29: a note inside the navy CTA panel kept the light surface (white in light theme) behind on-navy ink — 1.8:1. */
.cta .notice { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); border-left-color: var(--orange); }
/* The compare table's «all levels» tick text was the bright --t-best green (3.1:1 on white); darker toward the theme's ink, both themes. */
.compare td.yes { color: color-mix(in srgb, var(--t-best) 58%, var(--ink)); }
/* «Смена лагны» under a book page's chart (tools.js lagnaCard): the app card (app/web/src/tma/chart/chart.css .lc-*)
* on the site's tokens, which carry the app's values (warn = --p-ju, or-ink = --accent-ink). */
.lc-card { display: grid; gap: .5rem; margin-block: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); max-width: 44em; }
.lc-card h3 { margin: 0; }
.lc-strip { display: block; width: 100%; height: auto; }
.lc-seg rect { fill: var(--surface-2); }
.lc-seg.alt rect { fill: var(--line); }
.lc-seg.on rect { fill: color-mix(in srgb, var(--orange) 16%, var(--surface)); stroke: var(--orange); stroke-width: 6px; }
.lc-seg text { fill: var(--ink-2); font: 600 44px var(--sans); }
.lc-seg.on text { fill: var(--accent-ink); }
.lc-birth { stroke: var(--ink); stroke-width: 8px; stroke-linecap: round; }
.lc-card .lc-hours { display: flex; justify-content: space-between; font-size: .8rem; font-variant-numeric: tabular-nums; }
.lc-card p { margin: 0; }
.lc-near { color: var(--p-ju); font-weight: 600; }
.lc-cta { justify-self: start; min-height: 44px; text-align: start; }
.lc-all summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 600; list-style: none; }
.lc-all summary::-webkit-details-marker { display: none; }
.lc-all summary::after { content: "⌄"; color: var(--accent-ink); transition: transform .2s; }
.lc-all[open] summary::after { transform: rotate(180deg); }
.lc-all summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 8px; }
.lc-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.lc-list li { display: flex; justify-content: space-between; gap: 1rem; }
.lc-list .tab-num { font-variant-numeric: tabular-nums; }
.lc-list li.on { font-weight: 700; color: var(--accent-ink); }