/* ==========================================================================
   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; }
}


/* ==========================================================================
   AyuWatcher: the three clocks of an Ayurvedic day, in the light of the sun.

   The page opens on the landscape of the app's icon, a meadow under a blue
   sky, with the sun shining from behind the dial. The dial is the app's
   three clocks one inside the other, set like enamel in gold: the six
   seasons of the year, the doshas of the day and the cycle of the five
   tattvas, each with a light going round at its own pace, and a lotus at
   the heart. Below it the page has the warmth of an Ayurvedic kitchen:
   saffron and turmeric, marigold and lotus pink, leaf green and peacock blue
   on ivory, with marigold garlands between the bands, a lotus behind the
   doshas and a mandala behind the features.

   The colours are the app's own: the saffron of its theme, the three doshas
   (Dosha.colorArgb, and Dosha.lightInkArgb where they are text), the five
   tattvas as the app draws them on a dark surface (Tattva.darkSurfaceArgb),
   since on the dial they sit on dark enamel, and each season in the colour
   of the dosha it stirs, strong where the dosha overflows and soft where it
   builds up, as the app's year wheel paints them (SeasonWheel.kt).

   The drawings are plain SVG files in source/ayuwatcher/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.
   ========================================================================== */

:root{
  --bg:          #fffaf1;
  --bg-raise:    #ffffff;
  --ink:         #231c14;
  --muted:       rgba(35,28,20,.8);
  --faint:       rgba(35,28,20,.7);
  --ghost:       rgba(35,28,20,.66);
  --line:        rgba(35,28,20,.13);
  --line-soft:   rgba(35,28,20,.08);
  --panel:       rgba(255,255,255,.84);
  --tint-rgb:    122,74,18;
  --warn:        #b4471a;
  --option-bg:   #ffffff;
  --option-ink:  #231c14;

  --accent:      #f2a43a;     /* the app's saffron */
  --accent-rgb:  242,164,58;
  --on-accent:   #2b1a05;
  --accent-text: #a4520c;

  --marigold:  #ff8f1f;
  --turmeric:  #ffc93c;
  --lotus:     #e2457f;
  --lotus-rgb: 226,69,127;
  --leaf:      #2f8a45;
  --peacock:   #0c7f8c;
  --gold:      #d99a2b;
  --enamel:    30,52,138;

  --phone-drop:  0 34px 70px -26px rgba(90,60,20,.45);
  --phone-glow:  0 0 0 0 transparent;
  --shot-shadow: 0 22px 44px -20px rgba(110,70,20,.4);

  --display: "Avenir Next", Avenir, "Segoe UI Variable Display", "Segoe UI", "Nunito Sans", system-ui, sans-serif;
  --tight: -.02em;

  /* the doshas */
  --vata:  #8c7fd6;  --vata-ink:  #4e3fa6;  --vata-soft:  #cbc5ed;
  --pitta: #e8672f;  --pitta-ink: #a83a0e;
  --kapha: #3e9e76;  --kapha-ink: #1b6b4a;  --kapha-soft: #a8d3c1;
  /* early winter, when only Pitta settles, which the app leaves quiet */
  --quiet: #f1dfae;

  /* the tattvas on a dark surface */
  --akasha:  #ffffff;
  --vayu:    #7e97ff;
  --tejas:   #ff8a80;
  --apas:    #f08af0;
  --prithvi: #ffeb57;
}

.d-vata { --c: var(--vata);  --t: var(--vata);  --t-ink: var(--vata-ink); }
.d-pitta{ --c: var(--pitta); --t: var(--pitta); --t-ink: var(--pitta-ink); }
.d-kapha{ --c: var(--kapha); --t: var(--kapha); --t-ink: var(--kapha-ink); }

.s-shishira{ --c: var(--kapha-soft); }
.s-vasanta { --c: var(--kapha); }
.s-grishma { --c: var(--vata-soft); }
.s-varsha  { --c: var(--vata); }
.s-sharad  { --c: var(--pitta); }
.s-hemanta { --c: var(--quiet); }

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

