/* TikTok in-app-browser landing page — mobile-first, above-the-fold.
   Reuses the tokens/brand from styles.css; only page-specific rules here. */

.tt-page{min-height:100svh}

.tt-wrap{
  width:min(470px,calc(100% - 32px));
  margin-inline:auto;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;
  padding:104px 0 26px;
}

/* Attention arrow pointing to TikTok's ••• menu (top-right of the screen) */
.tt-arrow{
  position:absolute;top:6px;right:8px;z-index:5;
  display:flex;flex-direction:column;align-items:flex-end;
  color:var(--green);pointer-events:none;
  animation:ttNudge 1.15s ease-in-out infinite;
}
.tt-arrow-svg{width:94px;height:94px;display:block}
.tt-arrow-label{
  margin-top:-4px;margin-right:2px;
  background:var(--green);color:#fff;font-weight:800;font-size:.78rem;letter-spacing:.01em;
  padding:6px 11px;border-radius:999px;box-shadow:0 8px 18px rgba(11,107,67,.32);
}
@keyframes ttNudge{0%,100%{transform:translate(0,0)}50%{transform:translate(7px,-7px)}}

.tt-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.12rem;color:var(--ink);margin-bottom:16px}
.tt-logo{width:44px;height:44px;border-radius:13px;object-fit:cover;box-shadow:0 8px 20px rgba(11,62,40,.18)}

.tt-title{font-size:clamp(1.95rem,7vw,2.45rem);letter-spacing:-.03em;margin:0 0 22px;line-height:1.1}

.tt-steps{
  list-style:none;padding:0;margin:0 0 26px;
  display:flex;flex-direction:column;gap:12px;width:100%;text-align:left;
}
.tt-steps li{
  display:flex;align-items:center;gap:14px;
  background:rgba(255,254,250,.9);border:1px solid var(--line);border-radius:18px;
  padding:14px 16px;box-shadow:0 8px 22px rgba(16,34,26,.055);
}
.tt-step-num{
  flex:none;width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--green-2),var(--green));color:#fff;
  font-weight:800;font-size:1.1rem;display:grid;place-items:center;
}
.tt-step-text{font-size:1.06rem;font-weight:600;color:var(--ink);line-height:1.35}
.tt-step-text b{font-weight:800;color:var(--green)}

.tt-badge{margin:0 0 16px}
.tt-badge img{width:clamp(212px,64vw,240px)}

.tt-fallback{font-size:.93rem;color:var(--muted);max-width:360px;margin:0;line-height:1.5}
.tt-fallback b{color:var(--ink);font-weight:750}

@media(max-width:400px){
  .tt-wrap{padding-top:92px}
  .tt-arrow-svg{width:82px;height:82px}
  .tt-steps li{padding:12px 14px}
  .tt-step-text{font-size:1rem}
}
@media(min-width:600px){
  .tt-arrow{right:calc(50% - 300px)}
}