:root {
  --accent: #4FD18A;
  --accent-2: #36c0ff;
  --pink: #F55C8C;
  --orange: #FAA34E;
  --bg: #ffffff;
  --ink: #221a2e;
  --text: #221a2e;
  --muted: rgba(34, 26, 46, 0.66);
  --muted-2: rgba(34, 26, 46, 0.48);
  --card: rgba(255, 255, 255, 0.72);
  --card-2: rgba(255, 255, 255, 0.88);
  --border: rgba(34, 26, 46, 0.10);
  --hairline: rgba(34, 26, 46, 0.14);
  --radius: 22px;
  --grad: linear-gradient(100deg, var(--accent), var(--pink) 70%, var(--orange));
  --maxw: 1320px; /* wide container: use the free space left/right on desktop */
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; scroll-padding-top: 98px; }
img { max-width: 100%; }
/* Never let a long word or headline force horizontal scroll on a narrow phone. */
h1, h2, h3, h4, p, summary, li, .big { overflow-wrap: break-word; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, .brand, .amt {
  font-family: "Space Grotesk", "Inter", sans-serif;
  letter-spacing: -0.025em;
}

body::before { display: none; }
body::after  { display: none; }

a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Nav ---------- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  background: rgba(255, 255, 255, 0.62);
  border-bottom: 1px solid var(--border);
}
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 82px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 21px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.brand img { width: 46px; height: 46px; border-radius: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a { color: var(--muted); font-size: 16px; font-weight: 500; transition: color .15s; }
.nav-links a:hover { color: var(--text); }
@media (max-width: 720px) { .nav-links { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(160deg, #5BD897, #2FB877); color: #06120b !important;
  font-weight: 700; font-size: 15px; padding: 13px 24px; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(79, 209, 138, 0.30), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), filter .2s;
  overflow: hidden; isolation: isolate;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(79, 209, 138, 0.42); }
.btn:hover::after { transform: translateX(120%); }
.btn.ghost {
  background: rgba(255,255,255,.70); color: var(--text) !important;
  border: 1px solid var(--hairline); box-shadow: 0 6px 18px rgba(34,26,46,.08); backdrop-filter: blur(8px);
}
.btn.ghost:hover { background: rgba(255,255,255,.92); box-shadow: 0 10px 26px rgba(34,26,46,.12); }

/* ---------- Hero ---------- */
header.hero { padding: 46px 0 40px; margin-top: 82px; text-align: center; }
.app-icon {
  width: 76px; height: 76px; border-radius: 20px; display: block; margin: 0 auto 26px;
  box-shadow: 0 18px 44px rgba(34,26,46,.20), 0 0 0 1px rgba(255,255,255,.5);
}
/* Mobile/base size. On desktop the headline spans the full hero width as a
   banner and is sized up inside the .hero-grid media block (longest word:
   "fitness" must still fit on one line). */
.hero h1 { font-size: clamp(26px, 4.6vw, 62px); line-height: 1.04; font-weight: 700; white-space: nowrap; }
.hero h1 .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.sub { max-width: 600px; margin: 24px auto 34px; font-size: clamp(17px, 2.1vw, 20px); color: var(--muted); }
.hero .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 44px; }

/* ---------- Hero rotating word ---------- */
/* Fixed-width slot (min-width set by JS to the widest word) so the static
   "Organise your" text never shifts as words of different lengths rotate. */
.hero-flip { display: inline-flex; align-items: center; justify-content: flex-start; gap: .2em; vertical-align: baseline; }
.hero-flip-word {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-flip-ico { width: .72em; height: .72em; flex-shrink: 0; color: var(--accent); }
@keyframes heroWordIn  { from { opacity: 0; transform: translateY(.24em); } to { opacity: 1; transform: none; } }
@keyframes heroWordOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-.24em); } }
.hero-flip.word-in  { animation: heroWordIn  .4s var(--ease) forwards; }
.hero-flip.word-out { animation: heroWordOut .26s var(--ease) forwards; }

/* ---------- Hero: 2026 Year in Review heatmap ---------- */
.yir { position: relative; width: min(520px, 94vw); margin: 56px auto 0; }
.yir-glow {
  position: absolute; inset: -14% -8% -4%; z-index: -1; border-radius: 44px;
  background: radial-gradient(closest-side, rgba(79,209,138,.30), rgba(54,192,255,.16) 55%, transparent 74%);
  filter: blur(32px);
}
.yir-panel {
  --cols: 34; --gap: 3px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 22px 22px 24px;
  box-shadow: 0 30px 70px rgba(34,26,46,.14), inset 0 1px 0 rgba(255,255,255,.7);
}
.yir-header { text-align: center; margin-bottom: 16px; }
.yir-year { font-size: 12px; letter-spacing: .16em; color: var(--muted-2); font-weight: 700; text-transform: uppercase; }
.yir-title { font-family: "Space Grotesk", "Inter", sans-serif; font-size: 22px; font-weight: 700; color: var(--ink); margin-top: 3px; letter-spacing: -.02em; }
/* One column by default; two columns on wider viewports (rule below). Gap
   handles spacing so cards never need their own margins. */
#yirCards { display: grid; grid-template-columns: 1fr; gap: 11px; align-items: start; }
.yir-card {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 13px 15px 15px; box-shadow: 0 4px 14px rgba(34,26,46,.05);
}
.yir-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.yir-id { display: flex; align-items: center; gap: 10px; }
.yir-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.yir-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.yir-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.yir-pct { font-size: 15px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Columns are sized to always fit the panel width, so the whole grid is
   visible on every screen. Nothing is clipped off-screen, which means the
   last cell reveals exactly when the counter hits its target — grid and
   numbers finish together and loop together. */
.yir-grid {
  display: grid; grid-template-rows: repeat(7, auto); grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  gap: var(--gap);
}
.yir-cell { aspect-ratio: 1 / 1; border-radius: 3px; background: rgba(34,26,46,.06); transition: background .6s ease; }
.yir-footer { text-align: center; margin-top: 14px; font-size: 12px; color: var(--muted); }
.yir-footer b { color: var(--ink); font-weight: 700; }
@media (max-width: 560px) {
  .yir-panel { --gap: 2px; padding: 18px 16px 20px; border-radius: 22px; }
  .yir-title { font-size: 19px; }
  .yir-name { font-size: 14px; }
  .yir-icon { width: 26px; height: 26px; font-size: 13px; }
}
/* Desktop: widen the panel and lay the habit cards out two-up. The panel grows
   so each half-width card keeps enough room for the 34 day-columns, so the
   cells stay square and crisp instead of collapsing to sub-pixel dots. */
@media (min-width: 960px) {
  /* 960px, not 760: below that, two half-width cards would shrink each day
     cell to ~6px, smaller than the single-column layout it replaces. 100%
     keeps the panel inside .wrap's content box; 94vw alone can overshoot it
     by a few px (vw includes the scrollbar). */
  .yir { width: min(900px, 94vw, 100%); }
  #yirCards { grid-template-columns: 1fr 1fr; }
}

/* ---------- Phone mockup ---------- */
.device { position: relative; width: 300px; margin: 60px auto 0; }
.device-glow {
  position: absolute; inset: -16% -10% -6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(79,209,138,.35), rgba(245,92,140,.22) 55%, transparent 72%);
  filter: blur(28px);
}
.phone {
  border-radius: 46px; padding: 11px;
  background: linear-gradient(160deg, #2a2740, #0f0d1d);
  box-shadow: 0 40px 90px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.10);
}
.screen {
  position: relative; border-radius: 36px; overflow: hidden; padding: 22px 16px 20px;
  background:
    radial-gradient(80% 40% at 20% 0%, rgba(79,209,138,.16), transparent 60%),
    radial-gradient(70% 40% at 100% 18%, rgba(245,92,140,.16), transparent 60%),
    linear-gradient(170deg, #1a1136, #0c0a20);
  min-height: 540px;
}
.screen .notch { width: 96px; height: 26px; background: #07060f; border-radius: 0 0 16px 16px; margin: -22px auto 18px; }
.app-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ring {
  width: 62px; height: 62px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--accent) 0 62%, rgba(255,255,255,.10) 62% 100%);
  -webkit-mask: none;
}
.ring span { width: 48px; height: 48px; border-radius: 50%; background: #120f26; display: grid; place-items: center; font-weight: 700; font-family: "Space Grotesk", sans-serif; }
.app-xp { flex: 1; }
.app-xp .xp-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.app-xp .xp-row b { color: var(--text); font-weight: 700; }
.xp-bar { height: 9px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.xp-bar i { display: block; height: 100%; width: 62%; border-radius: 999px; background: var(--grad); }
.app-streak {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
  color: var(--orange); background: rgba(250,163,78,.12); border: 1px solid rgba(250,163,78,.25);
  padding: 6px 12px; border-radius: 999px; margin-bottom: 16px;
}
.app-card {
  display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 500;
  padding: 13px 15px; border-radius: 16px; margin-bottom: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
}
.app-card b { margin-left: auto; color: var(--accent); font-weight: 700; font-size: 13px; }
.app-card .chk { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #06120b; background: var(--accent); }
.app-card .chk.o { background: transparent; border: 2px solid rgba(255,255,255,.28); }
.app-card.done span:not(.chk), .app-card.done { color: var(--muted); }

/* ---------- Sections ---------- */
section { padding: 84px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 50px; }
.section-title { font-size: clamp(28px, 4.2vw, 44px); font-weight: 700; margin-bottom: 14px; }
.section-sub { color: var(--muted); font-size: 17px; }
.kicker { display: block; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }

/* ---------- Why Kameto ---------- */
.why { padding-top: 52px; }
.why-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.why-title { margin-bottom: 24px; }
.why-lead {
  font-size: clamp(18px, 2.3vw, 22px); line-height: 1.55;
  color: var(--text); font-weight: 500; margin: 0 auto 22px; max-width: 660px;
}
.why-body {
  font-size: 17px; line-height: 1.72; color: var(--muted);
  margin: 0 auto 18px; max-width: 660px;
}
.why-greek { color: var(--accent); font-weight: 600; white-space: nowrap; }
.why-close {
  margin-top: 34px;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: clamp(24px, 4vw, 34px); font-weight: 700;
  letter-spacing: -.02em; color: var(--ink);
}
.why-close .why-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 767px) {
  .why { padding-top: 20px; }
  .why-body { font-size: 15.5px; }
  .why-close { margin-top: 26px; }
}

/* ---------- Feature grid ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }
.card {
  position: relative; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .3s var(--ease), border-color .3s, background .3s;
  overflow: hidden;
}
.card::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--hairline), transparent); }
.card:hover { transform: translateY(-5px); border-color: rgba(79,209,138,.34); background: var(--card-2); }
.card .ico {
  width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 18px;
  color: var(--accent);
  background: linear-gradient(150deg, rgba(79,209,138,.20), rgba(54,120,255,.10));
  border: 1px solid rgba(79,209,138,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.card .ico svg { width: 25px; height: 25px; }
.card h3 { font-size: 19px; margin-bottom: 9px; font-weight: 600; letter-spacing: -.01em; }
.card p { color: var(--muted); font-size: 15px; }

/* ---------- The loop ---------- */
.loop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 780px) { .loop { grid-template-columns: repeat(2, 1fr); } }
.step {
  text-align: center; padding: 28px 18px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--border);
}
.step .n {
  width: 40px; height: 40px; margin: 0 auto 14px; border-radius: 12px; display: grid; place-items: center;
  font-family: "Space Grotesk", sans-serif; font-weight: 700; color: #06120b; background: var(--grad);
}
.step h4 { font-size: 16px; margin-bottom: 6px; font-weight: 600; }
.step p { font-size: 14px; color: var(--muted); }

/* ---------- Pricing ---------- */
.price-card {
  position: relative; max-width: 480px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: 28px; padding: 42px 36px; text-align: center;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px rgba(34,26,46,.16);
}
.price-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(79,209,138,.5), transparent 45%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.trial-badge {
  display: inline-block; font-size: 13px; font-weight: 700; color: #06120b;
  background: var(--grad); padding: 7px 16px; border-radius: 999px; margin-bottom: 20px;
}
.plans { display: flex; gap: 14px; margin: 8px 0 26px; }
.plan { flex: 1; border: 1px solid var(--border); border-radius: 18px; padding: 20px 12px; transition: border-color .2s, background .2s; }
.plan.best { border-color: var(--accent); background: rgba(79,209,138,0.08); position: relative; }
.plan.best::after {
  content: "SAVE 52%"; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; color: #06120b; background: var(--accent);
  padding: 4px 11px; border-radius: 999px;
}
.plan .amt { font-size: 30px; font-weight: 700; }
.plan .per { color: var(--muted); font-size: 14px; }
.price-card ul { list-style: none; text-align: left; margin: 6px 0 28px; }
.price-card li { padding: 8px 0; color: rgba(34,26,46,.82); font-size: 15px; display: flex; gap: 11px; align-items: center; }
.price-card li::before { content: "✓"; color: var(--accent); font-weight: 800; }

/* ---------- Legal pages ---------- */
.legal { margin-top: 82px; padding: 28px 0 96px; }   /* margin-top clears the fixed 82px nav (title was tucking under it) */
.legal .wrap { max-width: 780px; }
.legal h1 { font-size: clamp(32px, 5vw, 46px); font-weight: 700; margin-bottom: 8px; }
.legal .updated { color: var(--muted); font-size: 15px; margin-bottom: 38px; }
.legal h2 { font-size: 22px; font-weight: 600; margin: 36px 0 12px; }
.legal h3 { font-size: 17px; font-weight: 600; margin: 22px 0 8px; }
.legal p, .legal li { color: rgba(34,26,46,.80); font-size: 16px; margin-bottom: 12px; }
.legal ul { padding-left: 22px; margin-bottom: 12px; }
.legal a { color: var(--accent); text-decoration: underline; }
.legal .note { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; color: var(--muted); font-size: 14px; }

/* ---------- Editorial footer ---------- */
.kameto-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 30px;
  padding: clamp(56px, 7vw, 104px) 0 0;
  color: var(--ink);
  background: linear-gradient(
    180deg,
    var(--bg) 0%,
    color-mix(in srgb, var(--pink) 24%, var(--bg)) 45%,
    color-mix(in srgb, var(--pink) 72%, var(--bg)) 100%
  );
}
.kameto-footer-wrap {
  position: relative;
  z-index: 4;
  max-width: none;
  padding: 0 32px;
}
.kameto-footer-top {
  display: grid;
  grid-template-columns: repeat(3, max-content) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 104px);
  align-items: start;
  min-height: 238px;
}
.kameto-footer-column { display: flex; flex-direction: column; gap: 12px; }
.kameto-footer-column h2 {
  margin: 0 0 4px;
  color: var(--muted-2);
  font: 600 15px/1.1 "Space Grotesk", "Inter", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.kameto-footer-column a,
.kameto-footer-legal a {
  width: fit-content;
  color: var(--ink);
  font: 600 16px/1.2 "Space Grotesk", "Inter", sans-serif;
  transition: opacity .18s ease, transform .18s var(--ease);
}
.kameto-footer-column a:hover,
.kameto-footer-legal a:hover { opacity: .62; transform: translateX(2px); }
.kameto-footer-socials {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
  padding-top: 2px;
}
.kameto-footer-socials .social-row {
  width: min(100%, 470px);
  justify-content: space-between;
  gap: 16px;
}
.kameto-footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0 24px;
  color: var(--muted);
  font: 500 14px/1.4 "Space Grotesk", "Inter", sans-serif;
}
.kameto-footer-legal p { margin: 0; }
.kameto-footer-legal-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 28px; }
.kameto-footer-legal a { font-size: 14px; }
.kameto-footer-wordmark {
  position: relative;
  z-index: 2;
  width: max-content;
  height: .72em;
  overflow: hidden;
  margin-left: -1.4vw;
  color: var(--ink);
  font: 700 clamp(80px, 16.5vw, 460px)/.8 "Space Grotesk", "Inter", sans-serif;
  letter-spacing: -.02em;
  white-space: nowrap;
  transform: scaleX(1.24);
  transform-origin: left bottom;
}
.kameto-footer-floats {
  position: absolute;
  inset: 0;
  z-index: auto;
  pointer-events: none;
}
.kameto-footer-icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.kameto-footer-float {
  position: absolute;
  top: var(--top);
  left: var(--left);
  z-index: var(--z, 1);
  width: var(--size);
  height: var(--size);
  color: var(--icon-color, var(--ink));
  will-change: transform;
}
.kameto-footer-float svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  shape-rendering: crispEdges;
  image-rendering: pixelated;
  filter: drop-shadow(4px 6px 0 color-mix(in srgb, var(--ink) 22%, transparent));
}
.kameto-footer-accent { fill: var(--icon-accent, var(--pink)); }
.kameto-footer-pixel-outline { fill: var(--ink); }
.kameto-footer-pixel-dark { fill: color-mix(in srgb, currentColor 78%, var(--ink)); }
.kameto-footer-pixel-mid { fill: color-mix(in srgb, currentColor 58%, var(--bg)); }
.kameto-footer-pixel-light { fill: color-mix(in srgb, currentColor 28%, var(--bg)); }
.kameto-footer-pixel-shadow { fill: color-mix(in srgb, var(--ink) 72%, currentColor); }
.kameto-footer-pixel-green { fill: color-mix(in srgb, var(--accent) 68%, var(--ink)); }
.kameto-footer-pixel-blue { fill: color-mix(in srgb, var(--accent-2) 68%, var(--ink)); }
.kameto-footer-pixel-pink { fill: color-mix(in srgb, var(--pink) 68%, var(--ink)); }
.kameto-footer-pixel-orange { fill: color-mix(in srgb, var(--orange) 68%, var(--ink)); }
.kameto-footer-pixel-gold { fill: color-mix(in srgb, var(--orange) 78%, var(--bg)); }
.kameto-footer-pixel-violet { fill: color-mix(in srgb, var(--pink) 56%, var(--accent-2)); }
.kameto-footer-pixel-white { fill: color-mix(in srgb, var(--bg) 92%, var(--accent-2)); }
.kameto-footer-pixel-cast { fill: var(--ink); opacity: .24; }
.kameto-footer-float-a { animation: kameto-footer-float-a var(--duration, 8s) ease-in-out var(--delay, 0s) infinite; }
.kameto-footer-float-b { animation: kameto-footer-float-b var(--duration, 8s) ease-in-out var(--delay, 0s) infinite; }
.kameto-footer-float-c { animation: kameto-footer-float-c var(--duration, 8s) ease-in-out var(--delay, 0s) infinite; }
@keyframes kameto-footer-float-a {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-14px) rotate(3deg); }
}
@keyframes kameto-footer-float-b {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-10px) rotate(-4deg); }
}
@keyframes kameto-footer-float-c {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(4px, -18px); }
}

