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


/* ==========================================================================
   AR Chakras' own look. Everything above this line is the shared base of
   the app websites, copied unchanged from PaidEsotericism/webs (see
   tools/refresh-base-css.sh); everything below is this page's theme.

   The seven chakras give the page its colours, in the hues the app draws
   them in, on the deep violet night of its icon. The page climbs them as it
   goes down: each part takes the colour of the next chakra, from the root
   at How it works to the crown at Price. A class names it (c-root ...
   c-crown) and sets the accent that the shared base paints labels, icons,
   borders and focus rings with. Things that come in sets wear one chakra
   each: the steps, the exercises, the screens, the numbers under the hero.
   Where the family's sites draw a wave, this one sets seven points on a
   line. The app's own yellow stays the accent everywhere else.
   ========================================================================== */

:root{
  --bg:          #06050c;
  --ink:         #f6f3fb;
  --muted:       rgba(236,230,248,.70);
  --faint:       rgba(236,230,248,.56);
  --ghost:       rgba(236,230,248,.52);
  --line:        rgba(214,190,255,.13);
  --line-soft:   rgba(214,190,255,.07);
  --panel:       rgba(214,190,255,.035);

  --accent:      #ffd600;
  --accent-rgb:  255,214,0;
  --accent-text: #ffd600;
  --on-accent:   #0b0814;
  --tint-rgb:    230,215,255;

  /* the seven chakras, root to crown, and the same as numbers for tints.
     Each is at least 6:1 against the night, so each can colour small text. */
  --root:    #ff4d5e;  --root-rgb:   255,77,94;
  --sacral:  #ff9a3c;  --sacral-rgb: 255,154,60;
  --solar:   #ffe14d;  --solar-rgb:  255,225,77;
  --heart:   #4ee38a;  --heart-rgb:  78,227,138;
  --throat:  #4fd8ff;  --throat-rgb: 79,216,255;
  --brow:    #6f82ff;  --brow-rgb:   111,130,255;
  --crown:   #c06bff;  --crown-rgb:  192,107,255;
  --spectrum: var(--root), var(--sacral), var(--solar), var(--heart), var(--throat), var(--brow), var(--crown);

  --deva: "Kohinoor Devanagari", "Devanagari Sangam MN", "Devanagari MT", "Nirmala UI",
          "Noto Sans Devanagari", "Mangal", sans-serif;
}

/* one chakra's colour as the accent of a part of the page */
.c-root  { --accent:var(--root);   --accent-rgb:var(--root-rgb);   --accent-text:var(--root); }
.c-sacral{ --accent:var(--sacral); --accent-rgb:var(--sacral-rgb); --accent-text:var(--sacral); }
.c-solar { --accent:var(--solar);  --accent-rgb:var(--solar-rgb);  --accent-text:var(--solar); }
.c-heart { --accent:var(--heart);  --accent-rgb:var(--heart-rgb);  --accent-text:var(--heart); }
.c-throat{ --accent:var(--throat); --accent-rgb:var(--throat-rgb); --accent-text:var(--throat); }
.c-brow  { --accent:var(--brow);   --accent-rgb:var(--brow-rgb);   --accent-text:var(--brow); }
.c-crown,
.c-all   { --accent:var(--crown);  --accent-rgb:var(--crown-rgb);  --accent-text:var(--crown); }

/* all seven at once, as a word */
.hero h1 em,
.band-chakras .kicker{
  width:fit-content;
  background:linear-gradient(90deg, var(--spectrum));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}


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

