/* ==========================================================================
   The four app websites: Tattvas, Body Clock, Luniphase and AyuWatcher.

   What the four sites share: the layout, the type and how every part of the
   page behaves. Each app brings its own look in source/<app>/theme.css,
   which the build adds after this file: its colours, its typeface for the
   headings and its picture at the top of the page. The defaults here are a
   dark canvas with white type, as ezomanager.com has, and Luniphase keeps
   them; a site on a light canvas sets the variables below and says so with
   "colorScheme": "light" in its site.json.

   The pages come in thirty-four languages, Arabic among them, so the layout
   uses the logical properties (inline start and end rather than left and
   right) wherever a side matters, and a right-to-left page mirrors itself.
   ========================================================================== */

:root{
  --bg:          #000000;
  --bg-raise:    #0a0a0a;
  --ink:         #ffffff;
  --muted:       rgba(255,255,255,.66);
  --faint:       rgba(255,255,255,.46);
  --ghost:       rgba(255,255,255,.42);
  --line:        rgba(255,255,255,.11);
  --line-soft:   rgba(255,255,255,.06);
  --panel:       rgba(255,255,255,.03);

  /* the accent, and the same colour as numbers for the translucent tints */
  --accent:      #ffd60a;
  --accent-rgb:  255,214,10;
  --on-accent:   #000000;
  --accent-text: var(--accent);   /* an accent that is also legible as small text */

  /* what the surfaces are tinted with: white on a dark canvas, ink on a light one */
  --tint-rgb:    255,255,255;
  --warn:        #ffb4a8;

  --r:       18px;
  --wrap:    1160px;
  --gutter:  clamp(16px,4vw,40px);
  --badge-h: 46px;
  --ease:    cubic-bezier(.22,.61,.36,1);

  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Noto Sans", "Helvetica Neue", Arial, sans-serif,
          "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --tight: -.03em;   /* headings; set to 0 for the scripts that must not be spaced */
  --display: var(--font);   /* the headings' typeface; a theme may give them their own */
}

/* ---------- reset ---------- */

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:86px;
  scrollbar-gutter:stable;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,picture{ max-width:100%; }
img{ height:auto; }

h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:var(--tight); line-height:1.08; }
h1,h2,h3{ font-family:var(--display); }
p{ margin:0; }
a{ color:inherit; }
ul,ol{ margin:0; padding:0; }

::selection{ background:var(--accent); color:var(--on-accent); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:8px;
}

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.wrap{
  width:min(var(--wrap), calc(100% - 2 * var(--gutter)));
  margin-inline:auto;
}

/* the first stop for a keyboard, out of sight until it is reached */
.skip{
  position:absolute; inset-inline-start:12px; top:-60px; z-index:300;
  padding:10px 16px;
  border-radius:10px;
  background:var(--accent); color:var(--on-accent);
  font-weight:600; text-decoration:none;
}
.skip:focus{ top:12px; }


/* ---------- scripts that need their own type settings ---------- */

/* Arabic letters join, and the Indian scripts stack their vowel signs, so
   neither may be spaced out; capitals mean nothing to them either. They also
   need taller lines than the tight Latin headings give. */
