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


/* ==========================================================================
   Saucervia'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.

   Deep space and the game's own colours: the cyan of the gates (Style.gate,
   0.30 0.88 1.0), the mint of Cadet and the launch button, and the coral of
   Legend and of the running clock (Style.danger, 1.0 0.32 0.36).
   ========================================================================== */

:root{
  --bg:          #05060a;
  --ink:         #f3f6fb;
  --muted:       rgba(224,233,246,.70);
  --faint:       rgba(224,233,246,.56);
  --ghost:       rgba(224,233,246,.52);
  --line:        rgba(150,214,255,.13);
  --line-soft:   rgba(150,214,255,.07);
  --panel:       rgba(150,214,255,.035);

  --accent:      #4de0ff;
  --accent-rgb:  77,224,255;
  --on-accent:   #021219;

  --mint:        #5de8a0;
  --mint-rgb:    93,232,160;
  --coral:       #ff525c;
  --coral-rgb:   255,82,92;
  --violet-rgb:  132,98,255;
  --tint-rgb:    200,230,255;
}


/* ---------- the name, as the game writes it ---------- */

.brand span{
  text-transform:uppercase;
  letter-spacing:.2em;
  font-weight:800;
  font-size:.98rem;
}
.foot-brand .brand span{ font-size:1.02rem; }


/* ---------- the sky behind the hero ---------- */

.hero::before{
  inset:-20% -10% auto; height:110%;
  background:
    radial-gradient(38% 52% at 80% 22%, rgba(var(--violet-rgb),.22), transparent 72%),
    radial-gradient(44% 60% at 58% 8%, rgba(var(--accent-rgb),.10), transparent 70%),
    radial-gradient(30% 40% at 12% 30%, rgba(var(--violet-rgb),.08), transparent 70%);
}

.stars{
  position:absolute; inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 27% 62%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 38% 9%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1px 1px at 47% 41%, rgba(200,235,255,.5), transparent 60%),
    radial-gradient(1.3px 1.3px at 58% 76%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 66% 22%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 74% 55%, rgba(220,210,255,.7), transparent 60%),
    radial-gradient(1px 1px at 83% 12%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 91% 68%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 6% 83%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 19% 44%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.3px 1.3px at 33% 88%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 52% 15%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.1px 1.1px at 61% 93%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 79% 35%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.4px 1.4px at 96% 30%, rgba(255,255,255,.65), transparent 60%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%);
  animation:twinkle 7s ease-in-out infinite alternate;
}
.stars::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 8% 30%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.2px 1.2px at 23% 7%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 43% 70%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 55% 50%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px at 70% 85%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.2px 1.2px at 87% 47%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 99% 9%, rgba(255,255,255,.55), transparent 60%);
  animation:twinkle 5s ease-in-out infinite alternate-reverse;
}
@keyframes twinkle{ from{ opacity:.55; } to{ opacity:1; } }

