/* Remice site: the pool from the app, as one screen. Deep water for the ground, pale crest light for text,
   one green for the download. Apple's system font, so the page asks nothing of anyone else's servers.
   Desktop fits one screen with no scrolling: the gestures play on the demo, the rest sits behind tabs.
   Every colour comes from one hue (--h), which site.js turns slowly round the colour wheel like the Mac's
   dynamic wallpapers. 186 is the app's own teal. Registered so the browser can glide between values. */
@property --h { syntax: '<number>'; inherits: true; initial-value: 186; }
:root {
  --h: 186;
  transition: --h 2s linear;
  --deep: hsl(var(--h) 83% 9%);
  --water: hsl(calc(var(--h) - 2) 83% 22%);
  --water-mid: hsl(var(--h) 84% 17%);
  --water-low: hsl(calc(var(--h) + 1) 84% 12%);
  --glow: hsl(calc(var(--h) - 13) 75% 63%);
  --ink: hsl(calc(var(--h) - 13) 40% 89%);
  --quiet: hsl(calc(var(--h) - 11) 22% 61%);
  --crest: hsl(calc(var(--h) - 17) 64% 90%);
  --go: hsl(calc(var(--h) - 40) 62% 76%);   /* a pale neighbour of the current colour: always bright on the dark ground */
  --line: hsl(calc(var(--h) - 17) 64% 90% / .12);
  --chip: hsl(calc(var(--h) - 17) 64% 90% / .07);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--deep); }
body { margin: 0; color: var(--ink); font: 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; background: var(--deep); }
/* Light drifting slowly over the deep colour, the way a dynamic wallpaper breathes. */
body::before {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 35% at 78% 12%, hsl(calc(var(--h) - 6) 70% 45% / .22), transparent 70%),
    radial-gradient(45% 40% at 12% 88%, hsl(calc(var(--h) + 40) 60% 40% / .14), transparent 70%);
  animation: drift 70s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate(-6%, 5%) rotate(8deg) scale(1.08); } }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--crest); outline-offset: 3px; border-radius: 8px; }

.page { min-height: 100dvh; display: flex; flex-direction: column; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.top { display: flex; align-items: center; height: clamp(56px, 9vh, 76px); flex: none; position: relative; z-index: 5; }
.mark { display: flex; align-items: center; gap: 10px; font: 600 18px/1 var(--display); letter-spacing: -.01em; color: var(--ink); }
.mark img { border-radius: 7px; }
/* The mark: a drop of the pool with one ripple, in the page's current colour. */
.drop {
  position: relative; width: 26px; height: 26px; border-radius: 7px; flex: none; overflow: hidden;
  background: radial-gradient(90% 70% at 20% 0%, hsl(calc(var(--h) - 13) 75% 63% / .5), transparent 70%),
              linear-gradient(180deg, hsl(calc(var(--h) - 2) 80% 30%), hsl(calc(var(--h) + 1) 84% 13%));
  box-shadow: inset 0 0 0 1px hsl(calc(var(--h) - 17) 64% 90% / .18);
}
.drop::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -3px 0 0 -3px; border-radius: 50%;
  border: 1.5px solid hsl(calc(var(--h) - 17) 64% 90% / .9);
  box-shadow: 0 0 0 4px hsl(calc(var(--h) - 17) 64% 90% / .12);
}
.tag {
  appearance: none; border: 0; cursor: pointer;
  margin-left: 2px; padding: 4px 8px 3px; border-radius: 999px; font: 600 12px/1 var(--font); letter-spacing: .02em;
  color: var(--go); background: hsl(calc(var(--h) - 40) 62% 76% / .12); box-shadow: inset 0 0 0 1px hsl(calc(var(--h) - 40) 62% 76% / .3);
}

