/* Focused homepage refinements; shared layouts and app controls are untouched. */
.homepage :is(a, button, summary):focus-visible {
  outline: 3px solid #7357ff;
  outline-offset: 4px;
}
.homepage .kicker,
.homepage .price-card small { color: #756b7d; }
.homepage .collection-note {
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.6;
  max-width: 790px;
  margin: 0 0 18px;
}
/* A small, fictional sample of the app's topic-frequency comparison. */
.homepage .feature-strip:has(.insights-preview[open]) { align-items: start; }
.homepage .insights-preview > summary {
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  gap: 8px;
  padding: 10px 14px;
  font-size: .8rem;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  list-style: none;
}
.homepage .insights-preview > summary::-webkit-details-marker { display: none; }
.homepage .insights-preview-close,
.homepage .insights-preview[open] .insights-preview-open { display: none; }
.homepage .insights-preview[open] .insights-preview-close { display: inline; }
.homepage .insights-preview-chevron { flex: none; }
.homepage .insights-preview[open] .insights-preview-chevron { transform: rotate(180deg); }
.homepage .insights-preview-result {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(115,87,255,.13);
  border-radius: 20px;
  background: radial-gradient(ellipse at 100% 0,rgba(253,108,147,.13),transparent 60%),linear-gradient(135deg,#fff,#fbf8ff);
}
.homepage .insights-preview-label {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  color: #67508b;
  background: rgba(115,87,255,.08);
  font-size: .7rem;
  font-weight: 700;
}
.homepage .insights-preview-period { margin: 10px 0 14px; font-size: .75rem; line-height: 1.5; }
.homepage .insights-preview-result h3 { margin: 0; font-size: .94rem; line-height: 1.45; }
.homepage .insights-preview-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,6.5rem),1fr));
  gap: 8px;
  margin: 14px 0;
}
.homepage .insights-preview-comparison > div {
  display: flex;
  flex-direction: column;
  padding: 12px 10px;
  border: 1px solid rgba(115,87,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.82);
}
.homepage .insights-preview-comparison dt { flex: 1; color: var(--muted); font-size: .72rem; line-height: 1.45; overflow-wrap: anywhere; }
.homepage .insights-preview-comparison dd { margin: 10px 0 0; }
.homepage .insights-preview-comparison strong { display: block; font-size: 1.65rem; line-height: 1.2; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.homepage .insights-preview-comparison dd span { display: block; margin-top: 6px; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.homepage .insights-preview-observation { margin: 0 0 12px; color: #53405f; font-size: .82rem; line-height: 1.6; }
.homepage .insights-preview-note { margin: 0; font-size: .72rem; line-height: 1.6; }
.homepage .archive-cost {
  margin: -2px 0 16px;
  color: #53405f;
  font-size: .94rem;
  font-weight: 750;
}
.homepage .example-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
  align-items: stretch;
}
.homepage .example-card {
  min-width: 0;
  padding: 22px;
  border: 1px solid rgba(115, 87, 255, .13);
  border-radius: 22px;
  background: rgba(255, 255, 255, .76);
}
.homepage .example-card h3 { margin: 10px 0; font-size: 1.1rem; line-height: 1.4; }
.homepage .example-card p { margin: 0; font-size: .9rem; }
.homepage .example-result { background: rgba(255, 245, 251, .8); }
.homepage .example-result-slot { display: grid; min-width: 0; }
.homepage .example-result-slot > * { grid-area: 1 / 1; }
.homepage .example-placeholder { display: none; align-items: center; justify-content: center; margin: 0; padding: 22px; text-align: center; border: 1px dashed rgba(115,87,255,.22); border-radius: 22px; }
.homepage .connection-example.is-ready:not(.is-revealed) .example-placeholder { display: flex; }
.homepage .example-connector { position: relative; display: grid; place-items: center; }
.homepage .example-line { width: 100%; height: 2px; background: linear-gradient(90deg, #c5b9f5, #eab3cf); }
.homepage .example-sparkle { position: absolute; color: #b98bcd; font-size: 19px; opacity: 0; }
.homepage .example-control { min-height: 46px; margin-top: 20px; text-align: center; }
.homepage .example-control button { font-family: inherit; cursor: pointer; }
.homepage [data-example-reveal][hidden] { display: none; }
.homepage .connection-example.is-ready:not(.is-revealed) :is(.example-result, .example-connector) { visibility: hidden; }
.homepage .connection-example.is-revealed .example-result { animation: example-appear .65s ease-out both; }
.homepage .connection-example.is-revealed .example-line { animation: example-appear .45s ease-out both; }
.homepage .connection-example.is-revealed .example-sparkle { animation: example-sparkle .8s .12s ease-out both; }
@keyframes example-appear {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes example-sparkle {
  0%, 100% { opacity: 0; transform: scale(.85); }
  40% { opacity: .75; transform: scale(1); }
}

/* The main CTAs share a brief sheen. CSS never intercepts navigation. */
.homepage .button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.homepage .button * { -webkit-tap-highlight-color: transparent; }
.homepage button.button, .homepage summary.button { -webkit-appearance: none; appearance: none; font-family: inherit; }
.homepage .button:focus:not(:focus-visible) { outline: none; }
.homepage .button.primary::after,
.homepage .button.cta-free::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0;
  background: linear-gradient(105deg, transparent 15%, rgba(255,255,255,.26) 50%, transparent 85%);
  transform: translateX(-115%);
}
@media (hover: hover) and (pointer: fine) {
  .homepage:where(:not([data-touch-input])) .button.primary:hover,
  .homepage:where(:not([data-touch-input])) .button.cta-free:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(153, 91, 169, .22);
  }
  .homepage:where(:not([data-touch-input])) .button.primary:hover::after,
  .homepage:where(:not([data-touch-input])) .button.cta-free:hover::after {
    transform: translateX(115%);
    transition: transform .75s ease;
  }
  .homepage:where(:not([data-touch-input])) .button.secondary:not(.cta-free):hover { transform: translateY(-1px); border-color: rgba(115,87,255,.24); }
}
.homepage .button:active { transform: translateY(0) scale(.99); }
@media (hover: none) {
  .homepage .button:hover { transform: none; }
  .homepage .button:not([data-touch-feedback]):active { transform: scale(.99); box-shadow: 0 5px 16px rgba(115,87,255,.14); }
  .homepage .button:where([data-touch-feedback]):active { transform: none; }
}
.homepage[data-touch-input] .button:where([data-touch-feedback]):is(:hover, :active) { transform: none; }
.homepage .button[data-touch-feedback][data-touch-pressed] {
  transition: none;
  transform: scale(.98);
  box-shadow: 0 10px 28px rgba(255,79,163,.3), 0 0 0 3px rgba(115,87,255,.1);
}
.homepage .button.primary[data-touch-pressed]::after,
.homepage .button.cta-free[data-touch-pressed]::after {
  transform: translateX(0);
  transition: none;
}
.homepage .button.secondary:not(.cta-free)[data-touch-pressed] {
  border-color: rgba(115,87,255,.3);
  background: #f2ecff;
  box-shadow: 0 6px 18px rgba(115,87,255,.18);
}
/* The app's violet-pink press surface and quiet reflection, without a navigation timer. */
.homepage .button.example-action { transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease, color .24s ease; }
.homepage .button.example-action::before,
.homepage .button.example-action::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}
.homepage .button.example-action::before {
  z-index: -1;
  background: linear-gradient(120deg,#6751eb,#c63f83);
  transition: opacity 240ms ease-in-out;
}
.homepage .button.example-action::after {
  background: linear-gradient(108deg,transparent 32%,rgba(255,255,255,.6) 50%,transparent 68%);
  background-size: 170% 100%;
  background-position: 75% 0;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(#000,transparent 29%,transparent 71%,#000);
  mask-image: linear-gradient(#000,transparent 29%,transparent 71%,#000);
}
.homepage .button.example-action:is([data-touch-pressed],[data-action-feedback]) {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(115,87,255,.2);
  transition: none;
}
.homepage .button.example-action:is([data-touch-pressed],[data-action-feedback])::before { opacity: 1; transition: none; }
.homepage .button.example-action[data-action-feedback]::after { animation: example-action-reflection 400ms ease-in-out both; }
@keyframes example-action-reflection {
  0% { background-position: 100% 0; opacity: 0; }
  30%, 55% { opacity: .75; }
  100% { background-position: 0% 0; opacity: 0; }
}
/* Answer a touch immediately, using the example buttons' Yvila colors and reflection. */
.homepage .button[data-cta-touch][data-touch-pressed] {
  color: #fff;
  background: linear-gradient(120deg,#6751eb,#c63f83);
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(115,87,255,.25), 0 0 0 3px rgba(255,79,163,.13);
}
.homepage .button[data-cta-touch][data-touch-pressed]::after {
  transform: none;
  border-radius: inherit;
  background: linear-gradient(108deg,transparent 32%,rgba(255,255,255,.6) 50%,transparent 68%);
  background-size: 170% 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(#000,transparent 29%,transparent 71%,#000);
  mask-image: linear-gradient(#000,transparent 29%,transparent 71%,#000);
  animation: example-action-reflection 360ms ease-in-out both;
}
.homepage .hero-pill { text-wrap: balance; }
@media (max-width: 620px) {
  .homepage .example-stage { grid-template-columns: minmax(0, 1fr); }
  .homepage .example-connector { height: 30px; }
  .homepage .example-line { width: 2px; height: 100%; background: linear-gradient(#c5b9f5, #eab3cf); }
  .homepage .example-card { padding: 18px; }
}
@media (max-width: 360px) {
  .homepage .insights-preview-result { padding: 12px; }
  .homepage .insights-preview-comparison { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .homepage *, .homepage *::before, .homepage *::after { animation: none !important; transition: none !important; }
  .homepage .button:hover, .homepage .button:active, .homepage .button[data-touch-pressed], .homepage .import-options a:hover { transform: none !important; }
  .homepage .button::after { display: none; }
}
@media (forced-colors: active) {
  .homepage .button.example-action::before, .homepage .button.example-action::after { display: none; }
  .homepage .button:is([data-touch-pressed],[data-action-feedback]) { background: Highlight !important; color: HighlightText !important; border-color: Highlight !important; box-shadow: none !important; }
}