/* Shared by the homepage and the all-features page (webpage/index.html, webpage/features/index.html). */
.pretitle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  backdrop-filter: blur(8px);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
}
.pretitle .pulse {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--sage);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sage) 60%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--sage) 0%, transparent); }
}

/* HERO */
main { overflow-x: clip; }
.hero {
  padding: clamp(3rem, 7vw, 6.5rem) 0 clamp(2rem, 4vw, 4rem);
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 4vw, 4rem);
  align-items: center;
}
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
  /* Keep the portrait screenshot inside the first screen so the copy and CTA stay above the fold. */
  .hero-art { --hero-shot-h: clamp(540px, calc(100vh - 210px), 760px); }
  .hero-art .hero-art-frame { height: var(--hero-shot-h); width: calc(var(--hero-shot-h) * 886 / 1920); }
}
.hero h1 {
  max-width: 16ch;
  font-size: clamp(2.6rem, 6.8vw, 5.4rem);
}
.hero .lead { margin-top: 1.5rem; }
/* Short laptop screens (e.g. 1366x768): tighten the hero so the download button stays in the
   first screen even where the headline runs to three or four lines. */
@media (min-width: 980px) and (max-height: 820px) {
  .hero { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
  .hero h1 { font-size: clamp(2.4rem, 4.3vw, 3.5rem); }
  .hero .lead { margin-top: 1rem; }
  .hero .hero-actions { margin-top: 1.4rem; }
  .hero .hero-trust { margin-top: 1.1rem; }
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
  align-items: center;
}
.hero-trust {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
}
.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.hero-trust svg {
  width: 16px; height: 16px;
  color: var(--accent-strong);
  flex: 0 0 auto;
}
.hero-art {
  position: relative;
  display: grid;
  place-items: center;
}
.hero-art::before {
  content: "";
  position: absolute;
  inset: -8% -10% -8% -10%;
  background:
    radial-gradient(60% 60% at 60% 40%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
    radial-gradient(50% 50% at 30% 70%, color-mix(in srgb, var(--warm) 18%, transparent), transparent 70%);
  filter: blur(40px);
  z-index: 0;
  animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.06); }
}
.hero-art-frame {
  position: relative;
  z-index: 1;
  width: min(78%, 340px);
  aspect-ratio: 886 / 1920;
  box-sizing: content-box;
  border: 9px solid #17122A;
  border-radius: 46px;
  background: #17122A;
  overflow: hidden;
  filter: drop-shadow(0 30px 60px rgba(27, 21, 48, 0.18));
  animation: float 7s ease-in-out infinite;
}
.hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Desktop visitors cannot install from here, so hand them a QR code for their phone. */
.hero-qr { display: none; }
@media (min-width: 1180px) and (pointer: fine) {
  /* The phone moves to the right edge of its column so the QR card fits beside it. */
  .hero-art .hero-art-frame { justify-self: end; }
  .hero-qr {
    position: absolute;
    left: 0;
    bottom: 7%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    width: 9.5rem;
    padding: 0.8rem 0.8rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
  }
  .hero-qr img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    background: #fff;
  }
}

.language-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}
.language-picker select {
  appearance: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) right 0.9rem center / 5px 5px no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) right 0.65rem center / 5px 5px no-repeat,
    color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--ink);
  font: inherit;
  padding: 0.5rem 1.6rem 0.5rem 0.8rem;
  cursor: pointer;
}
.language-picker select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 2px;
}
@media (max-width: 720px) {
  .language-picker span { display: none; }
}
/* The longest language names push the picker off very narrow screens. */
@media (max-width: 374px) {
  .language-picker select { max-width: 9.5rem; text-overflow: ellipsis; }
}
/* Five nav links, the picker and the download button do not fit on one row below this width
   in the longer languages (the row wrapped, and in Ukrainian the button left the screen). */
@media (max-width: 1179px) {
  .site-nav { display: none; }
}
/* Content fades in on scroll, but only when the script that reveals it is running. */
html:not(.js) .reveal { opacity: 1; transform: none; }

