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


/* ==========================================================================
   Body Clock: a spring morning in the blue-green mountains.

   The organ clock is set by the sun at its highest, so the page opens on the
   sun of noon over pastel peaks, coloured as the old blue-green paintings
   colour them: lilac far off, aqua nearer and jade cliffs at the edges, with
   white mist between them and peach trees in blossom, the tree of long life.
   Auspicious clouds drift by and two cranes cross the sun. The hand that
   goes round the dial is a small yin and yang in the colours of fire and
   water; a larger one turns slowly behind "how it works", and the gourd of
   the old Chinese apothecaries hangs beside the twelve organs.

   The five phases take the pastel tones the app gives them on a dark screen
   (Element.darkSurfaceArgb), and a deeper tone of the same colour for words.
   Metal is white there, which a light page cannot show, so here it is a
   silvery lilac.

   The drawings are plain SVG files in source/bodyclock/art; the build puts
   each one in where this file names it (art: and the file's name, in double
   braces).
   ========================================================================== */

:root{
  --bg:          #fffaf6;
  --bg-raise:    #ffffff;
  --ink:         #2c2440;
  --muted:       rgba(44,36,64,.80);
  --faint:       rgba(44,36,64,.72);
  --ghost:       rgba(44,36,64,.70);
  --line:        rgba(44,36,64,.13);
  --line-soft:   rgba(44,36,64,.08);
  --panel:       rgba(255,255,255,.82);
  --tint-rgb:    120,96,180;
  --warn:        #b3263e;
  --option-bg:   #ffffff;
  --option-ink:  #2c2440;

  --accent:      #ff8a80;     /* the coral of the sun, the app's Fire */
  --accent-rgb:  255,138,128;
  --on-accent:   #2c2440;
  --accent-text: #b82d4a;

  --phone-drop:  0 34px 70px -26px rgba(98,70,150,.5);
  --phone-glow:  0 0 90px -16px rgba(255,138,128,.55);
  --shot-shadow: 0 24px 44px -22px rgba(98,70,150,.42);

  --display: Optima, Candara, "URW Classico", "Segoe UI", "Noto Sans", sans-serif;
  --tight: -.005em;

  /* the five phases: a pastel to paint with and a deeper tone for words */
  --wood:  #81c784;  --wood-ink:  #2a7230;
  --fire:  #ff8a80;  --fire-ink:  #b82d4a;
  --earth: #ffd54f;  --earth-ink: #a95600;
  --metal: #c9c1f2;  --metal-ink: #5b4f9e;
  --water: #82b1ff;  --water-ink: #275ea8;
}

.e-wood { --t: var(--wood);  --t-ink: var(--wood-ink); }
.e-fire { --t: var(--fire);  --t-ink: var(--fire-ink); }
.e-earth{ --t: var(--earth); --t-ink: var(--earth-ink); }
.e-metal{ --t: var(--metal); --t-ink: var(--metal-ink); }
.e-water{ --t: var(--water); --t-ink: var(--water-ink); }

h1, .band h2{ font-weight:700; }
.site-head{ background:color-mix(in srgb, var(--bg) 80%, transparent); }
.nav-backdrop{ background:rgba(44,36,64,.35); }


/* ---------- the sky, the sun and the mountains ---------- */

