/* Inter, self-hosted. Google's CDN would send every visitor's IP to Google,
   which for an EU site is a consent question we don't need to have. One
   variable file per subset covers all five weights the page uses. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-var-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: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-var-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;
}

/* ============================================================
   Sinilumi - landing page
   "sini lumi" = blue snow. The palette is a deep blue-black with a
   cold aurora wash, deliberately a shade away from Cue's pure #000
   so the umbrella page and the product don't read as the same site.
   ============================================================ */

:root {
  --bg:            #05070e;
  --bg-soft:       #0a0e1a;
  --card:          rgba(255, 255, 255, 0.032);
  --card-solid:    #0c111e;
  --border:        rgba(146, 180, 255, 0.14);
  --border-strong: rgba(146, 180, 255, 0.28);
  --text:          #eaeefb;
  --muted:         #8f9bbb;
  --faint:         #828fb2;   /* 5.85:1 on cards - AA at the small sizes this is used at */
  --ice:           #7fb2ff;   /* SugarSentry's icon blue, lifted for dark UI */
  --ice-deep:      #2f6fe4;
  --frost:         #bcd8ff;
  --success:       #35d399;

  --radius:    18px;
  --radius-sm: 11px;
  --shadow:    0 30px 70px rgba(0, 0, 0, 0.6);

  --gutter: 16px;
  --maxw:   1120px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

/* iOS Safari pans the top-level viewport even when body clips, so html
   needs the rule too for it to actually hold everywhere. */
html { overflow-x: hidden; scroll-behavior: smooth; }

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

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

img { max-width: 100%; display: block; }
a   { color: var(--ice); text-decoration: none; }

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

/* ---------- atmosphere: snow canvas, aurora, film grain ---------- */

#snow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.5;
  will-change: transform;
}

.a1 {
  width: 62vw; height: 62vw;
  top: -26vw; left: -14vw;
  background: radial-gradient(circle, rgba(47, 111, 228, 0.55), transparent 68%);
  animation: drift1 26s ease-in-out infinite alternate;
}
.a2 {
  width: 50vw; height: 50vw;
  top: 26vh; right: -18vw;
  background: radial-gradient(circle, rgba(125, 90, 235, 0.38), transparent 68%);
  animation: drift2 32s ease-in-out infinite alternate;
}
.a3 {
  width: 56vw; height: 56vw;
  bottom: -22vw; left: 18vw;
  background: radial-gradient(circle, rgba(64, 196, 255, 0.24), transparent 70%);
  animation: drift3 38s ease-in-out infinite alternate;
}

@keyframes drift1 { to { transform: translate3d(9vw, 6vh, 0) scale(1.14); } }
@keyframes drift2 { to { transform: translate3d(-11vw, -7vh, 0) scale(1.1); } }
@keyframes drift3 { to { transform: translate3d(7vw, -9vh, 0) scale(0.9); } }

/* Fine grain over the gradients so the large blurred areas don't band. */
.noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- scroll reveal ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].in { opacity: 1; transform: none; }

/* Without JS nothing ever receives .in, so reveal targets must be visible
   by default. main.js adds .js to <html> first thing, which arms the
   hidden-then-reveal state only when the script is actually running. */
html:not(.js) [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Keyboard users shouldn't have to tab the nav on every visit. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.8rem 1.3rem;
  border-radius: 0 0 var(--radius-sm) 0;
  background: var(--frost);
  color: #041026;
  font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px var(--gutter);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(5, 7, 14, 0.82), rgba(5, 7, 14, 0));
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mark-glyph { color: var(--ice); flex: none; }
.mark:hover .mark-glyph { color: var(--frost); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 0.9rem;
  font-weight: 500;
}
.nav-links a { color: var(--muted); transition: color 0.2s ease; }
.nav-links a:hover { color: var(--text); }

/* ---------- shared bits ---------- */

main { position: relative; z-index: 1; }

section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--frost);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
  background: rgba(127, 178, 255, 0.07);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.82rem 1.5rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 0.2s ease, background 0.2s ease,
              border-color 0.2s ease, box-shadow 0.2s ease;
}
.button.small { padding: 0.6rem 1.15rem; font-size: 0.88rem; }

