:root{
  --ft-bg:#f7f8f3;
  --ft-ink:#17231c;
  --ft-muted:#58635b;
  --ft-line:#dfe7da;
  --ft-paper:#fffdf7;
  --ft-soft:#edf4e9;
  --ft-green:#1f7a4d;
  --ft-green-dark:#155d3a;
  --ft-gold:#c6902c;
  --ft-shadow:0 24px 70px rgba(35,49,38,.13);
}

@media (prefers-color-scheme: dark){
  :root{
    --ft-bg:#101610;
    --ft-ink:#edf5eb;
    --ft-muted:#aab8aa;
    --ft-line:#2a392d;
    --ft-paper:#151d16;
    --ft-soft:#1a251c;
    --ft-green:#63d195;
    --ft-green-dark:#86e0ad;
    --ft-gold:#e1b45c;
    --ft-shadow:0 26px 80px rgba(0,0,0,.44);
  }
}

body.followtab-site{
  background:
    linear-gradient(180deg, rgba(247,248,243,.96), rgba(247,248,243,.86)),
    radial-gradient(circle at 12% 8%, rgba(31,122,77,.14), transparent 30%),
    var(--ft-bg);
  color:var(--ft-ink);
}

@media (prefers-color-scheme: dark){
  body.followtab-site{
    background:
      linear-gradient(180deg, rgba(16,22,16,.98), rgba(16,22,16,.92)),
      radial-gradient(circle at 12% 8%, rgba(99,209,149,.12), transparent 30%),
      var(--ft-bg);
  }
}

.followtab-site .site-header{
  background:rgba(247,248,243,.78);
  border-bottom-color:rgba(223,231,218,.82);
}

@media (prefers-color-scheme: dark){
  .followtab-site .site-header{
    background:rgba(16,22,16,.78);
    border-bottom-color:rgba(42,57,45,.85);
  }
}

.followtab-site .site-nav,
.followtab-site .brand{
  border-color:var(--ft-line);
}

.followtab-site .btn-primary{
  background:var(--ft-green);
  color:#fff;
}

.followtab-site .btn-secondary{
  background:var(--ft-paper);
  border-color:var(--ft-line);
  color:var(--ft-ink);
}

.ft-shell{
  overflow:hidden;
}

.ft-hero{
  min-height:calc(100svh - 66px);
  display:grid;
  align-items:center;
  padding:clamp(42px, 6vw, 72px) 20px 34px;
  position:relative;
}

.ft-hero::before{
  content:"";
  position:absolute;
  inset:auto -10vw 0 auto;
  width:min(680px, 70vw);
  height:min(680px, 70vw);
  background:radial-gradient(circle, rgba(31,122,77,.14), transparent 64%);
  pointer-events:none;
}

.ft-hero-grid{
  width:min(1180px, 100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, .92fr) minmax(320px, .72fr);
  gap:clamp(28px, 6vw, 76px);
  align-items:center;
}

.ft-kicker{
  margin:0 0 12px;
  color:var(--ft-green-dark);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.78rem;
}

.ft-hero h1{
  margin:0;
  max-width:760px;
  font-size:clamp(3.4rem, 8vw, 7.5rem);
  line-height:.88;
  letter-spacing:0;
}

.ft-hero h1 span{
  display:block;
  color:var(--ft-green-dark);
}

.ft-hero .lede{
  max-width:610px;
  margin:24px 0 0;
  color:var(--ft-muted);
  font-size:clamp(1.08rem, 1.7vw, 1.35rem);
}

.ft-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

.ft-proof{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  max-width:650px;
  margin-top:36px;
  border-top:1px solid var(--ft-line);
  padding-top:18px;
}

.ft-proof strong{
  display:block;
  font-size:1rem;
}

.ft-proof span{
  display:block;
  color:var(--ft-muted);
  font-size:.92rem;
}

.ft-phone-stage{
  position:relative;
  min-height:620px;
  display:grid;
  place-items:center;
}

.ft-phone{
  width:min(330px, 78vw);
  aspect-ratio:1290 / 2796;
  padding:10px;
  border:1px solid rgba(23,35,28,.16);
  border-radius:34px;
  background:#101711;
  box-shadow:var(--ft-shadow);
  transform:rotate(2deg);
}

.ft-phone img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#fff;
  border-radius:25px;
}

.ft-paper-note{
  position:absolute;
  left:0;
  bottom:62px;
  width:min(260px, 58vw);
  padding:18px;
  border:1px solid var(--ft-line);
  border-radius:8px;
  background:var(--ft-paper);
  box-shadow:var(--ft-shadow);
}

.ft-paper-note p{
  margin:0;
  color:var(--ft-muted);
}

.ft-paper-note strong{
  display:block;
  color:var(--ft-ink);
  margin-bottom:4px;
}

.ft-section{
  max-width:1120px;
  margin:0 auto;
  padding:70px 20px;
}

.ft-section-narrow{
  max-width:820px;
}

