/* ==========================================================================
   EzoManager
   Black canvas, white type, yellow accent. HTML and CSS only.
   ========================================================================== */

:root{
  --bg:          #000000;
  --ink:         #ffffff;
  --muted:       rgba(255,255,255,.62);
  --faint:       rgba(255,255,255,.40);
  --ghost:       rgba(255,255,255,.26);
  --line:        rgba(255,255,255,.10);
  --line-soft:   rgba(255,255,255,.06);
  --panel:       rgba(255,255,255,.028);
  --accent:      #ffd60a;
  --accent-warm: #ffc300;

  --r:       18px;
  --wrap:    1140px;
  --badge-h: 46px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:86px;
  /* keeps the room the scrollbar takes, so nothing shifts sideways when a
     gallery shot opens and the page behind stops scrolling */
  scrollbar-gutter:stable;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
              "Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; }

h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.03em; line-height:1.05; }
p{ margin:0; }

a{ color:inherit; }

::selection{ background:var(--accent); color:#000; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:8px;
}

/* the symbol library must stay in the render tree, just out of sight */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.wrap{
  width:min(var(--wrap), calc(100% - clamp(32px,8vw,80px)));
  margin-inline:auto;
}


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


/* ---------- waves ---------- */

.waves{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34%,#000 84%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 34%,#000 84%,transparent 100%);
}
.waves svg{ width:100%; height:100%; display:block; }

.w path{
  fill:none;
  stroke:var(--accent);
  stroke-width:1.4;
  vector-effect:non-scaling-stroke;
}

/* each path spans 2400 user units and every period divides 1200,
   so a 1200 unit drift loops without a seam */
@keyframes drift{ to{ transform:translateX(-1200px); } }

.w1{ opacity:.34; animation:drift 27s linear infinite; }
.w2{ opacity:.18; animation:drift 19s linear infinite; }
.w3{ opacity:.11; animation:drift 41s linear infinite; }
.w4{ opacity:.08; animation:drift 14s linear infinite; }

.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; }
.wave-rule .w{ opacity:.22; }


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

.site-head{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:24px;
  padding:13px clamp(16px,4vw,40px);
  background:rgba(0,0,0,.72);
  -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.02rem; letter-spacing:-.02em;
  text-decoration:none;
}
.brand img{ border-radius:50%; display:block; }

/* The row never breaks. When the labels stop fitting, and in twenty one
   languages that happens at different widths, the whole row gives way to the
   button instead of spilling onto a second line. */
.site-nav{
  display:flex; flex-wrap:nowrap; gap:24px;
  margin-left:auto; min-width:0;
  font-size:.9rem;
}
.site-nav a{
  color:var(--muted);
  flex:none;              /* so a squeezed row overflows rather than shrinks */
  text-decoration:none;
  white-space:nowrap;
  transition:color .25s var(--ease);
}
.site-nav a:hover{ color:var(--accent); }

/* carries nothing but the open state of the menu, see the note in the markup */
.nav-anchor{ position:fixed; top:0; left:0; width:0; height:0; }

/* the menu button, shown only once the row runs out of room */
.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); border-color:rgba(255,214,10,.42); }

.btn-mini{
  flex:none;
  padding:9px 18px;
  border-radius:999px;
  background:var(--accent);
  color:#000;
  font-size:.85rem; font-weight:600;
  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(255,214,10,.26);
}


/* ---------- language picker ---------- */

.lang-picker{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  padding:0 10px 0 12px;
  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(255,214,10,.42); color:var(--accent); }
.lang-picker .ico{ font-size:1.02rem; pointer-events:none; }