/* ---------- Social icons ---------- */
.social-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.social-ico {
  position: relative;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.6);
  color: var(--muted);
  transition: transform .28s var(--ease), color .2s, background .2s, border-color .2s, box-shadow .28s var(--ease);
}
.social-ico::before {
  content: ""; width: 20px; height: 20px;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
  transition: transform .28s var(--ease);
}
.social-ico:hover { transform: translateY(-4px) scale(1.06); color: #fff; border-color: transparent; }
.social-ico:hover::before { transform: scale(1.08) rotate(-4deg); }
.social-ico:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.soc-tiktok    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E"); }
.soc-instagram { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41 1.27-.06 1.65-.07 4.85-.07M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.3-1.46.72-2.13 1.38C1.35 2.68.93 3.35.63 4.14.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.3.79.72 1.46 1.38 2.13.67.66 1.34 1.08 2.13 1.38.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56.79-.3 1.46-.72 2.13-1.38.66-.67 1.08-1.34 1.38-2.13.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91-.3-.79-.72-1.46-1.38-2.13C21.32 1.35 20.65.93 19.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 100 12.32 6.16 6.16 0 000-12.32zM12 16a4 4 0 110-8 4 4 0 010 8zm6.41-10.85a1.44 1.44 0 100 2.88 1.44 1.44 0 000-2.88z'/%3E%3C/svg%3E"); }
.soc-linkedin  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 110-4.13 2.06 2.06 0 010 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E"); }
.soc-x         { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E"); }
.soc-facebook  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z'/%3E%3C/svg%3E"); }
.soc-reddit    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 11.78c0-1.45-1.18-2.62-2.62-2.62-.7 0-1.34.28-1.81.73-1.78-1.29-4.24-2.11-6.98-2.2l1.19-5.6 3.88.82c.05.99.87 1.79 1.87 1.79 1.04 0 1.88-.84 1.88-1.88S20.44.94 19.4.94c-.74 0-1.38.43-1.68 1.06l-4.33-.92c-.13-.03-.26 0-.36.07-.11.06-.18.17-.21.29l-1.32 6.23c-2.79.07-5.29.89-7.09 2.19-.47-.45-1.11-.73-1.81-.73-1.44 0-2.62 1.17-2.62 2.62 0 1.06.63 1.97 1.53 2.38-.04.26-.06.52-.06.79 0 3.99 4.65 7.23 10.38 7.23s10.38-3.24 10.38-7.23c0-.26-.02-.53-.06-.79.9-.41 1.53-1.33 1.53-2.38zM7.62 13.7c0-1.04.84-1.88 1.88-1.88s1.88.84 1.88 1.88-.84 1.88-1.88 1.88-1.88-.84-1.88-1.88zm10.5 4.9c-1.28 1.28-3.73 1.38-4.45 1.38s-3.17-.1-4.45-1.38a.487.487 0 010-.69c.19-.19.5-.19.69 0 .81.81 2.54.97 3.76.97s2.95-.16 3.76-.97c.19-.19.5-.19.69 0 .19.19.19.5 0 .69zm-.29-3.02c-1.04 0-1.88-.84-1.88-1.88s.84-1.88 1.88-1.88 1.88.84 1.88 1.88-.84 1.88-1.88 1.88z'/%3E%3C/svg%3E"); }

.soc-tiktok:hover    { background: #010101; box-shadow: 0 12px 26px rgba(0, 0, 0, .28); }
.soc-instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); box-shadow: 0 12px 26px rgba(220, 39, 67, .32); }
.soc-linkedin:hover  { background: #0A66C2; box-shadow: 0 12px 26px rgba(10, 102, 194, .32); }
.soc-x:hover         { background: #000; box-shadow: 0 12px 26px rgba(0, 0, 0, .28); }
.soc-facebook:hover  { background: #1877F2; box-shadow: 0 12px 26px rgba(24, 119, 242, .32); }
.soc-reddit:hover    { background: #FF4500; box-shadow: 0 12px 26px rgba(255, 69, 0, .32); }

.kameto-footer .social-row { margin-top: 0; }

/* ---------- Cookie consent ---------- */
.cookie-consent {
  position: fixed; z-index: 100; left: 24px; right: 24px; bottom: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  max-width: 920px; margin: 0 auto; padding: 20px 22px;
  color: var(--text); background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(34, 26, 46, .14); border-radius: 20px;
  box-shadow: 0 18px 54px rgba(34, 26, 46, .18);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  animation: cookie-in .35s var(--ease) both;
}
.cookie-consent.is-closing { animation: cookie-out .22s ease both; }
.cookie-consent-copy { min-width: 0; }
.cookie-consent h2 { font-size: 18px; margin-bottom: 3px; }
.cookie-consent p { max-width: 620px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.cookie-consent a { display: inline-block; margin-top: 6px; color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: underline; }
.cookie-consent-actions { display: flex; flex: 0 0 auto; gap: 9px; align-items: center; }
.cookie-btn { border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; padding: 11px 16px; white-space: nowrap; }
.cookie-btn-secondary { color: var(--text); background: rgba(34, 26, 46, .07); }
.cookie-btn-secondary:hover { background: rgba(34, 26, 46, .12); }
.cookie-btn-primary { color: #06120b; background: linear-gradient(160deg, #5BD897, #2FB877); box-shadow: 0 7px 18px rgba(79, 209, 138, .24); }
.cookie-btn-primary:hover { filter: brightness(.97); transform: translateY(-1px); }
.cookie-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
@keyframes cookie-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes cookie-out { to { opacity: 0; transform: translateY(16px); } }
@media (max-width: 620px) {
  .cookie-consent { left: 14px; right: 14px; bottom: 14px; align-items: stretch; flex-direction: column; gap: 14px; padding: 18px; }
  .cookie-consent-actions { justify-content: stretch; }
  .cookie-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-consent, .cookie-consent.is-closing { animation: none; }
  .cookie-btn-primary:hover { transform: none; }
}

/* ---------- Socials page ---------- */
.socials-hero { text-align: center; padding: 120px 0 80px; margin-top: 82px; }
.socials-hero .kicker { justify-content: center; }
.socials-hero h1 { font-size: clamp(34px, 5vw, 56px); letter-spacing: -.03em; margin: 14px 0 16px; }
.socials-hero p.lede { max-width: 620px; margin: 0 auto 48px; font-size: clamp(17px, 2.1vw, 20px); color: var(--muted); }
.socials-big { display: flex; justify-content: center; align-items: center; gap: clamp(14px, 3vw, 34px); flex-wrap: wrap; }
.socials-big .social-ico { width: clamp(64px, 9vw, 96px); height: clamp(64px, 9vw, 96px); box-shadow: 0 8px 22px rgba(34, 26, 46, .07); }
.socials-big .social-ico::before { width: clamp(30px, 4.4vw, 46px); height: clamp(30px, 4.4vw, 46px); }
.socials-big .social-ico:hover { transform: translateY(-8px) scale(1.08); }
.social-tag { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: var(--muted-2); font-weight: 500; }
.socials-cell { display: flex; flex-direction: column; align-items: center; }
@media (max-width: 600px) {
  .socials-hero { padding: 84px 0 56px; margin-top: 70px; }
  .socials-big { gap: 18px; }
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn::after { display: none; }
  .kameto-footer-float-a,
  .kameto-footer-float-b,
  .kameto-footer-float-c { animation: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  html { scroll-padding-top: 86px; }
  .wrap { padding: 0 18px; }
  nav .wrap { height: 70px; }
  header.hero { padding: 32px 0 24px; margin-top: 70px; }
  section { padding: 58px 0; }
  /* Keep the two CTAs side by side on phones, splitting the width evenly. */
  .hero .cta-row { gap: 10px; flex-wrap: nowrap; }
  .device { width: min(86vw, 300px); }
  .card { padding: 22px; }
  .price-card { padding: 32px 22px; }
  .kameto-footer { padding-top: 54px; }
  .kameto-footer-wrap { padding: 0 18px; }
  .kameto-footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 24px;
    min-height: 0;
  }
  .kameto-footer-column { gap: 11px; }
  .kameto-footer-column h2 { font-size: 13px; }
  .kameto-footer-column a { font-size: 14px; }
  .kameto-footer-socials {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-top: 4px;
  }
  .kameto-footer-socials .social-row { justify-content: flex-start; gap: 12px; }
  .kameto-footer-legal {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    padding: 34px 0 20px;
  }
  .kameto-footer-legal-links { justify-content: flex-start; gap: 18px; }
  .kameto-footer-wordmark {
    margin-left: -2.2vw;
    transform: scaleX(1.2);
  }
  .kameto-footer-float:nth-child(n + 5) { display: none; }
  .kameto-footer-float { max-width: 56px; max-height: 56px; }
}
@media (max-width: 380px) { .plans { flex-direction: column; } }

/* ===================================================================
   Warm additions: manifesto, deep-dive pillars, personas, FAQ, CTA band
   =================================================================== */

/* ---------- Manifesto band ---------- */
.band { padding: 26px 0 70px; }
.manifesto { max-width: 800px; margin: 0 auto; text-align: center; }
.manifesto .big {
  font-family: "Space Grotesk", sans-serif; font-weight: 500;
  font-size: clamp(22px, 3.3vw, 33px); line-height: 1.42; letter-spacing: -.02em;
}
.manifesto .big .soft { color: var(--muted); }
.manifesto .big .warm { color: var(--orange); }
.manifesto .sub2 { margin-top: 22px; color: var(--muted); font-size: 17px; line-height: 1.7; }

/* ---------- Deep-dive pillar rows ---------- */
.pillars { display: flex; flex-direction: column; gap: 26px; }
.pillar {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: center;
  background: var(--card); border: 1px solid var(--border); border-radius: 28px; padding: 46px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.pillar:nth-child(even) .pillar-body { order: 2; }
.pillar-body .kicker { color: var(--c, var(--accent)); }
.pillar-body h3 { font-size: clamp(23px, 2.9vw, 31px); font-weight: 700; margin-bottom: 13px; }
.pillar-body > p { color: var(--muted); font-size: 16px; line-height: 1.7; margin-bottom: 20px; }
.pillar-list { list-style: none; display: grid; gap: 11px; }
.pillar-list li { display: flex; gap: 11px; align-items: flex-start; color: rgba(34,26,46,.85); font-size: 15px; line-height: 1.5; }
.pillar-list li::before { content: "✓"; color: var(--c, var(--accent)); font-weight: 800; margin-top: 1px; }

/* pillar illustration panel + primitives */
.pillar-art {
  position: relative; border-radius: 22px; padding: 24px;
  background: radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.85), rgba(255,255,255,.5));
  border: 1px solid var(--border);
  box-shadow: 0 22px 50px rgba(34,26,46,.12);
}
.pillar-art::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, var(--c, var(--accent)), transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; pointer-events: none;
}
.art-row {
  display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 500;
  background: rgba(34,26,46,.05); border: 1px solid rgba(34,26,46,.08);
  border-radius: 13px; padding: 11px 13px; margin-bottom: 9px;
}
.art-row b { margin-left: auto; color: var(--c, var(--accent)); font-weight: 700; font-size: 12.5px; }
.art-row.dim { color: var(--muted); }
.art-dot { width: 21px; height: 21px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #06120b; background: var(--c, var(--accent)); }
.art-dot.o { background: transparent; border: 2px solid rgba(34,26,46,.28); }
.art-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.art-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--c, var(--accent)); background: rgba(34,26,46,.05); border: 1px solid rgba(34,26,46,.10); padding: 6px 11px; border-radius: 999px; }
.art-label { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.art-label:not(:first-child) { margin-top: 13px; }
.art-track { height: 8px; border-radius: 999px; background: rgba(34,26,46,.10); overflow: hidden; }
.art-track i { display: block; height: 100%; border-radius: 999px; background: var(--c, var(--accent)); }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 2px 24px; transition: border-color .2s, background .2s; }
.faq details[open] { border-color: rgba(79,209,138,.32); background: var(--card-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 19px 0; font-weight: 600; font-size: 16.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 24px; font-weight: 300; line-height: 1; transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); font-size: 15px; line-height: 1.7; padding: 0 0 20px; margin: 0; max-width: 660px; }

/* ---------- Closing CTA band ---------- */
.cta-band {
  position: relative; text-align: center; border-radius: 30px; padding: 68px 32px; overflow: hidden;
  background: linear-gradient(150deg, rgba(250,163,78,.13), rgba(245,92,140,.11) 55%, rgba(79,209,138,.11));
  border: 1px solid var(--hairline); box-shadow: 0 30px 80px rgba(34,26,46,.16);
}
.cta-band::before { content: ""; position: absolute; left: 50%; top: -45%; width: 70%; height: 90%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(250,163,78,.28), transparent 70%); filter: blur(34px); z-index: 0; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(28px, 4.6vw, 46px); font-weight: 700; margin-bottom: 14px; }
.cta-band p { color: rgba(34,26,46,.82); max-width: 540px; margin: 0 auto 28px; font-size: 17px; line-height: 1.7; }
.cta-band .fine { font-size: 13px; color: var(--muted-2); margin-top: 16px; }

/* ---------- Mobile for warm additions ---------- */
@media (max-width: 820px) {
  .pillar { grid-template-columns: 1fr; gap: 26px; padding: 30px; }
  .pillar:nth-child(even) .pillar-body { order: 0; }
}
@media (max-width: 600px) {
  .band { padding: 8px 0 50px; }
  .pillar { padding: 24px; }
  .cta-band { padding: 48px 22px; }
}

/* ---------- Colorful showcase stage (App Store style) ---------- */
.stage {
  position: relative;
  margin: 8px auto 0;
  border-radius: 30px;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 34px 90px rgba(34,26,46,.22), inset 0 0 0 1px rgba(255,255,255,.4);
}
.stage-blobs { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Subtle dotted grid laid over the color field, matching the reference. */
.stage-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(24,18,34,.16) 2px, transparent 2.2px);
  background-size: 46px 46px;
  background-position: 12px 12px;
  pointer-events: none;
}

/* Framed real screenshots */
.phone .shot { display: block; width: 100%; border-radius: 36px; object-fit: cover; }
.shots {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap;
}
.shots .phone { width: 232px; transition: transform .35s var(--ease); }
.shots .phone:nth-child(2) { transform: translateY(-22px) scale(1.05); }
.shots .phone:hover { transform: translateY(-6px) scale(1.03); }

@media (max-width: 820px) {
  .shots .phone:nth-child(2) { transform: none; }
  .shots .phone { width: 200px; }
}
@media (max-width: 600px) {
  .stage { min-height: 0; padding: 40px 16px; border-radius: 24px; }
  .shots { gap: 18px; }
  .shots .phone { width: min(64vw, 220px); }
}

/* ---------- Mobile polish (added for phone friendliness) ---------- */
@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  .brand { font-size: 16px; gap: 9px; }
  .brand img { width: 32px; height: 32px; }
  .nav-links { gap: 14px; }
  .hero p.sub { margin: 18px auto 26px; font-size: 16.5px; }
  .section-head { margin-bottom: 34px; }
  .section-sub { font-size: 15.5px; }
  .eyebrow { margin-bottom: 18px; }
  .app-icon { width: 64px; height: 64px; margin-bottom: 20px; }
  /* Two equal-width CTAs that stay next to each other on small screens */
  .hero .cta-row .btn { flex: 1 1 0; min-width: 0; padding: 14px 12px; font-size: 14px; }
  .price-card li { font-size: 14.5px; }
  .faq summary { font-size: 15.5px; }
}
@media (max-width: 400px) {
  html { scroll-padding-top: 80px; }
  .wrap { padding: 0 15px; }
  nav .wrap { height: 64px; }
  .nav-links .btn { padding: 10px 16px; font-size: 14px; }
  .plans { flex-direction: column; }
  .shots .phone { width: min(72vw, 240px); }
  .stage { padding: 32px 12px; }
}

/* ---------- Horizontal feature gallery ---------- */
#more-features { padding: 30px 0 80px; }
.more-features-shell { position: relative; }
.more-features-track {
  display: flex; align-items: stretch; gap: 24px; list-style: none;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; overscroll-behavior-y: auto;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  padding-inline: max(24px, calc(50% - 536px));
  scroll-padding-inline: max(24px, calc(50% - 536px));
}
.more-features-track::-webkit-scrollbar { display: none; }
.more-features-track:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 5px;
}
.more-feature-card {
  display: flex; flex: 0 0 auto; flex-direction: column;
  width: clamp(300px, 44vw, 600px);
  scroll-snap-align: start; overflow: hidden;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 20px 60px rgba(34,26,46,.08);
}
.more-feature-art {
  aspect-ratio: 4 / 3; color: var(--fc);
  background: color-mix(in srgb, var(--fc) 3%, #fcfbf8);
}
.more-feature-art svg { display: block; width: 100%; height: 100%; }
.more-feature-art .more-feature-chip {
  filter: drop-shadow(0 10px 14px rgba(34,26,46,.10));
}
.more-feature-copy {
  padding: 22px 26px 26px;
  background: #fcfbf8;
  color: var(--muted); font-size: 16px; line-height: 1.55;
}
.more-feature-copy h3 {
  display: inline; color: var(--ink);
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 18px; font-weight: 700;
}
.more-feature-copy p { display: inline; }
.more-features-btn {
  position: absolute; top: 50%; z-index: 3;
  display: grid; width: 44px; height: 44px; place-items: center;
  padding: 0; color: var(--ink); cursor: pointer;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: 50%; box-shadow: 0 8px 22px rgba(34,26,46,.12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transform: translateY(-50%);
}
.more-features-btn svg { width: 22px; height: 22px; }
.more-features-btn:disabled { opacity: .35; cursor: default; pointer-events: none; }
.more-features-btn:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 3px;
}
.more-features-prev { left: max(16px, calc(50% - 582px)); }
.more-features-next { right: max(16px, calc(50% - 582px)); }

@media (max-width: 900px) {
  .more-features-shell { padding-top: 58px; }
  .more-features-track { gap: 18px; scroll-snap-type: x mandatory; }
  .more-feature-card { width: min(86vw, 480px); scroll-snap-stop: always; }
  .more-features-btn { display: grid; top: 0; transform: none; }
  .more-features-prev { left: auto; right: 72px; }
  .more-features-next { right: 18px; }
}
@media (max-width: 640px) {
  .more-features-track {
    padding-inline: max(18px, calc(50% - 542px));
    scroll-padding-inline: max(18px, calc(50% - 542px));
  }
  .more-feature-card { width: min(calc(100vw - 36px), 480px); }
  .more-feature-copy { padding: 18px; }
  .more-features-prev { right: 70px; }
  .more-features-next { right: 18px; }
}
@media (max-width: 400px) {
  .more-features-track {
    gap: 15px;
    padding-inline: max(15px, calc(50% - 545px));
    scroll-padding-inline: max(15px, calc(50% - 545px));
  }
  .more-feature-card { width: calc(100vw - 30px); }
  .more-features-prev { right: 67px; }
  .more-features-next { right: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .more-features-track { scroll-behavior: auto; }
}

/* ---------- Big feature cards 2×2 ---------- */
.feat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
@media (max-width: 640px) { .feat-grid { grid-template-columns: 1fr; } }

.feat-card {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 28px; padding: 44px 40px 42px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.feat-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}
.feat-card::after {
  content: ""; position: absolute;
  top: -80px; right: -60px; width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--fc) 16%, transparent), transparent 70%);
  pointer-events: none;
}
.feat-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--fc) 38%, transparent);
  background: var(--card-2);
}
.feat-icon {
  width: 72px; height: 72px; border-radius: 22px;
  display: grid; place-items: center; margin-bottom: 26px;
  color: var(--fc);
  background: color-mix(in srgb, var(--fc) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--fc) 26%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--fc) 16%, transparent);
}
.feat-icon svg { width: 34px; height: 34px; }
.feat-card h3 {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: clamp(21px, 2.4vw, 26px); font-weight: 700; letter-spacing: -.022em;
  margin-bottom: 12px; color: var(--text);
}
.feat-card p { font-size: 16px; color: var(--muted); line-height: 1.68; }

