/* ===================================================================
   one-click.css — scoped to /one-click landing revamp.
   Pulled verbatim from the design mockup so the layout matches 1:1.
   Loaded only by app/[locale]/one-click/page.tsx — does NOT affect /.
=================================================================== */

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.18s; }
.reveal-delay-3 { transition-delay: 0.28s; }
.reveal-delay-4 { transition-delay: 0.38s; }

.reveal-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-children.in > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.05s; }
.reveal-children.in > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.15s; }
.reveal-children.in > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.25s; }
.reveal-children.in > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.35s; }
.reveal-children.in > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.45s; }
.reveal-children.in > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.55s; }

/* ---------- Scroll-driven "come and go" on reverse-grid sections ----------
   Each section's rd-container fades in as it enters viewport center and
   fades back out as it leaves. The video panel inside also gets a deeper
   parallax translate. JS sets --p (-1..1) per section. */
@media (min-width: 992px) {
  .revo-drafts > .rd-container,
  .revo-sorts > .rd-container,
  .revo-follow > .rd-container {
    opacity: var(--op, 1);
    transform: translate3d(0, calc(var(--ty, 0) * 1px), 0);
    transition: none;
    will-change: opacity, transform;
  }
  .revo-drafts .grid-animation,
  .revo-sorts .grid-animation,
  .revo-follow .grid-animation {
    transform: translate3d(0, calc(var(--p, 0) * -28px), 0)
      scale(calc(1 + var(--p, 0) * -0.02));
    will-change: transform;
  }
}

/* ---------- Fyxer-style testimonials grid ---------- */
.testimonials-grid {
  padding: 120px 0;
  background: #fff;
}
.testimonials-grid .tg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}
.tg-card {
  background: #fff;
  border: 1px solid var(--_redesign---neutral--100);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: box-shadow 0.35s ease, border-color 0.25s ease;
}
.tg-card:hover {
  box-shadow: 0 24px 48px -16px rgba(20, 10, 10, 0.12);
  border-color: var(--_redesign---neutral--200);
}
.tg-quote {
  font: 400 16px/1.55 "DM Sans", sans-serif;
  color: var(--_redesign---neutral--950);
  margin: 0;
  letter-spacing: -0.005em;
}
.tg-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.tg-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 40px;
}
.tg-name {
  font: 600 14px/1.3 "DM Sans", sans-serif;
  color: var(--_redesign---neutral--950);
}
.tg-role {
  font: 500 12px/1.4 "DM Sans", sans-serif;
  color: var(--_redesign---neutral--600);
  margin-top: 2px;
}
@media (max-width: 991px) {
  .testimonials-grid .tg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .testimonials-grid .tg-grid { grid-template-columns: 1fr; }
}

