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


/* ==========================================================================
   michalindra.com's 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.

   A circuit board in a calm green: the canvas is the board, a green so dark
   it is nearly black, yet light enough for the black icons to show their
   edges; the accent is the green of a lit trace, and the current running
   along the traces is almost white. Each app card still glows faintly in
   its icon's own colour.
   ========================================================================== */

:root{
  --bg:          #07110d;
  --ink:         #eef6f1;
  --muted:       rgba(222,240,230,.70);
  --faint:       rgba(222,240,230,.58);
  --ghost:       rgba(222,240,230,.54);
  --line:        rgba(150,225,185,.13);
  --line-soft:   rgba(150,225,185,.075);
  --panel:       rgba(150,225,185,.032);

  --accent:      #62c99a;
  --accent-rgb:  98,201,154;
  --on-accent:   #03140c;
  --accent-text: #6fd3a5;
  --tint-rgb:    205,245,225;
  --spark:       #e6fff2;   /* the current in the traces */
  --chip:        #0d1f17;   /* the chip, a shade above the board */
}


/* ---------- the mark: a node with three traces ---------- */

.mark{
  display:grid; place-items:center;
  flex:none;
  width:34px; height:34px;
  border-radius:10px;
  background:var(--chip);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.18);
}
.mark svg{ display:block; width:26px; height:26px; }
.foot-brand .mark{ width:40px; height:40px; border-radius:11px; }
.foot-brand .mark svg{ width:30px; height:30px; }


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

.hero::before{
  inset:-25% -10% auto; height:105%;
  background:
    radial-gradient(40% 60% at 74% 30%, rgba(var(--accent-rgb),.13), transparent 70%),
    radial-gradient(50% 70% at 20% 0, rgba(var(--accent-rgb),.06), transparent 70%);
}
.hero h1 em{ text-shadow:0 0 60px rgba(var(--accent-rgb),.32); }
.hero-note a{ color:var(--muted); }

/* the store badges in the hero name what they open */
.store-pair{
  display:flex; flex-wrap:wrap; gap:14px 18px;
  margin-top:34px;
}
.store-pair .badge{ padding:0; }
.store-pair .badge img{ height:46px; }


/* ---------- the apps wired to a chip ---------- */

/* A circuit board: the chip in the middle, the twelve apps round it, each
   on a trace from one of the chip's pins. Sparks of current run out along
   the traces, each at its own pace; they are a second picture laid over
   the first, so only they are redrawn while they run. The icons are a
   picture of the list below, so they are hidden from screen readers and
   from the tab order; a mouse can still click one, and pointing at an app
   lights up its trace. */
.board{
  --dial: clamp(420px, 44vw, 600px);
  position:relative;
  width:var(--dial); height:var(--dial);
  margin-inline:auto;
}
/* under it all, the board itself: rows of solder points, and the glow of
   the chip, fading out towards the edges */
.board::before{
  content:"";
  position:absolute; inset:-4%;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb),.22), transparent 32%),
    radial-gradient(circle, rgba(var(--accent-rgb),.30) 0 1px, transparent 1.6px) 50% 50% / calc(var(--dial) / 24) calc(var(--dial) / 24);
  -webkit-mask-image:radial-gradient(closest-side, #000 45%, transparent);
          mask-image:radial-gradient(closest-side, #000 45%, transparent);
  pointer-events:none;
}
.board svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible;
}
.board-wires .traces path,
.board-wires .stubs{
  fill:none;
  stroke:rgba(var(--accent-rgb),.45);
  stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .3s var(--ease);
}
.board-wires .stubs{ stroke:rgba(var(--accent-rgb),.24); }
.board-wires .pins{ fill:none; stroke:rgba(var(--accent-rgb),.6); stroke-width:7; }
.board-wires .parts rect{ fill:var(--chip); stroke:rgba(var(--accent-rgb),.42); stroke-width:1.6; }
.board-wires .chip{ fill:var(--chip); stroke:rgba(var(--accent-rgb),.6); stroke-width:1.6; }
.board-wires .chip-in{ fill:none; stroke:rgba(var(--accent-rgb),.16); stroke-width:1.2; }
.board-wires .chip-label{
  fill:rgba(var(--accent-rgb),.78);
  font:650 11.5px var(--font);
  letter-spacing:.3em;
}
.board-wires .vias circle{ fill:var(--bg); stroke:rgba(var(--accent-rgb),.42); stroke-width:2.2; }
.board-wires .pads circle{ fill:var(--bg); stroke:rgba(var(--accent-rgb),.7); stroke-width:2.4; }