.lang-picker select{
  appearance:none; -webkit-appearance:none;
  padding:8px 22px 8px 0;
  border:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:.86rem;
  line-height:1.2;
  cursor:pointer;
  outline:none;
}
/* the chevron, drawn rather than shipped as an image */
.lang-picker::after{
  content:"";
  position:absolute; right: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;
}
/* the native dropdown paints with the OS palette, so force a dark one */
.lang-picker select option{ background:#0b0b0b; color:#fff; }


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

.hero{
  position:relative;
  overflow:hidden;
  padding:clamp(68px,11vw,132px) clamp(16px,4vw,40px) 0;
  text-align:center;
}
.hero::before{
  content:"";
  position:absolute; inset:-25% -10% auto; height:80%;
  background:radial-gradient(58% 100% at 50% 0, rgba(255,214,10,.17), transparent 68%);
  pointer-events:none;
}

.hero-inner{ position:relative; z-index:2; max-width:900px; margin-inline:auto; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 16px 7px 13px;
  border:1px solid rgba(255,214,10,.30);
  border-radius:999px;
  background:rgba(255,214,10,.05);
  color:var(--accent);
  font-size:.78rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
}
.eyebrow .ico{ font-size:.95rem; }

.hero h1{
  margin:26px 0 0;
  font-size:clamp(2.7rem,7.4vw,5.4rem);
  line-height:.98;
}
.hero h1 em{
  display:inline-block;
  font-style:normal;
  color:var(--accent);
  text-shadow:0 0 70px rgba(255,214,10,.4);
}

.lede{
  max-width:700px;
  margin:26px auto 0;
  color:var(--muted);
  font-size:clamp(1rem,1.5vw,1.12rem);
  line-height:1.68;
}

/* Display text is balanced so the lines come out even and the last one never
   carries a single orphan word. Some languages ran three lines with only one
   word on the third. Longer body copy uses pretty, which leaves the line
   breaks alone but still avoids a short last line. Both are ignored by
   browsers that do not support them, so the layout degrades to plain wrapping */
h1,
.band h2,
.lede,
.lede-line,
.section-lede,
.offline-note,
.offline-where,
.faq-item summary,
.eyebrow{
  text-wrap:balance;
}

.adv p,
.faq-ans p,
.note p,
.pf-copy p,
.step p{
  text-wrap:pretty;
}

/* the offline claim sits on its own line under the lede, led by a struck
   through signal icon. The icon is left inline rather than made a flex item,
   so it stays next to the first word instead of drifting to the left edge
   once the centred sentence wraps on a narrow screen */
.offline-note{
  max-width:640px;
  margin:16px auto 0;
  color:var(--muted);
  font-size:clamp(.92rem,1.35vw,1.01rem);
  line-height:1.6;
}
.offline-note .ico{
  margin-right:8px;
  font-size:1.16rem;
  color:var(--accent);
  vertical-align:-.2em;
}
/* sentences that need their own line. A <br> inside the string would not work,
   since app.js assigns each translation with textContent, so each one is its
   own key in its own block level span */
.offline-where,
.lede-line{ display:block; }
.lede-line{ margin-top:.5em; }

.pay-once{
  display:inline-flex; align-items:center; gap:11px;
  margin-top:26px;
  padding:10px 20px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink);
  font-size:.9rem;
}
.pay-once .ico{ font-size:1.25rem; color:var(--accent); }


/* ---------- store badges ---------- */

.store-row{
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  gap:6px 12px;
  margin-top:42px;
}

/* each store keeps its badge and its code together */
.store-row-qr{ gap:26px 44px; }
.store-pair{
  display:flex; flex-direction:column; align-items:center;
  gap:16px;
}
.qr{
  width:126px; height:126px;
  /* the code runs to the edge of its own picture, so the frame around it
     stands in for the quiet zone a scanner looks for, in the same black the
     code is printed on */
  padding:9px;
  background:#000;
  border:1px solid var(--line);
  border-radius:14px;
  display:block;
}

.badge{
  display:inline-flex; align-items:center;
  border-radius:10px;
  transition:transform .3s var(--ease), filter .3s var(--ease);
}
.badge img{ display:block; width:auto; }
.badge:hover{
  transform:translateY(-2px);
  filter:drop-shadow(0 10px 26px rgba(255,214,10,.22));
}

/* Apple ships the badge edge to edge, so the clear space is added here.
   Google bakes its clear space into the asset, which is why the two
   heights differ: both visible buttons end up the same size. */