.button.primary {
  background: linear-gradient(180deg, var(--frost), var(--ice));
  color: #041026;
  box-shadow: 0 10px 30px rgba(47, 111, 228, 0.32);
}
.button.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(47, 111, 228, 0.45);
}

.button.ghost {
  border-color: var(--border-strong);
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
}
.button.ghost:hover {
  transform: translateY(-2px);
  border-color: var(--ice);
  background: rgba(127, 178, 255, 0.1);
}

.section-head { margin-bottom: 46px; }
.section-head h2 {
  margin: 20px 0 0;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

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

.hero {
  padding-top: clamp(64px, 14vh, 130px);
  padding-bottom: clamp(70px, 14vh, 140px);
  text-align: center;
}

.hero h1 {
  margin: 26px auto 0;
  font-size: clamp(2.5rem, 8.2vw, 5.1rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.045em;
  max-width: 16ch;
}
.hero h1 .line { display: block; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--frost) 10%, var(--ice) 45%, #a78bfa 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  margin: 26px auto 0;
  max-width: 62ch;
  font-size: clamp(1rem, 2.1vw, 1.16rem);
  color: var(--muted);
}
.hero-sub strong { color: var(--text); font-weight: 600; }
.hero-sub em { color: var(--frost); font-style: italic; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 13px;
  margin-top: 36px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 46px;
  font-size: 0.85rem;
  color: var(--faint);
}
.hero-meta b { color: var(--muted); font-weight: 600; }
.hero-meta .dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--faint);
}

/* ---------- projects ---------- */

.projects { padding-top: 40px; padding-bottom: 40px; }

.project {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
  padding: clamp(28px, 4.5vw, 54px);
  margin-bottom: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color 0.35s ease, transform 0.35s ease;
}
.project:hover { border-color: var(--border-strong); }

/* Cursor-tracked spotlight; --mx/--my are written by main.js. */
.project::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%),
              rgba(127, 178, 255, 0.11), transparent 62%);
}
.project:hover::before { opacity: 1; }

/* A cold edge-light along the top of each card. */
.project::after {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

.project-id {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 22px;
}
.project-icon {
  width: 64px; height: 64px;
  border-radius: 15px;
  flex: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
/* Cue's own "Spotlight" mark. It carries its own black tile with a 6/24
   corner radius, which lands within a pixel of the 15px .project-icon
   radius at this size; the background is a backstop for the seam. */
.cue-icon {
  background: #000;
  /* The mark is black-on-black against this card, so its tile edge would
     otherwise vanish. A faint ring defines it without touching the logo. */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45),
              inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.project h3 {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.project-kind {
  font-size: 0.8rem;
  color: var(--faint);
  font-weight: 500;
}

.project-lead {
  margin: 0 0 22px;
  font-size: 1.04rem;
  color: var(--muted);
}

.project-points {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 13px;
}
.project-points li {
  position: relative;
  padding-left: 24px;
  font-size: 0.94rem;
  color: var(--muted);
}
.project-points b { color: var(--text); font-weight: 600; }
.project-points li::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ice);
  box-shadow: 0 0 12px rgba(127, 178, 255, 0.85);
}

.project-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--faint);
}
.pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--faint);
  box-shadow: 0 0 0 0 rgba(143, 155, 187, 0.5);
}
.pulse.live {
  background: var(--success);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(53, 211, 153, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(53, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 211, 153, 0); }
}

/* --- project visuals --- */

.project-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.phone {
  position: relative;
  width: min(268px, 78vw);
  padding: 9px;
  border-radius: 40px;
  background: linear-gradient(160deg, #2b3550, #0c1120);
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.62),
              inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.project:hover .phone { transform: translateY(-8px) rotate(-1deg); }
.phone img { border-radius: 32px; }
.phone-notch {
  position: absolute;
  top: 19px; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 20px;
  border-radius: 999px;
  background: #05070e;
  z-index: 2;
}

.cue-card {
  width: min(320px, 88vw);
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(170deg, #12182a, #080b14);
  box-shadow: 0 30px 62px rgba(0, 0, 0, 0.6);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.project:hover .cue-card { transform: translateY(-8px) rotate(1deg); }

.cue-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.cue-dow { font-weight: 700; letter-spacing: -0.02em; }
.cue-date { font-size: 0.72rem; color: var(--faint); }

.cue-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 10px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--ev);
  background: rgba(255, 255, 255, 0.028);
  margin-top: 8px;
}
.cue-time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
}
.cue-meta { display: flex; flex-direction: column; line-height: 1.3; }
.cue-meta b { font-size: 0.85rem; font-weight: 600; }
.cue-meta i { font-style: normal; font-size: 0.73rem; color: var(--faint); }
.cue-card-foot {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
  font-size: 0.71rem;
  color: var(--faint);
  text-align: center;
}