.ft-section h2{
  margin:0 0 16px;
  font-size:clamp(2rem, 4vw, 3.35rem);
  line-height:1;
  letter-spacing:0;
}

.ft-section p{
  color:var(--ft-muted);
}

.ft-lines{
  display:grid;
  gap:0;
  border-top:1px solid var(--ft-line);
}

.ft-line{
  display:grid;
  grid-template-columns:190px 1fr;
  gap:28px;
  padding:24px 0;
  border-bottom:1px solid var(--ft-line);
}

.ft-line h3{
  margin:0;
  font-size:1.05rem;
}

.ft-line p{
  margin:0;
  max-width:660px;
}

.ft-workflow{
  display:grid;
  grid-template-columns:.84fr 1.16fr;
  gap:42px;
  align-items:center;
}

.ft-wide-shot{
  border-radius:18px;
  border:1px solid var(--ft-line);
  overflow:hidden;
  background:var(--ft-paper);
  box-shadow:var(--ft-shadow);
}

.ft-wide-shot img{
  display:block;
  width:100%;
  height:auto;
}

.ft-steps{
  display:grid;
  gap:16px;
}

.ft-step{
  padding:18px 0;
  border-bottom:1px solid var(--ft-line);
}

.ft-step span{
  color:var(--ft-green-dark);
  font-weight:900;
  font-size:.86rem;
}

.ft-step h3{
  margin:5px 0 4px;
  font-size:1.25rem;
}

.ft-step p{
  margin:0;
}

.ft-screens{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  align-items:start;
}

.ft-screen{
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--ft-line);
  background:var(--ft-paper);
  box-shadow:var(--ft-shadow);
}

.ft-screen:nth-child(2){
  margin-top:0;
}

.ft-screen img{
  display:block;
  width:100%;
  height:auto;
}

.ft-legal-hero{
  max-width:900px;
  margin:0 auto;
  padding:68px 20px 22px;
}

.ft-legal-hero h1{
  margin:0 0 10px;
  font-size:clamp(2.4rem, 5vw, 4.4rem);
  line-height:.98;
  letter-spacing:0;
}

.ft-legal{
  max-width:900px;
  margin:0 auto 72px;
  padding:0 20px;
}

.ft-legal-block{
  padding:26px 0;
  border-top:1px solid var(--ft-line);
}

.ft-legal-block h2{
  margin:0 0 10px;
  font-size:1.35rem;
}

.ft-legal-block h3{
  margin:20px 0 8px;
  font-size:1.05rem;
}

.ft-legal-block p,
.ft-legal-block li{
  color:var(--ft-muted);
  line-height:1.82;
}

.ft-legal-block ul{
  padding-left:19px;
}

.ft-contact-panel{
  border:1px solid var(--ft-line);
  border-radius:10px;
  background:var(--ft-paper);
  padding:22px;
  box-shadow:var(--ft-shadow);
}

.ft-faq details{
  background:var(--ft-paper);
  border-color:var(--ft-line);
  box-shadow:none;
}

.ft-final{
  max-width:1120px;
  margin:0 auto 70px;
  padding:46px 20px;
  border-top:1px solid var(--ft-line);
  text-align:center;
}

.ft-final h2{
  margin:0 auto 14px;
  max-width:720px;
  font-size:clamp(2rem, 4vw, 3.4rem);
  line-height:1;
}

.ft-final p{
  margin:0 auto 22px;
  max-width:620px;
  color:var(--ft-muted);
}

@keyframes ftRise{
  from{opacity:0; transform:translateY(18px)}
  to{opacity:1; transform:translateY(0)}
}

.ft-reveal{
  animation:ftRise .7s ease both;
}

.ft-reveal-delay{
  animation-delay:.12s;
}

.ft-reveal-delay-2{
  animation-delay:.24s;
}

@media (prefers-reduced-motion: reduce){
  .ft-reveal,
  .ft-reveal-delay,
  .ft-reveal-delay-2{
    animation:none;
  }
}

@media (max-width: 860px){
  .ft-hero{
    min-height:auto;
    padding-top:42px;
  }

  .ft-hero-grid,
  .ft-workflow{
    grid-template-columns:1fr;
  }

  .ft-phone-stage{
    min-height:520px;
  }

  .ft-paper-note{
    left:8px;
    bottom:22px;
  }

  .ft-proof,
  .ft-screens{
    grid-template-columns:1fr;
  }

  .ft-screen:nth-child(2){
    margin-top:0;
  }

  .ft-line{
    grid-template-columns:1fr;
    gap:8px;
  }
}

@media (max-width: 560px){
  .ft-hero h1{
    font-size:3.35rem;
  }

  .ft-proof{
    gap:12px;
  }

  .ft-phone-stage{
    min-height:470px;
  }

  .ft-phone{
    width:min(285px, 86vw);
  }

  .ft-paper-note{
    position:relative;
    left:auto;
    bottom:auto;
    width:100%;
    margin-top:18px;
  }

  .ft-section{
    padding-block:50px;
  }
}