/* ---------- tokens ---------- */
:root {
  color-scheme: light;

  --bg: #f3f5fa; /* cool grey pulled from the app icon's blue-violet */
  --bg-end: #ffffff;
  --text: #1a1a1c;
  --text-secondary: #6b6b70;
  --surface: #ffffff;
  --hairline: rgba(26, 26, 28, 0.08);

  --pill-bg: #111113;
  --pill-bg-hover: #000000;
  --pill-text: #ffffff;

  --accent: #6a5ae0; /* app icon violet */

  --r-hero: 32px;
  --r-card: 16px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  /* strong custom easings (built-ins are too weak) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --w-text: 42rem;
  --w-hero: 1060px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--bg-end);
  background-image: linear-gradient(180deg, var(--bg) 0%, var(--bg-end) 100%);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--font);
  font-size: clamp(1.0rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: rgba(26, 26, 28, 0.06);
  border-radius: 6px;
  padding: 0.1em 0.4em;
  white-space: nowrap;
}

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

/* ---------- pills ---------- */
.pill {
  display: inline-block;
  background: var(--pill-bg);
  color: var(--pill-text);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 160ms var(--ease-out), background 160ms ease, box-shadow 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pill:hover {
    background: var(--pill-bg-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  }
}
.pill:active { transform: scale(0.97); }
.pill-large { padding: 0.85em 1.7em; font-size: 1.05rem; }
.pill-small { padding: 0.45em 1.1em; font-size: 0.9rem; }

/* ---------- header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--w-hero);
  margin: 0 auto;
  padding: 1.25rem clamp(1rem, 4vw, 2rem);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.15rem;
}
.brand img { border-radius: 8px; }

/* ---------- hero ---------- */
.hero {
  max-width: var(--w-hero);
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem) 0;
  text-align: center;
}
.hero h1 {
  font-size: clamp(2rem, 1.2rem + 3.5vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 auto 1rem;
  max-width: 18em;
  text-wrap: balance;
}
.hero-sub {
  max-width: var(--w-text);
  margin: 0 auto 1.75rem;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 2.5rem;
}
.fineprint {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.hero-card {
  border-radius: var(--r-hero);
  overflow: hidden;
}
.hero-card img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- section head with action ---------- */
.section-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}
.section-head h2 { margin: 0; }

.pill-ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--hairline);
  padding: 0.7em 1.5em;
  font-size: 0.95rem;
  cursor: pointer;
}
.pill-ghost:hover {
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(26, 26, 28, 0.08);
}

/* Word cloud straight on the dimmed backdrop — no container chrome. */
#features-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(56rem, 94vw);
  overflow: visible;
}
#features-dialog::backdrop {
  background: rgba(10, 10, 14, 0.6);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

.feature-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem 1.6rem;
  padding: 1rem;
  text-align: center;
}
.cloud-word {
  position: relative;
  border: 0;
  background: none;
  padding: 0.1em 0.15em;
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.95);
  /* Fluid instead of stepped: the multiplier scales with the viewport so the
     longest word ("Natural-language") fits at 320px without a breakpoint. */
  font-size: calc(0.8rem + var(--s, 2) * clamp(0.17rem, 0.85vw, 0.5rem));
  line-height: 1.2;
  cursor: default;
  white-space: nowrap;
  overflow-wrap: break-word;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}
