/*
 * One stylesheet for the whole site. Nothing is fetched from anywhere: no
 * fonts, no CDNs, no analytics. The page is a handful of files and paints
 * instantly on any connection, which is part of the privacy story.
 *
 * The sky is the app's own BrandScenes palette (src/constants/theme.ts): four
 * time-of-day scenes, each with a light and a dark variant, chosen from the
 * device hour by the tiny inline script in every page's head. With scripting
 * off the CSS default below is dawn.
 *
 * HARD RULE inherited from the app: never animate the sky's brightness or its
 * colors. A large soft region changing luminance slowly is invisible to human
 * vision (proven three times on device). The travelling sun-ray, a defined
 * edge crossing the frame in about three seconds, is the only motion here.
 */

/* ---------- Scene tokens, light scheme ---------- */

:root,
[data-scene='dawn'] {
  --sky0: #a9b4d6;
  --sky1: #c2cce6;
  --sky2: #e9e2d6;
  --sky3: #f8e4b6;
  --below: #cdcac8;
  --glow-rgb: 242, 168, 92;
  --ray-rgb: 255, 246, 216;
  --line-rgb: 216, 172, 135;
}

[data-scene='day'] {
  --sky0: #b4c2e2;
  --sky1: #cfd8ea;
  --sky2: #f0e8ce;
  --sky3: #f9ecbe;
  --below: #d3d5d2;
  --glow-rgb: 255, 204, 77;
  --ray-rgb: 255, 246, 216;
  --line-rgb: 229, 200, 129;
}

[data-scene='dusk'] {
  --sky0: #aab2d2;
  --sky1: #c6bad0;
  --sky2: #f0cca4;
  --sky3: #f9ddb2;
  --below: #cec5c4;
  --glow-rgb: 242, 168, 92;
  --ray-rgb: 255, 240, 218;
  --line-rgb: 217, 172, 133;
}

[data-scene='midnight'] {
  --sky0: #9aa4c6;
  --sky1: #aeb6d2;
  --sky2: #c4c6d8;
  --sky3: #dcd2c6;
  --below: #b8b9c6;
  --glow-rgb: 224, 200, 120;
  --ray-rgb: 255, 233, 176;
  --line-rgb: 200, 187, 147;
}

/* ---------- Foreground tokens, light scheme ---------- */

:root {
  --gold: #ffcc4d;

  --ink: #1c1917;
  --ink-soft: #46403c;
  --link: #8a4a06;

  /* Glass surfaces. The fallback fill is opaque enough to carry text on its
     own; the blurred, more translucent version is opted into under @supports,
     so a browser without backdrop-filter never loses contrast. */
  --glass: rgba(255, 255, 255, 0.82);
  --glass-blur: rgba(255, 255, 255, 0.7);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-shadow: 0 18px 50px rgba(35, 43, 74, 0.16);
  --rule: rgba(35, 43, 74, 0.14);

  --glow-alpha: 0.36;
  --line-soft: 0.16;
  --ray-core-alpha: 0.44;
  --ray-halo-alpha: 0.2;

  --shell: 1120px;
  --column: 680px;
}

/* ---------- Scene tokens, dark scheme ---------- */