.badge-apple{ padding:calc(var(--badge-h) * .12); }
.badge-apple img{ height:var(--badge-h); }
.badge-google img{ height:calc(var(--badge-h) / .672); }


/* ---------- stats ---------- */

.stats{
  position:relative; z-index:2;
  width:min(var(--wrap),100%);
  margin:clamp(56px,8vw,104px) auto 0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.stats li{
  padding:26px 14px;
  border-right:1px solid var(--line);
}
.stats li:last-child{ border-right:0; }
.stats b{
  display:block;
  font-size:clamp(1.45rem,3vw,2.05rem);
  font-weight:700;
  letter-spacing:-.035em;
  color:var(--accent);
}
.stats span{
  display:block;
  margin-top:5px;
  font-size:.8rem;
  color:var(--faint);
  letter-spacing:.02em;
}


/* ---------- sections ---------- */

.band{
  position:relative;
  padding:clamp(66px,9vw,124px) 0;
}
.band-alt{
  background:linear-gradient(180deg, rgba(255,255,255,.022), transparent 55%);
}
.band-note{ padding-top:0; }

.kicker{
  color:var(--accent);
  font-size:.76rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
}

.band h2{
  margin-top:16px;
  font-size:clamp(1.9rem,4.2vw,3.1rem);
}

.section-lede{
  max-width:640px;
  margin-top:20px;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.7;
}
/* 640px is the right measure for the long ledes, but a short one looks
   cramped in it, so those get more room */
.section-lede.wide{ max-width:880px; }


/* ---------- feature cards ---------- */

.grid-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:14px;
  margin-top:52px;
}

.card{
  position:relative;
  padding:28px 26px 30px;
  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; left:-30%; bottom:-45%;
  width:210px; height:210px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,214,10,.13), transparent 70%);
  opacity:0;
  transition:opacity .45s var(--ease);
  pointer-events:none;
}
.card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,214,10,.34);
  background:rgba(255,214,10,.028);
}
.card:hover::after{ opacity:1; }

.card .ico-lg{ color:var(--accent); }
.card h3{ margin:16px 0 9px; font-size:1.06rem; letter-spacing:-.02em; }
.card p{ color:var(--muted); font-size:.925rem; line-height:1.62; }

/* the uses, a second grid closing the section. Each one is a question and its
   answer, so the card leads with the question rather than with an icon. */
.use-h{
  margin:74px 0 0;
  font-size:clamp(1.45rem,3vw,1.9rem);
  letter-spacing:-.02em;
  text-wrap:balance;
}
.use-lede{ margin-top:12px; }
.use-cards{
  margin-top:30px;
  padding:0;
  list-style:none;
}
/* the questions run longer than the feature names above, so they sit a shade
   tighter than the cards they share the section with */
.use-cards h3{ font-size:1.02rem; line-height:1.4; text-wrap:pretty; }
.use-cards p{ margin-bottom:0; }

.card-accent{
  border-color:rgba(255,214,10,.32);
  background:linear-gradient(160deg, rgba(255,214,10,.075), rgba(255,214,10,.015) 60%);
}


/* ---------- planner split ---------- */

.split{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:clamp(34px,5vw,76px);
  align-items:center;
}

.steps{
  list-style:none;
  margin:34px 0 0;
  padding:0;
  display:grid;
  gap:20px;
}
.steps li{ display:flex; gap:17px; }
.step-n{
  flex:none;
  width:34px; height:34px;
  display:grid; place-items:center;
  border:1px solid rgba(255,214,10,.42);
  border-radius:50%;
  color:var(--accent);
  font-size:.84rem; font-weight:700;
}
.steps h3{ margin:5px 0 6px; font-size:1.01rem; letter-spacing:-.02em; }
.steps p{ color:var(--muted); font-size:.925rem; line-height:1.62; }

/* this line is the payoff of the Planner section, so it reads as an accent
   callout rather than the quiet footnote it used to be */