.release-banner {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--warm-soft) 68%, var(--surface));
}
.release-banner .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem 0.7rem;
  padding: 0.72rem 1rem;
  color: var(--ink);
  text-align: center;
  font-size: 0.94rem;
  line-height: 1.35;
}
.release-banner strong {
  color: var(--warm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}
.release-banner span {
  color: var(--ink-soft);
  font-weight: 600;
}

/* SECTION + HEADING */
.section { padding: clamp(4rem, 8vw, 8rem) 0; }
.section-heading {
  max-width: 50rem;
  margin: 0 auto 3.5rem;
  text-align: center;
}
.section-heading h2 { margin-top: 0.75rem; }
.section-heading p {
  margin: 1.25rem auto 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  max-width: 38rem;
}

/* SPOTLIGHT */
.spotlight {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin: clamp(3rem, 6vw, 6rem) 0;
}
@media (min-width: 980px) {
  .spotlight { grid-template-columns: 1fr 1fr; }
  .spotlight.right .spotlight-art { order: 2; }
}
.spotlight-copy h2 { margin-top: 1rem; max-width: 14ch; }
.spotlight-copy p {
  margin: 1.25rem 0 0;
  color: var(--ink-soft);
  font-size: 1.07rem;
  max-width: 30rem;
}
.spotlight-copy ul {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.65rem;
}
.spotlight-copy li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--ink);
  font-size: 0.98rem;
}
.check {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  margin-top: 0.18rem;
  border-radius: 999px;
  background: var(--accent-soft);
  display: grid;
  place-items: center;
  color: var(--accent-strong);
}
.check svg { width: 11px; height: 11px; }

.spotlight-art {
  position: relative;
  display: flex;
  justify-content: center;
}
.device-frame {
  position: relative;
  max-width: 460px;
  width: 100%;
  aspect-ratio: 1320 / 2868;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.device-frame::before {
  content: "";
  position: absolute;
  inset: 6% -6% -10% -6%;
  border-radius: 36px;
  background: linear-gradient(135deg, var(--accent-soft), transparent 60%, var(--warm-soft));
  filter: blur(30px);
  z-index: -1;
}
.device-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg);
}
.spotlight-art:hover .device-frame { transform: translateY(-6px); }
/* On phones a full-width portrait screenshot is a whole screen of scrolling per feature. */
@media (max-width: 979px) {
  .device-frame { max-width: 250px; }
}

/* BENTO */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: 1rem;
}
@media (max-width: 880px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
}
.tile {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.25s ease;
}
.tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.tile .tile-text {
  padding: 1.35rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tile .tile-text p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.5;
}
.tile.image { padding: 1.4rem 1.4rem 0; }
.tile.image .tile-text { padding: 1rem 0 1.4rem; }
.tile.image .device-mini {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(27, 21, 48, 0.10);
}
.tile.image .device-mini img {
  width: 100%;
  height: auto;
  display: block;
}
.tile.warm { background: linear-gradient(145deg, var(--bg-warm), var(--bg)); }
.tile.dark {
  background: linear-gradient(150deg, var(--ink), color-mix(in srgb, var(--ink) 70%, var(--accent-strong)));
  color: var(--bg);
  border-color: transparent;
}
.tile.dark .tile-text p { color: color-mix(in srgb, var(--bg) 80%, transparent); }
.tile.dark .tile-eyebrow { color: color-mix(in srgb, var(--bg) 80%, transparent); }
.tile-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.tile-icon {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: grid;
  place-items: center;
  margin-bottom: 0.35rem;
}
.tile.dark .tile-icon {
  background: color-mix(in srgb, var(--bg) 18%, transparent);
  color: var(--bg);
}
.tile.warm .tile-icon {
  background: var(--warm-soft);
  color: var(--warm);
}
.tile-icon svg { width: 18px; height: 18px; }
@media (min-width: 880px) {
  .tile.span-3 { grid-column: span 3; }
  .tile.span-4 { grid-column: span 4; }
  .tile.span-2 { grid-column: span 2; }
  .tile.tall   { grid-row: span 2; }
}
@media (max-width: 880px) {
  .tile.span-3, .tile.span-4, .tile.span-2 { grid-column: span 2; }
}

/* PROMISE BAND */
.promise {
  padding: clamp(3rem, 6vw, 5rem);
  border-radius: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--warm) 16%, transparent), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 980px) {
  .promise { grid-template-columns: 1.05fr 0.95fr; }
}
.promise h2 { max-width: 14ch; }
.promise-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.25rem;
}
.promise-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}
.promise-glyph {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: grid;
  place-items: center;
}
.promise-glyph svg { width: 22px; height: 22px; }
.promise-points strong {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
  margin-bottom: 0.25rem;
}
.promise-points span { color: var(--ink-soft); font-size: 0.96rem; }