@media (prefers-color-scheme: dark) {
  :root,
  [data-scene='dawn'] {
    --sky0: #232b4a;
    --sky1: #3a4374;
    --sky2: #7c90c0;
    --sky3: #e0c878;
    --below: #948966;
    --glow-rgb: 242, 168, 92;
    --ray-rgb: 255, 233, 176;
    --line-rgb: 255, 233, 176;
  }

  [data-scene='day'] {
    --sky0: #3a4374;
    --sky1: #6e82b4;
    --sky2: #c9b57e;
    --sky3: #e0c878;
    --below: #9e9376;
    --glow-rgb: 255, 204, 77;
    --ray-rgb: 255, 243, 204;
    --line-rgb: 255, 243, 204;
  }

  [data-scene='dusk'] {
    --sky0: #232b4a;
    --sky1: #3a4374;
    --sky2: #b5794a;
    --sky3: #f2a85c;
    --below: #9f7655;
    --glow-rgb: 242, 168, 92;
    --ray-rgb: 255, 217, 160;
    --line-rgb: 255, 217, 160;
  }

  [data-scene='midnight'] {
    --sky0: #1b2340;
    --sky1: #232b4a;
    --sky2: #3a4374;
    --sky3: #6e5c6e;
    --below: #4d455c;
    --glow-rgb: 224, 200, 120;
    --ray-rgb: 242, 216, 154;
    --line-rgb: 242, 216, 154;
  }

  :root {
    --ink: #f7f5f2;
    --ink-soft: #d3cec7;
    --link: #ffcc4d;

    /* Deep indigo rather than neutral black: the glass has to hold white text
       even where it sits over the bright sand and amber near the horizon. */
    --glass: rgba(14, 18, 34, 0.82);
    --glass-blur: rgba(14, 18, 34, 0.68);
    --glass-edge: rgba(255, 255, 255, 0.14);
    --glass-shadow: 0 18px 50px rgba(0, 0, 0, 0.36);
    --rule: rgba(255, 255, 255, 0.14);

    --glow-alpha: 0.44;
    --line-soft: 0.2;
    --ray-core-alpha: 0.38;
    --ray-halo-alpha: 0.17;
  }
}

/* ---------- Base ---------- */

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--sky0);
}

body {
  margin: 0;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

img {
  max-width: 100%;
  height: auto;
}

/* ---------- The sky ---------- */

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* The peak is a shoulder, not a point: sky3 is held from 72% to 84% so the
     rise into it and the fall to --below never meet at a corner. A single stop
     at 78% put a visible crease across the lower frame. */
  background: linear-gradient(
    180deg,
    var(--sky0) 0%,
    var(--sky1) 30%,
    var(--sky2) 58%,
    var(--sky3) 72%,
    var(--sky3) 84%,
    var(--below) 100%
  );
}

/* Warm glow rising through the lower frame. Endpoints are the glow color at
   zero alpha, never transparent black, so there is no dark fringing.

   It runs all the way to the bottom edge. It used to stop dead at 78%, which
   dropped the whole glow alpha to nothing in one row and read as a hard corner
   under the horizon. The stops trace a smoothstep up to the peak and then ease
   off by a few percent, so the first derivative is continuous everywhere and
   there is no row where the ramp changes abruptly. */
.sky-glow {
  position: absolute;
  left: 0;
  right: 0;
  top: 38%;
  height: 62%;
  background: linear-gradient(
    180deg,
    rgba(var(--glow-rgb), 0) 0%,
    rgba(var(--glow-rgb), calc(var(--glow-alpha) * 0.16)) 18%,
    rgba(var(--glow-rgb), calc(var(--glow-alpha) * 0.35)) 29%,
    rgba(var(--glow-rgb), calc(var(--glow-alpha) * 0.58)) 40%,
    rgba(var(--glow-rgb), calc(var(--glow-alpha) * 0.78)) 51%,
    rgba(var(--glow-rgb), calc(var(--glow-alpha) * 0.94)) 62%,
    rgba(var(--glow-rgb), var(--glow-alpha)) 73%,
    rgba(var(--glow-rgb), calc(var(--glow-alpha) * 0.97)) 85%,
    rgba(var(--glow-rgb), calc(var(--glow-alpha) * 0.88)) 100%
  );
}

/* The horizon: an extremely soft warm brightening spread over a third of the
   frame. It was a 2px bright core until 2026-08-18, which measured as a 20 level
   single-row step in the column-averaged luminance profile and was reported as a
   white line cutting the orange in half. Nothing here may have an edge. */
.sky-horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: 62%;
  height: 34%;
}

.sky-horizon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(var(--line-rgb), 0) 0%,
    rgba(var(--line-rgb), calc(var(--line-soft) * 0.45)) 30%,
    rgba(var(--line-rgb), var(--line-soft)) 55%,
    rgba(var(--line-rgb), calc(var(--line-soft) * 0.45)) 78%,
    rgba(var(--line-rgb), 0) 100%
  );
}

/* ---------- The sun-ray, the single brand motion ---------- */

/* A tall tilted band: a wide faint halo with a narrow bright core inside it.
   Parked at opacity 0; it is invisible unless the sweep is running, so with
   reduced motion the sky simply keeps its static composition. */