/* the way in wears all seven; each link turns the colour of its part */
.btn-mini{
  background:linear-gradient(90deg, var(--spectrum));
  color:var(--on-accent);
}
.btn-mini:hover{ box-shadow:0 10px 26px -6px rgba(var(--crown-rgb),.5), 0 6px 22px -8px rgba(var(--sacral-rgb),.5); }
.site-nav a[href="#how"]      { --hc:var(--root); }
.site-nav a[href="#chakras"]  { --hc:var(--crown); }
.site-nav a[href="#exercises"]{ --hc:var(--solar); }
.site-nav a[href="#pace"]     { --hc:var(--heart); }
.site-nav a[href="#devices"]  { --hc:var(--throat); }
.site-nav a[href="#screens"]  { --hc:var(--brow); }
.site-nav a[href="#price"]    { --hc:var(--crown); }
.site-nav a[href="#privacy"]  { --hc:var(--heart); }
.site-nav a[href="#faq"]      { --hc:var(--throat); }
.site-nav a:hover{ color:var(--hc, var(--accent-text)); }


/* ---------- the hero: an aura of all seven ---------- */

.hero::before{
  inset:-20% -10% auto; height:120%;
  background:
    radial-gradient(30% 42% at 78% 20%, rgba(var(--crown-rgb),.22), transparent 72%),
    radial-gradient(24% 34% at 94% 56%, rgba(var(--throat-rgb),.10), transparent 70%),
    radial-gradient(28% 30% at 74% 68%, rgba(var(--sacral-rgb),.15), transparent 70%),
    radial-gradient(22% 26% at 52% 56%, rgba(var(--heart-rgb),.06), transparent 70%),
    radial-gradient(30% 40% at 6% 34%, rgba(var(--brow-rgb),.11), transparent 70%),
    radial-gradient(30% 26% at 22% 78%, rgba(var(--root-rgb),.09), transparent 70%);
}

.stars{
  position:absolute; inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1px 1px at 27% 62%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.4px 1.4px at 38% 9%, rgba(255,240,220,.7), transparent 60%),
    radial-gradient(1px 1px at 47% 41%, rgba(230,215,255,.5), transparent 60%),
    radial-gradient(1.3px 1.3px at 58% 76%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 66% 22%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 74% 55%, rgba(230,210,255,.7), transparent 60%),
    radial-gradient(1px 1px at 83% 12%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 91% 68%, rgba(255,225,200,.6), transparent 60%),
    radial-gradient(1px 1px at 6% 83%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.3px 1.3px at 33% 88%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 96% 30%, rgba(255,255,255,.6), transparent 60%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%);
  animation:twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle{ from{ opacity:.55; } to{ opacity:1; } }