.stage {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 5vw, 72px);
  align-items: center; padding-bottom: clamp(20px, 5vh, 56px);
}
h1 { margin: 0; font: 700 clamp(40px, min(6vw, 9vh), 80px)/.98 var(--display); letter-spacing: -.035em; color: var(--crest); text-wrap: balance; }
.lede { margin: clamp(14px, 2.4vh, 22px) 0 0; max-width: 30em; font-size: clamp(16px, 1.4vw, 19px); }
.cta { margin-top: clamp(18px, 3.2vh, 30px); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.button {
  display: inline-block; padding: 14px 24px; border-radius: 14px; background: var(--go); color: hsl(var(--h) 83% 9%);
  font: 650 17px/1 var(--font); text-decoration: none; box-shadow: 0 8px 30px -12px hsl(calc(var(--h) - 40) 62% 70% / .6);
  transition: transform .12s ease, box-shadow .2s;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 12px 34px -12px hsl(calc(var(--h) - 40) 62% 70% / .75); }
.button:active { transform: translateY(1px); }
.fine { font-size: 14px; color: var(--quiet); }
.fine a { color: var(--quiet); }


/* Tabs: the rest of the story, one panel at a time, always the same height. */
.tabs { display: flex; gap: 4px; margin-top: clamp(22px, 4.5vh, 44px); border-bottom: 1px solid var(--line); }
.tabs button {
  appearance: none; border: 0; background: none; padding: 10px 12px 11px; margin-bottom: -1px; cursor: pointer;
  font: 600 15px/1 var(--font); color: var(--quiet); border-bottom: 2px solid transparent;
}
.tabs button:hover { color: var(--ink); }
.tabs button:focus-visible { outline-offset: -2px; }
.tabs button[aria-selected="true"] { color: var(--crest); border-bottom-color: var(--crest); }
.panels { height: clamp(186px, 26vh, 220px); padding-top: 16px; overflow: hidden; }
.panel p { margin: 0 0 10px; max-width: 34em; color: var(--quiet); }
.panel b { color: var(--ink); font-weight: 600; }
.quiet { font-size: 14px; }
.steps, .points { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 34em; color: var(--quiet); }
.steps { counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding-left: 34px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--crest); color: var(--deep); font: 650 12px/1 var(--font); }

.chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.chip {
  appearance: none; border: 0; cursor: pointer; padding: 8px 10px; border-radius: 11px; background: var(--chip);
  box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 500 14px/1.15 var(--font); text-align: left;
}
.chip small { display: block; margin-top: 3px; font-size: 12px; color: var(--quiet); }
.chip:hover { background: rgba(214, 246, 240, .11); }
.chip[aria-pressed="true"] { background: hsl(calc(var(--h) - 40) 62% 76% / .14); box-shadow: inset 0 0 0 1px hsl(calc(var(--h) - 40) 62% 76% / .45); }

