/* Ṛta — homepage.
   Same palette and type as the privacy and support pages, so the three read as
   one site: background #06080f, muted white text, violet accents, Cormorant
   Garamond italic for display type only.

   No third-party requests. The one webfont is served from this folder, on
   purpose: a page whose whole claim is that nothing leaves your phone must not
   call Google to draw its own title. No analytics, no tag manager, no embeds. */

@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:300;
  font-display:swap;
  src:url('fonts/cormorant-garamond-italic-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:300;
  font-display:swap;
  src:url('fonts/cormorant-garamond-italic-300-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --bg:#06080f;
  --fg:rgba(255,255,255,0.80);
  --bright:rgba(255,255,255,0.94);
  --dim:rgba(255,255,255,0.55);
  --faint:rgba(255,255,255,0.47);
  --rule:rgba(255,255,255,0.09);
  --hair:rgba(255,255,255,0.06);
  --violet:#a79ad6;
  --violet-dim:rgba(167,154,214,0.35);

  /* The five elements. Icon strokes are the app's own values, unchanged.
     The -t variants are those hues lifted to clear 4.5:1 on this background,
     which the raw values do not at text size. */
  --ether:rgba(120,108,175,0.85);  --ether-t:#8D7FBA;
  --air:rgba(50,115,85,0.95);      --air-t:#5F927E;
  --fire:rgba(155,68,40,0.85);     --fire-t:#B77863;
  --water:rgba(75,95,168,0.85);    --water-t:#7686BD;
  --earth:rgba(158,112,36,0.85);   --earth-t:#A9813D;

  --wrap:1060px;
  --measure:640px;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:400 16px/1.72 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}

/* ---- skip link ------------------------------------------------------ */

.skip{
  position:absolute;left:-9999px;top:0;z-index:10;
  background:var(--bg);color:var(--violet);
  border:1px solid var(--violet-dim);border-radius:0 0 10px 0;
  padding:12px 18px;font-size:13px;
}
.skip:focus{left:0;}

/* ---- masthead ------------------------------------------------------- */

.masthead{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--wrap);margin:0 auto;padding:26px 24px 0;
}
.mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;border:0;}
.mark img{width:22px;height:22px;border-radius:6px;display:block;}
.mark span{
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  font-style:italic;font-weight:300;font-size:22px;line-height:1;
  color:var(--bright);
}
.nav{display:flex;gap:18px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;}
.nav a{color:var(--dim);text-decoration:none;border:0;padding:12px 2px;margin:-12px 0;}
.nav a:hover,.nav a:focus-visible{color:var(--violet);}
.nav a[aria-current="page"]{color:var(--bright);}

/* ---- shared text ---------------------------------------------------- */

p{margin:0 0 16px;text-wrap:pretty;}
strong{color:var(--bright);font-weight:600;}

a{color:var(--violet);text-decoration:none;border-bottom:1px solid var(--violet-dim);}
a:hover{border-bottom-color:var(--violet);}
a:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:2px;}

.eyebrow{
  display:block;
  font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--violet);margin:0 0 12px;
}

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

.hero{
  position:relative;
  text-align:center;
  padding:64px 24px 0;
  max-width:var(--wrap);margin:0 auto;
}
/* The app's own faint glow, and nothing more than that. Decorative only. */
.hero::before{
  content:"";position:absolute;left:50%;top:120px;
  width:min(900px,100%);aspect-ratio:1/1;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(150,138,195,0.11),rgba(150,138,195,0.03) 45%,transparent 72%);
  pointer-events:none;z-index:-1;
}

h1{
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  font-weight:300;font-style:italic;
  font-size:clamp(66px,15vw,118px);line-height:0.98;
  margin:0;color:#fff;letter-spacing:.005em;
}
.hero .kicker{
  font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--faint);margin:0 0 22px;
}
.hero .tagline{
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  font-weight:300;font-style:italic;
  font-size:clamp(26px,5vw,38px);line-height:1.22;
  color:var(--bright);margin:16px auto 0;max-width:15ch;text-wrap:balance;
}
.hero .lede{
  font-size:18.5px;line-height:1.62;color:var(--fg);
  margin:26px auto 0;max-width:38ch;text-wrap:pretty;
}