.micro{
  display:flex; align-items:center; gap:14px;
  margin-top:32px;
  padding:16px 22px;
  border:1px solid rgba(255,214,10,.32);
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,214,10,.09), rgba(255,214,10,.035));
  color:var(--ink);
  font-size:1rem; font-weight:500;
  line-height:1.55;
  text-wrap:pretty;
}
.micro .ico{ color:var(--accent); font-size:1.35rem; }

.split-shots{
  position:relative;
  width:100%;
  max-width:500px;
  margin-inline:auto;
  aspect-ratio:1 / 1.16;
}
.split-shots::before{
  content:"";
  position:absolute; inset:6% 4%;
  background:radial-gradient(circle at 50% 45%, rgba(255,214,10,.16), transparent 66%);
  filter:blur(20px);
}
.shot{
  position:absolute;
  width:47%;
  margin:0;
  border:1px solid rgba(255,255,255,.13);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 34px 74px rgba(0,0,0,.8);
}
.shot img{ display:block; width:100%; height:auto; }
.shot-back{
  right:1%; top:0;
  transform:rotate(4.5deg);
  opacity:.78;
}
.shot-front{
  left:1%; bottom:0;
  z-index:2;
  transform:rotate(-3.5deg);
}


/* ---------- how to plan ---------- */

.ht-steps{
  list-style:none;
  margin:52px 0 0;
  padding:0;
  display:grid;
  gap:30px;
}
.ht-step{
  padding:30px 28px 32px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
}

.ht-head{ display:flex; align-items:flex-start; gap:20px; }
.ht-glyph{
  flex:none;
  width:52px; height:52px;
  display:grid; place-items:center;
  border:1px solid rgba(255,214,10,.3);
  border-radius:50%;
  background:rgba(255,214,10,.05);
  color:var(--accent);
  line-height:1;
}
.ht-glyph .ico{ font-size:1.5rem; }
.ht-head h3{
  display:flex; align-items:center; gap:12px;
  font-size:1.22rem;
  letter-spacing:-.025em;
}
.ht-n{
  flex:none;
  width:24px; height:24px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--accent);
  color:#000;
  font-size:.76rem; font-weight:700;
}
.ht-head p{
  max-width:62ch;
  margin-top:10px;
  color:var(--muted);
  font-size:.94rem;
  line-height:1.65;
}

/* the body part to lunar sign correspondences */
.signs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:10px;
  margin-top:28px;
}
.sign{
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:16px 18px 17px;
  border:1px solid var(--line-soft);
  border-radius:13px;
  background:rgba(255,255,255,.022);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.sign:hover{ border-color:rgba(255,214,10,.3); background:rgba(255,214,10,.03); }
.sign .zod{
  flex:none;
  margin-top:0;
  font-size:1.95rem;
  color:var(--accent);
  stroke-width:1.5;
}
/* the text sits in its own column so the gap under the sign name is fixed,
   whether the organs run to one line or three */
.sign-txt{
  display:grid;
  align-content:start;
  gap:5px;
}
.sign b{ font-size:.95rem; font-weight:600; letter-spacing:-.01em; }
.sign-txt span{
  color:var(--muted);
  font-size:.83rem;
  line-height:1.5;
}

.ht-pair{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:10px;
}
.ht-pair li{
  display:flex; align-items:baseline; gap:12px;
  padding:15px 18px;
  border:1px solid var(--line-soft);
  border-radius:13px;
  background:rgba(255,255,255,.022);
}
.ht-pair b{ color:var(--accent); font-size:.98rem; }
.ht-pair span{ color:var(--muted); font-size:.88rem; }

.ht-extra{
  display:flex; align-items:center; gap:11px;
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--line);
  color:var(--faint);
  font-size:.88rem;
}
.ht-extra .ico{ color:var(--accent); font-size:.95rem; }

/* step four carries no description, so its badge and heading centre together
   instead of both hanging from the top */