/* The demo: a Mac screen with a phone made of water in front of its corner. */
.demo { margin: 0; position: relative; padding: 0 11% 13% 0; align-self: center; }
.mac { width: 100%; }
.mac-screen {
  position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden;
  background: linear-gradient(160deg, hsl(calc(var(--h) + 2) 47% 23%), hsl(calc(var(--h) + 3) 53% 15%) 60%, hsl(calc(var(--h) + 4) 57% 11%));
  box-shadow: inset 0 0 0 7px #0b1316, inset 0 0 0 8px rgba(255,255,255,.06), 0 30px 60px -30px rgba(0,0,0,.7);
}
.mac-stand { width: 22%; height: 18px; margin: 0 auto; background: linear-gradient(#0f1b1e, #0a1416); clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%); }
.desk { position: absolute; inset: 7px; display: flex; width: calc(200% - 14px); }
.space { position: relative; flex: 0 0 50%; height: 100%; }
.space.two { background: linear-gradient(200deg, #2a4a3d, #182f29); }
.win { position: absolute; border-radius: 7px; overflow: hidden; background: rgba(214, 246, 240, .09); box-shadow: inset 0 0 0 1px rgba(214,246,240,.08); }
.win > i { position: absolute; z-index: 1; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: rgba(214,246,240,.18); }
.win > i:nth-child(1) { left: 8px; } .win > i:nth-child(2) { left: 19px; } .win > i:nth-child(3) { left: 30px; }
.w1 { left: 8%; top: 10%; width: 54%; height: 70%; }
.w2 { left: 56%; top: 30%; width: 38%; height: 52%; background: rgba(214, 246, 240, .12); }
.w3 { left: 20%; top: 18%; width: 60%; height: 60%; background: rgba(214, 246, 240, .13); }
.doc { position: absolute; inset: 22px 10px 10px; overflow: hidden; border-radius: 4px; }
.pages { display: flex; width: 200%; height: 100%; }
.sheet-page { flex: 0 0 50%; display: flex; flex-direction: column; gap: 6px; padding: 4px 6px; transform-origin: 40% 30%; }
.sheet-page span { display: block; height: 5px; border-radius: 3px; background: rgba(214,246,240,.18); flex: none; }
.sheet-page span.h { height: 9px; width: 60%; background: rgba(214,246,240,.32); }
.sheet-page span.s { width: 70%; }
.sheet-page span.img { height: 40px; background: linear-gradient(135deg, rgba(143,227,185,.35), rgba(40,170,180,.3)); }
.sheet-page.alt { background: rgba(214,246,240,.03); }
.menu, .lookup { position: absolute; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 8px; background: rgba(30, 50, 55, .95); box-shadow: 0 8px 20px rgba(0,0,0,.4), inset 0 0 0 1px rgba(214,246,240,.12); opacity: 0; transform: scale(.9); transition: opacity .15s, transform .15s; pointer-events: none; }
.menu { width: 90px; } .menu span { height: 5px; border-radius: 3px; background: rgba(214,246,240,.3); }
.lookup { width: 130px; } .lookup span { height: 5px; border-radius: 3px; background: rgba(214,246,240,.25); } .lookup span.h { height: 8px; width: 50%; background: rgba(214,246,240,.45); }
.menu.on, .lookup.on { opacity: 1; transform: none; }
.pointer { position: absolute; left: 0; top: 0; width: 16px; height: 24px; z-index: 3; will-change: transform; }
.pointer svg { display: block; fill: #fff; stroke: #0b1316; stroke-width: 1.2; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.pointer.click::after { content: ""; position: absolute; left: -10px; top: -10px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--crest); animation: ring .35s ease-out forwards; }
@keyframes ring { from { opacity: .9; scale: .4; } to { opacity: 0; scale: 1.4; } }
.resetting .desk, .resetting .pages, .resetting .sheet-page, .resetting .win { transition: transform .5s cubic-bezier(.2,.8,.2,1); }

.phone {
  position: absolute; right: 0; bottom: 0; width: 33%; z-index: 1;
  padding: 8px; border-radius: 38px; background: #071b1f;
  box-shadow: inset 0 0 0 1.5px rgba(214,246,240,.10), 0 40px 70px -30px rgba(0,0,0,.8);
}
.pool {
  position: relative; aspect-ratio: 9 / 18; border-radius: 31px; overflow: hidden; touch-action: none; cursor: crosshair;
  background:
    radial-gradient(90% 50% at 15% 0%, hsl(calc(var(--h) - 13) 75% 63% / .28), transparent 70%),
    radial-gradient(70% 40% at 90% 35%, hsl(calc(var(--h) + 2) 65% 45% / .16), transparent 70%),
    radial-gradient(120% 80% at 80% 110%, rgba(0, 10, 16, .6), transparent 70%),
    linear-gradient(180deg, var(--water), var(--water-mid) 55%, var(--water-low));
  box-shadow: inset 0 0 40px rgba(0, 16, 20, .55), inset 0 0 0 1px rgba(214,246,240,.10);
}
.pool canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.keys {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 7px 16px; z-index: 2;
  background: hsl(var(--h) 79% 11% / .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  transform: translateY(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.keys.on { transform: none; }
.keys-head { display: flex; justify-content: space-between; align-items: center; padding: 0 3px 6px; font: 600 9px/1 var(--font); color: var(--quiet); }
.dots { display: flex; gap: 3px; } .dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--quiet); opacity: .35; } .dots i.on { opacity: 1; }
.keys-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.keys-grid b { display: grid; place-items: center; min-height: 24px; border-radius: 7px; background: rgba(214,246,240,.08); font: 500 8px/1.1 var(--font); color: var(--ink); text-align: center; }
.demo figcaption { position: absolute; left: 0; bottom: 3%; max-width: 60%; font-size: 14px; color: var(--quiet); min-height: 1.5em; }

/* Phones and narrow windows: one column; scrolling is fine here. */
.tag[aria-expanded="true"] { background: hsl(calc(var(--h) - 40) 62% 76% / .22); }
.alpha-note {
  position: absolute; top: calc(100% - 6px); left: 0; width: min(360px, calc(100vw - 2 * var(--gutter))); margin: 0;
  padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; color: var(--ink);
  background: hsl(var(--h) 60% 13% / .96); box-shadow: 0 16px 40px -16px rgba(0,0,0,.7), inset 0 0 0 1px var(--line);
}
.alpha-note[hidden] { display: none; }

@media (max-width: 860px) {
  /* Phones: headline and download first, then the demo, with the gestures right under it. */
  .stage { grid-template-columns: 1fr; align-items: start; gap: 0; }
  .words { display: contents; }
  .words h1 { order: 1; } .lede { order: 2; } .cta { order: 3; }
  .demo { order: 4; margin-top: 30px; padding: 0 16% 0 0; }
  .tabs { order: 5; } .panels { order: 6; }
  .phone { width: 40%; bottom: -6%; }
  .demo figcaption { position: static; max-width: none; margin-top: 14px; padding-right: 46%; min-height: 3em; }
  .panels { height: auto; min-height: 200px; }
  .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .button, .keys, .menu, .lookup { transition: none; }
  .pointer.click::after { animation-duration: 1ms; }
}
.steps + .quiet { margin-top: 14px; }

/* Terms and Privacy: plain reading pages that scroll. */
.legal .page { min-height: auto; }
.legal a.mark { text-decoration: none; }
.doc-page { max-width: 42em; padding: 8px 0 72px; }
.doc-page h1 { font-size: clamp(34px, 5vw, 48px); }
.doc-page h2 { margin: 30px 0 8px; font: 650 19px/1.3 var(--display); color: var(--crest); }
.doc-page p, .doc-page li { color: var(--ink); line-height: 1.6; }
.doc-page ul { padding-left: 1.2em; }
.doc-page .meta { color: var(--quiet); font-size: 14px; }
.doc-page a { color: var(--crest); }