/* the current: a short spark that runs from the chip to the end of its
   trace, then rests while the others run */
.board-current path,
.trace-rule .spark{
  fill:none;
  stroke-linecap:round;
  stroke-dasharray:6 200;
  stroke-dashoffset:12;
  animation:current var(--d, 9s) linear var(--dl, 0s) infinite;
}
.board-current .halo path{ stroke:rgba(var(--accent-rgb),.32); stroke-width:9; }
.board-current .core path{ stroke:var(--spark); stroke-width:2.8; }
@keyframes current{
  0%{ stroke-dashoffset:12; }
  55%, 100%{ stroke-dashoffset:-110; }
}

.board-app{
  position:absolute;
  left:calc(var(--x) - 7%); top:calc(var(--y) - 7%);
  width:14%; height:14%;
  border-radius:23%;
}
.board-app picture{ display:block; width:100%; height:100%; }
.board-app img{
  display:block; width:100%; height:100%;
  border-radius:23%;
  box-shadow:0 0 0 1px rgba(var(--tint-rgb),.16), 0 12px 30px -6px rgba(0,0,0,.85);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.board-app:hover img{
  transform:scale(1.1);
  box-shadow:0 0 0 1.5px rgba(var(--accent-rgb),.75), 0 0 30px -4px rgba(var(--accent-rgb),.6);
}
/* pointing at an app lights up the trace to it */
.board:has(.a-ezomanager:hover) .t-ezomanager,
.board:has(.a-conceplanner:hover) .t-conceplanner,
.board:has(.a-luniphase:hover) .t-luniphase,
.board:has(.a-saucervia:hover) .t-saucervia,
.board:has(.a-tattvas:hover) .t-tattvas,
.board:has(.a-imparial:hover) .t-imparial,
.board:has(.a-bodyclock:hover) .t-bodyclock,
.board:has(.a-archakras:hover) .t-archakras,
.board:has(.a-tattvas-macos:hover) .t-tattvas-macos,
.board:has(.a-smsspamfilter:hover) .t-smsspamfilter,
.board:has(.a-ayuwatcher:hover) .t-ayuwatcher,
.board:has(.a-qrpayments:hover) .t-qrpayments{ stroke:var(--spark); }


/* ---------- the list of apps ---------- */

.filter{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:8px 8px;
  margin-top:34px;
}
.filter[hidden]{ display:none; }
.filter-label{
  margin-inline-end:6px;
  color:var(--faint);
  font-size:.84rem;
}
.filter button{
  padding:7px 15px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font:inherit; font-size:.86rem; font-weight:550;
  cursor:pointer;
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.filter button:hover{ color:var(--accent-text); border-color:rgba(var(--accent-rgb),.42); }
.filter button[aria-pressed="true"]{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
}
.filter-count{
  margin-inline-start:6px;
  color:var(--ghost);
  font-size:.82rem;
  font-variant-numeric:tabular-nums;
}

.group{ margin-top:clamp(48px,6vw,72px); }
.group[hidden]{ display:none; }
.group-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line-soft);
}
.group-head h3{
  font-size:clamp(1.3rem,2.2vw,1.65rem);
  letter-spacing:-.02em;
}
.group-head p{
  color:var(--faint);
  font-size:.95rem;
  line-height:1.5;
}

.apps{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));
  gap:14px;
  margin-top:22px;
}

.app{
  --glow: var(--accent-rgb);
  position:relative;
  display:flex; flex-direction:column;
  padding:24px 22px 20px;
  border:1px solid var(--line);
  border-radius:22px;
  background:
    radial-gradient(90% 60% at 0 0, rgba(var(--glow),.09), transparent 62%),
    var(--panel);
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.app:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--glow),.38);
}
.app[hidden]{ display:none; }