.ht-step-final .ht-head{ align-items:center; }
.ht-step-final{
  border-color:rgba(255,214,10,.28);
  background:
    radial-gradient(120% 100% at 50% 0, rgba(255,214,10,.08), transparent 60%),
    rgba(255,255,255,.02);
}
.ht-out{
  list-style:none;
  margin:26px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(226px,1fr));
  gap:12px 26px;
}
.ht-out li{
  display:flex; align-items:center; gap:12px;
  color:var(--muted);
  font-size:.92rem;
}
.ht-out .ico{ font-size:1.15rem; color:var(--accent); }
.ht-close{
  max-width:74ch;
  margin-top:34px;
  color:var(--muted);
  font-size:.98rem;
  line-height:1.7;
}


/* ---------- gallery ---------- */

.gallery{
  /* the same column the prose keeps to, so the strip starts and ends with it */
  width:min(var(--wrap), calc(100% - clamp(32px,8vw,80px)));
  margin:50px auto 0;
  padding-bottom:14px;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.gallery::-webkit-scrollbar{ display:none; }

/* the row that carries the shots, and the part that moves */
.gallery .track{ display:flex; gap:var(--gap); width:max-content; }
.gallery{ --gap:22px; }

/* The shots roll by from right to left and never run out, so both edges are
   softened. A mask rather than a gradient laid over the top, because these
   strips sit on two band colours and a mask blends into whichever is behind. */
.gallery,
.watch-strip{
  --fade:clamp(26px,4vw,52px);   /* narrower where the column itself is narrow */
  -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%);
}

/* The roll only starts once the script has put a second copy of the shots
   behind the first, so the two ends meet and the seam never shows.

   The strip keeps its own scrolling. The roll moves the same scroll offset a
   hand would, rather than sliding the track underneath it, so the two can
   never disagree: a visitor can take hold of the strip at any moment, and the
   roll carries on from wherever they let go. */
.is-rolling{ scroll-behavior:auto; }

.gallery figure{
  flex:0 0 238px;
  margin:0;
  scroll-snap-align:center;
}
.gallery img{
  display:block;
  width:100%; height:auto;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  box-shadow:0 26px 60px rgba(0,0,0,.75);
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.gallery figure:hover img{
  transform:translateY(-5px);
  border-color:rgba(255,214,10,.34);
}

/* every screenshot is a link into the overlay below */
.zoom{ display:block; cursor:zoom-in; }

/* A frame around a strip. The arrows have to hang from something that does
   not scroll: anything placed inside the strip itself would travel away with
   the shots. The frame therefore takes over the strip's own box, and the
   strip fills it. */
.strip-wrap{ position:relative; }
.gallery-wrap{
  width:min(var(--wrap), calc(100% - clamp(32px,8vw,80px)));
  margin:50px auto 0;
}
.gallery-wrap > .gallery{ width:100%; margin:0; }
.watch-wrap{ margin-top:30px; }
.watch-wrap > .watch-strip{ margin-top:0; }

.strip-arrow{
  position:absolute; top:50%; z-index:3;
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; margin-top:-21px;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(0,0,0,.74);
  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), background .25s var(--ease);
}
.strip-arrow:hover,
.strip-arrow:focus-visible{
  color:var(--accent);
  border-color:rgba(255,214,10,.5);
  background:rgba(0,0,0,.92);
}
.strip-prev{ left:8px; }
.strip-next{ right:8px; }

/* they come out for a cursor resting on the strip, and for a keyboard */
.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-hint{
  width:min(var(--wrap), calc(100% - clamp(32px,8vw,80px)));
  margin:6px auto 0;
  color:var(--ghost);
  font-size:.78rem;
  letter-spacing:.05em;
}


/* ---------- beyond the phone ---------- */

.pf-block{ margin-top:54px; }

.pf-head{
  display:flex; align-items:flex-start; gap:18px;
  max-width:760px;
}
.pf-head .ico-lg{ color:var(--accent); margin-top:2px; }
.pf-head h3{ font-size:1.28rem; letter-spacing:-.025em; }
.pf-head p{
  margin-top:10px;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.68;
}