/* ---------- Hero "in one-click" accent: shadcn orange-700 + reflection ---------- */
.oneclick-h1 .oneclick-h1__w--accent {
  color: #c2410c; /* shadcn orange-700 */
  background: linear-gradient(180deg, #ea580c 0%, #c2410c 55%, #9a3412 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
}
.oneclick-h1 .oneclick-h1__w--accent::after {
  /* Sweeping highlight that travels across the accent words once a few seconds. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 65%,
    transparent 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
  background-size: 250% 100%;
  background-position: 200% 0;
  animation: oneclick-accent-shine 5.5s ease-in-out 1.2s infinite;
}
@keyframes oneclick-accent-shine {
  0% { background-position: 200% 0; }
  60% { background-position: -50% 0; }
  100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .oneclick-h1 .oneclick-h1__w--accent::after { animation: none; display: none; }
}

/* ---------- Hero headline: enforce exactly 2 physical lines ----------
   Each line of the headline is wrapped in .oneclick-h1__line (a
   block-level span) so we can apply white-space: nowrap. That means
   line 1 "The AI that does your work" can't ever wrap on its own to
   create a third visual line. The font-size clamp is sized so the
   long first line still fits inside the left hero column at common
   desktop widths. */
.oneclick-h1 {
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  white-space: normal;
}
.oneclick-h1__line {
  display: block;
  white-space: nowrap;
}
.oneclick-h1 br { line-height: 0; }
@media (max-width: 640px) {
  /* Mobile: allow wrapping again so we don't blow out the viewport. */
  .oneclick-h1 { font-size: clamp(28px, 8vw, 38px); }
  .oneclick-h1__line { white-space: normal; }
}

/* ---------- Hero spacing: flush against the nav + fit trust strip
   in the initial viewport ----------
   Previously had ~96px of top padding which left visible margin under
   the header. Pulled the section flush with the nav and tightened the
   bottom padding so the logo carousel also lands above the fold. */
.oneclick-hero-section {
  padding-top: 24px;
  padding-bottom: clamp(20px, 2.5vh, 36px);
}
/* Give the headline column more room so "The AI that does your work"
   fits on a single line at typical desktop widths. Right column
   (action cards) shrinks to compensate. */
.oneclick-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  row-gap: 24px;
}
.oneclick-hero-left { gap: 22px; max-width: 720px; }
.oneclick-hero-right { max-width: 560px; justify-self: center; width: 100%; }
.oneclick-hero-section .investors {
  padding-top: clamp(20px, 3vh, 40px);
  padding-bottom: clamp(20px, 3vh, 40px);
}
.oneclick-hero-section .companies-heading-container {
  margin-bottom: 12px;
}

/* ---- Hero mobile (≤ 991px) ----
   Our desktop overrides above replace the originals in overrides.css.
   At the mobile breakpoint we need to re-state the single-column
   layout otherwise the 2-col grid sticks and the hero squashes. */
@media (max-width: 991px) {
  .oneclick-hero-section {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .oneclick-hero-grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .oneclick-hero-left {
    max-width: 100%;
    align-items: center;
    text-align: center;
  }
  .oneclick-hero-left .section-text,
  .oneclick-hero-left .section-text .heading-super,
  .oneclick-hero-left .section-text .p-super {
    text-align: center;
    max-width: 100%;
  }
  .oneclick-hero-right {
    max-width: 100%;
    justify-self: stretch;
    margin: 0 auto;
  }
  .oneclick-cta-cluster { justify-content: center; }
  /* Trust pill: shrink so the full text fits on one line on phones
     (was wrapping to 2 lines at common 360–414px widths). */
  .oneclick-social-pill { padding: 6px 12px; }
  .oneclick-social-pill__text { font-size: 11.5px; letter-spacing: -0.01em; }
}
@media (max-width: 640px) {
  .oneclick-hero-section { padding-top: 24px; padding-bottom: 24px; }
  .oneclick-social-pill__text { font-size: 11px; }
}

/* ---------- Email CTAs — stronger hover on /one-click (neutral grey) ---------- */
.oneclick-cta-button {
  transition:
    transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 0.22s ease;
}
.oneclick-cta-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 38px -12px rgba(20, 10, 10, 0.22),
    0 6px 14px -6px rgba(20, 10, 10, 0.14);
  border-color: rgba(20, 10, 10, 0.18);
}
.oneclick-cta-button:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px -10px rgba(20, 10, 10, 0.22);
}

/* ---------- How it works — pinned scrollytelling section ----------
   Outer .track is 3 viewports tall. .pin sticks for the full window.
   The illustration FRAME stays fixed on the right; only its inner
   image + text crossfade as the active stage changes. A thin
   progress rail on the left fills CONTINUOUSLY with scroll position
   (via the --how-it-works-progress CSS var set by JS). */
.how-it-works {
  background: #fff;
  color: var(--_redesign---neutral--950);
  position: relative;
}
.how-it-works__track {
  height: 300vh;
  position: relative;
}
.how-it-works__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  --how-it-works-progress: 0;
}
.how-it-works__container {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
  width: 100%;
}
.how-it-works__left {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 460px;
}
.how-it-works__progress {
  margin-top: 16px;
}
.how-it-works__progress-rail {
  height: 4px;
  border-radius: 999px;
  background: rgba(20, 10, 10, 0.08);
  overflow: hidden;
}
/* Fill width is driven directly by the scroll progress var so it
   moves continuously with the scrollbar — no stepped feel. */
.how-it-works__progress-fill {
  height: 100%;
  width: calc(var(--how-it-works-progress, 0) * 100%);
  background: #c2410c;
  border-radius: 999px;
}

/* Persistent frame on the right (desktop only). Border / padding /
   shadow live on the frame so the chrome stays fixed; the 3 .slide
   children are stacked absolutely inside it and crossfaded. */