:lang(ar), :lang(hi), :lang(bn), :lang(ta){ --tight:0; }
:lang(ar) *, :lang(hi) *, :lang(bn) *, :lang(ta) *{ letter-spacing:0 !important; }
:lang(ar) h1, :lang(hi) h1, :lang(bn) h1, :lang(ta) h1,
:lang(ar) h2, :lang(hi) h2, :lang(bn) h2, :lang(ta) h2,
:lang(ar) h3, :lang(hi) h3, :lang(bn) h3, :lang(ta) h3{ line-height:1.35; }
:lang(ar) body, :lang(hi) body, :lang(bn) body, :lang(ta) body{ line-height:1.75; }
:lang(ar){ --font: "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", Tahoma, var(--font-base, sans-serif), system-ui; }
:lang(ja){ --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", "Meiryo", system-ui, sans-serif; }
:lang(ko){ --font: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif; }
:lang(zh-Hans){ --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; }
:lang(ja) h1, :lang(ko) h1, :lang(zh-Hans) h1,
:lang(ja) h2, :lang(ko) h2, :lang(zh-Hans) h2{ line-height:1.25; letter-spacing:0; }
/* Japanese breaks between phrases rather than inside a word, so "タットヴァ"
   is never split; Korean breaks at its spaces, as Korean is read; and no line
   of the three starts with a small kana or closing punctuation. */
:lang(ja), :lang(ko), :lang(zh-Hans){ line-break:strict; }
/* A theme's typeface for the headings is chosen for the Latin, Greek and
   Cyrillic letters. The scripts with fonts of their own keep them, and so
   does Vietnamese, whose stacked accents a typeface without them would take
   letter by letter from another. */
:lang(ar), :lang(hi), :lang(bn), :lang(ta), :lang(ja), :lang(ko), :lang(zh-Hans), :lang(vi){ --display: var(--font) !important; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) .lede, :lang(ja) .section-lede,
:lang(ja) .eyebrow, :lang(ja) .lang-chip, :lang(ja) .hero-note,
:lang(ja) summary, :lang(ja) figcaption{ word-break:auto-phrase; }
:lang(ko){ word-break:keep-all; overflow-wrap:anywhere; }
/* Tamil words are long and the headings would break mid-word at display size */
:lang(ta) .hero h1{ font-size:clamp(2rem,5vw,3.4rem); }
:lang(ta) .band h2{ font-size:clamp(1.6rem,3.4vw,2.5rem); }


/* ---------- symbols ---------- */

.ico{
  width:1em; height:1em;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:-.15em;
}
.ico-md{ font-size:1.5rem;  stroke-width:1.6; }
.ico-lg{ font-size:2rem;    stroke-width:1.5; }
.ico-xl{ font-size:2.9rem;  stroke-width:1.3; }

/* the arrows point the way the page reads */
[dir=rtl] .flip-rtl{ transform:scaleX(-1); }


/* ---------- header ---------- */

.site-head{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:22px;
  padding:12px var(--gutter);
  background:color-mix(in srgb, var(--bg) 74%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
          backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--line-soft);
}

.brand{
  display:inline-flex; align-items:center; gap:11px;
  flex:none;
  font-weight:700; font-size:1.04rem; letter-spacing:-.02em;
  text-decoration:none;
}
.brand img{ display:block; border-radius:9px; }

.site-nav{
  display:flex; flex-wrap:nowrap; gap:22px;
  margin-inline-start:auto; min-width:0;
  font-size:.9rem;
}
.site-nav a{
  color:var(--muted);
  flex:none;
  text-decoration:none;
  white-space:nowrap;
  transition:color .25s var(--ease);
}
.site-nav a:hover{ color:var(--accent-text); }

.nav-anchor{ position:fixed; top:0; left:0; width:0; height:0; }

.nav-btn{
  display:none;
  flex:none;
  align-items:center; justify-content:center;
  width:40px; height:40px;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--muted);
  font-size:1.15rem;
  text-decoration:none;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.nav-btn:hover,
.nav-btn:focus-visible{ color:var(--accent-text); border-color:rgba(var(--accent-rgb),.42); }

.btn-mini{
  flex:none;
  padding:9px 18px;
  border-radius:999px;
  background:var(--accent);
  color:var(--on-accent);
  font-size:.85rem; font-weight:650;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-mini:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(var(--accent-rgb),.28);
}


/* ---------- language picker ---------- */

.lang-picker{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  padding-inline:12px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.lang-picker:hover,
.lang-picker:focus-within{ border-color:rgba(var(--accent-rgb),.42); color:var(--accent-text); }
.lang-picker .ico{ font-size:1.02rem; pointer-events:none; }

.lang-picker select{
  appearance:none; -webkit-appearance:none;
  padding-block:8px;
  padding-inline:0 22px;
  border:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:.86rem;
  line-height:1.2;
  cursor:pointer;
  outline:none;
}
.lang-picker::after{
  content:"";
  position:absolute; inset-inline-end:13px; top:50%;
  width:7px; height:7px;
  margin-top:-5px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  pointer-events:none;
}
.lang-picker select option{ background:var(--option-bg, #0b0b0b); color:var(--option-ink, #fff); }


/* ---------- hero ---------- */

.hero{
  position:relative;
  overflow:hidden;
  padding:clamp(56px,8vw,104px) 0 0;
  isolation:isolate;
}
/* the glow of the accent at the top of the page */
.hero::before{
  content:"";
  position:absolute; inset:-30% -10% auto; height:90%;
  background:radial-gradient(56% 100% at 50% 0, rgba(var(--accent-rgb),.16), transparent 70%);
  pointer-events:none;
  z-index:-1;
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(24px,4vw,64px);
  align-items:center;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 16px;
  padding-inline-start:13px;
  border:1px solid rgba(var(--accent-rgb),.32);
  border-radius:999px;
  background:rgba(var(--accent-rgb),.06);
  color:var(--accent-text);
  font-size:.78rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
}
.eyebrow .ico{ font-size:.95rem; }

.hero h1{
  margin-top:24px;
  font-size:clamp(2.5rem,5.6vw,4.6rem);
  line-height:1.02;
}
.hero h1 span,
.hero h1 em{ display:block; }
.hero h1 em{
  width:fit-content;
  font-style:normal;
  color:var(--accent);
  text-shadow:0 0 70px rgba(var(--accent-rgb),.38);
}

.lede{
  max-width:600px;
  margin-top:24px;
  color:var(--muted);
  font-size:clamp(1.02rem,1.45vw,1.14rem);
  line-height:1.7;
}
.lede + .lede{ margin-top:12px; }

.hero .store-row{ justify-content:flex-start; margin-top:34px; }

.hero-note{
  margin-top:16px;
  color:var(--faint);
  font-size:.9rem;
}

/* the language of the page, said in it */
.lang-chip{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:22px;
  padding:9px 18px;
  padding-inline-start:12px;
  border:1px solid rgba(var(--accent-rgb),.34);
  border-radius:24px;          /* a pill on one line, a soft card on two */
  text-align:start;
  text-wrap:balance;
  background:linear-gradient(90deg, rgba(var(--accent-rgb),.12), rgba(var(--accent-rgb),.03));
  color:var(--ink);
  font-size:.92rem; font-weight:550;
  text-decoration:none;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.lang-chip:hover{ border-color:rgba(var(--accent-rgb),.6); }
.lang-chip .tick{
  display:grid; place-items:center;
  width:24px; height:24px;
  border-radius:50%;
  background:var(--accent);
  color:var(--on-accent);
  font-size:.85rem;
}
.lang-chip .tick .ico{ stroke-width:2.6; }

/* the phone, and the clock each app draws around it. The dial is sized
   once, as --dial, and the phone takes a share of it, so the ring always
   shows above and below the phone whatever the width of the window. The
   dial is often wider than its column, so it is centred by its own size:
   centred by auto margins it would stick to the column's start instead. */
.hero-visual{
  --dial: clamp(430px, 44vw, 640px);
  position:relative;
  display:grid; place-items:center;
  height:var(--dial);
}
.ornament{
  position:absolute;
  left:calc(50% - var(--dial) / 2);
  top:calc(50% - var(--dial) / 2);
  width:var(--dial);
  height:var(--dial);
  z-index:1;
  pointer-events:none;
}
.ornament svg{ display:block; width:100%; height:100%; overflow:visible; }
.hero-visual .phone{
  position:relative; z-index:2;
  width:calc(var(--dial) * .3);
  padding:calc(var(--dial) * .011);
  border-radius:calc(var(--dial) * .052);
}
.hero-visual .phone img,
.hero-visual .phone picture{ border-radius:calc(var(--dial) * .042); }

.phone{
  padding:9px;
  border-radius:40px;
  background:linear-gradient(150deg,#2b2b2e,#0c0c0e 60%,#1c1c1f);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.13),
    0 0 0 1px rgba(0,0,0,.7),
    var(--phone-drop, 0 40px 90px -16px rgba(0,0,0,.85)),
    var(--phone-glow, 0 0 80px -20px rgba(var(--accent-rgb),.35));
}
.phone img,
.phone picture{ display:block; width:100%; border-radius:31px; }
.phone .zoom{ border-radius:inherit; }

/* numbers under the hero */
.stats{
  position:relative; z-index:2;
  margin-top:clamp(48px,7vw,88px);
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.stats li{
  padding:24px 16px 26px;
  border-inline-end:1px solid var(--line);
  text-align:center;
}
.stats li:last-child{ border-inline-end:0; }
.stats b{
  display:block;
  font-size:clamp(1.7rem,3.4vw,2.4rem);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.1;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.stats span{
  display:block;
  margin-top:6px;
  font-size:.84rem;
  color:var(--faint);
  line-height:1.4;
}


/* ---------- display text wraps evenly ---------- */

h1, .band h2, .lede, .section-lede, .eyebrow, .faq-item summary, .stats span, .hero-note{ text-wrap:balance; }
.card p, .faq-ans p, .note p, .tier li, .step p, .split-text p, .spot p{ text-wrap:pretty; }


/* ---------- sections ---------- */

.band{
  position:relative;
  padding:clamp(64px,8.5vw,120px) 0;
}
.band-alt{
  background:linear-gradient(180deg, rgba(var(--tint-rgb),.025), transparent 60%);
}

.kicker,
.band .kicker{
  color:var(--accent-text);
  font-size:.78rem; font-weight:650;
  letter-spacing:.14em; text-transform:uppercase;
}

.band h2{
  margin-top:14px;
  font-size:clamp(1.9rem,4vw,3rem);
}

.section-lede{
  max-width:660px;
  margin-top:18px;
  color:var(--muted);
  font-size:1.04rem;
  line-height:1.7;
}

.center{ text-align:center; }
.center .section-lede{ margin-inline:auto; }

/* a quiet wave across the top of a band */
.wave-rule{
  position:absolute; top:0; left:0; right:0;
  height:60px;
  overflow:hidden;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent);
}
.wave-rule svg{ width:100%; height:100%; display:block; }
.w path{
  fill:none;
  stroke:var(--accent);
  stroke-width:1.4;
  vector-effect:non-scaling-stroke;
}
@keyframes drift{ to{ transform:translateX(-1200px); } }
.wave-rule .w{ opacity:.2; animation:drift 26s linear infinite; }


/* ---------- tags: what is free and what comes with a subscription ---------- */

.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--faint);
  font-size:.72rem; font-weight:600;
  letter-spacing:.03em;
  white-space:nowrap;
}
.tag-free{
  border-color:rgba(var(--accent-rgb),.45);
  color:var(--accent-text);
  background:rgba(var(--accent-rgb),.07);
}
.tag .ico{ font-size:.85rem; }


/* ---------- steps: how it works, in three ---------- */

.steps{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:46px;
  counter-reset:step;
}
.step{
  position:relative;
  padding:26px 24px 28px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
}
.step-n{
  display:grid; place-items:center;
  width:36px; height:36px;
  border:1px solid rgba(var(--accent-rgb),.45);
  border-radius:50%;
  color:var(--accent-text);
  font-size:.9rem; font-weight:700;
}
.step h3{ margin:16px 0 8px; font-size:1.08rem; letter-spacing:-.02em; }
.step p{ color:var(--muted); font-size:.95rem; line-height:1.62; }


/* ---------- feature cards ---------- */

.grid-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px;
  margin-top:48px;
  list-style:none;
}

.card{
  position:relative;
  padding:26px 24px 26px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
  overflow:hidden;
  transition:border-color .35s var(--ease), transform .35s var(--ease), background .35s var(--ease);
}
.card::after{
  content:"";
  position:absolute; inset-inline-start:-30%; bottom:-45%;
  width:210px; height:210px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--accent-rgb),.13), transparent 70%);
  opacity:0;
  transition:opacity .45s var(--ease);
  pointer-events:none;
}
.card:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--accent-rgb),.34);
  background:rgba(var(--accent-rgb),.03);
}
.card:hover::after{ opacity:1; }
.card .ico-lg{ color:var(--accent-text); }
.card h3{ margin:16px 0 8px; font-size:1.07rem; letter-spacing:-.02em; line-height:1.3; }
.card p{ color:var(--muted); font-size:.93rem; line-height:1.62; }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.card-accent{
  border-color:rgba(var(--accent-rgb),.34);
  background:linear-gradient(160deg, rgba(var(--accent-rgb),.08), rgba(var(--accent-rgb),.015) 60%);
}


/* ---------- a spotlight: words beside two phones ---------- */

.split{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(34px,5vw,76px);
  align-items:center;
}
.split-rev .split-shots{ order:-1; }

.split-text p{ margin-top:16px; color:var(--muted); font-size:1rem; line-height:1.72; }
.split-text .section-lede{ margin-top:18px; }

.points{
  list-style:none;
  display:grid;
  gap:12px;
  margin-top:26px;
}
.points li{
  display:flex; align-items:flex-start; gap:12px;
  color:var(--muted);
  font-size:.97rem; line-height:1.6;
}
.points .ico{ margin-top:.2em; color:var(--accent-text); font-size:1.05rem; }

.split-shots{
  position:relative;
  width:100%;
  max-width:520px;
  margin-inline:auto;
  aspect-ratio:1 / 1.08;
}
.split-shots::before{
  content:"";
  position:absolute; inset:8% 6%;
  background:radial-gradient(circle at 50% 45%, rgba(var(--accent-rgb),.18), transparent 66%);
  filter:blur(22px);
}
.split-shots .phone{
  position:absolute;
  width:47%;
  padding:7px;
  border-radius:32px;
}
.split-shots .phone img,
.split-shots .phone picture{ border-radius:25px; }
.split-shots .shot-back{
  inset-inline-end:0; top:0;
  rotate:6deg;
  opacity:.9;
}
.split-shots .shot-front{
  inset-inline-start:0; bottom:0;
  z-index:2;
  rotate:-5deg;
}
.split-shots .one{
  inset-inline-start:25%; top:0;
  width:52%;
}

.callout{
  display:flex; align-items:center; gap:14px;
  margin-top:28px;
  padding:15px 20px;
  border:1px solid rgba(var(--accent-rgb),.32);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.09), rgba(var(--accent-rgb),.03));
  color:var(--ink);
  font-size:.98rem; font-weight:500;
  line-height:1.55;
  text-wrap:pretty;
}
.callout .ico{ color:var(--accent-text); font-size:1.3rem; }


/* ---------- spotlight lists: the tattvas, the organs, the calendars ---------- */