.mac-hero{
  margin:32px 0 0;
}
.mac-hero img,
.mac-row img,
.tv-row img{
  display:block;
  width:100%; height:auto;
  border:1px solid rgba(255,255,255,.13);
  border-radius:14px;
  background:#000;
}
.mac-hero img{
  border-radius:16px;
  box-shadow:0 40px 90px rgba(0,0,0,.85);
}
.mac-hero figcaption,
.mac-row figcaption,
.tv-row figcaption{
  margin-top:13px;
  color:var(--faint);
  font-size:.84rem;
  line-height:1.5;
}

.mac-row,
.tv-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:26px;
}
.mac-row figure,
.tv-row figure{ margin:0; }

.tv-row{ margin-top:32px; }
.tv-row img{ box-shadow:0 30px 70px rgba(0,0,0,.8); }

/* all six sit in one row at full width and scroll once space runs out,
   which keeps them legible instead of shrinking to thumbnails */
.watch-strip{
  --gap:12px;
  margin-top:30px;
  padding-bottom:4px;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.watch-strip .track{ display:flex; gap:var(--gap); width:max-content; }
.watch-strip::-webkit-scrollbar{ display:none; }
.watch-strip figure{
  /* against the window rather than the track, whose width is its contents and
     so cannot answer a percentage without asking itself */
  flex:0 0 clamp(116px, 15vw, 186px);
  margin:0;
}
.watch-strip img{
  display:block;
  width:100%; height:auto;
  border:1px solid rgba(255,255,255,.14);
  border-radius:19%;
  background:#000;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.watch-strip figure:hover img{
  transform:translateY(-3px);
  border-color:rgba(255,214,10,.4);
}

.pf-note{
  margin-top:18px;
  color:var(--ghost);
  font-size:.76rem;
  letter-spacing:.03em;
}


/* ---------- devices ---------- */

.devices{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:50px;
}
.dev-col{
  padding:28px 26px 30px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
}
.dev-label{
  color:var(--accent);
  font-size:.74rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
}

.dev-list{ list-style:none; margin:16px 0 0; padding:0; }
.dev-list li{
  display:flex; align-items:center; gap:15px;
  padding:13px 0;
  border-bottom:1px solid var(--line-soft);
}
.dev-list li:last-child{ border-bottom:0; }
.dev-list .ico{ font-size:1.32rem; color:var(--accent); }
.dev-list b{ font-size:.97rem; font-weight:600; letter-spacing:-.01em; }
.dev-list span{ margin-left:auto; color:var(--faint); font-size:.83rem; text-align:right; }

.dev-extra{
  margin-top:26px;
  padding-top:24px;
  border-top:1px solid var(--line);
  display:grid;
  gap:14px;
}
.dev-extra p{
  display:flex; align-items:center; gap:14px;
  color:var(--muted);
  font-size:.92rem;
}
.dev-extra .ico{ font-size:1.2rem; color:var(--accent); }


/* ---------- advantages ---------- */

.grid-adv{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(226px,1fr));
  gap:12px;
  margin-top:52px;
}
.adv{
  display:grid;
  align-content:start;
  gap:7px;
  padding:26px 24px 28px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--panel);
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.adv:hover{
  border-color:rgba(255,214,10,.3);
  background:rgba(255,214,10,.03);
}
.adv .ico-md{ color:var(--accent); margin-bottom:9px; }
.adv b{ font-size:.97rem; font-weight:600; letter-spacing:-.015em; }
.adv span{ color:var(--muted); font-size:.875rem; line-height:1.58; }


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

.price-card{
  position:relative;
  text-align:center;
  padding:clamp(42px,6vw,76px) clamp(24px,5vw,66px);
  border:1px solid rgba(255,214,10,.28);
  border-radius:28px;
  background:
    radial-gradient(120% 100% at 50% 0, rgba(255,214,10,.10), transparent 58%),
    rgba(255,255,255,.02);
  overflow:hidden;
}
.price-card .ico-xl{ color:var(--accent); }
.price-card .kicker{ margin-top:16px; }
.price-card .section-lede{ margin-inline:auto; }