/* ---------- approach ---------- */

.approach { padding-top: 80px; padding-bottom: 60px; }

.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
}
.principle {
  padding: 30px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  transition: transform 0.35s ease, border-color 0.35s ease;
}
.principle:hover {
  transform: translateY(-5px);
  border-color: var(--border-strong);
}
.principle-index {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ice);
}
.principle h3 {
  margin: 14px 0 11px;
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.principle p { margin: 0; font-size: 0.93rem; color: var(--muted); }
.principle b { color: var(--text); font-weight: 600; }

/* ---------- cta + footer ---------- */

.cta {
  text-align: center;
  padding-top: 70px;
  padding-bottom: 90px;
}
.cta h2 {
  margin: 0;
  font-size: clamp(1.7rem, 4.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}
.cta p { margin: 14px auto 0; max-width: 52ch; color: var(--muted); }
.cta .hero-actions { margin-top: 28px; }

.about { padding-top: 70px; padding-bottom: 20px; }
.about-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
}
.about-cols p { margin: 0; color: var(--muted); font-size: 1rem; }

.site-foot {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 30px var(--gutter) 46px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--faint);
}
.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.foot-row-sub {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.foot-brand { display: flex; flex-direction: column; gap: 3px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 18px; }
.foot-links a { color: var(--muted); transition: color 0.2s ease; }
.foot-links a:hover { color: var(--text); }
.foot-products { max-width: 62ch; line-height: 1.9; }
.foot-products a { color: var(--faint); text-decoration: underline; text-underline-offset: 2px; }
.foot-products a:hover { color: var(--text); }
.foot-mark { font-weight: 700; color: var(--muted); letter-spacing: -0.01em; }
.foot-note a { color: var(--muted); transition: color 0.2s ease; }
.foot-note a:hover { color: var(--text); }

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

@media (max-width: 880px) {
  .project {
    grid-template-columns: 1fr;
    text-align: left;
  }
  /* Visual leads on narrow screens - the product is the hook, not the list. */
  .project-visual { order: -1; }
}

@media (max-width: 560px) {
  .nav { padding: 14px var(--gutter); }
  .nav-links { gap: 15px; font-size: 0.84rem; }
  .project { padding: 24px 18px; }
  .principle { padding: 24px 20px; }
  .hero-meta { gap: 10px; font-size: 0.8rem; }
  .site-foot { justify-content: flex-start; }
}

/* ---------- App Store finder ---------- */

.finder { padding-top: 70px; padding-bottom: 40px; }

.finder-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.finder-lead {
  margin: 0 0 24px;
  font-size: 1.04rem;
  color: var(--muted);
}

.finder-steps {
  margin: 0 0 28px;
  padding-left: 1.3rem;
  display: grid;
  gap: 12px;
  color: var(--muted);
  font-size: 0.95rem;
}
.finder-steps li::marker { color: var(--ice); font-weight: 700; }
.finder-steps b { color: var(--text); font-weight: 600; }

.finder-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.finder-visual { display: flex; justify-content: center; }

/* --- the mock App Store screen --- */

.store-phone { width: min(280px, 82vw); }

.store {
  position: relative;
  border-radius: 32px;
  background: #f2f2f7;      /* iOS light grouped background */
  color: #1c1c1e;
  padding: 44px 14px 16px;
  min-height: 430px;
  overflow: hidden;
}

.store-head { padding: 0 4px 12px; }
.store-title {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.store-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  background: #e3e3e8;
  color: #8e8e93;
  font-size: 0.87rem;
}
.store-mag { width: 15px; height: 15px; flex: none; }

/* The typed word is revealed by animating its width in steps, which reads as
   typing without needing a script or a monospace face. */
.store-typed {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  color: #1c1c1e;
  font-weight: 500;
}
.store-word {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  animation: store-type 11s steps(11, end) infinite;
}
.store-caret {
  width: 1.5px;
  height: 15px;
  margin-left: 1px;
  background: #0a84ff;
  animation: store-caret 11s infinite;
}
.store-placeholder {
  position: absolute;
  left: 32px;
  animation: store-ph 11s infinite;
}

.store-result {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 18px;
  padding: 12px 8px;
  border-radius: 14px;
  opacity: 0;
  transform: translateY(8px);
  animation: store-result 11s infinite;
}
.store-icon { border-radius: 13px; flex: none; width: 52px; height: 52px; }
.store-meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.store-meta b { font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; }
.store-meta i {
  font-style: normal;
  font-size: 0.72rem;
  color: #6c6c70;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.store-stars { font-size: 0.62rem; color: #b8b8bd; letter-spacing: 1px; margin-top: 2px; }
.store-get {
  margin-left: auto;
  flex: none;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: #0a84ff;
  padding: 0.34rem 0.95rem;
  border-radius: 999px;
  animation: store-tap 11s infinite;
}

/* Says plainly, inside the mock itself, that this is not a real listing. */
.store-hint {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 7px 10px;
  text-align: center;
  font-size: 0.63rem;
  font-weight: 500;
  color: #6c6c70;
  background: rgba(255, 255, 255, 0.82);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

@keyframes store-type {
  0%, 6%     { max-width: 0; }
  30%, 93%   { max-width: 7.2em; }
  95%, 100%  { max-width: 0; }
}
@keyframes store-caret {
  0%, 29%   { opacity: 1; }          /* solid while "typing" */
  31%, 95%  { opacity: 0; }          /* field committed, caret gone */
  97%, 100% { opacity: 1; }
}
@keyframes store-ph {
  0%, 5%     { opacity: 1; }
  7%, 95%    { opacity: 0; }
  97%, 100%  { opacity: 1; }
}
@keyframes store-result {
  0%, 33%   { opacity: 0; transform: translateY(8px); }
  40%, 88%  { opacity: 1; transform: none; }
  93%, 100% { opacity: 0; transform: translateY(8px); }
}
@keyframes store-tap {
  0%, 57%   { transform: scale(1); background: #0a84ff; }
  60%       { transform: scale(0.9); background: #0060df; }
  63%, 100% { transform: scale(1); background: #0a84ff; }
}

/* Reduced motion: no typing, no loop - just the finished state. */
@media (prefers-reduced-motion: reduce) {
  .store-word { max-width: none; animation: none; }
  .store-caret, .store-placeholder { display: none; }
  .store-result { opacity: 1; transform: none; animation: none; }
  .store-get { animation: none; }
}

@media (max-width: 880px) {
  .finder-grid { grid-template-columns: 1fr; }
  .finder-visual { order: -1; }
}

/* ---------- sub-pages (privacy, terms, 404) ---------- */

.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 8vh, 80px) var(--gutter) 90px;
}
.doc h1 {
  margin: 20px 0 6px;
  font-size: clamp(2rem, 5.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
}
.doc .updated { color: var(--faint); font-size: 0.85rem; }
.doc h2 {
  margin: 44px 0 12px;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.doc p, .doc li { color: var(--muted); font-size: 0.97rem; }
.doc ul { padding-left: 1.2rem; display: grid; gap: 9px; }
.doc li::marker { color: var(--ice); }
.doc a { text-decoration: underline; text-underline-offset: 2px; }
.doc strong { color: var(--text); font-weight: 600; }

/* A draft notice has to be impossible to miss - these documents are
   placeholders and must not be mistaken for ones that are in force. */
.draft-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 34px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 176, 80, 0.4);
  border-radius: var(--radius-sm);
  background: rgba(255, 176, 80, 0.09);
  color: #ffd9a8;
  font-size: 0.88rem;
  line-height: 1.55;
}
.draft-banner b { color: #ffc178; }

.doc-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
}
.doc-back:hover { color: var(--text); }

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

.oops {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px var(--gutter);
}
.oops-code {
  font-size: clamp(4.5rem, 18vw, 9rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  background: linear-gradient(120deg, var(--frost) 10%, var(--ice) 50%, #a78bfa 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.oops h1 {
  margin: 18px 0 10px;
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.oops p { margin: 0 auto 28px; max-width: 46ch; color: var(--muted); }

/* Cue mock: broadcaster column + timezone label, closer to the real calendar. */
.cue-card-head > div { display: flex; flex-direction: column; }
.cue-tz {
  font-size: 0.64rem;
  color: var(--faint);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.cue-ch {
  margin-left: auto;
  flex: none;
  font-size: 0.64rem;
  font-weight: 500;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 5px;
  padding: 3px 7px;
}
.cue-meta { min-width: 0; }
.cue-meta i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- glucose trace card ---------- */

.trace-card {
  width: min(268px, 78vw);
  margin: 18px 0 0;
  padding: 14px 15px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
}
.trace-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.trace-val { font-size: 0.76rem; color: var(--muted); }
.trace-val b {
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-right: 3px;
}
.trace-tag {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--success);
  border: 1px solid rgba(53, 211, 153, 0.35);
  border-radius: 999px;
  padding: 2px 8px;
}
.trace-plot { height: 76px; }
.trace-plot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mt-band { fill: rgba(53, 211, 153, 0.10); }
.mt-line {
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.mt-dot { fill: var(--text); }
.trace-card figcaption {
  margin-top: 7px;
  font-size: 0.63rem;
  color: var(--faint);
}

/* Split-flap cells need a stable box, or each flip resizes the row. */
.cue-time[data-flap] { display: inline-block; min-width: 4.2ch; }
.cue-ch[data-flap] { display: inline-block; min-width: 8ch; text-align: center; }
.cue-meta b[data-flap] { display: inline-block; min-width: 15ch; }

/* ---------- cross-document page transitions ---------- */
/* Progressive: browsers without the API simply navigate as before. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 0.22s ease both; }
  ::view-transition-new(root) { animation: vt-in 0.3s ease both; }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- bare page: header + contact only ---------- */
/* The page was cut down to the mark and the e-mail address; the section
   styles above are unused until content comes back. */
.bare {
  min-height: calc(100vh - 70px);
  min-height: calc(100svh - 70px);
  display: grid;
  place-items: center;
  padding: 0 var(--gutter) 70px;
}
.bare-mail {
  font-size: clamp(20px, 3.2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--frost);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-strong);
  transition: color .2s, border-color .2s;
}
.bare-mail:hover { color: #fff; border-color: var(--ice); }

/* ---------- home page: the timetable app, explained ---------- */
/* sinilumi.com is the home page of the "Sinilumi" Google OAuth app shared by
   all Sinilumi apps, so it must say publicly what the sign-in is for and which
   data it uses, and link the privacy policy - without promoting any one app. */
.home { max-width: 760px; margin: 0 auto; padding: 72px var(--gutter) 40px; }
.home h1 { margin: 0; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; }
.home-lead { margin: 16px 0 0; font-size: 1.15rem; color: var(--muted); max-width: 52ch; }
.home-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.home-about { margin-top: 64px; }
.home-about h2 { margin: 40px 0 12px; font-size: 1.25rem; letter-spacing: -0.01em; }
.home-about h2:first-child { margin-top: 0; }
.home-about p { margin: 0 0 12px; color: var(--muted); max-width: 64ch; }
.home-about a { color: var(--ice); text-decoration: underline; text-underline-offset: 3px; }
.home-features { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.home-features li { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; }
.home-features b { display: block; margin-bottom: 4px; color: var(--text); }
.home-features span { color: var(--muted); font-size: 0.93rem; }
.home-foot { position: relative; z-index: 1; max-width: calc(760px - 2 * var(--gutter)); margin: 0 auto;
  padding: 28px var(--gutter) 48px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 0.9rem; }
.home-foot a { color: var(--muted); }
.home-foot a:hover { color: var(--frost); }
.home-apps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.home-apps li { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; }
.home-apps h3 { margin: 0 0 8px; font-size: 1.2rem; letter-spacing: -0.01em; }
.home-apps p { margin: 0 0 16px; }
.home-list { margin: 0 0 12px; padding-left: 1.1em; color: var(--muted); max-width: 64ch; }
.home-list li { margin-bottom: 8px; }
.home-list b { color: var(--text); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header flush left on the home page, across the full width. */
.nav.nav-left { max-width: none; margin: 0; padding-left: 28px; padding-right: 28px; }

/* A snowflake drawn as a constellation (sinilumi = "blue snow"), in the same
   style as the timetable app's infinity sign: slightly uneven stars joined by
   straight lines, the brightest at the centre. Stars appear, the lines draw
   through them, then one point of light keeps travelling out and back along
   each arm. */
.inf { display: block; width: min(360px, 82vw); height: auto; overflow: visible; margin: 0 0 30px -6px; }
.inf .link { fill: none; stroke: rgba(188, 216, 255, .55); stroke-width: 1; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: inf-draw 1.8s .75s cubic-bezier(.2,.7,.15,1) forwards; }
.inf .star { fill: #eef4ff; transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.2);
  animation: inf-appear .7s calc(.1s + var(--i) * .09s) cubic-bezier(.2,.7,.15,1) forwards; }
.inf .halo { fill: url(#inf-halo); opacity: 0; animation: inf-glow 1.6s 1.9s cubic-bezier(.2,.7,.15,1) forwards; }
.inf .alpha { animation: inf-appear .7s calc(.1s + var(--i) * .09s) cubic-bezier(.2,.7,.15,1) forwards,
                         inf-breathe 5s 2.8s ease-in-out infinite; }
.inf .flow { fill: none; stroke: #e4efff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: .03 .97; stroke-dashoffset: 0; opacity: 0;
  filter: drop-shadow(0 0 4px rgba(127, 178, 255, .9));
  animation: inf-glow 1s 2.3s ease forwards, inf-flow 11s 2.3s linear infinite; }
.inf.flake { width: min(230px, 58vw); margin: 0 0 26px -8px; }
.inf.flake .star { animation-delay: calc(.1s + var(--i) * .05s); }
.inf.flake .alpha { animation-delay: .1s, 2.8s; }
.inf.flake .flow { stroke-dasharray: .018 .982; animation: inf-glow 1s 2.3s ease forwards, inf-flow 16s 2.3s linear infinite; }
.home-intro h1, .home-intro .home-lead { opacity: 0; animation: inf-rise .9s cubic-bezier(.2,.7,.15,1) forwards; }
.home-intro h1 { animation-delay: 1.5s; }
.home-intro .home-lead { animation-delay: 1.75s; }

/* The e-mail address: small, but it arrives last with a light sweeping over
   it, and on hover the sweep repeats, the underline draws in and the spark
   turns. */
.hero-mail { position: relative; display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
  padding: 6px 0; font-size: 15px; font-weight: 500; letter-spacing: .03em; text-decoration: none;
  opacity: 0; animation: inf-rise .9s 2.1s cubic-bezier(.2,.7,.15,1) forwards; }
.hero-mail .txt { background: linear-gradient(100deg, var(--frost) 0%, var(--frost) 38%, #ffffff 50%, var(--frost) 62%, var(--frost) 100%);
  background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: inf-sheen 1.6s 2.6s ease-in-out both; }
.hero-mail:hover .txt, .hero-mail:focus-visible .txt { animation: inf-sheen 1.1s ease-in-out both; }
.hero-mail .spark { color: var(--ice); font-size: 12px; transition: transform .6s cubic-bezier(.2,.7,.15,1), color .3s; }
.hero-mail:hover .spark, .hero-mail:focus-visible .spark { transform: rotate(180deg) scale(1.25); color: #c9b6ff; }
.hero-mail::after { content: ""; position: absolute; left: 22px; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--ice), #b69cff); transform: scaleX(0); transform-origin: left;
  transition: transform .55s cubic-bezier(.2,.7,.15,1); }
.hero-mail:hover::after, .hero-mail:focus-visible::after { transform: scaleX(1); }

@keyframes inf-draw { to { stroke-dashoffset: 0; } }
@keyframes inf-appear { to { opacity: 1; transform: scale(1); } }
@keyframes inf-glow { to { opacity: 1; } }
@keyframes inf-breathe { 50% { transform: scale(1.18); } }
@keyframes inf-flow { to { stroke-dashoffset: -1; } }
@keyframes inf-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes inf-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .inf .link, .inf .star, .inf .halo, .inf .alpha, .home-intro h1, .home-intro .home-lead, .hero-mail, .hero-mail .txt {
    animation: none !important; opacity: 1; transform: none; stroke-dashoffset: 0; }
  .hero-mail .txt { background-position: 0 0; }
  .inf .flow { display: none; }
}
@media (max-width: 600px) {
  .nav.nav-left { padding-left: var(--gutter); padding-right: var(--gutter); }
}