.cloud-word:hover { color: #cfc8ff; }
.cloud-word:focus-visible { outline-color: #fff; }
.cloud-hint {
  width: 100%;
  text-align: center;
  margin: 1.25rem 0 0;
}
.cloud-hint .hint-tap { display: none; }
.cloud-hint span {
  display: inline-block;
  padding: 0.45em 1.1em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.82rem;
  font-weight: 500;
}
/* rich tooltip card: vignettes + caption, same language as the bento */
.cloud-word .tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform-origin: bottom center;
  transform: translateX(-50%) translateY(3px) scale(0.97);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  width: max-content;
  max-width: 280px;
  background: #fff;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  text-align: left;
  text-shadow: none;
  white-space: normal;
  padding: 0.9em;
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
  z-index: 2;
}
.cloud-word:hover .tip,
.cloud-word:focus-visible .tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.tip .tip-text { color: var(--text-secondary); }
.tip .tip-center { width: 100%; display: flex; justify-content: center; padding: 0.35em 0; }
.tip .v-field { display: block; max-width: 100%; }
.tip .v-chips { display: flex; justify-content: flex-start; }
.tip .v-capture { gap: 6px; max-width: 100%; }
.tip .v-keys { gap: 10px; }
.tip .v-capsule { display: inline-flex; }
@media (max-width: 640px) {
  /* dvh, not vh: vh is the tallest-chrome value on mobile Safari, so 88vh can
     exceed the visible viewport when the URL bar is expanded */
  #features-dialog { max-height: 88dvh; overflow-y: auto; }
  .cloud-word { white-space: normal; }
  /* A 263px card can't sit centred over a word near the screen edge, so on
     phones the tip becomes a sheet spanning the cloud instead. Hidden tips
     were adding ~40px of horizontal overflow inside the dialog.
     The word must drop its entry transform first: `both` fill keeps a
     transform on it forever, and a transformed ancestor becomes the
     containing block, which would pin the sheet to the word again. */
  #features-dialog[open] .cloud-word { animation-name: cloud-fade; }
  .feature-cloud { position: relative; }
  .cloud-word { position: static; }
  .cloud-word .tip {
    position: absolute;
    inset: auto 0 0;
    width: auto;
    max-width: none;
    transform: translateY(6px) scale(0.99);
    transform-origin: bottom center;
  }
  .cloud-word:hover .tip,
  .cloud-word:focus .tip,
  .cloud-word:focus-visible .tip {
    transform: translateY(0) scale(1);
  }
}

/* Touch devices: the tooltips are hover-only above, which is unreachable
   without a pointer, and the small pills sit under the 44px target minimum. */
@media (hover: none) {
  .cloud-word:focus .tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  .cloud-hint .hint-hover { display: none; }
  .cloud-hint .hint-tap { display: inline-block; }
}
@media (pointer: coarse) {
  .brand { min-height: 44px; }
  .pill-small,
  .pill-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  .cloud-word { padding: 0.3em 0.4em; }
}

/* ---------- sections ---------- */
.bento, .features, .faq, .buy, .testimonials, .why {
  max-width: var(--w-text);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 5rem) clamp(1rem, 4vw, 2rem) 0;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- bento ---------- */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento-wide { grid-column: 1 / -1; }
}
.bento-cell {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bento-text {
  padding: 0 1.4rem 1.3rem;
}
.bento-text h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.bento-text p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  text-wrap: pretty;
}
.bento-visual {
  flex: 1;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 1.5rem 1.4rem;
  overflow: hidden;
}

/* bento vignettes */
.v-capsule {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(26, 26, 28, 0.06);
  box-shadow: inset 0 1px 2px rgba(26, 26, 28, 0.06);
}
.vseg {
  min-width: 26px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: rgba(26, 26, 28, 0.12);
  color: rgba(26, 26, 28, 0.75);
}
.vseg-red { background: #e5484d; color: #fff; }

.v-field {
  width: 100%;
  max-width: 320px;
  background: rgba(26, 26, 28, 0.05);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.vchip {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.vchip-date { background: rgba(106, 90, 224, 0.16); color: #4a3fb8; }
.vchip-loc  { background: rgba(20, 122, 200, 0.14); color: #0a66a8; }
.vchip-prio { background: rgba(255, 150, 0, 0.18); color: #a86500; font-weight: 700; }
.vchip-neutral { background: rgba(26, 26, 28, 0.08); color: var(--text-secondary); }

.v-keys { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.vkey { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vkey kbd {
  min-width: 38px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--hairline);
  box-shadow: 0 2px 0 rgba(26, 26, 28, 0.08);
  font-family: var(--font);
  font-size: 13px;
  text-align: center;
}
.vkey span { font-size: 11px; color: var(--text-secondary); }

.v-capture { display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 260px; }
.v-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--text);
}
.v-circle {
  width: 15px; height: 15px;
  border: 1.5px solid rgba(26, 26, 28, 0.3);
  border-radius: 50%;
  flex: none;
}

/* done-today vignette */
.v-done { display: flex; flex-direction: column; align-items: center; gap: 11px; }
.v-done-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
}
.v-row-done {
  color: var(--text-secondary);
  text-decoration: line-through;
  text-decoration-color: rgba(26, 26, 28, 0.25);
}
.v-circle-done {
  border-color: var(--accent);
  background: var(--accent);
  position: relative;
}
.v-circle-done::after {
  content: "";
  position: absolute;
  left: 4px; top: 1.5px;
  width: 3.5px; height: 7px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(45deg);
}
h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
}

.feature-group + .feature-group { margin-top: 2.25rem; }
.feature-group h3 {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin: 0 0 0.8rem 0.15rem;
}

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}
.feature-list li {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 1.1rem 1.3rem;
  color: var(--text-secondary);
}
.feature-list strong { color: var(--text); }

/* ---------- faq: minimal hairline list ---------- */
.faq details {
  border-bottom: 1px solid var(--hairline);
  /* scoped here, not on :root — it only needs to unlock `block-size: auto` below */
  interpolate-size: allow-keywords;
}

/* Disclosure motion. Same split as the dialogs above: the closed state carries
   the exit transition, [open] carries the entry one. Exit is quicker — the user
   has already read it and is closing to get it out of the way.
   allow-discrete keeps the content rendered while it collapses.
   Browsers without ::details-content just snap open, as they do today. */
.faq details::details-content {
  block-size: 0;
  opacity: 0;
  overflow: hidden;
  transition: block-size 160ms var(--ease-in-out), opacity 110ms ease,
    content-visibility 160ms allow-discrete;
}
.faq details[open]::details-content {
  block-size: auto;
  opacity: 1;
  transition: block-size 220ms var(--ease-out), opacity 180ms ease 40ms,
    content-visibility 220ms allow-discrete;
}
.faq summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 1rem;
  padding: 1.15rem 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 1.75px solid var(--text-secondary);
  border-bottom: 1.75px solid var(--text-secondary);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 180ms var(--ease-in-out);
}
.faq details[open] summary::after {
  transform: rotate(225deg) translateY(-2px);
}
.faq details p {
  margin: 0;
  padding: 0 0 1.15rem;
  color: var(--text-secondary);
}

/* ---------- why ---------- */
.why p {
  margin: 0 0 1.1rem;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.why p:last-child { margin-bottom: 0; }
.why-sign {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ---------- testimonials ---------- */
.quote-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
@media (min-width: 640px) {
  .quote-grid { grid-template-columns: 1fr 1fr; }
  /* wide cell on its own row, the two short quotes side by side under it */
  .quote-feature { grid-column: 1 / -1; }
}
.quote {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.quote blockquote {
  margin: 0;
  font-size: 0.95rem;
  text-wrap: pretty;
}
.quote-feature {
  padding: 1.6rem 1.7rem;
  gap: 1.2rem;
}
.quote-feature blockquote {
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  max-width: 34em;
}
.quote-feature figcaption img { width: 44px; height: 44px; }
.quote figcaption {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: auto;
}
.quote figcaption img {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: rgba(26, 26, 28, 0.06);
}

/* ---------- buy ---------- */
.buy {
  text-align: center;
  padding-bottom: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}
.buy .price {
  margin: 0;
  font-size: clamp(3rem, 2.4rem + 3vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}
.buy .price-sub {
  margin: 0;
  max-width: 22rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
  text-wrap: balance;
}
.pill-buy { padding: 0.7em 1.5em; font-size: 0.95rem; }
.buy .fineprint { margin: 0; }

/* ---------- dialog motion (symmetrical entry/exit; exit is quicker) ---------- */
/* The closed state carries the exit transition; [open] carries the entry one.
   display/overlay need allow-discrete so the dialog stays in the top layer
   while it fades back out. */
#features-dialog {
  opacity: 0;
  transform: scale(0.97); /* modals scale from center — never from 0 */
  transition: opacity 150ms ease-in, transform 150ms ease-in,
    overlay 150ms allow-discrete, display 150ms allow-discrete;
}
#features-dialog[open] {
  opacity: 1;
  transform: scale(1);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out),
    overlay 200ms allow-discrete, display 200ms allow-discrete;
}
@starting-style {
  #features-dialog[open] {
    opacity: 0;
    transform: scale(0.97);
  }
}
#features-dialog::backdrop {
  opacity: 0;
  transition: opacity 150ms ease-in, overlay 150ms allow-discrete,
    display 150ms allow-discrete;
}
#features-dialog[open]::backdrop {
  opacity: 1;
  transition: opacity 200ms ease, overlay 200ms allow-discrete,
    display 200ms allow-discrete;
}
@starting-style {
  #features-dialog[open]::backdrop { opacity: 0; }
}