.sky-ray {
  position: absolute;
  top: -60vh;
  left: 0;
  /* The band stops growing once the viewport passes tablet size. It used to be
     40vw capped at 560px, so a 1680px desktop rendered a band nearly twice the
     width of the phone's and it read as a wall of light rather than a sunbeam.
     At 390 and at 768 this clamp resolves to exactly what those widths already
     had (300px and 307px), so phone and tablet are untouched. */
  width: clamp(300px, 40vw, 340px);
  height: 220vh;
  opacity: 0;
  transform: translateX(max(-35vw, -100%)) rotate(12deg);
  will-change: transform, opacity;
}

.sky-ray::before,
.sky-ray::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
}

/* Halo: full band width, roughly half the core's peak alpha. */
.sky-ray::before {
  left: 0;
  right: 0;
  background: linear-gradient(
    90deg,
    rgba(var(--ray-rgb), 0) 0%,
    rgba(var(--ray-rgb), var(--ray-halo-alpha)) 50%,
    rgba(var(--ray-rgb), 0) 100%
  );
}

/* Core: the defined edge that makes the sweep perceptible at all. */
.sky-ray::after {
  left: 38%;
  right: 38%;
  background: linear-gradient(
    90deg,
    rgba(var(--ray-rgb), 0) 0%,
    rgba(var(--ray-rgb), var(--ray-core-alpha)) 50%,
    rgba(var(--ray-rgb), 0) 100%
  );
}

@media (prefers-reduced-motion: no-preference) {
  .sky-ray {
    animation: sun-ray 22s linear 1.4s infinite;
  }
}

/* One 22s cycle. The sweep occupies the first 3s (13.64%); the band parks at
   opacity 0 for the remaining 19s, so the ray reads as a rare event rather
   than a loop. Transform carries its own ease across the whole sweep because
   keyframe timing functions apply per property.
   The travel is deliberately narrow: a wider range spends most of the sweep
   off-screen, which both shortens the visible pass and wastes the opacity ramps
   on a band nobody can see (measured, 2026-08-17). The start is one band width
   off the left edge or 35vw, whichever is nearer the frame, so the swell-in is
   always on screen: with the band capped at 340px a flat -35vw start held the
   whole fade-in off a 1680px viewport, and the sweep popped in already lit
   (measured 2026-08-18, the 0.6s patch fell from 30 levels to 1 and came back to
   44 with this start). Below about 970px wide the 35vw arm wins, so phone and
   tablet keep the exact travel they had. */
@keyframes sun-ray {
  0% {
    transform: translateX(max(-35vw, -100%)) rotate(12deg);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  3.4% {
    opacity: 1;
  }
  10.2% {
    opacity: 1;
  }
  13.64% {
    transform: translateX(95vw) rotate(12deg);
    opacity: 0;
  }
  100% {
    transform: translateX(95vw) rotate(12deg);
    opacity: 0;
  }
}

/* ---------- Page shell ---------- */

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-header {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 26px 24px 8px;
}

/* ---------- Wordmark ---------- */

/* "Sinneblick" with a gold sun disc standing in for the dot of the second i,
   which is rendered as dotless U+0131. Proportions follow the app's
   BrandWordmark: disc radius 0.109em, concentric glow rings at 1.6x, 2.6x and
   4x that radius. The lockup carries aria-label="Sinneblick" so assistive tech
   and search engines read the real name, and the glyphs are aria-hidden. */
.wordmark {
  display: inline-block;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark-i {
  position: relative;
}

.wordmark-sun {
  position: absolute;
  left: 50%;
  bottom: 0.86em;
  width: 0.218em;
  height: 0.218em;
  margin-left: -0.109em;
  margin-bottom: -0.109em;
  border-radius: 50%;
  background: var(--gold);
  box-shadow:
    0 0 0 0.065em rgba(255, 204, 77, 0.32),
    0 0 0 0.174em rgba(255, 204, 77, 0.16),
    0 0 0 0.327em rgba(255, 204, 77, 0.08),
    0 0 0.5em 0.12em rgba(255, 204, 77, 0.28);
}

/* ---------- Glass ---------- */

.glass {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
  padding: 26px 24px;
}

@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .glass {
    background: var(--glass-blur);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    backdrop-filter: blur(22px) saturate(1.4);
  }
}

/* ---------- Landing page ---------- */

main {
  flex: 1 0 auto;
}

.hero {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 18px 24px 8px;
  display: grid;
  gap: 30px;
  align-items: center;
}

.hero-text {
  max-width: var(--column);
}

.hero h1 {
  font-size: clamp(34px, 8.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
}

.hero-text p {
  font-size: 19px;
  color: var(--ink-soft);
  margin: 0;
  max-width: 46ch;
}

/* Apple's supplied badge SVG is 119.66 x 40. The img keeps those attributes so
   the box is reserved before it paints; the rule below scales it to 54px tall
   with an auto width, which preserves the ratio and clears the 44px minimum
   tap target on its own without any extra padding. The 20px offset is what the
   "coming soon" line it replaced used, so the hero does not shift. */
.store-badge {
  display: inline-block;
  margin-top: 20px;
  line-height: 0;
}

.store-badge img {
  display: block;
  width: auto;
  height: 54px;
}

/* Device shots. Every device is an alpha WebP with rounded top corners whose
   bottom bleeds off with no bezel, so each one ends in a fade rather than on
   its own raw cut edge. */
.device {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 300px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
}

.device img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 50px rgba(20, 16, 30, 0.42));
}