.hero{
  --range-h: max(clamp(380px, 34vw, 520px), 32.5vw);
  background:
    radial-gradient(70% 50% at 20% 0, rgba(255,255,255,.75), transparent 70%),
    linear-gradient(180deg, #e3e0ff 0, #efe2fb 26%, #fde3ee 52%, #ffe8dc 74%, #fff4e8 100%);
}
.hero::before{ display:none; }

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

/* auspicious clouds, drifting a little to and fro */
.cloud{
  position:absolute;
  aspect-ratio:236 / 84;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='24 12 230 80'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='.3' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23f3ecff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M192 78C214 82 232 76 240 62C245 52 238 44 230 47C224 50 226 58 233 57' fill='none' stroke='%23d6c4f6' stroke-width='3' stroke-linecap='round'/%3E%3Cg fill='%23d6c4f6' stroke='%23d6c4f6' stroke-width='4.4'%3E%3Ccircle cx='62' cy='62' r='22'/%3E%3Ccircle cx='102' cy='48' r='30'/%3E%3Ccircle cx='146' cy='54' r='25'/%3E%3Ccircle cx='182' cy='66' r='16'/%3E%3Crect x='40' y='60' width='158' height='24' rx='12'/%3E%3C/g%3E%3Cg fill='url(%23c)'%3E%3Ccircle cx='62' cy='62' r='22'/%3E%3Ccircle cx='102' cy='48' r='30'/%3E%3Ccircle cx='146' cy='54' r='25'/%3E%3Ccircle cx='182' cy='66' r='16'/%3E%3Crect x='40' y='60' width='158' height='24' rx='12'/%3E%3C/g%3E%3Cpath d='M64.3 66.3L64.9 66L65.5 65.6L66.1 65L66.5 64.3L66.8 63.5L67 62.5L67 61.5L66.7 60.5L66.2 59.5L65.6 58.5L64.7 57.7L63.6 57L62.3 56.5L60.9 56.2L59.5 56.2L58 56.5L56.5 57.1L55.1 57.9L53.8 59.1L52.8 60.5L52 62.1L51.5 63.9L51.3 65.8L51.5 67.8L52 69.8L52.9 71.7L54.2 73.4L55.8 74.9L57.8 76.2L59.9 77M105.5 54.5L106.3 54.1L107 53.4L107.6 52.5L108.1 51.5L108.3 50.3L108.4 49L108.1 47.7L107.5 46.3L106.7 45.1L105.6 43.9L104.2 43L102.6 42.3L100.8 41.9L98.9 41.8L97 42.1L95 42.8L93.2 43.9L91.5 45.3L90.1 47.1L89 49.2L88.2 51.6L87.9 54.1L88.1 56.7L88.8 59.3L89.9 61.8L91.5 64.1L93.6 66.2L96.1 67.9L98.9 69.1L102 69.8M143.2 59.1L142.5 58.7L141.9 58.1L141.4 57.4L141 56.6L140.8 55.6L140.8 54.6L141 53.5L141.5 52.4L142.2 51.4L143.1 50.4L144.2 49.7L145.5 49.1L147 48.8L148.5 48.7L150.1 49L151.7 49.5L153.2 50.4L154.5 51.6L155.7 53L156.6 54.7L157.2 56.6L157.5 58.7L157.3 60.8L156.8 62.9L155.9 65L154.5 66.9L152.8 68.6L150.8 69.9L148.5 70.9L146 71.5' fill='none' stroke='%23d6c4f6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter:drop-shadow(0 8px 14px rgba(150,120,210,.18));
  animation:drift-cloud 26s ease-in-out infinite alternate;
}
.cloud-a{ width:clamp(130px, 13vw, 190px); top:62%; left:41%; animation-duration:31s; }
.cloud-b{ width:clamp(110px, 11vw, 170px); top:7%; right:3%; animation-delay:-12s; }
@keyframes drift-cloud{ from{ translate:-14px 0; } to{ translate:14px 0; } }

/* mist round the words, so the peaks soften where the text stands */
.hero-copy{ position:relative; }
.hero-copy::before{
  content:"";
  position:absolute;
  inset-block:-8% -18%;
  inset-inline:-30% -22%;
  z-index:-1;
  background:radial-gradient(closest-side at 50% 56%, rgba(255,246,244,.88), rgba(255,246,244,.7) 58%, rgba(255,246,244,0));
  pointer-events:none;
}

/* the sun of noon beside the dial */
.noon-sun{
  position:absolute;
  z-index:-2;
  width:calc(var(--dial) * .3);
  left:calc(50% - var(--dial) * .62);
  top:calc(50% - var(--dial) * .5);
  overflow:visible;
  filter:drop-shadow(0 0 30px rgba(255,170,140,.55));
}
.noon-sun .halo{ fill:rgba(255,190,160,.2); }
.noon-sun .crane-body{ fill:#6b5a96; }
.noon-sun .crane-line{ fill:none; stroke:#6b5a96; stroke-width:2.4; stroke-linecap:round; }
.cloud-sun{
  z-index:-1;
  width:calc(var(--dial) * .26);
  left:calc(50% - var(--dial) * .66);
  top:calc(50% - var(--dial) * .3);
  animation-duration:22s;
}
[dir=rtl] .noon-sun{ left:auto; right:calc(50% - var(--dial) * .62); transform:scaleX(-1); }
[dir=rtl] .cloud-sun{ left:auto; right:calc(50% - var(--dial) * .66); transform:scaleX(-1); }
[dir=rtl] .cloud-a{ left:auto; right:41%; transform:scaleX(-1); }
[dir=rtl] .cloud-b{ right:auto; left:3%; transform:scaleX(-1); }

.hero h1 em{
  color:var(--accent-text);
  background:linear-gradient(90deg, #e2445c, #b4489f 52%, #5f6ee0);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
}
.eyebrow{ background:rgba(255,255,255,.62); border-color:rgba(var(--accent-rgb),.6); }
.lang-chip{ background:rgba(255,255,255,.7); border-color:rgba(var(--accent-rgb),.55); }
.hero-note{ color:var(--muted); }


/* ---------- the dial around the phone ----------
   The day as the app's dial draws it: midnight at the top, noon at the
   bottom, each organ in the pastel of its phase on a ring of white. The yin
   and yang goes round once in 72 seconds, three for each hour, and the organ
   it passes lights up for its six. */

.ornament .ticks{
  fill:none;
  stroke:rgba(91,74,138,.3);
  stroke-width:10;
  stroke-dasharray:1.6 76.42;   /* 24 ticks, one an hour */
  transform:rotate(-90deg);
  transform-origin:320px 320px;
}
.ornament .track{
  fill:none;
  stroke:rgba(255,255,255,.78);
  stroke-width:32;
  filter:drop-shadow(0 6px 14px rgba(110,84,170,.16));
}
.ornament .arc{
  fill:none;
  stroke:var(--t);
  stroke-width:20;
  stroke-linecap:round;
  opacity:.82;
  animation:lit 72s linear infinite;
}
@keyframes lit{
  0%, 8.3%{ opacity:1; filter:drop-shadow(0 0 9px var(--t)); }
  8.4%, 100%{ opacity:.82; filter:none; }
}
.ornament .sun circle{ fill:var(--accent); }
.ornament .sun path{ stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; }

.ornament .hand{
  transform-origin:320px 320px;
  animation:sweep 72s linear infinite;
}
.ornament .taiji{
  transform-box:fill-box;
  transform-origin:center;
  animation:spin 9s linear infinite;
  filter:drop-shadow(0 2px 4px rgba(98,70,150,.4));
}
.ornament .taiji .yang{ fill:#ffb8a6; }
.ornament .taiji .yin{ fill:#7186ee; }
.ornament .taiji .rim{ fill:none; stroke:#fff; stroke-width:2; }
@keyframes sweep{ to{ transform:rotate(360deg); } }
@keyframes spin{ to{ transform:rotate(360deg); } }


/* ---------- seals, numbers and cards ---------- */

.kicker::before{
  content:"";
  display:inline-block;
  width:1.25em; height:1.25em;
  margin-inline-end:.6em;
  vertical-align:-.3em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ff8a80'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='8' cy='4.9' r='2.2'/%3E%3Ccircle cx='10.95' cy='7.04' r='2.2'/%3E%3Ccircle cx='9.82' cy='10.51' r='2.2'/%3E%3Ccircle cx='6.18' cy='10.51' r='2.2'/%3E%3Ccircle cx='5.05' cy='7.04' r='2.2'/%3E%3C/g%3E%3Ccircle cx='8' cy='8' r='1.5' fill='%23ffd54f'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* the numbers on a strip of white over the meadow, each in a phase's colour */
.stats{
  border:1px solid rgba(255,255,255,.95);
  border-radius:22px;
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  box-shadow:0 22px 44px -28px rgba(98,70,150,.45);
}
.stats li{ border-inline-end-color:var(--line-soft); }
.stats b{ font-family:var(--display); }
.stats li:nth-child(1) b{ color:var(--fire-ink); }
.stats li:nth-child(2) b{ color:var(--wood-ink); }
.stats li:nth-child(3) b{ color:var(--earth-ink); }
.stats li:nth-child(4) b{ color:var(--water-ink); }

.step, .card, .tier, .adv, .note, .terms, .spot, .get, .lang-note{
  border-color:rgba(var(--tint-rgb),.14);
  box-shadow:0 18px 36px -28px rgba(98,70,150,.4);
}
.step, .card, .tier, .adv, .spot{ background:#fff; }
.card:hover{ background:#fff; border-color:rgba(var(--accent-rgb),.5); }
.card-accent{ background:linear-gradient(160deg, #fff0f2, #fff 62%); border-color:rgba(var(--accent-rgb),.42); }
.tier-sub{
  border-color:rgba(var(--accent-rgb),.5);
  background:
    radial-gradient(120% 80% at 50% 0, rgba(255,214,226,.7), transparent 62%),
    linear-gradient(180deg, #fff, #f6f2ff);
}
.get{
  border-color:rgba(var(--tint-rgb),.2);
  background:
    radial-gradient(90% 140% at 0 50%, rgba(200,240,220,.8), transparent 60%),
    radial-gradient(70% 140% at 100% 50%, rgba(214,206,255,.7), transparent 60%),
    #fff;
}
.qr-code{ box-shadow:0 0 0 1px var(--line); }
.note{ background:#fff7dc; border-color:#ffe39a; }
.note .ico-md{ color:var(--earth-ink); }

/* icons in rounds of the five colours, taken in turn */
.card .ico-lg, .adv .ico-md{
  box-sizing:content-box;
  padding:.38em;
  border-radius:50%;
  background:color-mix(in srgb, var(--c, var(--fire)) 30%, #fff);
  color:var(--c-ink, var(--fire-ink));
}
.adv .ico-md{ padding:.32em; }
:is(.grid-cards, .grid-adv) > :nth-child(5n+1){ --c: var(--fire);  --c-ink: var(--fire-ink); }
:is(.grid-cards, .grid-adv) > :nth-child(5n+2){ --c: var(--wood);  --c-ink: var(--wood-ink); }
:is(.grid-cards, .grid-adv) > :nth-child(5n+3){ --c: var(--water); --c-ink: var(--water-ink); }
:is(.grid-cards, .grid-adv) > :nth-child(5n+4){ --c: var(--earth); --c-ink: var(--earth-ink); }
:is(.grid-cards, .grid-adv) > :nth-child(5n+5){ --c: var(--metal); --c-ink: var(--metal-ink); }

/* the three steps numbered in the sun, fire, and yin and yang */
.step-n{ border:0; color:var(--ink); background:var(--earth); }
.step:nth-child(2) .step-n{ background:var(--fire); }
.step:nth-child(3) .step-n{ background:linear-gradient(90deg, #ffb8a6 50%, #a9b8ff 50%); }

/* the alternate bands: a wash of the pastels */
.band-alt{
  background:
    radial-gradient(55% 45% at 0 0, rgba(255,214,226,.6), transparent 70%),
    radial-gradient(45% 55% at 100% 15%, rgba(220,212,255,.65), transparent 70%),
    radial-gradient(55% 55% at 85% 100%, rgba(200,240,220,.7), transparent 70%),
    radial-gradient(45% 45% at 8% 100%, rgba(255,236,190,.55), transparent 70%),
    var(--bg);
}
/* the wash fades in and out, so the bands meet without a seam */
.band-alt::before{
  content:"";
  position:absolute; inset:0; height:auto;
  background:linear-gradient(180deg, var(--bg), rgba(255,250,246,0) 120px, rgba(255,250,246,0) calc(100% - 120px), var(--bg));
  pointer-events:none;
}
.band-alt > .wrap{ position:relative; }

/* a slow yin and yang behind "how it works": work and rest, each organ and
   its opposite */
#how{ overflow:hidden; }
#how::before{
  content:"";
  position:absolute;
  width:min(620px, 80vw);
  aspect-ratio:1;
  inset-inline-end:max(-180px, calc(50% - 760px));
  top:50%;
  translate:0 -50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-104 -104 208 208'%3E%3Ccircle r='100' fill='%23ffb8a6' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0-100A100 100 0 0 1 0 100A50 50 0 0 1 0 0A50 50 0 0 0 0-100Z' fill='%238396f2'/%3E%3Ccircle cy='-50' r='15' fill='%238396f2'/%3E%3Ccircle cy='50' r='15' fill='%23ffb8a6'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity:.16;
  animation:spin 240s linear infinite;
  pointer-events:none;
}
#how .wrap{ position:relative; }

/* the gourd of the apothecaries beside the twelve organs */
#organs .wrap{ position:relative; }
#organs .wrap::before{
  content:"";
  position:absolute;
  top:-34px; inset-inline-end:-6px;
  width:150px; height:203px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 230'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.36' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23fff2cf'/%3E%3Cstop offset='.5' stop-color='%23ffd27f'/%3E%3Cstop offset='1' stop-color='%23f4a55a'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M84 34C104 12 138 8 160 18C140 36 110 44 84 34Z' fill='%238fd6a8'/%3E%3Cpath d='M80 32C62 10 30 4 10 14C30 32 60 40 80 32Z' fill='%2374c796'/%3E%3Cpath d='M84 34C104 25 128 20 156 18M80 32C60 23 36 17 14 14' fill='none' stroke='%234f9d70' stroke-width='1.4'/%3E%3Cpath d='M84 52C84 42 86 34 91 27' fill='none' stroke='%23a8775a' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M84 52C65 52 59 68 61 82C63 94 73 100 73 108C73 114 49 124 49 158C49 190 67 214 84 214C101 214 119 190 119 158C119 124 95 114 95 108C95 100 105 94 107 82C109 68 103 52 84 52Z' fill='url(%23g)' stroke='%23e08f4c' stroke-width='1.8'/%3E%3Cellipse cx='70' cy='150' rx='8' ry='22' fill='%23fff' fill-opacity='.5'/%3E%3Cellipse cx='75' cy='76' rx='5' ry='11' fill='%23fff' fill-opacity='.45'/%3E%3Cpath d='M69 108C77 113 91 113 99 108' fill='none' stroke='%23ff7f86' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M97 110C103 128 101 146 108 162M97 110C107 122 113 134 116 152' fill='none' stroke='%23ff7f86' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='97' cy='110' r='3.6' fill='%23ff7f86'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events:none;
}
@media (min-width:981px){
  #organs h2, #organs .section-lede{ max-width:calc(100% - 190px); }
}
@media (max-width:980px){
  #organs .wrap::before{ display:none; }
}

/* each organ on a card tinted with its phase, as the app tints them */
.phases .dot,
.organs .dot{
  display:block;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--t);
}
.organs{ counter-reset:organ; }
.organs .spot{
  padding:16px 16px 17px; gap:14px;
  border-color:color-mix(in srgb, var(--t) 45%, transparent);
  background:color-mix(in srgb, var(--t) 16%, #fff);
}
.organs .spot:hover{ background:color-mix(in srgb, var(--t) 24%, #fff); }
.organs .spot-mark{
  width:44px; height:44px;
  border:2px solid var(--t);
  background:#fff;
}
.organs .spot-mark .dot{ width:16px; height:16px; }
.organs h3{ color:var(--t-ink); font-size:1.06rem; }
.organs .meta{ color:var(--t-ink); }
.phases{
  list-style:none;
  display:flex; flex-wrap:wrap; gap:8px 10px;
  margin-top:30px;
}
.phases li{
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 14px;
  padding-inline-start:10px;
  border:1px solid var(--t);
  border-radius:999px;
  background:color-mix(in srgb, var(--t) 26%, #fff);
  color:var(--t-ink);
  font-size:.88rem; font-weight:650;
}
.callout{ background:linear-gradient(90deg, #fff0f2, #f1efff); border-color:rgba(var(--accent-rgb),.45); }

.split-shots::before{
  background:
    radial-gradient(circle at 35% 40%, rgba(255,170,190,.45), transparent 55%),
    radial-gradient(circle at 65% 60%, rgba(150,190,255,.45), transparent 55%);
}
.lang-here{ background:linear-gradient(90deg, #ffe3ea, #ece8ff); }

/* a stroke of the brush in the five colours, in place of the wave */
.wave-rule{
  height:60px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='150' x2='1100' y1='0' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff8a80'/%3E%3Cstop offset='.26' stop-color='%23ffd54f'/%3E%3Cstop offset='.5' stop-color='%2381c784'/%3E%3Cstop offset='.74' stop-color='%2382b1ff'/%3E%3Cstop offset='1' stop-color='%23c9c1f2'/%3E%3C/linearGradient%3E%3Cfilter id='d' x='-2%25' y='-50%25' width='104%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04 .5' numOctaves='2' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='6'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M150 31C190 21 300 18 430 21C640 26 860 28 1060 25C960 34 760 39 560 39C400 39 260 42 150 31Z' fill='url(%23p)' filter='url(%23d)'/%3E%3Ccircle cx='1100' cy='27' r='3.4' fill='%23c9c1f2'/%3E%3C/svg%3E") center / min(1100px, 92%) 100% no-repeat;
  -webkit-mask-image:none; mask-image:none;
}
.wave-rule svg{ display:none; }

/* the footer: lilac peaks and aqua hills, and the footer in the aqua */
.site-foot{
  border-top:0;
  background:linear-gradient(180deg, #c6ebe3 0, #e2f5f0 180px, #f6f2ff 100%);
  --muted: rgba(44,36,64,.84);
  --faint: rgba(44,36,64,.8);
  --ghost: rgba(44,36,64,.76);
}
.site-foot .legal-tm{ opacity:1; }
.site-foot .wave-rule{
  top:-120px; height:150px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 140' preserveAspectRatio='none'%3E%3Cpath d='M0 110C60 70 90 40 130 46C170 52 180 96 230 92C280 88 300 30 350 26C400 22 420 84 470 88C520 92 560 60 600 66C640 72 660 104 720 100C780 96 800 50 850 44C900 38 930 90 980 92C1030 94 1060 66 1110 64C1160 62 1190 20 1240 18C1290 16 1320 80 1370 84C1420 88 1460 52 1510 50C1550 48 1580 80 1600 96V140H0Z' fill='%23ddd5f8'/%3E%3Cpath d='M0 120C80 100 140 80 200 86C260 92 300 116 380 112C460 108 500 76 560 74C620 72 660 104 740 108C820 112 860 90 920 84C980 78 1020 104 1100 110C1180 116 1220 86 1290 80C1360 74 1400 100 1470 104C1530 108 1570 96 1600 90V140H0Z' fill='%23c6ebe3'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

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

@media (max-width:620px){
  .organs{ grid-template-columns:1fr 1fr; gap:8px; }
  .organs .spot{ flex-direction:column; gap:10px; padding:14px 14px 15px; }
  .organs .spot-mark{ width:34px; height:34px; }
  .organs .spot-mark .dot{ width:12px; height:12px; }
  .organs h3{ font-size:.98rem; }
}

/* 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, and
   the sky above it no clouds but the one at the sun */
@media (max-width:980px){
  .hero-copy::before, .cloud-a, .cloud-b{ display:none; }
}
/* on a phone the dial fills the width, so the sun stands smaller at its
   corner, inside the screen */
@media (max-width:620px){
  .noon-sun{ width:calc(var(--dial) * .24); left:calc(50% - var(--dial) * .5); top:calc(50% - var(--dial) * .52); }
  [dir=rtl] .noon-sun{ left:auto; right:calc(50% - var(--dial) * .5); }
  .cloud-sun, .noon-sun .crane-far{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .ornament .arc{ animation:none; opacity:.95; }
  .ornament .hand, .ornament .taiji, #how::before, .cloud{ animation:none; }
}
@media (forced-colors:active){
  .hero h1 em{ -webkit-text-fill-color:currentColor; background:none; }
}
@media print{
  .hero h1 em{ -webkit-text-fill-color:currentColor; background:none; }
}