/* PRICING */
.price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 880px) {
  .price-grid { grid-template-columns: 1fr 1.05fr; }
}
.plan {
  position: relative;
  padding: 2.25rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.plan.featured {
  background:
    radial-gradient(80% 100% at 100% 0%, color-mix(in srgb, var(--warm) 14%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  box-shadow: var(--shadow-md);
}
.plan-tag {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  padding: 0.32rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--bg);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.plan h3 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2vw, 1.85rem);
  letter-spacing: -0.02em;
  font-weight: 500;
}
.plan h3 em { font-style: italic; color: var(--accent-strong); font-weight: 380; }
.plan .price {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.4rem;
}
.plan .price strong {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  letter-spacing: -0.025em;
  line-height: 1;
}
.plan .price span { color: var(--ink-soft); font-size: 0.95rem; }
.plan .price-alt {
  margin: 0.5rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.plan .price-alt strong { color: var(--ink); font-weight: 600; }
.plan .founder-line {
  margin: 0.5rem 0 1rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--warm-soft);
  color: var(--warm);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
}
.save-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--warm-soft);
  color: var(--warm);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.plan .blurb { margin: 0.85rem 0 1.5rem; color: var(--ink-soft); }
.plan ul.feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: grid;
  gap: 0.55rem;
}
.plan ul.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.96rem;
  line-height: 1.45;
}
.plan small.fineprint {
  display: block;
  margin-top: 1rem;
  color: var(--ink-mute);
  font-size: 0.82rem;
  line-height: 1.5;
}
.plan .button { width: 100%; }

/* FAQ */
.faq-list {
  display: grid;
  gap: 0.8rem;
  max-width: 64rem;
  margin: 0 auto;
}
details.faq {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
details.faq[open] {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}
details.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.08rem;
  letter-spacing: -0.015em;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "";
  width: 14px; height: 14px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  opacity: 0.6;
  flex: 0 0 auto;
  margin-right: 0.4rem;
}
details.faq[open] summary::after { transform: rotate(225deg); }
details.faq .faq-body {
  padding: 0 1.4rem 1.3rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}
details.faq .faq-body a {
  color: var(--accent-strong);
  font-weight: 600;
}

/* FINAL CTA */
.final-cta {
  position: relative;
  padding: clamp(3.5rem, 6vw, 6rem);
  border-radius: clamp(32px, 4vw, 48px);
  background:
    radial-gradient(60% 100% at 0% 0%, color-mix(in srgb, var(--warm) 18%, transparent), transparent 60%),
    radial-gradient(70% 80% at 100% 100%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%),
    var(--ink);
  color: var(--bg);
  text-align: center;
  overflow: hidden;
}
.final-cta h2 { max-width: 18ch; margin: 0 auto; color: var(--bg); }
.final-cta h2 em { color: color-mix(in srgb, var(--bg) 75%, var(--warm)); }
.final-cta p {
  max-width: 30rem;
  margin: 1.25rem auto 2.25rem;
  color: color-mix(in srgb, var(--bg) 76%, transparent);
  font-size: 1.05rem;
}
.final-cta .app-store-badge {
  background: var(--badge-fg);
  color: var(--badge-bg);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}
.final-cta .app-store-badge:hover { background: var(--badge-fg); }
.final-cta .button-secondary {
  color: var(--bg);
  border-color: color-mix(in srgb, var(--bg) 24%, transparent);
}
.final-cta .button-secondary:hover {
  background: color-mix(in srgb, var(--bg) 12%, transparent);
}

/* MOBILE STICKY CTA */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: 0.75rem 1rem max(0.75rem, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
  display: flex;
  gap: 0.65rem;
  transform: translateY(110%);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mobile-cta.visible { transform: translateY(0); }
.mobile-cta .button { flex: 1; padding: 0.85rem 1rem; }
.mobile-cta .app-store-badge { flex: 1; height: 48px; min-width: 0; padding: 0.4rem 0.8rem; }
.mobile-cta .app-store-badge .stack span { font-size: 1rem; }
.mobile-cta .app-store-badge .stack small { font-size: 0.6rem; }
@media (min-width: 880px) {
  .mobile-cta { display: none; }
}

/* LINK TO THE ALL-FEATURES PAGE */
.section-more {
  margin: clamp(2rem, 4vw, 3.5rem) 0 0;
  text-align: center;
}

/* ALL-FEATURES PAGE HEADER */
.page-hero {
  padding: clamp(3rem, 7vw, 5.5rem) 0 0;
  text-align: center;
}
.page-hero h1 {
  max-width: 20ch;
  margin: 0.75rem auto 0;
  font-size: clamp(2.2rem, 5vw, 4rem);
}
.page-hero .lead { margin: 1.25rem auto 0; }
.page-hero .hero-actions { justify-content: center; }
.page-hero + .section { padding-top: clamp(1rem, 3vw, 2.5rem); }