.features {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 12px 24px 0;
  display: grid;
  gap: 44px;
}

.feature {
  display: grid;
  gap: 26px;
  align-items: center;
}

.feature-text {
  max-width: var(--column);
}

.feature h2,
.moment h2 {
  font-size: 26px;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 10px;
}

.feature p,
.moment p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 18px;
  max-width: 44ch;
}

.moment {
  max-width: var(--column);
  margin-inline: auto;
}

.privacy-card {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 44px 24px 8px;
}

.privacy-card > div {
  max-width: var(--column);
  margin: 0 auto;
}

.privacy-card h2 {
  margin: 0 0 10px;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.privacy-card p {
  margin: 0;
  color: var(--ink-soft);
}

/* Closing CTA. It reuses the .moment card wholesale, so the typography and the
   glass are the ones already on the page; the only difference is that this one
   centres, because it is a single closing gesture rather than a paragraph. */
.closing {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 44px 24px 0;
}

.closing .moment {
  text-align: center;
}

.closing .moment p {
  margin-inline: auto;
}

@media (min-width: 760px) {
  .hero {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    padding-top: 40px;
  }

  .hero .device {
    max-width: 330px;
  }

  .feature {
    grid-template-columns: 1fr 0.8fr;
    gap: 40px;
  }

  .feature-flip .feature-text {
    order: 2;
  }

  .feature-flip .device {
    order: 1;
  }

  .features {
    gap: 64px;
    padding-top: 40px;
  }
}

/* ---------- Text pages ---------- */

.prose {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 24px 56px;
}

.prose > .glass {
  padding: 30px 28px 34px;
}

.prose h1 {
  font-size: clamp(30px, 7vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 4px;
}

.prose h2 {
  font-size: 21px;
  margin: 36px 0 8px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.prose h3 {
  font-size: 17px;
  margin: 26px 0 6px;
}

.prose p,
.prose li {
  color: var(--ink-soft);
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

.prose .lead {
  font-size: 19px;
  color: var(--ink);
}

.updated {
  font-size: 15px;
  margin-top: 0;
}

.summary {
  background: rgba(var(--glow-rgb), 0.12);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 16px 18px 16px 36px;
  margin: 24px 0 8px;
}

.summary li + li {
  margin-top: 8px;
}

.qa {
  margin-top: 8px;
}

.qa summary {
  cursor: pointer;
  font-weight: 600;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.qa[open] summary {
  border-bottom: none;
}

.qa > div {
  padding: 0 0 16px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
}

/* ---------- Footer ---------- */

/* The footer sits low in the frame, which is exactly where the sky is
   brightest, so it carries the same glass as every other text surface rather
   than trusting the gradient underneath it. */
.site-footer {
  flex-shrink: 0;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 44px 24px 30px;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 15px 22px;
  border-radius: 16px;
  font-size: 15px;
  color: var(--ink-soft);
}

.footer-inner a {
  color: var(--ink-soft);
}