/* a pill drawn in all seven */
.hero .eyebrow{
  border:1px solid transparent;
  background:
    linear-gradient(#0d0a18, #0d0a18) padding-box,
    linear-gradient(90deg, var(--spectrum)) border-box;
  color:var(--ink);
}
.hero .eyebrow .ico{ color:var(--crown); }

/* inline, so that the gradient runs on from the first line into the
   second: the root's red at the start, the crown's violet at the end */
.hero h1 em{
  display:inline;
  text-shadow:none;
  filter:drop-shadow(0 0 30px rgba(var(--crown-rgb),.28));
}


/* ---------- the ring and the seven chakras ---------- */

/* As on the icon, a ring of light around the phone, here in the seven
   colours: each chakra sits on its own colour up the left of the ring, from
   the root at the bottom to the crown at the top. They light up one after
   another, and a spark of light climbs the ring with them; only transform
   and opacity move. */
.ornament .halo{
  position:absolute; inset:10%;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(var(--crown-rgb),.20), transparent 52%),
    radial-gradient(circle at 26% 74%, rgba(var(--root-rgb),.13), transparent 52%),
    radial-gradient(circle at 20% 50%, rgba(var(--heart-rgb),.08), transparent 50%),
    radial-gradient(circle, rgba(var(--brow-rgb),.12), transparent 70%);
  filter:blur(10px);
}
.chakra-ring,
.spark{
  --ring: calc(var(--dial) * .82);
  position:absolute;
  left:calc(50% - var(--ring) / 2); top:calc(50% - var(--ring) / 2);
  width:var(--ring); height:var(--ring);
}
.chakra-ring::before,
.chakra-ring::after{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  /* the conic gradient starts at the bottom, where the root sits, and
     climbs the left side to the crown at the top; the right side falls
     back from violet through rose to red */
  background:conic-gradient(from 180deg,
    var(--root), var(--sacral) 30deg, var(--solar) 60deg, var(--heart) 90deg,
    var(--throat) 120deg, var(--brow) 150deg, var(--crown) 180deg,
    #ff5fb0 270deg, var(--root) 360deg);
  -webkit-mask-image:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px), #000 100%);
          mask-image:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px), #000 100%);
}
.chakra-ring::before{
  inset:-10px;
  -webkit-mask-image:radial-gradient(farthest-side, transparent calc(100% - 30px), #000 calc(100% - 18px), #000 calc(100% - 12px), transparent 100%);
          mask-image:radial-gradient(farthest-side, transparent calc(100% - 30px), #000 calc(100% - 18px), #000 calc(100% - 12px), transparent 100%);
  filter:blur(12px);
  opacity:.7;
}

/* the spark: it reaches each chakra as that one lights up */
.spark{ animation:climb 10.5s linear infinite; }
.spark::after{
  content:"";
  position:absolute; left:50%; top:0;
  width:12px; height:12px;
  margin:-3px 0 0 -6px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 10px 3px rgba(255,255,255,.8), 0 0 30px 10px rgba(var(--crown-rgb),.45);
}
@keyframes climb{
  0%    { transform:rotate(180deg); opacity:0; }
  7%    { transform:rotate(180deg); opacity:1; }
  92.7% { transform:rotate(360deg); opacity:1; }
  100%  { transform:rotate(360deg); opacity:0; }
}

.chakra-arc{
  list-style:none;
  margin:0; padding:0;
  position:absolute; inset:0;
}
.chakra-arc li{
  --r: calc(var(--dial) * .41);
  --s: calc(var(--dial) * .088);
  position:absolute;
  left:calc(50% - var(--s) / 2); top:calc(50% - var(--s) / 2);
  width:var(--s); height:var(--s);
  /* the root at the bottom, the crown at the top, up the left of the ring */
  transform:rotate(calc(90deg + var(--i) * 30deg)) translateX(var(--r)) rotate(calc(-90deg - var(--i) * 30deg));
}
.chakra-arc .disc{
  position:relative;
  display:grid; place-items:center;
  width:100%; height:100%;
  border-radius:50%;
  /* a sheen of light over the solid colour, deepening at the rim */
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 52%),
    radial-gradient(circle, var(--c) 58%, color-mix(in srgb, var(--c) 62%, #000) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.22), 0 0 calc(var(--s) * .45) color-mix(in srgb, var(--c) 70%, transparent);
  color:#fff;
  font-family:var(--deva);
  font-size:calc(var(--s) * .42);
  font-weight:600;
  line-height:1;
  text-shadow:0 1px 4px rgba(0,0,0,.45);
  animation:rise 10.5s ease-in-out infinite;
  animation-delay:calc(var(--i) * 1.5s);
}
/* the glow sits behind the disc, on the list item, so that it never washes
   over the disc itself */
.chakra-arc li::before{
  content:"";
  position:absolute; inset:-55%;
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--c) 70%, transparent), transparent 62%);
  opacity:0;
  animation:glow 10.5s ease-in-out infinite;
  animation-delay:calc(var(--i) * 1.5s);
}
@keyframes rise{
  0%, 16%, 100%{ transform:scale(1); }
  7%{ transform:scale(1.16); }
}
@keyframes glow{
  0%, 18%, 100%{ opacity:0; }
  7%{ opacity:.9; }
}

.ch-root  { --i:0; --c:var(--root); }
.ch-sacral{ --i:1; --c:var(--sacral); }
.ch-solar { --i:2; --c:var(--solar); }
.ch-heart { --i:3; --c:var(--heart); }
.ch-throat{ --i:4; --c:var(--throat); }
.ch-brow  { --i:5; --c:var(--brow); }
.ch-crown { --i:6; --c:var(--crown); }