.spot-list{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:12px;
  margin-top:44px;
}
.spot{
  display:flex; align-items:flex-start; gap:16px;
  padding:20px 20px 21px;
  border:1px solid var(--line-soft);
  border-radius:16px;
  background:rgba(var(--tint-rgb),.025);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.spot:hover{ border-color:rgba(var(--accent-rgb),.3); background:rgba(var(--accent-rgb),.03); }
@media (min-width:1080px){
  .spot-list.four{ grid-template-columns:repeat(4,1fr); }
  .spot-list.three{ grid-template-columns:repeat(3,1fr); }
}
/* five things in a row, each standing upright, once there is room for it */
@media (min-width:1080px){
  .spot-list.five{ grid-template-columns:repeat(5,1fr); }
  .spot-list.five .spot{ flex-direction:column; gap:14px; padding:22px 20px 22px; }
}
.spot-mark{
  flex:none;
  display:grid; place-items:center;
  width:52px; height:52px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(var(--tint-rgb),.03);
}
.spot-mark svg{ width:28px; height:28px; display:block; }
.spot-body{ display:grid; gap:4px; min-width:0; }
.spot h3{ font-size:1.08rem; letter-spacing:-.015em; line-height:1.3; }
.spot p{ color:var(--muted); font-size:.92rem; line-height:1.55; }
.spot .warn{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:4px;
  color:var(--warn);
  font-size:.86rem;
}
.spot .warn .ico{ font-size:.95rem; }
.spot .meta{ color:var(--faint); font-size:.82rem; }


/* ---------- gallery ---------- */

.gallery{
  width:min(var(--wrap), calc(100% - 2 * var(--gutter)));
  margin:48px auto 0;
  padding-bottom:14px;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  direction:ltr;   /* the screenshots are English, in any language */
  --gap:20px;
  --fade:clamp(26px,4vw,52px);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
.gallery::-webkit-scrollbar{ display:none; }
.gallery .track{ display:flex; gap:var(--gap); width:max-content; }
.is-rolling{ scroll-behavior:auto; }

.gallery figure{
  flex:0 0 220px;
  margin:0;
  display:flex; flex-direction:column;
}
.gallery img{
  display:block;
  width:100%; height:auto;
  border:1px solid rgba(var(--tint-rgb),.12);
  border-radius:24px;
  box-shadow:var(--shot-shadow, 0 26px 60px rgba(0,0,0,.7));
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.gallery figure:hover img{
  transform:translateY(-5px);
  border-color:rgba(var(--accent-rgb),.38);
}
.gallery figcaption{
  margin-top:13px;
  color:var(--faint);
  font-size:.86rem;
  line-height:1.45;
  text-align:center;
  unicode-bidi:plaintext;
}

.zoom{ display:block; cursor:zoom-in; }

.strip-wrap{ position:relative; }
.gallery-wrap{
  width:min(var(--wrap), calc(100% - 2 * var(--gutter)));
  margin:48px auto 0;
}
.gallery-wrap > .gallery{ width:100%; margin:0; }

.strip-arrow{
  position:absolute; top:42%; z-index:3;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-top:-22px;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  color:var(--ink);
  font-size:1.05rem;
  cursor:pointer;
  opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.strip-arrow:hover,
.strip-arrow:focus-visible{ color:var(--accent-text); border-color:rgba(var(--accent-rgb),.5); }
.strip-prev{ left:8px; }
.strip-next{ right:8px; }
.strip-wrap:focus-within .strip-arrow{ opacity:1; pointer-events:auto; }
@media (hover:hover){
  .strip-wrap:hover .strip-arrow{ opacity:1; pointer-events:auto; }
}

.gallery-foot{
  width:min(var(--wrap), calc(100% - 2 * var(--gutter)));
  margin:18px auto 0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px 24px;
}
.gallery-hint{
  color:var(--ghost);
  font-size:.8rem;
  letter-spacing:.04em;
}
/* the screenshots are English: this says so, and names the page's language */
.lang-note{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  color:var(--muted);
  font-size:.86rem; line-height:1.5;
}
.lang-note .ico{ color:var(--accent-text); font-size:1.05rem; }


/* ---------- price ---------- */

.tiers{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:16px;
  margin-top:48px;
  align-items:start;
}
.tier{
  padding:30px 28px 32px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--panel);
}
.tier-sub{
  border-color:rgba(var(--accent-rgb),.32);
  background:
    radial-gradient(120% 90% at 50% 0, rgba(var(--accent-rgb),.10), transparent 62%),
    rgba(var(--tint-rgb),.02);
}
.tier-head{ display:flex; align-items:center; gap:12px; }
.tier-head .ico{ font-size:1.5rem; color:var(--accent-text); }
.tier h3{ font-size:1.3rem; letter-spacing:-.02em; }
.tier p.tier-lede{ margin-top:10px; color:var(--muted); font-size:.95rem; line-height:1.6; }
.tier ul{
  list-style:none;
  display:grid;
  gap:11px;
  margin-top:22px;
}
.tier li{
  display:flex; align-items:flex-start; gap:11px;
  color:var(--muted);
  font-size:.95rem; line-height:1.55;
}
.tier li .ico{ margin-top:.22em; font-size:1rem; color:var(--accent-text); stroke-width:2.2; }
.tier-sub ul{ grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); column-gap:24px; }

.terms{
  margin-top:16px;
  padding:22px 26px;
  border:1px solid var(--line-soft);
  border-radius:18px;
  color:var(--faint);
  font-size:.88rem; line-height:1.7;
}
.terms b{ display:block; margin-bottom:4px; color:var(--muted); font-size:.9rem; }

.get{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:22px 36px;
  margin-top:40px;
  padding:30px clamp(22px,4vw,48px);
  border:1px solid rgba(var(--accent-rgb),.3);
  border-radius:26px;
  background:
    radial-gradient(100% 140% at 0 50%, rgba(var(--accent-rgb),.11), transparent 60%),
    rgba(var(--tint-rgb),.02);
}
.get-copy{ flex:1 1 300px; }
.get-copy h3{ font-size:1.45rem; letter-spacing:-.02em; }
.get-copy p{ margin-top:6px; color:var(--muted); font-size:.98rem; }
.get .store-row{ margin-top:16px; justify-content:flex-start; }
.qr-box{
  display:flex; align-items:center; gap:18px;
  flex:none;
}
.qr-code{
  width:128px; height:128px;
  display:block;
  border-radius:12px;
}
.qr-box p{
  max-width:18ch;
  color:var(--faint);
  font-size:.86rem; line-height:1.5;
}


/* ---------- store badge ---------- */

.store-row{
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  gap:10px 14px;
}
.badge{
  display:inline-flex; align-items:center;
  /* Google asks for clear space a quarter of the badge's height all round;
     the picture is cropped to the badge itself, so the space is added here */
  padding:calc(var(--badge-h) * .14) 0;
  border-radius:12px;
  transition:transform .3s var(--ease), filter .3s var(--ease);
}
.badge img{ display:block; width:auto; height:var(--badge-h); }
.badge:hover{
  transform:translateY(-2px);
  filter:drop-shadow(0 10px 26px rgba(var(--accent-rgb),.25));
}


/* ---------- privacy ---------- */

.grid-adv{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:12px;
  margin-top:48px;
  list-style:none;
}
.adv{
  display:grid;
  align-content:start;
  gap:7px;
  padding:24px 22px 26px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.adv:hover{ border-color:rgba(var(--accent-rgb),.3); background:rgba(var(--accent-rgb),.03); }
.adv .ico-md{ color:var(--accent-text); margin-bottom:8px; }
.adv b{ font-size:1rem; font-weight:650; letter-spacing:-.015em; }
.adv span{ color:var(--muted); font-size:.9rem; line-height:1.58; }
.adv-wide{ grid-column:1 / -1; }
.adv-wide span{ max-width:80ch; }


/* ---------- languages ---------- */

.lang-band{ overflow:hidden; }
.lang-band::before{
  content:"";
  position:absolute; inset:auto -10% -40%; height:80%;
  background:radial-gradient(50% 60% at 50% 100%, rgba(var(--accent-rgb),.10), transparent 70%);
  pointer-events:none;
}
.lang-here{
  display:inline-flex; align-items:center; gap:14px;
  margin-top:30px;
  padding:14px 26px;
  padding-inline-start:16px;
  border:1px solid rgba(var(--accent-rgb),.5);
  border-radius:999px;
  background:linear-gradient(90deg, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),.04));
  font-size:clamp(1.3rem,2.6vw,1.75rem);
  font-weight:700;
  letter-spacing:-.02em;
}
.lang-here .tick{
  display:grid; place-items:center;
  width:38px; height:38px;
  border-radius:50%;
  background:var(--accent);
  color:var(--on-accent);
  font-size:1.2rem;
}
.lang-here .tick .ico{ stroke-width:2.6; }

.lang-list{
  list-style:none;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:8px;
  max-width:900px;
  margin:34px auto 0;
}
.lang-list a{
  display:inline-block;
  padding:6px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--faint);
  font-size:.84rem;
  text-decoration:none;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.lang-list a:hover{ color:var(--accent-text); border-color:rgba(var(--accent-rgb),.42); }
.lang-list a.is-active{
  color:var(--on-accent);
  background:var(--accent);
  border-color:var(--accent);
  font-weight:650;
}


/* ---------- FAQ ---------- */

.faq{
  max-width:780px;
  margin:40px auto 0;
}
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:first-child{ border-top:1px solid var(--line); }
.faq-item summary{
  display:flex; align-items:flex-start; gap:13px;
  padding:17px 2px;
  color:var(--ink);
  font-size:1.02rem; font-weight:550;
  line-height:1.5;
  cursor:pointer;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::before{
  content:"";
  flex:none;
  width:9px; height:9px;
  margin-top:.45em;
  border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
  transition:transform .2s ease;
}
[dir=rtl] .faq-item summary::before{ transform:rotate(135deg); }
.faq-item[open] summary::before{ transform:rotate(45deg); }
.faq-item summary:hover{ color:var(--accent-text); }
.faq-ans{
  padding-block:0 18px;
  padding-inline:24px 2px;
  color:var(--muted);
  font-size:.96rem;
  line-height:1.7;
}
.faq-ans p + p{ margin-top:10px; }


/* ---------- the note at the end ---------- */

.note{
  display:flex; align-items:flex-start; gap:20px;
  max-width:880px;
  margin-inline:auto;
  padding:26px clamp(20px,3vw,34px);
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
}
.note .ico-md{ color:var(--accent-text); margin-top:2px; }
.note b{ display:block; margin-bottom:5px; color:var(--ink); }
.note p{ color:var(--muted); font-size:.96rem; line-height:1.7; }
.band-note{ padding-top:0; }


/* ---------- footer ---------- */

.site-foot{
  position:relative;
  padding-top:clamp(56px,7vw,90px);
  border-top:1px solid var(--line-soft);
}
.foot-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:40px 36px;
  padding-bottom:48px;
}
.foot-brand .brand img{ border-radius:10px; }
.foot-brand p{
  max-width:38ch;
  margin-top:16px;
  color:var(--faint);
  font-size:.9rem;
  line-height:1.6;
}
.foot-brand .store-row{ --badge-h:40px; justify-content:flex-start; margin-top:18px; }
.foot-col h4{
  font-size:.76rem; font-weight:650;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--ghost);
}
.foot-col ul{
  list-style:none;
  margin-top:18px;
  display:grid;
  gap:11px;
}
.foot-col a{
  color:var(--muted);
  font-size:.92rem;
  text-decoration:none;
  transition:color .25s var(--ease);
}
.foot-col a:hover{ color:var(--accent-text); }
.foot-col .ext::after{
  content:"↗";
  display:inline-block;
  margin-inline-start:.3em;
  font-size:.8em;
  opacity:.6;
}
[dir=rtl] .foot-col .ext::after{ transform:scaleX(-1); }

