/* ════════════════════════════════════════════════════════════════════
   Settl — Feature Tour (scroll-driven, real screenshots)
   Self-contained. Only depends on a few CSS custom properties that the
   Settl landing already defines (--accent, --serif, …); every var() has a
   safe fallback, so it also works if dropped in cold.
   All selectors are namespaced `.ft-` to avoid collisions.
   ════════════════════════════════════════════════════════════════════ */

.ft-tour {
  --ft-accent: var(--accent, #FF6B35);
  --ft-accent-deep: var(--accent-deep, #E4561B);
  --ft-accent-soft: var(--accent-soft, #FFE6D9);
  --ft-serif: var(--serif, 'Source Serif 4', Georgia, serif);
  --ft-sans: var(--sans, 'Inter Tight', system-ui, sans-serif);
  --ft-mono: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  --ft-surface: var(--surface, #FFFFFF);
  --ft-border: var(--border, rgba(20,18,14,0.12));
  --ft-text: var(--text, #14120E);
  --ft-text-sec: var(--text-sec, #5B574F);
  --ft-text-ter: var(--text-ter, #9A958D);

  font-family: var(--ft-sans);
  padding: 120px 24px;
  color: var(--ft-text);
}
.ft-tour * { box-sizing: border-box; }

.ft-intro { max-width: 760px; margin: 0 auto; text-align: center; }
.ft-eyebrow { font-family: var(--ft-mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ft-accent-deep); }
.ft-tour h2 { font-family: var(--ft-serif); font-size: clamp(34px, 4.4vw, 54px); font-weight: 500; letter-spacing: -1.5px; line-height: 1.02; margin: 16px 0 18px; text-wrap: balance; }
.ft-tour .ft-sub { font-size: 18px; color: var(--ft-text-sec); line-height: 1.6; margin: 0 auto; max-width: 54ch; }

.ft-grid {
  max-width: 1140px; margin: 56px auto 0;
  display: grid; grid-template-columns: 420px 1fr; gap: clamp(40px, 7vw, 110px);
  align-items: start;
}

/* sticky phone column */
.ft-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
}
.ft-glow {
  position: absolute; width: 440px; height: 440px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,53,0.16), transparent 62%);
  filter: blur(8px); z-index: -1; transition: background 600ms ease;
}

/* phone frame (no notch — the screenshots include their own status bar) */
.ft-phone {
  position: relative; width: 300px; height: 652px; flex: none;
  border-radius: 46px; background: #0E0C0A; padding: 9px;
  transform: scale(var(--ft-phscale, 0.86)); transform-origin: center;
  box-shadow: 0 40px 90px rgba(20,18,14,0.30), 0 14px 34px rgba(20,18,14,0.16),
    inset 0 0 0 1.5px rgba(255,255,255,0.07), inset 0 1.5px 0 rgba(255,255,255,0.10);
}
.ft-screen { position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: #FFF6F1; }
.ft-shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity 460ms ease; pointer-events: none;
}
.ft-shot.on { opacity: 1; }

/* progress rail */
.ft-rail { display: flex; gap: 9px; }
.ft-rail button { width: 9px; height: 9px; border-radius: 9999px; border: none; padding: 0; background: var(--ft-text-ter); opacity: 0.4; cursor: pointer; transition: all 300ms; }
.ft-rail button.on { opacity: 1; background: var(--ft-accent); width: 26px; }

/* scrolling copy column */
.ft-track { display: flex; flex-direction: column; }
.ft-block { min-height: 82vh; display: flex; flex-direction: column; justify-content: center; padding: 4vh 0; }
.ft-block:first-child { min-height: 64vh; }
.ft-block:last-child { min-height: 70vh; }
.ft-step { font-family: var(--ft-mono); font-size: 12px; letter-spacing: 1px; color: var(--ft-accent-deep); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.ft-step::before { content: ''; width: 22px; height: 1px; background: var(--ft-accent); }
.ft-ico { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--ft-accent-soft); color: var(--ft-accent-deep); margin-bottom: 22px; }
.ft-block h3 { font-family: var(--ft-serif); font-size: clamp(30px, 3.6vw, 44px); font-weight: 500; letter-spacing: -1.2px; line-height: 1.05; margin: 0 0 16px; text-wrap: balance; }
.ft-block h3 em { font-style: italic; color: var(--ft-accent-deep); }
.ft-block p { font-size: 18px; color: var(--ft-text-sec); line-height: 1.6; margin: 0 0 22px; max-width: 44ch; text-wrap: pretty; }
.ft-said { display: inline-flex; align-items: center; gap: 12px; background: var(--ft-surface); border: 1px solid var(--ft-border); border-radius: 16px; padding: 13px 18px; max-width: 100%; box-shadow: 0 8px 22px rgba(20,18,14,0.05); }
.ft-said .ico { width: 30px; height: 30px; border-radius: 9999px; background: linear-gradient(160deg, var(--ft-accent), var(--ft-accent-deep)); color: #fff; display: grid; place-items: center; flex: none; }
.ft-said q { font-family: var(--ft-serif); font-style: italic; font-size: 15.5px; color: var(--ft-text); quotes: '\201C' '\201D'; }
.ft-said.fact .ico { background: var(--ft-accent-soft); color: var(--ft-accent-deep); }
.ft-said .lbl { font-size: 14.5px; font-weight: 600; color: var(--ft-text); }

/* reveal */
.ft-block .ft-step, .ft-block .ft-ico, .ft-block h3, .ft-block p, .ft-block .ft-said {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.ft-block.in .ft-ico { transition-delay: 60ms; }
.ft-block.in h3 { transition-delay: 110ms; }
.ft-block.in p { transition-delay: 170ms; }
.ft-block.in .ft-said { transition-delay: 230ms; }
.ft-block.in .ft-step, .ft-block.in .ft-ico, .ft-block.in h3, .ft-block.in p, .ft-block.in .ft-said { opacity: 1; transform: none; }

@media (max-width: 920px) {
  .ft-tour { padding: 80px 20px; }
  .ft-grid { grid-template-columns: 1fr; gap: 0; }
  /* Phone PINNED at the top of the viewport; copy scrolls below it. Use real
     (smaller) dimensions instead of transform:scale + a negative-margin hack —
     that combo overlapped/broke on iOS Safari. A page-colored backing keeps the
     scrolling copy from bleeding through around the phone. */
  .ft-sticky {
    position: sticky; top: 0; z-index: 5; height: auto;
    padding: 14px 0 34px; gap: 10px;
    /* Page-colored mask. The copy column scrolls BEHIND the phone, and the phone
       is only 172px wide — so without a full-height backing the copy bleeds out
       in the margins beside the phone's lower half (ghosted, half-occluded text).
       Keep the mask FULLY OPAQUE for the phone's whole height (≈388px = 14px top
       pad + 374px phone), then fade over the ~32px just below it so copy
       dissolves gently as it reaches the bottom edge instead of ghosting beside
       the frame. --bg is #FFF, same as the section, so the opaque band is
       invisible. (Was: opaque to 84% ≈ 334px, leaving the phone's lower ~54px in
       the fade — the cause of the bleed.) */
    background: linear-gradient(
      var(--bg, #fff) 0,
      var(--bg, #fff) 388px,
      rgba(255, 255, 255, 0) 420px);
  }
  .ft-phone {
    width: 172px; height: 374px; transform: none; margin: 0;
    padding: 6px; border-radius: 32px;
  }
  .ft-screen { border-radius: 26px; }
  .ft-glow { width: 240px; height: 240px; }
  .ft-rail { display: none; } /* dots are redundant on the pinned mobile view */
  /* Copy is pushed below the pinned phone (~400px tall) so 2-line headings
     don't ride up behind it at the active position. The big top padding shifts
     the flex-centered content down into the clear area beneath the phone. */
  .ft-block { min-height: 72vh; text-align: center; align-items: center; padding: 22vh 0 3vh; }
  .ft-block:first-child { min-height: 48vh; }
  .ft-block:last-child { min-height: 60vh; }
  .ft-block p { margin-left: auto; margin-right: auto; }
  .ft-step::before { display: none; }

  /* Immersive mode — features-tour.js adds html.ft-immersive while the tour grid
     fills the viewport. Retract the page chrome (the fixed announcement bar +
     nav) so the pinned phone gets the full top of the screen instead of being
     cropped beneath them; both slide back when you scroll out of the tour.
     Reaches outside the .ft- namespace on purpose — that's the whole point. */
  .anbar, .nav {
    transition: transform .4s cubic-bezier(.16, 1, .3, 1), opacity .35s ease,
                border-color .2s, background .2s;
  }
  html.ft-immersive .anbar,
  html.ft-immersive .nav { opacity: 0; pointer-events: none; }
  html.ft-immersive .anbar { transform: translateY(-100%); }
  html.ft-immersive .nav { transform: translateY(calc(-100% - var(--anbar-h, 44px))); }
}
@media (prefers-reduced-motion: reduce) {
  .ft-block .ft-step, .ft-block .ft-ico, .ft-block h3, .ft-block p, .ft-block .ft-said { opacity: 1; transform: none; transition: none; }
  .ft-shot { transition: none; }
}

/* ── Scan + Describe step: decorative receipt "polaroid" (floats + scans) ── */
.ft-polaroid {
  position: relative; width: 206px; margin-top: 26px;
  background: #fffdf9; border-radius: 11px; padding: 16px 14px 14px;
  font-family: var(--ft-mono); overflow: hidden;
  box-shadow: 0 22px 48px rgba(120,70,40,0.18), 0 6px 16px rgba(120,70,40,0.12);
  transform: rotate(-3deg);
  animation: ftpFloat 5.2s ease-in-out infinite;
}
.ft-polaroid::before { /* faux perforated top edge */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,0.05) 6px 8px);
}
.ft-polaroid-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 30px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,107,53,0), rgba(255,107,53,0.30) 50%, rgba(255,107,53,0));
  animation: ftpScan 3.4s ease-in-out infinite;
}
.ftp-head {
  font-family: var(--ft-serif); font-weight: 600; font-size: 13px; color: var(--ft-text);
  text-align: center; padding-bottom: 7px; margin-bottom: 7px;
  border-bottom: 1px dashed rgba(20,20,20,0.16);
}
.ftp-line { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; color: var(--ft-text-sec); padding: 2.5px 0; }
.ftp-total {
  display: flex; justify-content: space-between; margin-top: 7px; padding-top: 7px;
  border-top: 1px dashed rgba(20,20,20,0.16);
  font-family: var(--ft-serif); font-weight: 600; font-size: 12px; color: var(--ft-text);
}
@keyframes ftpFloat {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(-1.8deg) translateY(-9px); }
}
@keyframes ftpScan {
  0% { transform: translateY(-30px); opacity: 0; }
  10% { opacity: 1; }
  48% { opacity: 1; }
  60%, 100% { transform: translateY(215px); opacity: 0; }
}
/* On mobile the phone is PINNED at the top and the copy scrolls behind it, so
   this opaque receipt card collides with the phone frame as it passes — and the
   pinned layout has no collision-free resting spot. It's a decorative flourish,
   so drop it on phones; the pinned screenshot already shows the app. */
@media (max-width: 920px) { .ft-polaroid { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .ft-polaroid { animation: none; }
  .ft-polaroid-scan { display: none; }
}