.how-it-works__frame {
  position: relative;
  background: #fff;
  border: 1px solid var(--_redesign---neutral--100, #f3eee8);
  border-radius: 20px;
  padding: 28px 28px 24px;
  box-shadow: 0 30px 60px -30px rgba(20, 10, 10, 0.18);
  height: 560px;
}
.how-it-works__slide {
  position: absolute;
  inset: 28px 28px 24px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 20px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
  margin: 0;
}
.how-it-works__slide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.how-it-works__illustration {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  /* White background — illustrations are designed against white, so
     when object-fit: contain leaves space around the artwork it just
     blends in instead of showing a cream band. */
  background: #fff;
  min-height: 0;
}
.how-it-works__media {
  width: 100%;
  height: 100%;
  /* `contain` so the full illustration is always visible (no cropping).
     The video at stage 3 may render with thin white bands top/bottom —
     acceptable because the illustration backdrop is white. */
  object-fit: contain;
  display: block;
}
.how-it-works__heading { margin: 0; }
.how-it-works__copy-slide {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.how-it-works__copy-slide .heading-l { margin: 0; }
.how-it-works__caption {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

@media (max-width: 991px) {
  /* Mobile: drop the pinned scrollytelling. The track collapses, the
     pin becomes a normal block, and the 3 .slide children stack
     vertically — each becomes its own card with image + text. */
  .how-it-works__track { height: auto; }
  .how-it-works__pin {
    position: relative;
    height: auto;
    display: block;
    padding: 64px 0;
    overflow: visible;
  }
  .how-it-works__container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .how-it-works__progress { display: none; }

  /* Frame drops chrome; .slide takes it over as a per-stage card. */
  .how-it-works__frame {
    height: auto;
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .how-it-works__slide {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    background: #fff;
    border: 1px solid var(--_redesign---neutral--100, #f3eee8);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 18px 36px -20px rgba(20, 10, 10, 0.14);
    display: grid;
    grid-template-rows: auto auto;
    gap: 16px;
  }
  .how-it-works__illustration {
    aspect-ratio: 4 / 3;
  }
}
@media (prefers-reduced-motion: reduce) {
  .how-it-works__track { height: auto; }
  .how-it-works__pin {
    position: relative;
    height: auto;
    overflow: visible;
  }
  .how-it-works__slide { transition: none; }
}

/* ---------- One-click primary CTA cluster ---------- */
.oneclick-cta-cluster {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.oneclick-cta-cluster--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.oneclick-primary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0d0d0d;
  color: #fff !important;
  font: 600 16px/1 "DM Sans", sans-serif;
  letter-spacing: -0.005em;
  /* Match the header "Get Started for Free" button radius (.button-rd → 4px) */
  padding: 14px 24px;
  border-radius: 4px;
  text-decoration: none;
  transition:
    transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.4);
}
.oneclick-primary-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 20px 40px -16px rgba(0, 0, 0, 0.35),
    0 8px 16px -8px rgba(20, 10, 10, 0.18);
}
.oneclick-primary-cta:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.35);
}
/* Secondary visually matches the header's "Book a demo" nav item:
   plain text with a light-grey background veil on hover, no underline. */
.oneclick-secondary-cta {
  font: 500 15px/1 "DM Sans", sans-serif;
  color: var(--_redesign---neutral--800, #2a221a) !important;
  text-decoration: none !important;
  padding: 10px 14px;
  border-radius: 6px;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.oneclick-secondary-cta:hover {
  background-color: var(--_redesign---neutral--100, #e5e5e5);
  color: var(--_redesign---neutral--950, #0d0d0d) !important;
  text-decoration: none !important;
}

/* ---------- Hero action stack: tool pills (top-right corner) ---------- */
.oneclick-card__tools {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  gap: 6px;
  z-index: 2;
}
.oneclick-card__tool-pill {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(20, 10, 10, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px -6px rgba(20, 10, 10, 0.18);
}
/* Reserve room for up to 2 pills (~70px) on the right so the card
   title can never run underneath them, even on narrow phones where
   the title wraps to 2+ lines. */
.oneclick-card__title { padding-right: 72px; }

/* ---------- Getting-started cards: align so columns match ---------- */
.getting-started-cards {
  align-items: stretch;
}
.getting-started-cards .getting-started-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.getting-started-cards .getting-started-card-image {
  flex-shrink: 0;
}
.getting-started-cards .getting-started-card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}

/* Pricing card alignment lives in overrides.css now so /pricing and the
   homepage pick it up too. */

/* ---------- Confetti burst when "Do it" fires (hero) ---------- */
.confetti-piece {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 9999;
  will-change: transform, opacity;
  animation: confetti-fly 1.3s cubic-bezier(0.3, 0.4, 0.4, 1) forwards;
}
@keyframes confetti-fly {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  20% { opacity: 1; }
  100% {
    transform: translate(var(--tx), calc(var(--ty) + 220px)) rotate(var(--r));
    opacity: 0;
  }
}