.foot-legal{
  display:grid;
  gap:12px;
  padding:24px 0 42px;
  border-top:1px solid var(--line-soft);
}
.foot-legal p{ color:var(--ghost); font-size:.8rem; }
.legal-tm{ max-width:90ch; font-size:.74rem !important; line-height:1.6; color:var(--ghost) !important; opacity:.8; }


/* ---------- gallery overlay ---------- */

/* Which shot is open lives in the address bar, so the overlay needs no
   script; the script only adds the keys and the swipe. */
.lb{ display:none; position:fixed; inset:0; z-index:200; direction:ltr; }
.lb:target{ display:flex; align-items:center; justify-content:center; }
.lb-back{ position:absolute; inset:0; background:rgba(0,0,0,.94); }
.lb-fig{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  margin:0;
  max-width:92vw;
}
.lb-fig img{
  display:block;
  width:auto; height:auto;
  max-width:92vw;
  max-height:84vh;
  max-height:84dvh;
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  box-shadow:0 40px 90px rgba(0,0,0,.8);
}
.lb-fig figcaption{
  display:flex; align-items:baseline; justify-content:center;
  flex-wrap:wrap; gap:6px 12px;
  max-width:min(640px,88vw);
  color:var(--muted);
  font-size:.94rem; line-height:1.5;
  text-align:center;
  unicode-bidi:plaintext;
}
.lb-n{ color:var(--ghost); font-size:.8rem; font-variant-numeric:tabular-nums; }
.lb-btn{
  position:absolute; z-index:3;
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:var(--ink);
  font-size:1.1rem;
  text-decoration:none;
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.lb-btn:hover,
.lb-btn:focus-visible{ color:var(--accent-text); border-color:rgba(var(--accent-rgb),.5); background:rgba(0,0,0,.85); }
.lb-prev{ left:clamp(8px,3vw,34px);  top:50%; margin-top:-23px; }
.lb-next{ right:clamp(8px,3vw,34px); top:50%; margin-top:-23px; }
.lb-x{ top:clamp(10px,2.4vw,26px); right:clamp(8px,3vw,34px); }
html:has(.lb:target){ overflow:hidden; }


/* ---------- the header when the links do not fit ---------- */

.site-head.is-tight .nav-btn{ display:inline-flex; }
.site-head.is-tight .nav-close{ display:none; }
#menu:target ~ .site-head.is-tight .nav-open{ display:none; }
#menu:target ~ .site-head.is-tight .nav-close{ display:inline-flex; }

.site-head.is-tight .site-nav{
  display:none;
  position:absolute; top:100%; left:0; right:0;
  z-index:2;
  flex-direction:column; flex-wrap:nowrap; gap:0;
  margin:0;
  padding:2px var(--gutter) 12px;
  max-height:calc(100vh - 66px);
  max-height:calc(100dvh - 66px);
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  font-size:1rem;
}
#menu:target ~ .site-head.is-tight .site-nav{ display:flex; }
.site-head.is-tight .site-nav a{ padding:14px 2px; border-top:1px solid var(--line-soft); }
.site-head.is-tight .site-nav a:first-child{ border-top:0; }
.site-head.is-tight .lang-picker{ margin-inline-start:auto; }

.nav-backdrop{
  display:none;
  position:absolute; top:100%; left:0; right:0;
  z-index:1;
  height:100vh; height:100dvh;
  background:rgba(0,0,0,.6);
}
#menu:target ~ .site-head .nav-backdrop{ display:block; }


/* ---------- narrower screens ---------- */

@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-copy{ text-align:center; }
  .hero h1 em{ margin-inline:auto; }
  .hero-copy .lede{ margin-inline:auto; }
  .hero .store-row{ justify-content:center; }
  .hero-visual{ --dial: min(600px, calc(100vw - 8px)); margin-top:20px; }

  .split{ grid-template-columns:1fr; }
  .split-shots,
  .split-rev .split-shots{ order:-1; max-width:420px; }

  .tiers{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1 / -1; }
}

@media (max-width:720px){
  .steps{ grid-template-columns:1fr; }
}

@media (max-width:620px){
  :root{ --badge-h:44px; }
  .site-head{ gap:12px; }
  .site-head .brand span{ display:none; }
  .site-head .btn-mini{ display:none; }

  .hero{ padding-top:44px; }
  .hero h1{ font-size:clamp(2.2rem,10vw,3rem); }

  .stats{ grid-template-columns:1fr 1fr; }
  .stats li{ border-bottom:1px solid var(--line); }
  .stats li:nth-child(2n){ border-inline-end:0; }
  .stats li:nth-last-child(-n+2){ border-bottom:0; }

  .gallery figure{ flex-basis:190px; }
  /* on a phone the dial is narrow, so the phone in it grows and covers its
     top and bottom, leaving the sides */
  .hero-visual .phone{ width:calc(var(--dial) * .4); }
  .note{ flex-direction:column; gap:12px; }
  .foot-grid{ grid-template-columns:1fr; gap:34px; }
  .qr-box{ display:none; }   /* a code to scan means nothing on the phone itself */
  .lang-here{ font-size:1.25rem; }
}


/* ---------- motion ---------- */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}