.price-points{
  list-style:none;
  margin:36px 0 0;
  padding:0;
  display:flex; flex-wrap:wrap;
  justify-content:center;
  gap:11px 26px;
}
.price-points li{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--muted);
  font-size:.89rem;
}
.price-points .ico{ font-size:.82rem; color:var(--accent); }


/* ---------- widgets ---------- */

/* the same horizontal strip as the screens gallery, but each shot carries a
   caption, so the figures need a shared height for the captions to line up */
.wg-gallery figure{ display:flex; flex-direction:column; }
.wg-gallery figcaption{
  margin-top:14px;
  color:var(--faint);
  font-size:.84rem;
  line-height:1.55;
  text-wrap:pretty;
}


/* ---------- faq ----------
   details/summary so the accordion opens with no script at all */

/* boxed like the price card, but with the neutral border so the two do not
   compete for attention when they sit next to each other */
.faq-card{
  padding:clamp(30px,4.4vw,54px) clamp(20px,4vw,50px);
  border:1px solid var(--line);
  border-radius:28px;
  background:rgba(255,255,255,.02);
  text-align:center;
}
.faq-card .ico-xl{ color:var(--accent); }
.faq-card .kicker{ margin-top:14px; }
.faq-card h2{ font-size:clamp(1.6rem,3.2vw,2.35rem); }
.faq-card .section-lede{ margin-inline:auto; }

/* the list itself is left aligned inside the centred card */
.faq{
  max-width:720px;
  margin:26px auto 0;
  text-align:left;
}

.faq-cat{
  margin:20px 0 2px;
  color:var(--accent);
  font-size:.71rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
}
.faq-cat:first-child{ margin-top:0; }

.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-item summary{
  display:flex; align-items:flex-start; gap:11px;
  padding:12px 2px;
  color:var(--ink);
  font-size:.95rem; font-weight:500;
  line-height:1.5;
  cursor:pointer;
  list-style:none;
}
/* the default disclosure triangle, replaced below with a drawn chevron */
.faq-item summary::-webkit-details-marker{ display:none; }

.faq-item summary::before{
  content:"";
  flex:none;
  width:9px; height:9px;
  margin-top:.42em;
  border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
  transition:transform .2s ease;
}
.faq-item[open] summary::before{ transform:rotate(45deg); }

.faq-item summary:hover{ color:var(--accent); }
.faq-item summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.faq-ans{
  padding:0 2px 15px 20px;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.65;
}
.faq-src{ margin-top:8px; font-size:.85rem; }
.faq-src a{ color:var(--accent); }

@media (prefers-reduced-motion:reduce){
  .faq-item summary::before{ transition:none; }
}


/* ---------- warning notes ---------- */

/* the warning band stacks several of these panels */
.notes{
  display:grid;
  gap:16px;
  margin-top:38px;
}

.note{
  display:flex; align-items:flex-start; gap:22px;
  padding:30px clamp(22px,3vw,38px);
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
}
.note .ico-md{ color:var(--accent); margin-top:2px; }
.note p{
  max-width:78ch;
  color:var(--muted);
  font-size:.94rem;
  line-height:1.72;
}
.note b{ display:block; margin-bottom:5px; color:var(--ink); }


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

.site-foot{
  position:relative;
  padding-top:clamp(58px,7vw,92px);
  border-top:1px solid var(--line-soft);
}

.foot-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.7fr;
  gap:44px 36px;
  padding-bottom:52px;
}

.foot-brand p{
  max-width:34ch;
  margin-top:16px;
  color:var(--faint);
  font-size:.88rem;
  line-height:1.6;
}
.store-row-sm{
  --badge-h:38px;
  justify-content:flex-start;
  margin-top:22px;
}

.foot-col h4,
.foot-brand h4{
  font-size:.76rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--ghost);
}
.foot-col ul{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:grid;
  gap:11px;
}
.foot-col a{
  color:var(--muted);
  font-size:.9rem;
  text-decoration:none;
  transition:color .25s var(--ease);
}
.foot-col a:hover{ color:var(--accent); }

