/* Hue-istic — hueistic-site
 *
 * Self-contained on purpose. The app's pitch is that nothing of yours leaves your phone; a
 * marketing page for it that pulls a webfont from Google and a script from a CDN would be
 * making the opposite argument in the one place a sceptical reader looks first. So: system
 * fonts, no CDN, no analytics, no cookies. Every color below comes from the app itself —
 * ColorUtils.colorGroupAccent for the lanes, ic_launcher_foreground.xml for the stripes.
 */

:root {
  /* The lanes, from ColorUtils.colorGroupAccent. */
  --red: #f44336;
  --orange: #ff9800;
  --yellow: #ffeb3b;
  --green: #4caf50;
  --teal: #009688;
  --blue: #2196f3;
  --purple: #9c27b0;
  --pink: #e91e63;

  /* The icon's six stripes, which are a shade deeper than the lanes. */
  --s1: #e53935;
  --s2: #fb8c00;
  --s3: #fdd835;
  --s4: #43a047;
  --s5: #1e88e5;
  --s6: #8e24aa;

  --ink: #0d0d10;
  --ink-2: #16161b;
  --ink-3: #1e1e25;
  --line: #2c2c35;
  --text: #f2f2f4;
  --dim: #a7a7b2;
  --dimmer: #75757f;

  --rainbow: linear-gradient(90deg, var(--s1), var(--s2), var(--s3), var(--s4), var(--s5), var(--s6));
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(20px, 5vw, 64px);
  --radius: 16px;
}

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

/* .reel-switch and .reel-dots are display:flex AND start with the `hidden` attribute, which JS
   removes only once it knows there is something to show. A class rule beats the UA sheet's
   [hidden]{display:none}, so without this both flashed on screen before the script ran — and
   the Video button stayed visible on a site with no recording. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--text); color: var(--ink); padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

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

/* ---------------------------------------------------------------- wordmark + top bar */

.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--pad);
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.mark { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }

/* The app icon, rebuilt in six divs rather than shipped as an image: it is six stripes on a
   rounded dark square, it stays crisp at any size, and the bar costs no request. */
.mark-icon {
  width: 30px; height: 30px; border-radius: 8px; background: #222;
  padding: 5px 3px; display: grid; gap: 0; overflow: hidden; flex: none;
}
.mark-icon i { display: block; }
.mark-icon i:nth-child(1) { background: var(--s1); border-radius: 2px 2px 0 0; }
.mark-icon i:nth-child(2) { background: var(--s2); }
.mark-icon i:nth-child(3) { background: var(--s3); }
.mark-icon i:nth-child(4) { background: var(--s4); }
.mark-icon i:nth-child(5) { background: var(--s5); }
.mark-icon i:nth-child(6) { background: var(--s6); border-radius: 0 0 2px 2px; }

.mark-name { font-family: var(--mono); font-weight: 600; letter-spacing: 0.12em; font-size: 15px; }

.bar-nav { display: flex; gap: clamp(12px, 2.5vw, 28px); font-size: 15px; }
.bar-nav a { color: var(--dim); text-decoration: none; }
.bar-nav a:hover { color: var(--text); }
.bar-nav .bar-cta { color: var(--text); font-weight: 600; }
@media (max-width: 560px) { .bar-nav .hide-s { display: none; } }

/* ---------------------------------------------------------------- layout */

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

section { padding-block: clamp(56px, 9vw, 116px); }
section + section { border-top: 1px solid var(--line); }

.eyebrow {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dimmer); margin: 0 0 14px;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 16px; }
h1 { font-size: clamp(34px, 6.2vw, 64px); font-weight: 800; text-wrap: balance; }
h2 { font-size: clamp(26px, 3.8vw, 42px); font-weight: 750; text-wrap: balance; }
h3 { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; }

.lede { font-size: clamp(17px, 2vw, 21px); color: var(--dim); max-width: 56ch; margin: 0 0 28px; }

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

.hero { padding-top: clamp(40px, 7vw, 88px); position: relative; overflow: hidden; }
/* A wash of the six stripes behind the headline, heavily blurred — the page's one piece of
   ornament, and it is the product's own palette rather than a stock gradient. */
.hero::before {
  content: ""; position: absolute; inset: -40% -10% auto; height: 620px; z-index: 0;
  background: var(--rainbow); filter: blur(120px); opacity: 0.20; pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }

.hero-grid {
  display: grid; gap: clamp(32px, 5vw, 64px); align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 .hue {
  background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 650; font-size: 16px; text-decoration: none; cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--text); color: var(--ink); }
.btn-primary:hover { background: #fff; }
.btn-ghost { border-color: var(--line); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--dimmer); background: var(--ink-2); }

.cta-note { font-size: 14.5px; color: var(--dimmer); margin: 14px 0 0; max-width: 46ch; }

/* The status line above the buttons — honest about where the app actually is. */
.status {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 20px;
  padding: 6px 14px 6px 10px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13.5px; color: var(--dim); background: var(--ink-2);
}
.status .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--s3); flex: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--s3) 22%, transparent);
}

/* ---------------------------------------------------------------- phone frame + reel */