@media print{
  body{ background:#fff; color:#000; }
  .site-head,.ornament,.wave-rule,.lightbox,.scene,.dawn-sun,.noon-sun,.cloud,.sky-sun{ display:none; }
}


/* ==========================================================================
   Tattvas: the sun rising over the mountains.

   The tattva cycle begins at sunrise, so the page opens on one: a clear
   morning sky turning golden at the horizon, the sun rising behind the dial
   and sending its rays across the sky, and five ranges in front of it, one
   in the colour of each tattva, from the subtlest to the densest: Akasha's
   snow far off and highest, then Vayu's blue, Apas's orchid and Tejas's
   coral, and Prithvi's golden foothills nearest. The dial is set like enamel
   in gold, and a small sun goes round it. Below the hero the page keeps the
   light of the morning: sky blue, gold and the five colours on white, far
   ranges at the end of the bands, the five tattvas on a golden thread and a
   sun turning behind "how it works". The headings are set in a book face.

   The tattvas keep the colours the app gives them. On the dial they sit on
   dark enamel, as on the app's dark screen (Tattva.darkSurfaceArgb); on the
   light page their words and symbols take the app's colours for a light
   screen (Tattva.lightSurfaceArgb), on cards tinted the way the app tints
   them. Akasha is white on a dark screen, which a light page cannot show, so
   here it is painted a pearly lilac.

   The drawings are plain SVG files in source/tattvas/art; the build puts
   each one in where this file names it (art: and the file's name, in double
   braces), and where page.html says @art. The landscape in the hero is drawn
   by tools/draw-landscapes.mjs.
   ========================================================================== */

:root{
  --bg:          #fffbf3;
  --bg-raise:    #ffffff;
  --ink:         #1f2148;
  --muted:       rgba(31,33,72,.80);
  --faint:       rgba(31,33,72,.72);
  --ghost:       rgba(31,33,72,.68);
  --line:        rgba(31,33,72,.13);
  --line-soft:   rgba(31,33,72,.08);
  --panel:       rgba(255,255,255,.86);
  --tint-rgb:    70,80,170;
  --warn:        #b3261e;
  --option-bg:   #ffffff;
  --option-ink:  #1f2148;

  --accent:      #ffd23f;     /* the yellow of the app's icon, warmed by the sun */
  --accent-rgb:  255,210,63;
  --on-accent:   #1f2148;
  --accent-text: #8f5200;
  --gold:        #e6a925;
  --enamel:      #2a2566;

  --phone-drop:  0 34px 70px -26px rgba(60,60,150,.45);
  --phone-glow:  0 0 90px -10px rgba(255,200,90,.75);
  --shot-shadow: 0 24px 44px -22px rgba(60,60,150,.4);

  --display: Palatino, "Palatino Linotype", "Book Antiqua", "URW Palladio L", P052, "Iowan Old Style", Georgia, serif;
  --tight: -.012em;

  /* the five tattvas: the app's colour on a dark screen, the colour to paint
     them with on this page, and the app's colour on a light screen, for
     their words and symbols */
  --akasha:  #ffffff;  --akasha-paint: #cfc8fb;  --akasha-ink:  #4a4a55;
  --vayu:    #7e97ff;                            --vayu-ink:    #2233cc;
  --tejas:   #ff8a80;                            --tejas-ink:   #b3001b;
  --apas:    #f08af0;                            --apas-ink:    #a0009f;
  --prithvi: #ffeb57;                            --prithvi-ink: #7d6b00;
  /* a lilac of the morning sky, for the beads that are not a tattva's */
  --lilac:   #bdb0ff;                            --lilac-ink:   #5a45c0;
}

.t-akasha { --t: var(--akasha);  --t-paint: var(--akasha-paint); --t-ink: var(--akasha-ink); }
.t-vayu   { --t: var(--vayu);    --t-paint: var(--vayu);         --t-ink: var(--vayu-ink); }
.t-tejas  { --t: var(--tejas);   --t-paint: var(--tejas);        --t-ink: var(--tejas-ink); }
.t-apas   { --t: var(--apas);    --t-paint: var(--apas);         --t-ink: var(--apas-ink); }
.t-prithvi{ --t: var(--prithvi); --t-paint: var(--prithvi);      --t-ink: var(--prithvi-ink); }

h1, .band h2{ font-weight:700; }
.band h2{ letter-spacing:-.01em; }
/* the yellow of the accent is too pale to mark a place on a light page */
:focus-visible{ outline-color:var(--accent-text); }
.faq-item summary::before{ border-color:var(--accent-text); }
.site-head{ background:color-mix(in srgb, var(--bg) 80%, transparent); }
.nav-backdrop{ background:rgba(31,33,72,.35); }


/* ---------- the sky at sunrise ----------
   The sky is the hero's own background, painted under everything else in it,
   so the sun can sit in front of the sky and behind the mountains. Its
   colours are measured from the bottom, where the mountains stand, so the
   horizon glows just above the peaks however tall the hero grows. */

.hero{
  /* the ranges keep their shape: on a wide screen they grow with it rather
     than lose their peaks off the top */
  --range-h: max(clamp(380px, 34vw, 520px), 32.5vw);
  --sun-x: 72%;
  background:
    radial-gradient(40% 30% at var(--sun-x) calc(100% - var(--range-h) * .6),
      rgba(255,240,180,.85), rgba(255,214,150,.45) 42%, rgba(255,184,170,.14) 72%, transparent 100%),
    linear-gradient(180deg,
      #78baff 0, #9ccbff 22%, #c3c9ff 44%, #f1c9e6 66%, #ffd3b8 84%, #ffe6b4 100%)
      bottom / 100% calc(var(--range-h) + 560px) no-repeat,
    #78baff;
}
.hero::before{ display:none; }

.scene{
  position:absolute; inset:0;
  z-index:-1;
  pointer-events:none;
}
.scene .range{
  position:absolute; left:0; right:0; bottom:0;
  width:100%; height:var(--range-h);
  display:block;
}

/* a haze of morning light round the words, so the peaks soften where the
   text stands */
.hero-copy{ position:relative; }
.hero-copy::before{
  content:"";
  position:absolute;
  inset-block:-12% -16%;
  inset-inline:-28% -20%;
  z-index:-1;
  background:radial-gradient(closest-side at 48% 56%, rgba(255,250,246,.66), rgba(255,250,246,.44) 56%, rgba(255,250,246,0));
  pointer-events:none;
}

.hero h1 em{
  color:var(--accent-text);
  background:linear-gradient(90deg, #9e3a06, #b01f58 52%, #5233bd);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
}
.eyebrow{ background:rgba(255,255,255,.8); border-color:rgba(230,169,37,.7); }
.eyebrow .ico{ color:#c97f00; }
.hero-note{ color:var(--muted); }
.lang-chip{ background:rgba(255,255,255,.8); border-color:rgba(230,169,37,.6); }


/* ---------- the sun, rising behind the dial ---------- */

.dawn-sun{
  position:absolute;
  z-index:-2;
  left:50%; top:50%;
  width:calc(var(--dial) * .6);
  aspect-ratio:1;
  margin-top:calc(var(--dial) * .14);
  translate:-50% -50%;
  border-radius:50%;
  background:radial-gradient(circle, #fffdf4 0, #fff6c9 30%, #ffe680 62%, #ffd04a 86%, #ffbf3a 100%);
  box-shadow:
    0 0 60px 16px rgba(255,220,120,.7),
    0 0 180px 70px rgba(255,190,110,.35),
    0 0 360px 160px rgba(255,170,150,.16);
}
/* its rays reach across the sky and turn as slowly as the day goes by */
.dawn-sun .rays{
  position:absolute;
  inset:-170%;
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(255,248,220,.32) 0 3deg, rgba(255,250,228,0) 3deg 12deg);
  -webkit-mask-image:radial-gradient(circle closest-side, transparent 14%, #000 18%, rgba(0,0,0,.5) 50%, transparent 100%);
          mask-image:radial-gradient(circle closest-side, transparent 14%, #000 18%, rgba(0,0,0,.5) 50%, transparent 100%);
  animation:turn 240s linear infinite;
}
@keyframes turn{ to{ transform:rotate(360deg); } }


/* ---------- the dial around the phone ----------
   The cycle in the order the app starts with, on a ring of enamel between
   two gold rims, with a tick of gold for every minute. The sun goes round
   once in two minutes, a second for each minute of the cycle, and the
   tattva it passes lights up for its twenty-four. */

.ornament .ticks{
  fill:none;
  stroke:rgba(214,150,20,.6);
  stroke-width:10;
  stroke-dasharray:1.6 14.108;   /* 120 ticks, one a minute */
  transform:rotate(-90deg);
  transform-origin:320px 320px;
}
.ornament .rim{ fill:none; stroke:var(--gold); stroke-width:1.8; }
.ornament .track{
  fill:none;
  stroke:var(--enamel);
  stroke-opacity:.9;
  stroke-width:48;
  filter:drop-shadow(0 8px 18px rgba(40,30,110,.3));
}
.ornament .arc{
  fill:none;
  stroke:var(--t);
  stroke-width:28;
  stroke-linecap:round;
  opacity:.88;
  animation:lit 120s linear infinite;
}
.ornament .mark .disc{ fill:#221d58; stroke:var(--t); stroke-width:2; }
.ornament .mark .glyph{ fill:var(--t); }
.ornament .mark{ animation:lit-mark 120s linear infinite; }

.ornament .t-akasha  { animation-delay:0s; }
.ornament .t-vayu    { animation-delay:-96s; }
.ornament .t-tejas   { animation-delay:-72s; }
.ornament .t-apas    { animation-delay:-48s; }
.ornament .t-prithvi { animation-delay:-24s; }
@keyframes lit{
  0%, 19.9%{ opacity:1; filter:drop-shadow(0 0 6px var(--t)) drop-shadow(0 0 14px var(--t)); }
  20%, 100%{ opacity:.88; filter:none; }
}
@keyframes lit-mark{
  0%, 19.9%{ filter:drop-shadow(0 0 8px var(--t)); }
  20%, 100%{ filter:none; }
}

.ornament .hand{
  transform-origin:320px 320px;
  animation:sweep 120s linear infinite;
}
.ornament .sun circle{ fill:#ffc93a; }
.ornament .sun path{ stroke:#f0a91d; stroke-width:2.6; stroke-linecap:round; }
.ornament .sun{ filter:drop-shadow(0 0 7px rgba(255,190,60,.95)); }
@keyframes sweep{ to{ transform:rotate(360deg); } }

.hero-visual .phone{
  --phone-glow: 0 0 80px -6px rgba(255,214,110,.85);
}


/* ---------- the numbers, on a strip of white over the foothills ---------- */

.stats{
  border:1px solid rgba(255,255,255,.95);
  border-radius:22px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  box-shadow:0 22px 44px -28px rgba(60,60,150,.45), 0 0 0 1px rgba(var(--accent-rgb),.18);
}
.stats li{ border-inline-end-color:var(--line-soft); }
.stats b{ font-family:var(--display); }
.stats li:nth-child(1) b{ color:var(--accent-text); }
.stats li:nth-child(2) b{ color:var(--tejas-ink); }
.stats li:nth-child(3) b{ color:var(--vayu-ink); }
.stats li:nth-child(4) b{ color:var(--apas-ink); }
/* the five, in the colours of the dial */
.stats li:nth-child(1) b::after{
  content:"";
  display:block;
  width:72px;
  height:8px;
  margin:10px auto 2px;
  border:2px solid var(--enamel);
  border-radius:6px;
  background:linear-gradient(90deg, var(--akasha) 0 18.6%, transparent 18.6% 20.4%, var(--vayu) 20.4% 39%, transparent 39% 40.8%,
    var(--tejas) 40.8% 59.4%, transparent 59.4% 61.2%, var(--apas) 61.2% 79.8%, transparent 79.8% 81.6%, var(--prithvi) 81.6%) padding-box,
    var(--enamel) border-box;
}


/* ---------- below the hero: the morning light ---------- */

.step, .card, .tier, .adv, .note, .terms, .spot, .get, .lang-note{
  border-color:rgba(var(--tint-rgb),.13);
  box-shadow:0 18px 38px -28px rgba(60,60,150,.42);
}
.step, .card, .tier, .adv, .spot, .terms{ background:#fff; }
.card, .tier, .adv, .spot, .get, .step{ border-radius:22px; }
.card:hover{ background:#fff; border-color:rgba(var(--accent-rgb),.6); box-shadow:0 26px 50px -30px rgba(230,169,37,.6); }
.card-accent{ background:linear-gradient(160deg, #fff4cc, #fff 62%); border-color:rgba(var(--accent-rgb),.6); }
.qr-code{ box-shadow:0 0 0 1px var(--line); }
.note{ background:#fff7dc; border-color:#ffe39a; }
.callout{
  border-color:rgba(var(--accent-rgb),.6);
  background:linear-gradient(100deg, #fff3c8, #fdeefa 60%, #eef1ff);
}
.points .ico{ color:var(--vayu-ink); }
.lang-here{ background:linear-gradient(90deg, #fff1c2, #eef1ff); }

/* the kickers start with the sun rising between two peaks */
.kicker::before{
  content:"";
  display:inline-block;
  width:1.6em; height:1.2em;
  margin-inline-end:.6em;
  vertical-align:-.25em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M7.5 10.5L4.5 9.3M9.5 7.5L7.2 5.2M12.5 5.5L11.3 2.5M16 4.8L16 1.6M19.5 5.5L20.7 2.5M22.5 7.5L24.8 5.2M24.5 10.5L27.5 9.3' stroke='%23f0a91d' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='14' r='6.6' fill='%23ffc93a'/%3E%3Cpath d='M0 23L9.5 7.5L15 15.5L20.5 9.5L32 23Z' fill='%238ea2ff'/%3E%3Cpath d='M9.5 7.5L12.4 12.2L10.6 11.4L8.8 12.6L7.2 11.2ZM20.5 9.5L23 12.6L21.4 12L20 13L18.4 12Z' fill='%23ffffff'/%3E%3Cpath d='M0 23L5 16.5L9 19.5L13 15.8L18 20L24 15.5L32 23Z' fill='%23f08af0' fill-opacity='.9'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* the icons in beads of the five colours, taken in turn */
.card .ico-lg, .adv .ico-md{
  box-sizing:content-box;
  padding:.38em;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #fff, color-mix(in srgb, var(--c) 45%, #fff) 80%);
  color:var(--c-ink);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 8px 20px -10px var(--c);
}
.adv .ico-md{ padding:.32em; }
:is(.grid-cards, .grid-adv) > :nth-child(5n+1){ --c: var(--prithvi);      --c-ink: var(--accent-text); }
:is(.grid-cards, .grid-adv) > :nth-child(5n+2){ --c: var(--vayu);         --c-ink: var(--vayu-ink); }
:is(.grid-cards, .grid-adv) > :nth-child(5n+3){ --c: var(--tejas);        --c-ink: var(--tejas-ink); }
:is(.grid-cards, .grid-adv) > :nth-child(5n+4){ --c: var(--apas);         --c-ink: var(--apas-ink); }
:is(.grid-cards, .grid-adv) > :nth-child(5n+5){ --c: var(--lilac);        --c-ink: var(--lilac-ink); }

/* the three steps numbered in the sun, the five colours, and day and night */
.step-n{
  border:0;
  color:var(--ink);
  background:radial-gradient(circle at 35% 30%, #fff8d8, #ffd23f 70%, #f5b52a);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.22), 0 6px 16px -6px rgba(230,150,20,.7);
}
.step:nth-child(2) .step-n{
  background:conic-gradient(from -36deg, var(--akasha-paint) 0 20%, var(--vayu) 0 40%, var(--tejas) 0 60%, var(--apas) 0 80%, var(--prithvi) 0);
  box-shadow:0 0 0 4px rgba(126,151,255,.18), 0 6px 16px -6px rgba(126,151,255,.7);
}
.step:nth-child(3) .step-n{
  background:linear-gradient(90deg, #ffd23f 50%, #9fb0ff 50%);
  box-shadow:0 0 0 4px rgba(126,151,255,.18), 0 6px 16px -6px rgba(126,151,255,.7);
}

/* the alternate bands: a wash of the morning sky, ending on far ranges in
   the haze; the ground is the page's own colour, so the band below follows
   on without a seam */
.band-alt{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='br-fade' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fffbf3' stop-opacity='0'/%3E%3Cstop offset='.55' stop-color='%23fffbf3' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23fffbf3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 120L0 75.4L25 74.9L50 76L75 76.2L100 68.1L125 58.5L150 47.9L175 50.7L200 61.4L225 73.3L250 82.2L275 83.1L300 84L325 80.7L350 73.8L375 61.9L400 50.2L425 38.6L450 46.5L475 59.4L500 71L525 81L550 90.4L575 90.2L600 88.7L625 87.2L650 80.8L675 73.3L700 64.5L725 73.7L750 80.4L775 86.7L800 89.3L825 88L850 85.7L875 83.5L900 76.3L925 67.5L950 55.7L975 43L1000 47.8L1025 60.7L1050 70.2L1075 77.8L1100 80.9L1125 79.5L1150 73.4L1175 62.1L1200 48L1225 35.1L1250 19.4L1275 33.3L1300 47.8L1325 61.3L1350 71.7L1375 78L1400 75.3L1425 69.4L1450 62.5L1475 52.4L1500 59.1L1525 68.2L1550 74.9L1575 80.9L1600 80.2L1600 120Z' fill='%23e3e1ff'/%3E%3Cpath d='M0 120L0 88.9L25 82.6L50 76.5L75 76.3L100 81.5L125 85.9L150 90.5L175 94.1L200 94.2L225 93L250 89.7L275 86.2L300 81.4L325 75.4L350 78.3L375 82.4L400 87L425 90.3L450 92.5L475 92.3L500 91.3L525 91.8L550 92.1L575 92.1L600 91.4L625 90.1L650 89.3L675 89.1L700 87.2L725 82.4L750 76.8L775 70.4L800 62.6L825 57.6L850 64.3L875 70.5L900 77.2L925 82.8L950 87.5L975 87.5L1000 87.7L1025 86.3L1050 81.9L1075 77.6L1100 72.7L1125 69.3L1150 74.3L1175 77.7L1200 80.3L1225 82.8L1250 83.9L1275 84.7L1300 85L1325 85.2L1350 85.9L1375 86.7L1400 87.2L1425 87.3L1450 86.2L1475 82.3L1500 77L1525 71.7L1550 65.2L1575 66.3L1600 72.3L1600 120Z' fill='%23eddff9'/%3E%3Crect y='70' width='1600' height='50' fill='url(%23br-fade)'/%3E%3C/svg%3E") bottom / 100% 120px no-repeat,
    radial-gradient(45% 40% at 0 50%, rgba(255,214,90,.22), transparent 70%),
    radial-gradient(40% 40% at 100% 45%, rgba(240,138,240,.12), transparent 70%),
    linear-gradient(180deg, var(--bg), #eef4ff 160px, #f4f1ff 70%, #f6efff calc(100% - 120px));
}

/* the sun turning slowly behind "how it works": the cycle starts at sunrise */
#how{ overflow:hidden; }
#how::before{
  content:"";
  position:absolute;
  width:min(640px, 84vw);
  aspect-ratio:1;
  inset-inline-end:max(-200px, calc(50% - 780px));
  top:50%;
  translate:0 -50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cpath d='M293.7 174.2L300 10L306.3 174.2ZM317.5 175.2L338.2 83.3L326.2 176.8ZM337.1 179.6L399.2 27.5L349 183.9ZM359.1 188.7L410 109.5L366.8 193.2ZM376.1 199.6L486.4 77.8L385.7 207.6ZM393.6 215.7L468.5 158.6L399.3 222.4ZM405.8 231.6L551.1 155L412.1 242.5ZM416.8 252.8L506.7 224.8L419.8 261.1ZM422.8 271.9L585.6 249.6L425 284.3ZM425.9 295.6L520 300L425.9 304.4ZM425 315.7L585.6 350.4L422.8 328.1ZM419.8 338.9L506.7 375.2L416.8 347.2ZM412.1 357.5L551.1 445L405.8 368.4ZM399.3 377.6L468.5 441.4L393.6 384.3ZM385.7 392.4L486.4 522.2L376.1 400.4ZM366.8 406.8L410 490.5L359.1 411.3ZM349 416.1L399.2 572.5L337.1 420.4ZM326.2 423.2L338.2 516.7L317.5 424.8ZM306.3 425.8L300 590L293.7 425.8ZM282.5 424.8L261.8 516.7L273.8 423.2ZM262.9 420.4L200.8 572.5L251 416.1ZM240.9 411.3L190 490.5L233.2 406.8ZM223.9 400.4L113.6 522.2L214.3 392.4ZM206.4 384.3L131.5 441.4L200.7 377.6ZM194.2 368.4L48.9 445L187.9 357.5ZM183.2 347.2L93.3 375.2L180.2 338.9ZM177.2 328.1L14.4 350.4L175 315.7ZM174.1 304.4L80 300L174.1 295.6ZM175 284.3L14.4 249.6L177.2 271.9ZM180.2 261.1L93.3 224.8L183.2 252.8ZM187.9 242.5L48.9 155L194.2 231.6ZM200.7 222.4L131.5 158.6L206.4 215.7ZM214.3 207.6L113.6 77.8L223.9 199.6ZM233.2 193.2L190 109.5L240.9 188.7ZM251 183.9L200.8 27.5L262.9 179.6ZM273.8 176.8L261.8 83.3L282.5 175.2Z' fill='%23ffd25a' fill-opacity='.55' stroke='%23eaa21c' stroke-width='1.4' stroke-linejoin='round'/%3E%3Ccircle cx='300' cy='300' r='112' fill='%23ffe27a' fill-opacity='.5' stroke='%23eaa21c' stroke-width='1.6'/%3E%3Ccircle cx='300' cy='300' r='96' fill='none' stroke='%23eaa21c' stroke-width='1.2' stroke-dasharray='3 7'/%3E%3Ccircle cx='300' cy='300' r='70' fill='%23fff3c4' fill-opacity='.7' stroke='%23eaa21c' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity:.55;
  animation:turn 300s linear infinite;
  pointer-events:none;
}
#how .wrap{ position:relative; }


/* ---------- the five tattvas, each on a card tinted with its colour ---------- */

.spot-list.five .spot{
  position:relative;
  overflow:hidden;
  border-color:color-mix(in srgb, var(--t-paint) 55%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--t-paint) 22%, #fff), #fff 72%);
}
.spot-list.five .spot.t-akasha{ background:linear-gradient(160deg, #f0edff, #eaf5ff 42%, #fff 76%); }
.spot-list.five .spot::before{
  content:"";
  position:absolute;
  width:170px; height:170px;
  inset-inline-end:-60px; top:-70px;
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--t-paint) 40%, transparent), transparent 70%);
  pointer-events:none;
}
.spot-list.five .spot-mark{
  position:relative;
  width:56px; height:56px;
  border:0;
  background:radial-gradient(circle at 34% 28%, #fff, color-mix(in srgb, var(--t-paint) 62%, #fff) 72%);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--t-paint) 24%, transparent), 0 10px 24px -8px var(--t-paint);
}
.spot-mark svg{ fill:var(--t-ink); }
.spot h3{ color:var(--t-ink); }
.spot-body{ position:relative; }


/* ---------- the map: the phones on the coloured bands of the map ---------- */

#map{ overflow:hidden; }
#map .split-shots::before{
  inset:-2% -10%;
  border-radius:50%;
  background:linear-gradient(105deg, var(--akasha-paint) 0 20%, var(--vayu) 20% 40%, var(--tejas) 40% 60%, var(--apas) 60% 80%, var(--prithvi) 80%);
  -webkit-mask-image:radial-gradient(closest-side, #000 35%, transparent 100%);
          mask-image:radial-gradient(closest-side, #000 35%, transparent 100%);
  filter:blur(24px);
  opacity:.75;
}

/* the screens on a stage of warm light */
#screens{
  background:
    radial-gradient(70% 46% at 50% 64%, rgba(var(--accent-rgb),.2), transparent 70%),
    radial-gradient(40% 40% at 16% 70%, rgba(126,151,255,.12), transparent 70%),
    radial-gradient(40% 40% at 86% 60%, rgba(240,138,240,.1), transparent 70%);
}

/* the subscription glows, framed in the five colours */
.tier-sub{
  border:1.5px solid transparent;
  background:
    radial-gradient(120% 90% at 50% 0, rgba(var(--accent-rgb),.18), transparent 62%) padding-box,
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--prithvi), var(--tejas) 30%, var(--apas) 55%, var(--vayu) 80%, var(--akasha-paint)) border-box;
  box-shadow:0 28px 60px -36px rgba(126,151,255,.6), 0 0 50px -24px rgba(var(--accent-rgb),.8);
}
.get{
  border-color:rgba(var(--accent-rgb),.55);
  background:
    radial-gradient(100% 140% at 0 50%, rgba(var(--accent-rgb),.22), transparent 60%),
    radial-gradient(80% 140% at 100% 50%, rgba(126,151,255,.14), transparent 60%),
    #fff;
}
.lang-band::before{ background:radial-gradient(50% 60% at 50% 100%, rgba(var(--accent-rgb),.24), transparent 70%); }

/* the five tattvas on a golden thread, in place of the wave */
.wave-rule{
  height:60px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cdefs%3E%3ClinearGradient id='fv-l' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23e6a925' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23e6a925'/%3E%3C/linearGradient%3E%3ClinearGradient id='fv-r' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23e6a925'/%3E%3Cstop offset='1' stop-color='%23e6a925' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M120 30H470' stroke='url(%23fv-l)' stroke-width='1.6'/%3E%3Cpath d='M730 30H1080' stroke='url(%23fv-r)' stroke-width='1.6'/%3E%3Cpath d='M478 30H722' stroke='%23e6a925' stroke-width='1.6' stroke-dasharray='2 6' stroke-linecap='round'/%3E%3Cg%3E%3Cellipse cx='500' cy='30' rx='7.4' ry='10.6' fill='%23ffffff' stroke='%239c92e6' stroke-width='2' /%3E%3Ccircle cx='550' cy='30' r='10' fill='%237e97ff' /%3E%3Cpath d='M600 19.5L611.6 39.5H588.4Z' fill='%23ff8a80' /%3E%3Cpath d='M662 25A12 12 0 0 1 638 25Z' fill='%23f08af0' /%3E%3Crect x='690.5' y='20.5' width='19' height='19' fill='%23ffd84a' /%3E%3C/g%3E%3Ccircle cx='470' cy='30' r='3' fill='%23e6a925'/%3E%3Ccircle cx='730' cy='30' r='3' fill='%23e6a925'/%3E%3C/svg%3E") center / auto 100% no-repeat;
  -webkit-mask-image:none; mask-image:none;
}
.wave-rule svg{ display:none; }

/* the footer stands on the ranges again, nearer now and in the five colours */
.site-foot{
  --range: clamp(70px, 9vw, 120px);
  border-top:0;
  margin-top:clamp(30px, 4vw, 60px);
  background:linear-gradient(180deg, #fff4d6 0, #fff8e8 200px, var(--bg) 100%);
  --muted: rgba(31,33,72,.84);
  --faint: rgba(31,33,72,.8);
  --ghost: rgba(31,33,72,.76);
}
.site-foot .legal-tm{ opacity:1; }
.site-foot .wave-rule{
  top:calc(2px - var(--range)); height:var(--range);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 150' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='fr-far' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.3' stop-color='%23b9c5ff'/%3E%3Cstop offset='1' stop-color='%23cfd7ff'/%3E%3C/linearGradient%3E%3ClinearGradient id='fr-orchid' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23eba6f3'/%3E%3Cstop offset='1' stop-color='%23f6d3f8'/%3E%3C/linearGradient%3E%3ClinearGradient id='fr-coral' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffaa98'/%3E%3Cstop offset='1' stop-color='%23ffd3c7'/%3E%3C/linearGradient%3E%3ClinearGradient id='fr-gold' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffdb74'/%3E%3Cstop offset='.6' stop-color='%23ffefc0'/%3E%3Cstop offset='1' stop-color='%23fff4d6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 150L0 76.8L25 75.8L50 71.2L75 62.6L100 53L125 46.4L150 56.8L175 65.2L200 71.8L225 74.4L250 73.6L275 65.7L300 56L325 44.5L350 31.6L375 33.3L400 45.7L425 57.2L450 65.7L475 74.8L500 75.4L525 73.5L550 66.2L575 57L600 45.6L625 47.9L650 57.8L675 65.2L700 71.9L725 71.9L750 70.3L775 71.2L800 69.5L825 59.7L850 49.3L875 38.9L900 27.4L925 38.4L950 49.7L975 59.8L1000 68.4L1025 71.3L1050 71.1L1075 67.1L1100 55.6L1125 41.3L1150 26.6L1175 11.1L1200 20.1L1225 33.6L1250 47.2L1275 56.7L1300 64.2L1325 63.3L1350 61.5L1375 54.7L1400 46.7L1425 37.2L1450 26.6L1475 37.5L1500 48.9L1525 57L1550 61.5L1575 61L1600 61.1L1600 150Z' fill='url(%23fr-far)'/%3E%3Cpath d='M0 150L0 86.5C8.3 86.1 33.3 85.2 50 83.8C66.7 82.5 83.3 80.5 100 78.6C116.7 76.6 133.3 74.2 150 72.1C166.7 70 183.3 67.2 200 65.8C216.7 64.4 233.3 63.6 250 63.8C266.7 63.9 283.3 65.5 300 66.9C316.7 68.3 333.3 70.4 350 72.2C366.7 73.9 383.3 75.9 400 77.4C416.7 78.8 433.3 80 450 80.8C466.7 81.6 483.3 81.7 500 82.1C516.7 82.5 533.3 82.6 550 82.9C566.7 83.3 583.3 83.9 600 84C616.7 84.1 633.3 83.8 650 83.5C666.7 83.3 683.3 82.9 700 82.5C716.7 82.2 733.3 81.9 750 81.6C766.7 81.3 783.3 81.3 800 80.6C816.7 80 833.3 78.7 850 77.5C866.7 76.4 883.3 75.1 900 73.8C916.7 72.4 933.3 70.3 950 69.4C966.7 68.4 983.3 68 1000 68C1016.7 67.9 1033.3 68.3 1050 69C1066.7 69.6 1083.3 70.6 1100 71.8C1116.7 73 1133.3 75.1 1150 76.3C1166.7 77.4 1183.3 77.9 1200 78.7C1216.7 79.6 1233.3 81 1250 81.5C1266.7 81.9 1283.3 81.8 1300 81.5C1316.7 81.2 1333.3 80.6 1350 79.6C1366.7 78.5 1383.3 77.1 1400 75.3C1416.7 73.4 1433.3 70.2 1450 68.4C1466.7 66.6 1483.3 64.8 1500 64.3C1516.7 63.8 1533.3 64.2 1550 65.3C1566.7 66.4 1591.7 70 1600 71L1600 150Z' fill='url(%23fr-orchid)'/%3E%3Cpath d='M0 150L0 113C8.3 112.9 33.3 112.7 50 112.6C66.7 112.5 83.3 112.5 100 112.4C116.7 112.3 133.3 112.1 150 112.1C166.7 112.1 183.3 112.3 200 112.4C216.7 112.4 233.3 112.2 250 112.2C266.7 112.2 283.3 112.3 300 112.4C316.7 112.5 333.3 112.8 350 112.7C366.7 112.6 383.3 112.1 400 111.6C416.7 111 433.3 110.3 450 109.4C466.7 108.6 483.3 107.6 500 106.6C516.7 105.7 533.3 104.4 550 103.7C566.7 103 583.3 102.4 600 102.4C616.7 102.4 633.3 103.1 650 103.7C666.7 104.4 683.3 105.4 700 106.5C716.7 107.7 733.3 109.4 750 110.8C766.7 112.2 783.3 113.8 800 114.8C816.7 115.9 833.3 116.6 850 117.1C866.7 117.6 883.3 117.7 900 117.8C916.7 118 933.3 117.8 950 117.9C966.7 117.9 983.3 117.9 1000 117.9C1016.7 117.9 1033.3 118.2 1050 117.9C1066.7 117.7 1083.3 117.1 1100 116.5C1116.7 115.9 1133.3 115.1 1150 114.2C1166.7 113.3 1183.3 112.2 1200 111.3C1216.7 110.3 1233.3 109.2 1250 108.4C1266.7 107.7 1283.3 106.9 1300 106.8C1316.7 106.7 1333.3 107.1 1350 107.7C1366.7 108.2 1383.3 109.4 1400 110.2C1416.7 111 1433.3 111.9 1450 112.4C1466.7 112.9 1483.3 112.9 1500 113.3C1516.7 113.6 1533.3 114.3 1550 114.5C1566.7 114.6 1591.7 114.3 1600 114.3L1600 150Z' fill='url(%23fr-coral)'/%3E%3Cpath d='M0 150L0 120.2C16.7 119.8 66.7 118.4 100 117.8C133.3 117.2 166.7 116.2 200 116.5C233.3 116.7 266.7 118.1 300 119.2C333.3 120.4 366.7 122.1 400 123.3C433.3 124.5 466.7 125.9 500 126.5C533.3 127.1 566.7 127.2 600 126.9C633.3 126.6 666.7 125.6 700 124.7C733.3 123.7 766.7 122.3 800 121.4C833.3 120.4 866.7 119 900 118.8C933.3 118.7 966.7 119.5 1000 120.5C1033.3 121.4 1066.7 123.3 1100 124.5C1133.3 125.7 1166.7 126.9 1200 127.6C1233.3 128.2 1266.7 128.1 1300 128.3C1333.3 128.5 1366.7 128.9 1400 128.8C1433.3 128.8 1466.7 128.3 1500 128.2C1533.3 128 1583.3 127.8 1600 127.8L1600 150Z' fill='url(%23fr-gold)'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

/* the questions, between a sunrise in a frame of gold and the five tattvas
   one above the other, where the window is wide enough for them */
#faq .wrap{ position:relative; }
@media (min-width:1200px){
  #faq .wrap::before,
  #faq .wrap::after{
    content:"";
    position:absolute;
    pointer-events:none;
  }
  #faq .wrap::before{
    inset-inline-start:0; top:180px;
    width:190px; height:190px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='vg-sky' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%2378baff'/%3E%3Cstop offset='.45' stop-color='%23c3c9ff'/%3E%3Cstop offset='.72' stop-color='%23ffc9dc'/%3E%3Cstop offset='1' stop-color='%23ffe2a8'/%3E%3C/linearGradient%3E%3CradialGradient id='vg-sun'%3E%3Cstop offset='0' stop-color='%23fffdf0'/%3E%3Cstop offset='.55' stop-color='%23ffe680'/%3E%3Cstop offset='1' stop-color='%23ffc93a'/%3E%3C/radialGradient%3E%3CradialGradient id='vg-glow'%3E%3Cstop offset='0' stop-color='%23fff3c0' stop-opacity='.95'/%3E%3Cstop offset='1' stop-color='%23ffd2a0' stop-opacity='0'/%3E%3C/radialGradient%3E%3CclipPath id='vg-round'%3E%3Ccircle cx='100' cy='100' r='88'/%3E%3C/clipPath%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='96' fill='%23fff6dc' stroke='%23e6a925' stroke-width='2'/%3E%3Cg clip-path='url(%23vg-round)'%3E%3Crect width='200' height='200' fill='url(%23vg-sky)'/%3E%3Ccircle cx='112' cy='118' r='62' fill='url(%23vg-glow)'/%3E%3Cg stroke='%23ffeeb0' stroke-width='3' stroke-linecap='round' opacity='.85'%3E%3Cpath d='M112 84L112 36M88 92L62 52M136 92L162 52M80 108L42 90M144 108L182 90'/%3E%3C/g%3E%3Ccircle cx='112' cy='118' r='26' fill='url(%23vg-sun)'/%3E%3Cpath d='M0 150L38 96L58 118L84 70L112 128L136 92L162 120L182 98L200 118V200H0Z' fill='%23f6f4ff'/%3E%3Cpath d='M84 70L58 118L72 134ZM38 96L0 150L22 150ZM136 92L112 128L126 136ZM182 98L162 120L174 132Z' fill='%23cfc8f8'/%3E%3Cpath d='M0 148L30 124L56 140L82 118L110 140L140 116L170 138L200 124V200H0Z' fill='%239db0ff'/%3E%3Cpath d='M0 160Q40 140 80 152T160 148T200 150V200H0Z' fill='%23eea9f3'/%3E%3Cpath d='M0 172Q50 160 100 170T200 166V200H0Z' fill='%23ffb2a2'/%3E%3Cpath d='M0 184Q60 176 120 184T200 182V200H0Z' fill='%23ffd96a'/%3E%3C/g%3E%3Ccircle cx='100' cy='100' r='88' fill='none' stroke='%23e6a925' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
    filter:drop-shadow(0 16px 26px rgba(230,169,37,.3));
  }
  #faq .wrap::after{
    inset-inline-end:40px; top:150px;
    width:94px; height:282px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 300'%3E%3Cpath d='M50 16V290' stroke='%23e6a925' stroke-width='1.6' stroke-dasharray='2 6' stroke-linecap='round'/%3E%3Cg%3E%3Ccircle cx='50' cy='270' r='22' fill='%23fff8d6'/%3E%3Crect x='38' y='258' width='24' height='24' fill='%23ffd84a' stroke='%23d9a400' stroke-width='1.5'/%3E%3Ccircle cx='50' cy='214' r='22' fill='%23fdeafd'/%3E%3Cpath d='M64 208A14 14 0 0 1 36 208Z' fill='%23f08af0'/%3E%3Ccircle cx='50' cy='158' r='22' fill='%23ffe9e6'/%3E%3Cpath d='M50 145L64.5 169H35.5Z' fill='%23ff8a80'/%3E%3Ccircle cx='50' cy='102' r='22' fill='%23e9edff'/%3E%3Ccircle cx='50' cy='102' r='12.5' fill='%237e97ff'/%3E%3Ccircle cx='50' cy='46' r='22' fill='%23f3f1ff'/%3E%3Cellipse cx='50' cy='46' rx='9' ry='13' fill='%23ffffff' stroke='%239c92e6' stroke-width='2'/%3E%3C/g%3E%3Ccircle cx='50' cy='8' r='3.5' fill='%23e6a925'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

/* the overlay stays dark, with light type */
.lb{
  --ink:   #f7f6ff;
  --muted: rgba(247,246,255,.78);
  --ghost: rgba(247,246,255,.58);
  --line:  rgba(247,246,255,.2);
}
.lb-back{ background:rgba(24,22,60,.95); }


/* a right-to-left page puts the dial on the left: the glow and the ranges
   turn round with it, so the sun still rises in their valley */
[dir=rtl] .hero{ --sun-x: 28%; }
[dir=rtl] .scene .range{ transform:scaleX(-1); }

/* in one column the words stand in the sky above the landscape and need no
   haze */
@media (max-width:980px){
  .hero, [dir=rtl] .hero{ --sun-x: 50%; }
  .hero-copy::before{ display:none; }
}
/* on a phone the hero is one tall column: the landscape rises behind the
   lower half of the dial, above the strip with the numbers */
@media (max-width:700px){
  .hero{ --range-h:560px; }
}

@media (prefers-reduced-motion:reduce){
  .ornament .arc, .ornament .mark{ animation:none; opacity:1; }
  .ornament .hand, .dawn-sun .rays, #how::before{ animation:none; }
}
@media (forced-colors:active){
  .hero h1 em{ -webkit-text-fill-color:currentColor; background:none; }
}
@media print{
  .hero h1 em{ -webkit-text-fill-color:currentColor; background:none; }
  #how::before, #faq .wrap::before, #faq .wrap::after{ display:none; }
}