.lang-list{
  display:flex !important;
  flex-wrap:wrap;
  gap:7px !important;
}
.lang-list a{
  display:inline-block;
  padding:5px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:.78rem;
  color:var(--faint);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.lang-list a:hover{
  color:var(--accent);
  border-color:rgba(255,214,10,.4);
}
.lang-list a.is-active{
  color:#000;
  background:var(--accent);
  border-color:var(--accent);
  font-weight:600;
}

.foot-legal{
  display:grid;
  gap:14px;
  padding:26px 0 44px;
  border-top:1px solid var(--line-soft);
}
.foot-legal p{ color:var(--ghost); font-size:.8rem; }
.legal-tm{
  max-width:82ch;
  font-size:.72rem !important;
  line-height:1.6;
  color:rgba(255,255,255,.2) !important;
}


/* ---------- gallery overlay ---------- */

/* Which shot is open lives in the address bar. Every layer here is fixed,
   which is also why opening one never moves the page underneath. */
.lb{ display:none; position:fixed; inset:0; z-index:200; }
.lb:target{ display:flex; align-items:center; justify-content:center; }

/* fills the overlay, so anywhere beside the picture closes it */
.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;
}
/* auto sizes hold the shot to its own pixels, the maxima only ever shrink it */
.lb-fig img{
  display:block;
  width:auto; height:auto;
  max-width:92vw;
  max-height:84vh;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  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:.92rem; line-height:1.5;
  text-align:center; text-wrap:pretty;
}
.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);
  border-color:rgba(255,214,10,.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); }

/* hold the page still behind an open shot */
html:has(.lb:target){ overflow:hidden; }


/* ---------- responsive ---------- */

/* The header carries this class until the script measures the row and finds
   it fits. So a visitor without one keeps a working menu rather than a row
   spilling over, and every language folds at its own width rather than at a
   number guessed for all of them. */
.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 clamp(16px,4vw,40px) 12px;
  max-height:calc(100vh - 66px);
  max-height:calc(100dvh - 66px);
  overflow-y:auto;
  overscroll-behavior:contain;
  /* solid rather than blurred, so the links stay legible over the page */
  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-left:auto; }

/* Everything below the header, so a tap anywhere off the panel closes it.
   It starts under the header, which leaves the close button reachable. */
.nav-backdrop{
  display:none;
  position:absolute; top:100%; left:0; right:0;
  z-index:1;
  height:100vh; height:100dvh;
}
#menu:target ~ .site-head .nav-backdrop{ display:block; }

@media (max-width:940px){
  .split{ grid-template-columns:1fr; }
  .split-shots{ order:-1; max-width:420px; }

  .devices{ grid-template-columns:1fr; }

  .foot-grid{ grid-template-columns:1fr 1fr; }
  .foot-lang{ grid-column:1 / -1; }
}

@media (max-width:620px){
  :root{ --badge-h:42px; }

  .site-head{ gap:12px; }
  /* the mark alone carries the brand once space runs short, and the button
     stands down in favour of the language picker and the menu. Both the hero
     and the price section below still lead to the stores. */
  .site-head .brand span{ display:none; }
  .site-head .btn-mini{ display:none; }

  .hero{ padding-top:56px; }
  .hero h1{ font-size:clamp(2.35rem,10vw,3.2rem); }

  .mac-row,
  .tv-row{ grid-template-columns:1fr; }
  .pf-head{ gap:14px; }

  .stats{ grid-template-columns:1fr 1fr; }
  .stats li{ border-bottom:1px solid var(--line); }
  .stats li:nth-child(2n){ border-right:0; }
  .stats li:nth-last-child(-n+2){ border-bottom:0; }

  .note{ flex-direction:column; gap:14px; }

  .foot-grid{ grid-template-columns:1fr; gap:38px; }
  .store-row-sm{ --badge-h:36px; }
}


/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .w{ animation:none; }
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}


/* ---------- print ---------- */

@media print{
  body{ background:#fff; color:#000; }
  .waves,.wave-rule,.site-head{ display:none; }
}