.hero-visual .phone{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.13),
    0 0 0 1px rgba(0,0,0,.7),
    0 40px 90px -16px rgba(0,0,0,.9),
    0 -20px 110px -24px rgba(var(--crown-rgb),.55),
    0 30px 110px -30px rgba(var(--sacral-rgb),.45);
}


/* ---------- numbers under the hero, one colour each ---------- */

.stats{ border-top-color:transparent; }
.stats::before{
  content:"";
  position:absolute; top:-1px; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--spectrum), transparent);
  opacity:.75;
}
.stats li:nth-child(1) b{ color:var(--sacral); text-shadow:0 0 28px rgba(var(--sacral-rgb),.45); }
.stats li:nth-child(2) b{ color:var(--solar);  text-shadow:0 0 28px rgba(var(--solar-rgb),.4); }
.stats li:nth-child(3) b{
  width:fit-content; margin-inline:auto;
  padding-inline:.06em;
  background:linear-gradient(180deg, var(--crown), var(--brow), var(--throat), var(--heart), var(--solar), var(--sacral), var(--root));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  text-shadow:none;
}
.stats li:nth-child(4) b{ color:var(--throat); text-shadow:0 0 28px rgba(var(--throat-rgb),.45); }


/* ---------- every part in its own chakra ---------- */

/* a soft bloom of the part's colour, on alternate sides; it fades out
   inside the part, so no edge shows where one part meets the next */
.band:not(.band-note){
  background:radial-gradient(42% 44% at 94% 34%, rgba(var(--accent-rgb),.085), transparent 72%);
}
.band-alt:not(.band-note){
  background:
    radial-gradient(42% 44% at 6% 34%, rgba(var(--accent-rgb),.085), transparent 72%),
    linear-gradient(180deg, rgba(var(--tint-rgb),.025), transparent 60%);
}

/* each label begins with its chakra, a small point of light */
.band .kicker::before{
  content:"";
  display:inline-block;
  width:.66em; height:.66em;
  margin-inline-end:.75em;
  vertical-align:-.02em;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16), 0 0 14px rgba(var(--accent-rgb),.75);
}
.band-chakras .kicker::before{
  background:conic-gradient(var(--spectrum), var(--root));
  box-shadow:0 0 0 3px rgba(var(--tint-rgb),.1), 0 0 14px rgba(var(--crown-rgb),.6);
}

/* the three steps rise from the root */
.step{
  background:
    radial-gradient(90% 70% at 0 0, rgba(var(--accent-rgb),.09), transparent 62%),
    var(--panel);
  border-color:rgba(var(--accent-rgb),.2);
}
.step-n{ background:rgba(var(--accent-rgb),.08); }

/* seven points on a line, where the family's sites draw a wave: from the
   root on the left to the crown on the right, lighting up in turn */
.chakra-rule{
  position:absolute; top:0; left:50%;
  width:min(640px, calc(100% - 2 * var(--gutter)));
  height:16px;
  margin-top:-8px;
  padding-inline:min(72px, 9%);
  transform:translateX(-50%);
  display:flex; align-items:center; justify-content:space-between;
  pointer-events:none;
}
.chakra-rule::before{
  content:"";
  position:absolute; left:0; right:0; top:50%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--spectrum), transparent);
  opacity:.6;
}
.chakra-rule i{
  position:relative;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--c);
  box-shadow:0 0 0 4px var(--bg), 0 0 14px 2px color-mix(in srgb, var(--c) 70%, transparent);
  animation:glint 10.5s ease-in-out infinite;
  animation-delay:calc(var(--i) * 1.5s);
}
.chakra-rule i:nth-child(1){ --i:0; --c:var(--root); }
.chakra-rule i:nth-child(2){ --i:1; --c:var(--sacral); }
.chakra-rule i:nth-child(3){ --i:2; --c:var(--solar); }
.chakra-rule i:nth-child(4){ --i:3; --c:var(--heart); }
.chakra-rule i:nth-child(5){ --i:4; --c:var(--throat); }
.chakra-rule i:nth-child(6){ --i:5; --c:var(--brow); }
.chakra-rule i:nth-child(7){ --i:6; --c:var(--crown); }
@keyframes glint{
  0%, 16%, 100%{ transform:scale(1); }
  7%{ transform:scale(1.6); }
}