h1, .band h2{ font-weight:700; }
.site-head{ background:color-mix(in srgb, #eef7fd 82%, transparent); }


/* ---------- the sky and the meadow ---------- */

.hero{
  --range-h: max(clamp(360px, 32vw, 500px), 31.25vw);
  background:
    radial-gradient(60% 50% at var(--light-x, 80%) 8%, rgba(255,250,225,.5), transparent 70%),
    linear-gradient(180deg, #2a8be0 0, #57abef 26%, #8fcbf6 52%, #c3e6fb 74%, #e5f5fd 100%);
}
.hero::before{ display:none; }
[dir=rtl] .hero{ --light-x: 20%; }
[dir=rtl] .scene .clouds{ transform:scaleX(-1); }

.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;
}
.scene .clouds{
  position:absolute; left:0; right:0; top:40px;
  width:100%; height:clamp(220px, 24vw, 340px);
  display:block;
}
.cloud{ animation:breeze 50s ease-in-out infinite alternate; }
.cloud.c2{ animation-duration:38s; animation-delay:-12s; }
.cloud.c3{ animation-duration:64s; animation-delay:-30s; }
.cloud.c4{ animation-duration:44s; animation-delay:-8s; }
.cloud.c5{ animation-duration:56s; animation-delay:-20s; }
@keyframes breeze{ from{ transform:translateX(-36px); } to{ transform:translateX(36px); } }

/* a haze of light round the words, so the sky and the hills soften where
   the text stands and the coloured words keep their contrast */
.hero-copy{ position:relative; }
.hero-copy::before{
  content:"";
  position:absolute;
  inset-block:-24% -18%;
  inset-inline:-30% -24%;
  z-index:-1;
  background:radial-gradient(closest-side at 46% 47%, rgba(242,249,254,.92), rgba(242,249,254,.74) 50%, rgba(242,249,254,.36) 78%, rgba(242,249,254,0));
  pointer-events:none;
}

.hero h1 em{
  background:linear-gradient(100deg, #b84f09 0%, #c93a1c 48%, #ad1d5c 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 0 22px rgba(255,200,100,.6));
}
.eyebrow{ background:rgba(255,255,255,.9); border-color:rgba(var(--accent-rgb),.55); }
.eyebrow .ico{ color:var(--leaf); }
.hero-note{ color:var(--muted); }
.lang-chip{ background:linear-gradient(90deg, rgba(255,255,255,.88), rgba(255,255,255,.66)); }


/* ---------- the sun behind the clocks ----------
   The light spreads from the middle of the dial over the sky, and its rays
   turn as slowly as the day goes by. It stands behind the hills; a softer
   disc of light in front of them lets the rings read over the meadow. */

.sky-sun{
  position:absolute;
  z-index:-2;
  left:50%; top:50%;
  width:calc(var(--dial) * 1.9);
  aspect-ratio:1;
  translate:-50% -50%;
  border-radius:50%;
  background:radial-gradient(circle closest-side,
    #fffffa 0, rgba(255,247,212,.96) 20%, rgba(255,226,150,.66) 34%,
    rgba(255,196,100,.32) 50%, rgba(255,176,96,.13) 66%, rgba(255,176,96,0) 82%);
  pointer-events:none;
}
.sky-sun .rays{
  position:absolute; inset:0;
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(255,241,196,.55) 0 2.4deg, transparent 2.4deg 10deg);
  -webkit-mask-image:radial-gradient(circle closest-side, transparent 30%, #000 36%, rgba(0,0,0,.45) 56%, transparent 80%);
          mask-image:radial-gradient(circle closest-side, transparent 30%, #000 36%, rgba(0,0,0,.45) 56%, transparent 80%);
  animation:turn 240s linear infinite;
}
@keyframes turn{ to{ transform:rotate(360deg); } }

.hero-visual::before{
  content:"";
  position:absolute;
  width:calc(var(--dial) * 1.04);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle closest-side,
    rgba(255,253,240,.7) 0, rgba(255,249,228,.42) 55%, rgba(255,244,214,.3) 85%, rgba(255,244,214,0) 100%);
  pointer-events:none;
}
.hero-visual .phone{
  width:calc(var(--dial) * .27);
  --phone-glow: 0 0 70px -8px rgba(255,206,110,.85);
}


/* ---------- the three clocks ----------
   One inside the other, as the app keeps them on three tabs. Outermost, the
   year: the six seasons, Grishma at the top, where the sun is highest. Then
   the day, as the app's dosha dial draws it: noon at the top, sunrise on the
   left, the horizon across the middle. Innermost, the tattvas: one cycle of
   two hours, Akasha first, in the app's order. A light goes round each ring
   and lights up what it passes, the year in three minutes, the day in 72
   seconds, three for each hour, and the tattvas in 30. */

.ornament .track{ fill:none; stroke:rgba(var(--enamel),.74); }
.ornament .year .track { stroke-width:28; }
.ornament .day .track  { stroke-width:26; }
.ornament .cycle .track{ stroke-width:18; }
.ornament .rim{ fill:none; stroke:rgba(217,154,43,.8); stroke-width:1.4; }
.ornament .hours{
  fill:none;
  stroke:rgba(35,28,20,.42);
  stroke-width:7;
  stroke-dasharray:1.6 71.44;   /* 24 ticks, one an hour */
  transform:rotate(-90deg);
  transform-origin:320px 320px;
}
.ornament .horizon{ stroke:rgba(35,28,20,.3); stroke-width:1.4; stroke-dasharray:4 6; }

.ornament .arc{
  fill:none;
  stroke:var(--c);
  opacity:.84;
  animation:lit 72s linear infinite;
}
.ornament .year .arc { stroke-width:20; animation-duration:180s; }
.ornament .day .arc  { stroke-width:18; stroke-linecap:round; }
.ornament .cycle .arc{ stroke-width:11; stroke-linecap:round; animation-name:lit5; animation-duration:30s; }
@keyframes lit{
  0%, 16.6%{ opacity:1; filter:drop-shadow(0 0 5px var(--c)) drop-shadow(0 0 12px color-mix(in srgb, var(--c) 70%, transparent)); }
  16.7%, 100%{ opacity:.84; filter:none; }
}
@keyframes lit5{
  0%, 19.9%{ opacity:1; filter:drop-shadow(0 0 5px var(--c)) drop-shadow(0 0 12px color-mix(in srgb, var(--c) 70%, transparent)); }
  20%, 100%{ opacity:.84; filter:none; }
}

/* the signs of the seasons, light on the strong colours and dark on the soft */
.ornament .sign{
  fill:#ffffff; stroke:#ffffff;
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
}
.ornament .sign.s-shishira,
.ornament .sign.s-grishma,
.ornament .sign.s-hemanta{ fill:#3a2e22; stroke:#3a2e22; }
.ornament .heart{ fill:#ffd84a; stroke:none; }

/* the tattvas' own symbols, on discs of enamel */
.ornament .mark .disc{ fill:#1c3156; stroke:var(--c); stroke-width:1.6; }
.ornament .mark .glyph{ fill:var(--c); }
.ornament .mark{ animation:lit-mark 30s linear infinite; }
@keyframes lit-mark{
  0%, 19.9%{ filter:drop-shadow(0 0 6px var(--c)); }
  20%, 100%{ filter:none; }
}

/* the lights that go round */
.ornament .hand{
  transform-origin:320px 320px;
  animation:sweep 72s linear infinite;
}
.ornament .year .hand { animation-duration:180s; }
.ornament .cycle .hand{ animation-duration:30s; }
.ornament .bead{
  fill:#fffdf2; stroke:var(--accent); stroke-width:2.4;
  filter:drop-shadow(0 0 6px rgba(255,214,120,.95));
}
.ornament .spark{
  fill:#ffffff;
  filter:drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 9px rgba(255,236,160,.95));
}
.ornament .sun circle{ fill:#ffc23d; }
.ornament .sun path{ stroke:#f0a020; stroke-width:2.6; stroke-linecap:round; }
.ornament .sun{
  filter:drop-shadow(0 0 8px rgba(255,190,60,.9));
  animation:daylight 72s linear infinite;
}
@keyframes sweep{ to{ transform:rotate(360deg); } }
/* the sun dims while it is below the horizon, from six in the evening to six
   in the morning */
@keyframes daylight{
  0%, 23%{ opacity:1; }
  27%, 73%{ opacity:.4; }
  77%, 100%{ opacity:1; }
}

/* the lotus at the heart, turning the other way, very slowly */
.ornament .lotus{
  transform-origin:320px 320px;
  animation:sweep 300s linear infinite reverse;
}
.ornament .petals{ fill:rgba(255,150,190,.26); stroke:rgba(214,120,60,.8); stroke-width:1.3; }
.ornament .petals-back{ fill:rgba(255,200,90,.3); stroke:rgba(214,146,40,.55); stroke-width:1; }
.ornament .lotus .rim{ fill:none; stroke:rgba(214,146,40,.7); stroke-width:1.2; }


/* ---------- the numbers, each with the colours of its ring ---------- */

.stats{
  border:1px solid rgba(255,255,255,.9);
  border-radius:22px;
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(5px);
          backdrop-filter:blur(5px);
  box-shadow:0 22px 44px -30px rgba(110,70,20,.5), 0 0 0 1px rgba(var(--accent-rgb),.14);
}
.stats li{ border-inline-end-color:var(--line); }
.stats b{ color:var(--accent-text); }
.stats li:nth-child(-n+3) b::after{
  content:"";
  display:block;
  width:var(--n);
  height:8px;
  margin:10px auto 2px;
  border:2px solid #23395f;
  border-radius:6px;
  background:var(--legend) padding-box, #23395f border-box;
}
.stats li:nth-child(1){
  --n:60px;
  --legend:linear-gradient(90deg, var(--vata) 0 32%, transparent 32% 34%, var(--pitta) 34% 66%, transparent 66% 68%, var(--kapha) 68%);
}
.stats li:nth-child(2){
  --n:84px;
  --legend:linear-gradient(90deg, var(--kapha-soft) 0 15.5%, transparent 15.5% 17%, var(--kapha) 17% 32.5%, transparent 32.5% 34%,
    var(--vata-soft) 34% 49.5%, transparent 49.5% 51%, var(--vata) 51% 66%, transparent 66% 67.5%,
    var(--pitta) 67.5% 83%, transparent 83% 84.5%, var(--quiet) 84.5%);
}
.stats li:nth-child(3){
  --n:72px;
  --legend: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%);
}


/* ---------- below the hero: ivory, saffron and leaves ---------- */

.band-alt{
  background:
    radial-gradient(48% 60% at 0 18%, rgba(var(--accent-rgb),.16), transparent 70%),
    radial-gradient(42% 50% at 100% 40%, rgba(var(--lotus-rgb),.09), transparent 70%),
    linear-gradient(180deg, var(--bg), #fff2dc 140px, #fffaf1 75%);
}
.step, .card, .tier, .adv, .note, .terms, .spot, .get, .ritus li{
  background:#ffffff;
  box-shadow:0 18px 40px -30px rgba(140,80,20,.5);
}
.card, .tier, .adv, .spot, .get, .step{ border-radius:22px; }
.card:hover{ background:#fffdf8; border-color:rgba(var(--accent-rgb),.5); box-shadow:0 26px 50px -30px rgba(var(--accent-rgb),.75); }
.card-accent{ background:linear-gradient(160deg, rgba(var(--accent-rgb),.16), #ffffff 62%); }
.qr-code{ box-shadow:0 0 0 1px var(--line); }
.callout{
  border-color:rgba(var(--accent-rgb),.42);
  background:linear-gradient(100deg, rgba(var(--accent-rgb),.18), rgba(255,201,60,.1) 50%, rgba(var(--lotus-rgb),.06));
}
.points .ico{ color:var(--leaf); }
.adv .ico-md{
  box-sizing:content-box;
  padding:9px;
  border-radius:50%;
  color:var(--ic);
  background:radial-gradient(circle at 32% 28%, #ffffff, var(--ic-bg) 75%);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ic) 22%, transparent), 0 8px 20px -10px color-mix(in srgb, var(--ic) 60%, transparent);
}
.grid-adv .adv:nth-child(5n+1){ --ic:#1b6b4a; --ic-bg:#d3f0de; }
.grid-adv .adv:nth-child(5n+2){ --ic:#4e3fa6; --ic-bg:#e2ddfb; }
.grid-adv .adv:nth-child(5n+3){ --ic:#b3245f; --ic-bg:#ffd9e6; }
.grid-adv .adv:nth-child(5n+4){ --ic:#0b6b76; --ic-bg:#cdeff0; }
.grid-adv .adv:nth-child(5n+5){ --ic:#a4520c; --ic-bg:#ffe1b0; }
.note{
  border-color:rgba(var(--accent-rgb),.4);
  background:linear-gradient(100deg, #fff4dc, #ffffff 60%);
}
/* the day: the phones stand in the light of the sun, its rays turning */
.split-shots::before{ background:radial-gradient(circle at 50% 45%, rgba(255,190,90,.42), rgba(var(--lotus-rgb),.12) 45%, transparent 68%); }
#day .split-shots::before{
  inset:-6% -10%;
  background:radial-gradient(circle closest-side, rgba(255,236,170,.95), rgba(255,200,100,.5) 38%, rgba(255,170,90,.16) 66%, transparent 100%);
  filter:blur(6px);
}
#day .split-shots::after{
  content:"";
  position:absolute; inset:-14% -18%;
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(255,190,80,.42) 0 2.6deg, transparent 2.6deg 11deg);
  -webkit-mask-image:radial-gradient(circle closest-side, transparent 24%, #000 32%, rgba(0,0,0,.4) 60%, transparent 92%);
          mask-image:radial-gradient(circle closest-side, transparent 24%, #000 32%, rgba(0,0,0,.4) 60%, transparent 92%);
  animation:turn 240s linear infinite;
  z-index:-1;
  pointer-events:none;
}
#day .split-shots{ isolation:isolate; }
/* the light reaches past the phones, but never past the edge of the page */
#day, #seasons{ overflow:hidden; }
/* the seasons: a halo in the colours of the year ring, in its order, with
   Grishma at the top */
#seasons .split-shots::before{
  inset:-9% -12%;
  border-radius:50%;
  background:conic-gradient(from -30deg, var(--vata-soft), var(--vata) 25%, var(--pitta) 42%, var(--quiet) 58%, var(--kapha-soft) 75%, var(--kapha) 88%, var(--vata-soft));
  -webkit-mask-image:radial-gradient(circle closest-side, transparent 46%, #000 70%, transparent 98%);
          mask-image:radial-gradient(circle closest-side, transparent 46%, #000 70%, transparent 98%);
  filter:blur(18px);
  opacity:.75;
}
/* the screens on a stage of warm light */
#screens{
  background:
    radial-gradient(70% 46% at 50% 64%, rgba(255,201,60,.2), transparent 70%),
    radial-gradient(40% 40% at 18% 70%, rgba(var(--lotus-rgb),.08), transparent 70%),
    radial-gradient(40% 40% at 84% 60%, rgba(140,127,214,.1), transparent 70%);
}

/* the kickers start with a small lotus */
.kicker::before{
  content:"";
  display:inline-block;
  width:1.55em; height:1.2em;
  margin-inline-end:.6em;
  vertical-align:-.28em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Cdefs%3E%3ClinearGradient id='k' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff6f9f'/%3E%3Cstop offset='1' stop-color='%23f2a43a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23k)'%3E%3Cpath d='M12 17C7.4 17.4 2.8 15.4 .6 11.6C4.8 11 9.4 13 12 17Z' fill-opacity='.72'/%3E%3Cpath d='M14 17C18.6 17.4 23.2 15.4 25.4 11.6C21.2 11 16.6 13 14 17Z' fill-opacity='.72'/%3E%3Cpath d='M12.4 16.4C8 15.6 4.6 11.4 4.4 6.2C8.6 7.6 11.6 11.2 12.4 16.4Z' fill-opacity='.88'/%3E%3Cpath d='M13.6 16.4C18 15.6 21.4 11.4 21.6 6.2C17.4 7.6 14.4 11.2 13.6 16.4Z' fill-opacity='.88'/%3E%3Cpath d='M13 16C9.6 13 9.4 6.6 13 1.6C16.6 6.6 16.4 13 13 16Z'/%3E%3C/g%3E%3Cpath d='M5 18.7C10 19.6 16 19.6 21 18.7' fill='none' stroke='%23d99a2b' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* the feature icons, each in a glowing bead of its own colour */
.card .ico-lg{
  box-sizing:content-box;
  padding:11px;
  border-radius:50%;
  font-size:1.55rem;
  color:var(--ic);
  background:radial-gradient(circle at 32% 28%, #ffffff, var(--ic-bg) 75%);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ic) 22%, transparent), 0 10px 24px -10px color-mix(in srgb, var(--ic) 60%, transparent);
}
.grid-cards .card:nth-child(6n+1){ --ic:#a4520c; --ic-bg:#ffe1b0; }
.grid-cards .card:nth-child(6n+2){ --ic:#4e3fa6; --ic-bg:#e2ddfb; }
.grid-cards .card:nth-child(6n+3){ --ic:#b3245f; --ic-bg:#ffd9e6; }
.grid-cards .card:nth-child(6n+4){ --ic:#0b6b76; --ic-bg:#cdeff0; }
.grid-cards .card:nth-child(6n+5){ --ic:#1b6b4a; --ic-bg:#d3f0de; }
.grid-cards .card:nth-child(6n+6){ --ic:#a83a0e; --ic-bg:#ffdcca; }

/* the subscription glows, framed in saffron, marigold and lotus */
.tier-sub{
  border:1.5px solid transparent;
  background:
    radial-gradient(120% 90% at 50% 0, rgba(var(--accent-rgb),.16), transparent 62%) padding-box,
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--turmeric), var(--marigold) 35%, var(--lotus) 70%, var(--vata)) border-box;
  box-shadow:0 28px 60px -36px rgba(var(--lotus-rgb),.6), 0 0 50px -24px rgba(var(--accent-rgb),.8);
}
.get{
  background:
    radial-gradient(100% 140% at 0 50%, rgba(var(--accent-rgb),.2), transparent 60%),
    radial-gradient(80% 140% at 100% 50%, rgba(var(--lotus-rgb),.1), transparent 60%),
    #ffffff;
}
.lang-band::before{ background:radial-gradient(50% 60% at 50% 100%, rgba(var(--accent-rgb),.2), transparent 70%); }

/* a garland of marigolds in place of the wave; on a narrow screen it runs
   on past the edges rather than shrink */
.wave-rule{
  top:-4px;
  height:76px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -2 1132 80' preserveAspectRatio='xMidYMin meet'%3E%3Cdefs%3E%3CradialGradient id='go' cx='.4' cy='.36' r='.72'%3E%3Cstop offset='0' stop-color='%23ffbe5c'/%3E%3Cstop offset='.55' stop-color='%23ff8f1f'/%3E%3Cstop offset='1' stop-color='%23ea6409'/%3E%3C/radialGradient%3E%3CradialGradient id='gy' cx='.4' cy='.36' r='.72'%3E%3Cstop offset='0' stop-color='%23ffeaa3'/%3E%3Cstop offset='.55' stop-color='%23ffc93c'/%3E%3Cstop offset='1' stop-color='%23f2a20f'/%3E%3C/radialGradient%3E%3CradialGradient id='gr' cx='.4' cy='.36' r='.72'%3E%3Cstop offset='0' stop-color='%23ff8fb3'/%3E%3Cstop offset='.6' stop-color='%23e2457f'/%3E%3Cstop offset='1' stop-color='%23b8285f'/%3E%3C/radialGradient%3E%3Cg id='o'%3E%3Ccircle r='9' fill='url(%23go)'/%3E%3Ccircle r='6.5' fill='none' stroke='%23de5f08' stroke-width='1.3' stroke-dasharray='1.6 1.9' stroke-opacity='.8'/%3E%3Ccircle r='3.6' fill='none' stroke='%23de5f08' stroke-width='1.1' stroke-dasharray='1.2 1.5' stroke-opacity='.7'/%3E%3Ccircle r='1.5' fill='%23b9480a'/%3E%3C/g%3E%3Cg id='y'%3E%3Ccircle r='9' fill='url(%23gy)'/%3E%3Ccircle r='6.5' fill='none' stroke='%23e39a06' stroke-width='1.3' stroke-dasharray='1.6 1.9' stroke-opacity='.8'/%3E%3Ccircle r='3.6' fill='none' stroke='%23e39a06' stroke-width='1.1' stroke-dasharray='1.2 1.5' stroke-opacity='.7'/%3E%3Ccircle r='1.5' fill='%23c98204'/%3E%3C/g%3E%3C/defs%3E%3Cg%3E%3Cpath fill='%232f8a45' transform='translate(0 10) rotate(62)' d='M0 0C9.5 -7.6 26.6 -6.1 38 0C26.6 6.1 9.5 7.6 0 0Z'/%3E%3Cpath fill='%233f9a4a' transform='translate(0 10) rotate(118)' d='M0 0C8.5 -6.8 23.8 -5.4 34 0C23.8 5.4 8.5 6.8 0 0Z'/%3E%3Cpath fill='%2347a653' transform='translate(0 10) rotate(90)' d='M0 0C11.5 -9.2 32.2 -7.4 46 0C32.2 7.4 11.5 9.2 0 0Z'/%3E%3Cpath fill='%232f8a45' transform='translate(366.7 10) rotate(62)' d='M0 0C9.5 -7.6 26.6 -6.1 38 0C26.6 6.1 9.5 7.6 0 0Z'/%3E%3Cpath fill='%233f9a4a' transform='translate(366.7 10) rotate(118)' d='M0 0C8.5 -6.8 23.8 -5.4 34 0C23.8 5.4 8.5 6.8 0 0Z'/%3E%3Cpath fill='%2347a653' transform='translate(366.7 10) rotate(90)' d='M0 0C11.5 -9.2 32.2 -7.4 46 0C32.2 7.4 11.5 9.2 0 0Z'/%3E%3Cpath fill='%232f8a45' transform='translate(733.3 10) rotate(62)' d='M0 0C9.5 -7.6 26.6 -6.1 38 0C26.6 6.1 9.5 7.6 0 0Z'/%3E%3Cpath fill='%233f9a4a' transform='translate(733.3 10) rotate(118)' d='M0 0C8.5 -6.8 23.8 -5.4 34 0C23.8 5.4 8.5 6.8 0 0Z'/%3E%3Cpath fill='%2347a653' transform='translate(733.3 10) rotate(90)' d='M0 0C11.5 -9.2 32.2 -7.4 46 0C32.2 7.4 11.5 9.2 0 0Z'/%3E%3Cpath fill='%232f8a45' transform='translate(1100 10) rotate(62)' d='M0 0C9.5 -7.6 26.6 -6.1 38 0C26.6 6.1 9.5 7.6 0 0Z'/%3E%3Cpath fill='%233f9a4a' transform='translate(1100 10) rotate(118)' d='M0 0C8.5 -6.8 23.8 -5.4 34 0C23.8 5.4 8.5 6.8 0 0Z'/%3E%3Cpath fill='%2347a653' transform='translate(1100 10) rotate(90)' d='M0 0C11.5 -9.2 32.2 -7.4 46 0C32.2 7.4 11.5 9.2 0 0Z'/%3E%3C/g%3E%3Cg%3E%3Cuse href='%23o' transform='translate(15.3 14.8) rotate(219) scale(1.01)'/%3E%3Cuse href='%23o' transform='translate(30.6 19.7) rotate(194) scale(1.03)'/%3E%3Cuse href='%23o' transform='translate(45.8 23.2) rotate(219) scale(0.95)'/%3E%3Cuse href='%23o' transform='translate(61.1 26.6) rotate(304) scale(1.00)'/%3E%3Cuse href='%23y' transform='translate(76.4 30.1) rotate(245) scale(1.00)'/%3E%3Cuse href='%23y' transform='translate(91.7 32) rotate(99) scale(0.96)'/%3E%3Cuse href='%23o' transform='translate(106.9 34.6) rotate(210) scale(0.99)'/%3E%3Cuse href='%23o' transform='translate(122.2 36.8) rotate(208) scale(0.95)'/%3E%3Cuse href='%23o' transform='translate(137.5 38.7) rotate(290) scale(1.00)'/%3E%3Cuse href='%23o' transform='translate(152.8 38.9) rotate(224) scale(1.05)'/%3E%3Cuse href='%23y' transform='translate(168.1 39.1) rotate(267) scale(0.97)'/%3E%3Cuse href='%23y' transform='translate(183.3 39.7) rotate(53) scale(1.09)'/%3E%3Cuse href='%23o' transform='translate(198.6 39.5) rotate(199) scale(1.05)'/%3E%3Cuse href='%23o' transform='translate(213.9 39.7) rotate(52) scale(1.02)'/%3E%3Cuse href='%23o' transform='translate(229.2 38.6) rotate(138) scale(1.07)'/%3E%3Cuse href='%23o' transform='translate(244.4 36) rotate(303) scale(0.94)'/%3E%3Cuse href='%23y' transform='translate(259.7 34.8) rotate(97) scale(1.01)'/%3E%3Cuse href='%23y' transform='translate(275 32.9) rotate(32) scale(1.01)'/%3E%3Cuse href='%23o' transform='translate(290.3 29.1) rotate(160) scale(1.03)'/%3E%3Cuse href='%23o' transform='translate(305.6 27.4) rotate(154) scale(1.03)'/%3E%3Cuse href='%23o' transform='translate(320.8 22.9) rotate(17) scale(1.01)'/%3E%3Cuse href='%23o' transform='translate(336.1 19) rotate(273) scale(1.05)'/%3E%3Cuse href='%23y' transform='translate(351.4 14.9) rotate(125) scale(0.98)'/%3E%3Cuse href='%23o' transform='translate(381.9 14.2) rotate(43) scale(1.06)'/%3E%3Cuse href='%23o' transform='translate(397.2 19.4) rotate(45) scale(1.03)'/%3E%3Cuse href='%23o' transform='translate(412.5 22.9) rotate(337) scale(0.99)'/%3E%3Cuse href='%23o' transform='translate(427.8 26.9) rotate(148) scale(1.07)'/%3E%3Cuse href='%23y' transform='translate(443.1 29.9) rotate(157) scale(1.08)'/%3E%3Cuse href='%23y' transform='translate(458.3 32.5) rotate(3) scale(0.98)'/%3E%3Cuse href='%23o' transform='translate(473.6 34.5) rotate(147) scale(1.07)'/%3E%3Cuse href='%23o' transform='translate(488.9 36) rotate(268) scale(0.95)'/%3E%3Cuse href='%23o' transform='translate(504.2 38.1) rotate(37) scale(1.02)'/%3E%3Cuse href='%23o' transform='translate(519.4 39.4) rotate(318) scale(1.02)'/%3E%3Cuse href='%23y' transform='translate(534.7 39.9) rotate(217) scale(1.08)'/%3E%3Cuse href='%23y' transform='translate(550 40) rotate(34) scale(1.02)'/%3E%3Cuse href='%23o' transform='translate(565.3 40) rotate(358) scale(1.03)'/%3E%3Cuse href='%23o' transform='translate(580.6 38.6) rotate(50) scale(1.04)'/%3E%3Cuse href='%23o' transform='translate(595.8 38.9) rotate(124) scale(1.03)'/%3E%3Cuse href='%23o' transform='translate(611.1 36.5) rotate(274) scale(1.08)'/%3E%3Cuse href='%23y' transform='translate(626.4 34.1) rotate(103) scale(1.04)'/%3E%3Cuse href='%23y' transform='translate(641.7 32.5) rotate(226) scale(1.04)'/%3E%3Cuse href='%23o' transform='translate(656.9 30.1) rotate(113) scale(0.97)'/%3E%3Cuse href='%23o' transform='translate(672.2 26.8) rotate(137) scale(0.95)'/%3E%3Cuse href='%23o' transform='translate(687.5 23.6) rotate(337) scale(0.96)'/%3E%3Cuse href='%23o' transform='translate(702.8 18.4) rotate(156) scale(1.05)'/%3E%3Cuse href='%23y' transform='translate(718.1 14.9) rotate(252) scale(1.07)'/%3E%3Cuse href='%23o' transform='translate(748.6 14) rotate(179) scale(1.03)'/%3E%3Cuse href='%23o' transform='translate(763.9 18.6) rotate(291) scale(1.01)'/%3E%3Cuse href='%23o' transform='translate(779.2 22.5) rotate(359) scale(0.94)'/%3E%3Cuse href='%23o' transform='translate(794.4 27) rotate(301) scale(1.03)'/%3E%3Cuse href='%23y' transform='translate(809.7 30.6) rotate(18) scale(1.08)'/%3E%3Cuse href='%23y' transform='translate(825 32.7) rotate(142) scale(0.96)'/%3E%3Cuse href='%23o' transform='translate(840.3 34.8) rotate(18) scale(1.00)'/%3E%3Cuse href='%23o' transform='translate(855.6 36.6) rotate(97) scale(0.94)'/%3E%3Cuse href='%23o' transform='translate(870.8 38.5) rotate(149) scale(1.00)'/%3E%3Cuse href='%23o' transform='translate(886.1 39.3) rotate(134) scale(0.99)'/%3E%3Cuse href='%23y' transform='translate(901.4 39.5) rotate(160) scale(1.09)'/%3E%3Cuse href='%23y' transform='translate(916.7 40.3) rotate(114) scale(0.97)'/%3E%3Cuse href='%23o' transform='translate(931.9 40) rotate(1) scale(1.02)'/%3E%3Cuse href='%23o' transform='translate(947.2 38.6) rotate(296) scale(0.95)'/%3E%3Cuse href='%23o' transform='translate(962.5 38.6) rotate(70) scale(0.95)'/%3E%3Cuse href='%23o' transform='translate(977.8 37.2) rotate(266) scale(1.03)'/%3E%3Cuse href='%23y' transform='translate(993.1 34.2) rotate(32) scale(1.06)'/%3E%3Cuse href='%23y' transform='translate(1008.3 32) rotate(41) scale(1.05)'/%3E%3Cuse href='%23o' transform='translate(1023.6 29.1) rotate(318) scale(0.99)'/%3E%3Cuse href='%23o' transform='translate(1038.9 27) rotate(208) scale(1.03)'/%3E%3Cuse href='%23o' transform='translate(1054.2 23.5) rotate(138) scale(1.05)'/%3E%3Cuse href='%23o' transform='translate(1069.4 18.7) rotate(74) scale(1.05)'/%3E%3Cuse href='%23y' transform='translate(1084.7 15) rotate(3) scale(0.95)'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='0' cy='10' r='9.5' fill='url(%23gr)'/%3E%3Cpath d='M-4.5 9C-2 5 2 5 4.5 9M-3.4 13C-1 16 1 16 3.4 13' fill='none' stroke='%239e1f52' stroke-width='1.2' stroke-linecap='round' stroke-opacity='.7'/%3E%3Ccircle cx='366.7' cy='10' r='9.5' fill='url(%23gr)'/%3E%3Cpath d='M362.2 9C364.7 5 368.7 5 371.2 9M363.3 13C365.7 16 367.7 16 370.1 13' fill='none' stroke='%239e1f52' stroke-width='1.2' stroke-linecap='round' stroke-opacity='.7'/%3E%3Ccircle cx='733.3' cy='10' r='9.5' fill='url(%23gr)'/%3E%3Cpath d='M728.8 9C731.3 5 735.3 5 737.8 9M729.9 13C732.3 16 734.3 16 736.7 13' fill='none' stroke='%239e1f52' stroke-width='1.2' stroke-linecap='round' stroke-opacity='.7'/%3E%3Ccircle cx='1100' cy='10' r='9.5' fill='url(%23gr)'/%3E%3Cpath d='M1095.5 9C1098 5 1102 5 1104.5 9M1096.6 13C1099 16 1101 16 1103.4 13' fill='none' stroke='%239e1f52' stroke-width='1.2' stroke-linecap='round' stroke-opacity='.7'/%3E%3C/g%3E%3C/svg%3E") center top / auto 100% no-repeat;
  -webkit-mask-image:none; mask-image:none;
}
.wave-rule svg{ display:none; }

/* the footer stands in the meadow again */
.site-foot{
  border-top:0;
  margin-top:40px;
  background:linear-gradient(180deg, #e6f3d6, #f5f9ec 220px, var(--bg) 420px);
}
.site-foot .wave-rule{
  top:-70px; height:72px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 80' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 80L0 36.2L10 35.4L20 34.7L30 34.1L40 33.7L50 33.5L60 33.5L70 33.7L80 34.1L90 34.7L100 35.5L110 36.5L120 37.5L130 38.6L140 39.6L150 40.7L160 41.6L170 42.4L180 43.1L190 43.5L200 43.8L210 43.9L220 43.7L230 43.4L240 43.0L250 42.4L260 41.8L270 41.1L280 40.5L290 39.9L300 39.4L310 39.0L320 38.7L330 38.6L340 38.6L350 38.8L360 39.1L370 39.4L380 39.8L390 40.3L400 40.7L410 41.0L420 41.3L430 41.4L440 41.4L450 41.2L460 40.9L470 40.4L480 39.8L490 39.1L500 38.4L510 37.6L520 36.9L530 36.2L540 35.6L550 35.2L560 35.0L570 35.0L580 35.2L590 35.7L600 36.4L610 37.3L620 38.4L630 39.6L640 41.0L650 42.4L660 43.8L670 45.2L680 46.5L690 47.7L700 48.8L710 49.7L720 50.4L730 51.0L740 51.4L750 51.6L760 51.8L770 51.9L780 51.9L790 52.0L800 52.1L810 52.2L820 52.4L830 52.8L840 53.3L850 53.9L860 54.6L870 55.4L880 56.2L890 57.1L900 58.0L910 58.8L920 59.5L930 60.1L940 60.5L950 60.7L960 60.7L970 60.4L980 60.0L990 59.3L1000 58.5L1010 57.5L1020 56.3L1030 55.2L1040 54.0L1050 52.8L1060 51.7L1070 50.8L1080 49.9L1090 49.3L1100 48.8L1110 48.6L1120 48.5L1130 48.6L1140 48.9L1150 49.3L1160 49.7L1170 50.2L1180 50.7L1190 51.1L1200 51.4L1210 51.7L1220 51.8L1230 51.8L1240 51.6L1250 51.3L1260 50.9L1270 50.4L1280 49.9L1290 49.4L1300 48.8L1310 48.4L1320 48.0L1330 47.8L1340 47.7L1350 47.8L1360 48.0L1370 48.4L1380 49.0L1390 49.6L1400 50.4L1410 51.1L1420 51.9L1430 52.6L1440 53.2L1450 53.7L1460 54.0L1470 54.0L1480 53.9L1490 53.5L1500 52.9L1510 52.1L1520 51.1L1530 49.9L1540 48.7L1550 47.3L1560 46.0L1570 44.7L1580 43.4L1590 42.2L1600 41.2L1600 80Z' fill='%23e6f3d6'/%3E%3Cpath d='M6 36.7q1.2 -6.0 2.4 -12.1M20 35.7q-0.3 -3.2 -0.6 -6.4M30 35.1q1.5 -3.3 3.0 -6.7M44 34.6q-0.6 -6.0 -1.3 -12.0M58 34.4q-0.3 -5.6 -0.5 -11.2M71 34.7q0.7 -3.2 1.5 -6.4M85 35.4q-0.8 -6.8 -1.5 -13.6M100 36.5q1.0 -6.7 1.9 -13.5M114 37.9q0.5 -7.3 1.1 -14.6M127 39.2q-1.1 -3.2 -2.3 -6.3M136 40.2q-0.8 -6.2 -1.5 -12.3M145 41.2q0.5 -6.0 1.0 -12.1M161 42.7q1.2 -6.7 2.3 -13.4M176 43.8q-0.4 -4.5 -0.8 -9.0M186 44.4q1.2 -3.3 2.3 -6.6M193 44.6q-1.6 -4.8 -3.2 -9.7M204 44.8q1.7 -7.0 3.3 -14.0M217 44.8q0.1 -6.7 0.3 -13.4M228 44.5q1.6 -3.7 3.2 -7.3M241 43.9q1.1 -7.3 2.2 -14.7M251 43.4q-0.3 -6.6 -0.6 -13.2M265 42.4q1.5 -6.6 2.9 -13.2M277 41.7q1.3 -4.7 2.6 -9.3M286 41.1q-0.4 -6.5 -0.8 -13.0M300 40.4q1.5 -3.5 3.0 -7.0M308 40.0q0.1 -6.8 0.2 -13.6M324 39.7q-0.1 -5.2 -0.2 -10.3M335 39.6q-1.3 -4.5 -2.7 -9.0M348 39.7q0.1 -5.1 0.1 -10.2M359 40.0q-1.1 -5.5 -2.2 -11.1M371 40.5q-0.1 -6.9 -0.2 -13.9M382 40.9q0.3 -6.6 0.6 -13.2M390 41.3q-1.1 -4.5 -2.2 -8.9M405 41.9q-1.6 -4.6 -3.3 -9.3M415 42.2q-0.2 -5.7 -0.5 -11.5M426 42.4q-1.5 -3.5 -3.0 -7.0M439 42.4q0.2 -5.2 0.5 -10.4M450 42.2q1.5 -4.8 3.1 -9.5M463 41.8q-0.5 -5.1 -1.1 -10.2M478 40.9q-1.7 -6.1 -3.5 -12.2M491 40.0q1.2 -3.9 2.4 -7.9M503 39.2q-0.3 -6.2 -0.7 -12.4M512 38.4q0.3 -3.8 0.6 -7.7M520 37.9q0.6 -3.1 1.2 -6.2M532 37.1q1.3 -4.0 2.7 -8.0M546 36.4q-1.7 -5.1 -3.4 -10.2M553 36.1q-0.9 -4.1 -1.7 -8.3M566 36.0q1.4 -3.9 2.8 -7.8M582 36.3q-0.5 -4.9 -1.1 -9.7M593 36.9q-1.2 -7.4 -2.4 -14.8M605 37.8q0.4 -4.7 0.7 -9.5M619 39.3q-0.7 -6.4 -1.3 -12.7M626 40.2q-1.3 -5.3 -2.5 -10.5M638 41.7q0.5 -6.7 1.1 -13.4M654 43.9q0.8 -3.5 1.6 -6.9M663 45.3q-1.6 -3.5 -3.2 -6.9M672 46.5q-1.2 -6.6 -2.3 -13.2M685 48.1q1.2 -5.1 2.3 -10.1M696 49.4q-0.5 -4.4 -1.1 -8.9M705 50.3q-0.5 -4.5 -1.1 -8.9M717 51.2q-1.5 -4.8 -2.9 -9.5M725 51.7q0.6 -5.1 1.2 -10.3M735 52.2q0.8 -5.4 1.7 -10.8M746 52.5q0.9 -3.6 1.8 -7.2M755 52.7q-0.9 -6.3 -1.8 -12.5M765 52.8q-0.3 -4.3 -0.5 -8.6M777 52.9q1.2 -3.8 2.5 -7.6M787 53.0q1.7 -3.1 3.3 -6.2M797 53.0q-0.8 -4.2 -1.6 -8.4M810 53.2q0.4 -5.7 0.9 -11.4M819 53.4q0.3 -6.9 0.6 -13.8M828 53.7q-1.0 -5.0 -2.1 -10.1M837 54.1q-0.5 -7.4 -1.0 -14.9M845 54.6q-1.7 -3.4 -3.4 -6.8M857 55.3q0.7 -5.4 1.3 -10.9M873 56.6q-0.5 -7.1 -0.9 -14.2M885 57.7q0.6 -6.5 1.2 -13.1M899 58.9q-1.6 -5.4 -3.2 -10.7M906 59.5q0.9 -6.1 1.8 -12.2M913 60.0q-1.4 -3.9 -2.8 -7.7M929 61.0q1.5 -5.5 3.0 -11.0M944 61.6q-1.6 -4.3 -3.2 -8.6M956 61.7q-0.4 -3.4 -0.8 -6.8M967 61.5q-1.6 -5.9 -3.2 -11.8M974 61.3q0.8 -7.0 1.6 -14.1M983 60.8q1.3 -3.8 2.6 -7.5M994 60.0q-1.0 -7.3 -1.9 -14.6M1006 58.9q-0.6 -4.3 -1.1 -8.6M1014 58.0q-0.6 -6.2 -1.3 -12.3M1027 56.5q-1.6 -7.4 -3.2 -14.7M1043 54.6q-0.9 -3.2 -1.8 -6.4M1056 53.1q-0.6 -4.5 -1.1 -9.0M1070 51.8q-1.5 -7.0 -2.9 -14.1M1085 50.6q0.7 -3.1 1.3 -6.1M1096 50.0q-1.4 -6.5 -2.8 -13.0M1107 49.6q1.2 -6.3 2.5 -12.6M1119 49.5q-1.7 -4.7 -3.4 -9.4M1127 49.6q-0.4 -7.2 -0.7 -14.4M1139 49.9q-0.4 -6.3 -0.8 -12.5M1149 50.2q-0.9 -4.3 -1.8 -8.5M1161 50.8q1.3 -3.6 2.6 -7.1M1170 51.2q-0.0 -4.6 -0.0 -9.2M1185 51.9q-1.7 -4.3 -3.5 -8.6M1194 52.3q1.1 -3.6 2.1 -7.1M1203 52.5q1.2 -3.6 2.4 -7.3M1214 52.8q0.5 -4.7 1.1 -9.4M1227 52.8q-0.3 -4.2 -0.6 -8.3M1238 52.7q0.8 -6.5 1.7 -12.9M1249 52.4q1.1 -5.3 2.1 -10.5M1261 51.9q0.4 -4.8 0.8 -9.5M1271 51.4q0.6 -3.3 1.3 -6.5M1280 50.9q0.9 -3.3 1.8 -6.7M1294 50.2q-0.7 -7.1 -1.4 -14.1M1302 49.8q-1.3 -4.3 -2.7 -8.6M1316 49.1q-0.9 -3.6 -1.7 -7.3M1332 48.8q-1.4 -6.4 -2.7 -12.9M1343 48.7q-0.1 -5.6 -0.2 -11.3M1359 49.0q-0.4 -6.5 -0.9 -12.9M1374 49.6q0.7 -4.4 1.5 -8.7M1386 50.4q1.0 -6.4 2.0 -12.8M1395 51.0q-0.9 -6.5 -1.7 -12.9M1407 51.9q0.6 -3.9 1.2 -7.8M1414 52.5q0.1 -5.0 0.2 -10.0M1427 53.4q1.3 -4.3 2.5 -8.6M1438 54.1q0.6 -4.7 1.3 -9.3M1448 54.6q-1.3 -3.6 -2.6 -7.3M1455 54.8q-1.3 -6.7 -2.6 -13.3M1466 55.0q1.3 -3.0 2.5 -6.1M1476 55.0q1.0 -4.4 1.9 -8.7M1486 54.7q0.1 -4.2 0.2 -8.5M1500 53.9q-1.4 -3.0 -2.8 -6.0M1514 52.7q0.4 -6.0 0.8 -12.0M1523 51.7q1.1 -5.0 2.1 -10.1M1531 50.8q1.5 -5.3 3.0 -10.6M1544 49.2q-1.3 -4.5 -2.6 -9.0M1559 47.1q0.1 -5.3 0.1 -10.5M1575 45.0q0.4 -4.7 0.7 -9.5M1591 43.1q-0.6 -4.0 -1.1 -8.0' fill='none' stroke='%237fbf63' stroke-width='1.4' stroke-linecap='round'/%3E%3Cg%3E%3Ccircle cx='1466' cy='63.8' r='3.5' fill='%23ff8f1f'/%3E%3Ccircle cx='639' cy='65.0' r='3.2' fill='%23ffffff'/%3E%3Ccircle cx='639' cy='65.0' r='1.3' fill='%23f2b82e'/%3E%3Ccircle cx='672' cy='50.2' r='2.8' fill='%23ffc93c'/%3E%3Ccircle cx='719' cy='57.8' r='2.4' fill='%23ffc93c'/%3E%3Ccircle cx='1164' cy='61.6' r='2.3' fill='%23ff8f1f'/%3E%3Ccircle cx='570' cy='56.7' r='2.5' fill='%23ffffff'/%3E%3Ccircle cx='97' cy='49.3' r='3.0' fill='%23b9a6f2'/%3E%3Ccircle cx='569' cy='57.0' r='2.9' fill='%23ff8f1f'/%3E%3Ccircle cx='966' cy='83.1' r='2.3' fill='%23ffc93c'/%3E%3Ccircle cx='399' cy='56.7' r='2.4' fill='%23ffffff'/%3E%3Ccircle cx='1260' cy='67.5' r='2.0' fill='%23ff6f61'/%3E%3Ccircle cx='1359' cy='60.1' r='1.9' fill='%23b9a6f2'/%3E%3Ccircle cx='1068' cy='74.6' r='2.0' fill='%23ffc93c'/%3E%3Ccircle cx='364' cy='60.8' r='3.0' fill='%23ffffff'/%3E%3Ccircle cx='719' cy='72.9' r='3.5' fill='%23ffc93c'/%3E%3Ccircle cx='639' cy='53.1' r='2.5' fill='%23ff6f61'/%3E%3Ccircle cx='123' cy='47.3' r='2.7' fill='%23ffffff'/%3E%3Ccircle cx='320' cy='60.6' r='2.6' fill='%23ffc93c'/%3E%3Ccircle cx='1489' cy='64.7' r='3.0' fill='%23ffffff'/%3E%3Ccircle cx='842' cy='64.2' r='3.0' fill='%23ff8f1f'/%3E%3Ccircle cx='183' cy='58.4' r='3.3' fill='%23e2457f'/%3E%3Ccircle cx='183' cy='58.4' r='1.3' fill='%23f2b82e'/%3E%3Ccircle cx='869' cy='62.8' r='1.9' fill='%23e2457f'/%3E%3Ccircle cx='605' cy='59.7' r='2.7' fill='%23ff6f61'/%3E%3Ccircle cx='1400' cy='67.2' r='2.1' fill='%23b9a6f2'/%3E%3Ccircle cx='965' cy='85.3' r='1.8' fill='%23b9a6f2'/%3E%3Ccircle cx='1177' cy='54.3' r='3.7' fill='%23ffffff'/%3E%3Ccircle cx='1177' cy='54.3' r='1.5' fill='%23f2b82e'/%3E%3Ccircle cx='859' cy='75.4' r='3.7' fill='%23b9a6f2'/%3E%3Ccircle cx='512' cy='60.3' r='2.0' fill='%23ffffff'/%3E%3Ccircle cx='20' cy='41.8' r='2.9' fill='%23b9a6f2'/%3E%3Ccircle cx='1568' cy='60.9' r='3.7' fill='%23b9a6f2'/%3E%3Ccircle cx='1319' cy='62.1' r='3.3' fill='%23ffc93c'/%3E%3Ccircle cx='520' cy='54.6' r='3.3' fill='%23ff8f1f'/%3E%3Ccircle cx='460' cy='44.9' r='2.8' fill='%23ffffff'/%3E%3Ccircle cx='1306' cy='59.4' r='3.2' fill='%23b9a6f2'/%3E%3Ccircle cx='765' cy='70.2' r='2.6' fill='%23ff6f61'/%3E%3Ccircle cx='1579' cy='50.6' r='3.5' fill='%23ff8f1f'/%3E%3Ccircle cx='244' cy='64.5' r='2.1' fill='%23ff8f1f'/%3E%3Ccircle cx='1279' cy='58.2' r='4.0' fill='%23ffffff'/%3E%3Ccircle cx='1279' cy='58.2' r='1.6' fill='%23f2b82e'/%3E%3Ccircle cx='854' cy='58.4' r='3.1' fill='%23ffffff'/%3E%3Ccircle cx='854' cy='58.4' r='1.2' fill='%23f2b82e'/%3E%3Ccircle cx='1595' cy='52.1' r='3.2' fill='%23ffffff'/%3E%3Ccircle cx='1595' cy='52.1' r='1.3' fill='%23f2b82e'/%3E%3Ccircle cx='648' cy='66.8' r='4.0' fill='%23e2457f'/%3E%3Ccircle cx='648' cy='66.8' r='1.6' fill='%23f2b82e'/%3E%3Ccircle cx='1289' cy='56.8' r='3.3' fill='%23ff6f61'/%3E%3Ccircle cx='431' cy='49.4' r='2.6' fill='%23ff6f61'/%3E%3Ccircle cx='56' cy='53.0' r='2.7' fill='%23e2457f'/%3E%3Ccircle cx='317' cy='42.5' r='3.5' fill='%23ffffff'/%3E%3Ccircle cx='317' cy='42.5' r='1.4' fill='%23f2b82e'/%3E%3Ccircle cx='499' cy='56.6' r='2.5' fill='%23ffffff'/%3E%3Ccircle cx='494' cy='51.5' r='3.7' fill='%23ffc93c'/%3E%3Ccircle cx='1131' cy='55.4' r='2.1' fill='%23ffffff'/%3E%3Ccircle cx='104' cy='60.7' r='2.7' fill='%23b9a6f2'/%3E%3Ccircle cx='439' cy='45.0' r='3.7' fill='%23b9a6f2'/%3E%3Ccircle cx='1381' cy='58.3' r='2.6' fill='%23e2457f'/%3E%3Ccircle cx='100' cy='56.7' r='4.0' fill='%23ff6f61'/%3E%3Ccircle cx='735' cy='61.0' r='3.2' fill='%23ff6f61'/%3E%3Ccircle cx='1255' cy='60.0' r='3.4' fill='%23ffc93c'/%3E%3Ccircle cx='752' cy='65.6' r='3.1' fill='%23ff8f1f'/%3E%3Ccircle cx='786' cy='72.4' r='3.4' fill='%23ffffff'/%3E%3Ccircle cx='786' cy='72.4' r='1.4' fill='%23f2b82e'/%3E%3Ccircle cx='787' cy='66.3' r='3.0' fill='%23ff6f61'/%3E%3Ccircle cx='300' cy='50.1' r='3.9' fill='%23ff8f1f'/%3E%3Ccircle cx='409' cy='58.3' r='2.4' fill='%23ff6f61'/%3E%3Ccircle cx='103' cy='56.3' r='3.7' fill='%23ffffff'/%3E%3Ccircle cx='103' cy='56.3' r='1.5' fill='%23f2b82e'/%3E%3Ccircle cx='1111' cy='53.3' r='1.9' fill='%23ff6f61'/%3E%3Ccircle cx='1517' cy='68.6' r='3.4' fill='%23ffffff'/%3E%3Ccircle cx='1517' cy='68.6' r='1.4' fill='%23f2b82e'/%3E%3Ccircle cx='1389' cy='72.2' r='3.2' fill='%23ffc93c'/%3E%3Ccircle cx='773' cy='57.7' r='1.9' fill='%23e2457f'/%3E%3Ccircle cx='846' cy='59.7' r='2.9' fill='%23ff8f1f'/%3E%3Ccircle cx='1490' cy='71.5' r='3.4' fill='%23ffffff'/%3E%3Ccircle cx='1490' cy='71.5' r='1.4' fill='%23f2b82e'/%3E%3Ccircle cx='1289' cy='62.8' r='3.3' fill='%23e2457f'/%3E%3Ccircle cx='1289' cy='62.8' r='1.3' fill='%23f2b82e'/%3E%3Ccircle cx='1494' cy='66.9' r='3.6' fill='%23ffffff'/%3E%3Ccircle cx='1494' cy='66.9' r='1.4' fill='%23f2b82e'/%3E%3Ccircle cx='815' cy='59.8' r='2.7' fill='%23ffffff'/%3E%3Ccircle cx='40' cy='44.4' r='3.9' fill='%23ffffff'/%3E%3Ccircle cx='40' cy='44.4' r='1.5' fill='%23f2b82e'/%3E%3Ccircle cx='558' cy='44.8' r='3.0' fill='%23b9a6f2'/%3E%3Ccircle cx='1102' cy='60.8' r='3.6' fill='%23ff6f61'/%3E%3Ccircle cx='1567' cy='67.7' r='3.6' fill='%23ffffff'/%3E%3Ccircle cx='1567' cy='67.7' r='1.4' fill='%23f2b82e'/%3E%3Ccircle cx='338' cy='58.6' r='2.0' fill='%23e2457f'/%3E%3Ccircle cx='116' cy='51.5' r='3.0' fill='%23e2457f'/%3E%3Ccircle cx='116' cy='51.5' r='1.2' fill='%23f2b82e'/%3E%3Ccircle cx='1585' cy='67.6' r='2.9' fill='%23ffc93c'/%3E%3Ccircle cx='681' cy='65.7' r='2.5' fill='%23ffffff'/%3E%3Ccircle cx='407' cy='52.8' r='2.7' fill='%23ffffff'/%3E%3Ccircle cx='930' cy='73.7' r='3.4' fill='%23b9a6f2'/%3E%3Ccircle cx='907' cy='80.8' r='1.8' fill='%23ffffff'/%3E%3Ccircle cx='1584' cy='64.9' r='3.3' fill='%23e2457f'/%3E%3Ccircle cx='1584' cy='64.9' r='1.3' fill='%23f2b82e'/%3E%3Ccircle cx='378' cy='52.4' r='2.0' fill='%23e2457f'/%3E%3Ccircle cx='612' cy='45.6' r='2.9' fill='%23ff6f61'/%3E%3Ccircle cx='1269' cy='67.3' r='3.4' fill='%23b9a6f2'/%3E%3Ccircle cx='1547' cy='61.5' r='3.8' fill='%23ffffff'/%3E%3Ccircle cx='1547' cy='61.5' r='1.5' fill='%23f2b82e'/%3E%3Ccircle cx='905' cy='70.7' r='3.1' fill='%23ff8f1f'/%3E%3Ccircle cx='854' cy='59.6' r='3.0' fill='%23ff6f61'/%3E%3Ccircle cx='943' cy='68.4' r='2.7' fill='%23e2457f'/%3E%3Ccircle cx='623' cy='55.0' r='3.2' fill='%23ffc93c'/%3E%3Ccircle cx='1242' cy='64.3' r='2.7' fill='%23ffffff'/%3E%3Ccircle cx='352' cy='61.9' r='2.7' fill='%23ffc93c'/%3E%3Ccircle cx='1151' cy='56.8' r='3.8' fill='%23ffc93c'/%3E%3Ccircle cx='927' cy='76.8' r='2.4' fill='%23e2457f'/%3E%3Ccircle cx='416' cy='62.0' r='2.7' fill='%23e2457f'/%3E%3Ccircle cx='938' cy='81.0' r='3.9' fill='%23e2457f'/%3E%3Ccircle cx='938' cy='81.0' r='1.6' fill='%23f2b82e'/%3E%3Ccircle cx='1461' cy='75.5' r='3.5' fill='%23ff8f1f'/%3E%3Ccircle cx='367' cy='44.4' r='2.4' fill='%23ff6f61'/%3E%3Ccircle cx='821' cy='58.9' r='2.4' fill='%23ffffff'/%3E%3Ccircle cx='1556' cy='64.5' r='3.7' fill='%23b9a6f2'/%3E%3Ccircle cx='1429' cy='66.8' r='3.6' fill='%23b9a6f2'/%3E%3Ccircle cx='1112' cy='65.4' r='3.5' fill='%23e2457f'/%3E%3Ccircle cx='1112' cy='65.4' r='1.4' fill='%23f2b82e'/%3E%3Ccircle cx='213' cy='56.1' r='2.9' fill='%23ffffff'/%3E%3Ccircle cx='852' cy='61.3' r='2.6' fill='%23ffc93c'/%3E%3Ccircle cx='967' cy='66.5' r='3.9' fill='%23b9a6f2'/%3E%3Ccircle cx='1023' cy='65.7' r='3.0' fill='%23ff6f61'/%3E%3Ccircle cx='1558' cy='67.4' r='2.2' fill='%23ffffff'/%3E%3Ccircle cx='1202' cy='67.1' r='2.5' fill='%23ffffff'/%3E%3Ccircle cx='247' cy='61.1' r='2.4' fill='%23ff8f1f'/%3E%3Ccircle cx='1227' cy='72.1' r='2.8' fill='%23ffc93c'/%3E%3Ccircle cx='1255' cy='60.6' r='2.4' fill='%23ff6f61'/%3E%3Ccircle cx='1248' cy='60.6' r='3.8' fill='%23ffffff'/%3E%3Ccircle cx='1248' cy='60.6' r='1.5' fill='%23f2b82e'/%3E%3Ccircle cx='315' cy='57.3' r='3.9' fill='%23ff8f1f'/%3E%3Ccircle cx='741' cy='66.7' r='2.6' fill='%23e2457f'/%3E%3Ccircle cx='1432' cy='72.7' r='2.3' fill='%23b9a6f2'/%3E%3Ccircle cx='618' cy='53.3' r='2.9' fill='%23ff6f61'/%3E%3Ccircle cx='594' cy='49.1' r='3.5' fill='%23ffffff'/%3E%3Ccircle cx='594' cy='49.1' r='1.4' fill='%23f2b82e'/%3E%3Ccircle cx='813' cy='73.1' r='1.9' fill='%23e2457f'/%3E%3Ccircle cx='803' cy='71.2' r='2.7' fill='%23ffc93c'/%3E%3Ccircle cx='693' cy='66.8' r='3.3' fill='%23ffc93c'/%3E%3Ccircle cx='1005' cy='78.3' r='3.5' fill='%23ffc93c'/%3E%3C/g%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

/* the overlay stays dark, with light type */
.lb{
  --ink:   #fbf6ee;
  --muted: rgba(251,246,238,.76);
  --ghost: rgba(251,246,238,.56);
  --line:  rgba(251,246,238,.2);
}


/* ---------- the three doshas ---------- */

/* a lotus opening behind them */
#doshas{ overflow:hidden; }
#doshas::before{
  content:"";
  position:absolute;
  width:min(600px, 78vw);
  aspect-ratio:1.4;
  inset-inline-end:max(-120px, calc(50% - 730px));
  top:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 200'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffb3cf'/%3E%3Cstop offset='.55' stop-color='%23f06a9e'/%3E%3Cstop offset='1' stop-color='%23d93b78'/%3E%3C/linearGradient%3E%3ClinearGradient id='q' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd3e3'/%3E%3Cstop offset='1' stop-color='%23f48ab2'/%3E%3C/linearGradient%3E%3CradialGradient id='h' cx='.5' cy='.62' r='.5'%3E%3Cstop offset='0' stop-color='%23ffd98a'/%3E%3Cstop offset='1' stop-color='%23ffd98a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='140' cy='120' rx='140' ry='100' fill='url(%23h)'/%3E%3Cpath d='M140 150C100 150 40 128 14 92C58 84 106 104 140 150Z' fill='url(%23q)'/%3E%3Cpath d='M140 150C180 150 240 128 266 92C222 84 174 104 140 150Z' fill='url(%23q)'/%3E%3Cpath d='M140 150C108 132 70 90 72 44C108 60 134 100 140 150Z' fill='url(%23p)'/%3E%3Cpath d='M140 150C172 132 210 90 208 44C172 60 146 100 140 150Z' fill='url(%23p)'/%3E%3Cpath d='M140 150C116 120 108 66 140 14C172 66 164 120 140 150Z' fill='url(%23p)'/%3E%3Cpath d='M26 170C80 150 200 150 254 170C200 190 80 190 26 170Z' fill='%233e9e76'/%3E%3Cpath d='M62 170C102 163 178 163 218 170' fill='none' stroke='%232b7c59' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity:.3;
  pointer-events:none;
}
#doshas .wrap{ position:relative; }

.doshas .spot{
  position:relative;
  overflow:hidden;
  border-color:color-mix(in srgb, var(--t) 34%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--t) 14%, #ffffff), #ffffff 62%);
}
.doshas .spot::before{
  content:"";
  position:absolute;
  width:190px; height:190px;
  inset-inline-end:-60px; top:-80px;
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--t) 34%, transparent), transparent 70%);
  pointer-events:none;
}
.doshas .spot-mark{
  width:56px; height:56px;
  border:0;
  background:radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--t) 55%, #ffffff), var(--t) 78%);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--t) 16%, transparent), 0 10px 26px -8px var(--t);
}
.doshas .dot{
  display:block;
  width:30px; height:30px;
  background:center / contain no-repeat;
}
.doshas .d-vata .dot { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4 12.5h15.5a4.2 4.2 0 1 0-4.2-4.2'/%3E%3Cpath d='M4 18h20.5a4.2 4.2 0 1 1-4.2 4.2'/%3E%3Cpath d='M7.5 23.6h6.5'/%3E%3C/g%3E%3C/svg%3E"); }
.doshas .d-pitta .dot{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16.4 2.6C17.6 8 24 11 24 18.6A8 8 0 0 1 8 18.6C8 14.6 10 12.2 12.4 10.2C12.2 13.4 13.4 15.2 15.4 15.8C14 11.4 14.6 6.4 16.4 2.6Z' fill='%23ffffff'/%3E%3Cpath d='M16 26.4A3.4 3.4 0 0 1 12.6 23C12.6 21 14.1 19.4 16 17.6C17.9 19.4 19.4 21 19.4 23A3.4 3.4 0 0 1 16 26.4Z' fill='%23e8672f' fill-opacity='.6'/%3E%3C/svg%3E"); }
.doshas .d-kapha .dot{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2.6C19.8 8.2 23 11.8 23 16.2A7 7 0 0 1 9 16.2C9 11.8 12.2 8.2 16 2.6Z' fill='%23ffffff'/%3E%3Cpath d='M4.6 28.8C8.4 25.6 11.8 24.6 16 24.6C20.2 24.6 23.6 25.6 27.4 28.8Z' fill='%23ffffff' fill-opacity='.85'/%3E%3C/svg%3E"); }
.doshas h3{ color:var(--t-ink); font-size:1.24rem; }
#doshas .tags{ margin-top:14px; }


/* ---------- the six seasons ----------
   Each with its sign and the colour it has on the year ring above. */

.ritus{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:24px;
}
.ritus li{
  position:relative;
  display:grid; gap:2px;
  padding:11px 12px 12px;
  padding-inline-start:50px;
  border:1px solid color-mix(in srgb, var(--c) 60%, transparent);
  border-radius:14px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--c) 24%, #ffffff), #ffffff 85%);
}
.ritus li::before{
  content:"";
  position:absolute;
  inset-inline-start:11px; top:50%;
  width:28px; height:28px;
  margin-top:-14px;
  border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 56' width='168' height='56'%3E%3Cg stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(14 14)' fill='%23ffffff' stroke='%23ffffff'%3E%3Cpath d='M0-6.8V6.8M-5.9-3.4L5.9 3.4M-5.9 3.4L5.9-3.4M-1.6-5.3L0-3.7L1.6-5.3M-1.6 5.3L0 3.7L1.6 5.3' fill='none'/%3E%3C/g%3E%3Cg transform='translate(42 14)' fill='%23ffffff' stroke='%23ffffff'%3E%3Cellipse cy='-3.5' rx='2.2' ry='3.1'/%3E%3Cellipse cy='-3.5' rx='2.2' ry='3.1' transform='rotate(72)'/%3E%3Cellipse cy='-3.5' rx='2.2' ry='3.1' transform='rotate(144)'/%3E%3Cellipse cy='-3.5' rx='2.2' ry='3.1' transform='rotate(216)'/%3E%3Cellipse cy='-3.5' rx='2.2' ry='3.1' transform='rotate(288)'/%3E%3Ccircle r='1.5' fill='%23ffd84a' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(70 14)' fill='%23ffffff' stroke='%23ffffff'%3E%3Ccircle r='3.1'/%3E%3Cpath d='M0-7.2v2.1M0 5.1v2.1M-7.2 0h2.1M5.1 0h2.1M-5.1-5.1l1.5 1.5M3.6 3.6l1.5 1.5M5.1-5.1l-1.5 1.5M-3.6 3.6l-1.5 1.5'/%3E%3C/g%3E%3Cg transform='translate(98 14)' fill='%23ffffff' stroke='%23ffffff'%3E%3Cpath d='M0-6.6C2.7-2.9 4.3-.4 4.3 2.1A4.3 4.3 0 0 1-4.3 2.1C-4.3-.4-2.7-2.9 0-6.6Z'/%3E%3C/g%3E%3Cg transform='translate(126 14)' fill='%23ffffff' stroke='%23ffffff'%3E%3Cpath d='M-5.6 5.6C-6.1-1.2-1.2-6 5.8-5.8C6 1.2 1.2 6.1-5.6 5.6Z'/%3E%3C/g%3E%3Cg transform='translate(154 14)' fill='%23ffffff' stroke='%23ffffff'%3E%3Cpath d='M1.4-6.4A6.5 6.5 0 1 0 6.4 2.6A5.1 5.1 0 0 1 1.4-6.4Z'/%3E%3C/g%3E%3Cg transform='translate(14 42)' fill='%233a2e22' stroke='%233a2e22'%3E%3Cpath d='M0-6.8V6.8M-5.9-3.4L5.9 3.4M-5.9 3.4L5.9-3.4M-1.6-5.3L0-3.7L1.6-5.3M-1.6 5.3L0 3.7L1.6 5.3' fill='none'/%3E%3C/g%3E%3Cg transform='translate(42 42)' fill='%233a2e22' stroke='%233a2e22'%3E%3Cellipse cy='-3.5' rx='2.2' ry='3.1'/%3E%3Cellipse cy='-3.5' rx='2.2' ry='3.1' transform='rotate(72)'/%3E%3Cellipse cy='-3.5' rx='2.2' ry='3.1' transform='rotate(144)'/%3E%3Cellipse cy='-3.5' rx='2.2' ry='3.1' transform='rotate(216)'/%3E%3Cellipse cy='-3.5' rx='2.2' ry='3.1' transform='rotate(288)'/%3E%3Ccircle r='1.5' fill='%23ffd84a' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(70 42)' fill='%233a2e22' stroke='%233a2e22'%3E%3Ccircle r='3.1'/%3E%3Cpath d='M0-7.2v2.1M0 5.1v2.1M-7.2 0h2.1M5.1 0h2.1M-5.1-5.1l1.5 1.5M3.6 3.6l1.5 1.5M5.1-5.1l-1.5 1.5M-3.6 3.6l-1.5 1.5'/%3E%3C/g%3E%3Cg transform='translate(98 42)' fill='%233a2e22' stroke='%233a2e22'%3E%3Cpath d='M0-6.6C2.7-2.9 4.3-.4 4.3 2.1A4.3 4.3 0 0 1-4.3 2.1C-4.3-.4-2.7-2.9 0-6.6Z'/%3E%3C/g%3E%3Cg transform='translate(126 42)' fill='%233a2e22' stroke='%233a2e22'%3E%3Cpath d='M-5.6 5.6C-6.1-1.2-1.2-6 5.8-5.8C6 1.2 1.2 6.1-5.6 5.6Z'/%3E%3C/g%3E%3Cg transform='translate(154 42)' fill='%233a2e22' stroke='%233a2e22'%3E%3Cpath d='M1.4-6.4A6.5 6.5 0 1 0 6.4 2.6A5.1 5.1 0 0 1 1.4-6.4Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") var(--sx) var(--sy) / 168px 56px no-repeat, var(--c);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent), 0 6px 14px -6px var(--c);
}
.ritus .s-shishira{ --sx:0;      --sy:-28px; }
.ritus .s-vasanta { --sx:-28px;  --sy:0; }
.ritus .s-grishma { --sx:-56px;  --sy:-28px; }
.ritus .s-varsha  { --sx:-84px;  --sy:0; }
.ritus .s-sharad  { --sx:-112px; --sy:0; }
.ritus .s-hemanta { --sx:-140px; --sy:-28px; }
.ritus b{ color:var(--ink); font-size:.98rem; }
.ritus span{ color:var(--faint); font-size:.84rem; }

/* a mandala behind the features, turning slowly */
#features{ overflow:hidden; }
#features::before{
  content:"";
  position:absolute;
  width:min(720px, 90vw);
  aspect-ratio:1;
  inset-inline-end:max(-260px, calc(50% - 900px));
  top:-120px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-200 -200 400 400'%3E%3Cg fill='none' stroke-linejoin='round'%3E%3Ccircle r='22' stroke='%23e2457f' stroke-width='1.6' stroke-opacity='.5'/%3E%3Cpath d='M-7.5 -20.7Q-15.6 -45.3 0 -58Q15.6 -45.3 7.5 -20.7M9.3 -19.9Q21 -43.1 41 -41Q43.1 -21 19.9 -9.3M20.7 -7.5Q45.3 -15.6 58 0Q45.3 15.6 20.7 7.5M19.9 9.3Q43.1 21 41 41Q21 43.1 9.3 19.9M7.5 20.7Q15.6 45.3 0 58Q-15.6 45.3 -7.5 20.7M-9.3 19.9Q-21 43.1 -41 41Q-43.1 21 -19.9 9.3M-20.7 7.5Q-45.3 15.6 -58 0Q-45.3 -15.6 -20.7 -7.5M-19.9 -9.3Q-43.1 -21 -41 -41Q-21 -43.1 -9.3 -19.9' stroke='%23e2457f' stroke-width='1.6' stroke-opacity='.55' fill='%23ffd2e2' fill-opacity='.35'/%3E%3Ccircle r='62' stroke='%23d99a2b' stroke-width='1.4' stroke-opacity='.6'/%3E%3Cpath d='M-10.8 -61.1Q-15.7 -93.8 0 -108Q15.7 -93.8 10.8 -61.1M13.4 -60.5Q21.4 -92.7 41.3 -99.8Q50.4 -80.7 33.3 -52.3M35.6 -50.8Q55.2 -77.4 76.4 -76.4Q77.4 -55.2 50.8 -35.6M52.3 -33.3Q80.7 -50.4 99.8 -41.3Q92.7 -21.4 60.5 -13.4M61.1 -10.8Q93.8 -15.7 108 0Q93.8 15.7 61.1 10.8M60.5 13.4Q92.7 21.4 99.8 41.3Q80.7 50.4 52.3 33.3M50.8 35.6Q77.4 55.2 76.4 76.4Q55.2 77.4 35.6 50.8M33.3 52.3Q50.4 80.7 41.3 99.8Q21.4 92.7 13.4 60.5M10.8 61.1Q15.7 93.8 0 108Q-15.7 93.8 -10.8 61.1M-13.4 60.5Q-21.4 92.7 -41.3 99.8Q-50.4 80.7 -33.3 52.3M-35.6 50.8Q-55.2 77.4 -76.4 76.4Q-77.4 55.2 -50.8 35.6M-52.3 33.3Q-80.7 50.4 -99.8 41.3Q-92.7 21.4 -60.5 13.4M-61.1 10.8Q-93.8 15.7 -108 0Q-93.8 -15.7 -61.1 -10.8M-60.5 -13.4Q-92.7 -21.4 -99.8 -41.3Q-80.7 -50.4 -52.3 -33.3M-50.8 -35.6Q-77.4 -55.2 -76.4 -76.4Q-55.2 -77.4 -35.6 -50.8M-33.3 -52.3Q-50.4 -80.7 -41.3 -99.8Q-21.4 -92.7 -13.4 -60.5' stroke='%23d99a2b' stroke-width='1.4' stroke-opacity='.6' fill='%23ffe4b0' fill-opacity='.3'/%3E%3Cpath d='M4.6 -61.8Q6.7 -83.3 17.9 -90.2Q25.7 -79.6 19.4 -58.9M27.9 -55.4Q38.1 -74.4 51.1 -76.5Q54.2 -63.7 40.5 -47M47 -40.5Q63.7 -54.2 76.5 -51.1Q74.4 -38.1 55.4 -27.9M58.9 -19.4Q79.6 -25.7 90.2 -17.9Q83.3 -6.7 61.8 -4.6M61.8 4.6Q83.3 6.7 90.2 17.9Q79.6 25.7 58.9 19.4M55.4 27.9Q74.4 38.1 76.5 51.1Q63.7 54.2 47 40.5M40.5 47Q54.2 63.7 51.1 76.5Q38.1 74.4 27.9 55.4M19.4 58.9Q25.7 79.6 17.9 90.2Q6.7 83.3 4.6 61.8M-4.6 61.8Q-6.7 83.3 -17.9 90.2Q-25.7 79.6 -19.4 58.9M-27.9 55.4Q-38.1 74.4 -51.1 76.5Q-54.2 63.7 -40.5 47M-47 40.5Q-63.7 54.2 -76.5 51.1Q-74.4 38.1 -55.4 27.9M-58.9 19.4Q-79.6 25.7 -90.2 17.9Q-83.3 6.7 -61.8 4.6M-61.8 -4.6Q-83.3 -6.7 -90.2 -17.9Q-79.6 -25.7 -58.9 -19.4M-55.4 -27.9Q-74.4 -38.1 -76.5 -51.1Q-63.7 -54.2 -47 -40.5M-40.5 -47Q-54.2 -63.7 -51.1 -76.5Q-38.1 -74.4 -27.9 -55.4M-19.4 -58.9Q-25.7 -79.6 -17.9 -90.2Q-6.7 -83.3 -4.6 -61.8' stroke='%23e2457f' stroke-width='1.1' stroke-opacity='.45'/%3E%3Ccircle r='114' stroke='%23d99a2b' stroke-width='1.2' stroke-opacity='.55'/%3E%3Ccircle r='122' stroke='%23d99a2b' stroke-width='1' stroke-opacity='.4' stroke-dasharray='2 5'/%3E%3Cpath d='M-11.6 -127.5Q-13.5 -156.2 0 -168Q13.5 -156.2 11.6 -127.5M13.5 -127.3Q17.2 -155.9 32.8 -164.8Q43.7 -150.6 36.2 -122.8M38.1 -122.2Q47.3 -149.5 64.3 -155.2Q72.3 -139.2 59.5 -113.3M61.2 -112.4Q75.6 -137.4 93.3 -139.7Q98 -122.4 80.5 -99.5M81.9 -98.3Q100.9 -120 118.8 -118.8Q120 -100.9 98.3 -81.9M99.5 -80.5Q122.4 -98 139.7 -93.3Q137.4 -75.6 112.4 -61.2M113.3 -59.5Q139.2 -72.3 155.2 -64.3Q149.5 -47.3 122.2 -38.1M122.8 -36.2Q150.6 -43.7 164.8 -32.8Q155.9 -17.2 127.3 -13.5M127.5 -11.6Q156.2 -13.5 168 0Q156.2 13.5 127.5 11.6M127.3 13.5Q155.9 17.2 164.8 32.8Q150.6 43.7 122.8 36.2M122.2 38.1Q149.5 47.3 155.2 64.3Q139.2 72.3 113.3 59.5M112.4 61.2Q137.4 75.6 139.7 93.3Q122.4 98 99.5 80.5M98.3 81.9Q120 100.9 118.8 118.8Q100.9 120 81.9 98.3M80.5 99.5Q98 122.4 93.3 139.7Q75.6 137.4 61.2 112.4M59.5 113.3Q72.3 139.2 64.3 155.2Q47.3 149.5 38.1 122.2M36.2 122.8Q43.7 150.6 32.8 164.8Q17.2 155.9 13.5 127.3M11.6 127.5Q13.5 156.2 0 168Q-13.5 156.2 -11.6 127.5M-13.5 127.3Q-17.2 155.9 -32.8 164.8Q-43.7 150.6 -36.2 122.8M-38.1 122.2Q-47.3 149.5 -64.3 155.2Q-72.3 139.2 -59.5 113.3M-61.2 112.4Q-75.6 137.4 -93.3 139.7Q-98 122.4 -80.5 99.5M-81.9 98.3Q-100.9 120 -118.8 118.8Q-120 100.9 -98.3 81.9M-99.5 80.5Q-122.4 98 -139.7 93.3Q-137.4 75.6 -112.4 61.2M-113.3 59.5Q-139.2 72.3 -155.2 64.3Q-149.5 47.3 -122.2 38.1M-122.8 36.2Q-150.6 43.7 -164.8 32.8Q-155.9 17.2 -127.3 13.5M-127.5 11.6Q-156.2 13.5 -168 0Q-156.2 -13.5 -127.5 -11.6M-127.3 -13.5Q-155.9 -17.2 -164.8 -32.8Q-150.6 -43.7 -122.8 -36.2M-122.2 -38.1Q-149.5 -47.3 -155.2 -64.3Q-139.2 -72.3 -113.3 -59.5M-112.4 -61.2Q-137.4 -75.6 -139.7 -93.3Q-122.4 -98 -99.5 -80.5M-98.3 -81.9Q-120 -100.9 -118.8 -118.8Q-100.9 -120 -81.9 -98.3M-80.5 -99.5Q-98 -122.4 -93.3 -139.7Q-75.6 -137.4 -61.2 -112.4M-59.5 -113.3Q-72.3 -139.2 -64.3 -155.2Q-47.3 -149.5 -38.1 -122.2M-36.2 -122.8Q-43.7 -150.6 -32.8 -164.8Q-17.2 -155.9 -13.5 -127.3' stroke='%23d99a2b' stroke-width='1.2' stroke-opacity='.55' fill='%23fff0cc' fill-opacity='.3'/%3E%3Cpath d='M5 -127.9Q6 -143.7 14.7 -149.3Q22.1 -142.1 20.1 -126.4M29.8 -124.5Q33.9 -139.8 43.5 -143.5Q49.4 -135.1 44.4 -120.1M53.5 -116.3Q60.6 -130.5 70.7 -132.3Q74.8 -122.8 66.9 -109.1M75.2 -103.6Q84.8 -116.2 95.2 -116Q97.4 -105.9 86.9 -94M94 -86.9Q105.9 -97.4 116 -95.2Q116.2 -84.8 103.6 -75.2M109.1 -66.9Q122.8 -74.8 132.3 -70.7Q130.5 -60.6 116.3 -53.5M120.1 -44.4Q135.1 -49.4 143.5 -43.5Q139.8 -33.9 124.5 -29.8M126.4 -20.1Q142.1 -22.1 149.3 -14.7Q143.7 -6 127.9 -5M127.9 5Q143.7 6 149.3 14.7Q142.1 22.1 126.4 20.1M124.5 29.8Q139.8 33.9 143.5 43.5Q135.1 49.4 120.1 44.4M116.3 53.5Q130.5 60.6 132.3 70.7Q122.8 74.8 109.1 66.9M103.6 75.2Q116.2 84.8 116 95.2Q105.9 97.4 94 86.9M86.9 94Q97.4 105.9 95.2 116Q84.8 116.2 75.2 103.6M66.9 109.1Q74.8 122.8 70.7 132.3Q60.6 130.5 53.5 116.3M44.4 120.1Q49.4 135.1 43.5 143.5Q33.9 139.8 29.8 124.5M20.1 126.4Q22.1 142.1 14.7 149.3Q6 143.7 5 127.9M-5 127.9Q-6 143.7 -14.7 149.3Q-22.1 142.1 -20.1 126.4M-29.8 124.5Q-33.9 139.8 -43.5 143.5Q-49.4 135.1 -44.4 120.1M-53.5 116.3Q-60.6 130.5 -70.7 132.3Q-74.8 122.8 -66.9 109.1M-75.2 103.6Q-84.8 116.2 -95.2 116Q-97.4 105.9 -86.9 94M-94 86.9Q-105.9 97.4 -116 95.2Q-116.2 84.8 -103.6 75.2M-109.1 66.9Q-122.8 74.8 -132.3 70.7Q-130.5 60.6 -116.3 53.5M-120.1 44.4Q-135.1 49.4 -143.5 43.5Q-139.8 33.9 -124.5 29.8M-126.4 20.1Q-142.1 22.1 -149.3 14.7Q-143.7 6 -127.9 5M-127.9 -5Q-143.7 -6 -149.3 -14.7Q-142.1 -22.1 -126.4 -20.1M-124.5 -29.8Q-139.8 -33.9 -143.5 -43.5Q-135.1 -49.4 -120.1 -44.4M-116.3 -53.5Q-130.5 -60.6 -132.3 -70.7Q-122.8 -74.8 -109.1 -66.9M-103.6 -75.2Q-116.2 -84.8 -116 -95.2Q-105.9 -97.4 -94 -86.9M-86.9 -94Q-97.4 -105.9 -95.2 -116Q-84.8 -116.2 -75.2 -103.6M-66.9 -109.1Q-74.8 -122.8 -70.7 -132.3Q-60.6 -130.5 -53.5 -116.3M-44.4 -120.1Q-49.4 -135.1 -43.5 -143.5Q-33.9 -139.8 -29.8 -124.5M-20.1 -126.4Q-22.1 -142.1 -14.7 -149.3Q-6 -143.7 -5 -127.9' stroke='%230c7f8c' stroke-width='1' stroke-opacity='.35'/%3E%3Ccircle r='174' stroke='%23d99a2b' stroke-width='1.2' stroke-opacity='.5'/%3E%3C/g%3E%3Cg fill='%23d99a2b' fill-opacity='.55'%3E%3Ccircle cx='17.8' cy='-181.1' r='2.2'/%3E%3Ccircle cx='52.8' cy='-174.2' r='2.2'/%3E%3Ccircle cx='85.8' cy='-160.5' r='2.2'/%3E%3Ccircle cx='115.5' cy='-140.7' r='2.2'/%3E%3Ccircle cx='140.7' cy='-115.5' r='2.2'/%3E%3Ccircle cx='160.5' cy='-85.8' r='2.2'/%3E%3Ccircle cx='174.2' cy='-52.8' r='2.2'/%3E%3Ccircle cx='181.1' cy='-17.8' r='2.2'/%3E%3Ccircle cx='181.1' cy='17.8' r='2.2'/%3E%3Ccircle cx='174.2' cy='52.8' r='2.2'/%3E%3Ccircle cx='160.5' cy='85.8' r='2.2'/%3E%3Ccircle cx='140.7' cy='115.5' r='2.2'/%3E%3Ccircle cx='115.5' cy='140.7' r='2.2'/%3E%3Ccircle cx='85.8' cy='160.5' r='2.2'/%3E%3Ccircle cx='52.8' cy='174.2' r='2.2'/%3E%3Ccircle cx='17.8' cy='181.1' r='2.2'/%3E%3Ccircle cx='-17.8' cy='181.1' r='2.2'/%3E%3Ccircle cx='-52.8' cy='174.2' r='2.2'/%3E%3Ccircle cx='-85.8' cy='160.5' r='2.2'/%3E%3Ccircle cx='-115.5' cy='140.7' r='2.2'/%3E%3Ccircle cx='-140.7' cy='115.5' r='2.2'/%3E%3Ccircle cx='-160.5' cy='85.8' r='2.2'/%3E%3Ccircle cx='-174.2' cy='52.8' r='2.2'/%3E%3Ccircle cx='-181.1' cy='17.8' r='2.2'/%3E%3Ccircle cx='-181.1' cy='-17.8' r='2.2'/%3E%3Ccircle cx='-174.2' cy='-52.8' r='2.2'/%3E%3Ccircle cx='-160.5' cy='-85.8' r='2.2'/%3E%3Ccircle cx='-140.7' cy='-115.5' r='2.2'/%3E%3Ccircle cx='-115.5' cy='-140.7' r='2.2'/%3E%3Ccircle cx='-85.8' cy='-160.5' r='2.2'/%3E%3Ccircle cx='-52.8' cy='-174.2' r='2.2'/%3E%3Ccircle cx='-17.8' cy='-181.1' r='2.2'/%3E%3Ccircle cx='0' cy='-118' r='1.8'/%3E%3Ccircle cx='45.2' cy='-109' r='1.8'/%3E%3Ccircle cx='83.4' cy='-83.4' r='1.8'/%3E%3Ccircle cx='109' cy='-45.2' r='1.8'/%3E%3Ccircle cx='118' cy='0' r='1.8'/%3E%3Ccircle cx='109' cy='45.2' r='1.8'/%3E%3Ccircle cx='83.4' cy='83.4' r='1.8'/%3E%3Ccircle cx='45.2' cy='109' r='1.8'/%3E%3Ccircle cx='0' cy='118' r='1.8'/%3E%3Ccircle cx='-45.2' cy='109' r='1.8'/%3E%3Ccircle cx='-83.4' cy='83.4' r='1.8'/%3E%3Ccircle cx='-109' cy='45.2' r='1.8'/%3E%3Ccircle cx='-118' cy='0' r='1.8'/%3E%3Ccircle cx='-109' cy='-45.2' r='1.8'/%3E%3Ccircle cx='-83.4' cy='-83.4' r='1.8'/%3E%3Ccircle cx='-45.2' cy='-109' r='1.8'/%3E%3C/g%3E%3Cg fill='%23e2457f' fill-opacity='.5'%3E%3Ccircle cx='15.3' cy='-37' r='2.4'/%3E%3Ccircle cx='37' cy='-15.3' r='2.4'/%3E%3Ccircle cx='37' cy='15.3' r='2.4'/%3E%3Ccircle cx='15.3' cy='37' r='2.4'/%3E%3Ccircle cx='-15.3' cy='37' r='2.4'/%3E%3Ccircle cx='-37' cy='15.3' r='2.4'/%3E%3Ccircle cx='-37' cy='-15.3' r='2.4'/%3E%3Ccircle cx='-15.3' cy='-37' r='2.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity:.5;
  animation:turn 360s linear infinite;
  pointer-events:none;
}
#features .wrap{ position:relative; }

/* the questions, between a brass mortar with turmeric and spices and a sprig
   of fresh leaves, 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:-10px; top:190px;
    width:200px; height:175px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 210'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%23a8661a'/%3E%3Cstop offset='.3' stop-color='%23f3c463'/%3E%3Cstop offset='.55' stop-color='%23dba13a'/%3E%3Cstop offset='1' stop-color='%2393561a'/%3E%3C/linearGradient%3E%3ClinearGradient id='p' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%239c5d17'/%3E%3Cstop offset='.4' stop-color='%23f0c060'/%3E%3Cstop offset='1' stop-color='%23a5651c'/%3E%3C/linearGradient%3E%3CradialGradient id='t' cx='.5' cy='.7' r='.6'%3E%3Cstop offset='0' stop-color='%23ffd23f'/%3E%3Cstop offset='1' stop-color='%23f29a12'/%3E%3C/radialGradient%3E%3Cg id='leaf'%3E%3Cpath d='M0 0C8-9 24-11 36-3C24 6 9 6 0 0Z'/%3E%3Cpath d='M2 0C12-2 24-3 34-3' fill='none' stroke='%231f6b35' stroke-width='1' stroke-opacity='.6'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%233f9a4a'%3E%3Cuse href='%23leaf' transform='translate(52 96) rotate(-150)'/%3E%3Cuse href='%23leaf' transform='translate(56 92) rotate(-118)' fill='%234caf55'/%3E%3Cuse href='%23leaf' transform='translate(62 92) rotate(-84)' fill='%232f8a45'/%3E%3C/g%3E%3Crect x='128' y='18' width='18' height='104' rx='9' fill='url(%23p)' transform='rotate(28 137 70)'/%3E%3Cpath d='M40 104C42 150 74 176 120 176C166 176 198 150 200 104Z' fill='url(%23b)'/%3E%3Cellipse cx='120' cy='104' rx='80' ry='15' fill='%23c98a2a'/%3E%3Cellipse cx='120' cy='105' rx='68' ry='10.5' fill='%237a4512'/%3E%3Cpath d='M62 106C80 96 100 94 120 94C140 94 160 97 178 106C160 112 80 112 62 106Z' fill='url(%23t)'/%3E%3Cpath d='M40 104C42 150 74 176 120 176C166 176 198 150 200 104' fill='none' stroke='%237a4512' stroke-width='1.4' stroke-opacity='.5'/%3E%3Cpath d='M60 128C70 150 92 162 116 164' fill='none' stroke='%23fff3c8' stroke-width='4' stroke-linecap='round' stroke-opacity='.55'/%3E%3Cpath d='M92 174L86 190H154L148 174Z' fill='%23b97a24'/%3E%3Cellipse cx='120' cy='190' rx='38' ry='5' fill='%2393561a'/%3E%3Cg transform='translate(160 186) rotate(-10)'%3E%3Crect x='0' y='-5' width='58' height='9' rx='4.5' fill='%23a0522d'/%3E%3Crect x='0' y='-5' width='58' height='3' rx='1.5' fill='%23c56a3c'/%3E%3Crect x='6' y='4' width='54' height='9' rx='4.5' fill='%238b4424'/%3E%3Crect x='6' y='4' width='54' height='3' rx='1.5' fill='%23b65f33'/%3E%3C/g%3E%3Cg transform='translate(46 190)' fill='%238a2f1e'%3E%3Cpath d='M0-14L4-4L14-6L6 2L10 12L0 6L-10 12L-6 2L-14-6L-4-4Z'/%3E%3Ccircle r='3.4' fill='%235e1d12'/%3E%3C/g%3E%3Cg fill='%2386b35a' stroke='%235f8f3a' stroke-width='1'%3E%3Cellipse cx='22' cy='176' rx='7' ry='4.4' transform='rotate(-24 22 176)'/%3E%3Cellipse cx='74' cy='198' rx='7' ry='4.4' transform='rotate(14 74 198)'/%3E%3Cellipse cx='206' cy='200' rx='6.5' ry='4.2' transform='rotate(-8 206 200)'/%3E%3C/g%3E%3Cellipse cx='128' cy='202' rx='24' ry='3.6' fill='%23ffb627' fill-opacity='.7'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  #faq .wrap::after{
    inset-inline-end:16px; top:150px;
    width:120px; height:223px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 260'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%2366c26a'/%3E%3Cstop offset='1' stop-color='%232f8a45'/%3E%3C/linearGradient%3E%3Cpath id='l' d='M0 0C10-10 30-12 44-3C30 7 11 7 0 0Z'/%3E%3C/defs%3E%3Cpath d='M70 252C66 200 60 150 72 100C80 66 90 40 100 14' fill='none' stroke='%233f7d3a' stroke-width='3' stroke-linecap='round'/%3E%3Cg fill='url(%23g)'%3E%3Cuse href='%23l' transform='translate(68 222) rotate(200)'/%3E%3Cuse href='%23l' transform='translate(68 214) rotate(-25)'/%3E%3Cuse href='%23l' transform='translate(65 182) rotate(195)'/%3E%3Cuse href='%23l' transform='translate(66 174) rotate(-30)'/%3E%3Cuse href='%23l' transform='translate(66 142) rotate(190)'/%3E%3Cuse href='%23l' transform='translate(68 134) rotate(-35)'/%3E%3Cuse href='%23l' transform='translate(72 104) rotate(188)'/%3E%3Cuse href='%23l' transform='translate(75 96) rotate(-40)'/%3E%3Cuse href='%23l' transform='translate(82 70) rotate(196) scale(.85)'/%3E%3Cuse href='%23l' transform='translate(86 62) rotate(-45) scale(.85)'/%3E%3Cuse href='%23l' transform='translate(93 38) rotate(205) scale(.7)'/%3E%3Cuse href='%23l' transform='translate(96 32) rotate(-50) scale(.7)'/%3E%3Cuse href='%23l' transform='translate(100 14) rotate(-75) scale(.6)'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.9'%3E%3Ccircle cx='104' cy='22' r='3.2'/%3E%3Ccircle cx='96' cy='44' r='2.6'/%3E%3Ccircle cx='110' cy='40' r='2.4'/%3E%3C/g%3E%3Cg fill='%23ffc93c'%3E%3Ccircle cx='104' cy='22' r='1.2'/%3E%3Ccircle cx='96' cy='44' r='1'/%3E%3Ccircle cx='110' cy='40' r='1'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  }
}

@media (max-width:620px){
  .ritus{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-visual .phone{ width:calc(var(--dial) * .34); }
}

/* 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; }
}
/* in one column the text stands above the landscape and needs no mist, but
   the heading still needs light behind it where the sky is deepest */
@media (max-width:980px){
  /* the words stand high in the sky here, so it pales sooner below them */
  .hero{
    background:
      radial-gradient(60% 50% at var(--light-x, 80%) 8%, rgba(255,250,225,.5), transparent 70%),
      linear-gradient(180deg, #3d9be6 0, #7cc2f3 150px, #b6dff9 340px, #d6eefc 640px, #e9f6fd 100%);
  }
  .hero-copy::before{ display:none; }
  .hero h1{ position:relative; }
  .hero h1::before{
    content:"";
    position:absolute;
    inset:-46% -34%;
    z-index:-1;
    background:radial-gradient(closest-side, rgba(242,249,254,.96), rgba(242,249,254,.9) 62%, rgba(242,249,254,0));
    pointer-events:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .ornament .arc, .ornament .mark{ animation:none; opacity:1; }
  .ornament .hand, .ornament .sun, .ornament .lotus, .cloud, .sky-sun .rays, #features::before, #day .split-shots::after{ animation:none; }
}

@media print{
  #doshas::before, #features::before, #day .split-shots::after, #faq .wrap::before, #faq .wrap::after{ display:none; }
}