/* =========================================================
   TALLYKNOT WEB APP -- home page sections
   Hero "Use on Web" button + floating chip, the interactive browser preview (.tnw-*),
   the four "how it works" steps and the phone + web "better together" band.
   Markup: components/web_showcase.php, components/web_steps.php, index.php.
   Behaviour: assets/js/components/web_app.js. Colours come from common.css's :root tokens.
========================================================= */

/* ---------- HERO: "Use on Web" button (sits beside the Google Play button) ---------- */
.tn-web-button { display:inline-flex; align-items:center; gap:13px; padding:12px 20px; border:1px solid var(--tn-primary-dark); border-radius:11px; background:linear-gradient(135deg,var(--tn-primary),var(--tn-primary-dark)); color:#fff; box-shadow:0 14px 28px rgba(37,99,235,.28); transition:transform .2s ease, box-shadow .2s ease; }
.tn-web-button:hover { color:#fff; transform:translateY(-2px); box-shadow:0 18px 34px rgba(37,99,235,.36); }
.tn-web-button i { font-size:26px; }
.tn-web-button small { display:block; color:#bfdbfe; font-size:10px; text-transform:uppercase; }
.tn-web-button strong { display:block; font-size:17px; }

/* HERO: floating chip that says the web is here too */
.tn-hero-floating-web { right:-6px; top:474px; animation:tnwFloat 5.1s ease-in-out .9s infinite; }
@keyframes tnwFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
@media (max-width:1199px) { .tn-hero-floating-web { right:1%; top:418px; } }
@media (max-width:991px) { .tn-hero-floating-web { right:7%; top:432px; } }
@media (max-width:767px) { .tn-hero-floating-web { right:5%; top:404px; } }
@media (max-width:575px) {
  .tn-web-button { justify-content:center; }
  .tn-hero-floating-web { right:1%; top:392px; }
}

/* ---------- WEB SHOWCASE: the interactive browser preview ---------- */
.tnw-section { position:relative; overflow:hidden; background:linear-gradient(180deg,#fff 0%,#f5f8ff 55%,#fff 100%); }
.tnw-section::before { content:""; position:absolute; top:-140px; left:50%; width:900px; height:900px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,rgba(37,99,235,.09) 0%,rgba(37,99,235,0) 68%); pointer-events:none; }
.tnw-section > .container { position:relative; }
.tnw-cta { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:34px; }
.tnw-pills { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px; }
.tnw-pill { display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border:1px solid var(--tn-border); border-radius:100px; background:#fff; color:#334155; font-size:13.5px; font-weight:700; box-shadow:0 4px 14px rgba(15,23,42,.04); }
.tnw-pill i { color:var(--tn-primary); }

.tnw-stage { position:relative; max-width:1080px; margin:52px auto 0; }

/* ---------- Dashboard preview: LIVE HTML on big screens, PICTURE on small screens ----------
   992px and wider (laptop / desktop): .tnw-stage (the HTML dashboard) is shown, .tnw-shot (the picture) is hidden.
   991px and below (tablet / phone):   .tnw-shot (the picture) is shown, .tnw-stage (the HTML dashboard) is hidden.
   The picture is images/dashboard/ (jp/images/dashboard/ on the Japanese site): width 100%, height auto. */
.tnw-shot { display:none; width:100%; margin:38px 0 0; }
.tnw-shot img { display:block; width:100%; height:auto; }
@media (min-width:992px) {
  .tnw-stage { display:block; }
  .tnw-shot { display:none; }
}
@media (max-width:991px) {
  .tnw-stage { display:none; }
  .tnw-shot { display:block; }
}
.tnw-browser { position:relative; z-index:2; overflow:hidden; border:1px solid #cbd5e1; border-radius:18px; background:#fff; box-shadow:0 50px 100px -30px rgba(15,23,42,.35), 0 18px 36px -18px rgba(37,99,235,.25); }
.tnw-chrome { display:flex; align-items:center; gap:14px; padding:11px 16px; border-bottom:1px solid var(--tn-border); background:#f1f5f9; }
.tnw-dots { display:flex; gap:7px; flex:0 0 auto; }
.tnw-dots i { width:11px; height:11px; border-radius:50%; background:#cbd5e1; }
.tnw-dots i:nth-child(1) { background:#fb7185; } .tnw-dots i:nth-child(2) { background:#fbbf24; } .tnw-dots i:nth-child(3) { background:#4ade80; }
.tnw-url { display:flex; align-items:center; gap:8px; flex:1; min-width:0; max-width:520px; margin:0 auto; padding:6px 14px; border-radius:100px; background:#fff; color:#64748b; font-size:12px; font-weight:600; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.tnw-url i { color:#16a34a; font-size:11px; }

.tnw-app { display:grid; grid-template-columns:184px minmax(0,1fr); min-height:560px; background:#f8fafc; text-align:left; }
.tnw-side { padding:16px 12px; background:#0f172a; color:#cbd5e1; }
.tnw-brand { display:flex; align-items:center; gap:9px; margin:2px 6px 20px; color:#fff; font-size:16px; font-weight:800; }
.tnw-brand img { height:26px; width:auto; }
.tnw-nav { display:flex; align-items:center; gap:10px; margin-bottom:4px; padding:10px 12px; border-radius:10px; font-size:13px; font-weight:600; color:#cbd5e1; }
.tnw-nav i { width:16px; text-align:center; font-size:13px; }
.tnw-nav.is-active { background:linear-gradient(135deg,var(--tn-primary),var(--tn-primary-dark)); color:#fff; box-shadow:0 6px 16px rgba(37,99,235,.4); }
.tnw-navlabel { margin:16px 12px 8px; color:#64748b; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }

.tnw-main { min-width:0; }
.tnw-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 22px; height:54px; border-bottom:1px solid var(--tn-border); background:#fff; }
.tnw-top strong { font-size:14px; font-weight:800; color:var(--tn-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tnw-top-right { display:flex; align-items:center; gap:14px; color:#64748b; }
.tnw-avatar { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--tn-primary); color:#fff; font-size:12px; font-weight:800; }
.tnw-page { padding:20px 22px 24px; }
.tnw-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.tnw-h { margin:0; font-size:18px; font-weight:800; color:var(--tn-text); }
.tnw-ghost { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid var(--tn-border); border-radius:9px; background:#fff; color:var(--tn-text); font-size:12px; font-weight:700; }
.tnw-back { margin-bottom:12px; }

.tnw-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.tnw-tab { display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border:1px solid var(--tn-border); border-radius:100px; background:#fff; color:#475569; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; transition:.18s; }
.tnw-tab:hover { border-color:var(--tn-primary); color:var(--tn-primary); }
.tnw-tab.is-active { border-color:var(--tn-primary); background:var(--tn-primary); color:#fff; box-shadow:0 5px 14px rgba(37,99,235,.28); }
.tnw-range { display:flex; align-items:center; gap:7px; margin:11px 0 0; color:#64748b; font-size:12px; font-weight:600; }

.tnw-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin-top:16px; }
.tnw-stat { padding:12px 14px; border:1px solid var(--tn-border); border-radius:12px; background:#fff; }
.tnw-stat span { display:block; margin-bottom:5px; color:#64748b; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.tnw-stat strong { display:block; font-size:18px; font-weight:800; color:var(--tn-text); white-space:nowrap; }
.tnw-stat.in { background:var(--tn-green-soft); border-color:#bbf7d0; } .tnw-stat.in strong { color:var(--tn-green); }
.tnw-stat.out { background:var(--tn-red-soft); border-color:#fecaca; } .tnw-stat.out strong { color:var(--tn-red); }

.tnw-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:12px; margin-top:12px; }
.tnw-card { padding:15px 16px; border:1px solid var(--tn-border); border-radius:14px; background:#fff; }
.tnw-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.tnw-card-head h4 { margin:0; font-size:13.5px; font-weight:800; color:var(--tn-text); }
.tnw-card-head h4 i { margin-right:6px; color:#94a3b8; font-size:12px; }
.tnw-legend { display:flex; gap:12px; font-size:11px; font-weight:700; color:#475569; }
.tnw-legend i { display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; }

/* the cash flow line chart -- axis labels are HTML so they stay readable when the chart shrinks */
.tnw-card.tnw-flow { display:flex; flex-direction:column; }
.tnw-chart { flex:1; display:grid; grid-template-columns:34px minmax(0,1fr); grid-template-rows:minmax(170px,1fr) auto; column-gap:6px; }
.tnw-y { display:flex; flex-direction:column; justify-content:space-between; padding:0 0 1px; text-align:right; color:#94a3b8; font-size:10px; font-weight:600; }
.tnw-plot { position:relative; }
.tnw-plot svg { display:block; width:100%; height:100%; overflow:visible; }
.tnw-plot .grid { stroke:#eef2f7; stroke-width:1; vector-effect:non-scaling-stroke; }
.tnw-plot .line { fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.tnw-plot .line.in { stroke:var(--tn-green); } .tnw-plot .line.out { stroke:var(--tn-red); }
.tnw-plot .area.in { fill:url(#tnwGreen); } .tnw-plot .area.out { fill:url(#tnwRed); }
.tnw-dot { position:absolute; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border:2px solid #fff; border-radius:50%; box-shadow:0 2px 8px rgba(15,23,42,.25); opacity:0; transition:opacity .4s ease .9s; }
.tnw-dot.in { background:var(--tn-green); } .tnw-dot.out { background:var(--tn-red); }
.tnw-live .tnw-dot { opacity:1; }
.tnw-dot::after { content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid currentColor; opacity:0; animation:tnwPing 2.2s ease-out infinite; }
.tnw-dot.in { color:var(--tn-green); } .tnw-dot.out { color:var(--tn-red); }
@keyframes tnwPing { 0% { transform:scale(.5); opacity:.55; } 100% { transform:scale(1.7); opacity:0; } }
.tnw-x { grid-column:2; display:flex; justify-content:space-between; padding-top:7px; color:#94a3b8; font-size:10px; font-weight:600; }

/* the donut + its rows */
.tnw-toggle { display:inline-flex; gap:3px; padding:3px; border:1px solid var(--tn-border); border-radius:100px; background:#f8fafc; }
.tnw-toggle button { padding:4px 10px; border:0; border-radius:100px; background:none; color:#64748b; font:inherit; font-size:11px; font-weight:700; cursor:pointer; transition:.15s; }
.tnw-toggle button.is-active { background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.14); }
.tnw-toggle button[data-metric="out"].is-active { color:var(--tn-red); } .tnw-toggle button[data-metric="in"].is-active { color:var(--tn-green); }
.tnw-donut { position:relative; width:138px; height:138px; margin:2px auto 12px; }
.tnw-donut svg { width:100%; height:100%; transform:rotate(-90deg); }
.tnw-donut circle { fill:none; stroke-width:12; }
.tnw-donut .track { stroke:#f1f5f9; }
.tnw-donut-c { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.tnw-donut-c span { color:#94a3b8; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.tnw-donut-c strong { font-size:15px; font-weight:800; color:var(--tn-text); }
.tnw-rows { display:flex; flex-direction:column; gap:7px; }
.tnw-row { display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; color:#334155; }
.tnw-row i { flex:0 0 auto; width:8px; height:8px; border-radius:50%; }
.tnw-row span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tnw-row b { flex:0 0 auto; font-weight:800; }

/* floating cards around the browser (wide screens only) */
.tnw-float { position:absolute; z-index:3; padding:12px 14px; border:1px solid rgba(226,232,240,.95); border-radius:16px; background:rgba(255,255,255,.94); box-shadow:0 24px 50px -12px rgba(15,23,42,.28); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); text-align:left; }
.tnw-float-title { display:flex; align-items:center; gap:8px; margin-bottom:9px; font-size:12px; font-weight:800; color:var(--tn-text); }
.tnw-float-title i { color:var(--tn-primary); }
.tnw-float-title em { margin-left:auto; font-style:normal; color:#94a3b8; font-weight:700; }
.tnw-float-cal { left:-46px; bottom:34px; width:212px; animation:tnwFloat 6s ease-in-out infinite; }
.tnw-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.tnw-cal b { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; height:22px; border-radius:6px; color:#475569; font-size:9.5px; font-weight:700; }
.tnw-cal b.wd { color:#94a3b8; font-size:8px; text-transform:uppercase; }
.tnw-cal b.sel { background:var(--tn-primary); color:#fff; box-shadow:0 4px 10px rgba(37,99,235,.35); }
.tnw-cal b u { display:flex; gap:2px; height:3px; text-decoration:none; }
.tnw-cal b u s { width:3px; height:3px; border-radius:50%; background:var(--tn-green); text-decoration:none; }
.tnw-cal b u s.r { background:var(--tn-red); }
.tnw-float-members { right:-34px; top:-58px; width:196px; animation:tnwFloat 5.4s ease-in-out .5s infinite; }
.tnw-avatars { display:flex; align-items:center; }
.tnw-avatars span { display:grid; place-items:center; width:30px; height:30px; margin-left:-8px; border:2px solid #fff; border-radius:50%; color:#fff; font-size:11px; font-weight:800; }
.tnw-avatars span:first-child { margin-left:0; }
.tnw-avatars em { margin-left:9px; font-style:normal; font-size:11px; font-weight:700; color:#64748b; }
.tnw-invite { display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:5px 10px; border-radius:100px; background:var(--tn-green-soft); color:#15803d; font-size:10.5px; font-weight:800; }
.tnw-float-toast { right:-34px; bottom:-62px; display:flex; align-items:center; gap:11px; width:236px; animation:tnwFloat 5.8s ease-in-out 1.2s infinite; }
.tnw-toast-ic { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; border-radius:10px; background:var(--tn-red-soft); color:var(--tn-red); font-size:13px; }
.tnw-float-toast strong { display:block; font-size:12px; font-weight:800; color:var(--tn-text); }
.tnw-float-toast div span { display:block; margin-top:2px; color:#64748b; font-size:10.5px; font-weight:600; }
@media (max-width:1199px) { .tnw-float { display:none; } }

/* ---------- HOW IT WORKS: four steps ---------- */
.tnw-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; margin-top:52px; }
.tnw-step { position:relative; display:flex; flex-direction:column; padding:22px; border:1px solid var(--tn-border); border-radius:20px; background:#fff; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.tnw-step:hover { transform:translateY(-5px); border-color:#bfdbfe; box-shadow:0 26px 44px -22px rgba(37,99,235,.35); }
.tnw-step:not(:last-child)::after { content:"\f054"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; top:50%; right:-19px; z-index:2; display:grid; place-items:center; width:16px; height:16px; color:#93c5fd; font-size:12px; }
.tnw-num { display:grid; place-items:center; width:30px; height:30px; margin-bottom:14px; border-radius:50%; background:var(--tn-primary); color:#fff; font-size:13px; font-weight:800; box-shadow:0 6px 14px rgba(37,99,235,.35); }
.tnw-step h3 { margin:0 0 7px; font-size:18px; font-weight:800; }
.tnw-step p { margin:0 0 18px; color:var(--tn-muted); font-size:14px; line-height:1.65; }
.tnw-mini { margin-top:auto; padding:14px; border:1px solid var(--tn-border); border-radius:14px; background:#f8fafc; text-align:left; }
.tnw-mini-field { height:26px; margin-bottom:8px; padding:0 10px; display:flex; align-items:center; border:1px solid var(--tn-border); border-radius:8px; background:#fff; color:#94a3b8; font-size:10.5px; font-weight:600; }
.tnw-mini-btn { display:flex; align-items:center; justify-content:center; gap:6px; height:28px; border-radius:8px; background:var(--tn-primary); color:#fff; font-size:11px; font-weight:800; }
.tnw-mini-check { display:flex; align-items:center; gap:7px; margin:2px 0 9px; color:#334155; font-size:10.5px; font-weight:700; }
.tnw-mini-check i { display:grid; place-items:center; width:13px; height:13px; border-radius:4px; background:var(--tn-primary); color:#fff; font-size:8px; }
.tnw-led { display:flex; align-items:center; gap:9px; margin-bottom:8px; padding:8px 10px; border:1px solid var(--tn-border); border-radius:10px; background:#fff; }
.tnw-led:last-child { margin-bottom:0; }
.tnw-led-ic { display:grid; place-items:center; flex:0 0 26px; width:26px; height:26px; border-radius:8px; font-size:11px; }
.tnw-led strong { display:block; font-size:11.5px; font-weight:800; color:var(--tn-text); }
.tnw-led span { display:block; margin-top:1px; color:#94a3b8; font-size:9.5px; font-weight:700; }
.tnw-led b { margin-left:auto; font-size:11px; font-weight:800; color:var(--tn-text); }
.tnw-ent { display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid #e9eef5; font-size:11px; font-weight:700; color:#334155; }
.tnw-ent:last-of-type { border-bottom:0; }
.tnw-ent i { display:grid; place-items:center; flex:0 0 22px; width:22px; height:22px; border-radius:7px; font-size:9px; }
.tnw-ent i.in { background:var(--tn-green-soft); color:var(--tn-green); } .tnw-ent i.out { background:var(--tn-red-soft); color:var(--tn-red); }
.tnw-ent b { margin-left:auto; font-weight:800; } .tnw-ent b.in { color:var(--tn-green); } .tnw-ent b.out { color:var(--tn-red); }
.tnw-mini-row { display:flex; gap:8px; margin-top:10px; }
.tnw-mini-row .tnw-mini-btn { flex:1; }
.tnw-mini-btn.soft { background:#fff; border:1px solid var(--tn-border); color:var(--tn-text); }
.tnw-mini-donut { display:flex; align-items:center; gap:14px; }
.tnw-mini-donut svg { flex:0 0 74px; width:74px; height:74px; transform:rotate(-90deg); }
.tnw-mini-donut circle { fill:none; stroke-width:15; }
.tnw-mini-cal { flex:1; }
.tnw-mini-cal .tnw-cal b { height:19px; font-size:8.5px; }

/* ---------- BETTER TOGETHER: phone + web ---------- */
.tnw-together { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:stretch; gap:22px; margin-top:48px; }
.tnw-side-card { position:relative; padding:34px 32px; border:1px solid var(--tn-border); border-radius:24px; background:#fff; overflow:hidden; }
.tnw-side-card.web { background:linear-gradient(160deg,#eff6ff 0%,#fff 62%); border-color:#bfdbfe; }
.tnw-side-card.app { background:linear-gradient(160deg,#f0fdf4 0%,#fff 62%); border-color:#bbf7d0; }
.tnw-side-ic { display:grid; place-items:center; width:56px; height:56px; margin-bottom:18px; border-radius:16px; color:#fff; font-size:24px; box-shadow:0 14px 26px -8px rgba(15,23,42,.3); }
.tnw-side-card.web .tnw-side-ic { background:linear-gradient(135deg,var(--tn-primary),var(--tn-primary-dark)); }
.tnw-side-card.app .tnw-side-ic { background:linear-gradient(135deg,#22c55e,#15803d); }
.tnw-side-card h3 { margin:0 0 6px; font-size:24px; font-weight:800; letter-spacing:-.5px; }
.tnw-side-card > p { margin:0 0 18px; color:var(--tn-muted); font-size:15px; line-height:1.65; }
.tnw-side-card ul { margin:0; padding:0; list-style:none; }
.tnw-side-card li { display:flex; align-items:flex-start; gap:10px; margin-bottom:11px; font-size:14.5px; font-weight:600; color:#334155; line-height:1.5; }
.tnw-side-card li i { margin-top:3px; color:var(--tn-primary); font-size:13px; }
.tnw-side-card.app li i { color:var(--tn-green); }
.tnw-sync { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:0 4px; text-align:center; }
.tnw-sync-ic { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:#fff; border:1px solid var(--tn-border); color:var(--tn-primary); font-size:24px; box-shadow:0 18px 34px -12px rgba(37,99,235,.4); }
.tnw-sync-ic i { animation:tnwSpin 6s linear infinite; }
@keyframes tnwSpin { to { transform:rotate(360deg); } }
.tnw-sync span { max-width:120px; color:#64748b; font-size:12px; font-weight:700; line-height:1.4; }

/* ---------- DOWNLOAD BOX: two buttons ---------- */
.tnw-dl-actions { display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:991px) {
  .tnw-app { grid-template-columns:minmax(0,1fr); }
  .tnw-side { display:none; }
  .tnw-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tnw-step:not(:last-child)::after { display:none; }
  .tnw-together { grid-template-columns:minmax(0,1fr); }
  .tnw-sync { flex-direction:row; padding:4px 0; }
  .tnw-sync span { max-width:none; }
}
@media (max-width:767px) {
  .tnw-stage { margin-top:38px; }
  .tnw-page { padding:16px 14px 18px; }
  .tnw-top { padding:0 14px; }
  .tnw-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tnw-grid { grid-template-columns:minmax(0,1fr); }
  .tnw-chrome { padding:9px 12px; }
  .tnw-app { min-height:0; }
}
@media (max-width:575px) {
  .tnw-steps { grid-template-columns:minmax(0,1fr); gap:16px; margin-top:38px; }
  .tnw-cta a, .tnw-dl-actions a { width:100%; justify-content:center; }
  .tnw-side-card { padding:26px 22px; }
  .tnw-url { font-size:11px; }
  .tnw-stat strong { font-size:16px; }
  .tnw-chart { grid-template-rows:150px auto; }
}
@media (prefers-reduced-motion:reduce) {
  .tn-hero-floating-web, .tnw-float, .tnw-dot::after, .tnw-sync-ic i { animation:none; }
  .tnw-step, .tnw-tab, .tnw-dot { transition:none; }
}