.phone {
  --bezel: 10px;
  position: relative; margin: 0 auto; width: min(340px, 78vw);
  border-radius: 40px; padding: var(--bezel);
  background: linear-gradient(160deg, #3a3a44, #15151a 42%, #2a2a33);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.phone-screen {
  position: relative; border-radius: 31px; overflow: hidden; background: #000;
  aspect-ratio: 1272 / 2772;
}
.phone-screen > img, .phone-screen > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Stills mode: every frame stacked, one visible at a time. Opacity rather than display so the
   crossfade has something to animate and the images are all decoded up front.

   The outgoing frame is held at full opacity underneath the incoming one (`.prev`) rather than
   faded out alongside it. Two images crossing at 50% each over a black backdrop dip visibly
   dark at the midpoint — on a phone frame that reads as the screen blinking off. Holding the
   old one until the new has arrived makes it a true dissolve. */
.reel-still { opacity: 0; transition: opacity 420ms ease; }
.reel-still.prev { opacity: 1; z-index: 1; transition: none; }
.reel-still.on { opacity: 1; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .reel-still { transition: none; } }

.reel-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 40px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.86), transparent);
  font-size: 14px; line-height: 1.4;
}
.reel-caption b { display: block; font-weight: 650; }
.reel-caption span { color: var(--dim); font-size: 13px; }

/* The mode switch under the frame. Two genuinely different presentations of the same tour —
   a recorded run of the app, and the stills with captions — because which one sells it better
   is a question best answered by watching both. */
.reel-switch {
  display: flex; gap: 4px; margin: 18px auto 0; width: max-content;
  padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--ink-2);
}
.reel-switch button {
  font: inherit; font-size: 13.5px; padding: 6px 16px; border-radius: 999px;
  border: 0; background: transparent; color: var(--dim); cursor: pointer;
}
.reel-switch button[aria-pressed="true"] { background: var(--ink-3); color: var(--text); }
.reel-switch button:disabled { opacity: 0.35; cursor: not-allowed; }

.reel-dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.reel-dots button {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--line); transition: background 0.2s ease, transform 0.2s ease;
}
.reel-dots button[aria-current="true"] { background: var(--text); transform: scale(1.25); }

/* ---------------------------------------------------------------- view cards */

.cards { display: grid; gap: clamp(18px, 2.6vw, 30px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .cards { grid-template-columns: 1fr; } }

/* Two featured cards rather than three across, so the pair that carries the paid tier is shown
   at a size worth looking at instead of competing in a grid of six thumbnails. */
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
@media (max-width: 580px) { .cards-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.card-shot { background: #000; aspect-ratio: 1272 / 2772; overflow: hidden; }
.card-shot img,
.card-shot .card-vid { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.card-body { padding: 18px 20px 22px; }
.card-body h3 { margin-bottom: 6px; }
.card-body p { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.55; }

/* The lane stripe along the top of each card, so the grid itself reads as a spectrum. */
.card::before { content: ""; display: block; height: 3px; background: var(--c, var(--line)); }
.card.is-soon { opacity: 0.94; }
.card .tag {
  display: inline-block; margin-bottom: 8px; padding: 2px 9px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--dimmer);
}

/* ---------------------------------------------------------------- split feature block */

.split { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; grid-template-columns: 1fr 1fr; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
.split.flip > :first-child { order: 2; }
@media (max-width: 880px) { .split.flip > :first-child { order: 0; } }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.ticks li { padding-left: 30px; position: relative; color: var(--dim); font-size: 16px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 14px; height: 3px; border-radius: 2px; background: var(--c, var(--s5));
}
.ticks li b { color: var(--text); font-weight: 600; }
.ticks li:nth-child(6n+1) { --c: var(--s1); }
.ticks li:nth-child(6n+2) { --c: var(--s2); }
.ticks li:nth-child(6n+3) { --c: var(--s3); }
.ticks li:nth-child(6n+4) { --c: var(--s4); }
.ticks li:nth-child(6n+5) { --c: var(--s5); }
.ticks li:nth-child(6n+6) { --c: var(--s6); }

/* ---------------------------------------------------------------- privacy panel */

.privacy-panel {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--ink-2);
}
.privacy-panel > .stripe { height: 4px; background: var(--rainbow); }
.privacy-inner { padding: clamp(26px, 4vw, 44px); }
.privacy-inner h2 { max-width: 20ch; }

.fineprint { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--dimmer); font-size: 14.5px; }
.fineprint a { color: var(--dim); }

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

.close-cta { text-align: center; }
.close-cta .wrap > * { margin-inline: auto; }
.close-cta .lede { max-width: 48ch; }
.close-cta .cta-row { justify-content: center; }
.close-cta .cta-note { margin-inline: auto; }

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

.foot {
  border-top: 1px solid var(--line); padding: 34px var(--pad) 48px;
  color: var(--dimmer); font-size: 14.5px; text-align: center;
}
.foot p { margin: 0 0 8px; }
.foot a { color: var(--dim); }
.foot-fine { font-size: 13px; }

/* ---------------------------------------------------------------- the policy page */

.page-doc { background: var(--ink); }
.doc { max-width: 760px; margin: 0 auto; padding: clamp(36px, 6vw, 72px) var(--pad) 64px; }
.doc h1 { font-size: clamp(30px, 5vw, 44px); margin-bottom: 8px; }
.doc h2 {
  font-size: 22px; margin: 44px 0 12px; padding-top: 14px; border-top: 1px solid var(--line);
}
.doc p { color: var(--dim); }
.doc p:first-of-type em { color: var(--dimmer); font-style: normal; font-family: var(--mono); font-size: 14px; }
.doc strong { color: var(--text); }
.doc ul { padding-left: 20px; }
.doc li { color: var(--dim); margin-bottom: 12px; }
.doc a { color: var(--text); text-decoration-color: var(--dimmer); text-underline-offset: 3px; }