/* ===========================================================================
   start.css — /templates, /templates/<slug> and /start/<slug>.

   Loads after home.css and use-cases.css (the tokens, the bar, the buttons and
   the footer). Every selector is .tg- prefixed, so nothing here can reach the
   builder, the guides or the editor.
   =========================================================================== */
.tg{--tg-glow:radial-gradient(60% 80% at 15% 0%,rgba(139,92,246,.16),transparent 60%),radial-gradient(50% 70% at 95% 10%,rgba(59,130,246,.14),transparent 60%)}
.tg-tag{
  display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .7rem;border-radius:999px;
  background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  font-family:'Space Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);
}
.tg-tag i{color:var(--ok)}
.tg h1{font-size:clamp(2rem,4.6vw,3.3rem);font-weight:800;letter-spacing:-.045em;line-height:1.04;margin:.9rem 0 .8rem}
.tg h1 em{font-style:normal;background:linear-gradient(120deg,#8B5CF6,#6366F1 45%,#3B82F6);-webkit-background-clip:text;background-clip:text;color:transparent}
.tg-lede{font-size:1.1rem;line-height:1.6;color:var(--ink-soft);max-width:60ch}
.tg-sec{padding:56px 0}
.tg-sec h2{font-size:clamp(1.4rem,2.8vw,2rem);font-weight:800;letter-spacing:-.035em;line-height:1.15;margin-bottom:.5rem}
.tg-sec-sub{color:var(--slate);margin-bottom:1.6rem;max-width:62ch}

/* ═══ The hub ═══ */
.tg-hubhero{background:var(--tg-glow);padding:64px 0 28px;text-align:center}
.tg-hubhero .tg-lede{margin:0 auto}
.tg-promise{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.4rem;margin-top:1.3rem;font-size:.9rem;color:var(--slate)}
.tg-promise span{display:inline-flex;align-items:center;gap:.4rem}
.tg-promise i{color:var(--ok)}
.tg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.tg-card{
  display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.tg-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#d8d3ff}
.tg-thumb{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--paper-2);display:block}
.tg-thumb::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%) var(--paper-2);background-size:220% 100%;animation:tg-shim 1.4s linear infinite}
.tg-thumb.is-live::before{display:none}
.tg-thumb iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;pointer-events:none;transition:translate var(--dur,8s) cubic-bezier(.45,0,.55,1)}
.tg-card:hover .tg-thumb iframe,.tg-card:focus-within .tg-thumb iframe{translate:0 calc(-1 * var(--travel,0px))}
@keyframes tg-shim{to{background-position:-120% 0}}
.tg-card-b{display:flex;flex-direction:column;gap:.45rem;padding:1rem 1.15rem 1.15rem;flex:1}
.tg-card-b h3{display:flex;align-items:center;gap:.5rem;font-size:1.08rem;font-weight:750;letter-spacing:-.02em}
.tg-card-b h3 i{color:var(--accent)}
.tg-card-b p{font-size:.92rem;line-height:1.5;color:var(--slate);flex:1}
.tg-card-acts{display:flex;gap:.5rem;margin-top:.4rem}
.tg-card-acts .hm-btn{flex:1;justify-content:center}