/* ---------- My Chakras: the seven, as the app places them ---------- */

.band.band-chakras{
  background:
    radial-gradient(34% 34% at 82% 32%, rgba(var(--crown-rgb),.13), transparent 70%),
    radial-gradient(30% 30% at 84% 52%, rgba(var(--heart-rgb),.07), transparent 70%),
    radial-gradient(34% 28% at 80% 70%, rgba(var(--root-rgb),.10), transparent 70%);
}

.chakra-list{
  list-style:none;
  display:grid;
  gap:8px;
  margin-top:26px;
}
.chakra-list li{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  align-items:center;
  gap:14px;
  padding:10px 16px 10px 10px;
  border:1px solid color-mix(in srgb, var(--c) 20%, transparent);
  border-radius:16px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--c) 13%, transparent), transparent 72%);
}
/* the seed syllable is dark on its disc: white would fade into the yellow,
   the green and the blue, and dark keeps 6:1 on all seven */
.chakra-list .dot{
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.45), rgba(255,255,255,0) 56%),
    var(--c);
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 0 18px -3px var(--c);
  color:#120d1f;
  font-family:var(--deva);
  font-size:1.12rem;
  font-weight:650;
  line-height:1;
}
.chakra-list b{ font-size:.98rem; font-weight:650; letter-spacing:-.01em; }
.chakra-list b i{ font-style:normal; font-weight:550; color:var(--c); }
.chakra-list span{ display:block; color:var(--muted); font-size:.88rem; line-height:1.45; }

/* the app's own picture for the card, framed like a painting, with the
   crown's violet above it and the root's red below */
.art{
  position:relative;
  margin:0 auto;
  width:100%;
  max-width:440px;
}
/* the glow is a shadow, which never makes the page wider on a phone */
.art img,
.art picture{
  position:relative;
  display:block;
  width:100%; height:auto;
  border-radius:28px;
}
.art img{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.14),
    0 40px 90px -20px rgba(0,0,0,.9),
    0 -36px 110px -26px rgba(var(--crown-rgb),.6),
    0 36px 110px -30px rgba(var(--root-rgb),.45),
    0 0 90px -20px rgba(var(--heart-rgb),.3);
}
.art figcaption{
  position:relative;
  margin-top:14px;
  color:var(--faint);
  font-size:.86rem;
  text-align:center;
}


/* ---------- the eight exercises, one chakra each ---------- */

.sessions{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-top:46px;
}
.session{
  display:flex; flex-direction:column;
  border:1px solid rgba(var(--accent-rgb),.3);
  border-radius:20px;
  background:var(--panel);
  overflow:hidden;
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.session:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--accent-rgb),.55);
  box-shadow:0 24px 50px -26px rgba(var(--accent-rgb),.6);
}
.session picture,
.session img{ display:block; width:100%; height:auto; aspect-ratio:1 / 1; object-fit:cover; }
.session-body{
  display:flex; flex-direction:column; gap:6px;
  flex:1;
  padding:16px 18px 18px;
  border-top:3px solid var(--accent);
  background:radial-gradient(130% 90% at 50% 0, rgba(var(--accent-rgb),.17), transparent 72%);
}
.session.c-all .session-body{ border-image:linear-gradient(90deg, var(--spectrum)) 1; }
.session h3{ font-size:1.06rem; letter-spacing:-.015em; line-height:1.3; }
.session h3::before{
  content:"";
  display:inline-block;
  width:.5em; height:.5em;
  margin-inline-end:.55em;
  vertical-align:.1em;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px rgba(var(--accent-rgb),.8);
}
.session.c-all h3::before{ background:conic-gradient(var(--spectrum), var(--root)); }
.session p{ color:var(--muted); font-size:.9rem; line-height:1.55; text-wrap:pretty; }
.session .tags{ margin-top:auto; padding-top:8px; }
.session .time{
  display:flex; flex-wrap:wrap; gap:4px 12px;
  margin-top:2px;
  color:var(--faint);
  font-size:.8rem;
  font-variant-numeric:tabular-nums;
}
.session .time b{ color:var(--muted); font-weight:600; }