.availability{
  display:inline-flex;align-items:center;gap:9px;
  margin:34px 0 0;padding:9px 18px;
  border:1px solid var(--rule);border-radius:22px;
  background:rgba(150,138,195,0.05);
  font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);
}
.availability .dot{
  width:6px;height:6px;border-radius:50%;background:var(--violet);
  box-shadow:0 0 7px rgba(167,154,214,0.85);flex:none;
}

/* ---- device frame --------------------------------------------------- */

.device{
  position:relative;
  width:100%;max-width:var(--dev,300px);margin:0 auto;
  border:1px solid rgba(255,255,255,0.13);
  border-radius:clamp(20px,7%,34px);
  padding:5px;
  background:rgba(255,255,255,0.028);
  box-shadow:0 1px 0 rgba(255,255,255,0.05) inset,
             0 30px 70px -30px rgba(0,0,0,0.9),
             0 0 0 1px rgba(0,0,0,0.5);
}
.device img{
  display:block;width:100%;height:auto;
  border-radius:clamp(16px,5.6%,28px);
  background:var(--bg);
}
.hero .device{--dev:320px;margin-top:52px;}

/* ---- generic section ------------------------------------------------ */

section{padding:0 24px;}
.band{max-width:var(--wrap);margin:0 auto;padding:96px 0 0;}
.prose{max-width:var(--measure);}
.prose.centre{margin-left:auto;margin-right:auto;text-align:center;}

h2{
  font-size:clamp(23px,3.2vw,29px);font-weight:600;line-height:1.24;
  color:var(--bright);margin:0 0 14px;letter-spacing:-0.008em;text-wrap:balance;
}
h3{font-size:16px;font-weight:600;color:var(--bright);margin:0 0 6px;}

.rule{border:0;border-top:1px solid var(--hair);margin:96px auto 0;max-width:var(--wrap);}

/* ---- the five limbs ------------------------------------------------- */

.limbs{
  list-style:none;margin:44px 0 0;padding:0;
  display:grid;gap:1px;
  grid-template-columns:repeat(5,1fr);
  background:var(--hair);
  border:1px solid var(--hair);border-radius:16px;overflow:hidden;
}
.limbs li{
  background:var(--bg);
  padding:24px 16px 22px;text-align:center;
}
.limbs .glyph{height:32px;display:flex;align-items:center;justify-content:center;margin:0 0 14px;}
.limbs .glyph svg{display:block;overflow:visible;}
.limbs .el{
  display:block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  line-height:1.4;min-height:2.8em;   /* two lines: "Water · feeling and flow"
                                         wraps where the others do not, and
                                         without this its cell sits lower */
  margin:0 0 8px;
}
.limbs .word{
  display:block;
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  font-style:italic;font-weight:300;font-size:27px;line-height:1;
  color:var(--bright);margin:0 0 10px;
}
.limbs .limb{display:block;font-size:12.5px;color:var(--dim);line-height:1.45;}
.limbs .limb small{display:block;font-size:11.5px;color:var(--faint);}

.el-ether{color:var(--ether-t)} .el-air{color:var(--air-t)}
.el-fire{color:var(--fire-t)}   .el-water{color:var(--water-t)}
.el-earth{color:var(--earth-t)}

/* ---- alternating feature rows --------------------------------------- */

/* A phone screenshot is roughly twice as tall as the text beside it, so the
   column widths are set to close that gap rather than centre a short block in a
   tall row: the prose runs at a narrower measure (more lines, taller block) and
   the device sits at about life size. */
.feature{
  display:grid;
  grid-template-columns:1fr 280px;
  gap:clamp(36px,6vw,76px);
  align-items:center;
  max-width:var(--wrap);margin:0 auto;padding:80px 0 0;
}
.feature > .prose{max-width:46ch;}
.feature.flip > .prose{order:2;}
.feature.flip > .shot{order:1;}
.feature .device{--dev:280px;}

/* ---- quiet facts ---------------------------------------------------- */

.facts{
  list-style:none;margin:40px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:16px;overflow:hidden;
}
.facts li{background:var(--bg);padding:22px 22px 20px;}
.facts p{margin:0;font-size:14.5px;line-height:1.62;color:var(--dim);}