.app-top{ display:flex; align-items:center; gap:16px; }
.app-icon{ flex:none; display:block; border-radius:23%; }
.app-icon img{
  display:block;
  width:64px; height:64px;
  border-radius:23%;
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 10px 24px -8px rgba(0,0,0,.9);
}
.app h4{
  font-family:var(--display);
  font-size:1.2rem;
  letter-spacing:-.02em;
  line-height:1.2;
}
.app h4 a{ text-decoration:none; }
.app h4 a:hover{ color:rgb(var(--glow)); }
.app-kind{
  margin-top:4px;
  color:var(--faint);
  font-size:.86rem;
  line-height:1.35;
}
.app-desc{
  margin-top:16px;
  color:var(--muted);
  font-size:.94rem;
  line-height:1.62;
  text-wrap:pretty;
}

.os{
  list-style:none;
  display:flex; flex-wrap:wrap;
  gap:6px;
  margin-top:16px;
}
.os li{
  padding:3px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-size:.74rem; font-weight:550;
  letter-spacing:.01em;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.os .os-google{ border-color:rgba(var(--tint-rgb),.07); background:rgba(var(--tint-rgb),.04); }

/* the badges: Apple asks for at least 40 pixels, and Google for its badge
   to be no smaller than any other store's beside it */
.app-get{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:12px;
  margin-top:auto;
  padding-top:20px;
}
.app-get .badge{ padding:0; border-radius:8px; }
.app-get .badge img{ height:40px; }
/* an app with no website of its own may have a note in its place, at the
   foot of the card */
.app-note{
  margin:18px -22px -20px;
  padding:13px 22px 14px;
  border-top:1px solid var(--line-soft);
  color:var(--faint);
  font-size:.88rem;
}

.app-web{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:18px -22px -20px;
  padding:13px 22px 14px;
  border-top:1px solid var(--line-soft);
  border-radius:0 0 21px 21px;
  color:var(--muted);
  font-size:.88rem;
  text-decoration:none;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.app-web span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-web .ico{ font-size:1rem; flex:none; }
.app-web:hover{ color:rgb(var(--glow)); background:rgba(var(--glow),.05); }

/* the game, wide */
.app-wide{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:0;
  padding:0;
  overflow:hidden;
}
/* the whole feature graphic, never cropped (its name is on the right): it
   sits in the middle of the column, and its top and bottom fade into a sky
   of the same dark */
.app-wide .app-art{
  position:relative;
  display:flex; align-items:center;
  background:
    radial-gradient(60% 55% at 32% 50%, rgba(var(--glow),.10), transparent 70%),
    #04050a;
}
.app-wide .app-art picture{ display:block; width:100%; }
.app-wide .app-art img{
  display:block;
  width:100%; height:auto;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.app-wide .app-body{
  display:flex; flex-direction:column;
  padding:28px 28px 20px;
}
.app-wide .app-web{ margin:18px -28px -20px; padding-inline:28px; border-radius:0 0 21px 0; }

/* The parts of the cards line up across each row: every card takes five
   rows of the list's grid (its name, the description, the systems, the
   store badges and its website) and lays its parts on them, so the badges
   of the cards side by side sit at one height however long each
   description is. The rows keep the list's gap, which the margins below
   make up to the spacing of a single card. A browser without subgrid keeps
   the badges at the foot of each card instead. */
@supports (grid-template-rows: subgrid){
  .apps .app:not(.app-wide){
    display:grid;
    grid-row:span 5;
    grid-template-rows:subgrid;
  }
  .apps .app:not(.app-wide) > *{ align-self:start; }
  .apps .app:not(.app-wide) .app-desc,
  .apps .app:not(.app-wide) .os{ margin-top:2px; }
  .apps .app:not(.app-wide) .app-get{ margin-top:0; padding-top:6px; }
  .apps .app:not(.app-wide) .app-web,
  .apps .app:not(.app-wide) .app-note{ grid-row:5; align-self:end; margin-top:4px; }
}


/* ---------- the two stores ---------- */

.store-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:44px;
}
.store-card{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:14px;
  padding:30px 30px 26px;
  border:1px solid var(--line);
  border-radius:24px;
  background:
    radial-gradient(100% 120% at 0 0, rgba(var(--accent-rgb),.07), transparent 60%),
    var(--panel);
  text-decoration:none;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.store-card:hover{ transform:translateY(-3px); border-color:rgba(var(--accent-rgb),.38); }
.store-card img{ display:block; height:46px; width:auto; }
.store-card h3{ margin-top:8px; font-size:1.35rem; letter-spacing:-.02em; }
.store-card p{ color:var(--muted); font-size:.98rem; line-height:1.6; }
.store-card .go{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:auto;
  padding-top:6px;
  color:var(--accent-text);
  font-size:.92rem; font-weight:600;
}
.store-note{
  margin-top:18px;
  color:var(--faint);
  font-size:.88rem;
  text-align:center;
}


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

/* a trace across the top of the footer, lying on its border line and
   jumping up to a second level twice, with a spark running along it; the
   picture keeps its size and the border carries the line on either side */
.trace-rule{
  position:absolute; top:-26.5px; left:0; right:0;
  height:40px;
  overflow:hidden;
  pointer-events:none;
}
.trace-rule svg{
  position:absolute; top:0; left:50%;
  width:1200px; height:40px;
  transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(to right, transparent 4%, #000 24%, #000 76%, transparent 96%);
          mask-image:linear-gradient(to right, transparent 4%, #000 24%, #000 76%, transparent 96%);
}
.trace-rule .line{
  fill:none;
  stroke:rgba(var(--accent-rgb),.4);
  stroke-width:1.5;
  stroke-linejoin:round;
}
.trace-rule .dots circle{ fill:var(--bg); stroke:rgba(var(--accent-rgb),.6); stroke-width:1.5; }
.trace-rule .spark{ --d:11s; stroke:var(--spark); stroke-width:2.2; stroke-dasharray:3 200; }

.foot-grid{ grid-template-columns:1.3fr 1.4fr .8fr; }
.foot-col.two ul{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; }
.foot-brand .brand{ gap:12px; }


/* ---------- the 404 page ---------- */

.lost{
  min-height:calc(100vh - 220px);
  display:grid; place-items:center;
  padding:80px 0;
  text-align:center;
}
.lost h1{ margin-top:20px; font-size:clamp(2.2rem,5vw,3.6rem); }
.lost p:not(.eyebrow){ max-width:520px; margin:18px auto 0; color:var(--muted); font-size:1.05rem; line-height:1.7; }
.lost + .site-foot{ padding-top:0; }
.lost .btn-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:30px; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink);
  font-weight:600;
  text-decoration:none;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover{ border-color:rgba(var(--accent-rgb),.5); color:var(--accent-text); }
.btn-solid{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn-solid:hover{ color:var(--on-accent); box-shadow:0 10px 26px rgba(var(--accent-rgb),.28); }


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

@media (max-width:980px){
  .board{ --dial: min(520px, calc(100vw - 2 * var(--gutter))); margin-top:12px; }
  .store-pair{ justify-content:center; }
  .app-wide{ grid-template-columns:1fr; }
  .app-wide .app-art img{ -webkit-mask-image:none; mask-image:none; }
  .app-wide .app-web{ border-radius:0 0 21px 21px; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:620px){
  /* the base hides an app's name in the header on a phone; here the name is the point */
  .site-head .brand span{ display:inline; }
  .site-head .brand .mark{ display:grid; }
  .store-cards{ grid-template-columns:1fr; }
  .store-card{ padding:24px 22px 22px; }
  .store-pair .badge img{ height:44px; }
  .group-head{ flex-direction:column; gap:6px; }
  .app-wide .app-body{ padding:22px 22px 20px; }
  .app-wide .app-web{ margin:18px -22px -20px; padding-inline:22px; }
  .foot-grid{ grid-template-columns:1fr; }   /* the base says so too, but earlier */
  .foot-col.two ul{ grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion:reduce){
  .board-current, .trace-rule .spark{ display:none; }
}
@media print{
  .board-current, .trace-rule{ 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; }