/* free is the heart's green, the subscription the crown's violet, wherever
   they appear */
.tag-free{
  border-color:rgba(var(--heart-rgb),.5);
  color:var(--heart);
  background:rgba(var(--heart-rgb),.08);
}
.tag-premium{
  border-color:rgba(var(--crown-rgb),.55);
  color:#dcc2ff;
  background:rgba(var(--crown-rgb),.11);
}


/* ---------- the pace: three speeds, in the app's own colours ---------- */

.paces .spot{ --p: var(--accent-rgb); }
.paces .p-fast{ --p: 48,209,88; }
.paces .p-medium{ --p: 255,214,0; }
.paces .p-slow{ --p: 255,66,69; }
.paces .spot{
  border-color:rgba(var(--p),.22);
  background:radial-gradient(100% 120% at 0 0, rgba(var(--p),.08), transparent 60%), rgba(var(--tint-rgb),.02);
}
.paces .spot:hover{ border-color:rgba(var(--p),.45); }
.paces .spot-mark{
  border-color:rgba(var(--p),.5);
  background:rgba(var(--p),.08);
  color:rgb(var(--p));
  font-weight:800;
  font-size:1.05rem;
  font-variant-numeric:tabular-nums;
}
.paces .spot-body .lvl{
  color:rgb(var(--p));
  font-size:.74rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
}


/* ---------- iPad and Mac ---------- */

.band.band-devices{
  background:
    radial-gradient(40% 50% at 84% 42%, rgba(var(--throat-rgb),.10), transparent 70%),
    radial-gradient(34% 30% at 70% 66%, rgba(var(--brow-rgb),.09), transparent 70%);
}
.devices{
  position:relative;
  width:100%;
  max-width:600px;
  margin-inline:auto;
  aspect-ratio:1.18 / 1;
}
.devices::before{
  content:"";
  position:absolute; inset:6% 4%;
  background:
    radial-gradient(circle at 62% 38%, rgba(var(--throat-rgb),.22), transparent 60%),
    radial-gradient(circle at 34% 70%, rgba(var(--brow-rgb),.22), transparent 60%);
  filter:blur(24px);
}
/* the base is wider than the screen above it; the laptop stands in from the
   edge by as much, so that nothing reaches past the column */