.hero h1 em{
  background:linear-gradient(100deg,#b9f6ff 0%,#4de0ff 42%,#7aa8ff 78%,#c6b5ff 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 0 34px rgba(var(--accent-rgb),.32));
}


/* ---------- the gate around the phone ---------- */

/* The ring of light the saucer flies through, with the four blocks that
   hold it together, as on the icon. It turns slowly; the planet and the
   rocks drift past behind it. Everything here only moves by transform, so
   none of it is redrawn while it moves. */
.gate-spin{
  position:absolute; inset:0;
  animation:gate-turn 90s linear infinite;
}
.gate-spin svg{ display:block; width:100%; height:100%; overflow:visible; }
@keyframes gate-turn{ to{ transform:rotate(360deg); } }

.gate .glow{ fill:none; stroke:rgba(var(--accent-rgb),.55); stroke-width:34; }
.gate .tube{ fill:none; stroke-width:16; }   /* the gradient is set on the element */
.gate .core{ fill:none; stroke:#e9fdff; stroke-width:3; opacity:.85; }
.gate .node{ fill:#8ff0ff; stroke:#e9fdff; stroke-width:2; }
.gate .node-glow{ fill:rgba(var(--accent-rgb),.6); }

.planet{
  position:absolute;
  top:2%; inset-inline-end:-4%;
  width:31%;
  z-index:0;
  animation:float-a 18s ease-in-out infinite alternate;
}
.rock{
  position:absolute;
  z-index:0;
  width:9%;
  animation:float-b 14s ease-in-out infinite alternate;
}
.rock svg, .planet svg{ display:block; width:100%; height:auto; overflow:visible; }
.rock-1{ left:4%;  top:16%; width:10%; animation-duration:16s; }
.rock-2{ left:-2%; top:66%; width:14%; animation-duration:21s; animation-delay:-6s; }
.rock-3{ right:6%; bottom:6%; width:8%; animation-duration:12s; animation-delay:-3s; }
.rock-4{ left:22%; bottom:-1%; width:6%; animation-duration:19s; animation-delay:-9s; }
@keyframes float-a{ to{ transform:translate(-10px, 14px) rotate(-3deg); } }
@keyframes float-b{ to{ transform:translate(12px, -16px) rotate(24deg); } }

.hero-visual .phone{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.13),
    0 0 0 1px rgba(0,0,0,.7),
    0 40px 90px -16px rgba(0,0,0,.9),
    0 0 120px -10px rgba(var(--accent-rgb),.45);
}
/* the screenshots are 9:16, a little shorter than the other apps' phones */
.hero-visual .phone{ width:calc(var(--dial) * .35); }


/* ---------- numbers under the hero ---------- */

.stats b{ color:var(--ink); text-shadow:0 0 28px rgba(var(--accent-rgb),.45); }


/* ---------- the four levels of mercy ---------- */

.levels .spot{ --lv: var(--accent-rgb); }
.levels .lv-cadet{  --lv: var(--mint-rgb); }
.levels .lv-pilot{  --lv: var(--accent-rgb); }
.levels .lv-ace{    --lv: 176,150,255; }
.levels .lv-legend{ --lv: var(--coral-rgb); }
.levels .spot-mark{
  border-color:rgba(var(--lv),.5);
  background:rgba(var(--lv),.08);
  color:rgb(var(--lv));
}
.levels .spot-mark svg{
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}
.levels h3{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:1rem;
  font-weight:800;
}
.levels .spot:hover{ border-color:rgba(var(--lv),.42); background:rgba(var(--lv),.04); }


/* ---------- tags: free and Premium ---------- */

.tag-premium{
  border-color:rgba(var(--violet-rgb),.5);
  color:#c9bcff;
  background:rgba(var(--violet-rgb),.1);
}


/* ---------- a stripe of hull finishes ---------- */

.finishes{
  list-style:none;
  display:flex; flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}
.finishes li{
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 13px 6px 7px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  color:var(--muted);
  font-size:.86rem;
}
.finishes i{
  width:20px; height:20px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.85), var(--c) 46%, color-mix(in srgb, var(--c) 55%, #000) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}

.hulls{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:26px;
}
.hulls li{
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
}
.hulls b{
  display:block;
  font-size:.9rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.hulls span{ display:block; margin-top:2px; color:var(--faint); font-size:.88rem; }


/* ---------- the note on flashing ---------- */

.note-flash{ border-color:rgba(var(--coral-rgb),.32); background:rgba(var(--coral-rgb),.04); }
.note-flash .ico-md{ color:var(--coral); }
.note p + p{ margin-top:10px; }


/* ---------- coral for the end of a run ---------- */

.band-legend{
  background:radial-gradient(60% 70% at 85% 50%, rgba(var(--coral-rgb),.07), transparent 70%);
}
.band-legend .split-shots::before{ background:radial-gradient(circle at 50% 45%, rgba(var(--coral-rgb),.18), transparent 66%); }

.band-courses{
  background:radial-gradient(60% 70% at 12% 40%, rgba(var(--violet-rgb),.09), transparent 70%);
}


@media (max-width:620px){
  .hulls{ grid-template-columns:1fr; }
  .hero-visual .phone{ width:calc(var(--dial) * .44); }
}

@media (prefers-reduced-motion:reduce){
  .stars, .stars::after, .gate-spin, .planet, .rock{ animation: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; }