@media (max-width: 600px) {
  .feat-card { padding: 32px 28px; }
  .feat-icon { width: 60px; height: 60px; border-radius: 18px; }
  .feat-icon svg { width: 28px; height: 28px; }
  .feat-card h3 { font-size: 21px; }
}

/* ---------- App highlights 2×2 ---------- */
#features { padding: 8px 0 70px; }

/* ---------- Features accordion ---------- */
.accordion { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.acc-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.acc-item.open {
  border-color: color-mix(in srgb, var(--hc, var(--accent)) 45%, transparent);
  background: color-mix(in srgb, var(--hc, var(--accent)) 7%, var(--card-2));
  box-shadow: 0 14px 32px color-mix(in srgb, var(--hc, var(--accent)) 15%, transparent);
}
.acc-head {
  width: 100%; background: none; border: 0; cursor: pointer;
  font-family: inherit; color: var(--text); text-align: left;
  display: flex; align-items: center; gap: 16px; padding: 16px 22px;
}
.acc-ico {
  width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto;
  display: grid; place-items: center; color: var(--hc, var(--accent));
  background: color-mix(in srgb, var(--hc, var(--accent)) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--hc, var(--accent)) 26%, transparent);
  transition: transform .25s var(--ease);
}
.acc-ico svg { width: 23px; height: 23px; }
.acc-item.open .acc-ico { transform: scale(1.05); }
.acc-name {
  flex: 1 1 auto; font-weight: 700; font-size: 17px; letter-spacing: -.015em;
  font-family: "Space Grotesk", "Inter", sans-serif;
}
.acc-chev {
  flex: 0 0 auto; color: var(--muted-2); display: grid; place-items: center;
  transition: transform .3s var(--ease), color .25s;
}
.acc-chev svg { width: 20px; height: 20px; }
.acc-item.open .acc-chev { transform: rotate(180deg); color: var(--hc, var(--accent)); }
/* grid-rows trick animates height without a fixed max-height */
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.acc-item.open .acc-panel { grid-template-rows: 1fr; }
/* When other cards are snapped shut to keep the tapped title pinned, they must
   collapse with no height/opacity tween so there is nothing to animate-chase. */
.acc-item.acc-noanim .acc-panel,
.acc-item.acc-noanim .acc-body { transition: none; }
.acc-panel-in { overflow: hidden; min-height: 0; }
.acc-body { padding: 0 24px 22px 82px; }
.acc-h {
  display: block; font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--text); margin-bottom: 7px;
}
.acc-body p { color: var(--muted); font-size: 15.5px; line-height: 1.7; }
@media (max-width: 600px) {
  .acc-head { padding: 14px 16px; gap: 13px; }
  .acc-ico { width: 40px; height: 40px; border-radius: 11px; }
  .acc-ico svg { width: 21px; height: 21px; }
  .acc-name { font-size: 16px; }
  .acc-body { padding: 0 18px 20px 18px; }
  .acc-h { font-size: 16.5px; }
}