/* ---- privacy band --------------------------------------------------- */

/* Deliberately plain: no shield, no padlock, no green tick, no badge.
   That visual grammar belongs to the software this app is unlike. */
.privacy{
  max-width:var(--wrap);margin:0 auto;padding:104px 0 0;text-align:center;
}
.privacy .claim{
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  font-style:italic;font-weight:300;
  font-size:clamp(28px,4.6vw,40px);line-height:1.3;
  color:#fff;margin:0 auto 26px;max-width:20ch;text-wrap:balance;
}
.privacy p{max-width:56ch;margin-left:auto;margin-right:auto;color:var(--dim);}

/* ---- closing -------------------------------------------------------- */

.closing{max-width:var(--measure);margin:0 auto;padding:100px 0 0;text-align:center;}
.closing .deva{
  font-size:34px;line-height:1;color:rgba(255,255,255,0.40);margin:0 0 22px;
  font-weight:400;
}
.closing p{color:var(--fg);}

.getit{max-width:var(--wrap);margin:0 auto;padding:96px 0 0;text-align:center;}
.getit h2{margin-bottom:18px;}
.getit p{color:var(--dim);max-width:44ch;margin-left:auto;margin-right:auto;}

/* ---- 404 ------------------------------------------------------------ */

/* Its own block rather than .hero: the homepage h1 is a 118px wordmark and the
   hero glow is anchored to a device shot this page does not have. */
.notfound{
  min-height:62vh;display:flex;flex-direction:column;justify-content:center;
  max-width:var(--wrap);margin:0 auto;padding:56px 24px 0;
}
.notfound h1{
  font-size:clamp(34px,7vw,46px);line-height:1.12;margin:0 0 14px;
}
.notfound p{font-size:18px;color:var(--fg);margin:0;}

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

footer{
  max-width:var(--wrap);margin:0 auto;
  padding:34px 24px 72px;
  color:var(--dim);font-size:13px;line-height:1.75;
}
footer .flinks{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0 0 18px;}
footer a{color:var(--dim);border-bottom-color:rgba(255,255,255,0.14);}
footer a:hover{color:var(--violet);}
footer .fine{color:var(--faint);font-size:12px;line-height:1.7;max-width:70ch;margin:0;}
footer .fine + .fine{margin-top:10px;}

/* ---- narrow --------------------------------------------------------- */

@media (max-width:880px){
  .feature{grid-template-columns:1fr;gap:40px;padding-top:80px;}
  .feature.flip > .prose{order:0;}
  .feature.flip > .shot{order:0;}
  .feature > .prose{max-width:var(--measure);}
  .feature .device{--dev:270px;}
  .limbs{grid-template-columns:repeat(2,1fr);}
  .limbs li:last-child{grid-column:1 / -1;}
  .band,.privacy,.closing,.getit{padding-top:80px;}
  .rule{margin-top:80px;}
}

@media (max-width:560px){
  .masthead{padding:20px 20px 0;}
  .wrap,section,footer{padding-left:20px;padding-right:20px;}
  .hero{padding:44px 20px 0;}
  .hero .lede{font-size:17px;}
  .hero .device{--dev:min(260px,72vw);margin-top:42px;}
  .limbs li{padding:20px 10px 18px;}
  .limbs .word{font-size:23px;}
  .facts li{padding:18px 18px 16px;}
}

@media (max-width:380px){
  .limbs{grid-template-columns:1fr;}
  .limbs li:last-child{grid-column:auto;}
}

@media print{
  :root{--bg:#fff;--fg:#111;--bright:#000;--dim:#555;--faint:#666;--rule:#ccc;--hair:#ddd;--violet:#333;--violet-dim:#999;}
  body{background:#fff;color:#111;font-size:11pt;}
  /* Anything hardcoded #fff on screen disappears on paper. That caught the
     privacy policy's h1 once; these three are the same shape of bug. */
  h1,.privacy .claim{color:#000;}
  .closing .deva{color:#444;}
  .hero::before{display:none;}
  .device{box-shadow:none;border-color:#ccc;}
  .masthead,.nav,.skip{display:none;}
  a{color:#111;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;}
}