/* ═══ A landing page ═══ */
.tg-hero{background:var(--tg-glow);padding:40px 0 56px}
.tg-hero-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:44px;align-items:center}
.tg-crumbs{font-size:.84rem;color:var(--slate);margin-bottom:.9rem}
.tg-crumbs a{color:var(--slate);border-bottom:1px solid var(--line)}
.tg-crumbs a:hover{color:var(--ink)}
.tg-points{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.45rem 1rem;margin:1.2rem 0 1.5rem}
.tg-points li{display:flex;gap:.5rem;font-size:.93rem;line-height:1.4;color:var(--ink-soft)}
.tg-points i{color:var(--ok);margin-top:.1rem}
.tg-go{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.tg-go .hm-btn-lg{font-size:1.04rem;padding:.95rem 1.45rem;box-shadow:0 12px 26px -12px rgba(91,75,232,.7)}
.tg-go-fine{display:flex;align-items:center;gap:.4rem;font-size:.84rem;color:var(--slate)}
.tg-go-fine i{color:var(--ok)}

.tg-frame{background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden}
.tg-frame-top{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border-bottom:1px solid var(--line);background:var(--paper)}
.tg-dots{display:flex;gap:5px}
.tg-dots i{width:10px;height:10px;border-radius:50%;background:#e2ded5}
.tg-url{flex:1;min-width:0;display:flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:8px;background:var(--white);border:1px solid var(--line);font-size:.78rem;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-url i{color:var(--ok);font-size:.72rem}
.tg-seg{display:flex;padding:2px;border-radius:9px;background:var(--paper-2);border:1px solid var(--line)}
.tg-seg button{border:0;background:none;padding:.28rem .55rem;border-radius:7px;font:inherit;font-size:.78rem;color:var(--slate);cursor:pointer;display:inline-flex;align-items:center;gap:.3rem}
.tg-seg button.on{background:var(--white);color:var(--ink);box-shadow:var(--shadow-sm)}
.tg-seg[hidden]{display:none}
.tg-view{position:relative;height:min(68vh,600px);overflow:hidden;background:var(--paper-2)}
.tg-view::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%) var(--paper-2);background-size:220% 100%;animation:tg-shim 1.4s linear infinite}
.tg-view.is-live::before{display:none}
.tg-view iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;background:#fff}
.tg-view.is-phone{background:var(--paper-2)}
.tg-view.is-phone iframe{left:50%;translate:-50% 0;transform-origin:50% 0;box-shadow:0 0 0 1px var(--line)}

.tg-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.tg-steps li{list-style:none;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.2rem 1.25rem;box-shadow:var(--shadow-sm)}
.tg-steps li::before{counter-increment:s;content:counter(s);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--brand-tile,linear-gradient(141deg,#8B5CF6,#6366F1 50%,#3B82F6));color:#fff;font-weight:800;font-size:.9rem;margin-bottom:.7rem}
.tg-steps b{display:block;font-size:1.02rem;letter-spacing:-.02em;margin-bottom:.3rem}
.tg-steps p{font-size:.92rem;line-height:1.55;color:var(--slate)}

.tg-faq{max-width:760px;display:flex;flex-direction:column;gap:.6rem}
.tg-faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1.1rem}
.tg-faq summary{cursor:pointer;font-weight:650;letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.tg-faq summary::-webkit-details-marker{display:none}
.tg-faq summary::after{content:"+";color:var(--slate);font-weight:400}
.tg-faq details[open] summary::after{content:"–"}
.tg-faq p{margin-top:.55rem;color:var(--ink-soft);line-height:1.6;font-size:.95rem}

.tg-band{margin:8px 0 56px;border-radius:var(--r-lg);padding:34px 30px;background:var(--ink);color:rgba(255,255,255,.78);display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;justify-content:space-between;position:relative;overflow:hidden}
.tg-band::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 120% at 100% 0%,rgba(124,108,255,.45),transparent 60%);pointer-events:none}
.tg-band h2{color:#fff;margin:0 0 .3rem}
.tg-band>*{position:relative}

/* ═══ /start/<slug>: the loader ═══ */
.tg-start{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px;background:var(--tg-glow),var(--paper)}
.tg-loader{width:min(440px,100%);background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:28px 26px 24px;text-align:center}
.tg-loader .hm-brand{justify-content:center;margin-bottom:18px}
.tg-loader h1{font-size:1.4rem;letter-spacing:-.03em;margin:0 0 .3rem;line-height:1.2}
.tg-loader>p,.tg-busy>p{color:var(--slate);font-size:.94rem}
.tg-progress{height:6px;border-radius:99px;background:var(--paper-2);overflow:hidden;margin:20px 0 16px}
.tg-progress span{display:block;height:100%;width:8%;border-radius:inherit;background:linear-gradient(90deg,#8B5CF6,#6366F1,#3B82F6);transition:width .6s ease}
.tg-checks{list-style:none;display:flex;flex-direction:column;gap:.55rem;text-align:left;margin:0 auto;max-width:280px}
.tg-checks li{display:flex;align-items:center;gap:.6rem;font-size:.92rem;color:var(--slate);opacity:.55;transition:opacity .3s}
.tg-checks li::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:none;box-sizing:border-box}
.tg-checks li.on{opacity:1;color:var(--ink)}
.tg-checks li.on::before{border-color:var(--accent);border-right-color:transparent;animation:tg-spin .8s linear infinite}
.tg-checks li.done{opacity:1;color:var(--ink)}
.tg-checks li.done::before{border:0;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.5 4.5 6.5 11.5 3 8l1-1 2.5 2.5 6-6z'/%3E%3C/svg%3E") center/12px no-repeat}
@keyframes tg-spin{to{transform:rotate(360deg)}}
.tg-stuck h2{font-size:1.25rem;letter-spacing:-.03em;margin-bottom:.4rem}
.tg-stuck p{color:var(--ink-soft);line-height:1.55;font-size:.95rem;margin-bottom:.9rem}
.tg-stuck-acts{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.8rem}
.tg-stuck-acts .hm-btn{justify-content:center}
.tg-stuck .tg-stuck-fine{font-size:.82rem;color:var(--slate)}
.tg-google{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.7rem 1rem;border-radius:12px;border:1px solid var(--line);background:var(--white);color:var(--ink);font-weight:600;font-size:.93rem;box-shadow:var(--shadow-sm)}
.tg-google:hover{border-color:#cfcabd}
.tg-loader-fine{margin-top:18px;font-size:.8rem;color:var(--slate)}

@media (max-width:900px){
  .tg-hero-in{grid-template-columns:1fr;gap:28px}
  .tg-steps{grid-template-columns:1fr}
}
@media (max-width:520px){
  .tg-points{grid-template-columns:1fr}
  .tg-view{height:62vh}
  .tg-band{padding:26px 20px}
  .tg-card-acts{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .tg-card,.tg-thumb iframe{transition:none}
  .tg-thumb::before,.tg-view::before,.tg-checks li.on::before{animation:none}
}