/* cloud words cascade in (decorative, occasional) */
#features-dialog[open] .cloud-word {
  animation: cloud-in 280ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}
#features-dialog[open] .cloud-hint {
  animation: cloud-in 280ms var(--ease-out) both;
  animation-delay: 420ms;
}
@keyframes cloud-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
/* fade-only variant: leaves no transform behind, so the mobile tip sheet can
   anchor to the cloud rather than to the word */
@keyframes cloud-fade {
  from { opacity: 0; }
}

/* ---------- reduced motion: keep fades, drop movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .pill,
  .pill:hover,
  .pill:active { transform: none; }
  .faq summary::after { transition: none; }
  /* keep the fade (it explains the state change), drop the height movement */
  .faq details::details-content,
  .faq details[open]::details-content {
    block-size: auto;
    transition: opacity 150ms ease, content-visibility 150ms allow-discrete;
  }
  .cloud-word .tip {
    transition: opacity 150ms ease;
    transform: translateX(-50%);
  }
  .cloud-word:hover .tip,
  .cloud-word:focus-visible .tip { transform: translateX(-50%); }
  /* the mobile tip is a bottom sheet, not centred on the word — don't re-add
     the -50% shift that would push it off screen */
  @media (max-width: 640px) {
    .cloud-word .tip,
    .cloud-word:hover .tip,
    .cloud-word:focus .tip,
    .cloud-word:focus-visible .tip { transform: none; }
  }
  #features-dialog {
    transform: none;
    transition: opacity 150ms ease, overlay 150ms allow-discrete,
      display 150ms allow-discrete;
  }
  #features-dialog[open] {
    transform: none;
    transition: opacity 200ms ease, overlay 200ms allow-discrete,
      display 200ms allow-discrete;
  }
  #features-dialog[open] .cloud-word,
  #features-dialog[open] .cloud-hint { animation: none; }
}

/* ---------- footer ---------- */
.site-footer {
  max-width: var(--w-text);
  margin: 0 auto;
  padding: 3rem clamp(1rem, 4vw, 2rem) 2.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
}