/* ---------- Demo section frames ---------- */
.demo-frame {
  max-width: 1080px; margin: 0 auto;
  padding: clamp(46px, 5vw, 70px) clamp(26px, 3.4vw, 52px);
  border-radius: 30px;
  background: linear-gradient(165deg, #fcfbf8 0%, #f1ede4 100%);
  border: 1px solid rgba(34, 26, 46, .08);
  box-shadow: 0 28px 70px -38px rgba(34, 26, 46, .20);
  /* clip with a margin: the gentle float/rotation bleed stays visible (never cut),
     but far fly-in elements clip at the frame edge instead of escaping onto the page */
  overflow: clip;
  overflow-clip-margin: 28px;
}

/* ---------- Floating cards demo ---------- */
.fdemo { padding: 46px 24px; }
.fdemo-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.fdemo-h {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: clamp(34px, 5.4vw, 60px); font-weight: 700; letter-spacing: -.035em; line-height: 1.05;
}
.fdemo-p { margin-top: 20px; color: var(--muted); font-size: clamp(16px, 1.9vw, 18px); line-height: 1.7; max-width: 480px; }
.fdemo-visual { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.fdemo-stagewrap { width: 460px; height: 420px; flex: 0 0 auto; }
.fdemo-stage { position: relative; width: 100%; height: 100%; }
.fcard { position: absolute; border-radius: 22px; box-shadow: 0 36px 70px -20px rgba(30, 41, 80, .35); }
.fcard-back {
  width: 250px; left: 14px; top: 56px; padding: 22px 18px; background: #1e2a52; z-index: 1;
  transform: rotate(-3deg);
  animation: ffloatA 7s ease-in-out infinite;
}
.fcard-front {
  width: 300px; right: 0; top: 0; padding: 26px 24px; min-height: 330px; background: #f7f9f6; z-index: 2;
  transform: rotate(2deg);
  animation: ffloatB 7s ease-in-out infinite .6s;
  box-shadow: -12px 36px 70px -24px rgba(30, 41, 80, .34);
}
@keyframes ffloatA {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(-3deg) translateY(-12px); }
}
@keyframes ffloatB {
  0%, 100% { transform: rotate(2deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-18px); }
}
/* dark sidebar card */
.fcard-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.fcard-brand img { width: 30px; height: 30px; border-radius: 9px; }
.fcard-brand span { color: #fff; font-size: 19px; font-weight: 700; font-family: "Space Grotesk", "Inter", sans-serif; }
.fnav {
  display: flex; align-items: center; gap: 11px; color: #c3cae0; font-size: 14.5px; font-weight: 600;
  padding: 8px 10px; border-radius: 10px; transition: background .35s ease, color .35s ease;
}
.fnav-ico { width: 17px; height: 17px; border-radius: 5px; background: #5b6593; flex: 0 0 auto; transition: background .35s ease; }
.fnav.active { color: #fff; }
.fnav.highlighted { background: #2c3a6b; color: #fff; }
.fnav.highlighted .fnav-ico { background: #8893c4; }
.fnav-label { color: #7a85a8; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin: 16px 0 8px 8px; }
/* light task card */
.fswap.swap-in { animation: fswapin .45s ease; }
@keyframes fswapin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.ffront-title { display: flex; align-items: center; font-family: "Space Grotesk", "Inter", sans-serif; font-size: 21px; font-weight: 700; color: #1e2a52; margin-bottom: 18px; }
.ffront-emoji { margin-right: 8px; }
.fsection { margin-bottom: 15px; }
.fsection-title { font-size: 14px; font-weight: 700; margin-bottom: 9px; }
.ftask { display: flex; align-items: center; gap: 11px; padding: 6px 0; }
.fcheck { width: 21px; height: 21px; border-radius: 6px; border: 2px solid; display: grid; place-items: center; flex: 0 0 auto; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }
.ftask-label { font-size: 14.5px; color: #334155; }
.float-dots { display: flex; gap: 10px; }
.fdot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: #cdd3c9; cursor: pointer; padding: 0; transition: background .3s, transform .3s; }
.fdot.active { background: #1e2a52; transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) {
  .fcard-back, .fcard-front { animation: none; }
}
@media (max-width: 900px) {
  .fdemo-inner { grid-template-columns: 1fr; gap: 14px; justify-items: center; text-align: center; }
  .fdemo-text { max-width: 560px; }
  .fdemo-p { margin-left: auto; margin-right: auto; }
}
/* On phones, flatten the 3D stack so the cycling task card stays on top and readable */
@keyframes ffloatAm { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes ffloatBm { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@media (max-width: 520px) {
  .fdemo-stage { transform: none; transform-style: flat; }
  .fdemo-stagewrap { width: 344px; height: 366px; }
  .fcard-back {
    width: 166px; left: 0; top: 38px; padding: 16px 13px; border-radius: 18px; z-index: 1;
    transform: none; animation: ffloatAm 7s ease-in-out infinite;
  }
  .fcard-front {
    width: 224px; right: 0; top: 0; padding: 18px 16px; min-height: 270px; border-radius: 18px; z-index: 2;
    transform: none; animation: ffloatBm 7s ease-in-out infinite .6s;
    box-shadow: -14px 28px 48px -18px rgba(30, 41, 80, .34);
  }
  .fcard-brand { gap: 9px; margin-bottom: 16px; }
  .fcard-brand img { width: 25px; height: 25px; }
  .fcard-brand span { font-size: 16px; }
  .fnav { font-size: 12.5px; padding: 6px 8px; gap: 9px; }
  .fnav-ico { width: 15px; height: 15px; }
  .fnav-label { margin: 12px 0 6px 6px; }
  .ffront-title { font-size: 17px; margin-bottom: 13px; }
  .fsection { margin-bottom: 12px; }
  .fsection-title { font-size: 12.5px; margin-bottom: 7px; }
  .ftask { gap: 9px; padding: 5px 0; }
  .ftask-label { font-size: 12.5px; }
  .fcheck { width: 17px; height: 17px; font-size: 11px; }
}
@media (max-width: 380px) {
  .fdemo-stagewrap { width: 306px; height: 348px; }
  .fcard-back { width: 150px; }
  .fcard-front { width: 202px; }
}

/* ---------- Calendar drop demo ---------- */
.caldemo { padding: 46px 24px; }
.caldemo-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.caldemo-inner .caldemo-text { order: 2; }
.caldemo-inner .caldemo-visual { order: 1; }
.caldemo-visual { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.caldemo-fit { position: relative; width: 510px; height: 520px; }
.caldemo-stagewrap { position: absolute; top: 0; left: 0; perspective: 1600px; width: 510px; height: 520px; transform-origin: top left; }
.caldemo-stage { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: floatCal 8s ease-in-out infinite; }
@keyframes floatCal {
  0%, 100% { transform: rotateY(-6deg) rotateZ(.6deg) translateY(0); }
  50% { transform: rotateY(-6deg) rotateZ(.6deg) translateY(-12px); }
}
.cal-card { position: absolute; inset: 0; background: #fff; border-radius: 18px; box-shadow: 0 50px 90px -25px rgba(30, 41, 80, .32); overflow: hidden; }
.cal-header { display: flex; height: 56px; border-bottom: 1px solid #eef0f4; }
.cal-day { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.cal-dayname { font-size: 12px; color: #94a3b8; font-weight: 600; }
.cal-daynum { font-size: 16px; color: #334155; font-weight: 700; }
.cal-vline { position: absolute; top: 56px; bottom: 0; width: 1px; background: #f1f3f7; }
/* color tokens */
.c-blue { --bg: #dbe9fb; --text: #1e3a8a; --time: #6b86c4; }
.c-green { --bg: #d8ece1; --text: #14532d; --time: #5b8a6f; }
.c-yellow { --bg: #fdf6c9; --text: #713f12; --time: #a98b3a; }
.c-orange { --bg: #fde3c4; --text: #7c3a12; --time: #b9763f; }
.c-gray { --bg: #eceff4; --text: #1f2937; --time: #6b7280; }
/* placed events */
.cal-event { position: absolute; border-radius: 8px; padding: 9px 12px; box-sizing: border-box; overflow: hidden; background: var(--bg); color: var(--text); }
.cal-ev-title { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.cal-ev-time { font-size: 11.5px; margin-top: 3px; color: var(--time); }
/* incoming tasks: pill (flying) -> event block (landed) */
.cal-incoming {
  position: absolute; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  transition: all .7s cubic-bezier(.34, 1.2, .64, 1);
  left: var(--fl); top: var(--ft); width: var(--fw); height: 46px;
  padding: 0 16px; background: #fff; color: #1f2937; border-radius: 999px;
  box-shadow: 0 16px 30px -8px rgba(30, 41, 80, .28);
  transform: rotate(var(--fr));
}
.cal-incoming.landed {
  left: var(--tl); top: var(--tt); width: var(--tw); height: var(--th);
  padding: 9px 12px; background: var(--bg); color: var(--text); border-radius: 8px;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0); transform: rotate(0deg); justify-content: flex-start;
}
.cal-incoming .cal-ev-title { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.cal-incoming.landed .cal-ev-title { font-weight: 600; }
.cal-incoming .cal-ev-time { max-height: 0; opacity: 0; transition: all .4s ease .25s; }
.cal-incoming.landed .cal-ev-time { max-height: 20px; opacity: 1; }
.cal-cursor {
  position: absolute; right: 26px; top: 50%; width: 16px; height: 16px; border-radius: 50%;
  background: #5b6ef0; transform: translateY(-50%); box-shadow: 0 0 0 4px rgba(91, 110, 240, .25);
  opacity: 1; transition: opacity .3s ease;
}
.cal-incoming.landed .cal-cursor { opacity: 0; }
.cal-replay {
  padding: 9px 18px; border-radius: 10px; border: 0; background: #1e2a52; color: #fff;
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background .2s, transform .15s;
}
.cal-replay:hover { background: #2a3a6b; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .caldemo-stage { animation: none; } }
@media (max-width: 900px) {
  .caldemo-inner { grid-template-columns: 1fr; gap: 18px; justify-items: center; text-align: center; }
  .caldemo-inner .caldemo-text { order: 0; max-width: 560px; }
  .caldemo-inner .caldemo-visual { order: 0; }
  .caldemo-text .fdemo-p { margin-left: auto; margin-right: auto; }
}
@media (max-width: 560px) {
  .caldemo-fit { width: 330px; height: 336px; }
  .caldemo-stagewrap { transform: scale(.647); }
}
@media (max-width: 380px) {
  .caldemo-fit { width: 300px; height: 306px; }
  .caldemo-stagewrap { transform: scale(.588); }
}

/* ---------- Habit tracker drop demo ---------- */
.habdemo { padding: 46px 24px; }
@media (max-width: 600px) {
  .fdemo, .caldemo, .habdemo { padding: 22px 8px; }
  /* thin side padding on phones so the scaled demos fit, generous top/bottom for the framed look */
  .demo-frame { padding: 40px 10px; border-radius: 22px; }
}
.habdemo-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.habdemo-visual { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; min-width: 0; }
.habdemo-fit { position: relative; width: 512px; height: 376px; }
.habdemo-stagewrap { position: absolute; top: 0; left: 0; perspective: 1600px; width: 640px; height: 470px; transform-origin: top left; transform: scale(.8); }
.habdemo-stage { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: floatHabit 8s ease-in-out infinite; }
@keyframes floatHabit {
  0%, 100% { transform: rotateY(7deg) rotateX(2deg) rotateZ(-.5deg) translateY(0); }
  50% { transform: rotateY(7deg) rotateX(2deg) rotateZ(-.5deg) translateY(-10px); }
}
.hab-card {
  position: absolute; inset: 0; padding: 22px 26px; box-sizing: border-box;
  background: transparent; border-radius: 22px; box-shadow: none;
  transition: background .45s ease, box-shadow .55s var(--ease);
}
.habdemo-stage.table-visible .hab-card {
  background: #fff; box-shadow: 0 55px 100px -30px rgba(30, 41, 80, .35);
}
.hab-week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  padding-bottom: 18px; border-bottom: 1px solid #f1f3f8; margin-bottom: 14px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s ease, transform .5s var(--ease);
}
.habdemo-stage.table-visible .hab-week { opacity: 1; transform: none; }
.hab-daycol { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hab-dayname { font-size: 12px; font-weight: 600; color: #94a3b8; }
.hab-daynum { font-size: 14px; font-weight: 700; color: #475569; }
.hab-daycol.today .hab-dayname { color: #6366f1; }
.hab-daycol.today .hab-daynum { color: #4f46e5; }
.hab-daycheck { width: 22px; height: 22px; border-radius: 50%; margin-top: 3px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #4f46e5; border: 2px solid #d8dee9; }
.hab-daycheck.done { background: #c7d2fe; border: none; }
.hab-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; row-gap: 6px; }
.hab-row { display: flex; align-items: center; gap: 14px; padding: 12px 4px; position: relative; }
.hab-icon {
  width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--text);
  transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(var(--fs, 1.08));
  box-shadow: 0 18px 30px -12px color-mix(in srgb, var(--bg) 65%, transparent);
  transition: transform .72s cubic-bezier(.34, 1.2, .64, 1), box-shadow .45s ease;
}
.notif-snooze { background: #f1f3f7; color: #475569; font-weight: 600; }
.notif-done { background: #dbe5ff; color: #3b5bdb; font-weight: 700; }
.notif-check { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transform: scale(.4); transition: all .4s cubic-bezier(.34, 1.5, .64, 1); }
.notif-frame.is-done .notif-check { opacity: 1; transform: scale(1); }
.notif-check-circle {
  width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(135deg, #4f8cff, #3b5bdb);
  color: #fff; font-size: 34px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px -8px rgba(59, 91, 219, .6);
}
@media (prefers-reduced-motion: reduce) { .notif-frame, .feed-frame { animation: none; } }

/* cross-fade between the two feature animations */
.feat-anims { position: relative; width: min(430px, 100%); height: 528px; }
.feat-anim {
  position: absolute; inset: 0; display: flex; justify-content: center; align-items: center;
  opacity: 0; pointer-events: none; transition: opacity .6s ease;
}
.feat-anim.feat-anim-active { opacity: 1; pointer-events: auto; }

/* reminder feed animation (alarm + aging notifications) */
.feed-frame {
  position: relative; width: min(430px, 100%); height: 480px;
  padding: clamp(24px, 5vw, 30px) clamp(20px, 4.5vw, 28px);
  border-radius: 30px; overflow: hidden; box-sizing: border-box;
  background: linear-gradient(165deg, #e3eefe 0%, #d6e4fb 55%, #eef4fe 100%);
  box-shadow: 0 50px 100px -38px rgba(40, 70, 140, .4);
  animation: frameFloat 7s ease-in-out infinite;
}
.feed-stack { position: relative; height: 300px; }
.feed-note {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: center; gap: 13px;
  background: rgba(255, 255, 255, .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 18px; padding: 14px 16px; box-shadow: 0 12px 26px -12px rgba(40, 70, 140, .3);
  transform-origin: top center;
  transition: top .55s ease, opacity .55s ease, transform .55s ease;
}
.feed-logo { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; object-fit: cover; box-shadow: 0 2px 6px rgba(40, 70, 140, .2); }
.feed-note-text { flex: 1; min-width: 0; }
.feed-note-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.feed-note-title { font-size: 15.5px; font-weight: 700; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-note-time { font-size: 13px; color: #94a3b8; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.feed-note-sub { font-size: 14px; color: #475569; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-alarm { position: absolute; left: 0; right: 0; bottom: 44px; height: 170px; display: flex; align-items: center; justify-content: center; }
.feed-ring {
  position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .9) 0%, rgba(210, 225, 250, .5) 70%);
  animation: feedPing 3.6s ease-out infinite;
}
.feed-clock {
  position: relative; z-index: 2; width: 86px; height: 86px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 34px -10px rgba(40, 70, 140, .35);
}
.feed-clock span { font-size: 40px; line-height: 1; animation: feedShake 2.2s ease-in-out infinite; transform-origin: center; }
@keyframes feedDropIn { from { transform: translateY(-46px) scale(1); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes feedPing { 0% { transform: translate(-50%, -50%) scale(.35); opacity: .5; } 80% { opacity: .05; } 100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } }
@keyframes feedShake { 0%, 92%, 100% { transform: rotate(0); } 94% { transform: rotate(-9deg); } 96% { transform: rotate(9deg); } 98% { transform: rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .feed-ring, .feed-clock span { animation: none; } }

/* NLP quick-add animation (Repeat Reminder) */
.nlp-fit { position: relative; width: 359px; height: 437px; }
.nlp-wrap { position: absolute; top: 0; left: 0; width: 460px; height: 560px; transform: scale(.78); transform-origin: top left; }
.nlp-back { position: absolute; left: 0; top: 30px; width: 430px; height: 500px; background: linear-gradient(160deg, #dcebfe 0%, #cfe0fb 100%); border-radius: 30px; opacity: .55; }
.nlp-screen { position: absolute; left: 36px; top: 56px; right: 0; bottom: 0; background: #f7f8fa; border-radius: 26px 0 0 0; box-shadow: 0 40px 80px -30px rgba(40, 70, 140, .35); overflow: hidden; }
.nlp-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 18px; }
.nlp-menu { font-size: 20px; color: #475569; width: 24px; }
.nlp-list-title { font-size: 19px; font-weight: 700; color: #1e293b; }
.nlp-task { display: flex; align-items: center; gap: 14px; background: #fff; margin: 8px 0; padding: 20px 24px; }
.nlp-checkbox { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #cbd5e1; flex-shrink: 0; }
.nlp-task-label { font-size: 16px; color: #334155; font-weight: 500; }
.nlp-quickadd { position: absolute; left: 0; top: 270px; width: 420px; background: #fff; border-radius: 20px; padding: 18px 20px; box-shadow: 0 26px 55px -18px rgba(40, 70, 140, .4); animation: nlpCardIn .5s ease; }
.nlp-input { display: flex; align-items: center; flex-wrap: wrap; font-size: 22px; font-weight: 600; min-height: 30px; margin-bottom: 14px; }
.nlp-highlight { display: inline-block; background: #d6e2ff; color: #3b5bdb; border-radius: 6px; padding: 1px 5px; font-weight: 700; }
.nlp-normal { color: #1e293b; white-space: pre; }
.nlp-cursor { display: inline-block; width: 2px; height: 24px; margin-left: 2px; background: #3b5bdb; animation: nlpBlink 1s step-end infinite; }
.nlp-toolbar { display: flex; align-items: center; gap: 18px; }
.nlp-date { font-size: 18px; color: #94a3b8; opacity: .6; }
.nlp-date.parsed { display: flex; align-items: center; gap: 6px; background: #e8efff; color: #3b5bdb; border-radius: 9px; padding: 6px 11px; font-size: 14.5px; font-weight: 600; opacity: 1; animation: nlpChipPop .45s cubic-bezier(.34, 1.5, .64, 1); }
.nlp-date.parsed .nlp-date-icon { font-size: 14px; }
.nlp-repeat { font-size: 13px; }
.nlp-tool { font-size: 17px; color: #94a3b8; opacity: .75; }
@keyframes nlpBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes nlpChipPop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes nlpCardIn { from { transform: translateY(24px) scale(.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

/* Morning reminder animation (Daily Reminder) */
.morning-frame {
  position: relative; width: min(430px, 100%);
  padding: clamp(24px, 5vw, 30px) clamp(20px, 4.5vw, 28px) clamp(30px, 5vw, 40px);
  border-radius: 30px; box-sizing: border-box;
  background: linear-gradient(160deg, #e0ecfe 0%, #d2e2fb 55%, #ecf3fe 100%);
  box-shadow: 0 50px 100px -38px rgba(40, 70, 140, .4);
  animation: frameFloat 7s ease-in-out infinite;
}
.morning-banner {
  display: flex; gap: 13px; background: rgba(255, 255, 255, .8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 18px; padding: 14px 16px; margin-bottom: 18px; box-shadow: 0 12px 26px -12px rgba(40, 70, 140, .3);
  transform: translateY(-70px) scale(.93); opacity: 0; transition: all .65s cubic-bezier(.34, 1.3, .64, 1);
}
.morning-frame.banner-in .morning-banner { transform: translateY(0) scale(1); opacity: 1; }
.morning-logo { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; object-fit: cover; box-shadow: 0 2px 6px rgba(40, 70, 140, .2); }
.morning-banner-text { flex: 1; min-width: 0; }
.morning-banner-row { display: flex; justify-content: space-between; align-items: baseline; }
.morning-banner-title { font-size: 15.5px; font-weight: 700; color: #1e293b; }
.morning-banner-time { font-size: 13px; color: #94a3b8; font-weight: 500; }
.morning-banner-sub { font-size: 13.5px; color: #64748b; margin-top: 2px; }
.morning-banner-btns { display: flex; gap: 9px; margin-top: 11px; }
.morning-pill { background: #eef1f6; color: #475569; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; }
.morning-stackwrap { position: relative; }
.morning-stack { position: absolute; left: 50%; transform: translateX(-50%); height: 44px; border-radius: 22px; background: #fff; box-shadow: 0 8px 18px -10px rgba(40, 70, 140, .25); opacity: 0; transition: opacity .5s ease; }
.morning-stack-1 { width: 86%; bottom: -10px; }
.morning-stack-2 { width: 80%; bottom: -20px; }
.morning-frame.card-in .morning-stack-1 { opacity: .29; transition-delay: .30s; }
.morning-frame.card-in .morning-stack-2 { opacity: .13; transition-delay: .35s; }
.morning-card {
  position: relative; z-index: 2; background: #fff; border-radius: 22px; padding: 22px 22px 18px;
  box-shadow: 0 24px 50px -18px rgba(40, 70, 140, .35);
  transform: translateY(28px) scale(.96); opacity: 0; transition: all .6s cubic-bezier(.34, 1.2, .64, 1);
}
.morning-frame.card-in .morning-card { transform: translateY(0) scale(1); opacity: 1; }
.morning-greeting { font-size: 24px; font-weight: 700; color: #475569; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.morning-greeting-sub { font-size: 14.5px; color: #94a3b8; margin-top: 5px; margin-bottom: 18px; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.morning-frame.card-in .morning-greeting, .morning-frame.card-in .morning-greeting-sub { opacity: 1; transform: translateY(0); }
.morning-inner { border: 1px solid #f0f2f6; border-radius: 14px; padding: 16px 18px 22px; margin-bottom: 18px; }
.morning-meta-time { font-size: 14px; color: #64748b; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.morning-meta-list { font-size: 14.5px; color: #475569; font-weight: 500; margin-top: 5px; margin-bottom: 16px; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.morning-frame.meta-in .morning-meta-time, .morning-frame.meta-in .morning-meta-list { opacity: 1; transform: translateY(0); }
.morning-task { font-size: 21px; font-weight: 700; color: #111827; min-height: 28px; display: flex; align-items: center; }
.morning-cursor { display: inline-block; width: 2px; height: 22px; margin-left: 2px; background: #3b5bdb; animation: nlpBlink 1s step-end infinite; }
.morning-frame.typed-done .morning-cursor { opacity: 0; animation: none; }
.morning-actions { display: flex; justify-content: space-between; padding-top: 4px; }
.morning-action { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1; opacity: 0; transform: translateY(8px) scale(.8); }
.morning-action svg { width: 22px; height: 22px; color: #3b5bdb; }
.morning-action span { font-size: 12.5px; color: #3b5bdb; font-weight: 500; }
.morning-frame.actions-in .morning-action { opacity: 1; transform: translateY(0) scale(1); transition: all .35s cubic-bezier(.34, 1.5, .64, 1); }
.morning-frame.actions-in .morning-action:nth-child(2) { transition-delay: .07s; }
.morning-frame.actions-in .morning-action:nth-child(3) { transition-delay: .14s; }
.morning-frame.actions-in .morning-action:nth-child(4) { transition-delay: .21s; }
.morning-frame.actions-in .morning-action:nth-child(5) { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) { .morning-frame { animation: none; } }

/* Pomodoro animation (Pomodoro) */
.pomo-card { width: min(420px, 100%); box-sizing: border-box; background: #fff; border-radius: 26px; padding: 26px 30px 20px; box-shadow: 0 45px 90px -35px rgba(40, 70, 140, .32); }
.pomo-heading { font-family: "Space Grotesk", "Inter", sans-serif; font-size: 25px; font-weight: 700; color: #1f2937; }
.pomo-sub { font-size: 14.5px; color: #9aa3af; line-height: 1.5; margin-top: 8px; }
.pomo-ringwrap { position: relative; width: 200px; height: 200px; margin: 14px auto 12px; }
.pomo-svg { display: block; }
#pomoRing { transition: stroke-dashoffset .15s linear; }
.pomo-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pomo-time { font-size: 44px; font-weight: 700; color: #374151; letter-spacing: 1px; line-height: 1; }
.pomo-time.pomo-done { animation: pomoDonePulse .6s ease; }
.pomo-phase { font-size: 12px; font-weight: 700; color: #cbd2da; letter-spacing: 2px; margin-top: 8px; }
.pomo-presets { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.pomo-chip { border: 0; background: #f1f3f6; color: #64748b; font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.pomo-chip-active { background: #dcf7ec; color: #0f9b6c; }
.pomo-controls { display: flex; gap: 12px; margin-bottom: 10px; }
.pomo-primary, .pomo-ghost { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; font-family: inherit; font-size: 15px; padding: 13px 0; border-radius: 13px; cursor: pointer; }
.pomo-primary { background: #1ec885; color: #fff; font-weight: 700; }
.pomo-ghost { background: #f1f3f6; color: #475569; font-weight: 600; }
.pomo-primary svg { width: 18px; height: 18px; }
.pomo-ghost svg { width: 17px; height: 17px; }
.pomo-speed { width: 100%; border: 0; background: transparent; color: #9aa3af; font-family: inherit; font-size: 13px; font-weight: 500; padding: 6px 0 2px; cursor: pointer; }
@keyframes pomoDonePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); color: #1ec885; } }

/* ---------- Calendar Views morph animation (premium) ---------- */
.calanim {
  --screen: #f5f6ff; --c-ink: #1c2230; --c-muted: #9aa1b2; --c-muted-soft: #c4c9d6;
  --cblue: #2f6bff; --cease: cubic-bezier(.66, 0, .34, 1); --cdur: 900ms;
  display: flex; justify-content: center; width: 100%;
}
.calanim-fit { position: relative; width: 271px; height: 524px; }
.calanim .stage { position: absolute; top: 0; left: 0; transform: scale(.702); transform-origin: top left; }
.calanim .frame {
  width: 360px; height: 720px; border-radius: 48px; padding: 13px;
  background: linear-gradient(160deg, #23262f, #0e0f14);
  box-shadow: 0 40px 90px -28px rgba(20, 24, 40, .55), 0 4px 10px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.calanim .screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: var(--screen); }
.calanim .statusbar { position: relative; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 10px 26px 0; font-size: 13px; font-weight: 600; color: var(--c-ink); z-index: 40; }
.calanim .sb-icons { display: flex; align-items: center; gap: 6px; }
.calanim .sb-icons .sig { width: 16px; height: 10px; border-radius: 2px; background: linear-gradient(90deg, var(--c-ink) 70%, rgba(28, 34, 48, .25) 70%); }
.calanim .sb-icons .bat { width: 22px; height: 11px; border-radius: 3px; border: 1.5px solid var(--c-ink); position: relative; }
.calanim .sb-icons .bat::after { content: ""; position: absolute; left: 1.5px; top: 1.5px; bottom: 1.5px; width: 70%; background: var(--c-ink); border-radius: 1px; }
.calanim .topbar { position: relative; height: 64px; display: flex; align-items: flex-end; padding: 0 18px 8px; z-index: 30; }
.calanim .topbar .title { flex: 1; text-align: center; font-size: 20px; font-weight: 600; letter-spacing: .2px; color: var(--c-ink); }
.calanim .dots { font-size: 22px; color: var(--c-ink); font-weight: 700; line-height: .4; letter-spacing: 1px; }
.calanim .vicon { position: relative; width: 24px; height: 22px; }
.calanim .vicon i { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; display: grid; }
.calanim .stage[data-scene="1"] .vi-agenda,
.calanim .stage[data-scene="2"] .vi-cols,
.calanim .stage[data-scene="3"] .vi-week,
.calanim .stage[data-scene="4"] .vi-grid { opacity: 1; }
.calanim .vicon span { background: var(--c-ink); border-radius: 2px; }
.calanim .vi-agenda { grid-template-rows: 6px 1fr; gap: 3px; }
.calanim .vi-agenda .h { height: 6px; border-radius: 2px; background: var(--c-ink); }
.calanim .vi-agenda .l { display: grid; grid-template-rows: 1fr 1fr; gap: 3px; }
.calanim .vi-agenda .l span { height: 4px; }
.calanim .vi-cols { grid-template-columns: 1fr 1fr 1fr; gap: 3px; }
.calanim .vi-week { grid-template-columns: repeat(4, 1fr); gap: 2px; }
.calanim .vi-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 3px; }
.calanim .body { position: relative; width: 316px; height: 592px; margin: 0 auto; overflow: hidden; }
.calanim .layer { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.calanim .stage[data-scene="4"] .l-month { opacity: 1; }
.calanim .stage[data-scene="2"] .l-time,
.calanim .stage[data-scene="3"] .l-time { opacity: 1; }
.calanim .wkrow { position: absolute; top: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; color: var(--c-muted); font-weight: 600; }
.calanim .datecell { position: absolute; width: 40px; text-align: center; font-size: 15px; font-weight: 500; color: var(--c-ink); }
.calanim .datecell.out { color: var(--c-muted-soft); }
.calanim .sel { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: var(--cblue); box-shadow: 0 4px 10px rgba(47, 107, 255, .4); }
.calanim .sel + .selnum { color: #fff; font-weight: 600; }
.calanim .mbar { position: absolute; height: 8px; border-radius: 3px; opacity: 0; transition: opacity .5s ease .1s; }
.calanim .stage[data-scene="4"] .mbar { opacity: .85; }
.calanim .hourline { position: absolute; left: 30px; right: 0; height: 1px; background: rgba(28, 34, 48, .06); }
.calanim .hourlbl { position: absolute; left: 0; width: 24px; text-align: right; font-size: 10px; color: var(--c-muted); }
.calanim .dayhdr { position: absolute; top: 14px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--c-muted); font-weight: 600; }
.calanim .dayhdr .n { font-size: 15px; color: var(--c-ink); font-weight: 600; }
.calanim .dayhdr.hl .n { color: #fff; background: var(--cblue); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(47, 107, 255, .4); }
.calanim .hdr-3, .calanim .hdr-7 { opacity: 0; transition: opacity .45s ease; }
.calanim .stage[data-scene="2"] .hdr-3 { opacity: 1; }
.calanim .stage[data-scene="3"] .hdr-7 { opacity: 1; }
.calanim .l-today { transition: opacity .5s ease; }
.calanim .agenda { position: absolute; inset: 0; }
.calanim .ag-h { position: absolute; top: 14px; left: 20px; font-size: 27px; font-weight: 700; letter-spacing: -.4px; color: var(--c-ink); }
.calanim .ag-date { position: absolute; top: 52px; left: 20px; font-size: 13px; color: var(--c-muted); font-weight: 500; }
.calanim .ag-div { position: absolute; left: 20px; right: 20px; height: 1px; background: rgba(28, 34, 48, .07); }
.calanim .ag-time { position: absolute; right: 20px; font-size: 13px; color: var(--cblue); font-weight: 600; }
.calanim .ag-sub { position: absolute; height: 8px; border-radius: 4px; background: #ebecf2; }
.calanim .blocks { position: absolute; inset: 0; z-index: 20; }
.calanim .block {
  position: absolute; border-radius: 10px;
  transition: left var(--cdur) var(--cease), top var(--cdur) var(--cease), width var(--cdur) var(--cease),
    height var(--cdur) var(--cease), background-color var(--cdur) var(--cease), border-radius var(--cdur) var(--cease), opacity .45s ease;
}
@media (prefers-reduced-motion: reduce) { .calanim .block, .calanim .layer, .calanim .mbar { transition-duration: .01ms !important; } }

/* ---------- AI Voice to Task animation (premium) ---------- */
.voiceanim {
  --vbg: #050506; --vpanel: #1a1a1c; --vmuted: #8a8a92; --vmuted2: #6a6a72; --vtext: #fff;
  --vgreen: #67d0c1; --vgreen-dim: #49988e; --vred: #efad5d; --vblue: #efad5d; --vease: cubic-bezier(.66, 0, .34, 1);
  display: flex; justify-content: center; width: 100%;
}
.voiceanim-fit { position: relative; width: 271px; height: 524px; }
.voiceanim .stage { position: absolute; top: 0; left: 0; transform: scale(.702); transform-origin: top left; }
.voiceanim .frame { width: 360px; height: 720px; border-radius: 48px; padding: 13px; background: linear-gradient(160deg, #1b1d24, #0a0b0f); box-shadow: 0 40px 90px -28px rgba(10, 12, 22, .7), 0 4px 10px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .04); }
.voiceanim .screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: var(--vbg); color: var(--vtext); }
.voiceanim .topglow { position: absolute; top: 0; left: 0; right: 0; height: 240px; background: radial-gradient(70% 60% at 50% 0%, rgba(103, 208, 193, .24), transparent 72%), linear-gradient(180deg, rgba(239, 173, 93, .08), rgba(8, 8, 12, 0) 76%); pointer-events: none; }
.voiceanim .statusbar { position: relative; height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 12px 26px 0; font-size: 15px; font-weight: 600; z-index: 20; }
.voiceanim .sb-r { display: flex; align-items: center; gap: 7px; }
.voiceanim .sig { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.voiceanim .sig i { width: 3px; background: #fff; border-radius: 1px; }
.voiceanim .sig i:nth-child(1) { height: 5px; } .voiceanim .sig i:nth-child(2) { height: 8px; }
.voiceanim .sig i:nth-child(3) { height: 11px; opacity: .4; } .voiceanim .sig i:nth-child(4) { height: 13px; opacity: .4; }
.voiceanim .wifi { width: 18px; height: 13px; }
.voiceanim .bat { display: flex; align-items: center; gap: 3px; background: var(--vgreen); color: #06210f; font-size: 11px; font-weight: 800; padding: 2px 5px; border-radius: 5px; }
.voiceanim .recdot { position: absolute; top: 6px; right: 118px; width: 9px; height: 9px; border-radius: 50%; background: #ff8a1e; opacity: 0; transition: opacity .3s; }
.voiceanim .stage[data-scene="1"] .recdot { opacity: 1; }
.voiceanim .navrow { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 0; z-index: 20; }
.voiceanim .toggle { display: flex; background: #242426; border-radius: 999px; padding: 5px; gap: 2px; }
.voiceanim .seg { display: flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--vmuted); transition: .3s; }
.voiceanim .seg.on { background: #39393c; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.voiceanim .seg svg { width: 16px; height: 16px; }
.voiceanim .close { width: 42px; height: 42px; border-radius: 50%; background: #242426; display: grid; place-items: center; }
.voiceanim .close svg { width: 18px; height: 18px; }
.voiceanim .body { position: relative; width: 100%; height: 560px; }
.voiceanim .speak { position: absolute; top: 45%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 22px; transform: translateY(-50%); text-align: center; opacity: 0; transition: opacity .32s ease; }
/* fade in only after the card has cleared, so the two never overlap */
.voiceanim .stage[data-scene="1"] .speak { opacity: 1; transition: opacity .35s ease .4s; }
.voiceanim .voice-orb { position: relative; display: grid; place-items: center; width: 104px; height: 104px; color: #071614; }
.voiceanim .voice-orb-ring { position: absolute; inset: 0; border: 1px solid rgba(103, 208, 193, .34); border-radius: 50%; transform: scale(.72); opacity: 0; }
.voiceanim .stage[data-scene="1"] .ring-a { animation: voiceRingOut 2.2s ease-out infinite; }
.voiceanim .stage[data-scene="1"] .ring-b { animation: voiceRingOut 2.2s ease-out .78s infinite; }
.voiceanim .voice-orb-core { position: relative; z-index: 1; display: grid; place-items: center; width: 70px; height: 70px; border: 1px solid rgba(255, 255, 255, .42); border-radius: 50%; background: linear-gradient(145deg, #8be5d6, #67d0c1 56%, #e8b266); box-shadow: 0 0 0 8px rgba(103, 208, 193, .10), 0 16px 34px rgba(103, 208, 193, .26), inset 0 1px 0 rgba(255, 255, 255, .7); animation: voiceOrbBreath 1.8s ease-in-out infinite; }
.voiceanim .voice-orb-core svg { width: 27px; height: 27px; }
.voiceanim .speak-label { color: #f4f7f5; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
@keyframes voiceRingOut { 0% { opacity: .75; transform: scale(.74); } 75%, 100% { opacity: 0; transform: scale(1.28); } }
@keyframes voiceOrbBreath { 0%, 100% { transform: scale(.96); } 50% { transform: scale(1.04); } }
.voiceanim .recwrap { position: absolute; left: 18px; right: 18px; bottom: 34px; opacity: 0; transition: opacity .45s ease, transform .55s var(--vease); }
.voiceanim .stage[data-scene="1"] .recwrap { opacity: 1; }
.voiceanim .stage[data-scene="2"] .recwrap, .voiceanim .stage[data-scene="3"] .recwrap { opacity: 0; transform: translateY(40px); }
.voiceanim .recbar { display: flex; align-items: center; gap: 14px; background: var(--vpanel); border-radius: 22px; padding: 14px 18px; height: 64px; }
.voiceanim .stopbtn { width: 34px; height: 34px; border-radius: 50%; background: var(--vred); flex: 0 0 auto; box-shadow: 0 0 0 6px rgba(239, 173, 93, .10); }
.voiceanim .wave { display: flex; align-items: center; flex: 1; overflow: hidden; height: 36px; }
.voiceanim .voice-wave-svg { display: block; width: 100%; height: 36px; overflow: visible; }
.voiceanim .voice-wave-trace { fill: none; stroke: url(#voiceWaveGradient); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 280; stroke-dashoffset: 280; }
.voiceanim .trace-back { opacity: .34; stroke-width: 1.5; }
.voiceanim .stage[data-scene="1"] .voice-wave-trace { animation: voiceTraceDraw 1.7s cubic-bezier(.22, 1, .36, 1) infinite alternate; }
.voiceanim .stage[data-scene="1"] .trace-back { animation-delay: -.55s; }
@keyframes voiceTraceDraw { 0% { stroke-dashoffset: 280; transform: translateX(-5px); } 100% { stroke-dashoffset: 0; transform: translateX(5px); } }
.voiceanim .rectime { text-align: center; color: var(--vmuted2); font-size: 15px; font-weight: 500; margin-top: 14px; font-variant-numeric: tabular-nums; }
.voiceanim .cardwrap { position: absolute; left: 18px; right: 18px; bottom: 150px; opacity: 0; transform: translateY(34px); transition: opacity .32s ease, transform .5s var(--vease); }
/* fade in only after "Speaking now" has cleared */
.voiceanim .stage[data-scene="2"] .cardwrap, .voiceanim .stage[data-scene="3"] .cardwrap { opacity: 1; transform: translateY(0); transition: opacity .35s ease .4s, transform .55s var(--vease) .4s; }
.voiceanim .card { position: relative; background: #202022; border: 0; border-radius: 26px; padding: 24px 22px; overflow: hidden; min-height: 190px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.voiceanim .card::before { display: none; }
.voiceanim .think { transition: opacity .25s ease; }
.voiceanim .card > .done { position: absolute; inset: 0; padding: 24px 22px; opacity: 0; transition: opacity .3s ease; }
/* stagger so "AI is thinking" fully fades before "tasks added" appears (no overlapping text) */
.voiceanim .stage[data-scene="3"] .think { opacity: 0; }
.voiceanim .stage[data-scene="3"] .card > .done { opacity: 1; transition: opacity .35s ease .22s; }
.voiceanim .chead { display: flex; align-items: center; gap: 11px; font-size: 21px; font-weight: 700; margin-bottom: 16px; }
.voiceanim .chead .spark { color: var(--vgreen); }
.voiceanim .spark svg { width: 22px; height: 22px; }
.voiceanim .steps { display: flex; flex-direction: column; gap: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15.5px; letter-spacing: -.2px; }
.voiceanim .step { display: flex; align-items: center; gap: 13px; opacity: 0; transform: translateX(-4px); transition: opacity .35s ease, transform .35s ease; color: var(--vmuted); background: none; border: 0; border-radius: 0; padding: 0; text-align: left; }
.voiceanim .step.show { opacity: 1; transform: none; }
.voiceanim .step .ic { width: 16px; flex: 0 0 auto; text-align: center; color: var(--vmuted2); }
.voiceanim .step.active { color: #dfe6df; }
.voiceanim .step.active .ic { color: var(--vgreen); }
.voiceanim .step.done .ic { color: var(--vgreen-dim); }
.voiceanim .cursor { display: inline-block; width: 9px; height: 17px; background: var(--vgreen); margin-left: 4px; border-radius: 1px; vertical-align: -2px; animation: vblink 1s steps(1) infinite; }
@keyframes vblink { 50% { opacity: 0; } }
.voiceanim .dhead { display: flex; align-items: center; gap: 11px; font-size: 21px; font-weight: 700; margin-bottom: 4px; }
.voiceanim .dcheck { width: 24px; height: 24px; border-radius: 50%; background: var(--vgreen); display: grid; place-items: center; flex: 0 0 auto; }
.voiceanim .dcheck svg { width: 14px; height: 14px; }
.voiceanim .dsub { color: var(--vmuted); font-size: 13px; margin: 0 0 16px 35px; }
.voiceanim .trow { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, .06); opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s var(--vease); }
.voiceanim .trow.show { opacity: 1; transform: none; }
.voiceanim .tdot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.voiceanim .tname { flex: 1; font-size: 15px; font-weight: 500; }
.voiceanim .ttime { font-size: 14px; color: var(--vblue); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .voiceanim * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .voiceanim .voice-wave-trace { animation: none !important; stroke-dashoffset: 0; transform: none; }
  .voiceanim .voice-orb-ring { animation: none !important; opacity: .32; transform: scale(1); }
  .voiceanim .voice-orb-core { animation: none !important; transform: none; }
}

/* ---------- Statistics product-tour animation (premium) ---------- */
.statsanim {
  --screen: #e4efed; --card: #eff6f4; --card2: #e7f1ef; --ink: #16302f; --muted: #7d9491; --muted2: #9fb2af;
  --teal: #3f8d99; --teal-d: #2f7a86; --orange: #e8954a; --red: #e3556b; --cyan: #4bb3c2; --blue: #3a7be8; --purple: #b14ad8; --gray: #9a9a9a;
  --ease: cubic-bezier(.66, 0, .34, 1);
  display: flex; justify-content: center; width: 100%;
}
.statsanim-fit { position: relative; width: 271px; height: 524px; }
.statsanim .stage { position: absolute; top: 0; left: 0; transform: scale(.702); transform-origin: top left; }
.statsanim .frame { width: 360px; height: 720px; border-radius: 48px; padding: 13px; background: linear-gradient(160deg, #9fb6b3, #5c706e); box-shadow: 0 40px 90px -28px rgba(30, 50, 48, .55), 0 4px 10px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .18); }
.statsanim .screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: var(--screen); color: var(--ink); }
.statsanim .statusbar { position: absolute; top: 0; left: 0; right: 0; height: 34px; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 12px 26px 0; font-size: 15px; font-weight: 600; }
.statsanim .sb-r { display: flex; align-items: center; gap: 7px; }
.statsanim .sig { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.statsanim .sig i { width: 3px; background: var(--ink); border-radius: 1px; }
.statsanim .sig i:nth-child(1) { height: 5px; } .statsanim .sig i:nth-child(2) { height: 8px; }
.statsanim .sig i:nth-child(3) { height: 11px; opacity: .35; } .statsanim .sig i:nth-child(4) { height: 13px; opacity: .35; }
.statsanim .bat { display: flex; align-items: center; gap: 3px; background: #54d07f; color: #06210f; font-size: 11px; font-weight: 800; padding: 2px 5px; border-radius: 5px; }
.statsanim .content { position: absolute; top: 34px; left: 0; right: 0; bottom: 0; overflow: hidden; }
.statsanim .view { position: absolute; inset: 0; padding: 8px 16px 78px; opacity: 0; transform: translateY(10px) scale(.986); transition: opacity .5s ease, transform .55s var(--ease); pointer-events: none; }
.statsanim .stage[data-scene="1"] .v1, .statsanim .stage[data-scene="2"] .v2, .statsanim .stage[data-scene="3"] .v3, .statsanim .stage[data-scene="4"] .v4 { opacity: 1; transform: none; }
.statsanim .mnav { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 6px 0 14px; font-size: 21px; font-weight: 700; }
.statsanim .arrow { width: 40px; height: 40px; border-radius: 50%; background: var(--card); display: grid; place-items: center; box-shadow: 0 6px 14px -8px rgba(30, 50, 48, .4); }
.statsanim .arrow svg { width: 16px; height: 16px; stroke: var(--teal); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.statsanim .arrow.faint { opacity: .4; }
.statsanim .arrow.l { margin-right: auto; } .statsanim .arrow.r { margin-left: auto; }
.statsanim .vtitle { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; }
.statsanim .hhead { display: flex; align-items: center; gap: 14px; margin: 2px 0 14px; }
.statsanim .hclose { width: 40px; height: 40px; border-radius: 50%; background: var(--card); display: grid; place-items: center; box-shadow: 0 6px 14px -8px rgba(30, 50, 48, .4); }
.statsanim .hclose svg { width: 18px; height: 18px; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.statsanim .htitle { flex: 1; text-align: center; font-size: 20px; font-weight: 700; margin-right: 40px; }
.statsanim .hgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.statsanim .hcard { background: var(--card); border-radius: 20px; padding: 13px 13px 15px; box-shadow: 0 10px 22px -16px rgba(30, 50, 48, .4); }
.statsanim .hcard .top { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.statsanim .hcard .em { width: 30px; height: 30px; border-radius: 50%; background: #e3ddd2; display: grid; place-items: center; font-size: 15px; flex: 0 0 auto; }
.statsanim .hcard .nm { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statsanim .cells { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.statsanim .cell { aspect-ratio: 1; border-radius: 3px; background: #dde6e3; transition: background .25s ease, transform .25s ease; }
.statsanim .cell.on { transform: scale(1.04); }
.statsanim .fsum { background: var(--card); border-radius: 22px; padding: 18px 18px 16px; margin-bottom: 16px; box-shadow: 0 12px 26px -18px rgba(30, 50, 48, .4); }
.statsanim .frow { display: flex; }
.statsanim .fcol { flex: 1; text-align: center; }
.statsanim .fcol.divr { border-right: 1px solid rgba(30, 50, 48, .1); }
.statsanim .flab { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.statsanim .flab.inc { color: #3aa05f; } .statsanim .flab.spt { color: var(--red); }
.statsanim .fbadge { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; }
.statsanim .fbadge svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; }
.statsanim .fval { font-size: 27px; font-weight: 800; letter-spacing: -.5px; }
.statsanim .fdiv { height: 1px; background: rgba(30, 50, 48, .1); margin: 14px 0; }
.statsanim .fnet { display: flex; align-items: center; justify-content: space-between; }
.statsanim .fnet .l { font-size: 18px; color: var(--muted); font-weight: 600; }
.statsanim .fnet .v { font-size: 26px; font-weight: 800; color: var(--teal); }
.statsanim .bkhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.statsanim .bkhead h2 { font-size: 24px; font-weight: 800; }
.statsanim .addw { background: var(--card2); color: var(--teal); font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: 999px; display: flex; align-items: center; gap: 6px; }
.statsanim .seg2 { display: flex; background: var(--card2); border-radius: 14px; padding: 5px; margin-bottom: 14px; }
.statsanim .seg2 span { flex: 1; text-align: center; padding: 11px; border-radius: 11px; font-size: 15px; font-weight: 700; color: var(--muted); }
.statsanim .seg2 span.on { background: var(--teal); color: #fff; }
.statsanim .donutcard { background: var(--card); border-radius: 22px; padding: 18px; position: relative; box-shadow: 0 12px 26px -18px rgba(30, 50, 48, .4); }
.statsanim .donutcard .ch { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.statsanim .donutcard .ch .t { font-size: 18px; font-weight: 700; color: #33514f; }
.statsanim .perday { background: var(--card2); color: var(--teal); font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 999px; }
.statsanim .donutwrap { position: relative; display: grid; place-items: center; height: 200px; }
.statsanim .dcenter { position: absolute; text-align: center; }
.statsanim .dcenter .tt { font-size: 14px; color: var(--muted); }
.statsanim .dcenter .vv { font-size: 30px; font-weight: 800; letter-spacing: -.5px; }
.statsanim .dcenter .hh { font-size: 13px; color: var(--muted2); }
.statsanim .seg-c { transition: stroke-dasharray .6s var(--ease); }
.statsanim .ringcard { background: var(--card); border-radius: 22px; padding: 16px 18px; margin-bottom: 16px; display: flex; align-items: center; gap: 18px; box-shadow: 0 12px 26px -18px rgba(30, 50, 48, .4); }
.statsanim .ringwrap { position: relative; width: 104px; height: 104px; flex: 0 0 auto; }
.statsanim .ringwrap .ic { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; }
.statsanim .ringwrap .pc { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 22px; font-weight: 800; }
.statsanim .ring-fg { transition: stroke-dashoffset .9s var(--ease); }
.statsanim .rinfo .t { font-size: 24px; font-weight: 800; margin-bottom: 4px; }
.statsanim .rinfo .n { font-size: 20px; color: #3c5957; font-weight: 600; }
.statsanim .rinfo .s { font-size: 14px; color: var(--muted); margin-top: 3px; }
.statsanim .statcard { background: var(--card); border-radius: 22px; padding: 16px 18px; box-shadow: 0 12px 26px -18px rgba(30, 50, 48, .4); }
.statsanim .schead { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; margin-bottom: 12px; }
.statsanim .schead svg { width: 22px; height: 22px; }
.statsanim .tabs { display: flex; background: var(--card2); border-radius: 16px; padding: 5px; margin-bottom: 14px; }
.statsanim .tabs span { flex: 1; text-align: center; padding: 10px; border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--muted); }
.statsanim .tabs span.on { background: var(--teal); color: #fff; }
.statsanim .bignum { font-size: 40px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.statsanim .bignum small { font-size: 17px; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.statsanim .avg { color: var(--teal); font-size: 15px; font-weight: 600; margin: 4px 0 12px; }
.statsanim .bars { display: flex; align-items: flex-end; gap: 2px; height: 130px; padding-top: 6px; }
.statsanim .bar { flex: 1; height: 0; border-radius: 3px 3px 0 0; align-self: flex-end; background: linear-gradient(180deg, var(--red), var(--teal)); transition: height .5s var(--ease); }
.statsanim .baraxis { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted2); margin-top: 6px; }
.statsanim .exhead { display: flex; align-items: center; gap: 14px; margin: 2px 0 16px; }
.statsanim .exicon { width: 62px; height: 62px; border-radius: 16px; background: #fff; display: grid; place-items: center; font-size: 30px; box-shadow: 0 10px 22px -14px rgba(30, 50, 48, .4); }
.statsanim .exhead .t { font-size: 30px; font-weight: 800; letter-spacing: -.5px; }
.statsanim .exhead .b { display: flex; align-items: center; gap: 6px; color: #caa01e; font-size: 15px; font-weight: 700; margin-top: 2px; }
.statsanim .logcard { background: var(--card); border-radius: 22px; padding: 18px; margin-bottom: 16px; box-shadow: 0 12px 26px -18px rgba(30, 50, 48, .4); }
.statsanim .logcard h3 { font-size: 18px; font-weight: 800; margin-bottom: 14px; }
.statsanim .repsrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.statsanim .repsrow .lab { font-size: 18px; color: #3c5957; }
.statsanim .repctl { display: flex; align-items: center; gap: 14px; }
.statsanim .repctl .v { font-size: 26px; font-weight: 800; min-width: 34px; text-align: right; }
.statsanim .stepper { display: flex; align-items: center; background: var(--card2); border-radius: 12px; }
.statsanim .stepper button { border: none; background: none; font-size: 22px; font-weight: 700; color: var(--ink); width: 44px; height: 40px; cursor: pointer; }
.statsanim .stepper .sep { width: 1px; height: 22px; background: rgba(30, 50, 48, .15); }
.statsanim .logbtn { width: 100%; background: var(--teal); color: #fff; font-size: 19px; font-weight: 700; padding: 16px; border-radius: 16px; text-align: center; transition: transform .25s var(--ease); }
.statsanim .logbtn.pulse { transform: scale(.97); }
.statsanim .exstats { display: flex; margin-bottom: 6px; }
.statsanim .exstats .c { flex: 1; }
.statsanim .exstats .n { font-size: 26px; font-weight: 800; }
.statsanim .exstats .l { font-size: 13px; color: var(--muted); }
.statsanim .bottomnav { position: absolute; left: 18px; right: 18px; bottom: 16px; height: 60px; z-index: 30; background: rgba(243, 249, 247, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 30px; display: flex; align-items: center; justify-content: space-around; box-shadow: 0 14px 30px -16px rgba(30, 50, 48, .45), inset 0 0 0 1px rgba(255, 255, 255, .5); }
.statsanim .nav { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #3c5957; transition: .3s; }
.statsanim .nav svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.statsanim .nav.on { background: rgba(63, 141, 153, .16); color: var(--teal); }
@media (prefers-reduced-motion: reduce) { .statsanim * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
/* compact so each view fits above the bottom nav */
.statsanim .view { padding: 4px 16px 76px; }
.statsanim .hhead { margin: 0 0 7px; }
.statsanim .mnav { margin: 1px 0 7px; font-size: 19px; }
.statsanim .arrow, .statsanim .hclose { width: 34px; height: 34px; }
.statsanim .hgrid { gap: 8px; }
.statsanim .hcard { padding: 8px 9px 9px; border-radius: 16px; }
.statsanim .hcard .top { margin-bottom: 6px; gap: 7px; }
.statsanim .hcard .em { width: 25px; height: 25px; font-size: 13px; }
.statsanim .hcard .nm { font-size: 13px; }
.statsanim .cells { gap: 2px; }
.statsanim .htitle { font-size: 18px; }
.statsanim .fsum { padding: 13px 16px 12px; margin-bottom: 11px; }
.statsanim .fdiv { margin: 10px 0; }
.statsanim .fval { font-size: 24px; }
.statsanim .bkhead { margin-bottom: 8px; }
.statsanim .bkhead h2 { font-size: 21px; }
.statsanim .seg2 { margin-bottom: 10px; }
.statsanim .seg2 span { padding: 9px; }
.statsanim .donutcard { padding: 13px 14px; }
.statsanim .donutwrap { height: 150px; }
.statsanim #donut { width: 150px; height: 150px; }
.statsanim .dcenter .vv { font-size: 26px; }
.statsanim .ringcard { padding: 12px 16px; margin-bottom: 12px; gap: 14px; }
.statsanim .ringwrap { width: 92px; height: 92px; }
.statsanim .statcard { padding: 13px 16px; }
.statsanim .schead { margin-bottom: 10px; font-size: 20px; }
.statsanim .tabs { margin-bottom: 10px; }
.statsanim .tabs span { padding: 8px; }
.statsanim .bignum { font-size: 34px; }
.statsanim .avg { margin: 3px 0 8px; }
.statsanim .bars { height: 96px; }
.statsanim .exhead { margin: 0 0 11px; }
.statsanim .exicon { width: 54px; height: 54px; font-size: 26px; }
.statsanim .exhead .t { font-size: 26px; }
.statsanim .logcard { padding: 14px; margin-bottom: 12px; }
.statsanim .logcard h3 { margin-bottom: 10px; }
.statsanim .repsrow { margin-bottom: 12px; }

/* ---------- App Store button ---------- */
.appstore-btn {
  background: #111 !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.30) !important;
}
.appstore-btn:hover {
  background: #2a2a2a !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,.38) !important;
}
.appstore-btn::after { display: none; }
.dl-appstore-icon { width: 20px; height: 20px; border-radius: 5px; display: block; flex: 0 0 auto; }

/* ---------- Premium showcase ---------- */
.premium-section { padding: 20px 0 84px; }
.prem-kicker { color: var(--orange) !important; }
.prem-phones {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 18px; margin-bottom: 36px; flex-wrap: wrap;
}
.prem-phone {
  position: relative; flex: none; width: 168px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  transition: transform .3s var(--ease);
}
.prem-phone:hover { transform: translateY(-8px); }
.prem-phone img {
  display: block; width: 100%; border-radius: 32px;
  box-shadow: 0 28px 64px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.12);
  transition: box-shadow .3s var(--ease);
}
.prem-phone.featured { width: 200px; }
.prem-phone.featured img {
  box-shadow: 0 36px 80px rgba(250,163,78,.32), 0 0 0 2px rgba(250,163,78,.4);
}
.prem-label {
  font-size: 12.5px; font-weight: 700; color: var(--muted);
  letter-spacing: .04em; text-align: center;
}
.prem-chips {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 32px;
}
.prem-chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600;
  color: var(--orange); background: rgba(250,163,78,.10); border: 1px solid rgba(250,163,78,.28);
  padding: 8px 16px; border-radius: 999px;
}
.prem-cta { text-align: center; }

/* ---------- Free vs Premium table ---------- */
#compare { padding: 80px 0; }
.compare-wrap { max-width: 560px; margin: 0 auto; }
.compare-table {
  width: 100%; border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px; overflow: hidden;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(34,26,46,.14);
}
.compare-table thead tr { background: rgba(34,26,46,.04); }
.compare-table th {
  padding: 18px 28px; font-size: 13px; font-weight: 700; text-align: center;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2);
}
.compare-table th:first-child { text-align: left; }
.compare-table th.prem-col { color: var(--accent); }
.compare-table tbody tr { border-top: 1px solid var(--hairline); transition: background .15s; }
.compare-table tbody tr:hover { background: rgba(79,209,138,.05); }
.compare-table td {
  padding: 16px 28px; font-size: 15px; font-weight: 500; text-align: center; color: var(--muted);
}
.compare-table td:first-child { text-align: left; font-weight: 600; color: var(--text); }
.compare-table .prem-col { color: var(--accent) !important; font-weight: 700 !important; }
.chk-mark { font-size: 19px; font-weight: 800; color: var(--accent); }
.prem-val { font-size: 16px; font-weight: 700; color: var(--accent); }
.dash { font-size: 20px; color: var(--muted-2); }
.compare-cta { text-align: center; margin-top: 28px; }

/* ---------- Responsive for new sections ---------- */
@media (max-width: 600px) {
  .prem-phone { width: 130px; }
  .prem-phone.featured { width: 155px; }
  .prem-phone img { border-radius: 24px; }
  .prem-phones { gap: 12px; }
  .compare-table th, .compare-table td { padding: 14px 16px; font-size: 14px; }
}

/* ======================================================
   Brand splash loader (homepage, once per session)
   Ring draws -> tick draws -> mark pops -> fades to reveal the site.
   Hidden unless the head script adds .show-splash to <html>, so repeat
   visits and no-JS visitors never see a yellow flash.
   ====================================================== */
.kloader {
  position: fixed; inset: 0; z-index: 200;
  background: #D3C401; /* logo yellow */
  display: none; place-items: center;
  transition: opacity .4s ease, transform .4s ease;
}
.show-splash .kloader { display: grid; }
.kloader.hide { opacity: 0; transform: scale(1.04); pointer-events: none; }
.kloader .kmark { width: 140px; height: 140px; opacity: 0; }
.kloader .kring, .kloader .ktick { fill: none; stroke: #fff; }
.kloader .kring { stroke-width: 3.8; }
/* flat ends + sharp vertex = matches the bold logo tick */
.kloader .ktick { stroke-width: 9; stroke-linecap: butt; stroke-linejoin: miter; }
@keyframes kloader-pop { 0% { transform: scale(1); } 55% { transform: scale(1.06); } 100% { transform: scale(1); } }
.kloader .kmark.pop { animation: kloader-pop .32s cubic-bezier(.34, 1.56, .64, 1); transform-origin: 50% 50%; }

/* ======================================================
   Mobile hamburger menu — premium full-screen overlay
   ====================================================== */

/* Scroll-lock scrollbar compensation: the menu JS sets --sbw to the root
   scrollbar width while the body is pinned, so the page and the fixed nav
   don't shift right when the scrollbar disappears. 0 on phones. */
body { padding-right: var(--sbw, 0px); }
body > nav { padding-right: var(--sbw, 0px); }

/* ---------- Menu button: two lines that morph into a tick ---------- */
.nav-burger {
  display: none;
  position: relative;
  width: 44px; height: 44px; padding: 0;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--hairline);
  border-radius: 14px; cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(34,26,46,.10);
  transition: background .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
  /* Kill iOS Safari's ~300ms tap delay. Without it the tap fires late as a
     synthesized click that lands on whatever is at that spot after the menu
     opened, activating content "behind" the header. */
  touch-action: manipulation;
}
.nav-burger:hover { background: rgba(255,255,255,.95); box-shadow: 0 6px 20px rgba(34,26,46,.14); }

/* Bars are shared with .mnav-close so the overlay's close button shows the
   same lines→tick morph in the exact same spot. */
.nav-burger .bar,
.mnav-close .bar {
  position: absolute; left: 50%; top: 50%;
  width: 20px; height: 2px;
  margin-left: -10px; margin-top: -1px;
  background: var(--ink); border-radius: 999px;
  transform-origin: center;
  transition:
    transform .42s cubic-bezier(.65, 0, .25, 1.4), /* slight overshoot = springy */
    background-color .3s ease;
}

/* Closed = two parallel lines */
.nav-burger .bar.top,    .mnav-close .bar.top    { transform: translateY(-4px); }
.nav-burger .bar.bottom, .mnav-close .bar.bottom { transform: translateY(4px); }

/* Open = tick.
   top line    -> long arm  (rotated -45, nudged right)
   bottom line -> short arm (scaled to ~48%, rotated +45, moved to vertex) */
.nav-burger.open .bar,
.mobile-nav.open .mnav-close .bar {
  background: #C4B82C; /* Kameto yellow */
}
.nav-burger.open .bar.top,
.mobile-nav.open .mnav-close .bar.top {
  transform: translate(3px, 0) rotate(-45deg);
}
.nav-burger.open .bar.bottom,
.mobile-nav.open .mnav-close .bar.bottom {
  transform: translate(-7.5px, 3.7px) rotate(45deg) scaleX(.48);
}

@media (prefers-reduced-motion: reduce) {
  .nav-burger .bar, .mnav-close .bar { transition: background-color .2s ease; }
}

@media (max-width: 720px) { .nav-burger { display: flex; } }

/* ---------- Full-screen overlay ---------- */
.mobile-nav {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(44px) saturate(190%);
  -webkit-backdrop-filter: blur(44px) saturate(190%);
  opacity: 0; pointer-events: none; visibility: hidden;
  transform: scale(0.985);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .31s;
  overflow: hidden;
}
.mobile-nav.open {
  opacity: 1; pointer-events: all; visibility: visible;
  transform: scale(1);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s 0s;
}

/* Decorative ambient blobs */
.mnav-blob {
  position: absolute; border-radius: 50%; pointer-events: none; filter: blur(70px);
}
.mnav-blob-a {
  width: 60vw; height: 60vw; top: -14%; right: -10%;
  background: radial-gradient(closest-side, rgba(79,209,138,.28), transparent);
}
.mnav-blob-b {
  width: 55vw; height: 55vw; bottom: 4%; left: -12%;
  background: radial-gradient(closest-side, rgba(245,92,140,.20), transparent);
}
.mnav-blob-c {
  width: 48vw; height: 48vw; bottom: 28%; right: -6%;
  background: radial-gradient(closest-side, rgba(250,163,78,.16), transparent);
}

/* Header bar — mirrors the main nav */
.mnav-header {
  display: flex; align-items: center; justify-content: space-between;
  height: 82px; padding: 0 24px; flex: none;
  padding-right: calc(24px + var(--sbw, 0px));
  border-bottom: 1px solid rgba(34,26,46,.08);
  position: relative; z-index: 1;
}
/* Horizontal padding must track nav .wrap (24px → 18px @640 → 15px @400),
   otherwise the brand + button jump sideways when the overlay opens. */
@media (max-width: 640px) { .mnav-header { padding: 0 18px; padding-right: calc(18px + var(--sbw, 0px)); } }
@media (max-width: 600px) { .mnav-header { height: 70px; } }
@media (max-width: 400px) { .mnav-header { height: 64px; padding: 0 15px; padding-right: calc(15px + var(--sbw, 0px)); } }

/* Close button */
.mnav-close {
  position: relative;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  background: rgba(34,26,46,.06);
  border: 1px solid rgba(34,26,46,.09);
  border-radius: 14px; color: var(--ink);
  transition: background .18s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;   /* no 300ms delay -> no tap bleeding through the overlay */
}
.mnav-close:hover { background: rgba(34,26,46,.12); }

/* Big nav links */
.mnav-links {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 0 28px; position: relative; z-index: 1;
}
.mnav-links a {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: clamp(26px, 8vw, 38px); font-weight: 700; letter-spacing: -.032em;
  color: var(--text); text-decoration: none;
  padding: 15px 2px;
  border-bottom: 1px solid rgba(34,26,46,.08);
  display: flex; align-items: center; justify-content: space-between;
  opacity: 0; transform: translateY(16px);
  transition: opacity .42s var(--ease), transform .42s var(--ease), color .15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;   /* tap fires on the link, not on the page revealed behind it */
}
.mnav-links a:first-child { border-top: 1px solid rgba(34,26,46,.08); }
.mnav-links a::after {
  content: "→"; font-size: 22px; font-weight: 400;
  color: var(--accent); opacity: 0;
  transform: translateX(-10px);
  transition: opacity .18s, transform .22s var(--ease);
}
.mnav-links a:hover { color: var(--accent); }
.mnav-links a:hover::after { opacity: 1; transform: translateX(0); }

/* Staggered entrance — every link reveals, with a delay per position */
.mobile-nav.open .mnav-links a { opacity: 1; transform: none; }
.mobile-nav.open .mnav-links a:nth-child(1) { transition-delay: .04s; }
.mobile-nav.open .mnav-links a:nth-child(2) { transition-delay: .08s; }
.mobile-nav.open .mnav-links a:nth-child(3) { transition-delay: .12s; }
.mobile-nav.open .mnav-links a:nth-child(4) { transition-delay: .16s; }
.mobile-nav.open .mnav-links a:nth-child(5) { transition-delay: .20s; }
.mobile-nav.open .mnav-links a:nth-child(6) { transition-delay: .24s; }
.mobile-nav.open .mnav-links a:nth-child(7) { transition-delay: .28s; }

/* Footer CTA */
.mnav-foot {
  padding: 24px 28px max(32px, env(safe-area-inset-bottom));
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px;
  border-top: 1px solid rgba(34,26,46,.08);
  position: relative; z-index: 1;
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.mobile-nav.open .mnav-foot { opacity: 1; transform: none; transition-delay: .22s; }
.mnav-foot .btn { width: 100%; max-width: 340px; font-size: 17px !important; padding: 17px 32px !important; }
.mnav-fine { font-size: 13px; color: var(--muted-2); }

/* ---------- Download page ---------- */
.dl-hero { text-align: center; padding-bottom: 64px; }
.dl-appicon {
  width: 96px; height: 96px; border-radius: 24px; display: block; margin: 0 auto 26px;
  box-shadow: 0 18px 44px rgba(34,26,46,.20), 0 0 0 1px rgba(255,255,255,.5);
}
.dl-hero h1 { font-size: clamp(30px, 6.4vw, 56px); }
.dl-sub { max-width: 540px; margin: 22px auto 0; color: var(--muted); font-size: clamp(16px, 2vw, 19px); line-height: 1.6; }
.dl-primary { margin-top: 34px; font-size: 17px; padding: 16px 30px; }
.dl-platforms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1100px; margin: 30px auto 0; }
.dl-card {
  display: flex; align-items: center; gap: 15px; text-align: left;
  background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 18px 20px;
  transition: transform .32s var(--ease), border-color .25s, box-shadow .32s, background .25s;
  will-change: transform;
}
.dl-card:hover {
  transform: translateY(-7px); border-color: color-mix(in srgb, var(--accent-2) 40%, var(--border));
  box-shadow: 0 20px 42px rgba(34,26,46,.14); background: var(--card-2);
}
.dl-card-ico {
  width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
  display: grid; place-items: center; overflow: hidden; background: transparent;
  transition: box-shadow .32s var(--ease);
}
.dl-card:hover .dl-card-ico { box-shadow: 0 8px 18px rgba(34,26,46,.18); }
.dl-official-icon { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.dl-card-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl-card-txt strong { font-family: "Space Grotesk", "Inter", sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.dl-card-txt span { color: var(--muted-2); font-size: 13px; }
.dl-card-arrow { flex: 0 0 auto; color: var(--muted-2); display: grid; place-items: center; transition: transform .32s var(--ease), color .25s; }
.dl-card:hover .dl-card-arrow { color: var(--ink); transform: translateX(5px); }
.dl-card-arrow svg { width: 20px; height: 20px; }
.dl-note { margin: 30px auto 0; max-width: 460px; color: var(--muted-2); font-size: 14px; }
@media (max-width: 900px) {
  .dl-platforms { grid-template-columns: 1fr; max-width: 380px; }
}
@media (max-width: 560px) {
  .dl-platforms { max-width: 360px; }
  .dl-appicon { width: 84px; height: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .dl-card, .dl-card-ico, .dl-card-arrow { transition: none; }
  .dl-card:hover { transform: none; }
  .dl-card:hover .dl-card-ico, .dl-card:hover .dl-card-arrow { transform: none; }
}


/* ---- Calendar showcase (#calviews): live interactive component ---- */
/* Brand tokens scoped to this section; the component carries its own copy inside. */
#calviews {
  --kcal-accent: #5B5BF5;
  --kcal-accent-soft: #ECEDFE;
  --kcal-ink: #16171F;
  --kcal-muted: #8A8EA0;
  --kcal-border: #ECEDF3;
  --kcal-surface: #FAFAFC;
  --kcal-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}
.kcal-head { font-family: var(--kcal-font); text-align: center; max-width: 640px; margin: 0 auto 50px; }
.kcal-eyebrow {
  display: block; font-size: 11pt; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--kcal-accent); margin-bottom: 14px;
}
.kcal-title {
  font-family: var(--kcal-font); font-size: clamp(30px, 4.4vw, 40px); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.15; color: var(--kcal-ink); margin-bottom: 12px;
}
.kcal-sub { color: var(--kcal-muted); font-size: 17px; }

.kcal-frame { position: relative; max-width: 1080px; margin: 0 auto; }
.kcal-glow {
  position: absolute; inset: -70px -90px; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side at 50% 45%,
    rgba(91, 91, 245, .14), rgba(91, 91, 245, .05) 55%, rgba(91, 91, 245, 0) 80%);
}
/* min-height reserves the component's rendered size so mounting causes no layout shift. */
.kcal-mount { position: relative; z-index: 1; min-height: 854px; }

/* Host-page shim: the site's global h1 rule (Space Grotesk) would otherwise
   override the component's own system font stack on its title. */
.kcal-mount .kameto-cal h1 { font-family: inherit; }

/* Keyboard focus for the calendar controls, styled from outside the component. */
.kcal-mount .kc-view:focus-visible,
.kcal-mount .kc-today:focus-visible,
.kcal-mount .kc-icon:focus-visible { outline: 2px solid var(--kcal-accent); outline-offset: 2px; }

/* The calendar rises 12px on scroll into view; the shared .reveal observer adds .in once. */
.kcal-reveal { transform: translateY(12px); }
.kcal-reveal.in { transform: none; }

@media (max-width: 760px) {
  .kcal-head { margin-bottom: 34px; }
  .kcal-sub { font-size: 15.5px; }
  .kcal-mount { min-height: 994px; }
  .kcal-glow { inset: -40px -20px; }
}
@media (prefers-reduced-motion: reduce) {
  .kcal-reveal { transform: none; transition: none; }
}

/* ---------- Hero auth card (same Firebase auth as portal.kameto.app/sign-in) ---------- */
.hero-cta { display: flex; flex-direction: column; align-items: center; margin-top: 40px; }
/* Mobile shows a simple "Get Started Free" button instead of the inline auth card
   (see the max-width rule below); hidden on desktop where the full card is used. */
.hero-cta-mobile { display: none; }
.hero-auth {
  width: min(400px, 92vw);
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  box-shadow: 0 24px 60px rgba(34,26,46,.12), inset 0 1px 0 rgba(255,255,255,.7);
  text-align: center;
}
.hero-auth.busy { pointer-events: none; }
.auth-btn {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px; border-radius: 14px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.011em;
  transition: transform .18s var(--ease), background .15s, box-shadow .2s var(--ease);
}
.auth-btn + .auth-btn { margin-top: 10px; }
.auth-btn:hover { transform: translateY(-1px); }
.auth-apple { background: #0b0b0f; color: #fff; border: 1px solid #0b0b0f; }
.auth-apple:hover { background: #1d1d24; }
.auth-google { background: #fff; color: var(--ink); border: 1px solid var(--hairline); }
.auth-google:hover { background: rgba(34,26,46,.04); }
.auth-btn:disabled, .auth-submit:disabled { opacity: .55; cursor: default; transform: none; }
.auth-divider {
  display: flex; align-items: center; gap: 12px; margin: 15px 0;
  color: var(--muted-2); font-size: 12px; text-transform: lowercase;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.auth-input {
  width: 100%; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--hairline); background: #fff;
  font: inherit; font-size: 15px; color: var(--ink);
}
.auth-input::placeholder { color: var(--muted-2); }
.auth-input:focus { outline: 2px solid rgba(79,209,138,.55); outline-offset: 0; border-color: transparent; }
.auth-input + .auth-input { margin-top: 10px; }
.auth-submit { width: 100%; margin-top: 12px; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; }
.auth-msg { margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: #c33d5c; }
.auth-msg.ok { color: #1f8a54; }
.auth-alt { margin-top: 13px; font-size: 13.5px; color: var(--muted); }
.auth-alt + .auth-alt { margin-top: 6px; }
.auth-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.auth-hello { font-weight: 600; color: var(--ink); margin-bottom: 12px; }

/* Official-style App Store badge — first (and biggest) action in the CTA stack.
   Sized to match the "Continue with Apple" button inside the auth card below:
   card width minus its 22px horizontal padding on each side. */
.appstore-badge { display: block; width: min(356px, calc(92vw - 44px)); margin: 0 0 28px; transition: transform .18s var(--ease), opacity .15s; }
.appstore-badge:hover { transform: translateY(-2px); opacity: .92; }
.appstore-badge svg { display: block; width: 100%; height: auto; }

/* ---------- Hero two-column layout (desktop) ----------
   Mobile keeps the natural stacked order (headline, auth CTA, then Year in
   Review below). From the lg breakpoint up, the Year in Review card moves to
   the right of the headline as a two-column hero. */
@media (min-width: 960px) {
  .hero-grid {
    display: grid;
    /* Content-sized columns pulled toward the middle so the auth card and the
       Year in Review sit close together as a centered pair (no dead zone). */
    grid-template-columns: 420px minmax(340px, 430px);
    justify-content: center;
    align-items: start;
    gap: 40px 56px;
    text-align: left;
  }
  /* BIG centered headline banner across the full width. It is wider than the
     two centered columns below, so let it overflow its grid area symmetrically
     (width: max-content + justify-self: center). Capped so "Organise your
     fitness" (the longest rotating word) still fits on one line in the wrap. */
  .hero-grid > h1 {
    grid-column: 1 / -1;
    justify-self: center;
    width: max-content;
    text-align: center;
    font-size: clamp(62px, 8vw, 112px);
  }
  .hero-left { display: flex; flex-direction: column; align-items: flex-start; }
  .hero-grid .hero-cta { align-items: flex-start; margin-top: 0; width: 100%; max-width: 420px; }
  .hero-grid .hero-auth { width: 100%; }
  /* Badge sits below the auth card; inset to match the "Continue with Apple"
     button width (auth card minus 22px padding each side). */
  .hero-grid .appstore-badge { width: calc(100% - 44px); margin: 22px 22px 0; }
  /* Keep the Year in Review card single-column inside the narrower hero column,
     so its 34 day-cells stay crisp instead of collapsing (the wider two-up
     layout below still applies when the card renders on its own elsewhere). */
  .hero-grid .yir { margin: 0; width: 100%; }
  .hero-grid #yirCards { grid-template-columns: 1fr; }
}

/* ---------- Showcase: real screenshots in real device frames, scroll-driven
   (script at end of body). Desktop sits in a MacBook-style frame — dark lid
   bezel + aluminium base with the thumb-scoop notch; the phone in an
   iPhone-style frame — dark bezel, Dynamic Island, side buttons. ---------- */
/* Clip horizontally only: the phone slides in from off-stage (translate up to
   78px right) and must not create a sideways scrollbar — but the devices' big
   soft drop shadows extend below the section, and clipping the y axis sliced
   them into a hard horizontal edge above "Why Kameto?". */
.showcase { padding: 34px 0 84px; overflow-x: clip; }
.showcase-stage { position: relative; max-width: 980px; margin: 0 auto; }
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; }
.shot-desktop {
  position: relative;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.mac-lid {
  position: relative;
  margin: 0 4.5%;
  padding: 16px 16px 18px;
  background: linear-gradient(180deg, #3f4046, #17181c);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 40px 90px rgba(34,26,46,.28), inset 0 1px 0 rgba(255,255,255,.16);
}
.mac-camera {
  position: absolute; top: 6px; left: 50%; width: 6px; height: 6px;
  margin-left: -3px; border-radius: 50%;
  background: #050507; box-shadow: inset 0 0 1px 1px #2f3340;
}
.mac-screen { position: relative; overflow: hidden; border-radius: 6px; background: #fff; }
/* The screenshot ends mid-grid, which looked like a hard crop against the bezel.
   Dissolve the bottom of the content into the screen's white so it reads as a
   soft fade instead of a chopped row. */
.mac-screen::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 88%);
  pointer-events: none; z-index: 2;
}
.mac-base {
  position: relative; height: 15px;
  background: linear-gradient(180deg, #eef0f4, #c7cad2 62%, #979caa);
  border-radius: 2px 2px 13px 13px;
  box-shadow: 0 30px 60px rgba(34,26,46,.26);
}
.mac-base::before { /* thumb-scoop notch */
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 13%; height: 8px;
  background: linear-gradient(180deg, #aeb3bf, #dde0e7);
  border-radius: 0 0 10px 10px;
}
.shot-phone {
  position: absolute; right: -34px; bottom: -46px; width: min(236px, 30vw);
  will-change: transform;
}
.iphone-frame {
  position: relative;
  padding: 8px;
  background: linear-gradient(180deg, #4b4c52, #1a1b1f);
  border-radius: 36px;
  box-shadow: 0 30px 70px rgba(34,26,46,.35), inset 0 0 0 2px rgba(255,255,255,.10);
}
.iphone-frame img { border-radius: 28px; background: #000; }
.iphone-island {
  position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 15px; border-radius: 999px; background: #000; z-index: 2;
}
/* Side buttons: volume on the left, power on the right. */
.iphone-frame::before {
  content: ""; position: absolute; left: -2px; top: 22%; width: 2px; height: 9%;
  background: #2c2d33; border-radius: 2px 0 0 2px;
  box-shadow: 0 34px 0 #2c2d33;
}
.iphone-frame::after {
  content: ""; position: absolute; right: -2px; top: 27%; width: 2px; height: 13%;
  background: #2c2d33; border-radius: 0 2px 2px 0;
}
@media (max-width: 760px) {
  .showcase { padding: 20px 0 64px; }
  .mac-lid { margin: 0 5%; padding: 8px 8px 10px; border-radius: 12px 12px 0 0; }
  .mac-screen { border-radius: 4px; }
  .mac-camera { top: 2px; width: 4px; height: 4px; margin-left: -2px; }
  .mac-base { height: 9px; border-radius: 1px 1px 8px 8px; }
  .mac-base::before { height: 5px; border-radius: 0 0 6px 6px; }
  .shot-phone { right: -8px; bottom: -30px; width: 128px; }
  .iphone-frame { padding: 5px; border-radius: 22px; }
  .iphone-frame img { border-radius: 17px; }
  .iphone-island { top: 9px; height: 10px; width: 36%; }
  .iphone-frame::before, .iphone-frame::after { display: none; }
}

/* Mobile hero CTA: hide the full inline auth card, show Get Started Free with
   the App Store badge sitting right next to it at the same height, so the
   phone hero stays clean and uncrowded. */
@media (max-width: 760px) {
  .hero-auth { display: none; }
  .hero-cta { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
  .hero-cta-mobile { display: inline-flex; height: 48px; padding: 0 22px; }
  .appstore-badge { width: auto; height: 48px; margin: 0; }
  .appstore-badge svg { height: 100%; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  /* The showcase script exits early; make sure nothing is left mid-transform. */
  .shot-desktop, .shot-phone { transform: none !important; }
}


/* ===== Restored from f7fc209: notification + features/habit demo styles
   (markup survived the codex-website-gallery merge; CSS did not) ===== */

.hab-iconemoji { font-size: 26px; line-height: 1; }

.hab-rowtext {
  flex: 1; min-width: 0;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .35s ease, transform .45s var(--ease);
}

.habdemo-stage.table-visible .hab-rowtext { opacity: 1; transform: none; }

.hab-title { font-size: 17px; font-weight: 600; color: #1e293b; }

.hab-stats { display: flex; gap: 14px; margin-top: 3px; }

.hab-stat { font-size: 12.5px; color: #94a3b8; white-space: nowrap; }

.hab-rowcheck {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: #c7d2fe; color: #4f46e5; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
  opacity: 0; transform: scale(.5); transition: all .35s ease .2s;
}

.hab-row.landed .hab-rowcheck { opacity: 1; transform: scale(1); }

.hab-row.landed .hab-icon { transform: none; box-shadow: 0 6px 14px -4px rgba(30, 41, 80, .30); }

.habdemo-stage.hab-resetting * { transition: none !important; }

.hab-replay {
  padding: 9px 18px; border-radius: 10px; border: 0; background: #1e2a52; color: #fff;
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background .2s, transform .15s;
}

.hab-replay:hover { background: #2a3a6b; transform: translateY(-1px); }

@media (max-width: 900px) {
  .habdemo-inner { grid-template-columns: 1fr; gap: 28px; justify-items: center; text-align: center; }
  .habdemo-text { max-width: 560px; }
  .habdemo-text .fdemo-p { margin-left: auto; margin-right: auto; }
}

@media (max-width: 560px) {
  .habdemo-fit { width: 330px; height: 242.344px; }
  .habdemo-stagewrap { transform: scale(.515625); }
}

@media (max-width: 380px) {
  .habdemo-fit { width: 300px; height: 220.313px; }
  .habdemo-stagewrap { transform: scale(.46875); }
}

@media (max-width: 340px) {
  .habdemo-fit { width: 280px; height: 205.625px; }
  .habdemo-stagewrap { transform: scale(.4375); }
}

.features-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: 54px; align-items: stretch; }

.features-text { order: 1; }

.features-visual { order: 2; display: flex; justify-content: center; }

@media (min-width: 921px) {
  .features-visual .feat-anims { height: 100%; }
}

.features-head { margin-bottom: 36px; }

.features-head .kicker { display: inline-block; margin-bottom: 14px; }

.features-head .section-title { text-align: left; margin: 0 0 12px; }

.features-head .section-sub { text-align: left; margin: 0; max-width: 640px; }

.features-text .accordion { max-width: none; margin: 0; }

@media (max-width: 920px) {
  .features-inner { grid-template-columns: 1fr; }
  .features-visual { display: none; }
  .features-text { width: 100%; max-width: 760px; margin: 0 auto; }
  .features-head { text-align: center; }
  .features-head .section-title, .features-head .section-sub { text-align: center; }
  .features-head .section-sub { margin-left: auto; margin-right: auto; }
  .features-head .kicker { display: block; }
  /* Keep the selected animation in normal flow below the accordion copy. */
  .acc-body .feat-anims {
    width: min(100%, 520px); height: auto; transform: none; transform-origin: top center;
    margin: 20px auto 0;
  }
  .acc-body .feat-anim { position: relative; inset: auto; width: 100%; min-height: 0; }
  .acc-body .feat-anim:not(.feat-anim-active) { display: none; }
  .acc-body .feat-anim.feat-anim-active { display: flex; }
  /* smooth open/close height; keep the animation swap instant so colors don't blend */
  .features-text .acc-panel { transition: grid-template-rows .42s cubic-bezier(.33, 0, .15, 1); }
  .features-text .acc-body { transition: opacity .3s ease .08s; }
  .features-text .acc-item:not(.open) .acc-body { opacity: 0; }
  .features-text .feat-anim { transition: none; }
}

.notif-banner {
  display: flex; align-items: center; gap: 13px;
  background: rgba(255, 255, 255, .8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 18px; padding: 13px 16px; margin-bottom: 18px;
  box-shadow: 0 10px 24px -10px rgba(40, 70, 140, .3);
  transform: translateY(-72px) scale(.92); opacity: 0;
  transition: all .65s cubic-bezier(.34, 1.3, .64, 1);
}

.notif-frame.banner-in .notif-banner { transform: translateY(0) scale(1); opacity: 1; }

.notif-logo { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; object-fit: cover; box-shadow: 0 2px 6px rgba(40,70,140,.2); }

.notif-banner-text { flex: 1; min-width: 0; }

.notif-banner-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }

.notif-banner-title { font-size: 15px; font-weight: 700; color: #1e293b; }

.notif-banner-time { font-size: 13px; color: #94a3b8; font-weight: 500; flex-shrink: 0; }

.notif-banner-sub { font-size: 13.5px; color: #475569; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.notif-stackwrap { position: relative; }

.notif-stack {
  position: absolute; left: 50%; transform: translateX(-50%); height: 40px; border-radius: 20px;
  background: #fff; box-shadow: 0 8px 18px -10px rgba(40, 70, 140, .25); opacity: 0; transition: opacity .5s ease;
}

.notif-stack-0 { width: 88%; bottom: 0; }

.notif-stack-1 { width: 81%; bottom: -9px; }

.notif-stack-2 { width: 74%; bottom: -18px; }

.notif-frame.card-in .notif-stack-0 { opacity: .5; transition-delay: .25s; }

.notif-frame.card-in .notif-stack-1 { opacity: .36; transition-delay: .30s; }

.notif-frame.card-in .notif-stack-2 { opacity: .22; transition-delay: .35s; }

.notif-card {
  position: relative; z-index: 2; background: #fff; border-radius: 22px; padding: 20px 22px 22px;
  box-shadow: 0 24px 50px -18px rgba(40, 70, 140, .35);
  transform: translateY(28px) scale(.95); opacity: 0;
  transition: all .6s cubic-bezier(.34, 1.2, .64, 1);
}

.notif-frame.card-in .notif-card { transform: translateY(0) scale(1); opacity: 1; }

.notif-frame.is-done .notif-card { transform: translateY(-12px) scale(.94); opacity: 0; }

.notif-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }

.notif-card-date { color: #3b6ef0; font-size: 14px; font-weight: 600; }

.notif-card-list { color: #94a3b8; font-size: 14px; font-weight: 500; }

.notif-card-logo { width: 14px; height: 14px; border-radius: 4px; display: inline-block; vertical-align: -2px; margin-right: 2px; object-fit: cover; }

.notif-card-icons { display: flex; gap: 12px; color: #94a3b8; font-size: 15px; }

.notif-card-title { font-size: 23px; font-weight: 700; color: #111827; margin-bottom: 8px; letter-spacing: -.01em; }

.notif-card-body { font-size: 15px; color: #64748b; margin-bottom: 56px; }

.notif-actions { display: flex; gap: 10px; margin-top: auto; }

/* Notification demo shell and controls. These foundational rules were lost
   when the demo styles were consolidated, leaving an unframed card and
   browser-default buttons. */
.notif-frame {
  position: relative;
  width: min(430px, 100%); height: 480px;
  padding: 24px;
  overflow: hidden; box-sizing: border-box;
  border: 1px solid rgba(34, 26, 46, .08);
  border-radius: 30px;
  background: linear-gradient(165deg, #fcfbf8 0%, #f1ede4 100%);
  box-shadow: 0 28px 70px -38px rgba(34, 26, 46, .22);
}

.notif-banner { background: rgba(255, 255, 255, .92); }

.notif-stackwrap { min-height: 310px; }

.notif-card {
  min-height: 270px;
  display: flex; flex-direction: column;
  box-sizing: border-box;
}

.notif-card-meta {
  display: flex; align-items: center; gap: 9px;
  min-width: 0;
}

.notif-card-list {
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}

.notif-card-logo { margin-right: 0; }

.notif-card-icons span {
  display: grid; width: 28px; height: 28px; place-items: center;
  border-radius: 50%; background: #f1f3f7;
}

.notif-card-body { margin-bottom: 28px; line-height: 1.55; }

.notif-actions button {
  appearance: none;
  min-width: 92px;
  padding: 11px 17px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: 700 13.5px/1 "Inter", sans-serif;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}

.notif-actions button:hover { transform: translateY(-2px); }

.notif-actions button:active { transform: translateY(0); }

.notif-actions button:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 3px;
}

.notif-snooze {
  color: #475569; background: #f1f3f7; border-color: #e2e8f0;
  box-shadow: 0 7px 16px -12px rgba(30, 41, 59, .45);
}

.notif-snooze:hover { background: #e9edf3; }

.notif-done {
  color: #3b5bdb; background: #dbe5ff; border-color: #c7d7ff;
  box-shadow: 0 9px 18px -12px rgba(59, 91, 219, .65);
}

.notif-done:hover { background: #cfdcff; }

@media (max-width: 420px) {
  .notif-frame { padding: 18px; }
  .notif-card { padding: 18px; }
  .notif-card-header { align-items: flex-start; gap: 10px; }
  .notif-card-meta { align-items: flex-start; flex-direction: column; gap: 4px; }
  .notif-actions button { flex: 1; min-width: 0; }
}