.laptop{
  position:absolute; top:2%; inset-inline-end:7%;
  width:86%;
  margin:0;
}
.laptop .screen{
  padding:2.1% 2.1% 2.6%;
  border-radius:16px 16px 4px 4px;
  background:linear-gradient(160deg,#2c2c32,#0d0d10 60%,#1e1e23);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13), 0 34px 80px -24px rgba(0,0,0,.95);
}
.laptop .screen img,
.laptop .screen picture{ display:block; width:100%; border-radius:5px; }
.laptop::after{
  content:"";
  display:block;
  width:114%; height:14px;
  margin-inline-start:-7%;
  border-radius:2px 2px 16px 16px;
  background:linear-gradient(180deg,#4a4a52,#1b1b20 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 20px 40px -12px rgba(0,0,0,.9);
}
.tablet{
  position:absolute; bottom:0; inset-inline-start:0;
  z-index:2;
  width:54%;
  margin:0;
  padding:2.6%;
  border-radius:24px;
  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),
    0 34px 80px -18px rgba(0,0,0,.95);
  rotate:-3deg;
}
.tablet img,
.tablet picture{ display:block; width:100%; border-radius:12px; }
.tablet .zoom, .laptop .zoom{ border-radius:inherit; }

.reqs{
  list-style:none;
  display:grid;
  gap:10px;
  margin-top:26px;
}
.reqs li{
  display:flex; align-items:baseline; gap:12px;
  padding:12px 16px;
  border:1px solid rgba(var(--accent-rgb),.2);
  border-radius:14px;
  background:linear-gradient(90deg, rgba(var(--accent-rgb),.07), transparent 70%);
  color:var(--muted);
  font-size:.95rem;
}
.reqs b{ min-width:4.4em; color:var(--accent-text); font-weight:650; }


/* ---------- the screens, each with its own glow ---------- */

.gallery figure{ --g: var(--accent-rgb); --shot-shadow: 0 26px 60px rgba(0,0,0,.7), 0 16px 60px -14px rgba(var(--g),.85); }
.gallery figure:nth-child(7n+1){ --g: var(--crown-rgb); }
.gallery figure:nth-child(7n+2){ --g: var(--brow-rgb); }
.gallery figure:nth-child(7n+3){ --g: var(--throat-rgb); }
.gallery figure:nth-child(7n+4){ --g: var(--heart-rgb); }
.gallery figure:nth-child(7n+5){ --g: var(--solar-rgb); }
.gallery figure:nth-child(7n+6){ --g: var(--sacral-rgb); }
.gallery figure:nth-child(7n+7){ --g: var(--root-rgb); }
.gallery img{ border-color:rgba(var(--g),.3); }
.gallery figure:hover img{ border-color:rgba(var(--g),.6); }


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

/* the free part in the heart's green, the subscription in the crown's
   violet, and the way to get it framed in all seven */
.tier.c-heart{
  border-color:rgba(var(--accent-rgb),.3);
  background:
    radial-gradient(120% 90% at 50% 0, rgba(var(--accent-rgb),.08), transparent 62%),
    rgba(var(--tint-rgb),.02);
}
.get{
  border:1px solid transparent;
  background:
    radial-gradient(90% 150% at 0 50%, rgba(var(--crown-rgb),.16), transparent 60%) padding-box,
    radial-gradient(70% 150% at 100% 50%, rgba(var(--sacral-rgb),.09), transparent 60%) padding-box,
    linear-gradient(#0b0915, #0b0915) padding-box,
    linear-gradient(90deg, var(--spectrum)) border-box;
}


/* ---------- the health note ---------- */

.note-health{ border-color:rgba(255,66,69,.32); background:rgba(255,66,69,.04); }
.note-health .ico-md{ color:#ff6b6e; }
.note p + p{ margin-top:10px; }


@media (max-width:1080px){
  .sessions{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:620px){
  /* the base lets the phone grow on a narrow screen; here it stays inside
     the ring, so the crown and the root stay in sight above and below it */
  .hero-visual .phone{ width:calc(var(--dial) * .31); }
  .sessions{ grid-template-columns:1fr 1fr; gap:10px; }
  .session-body{ padding:12px 13px 14px; }
  .session h3{ font-size:.98rem; }
  .session p{ font-size:.84rem; }
  .devices{ aspect-ratio:1.1 / 1; }
  .tablet{ border-radius:16px; }
  .laptop .screen{ border-radius:10px 10px 3px 3px; }
}

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

@media (prefers-reduced-motion:reduce){
  .stars, .spark, .chakra-arc .disc, .chakra-arc li::before, .chakra-rule i{ animation:none; }
  .spark{ display:none; }
}

@media print{
  .chakra-rule, .spark{ display:none; }
}


/* ---------- footer titles, and small type that stays readable ---------- */

/* The footer's column titles are h2 on this page, so that the outline does
   not jump from the last section's h2 to an h4; they look as the base draws
   its h4 there. The small grey type is a shade lighter than the base's, to
   keep 4.5:1 against the background, and the trademark line keeps its full
   colour instead of fading further. */
.foot-col h2{
  font-family:var(--font);
  font-size:.76rem; font-weight:650;
  letter-spacing:.13em; text-transform:uppercase;
  line-height:1.08;
  color:var(--ghost);
}
.legal-tm{ opacity:1; }