/* Templates page (ported from =HOME/templates.html). Everything is scoped to
   main.tpl-page so it cannot leak into the shared header, nav or footer. */
.tpl-page{--tp-muted:#8a8a8a;--tp-line:#e8e8e8;--tp-blue-pill:#c0defa;--tp-blue-panel:#e6f3ff;--tp-col:1140px;--tp-gap:clamp(64px,9vw,136px);--tp-r:20px;--tp-r-lg:28px}
.tpl-page .tp-col{width:min(100% - 32px,var(--tp-col));margin-inline:auto}
.tpl-page .tp-panel{width:auto;margin-inline:var(--shell);border-radius:var(--tp-r-lg)}
.tpl-page .tp-d1{font-family:var(--display);font-weight:500;font-size:clamp(36px,5vw,64px);line-height:1}
.tpl-page .tp-d2{font-family:var(--display);font-weight:500;font-size:clamp(32px,4.5vw,56px);line-height:1.04}
.tpl-page .tp-lede{font-size:clamp(16px,1.15vw,18px);line-height:1.56;color:#4a4a4a;max-width:70ch}
.tpl-page .tp-tag{display:inline-block;padding:7px 18px;border-radius:100px;font-weight:600;font-size:12px;line-height:1.33;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--tp-blue-pill);border:1px solid #87b6fd}
.tpl-page .tp-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:15px;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px;transition:gap .16s ease}
.tpl-page .tp-arrow:hover{gap:14px}

/* Hero */
.tpl-page .tp-hero{text-align:center;padding:clamp(40px,5vw,72px) 0 clamp(28px,3vw,44px)}
.tpl-page .tp-hero .tp-tag{margin-bottom:clamp(20px,2.4vw,28px)}
.tpl-page .tp-hero h1{max-width:16ch;margin-inline:auto}
.tpl-page .tp-hero .tp-lede{margin:clamp(18px,2vw,24px) auto 0;max-width:600px}

/* Template library: white panel hosting <builderall-templates-list> */
.tpl-page .tp-library{background:#fff;border:1px solid var(--tp-line);padding:clamp(24px,3vw,44px) clamp(16px,3vw,48px) clamp(40px,5vw,76px)}
.tpl-page .tp-library .tp-inner{width:min(100%,var(--tp-col));margin-inline:auto}
.tpl-page .tp-mount{position:relative;min-height:480px}
.tpl-page .tp-mount builderall-templates-list{display:block;width:100%}
.tpl-page .tp-loading{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.6vw,24px);align-content:start;transition:opacity .3s ease}
.tpl-page .tp-mount.is-ready .tp-loading{opacity:0;pointer-events:none}
.tpl-page .tp-loading span{aspect-ratio:1202/1366;border-radius:var(--tp-r);background:linear-gradient(100deg,var(--tp-blue-panel) 30%,#f4f9ff 50%,var(--tp-blue-panel) 70%);background-size:300% 100%;animation:tp-shimmer 1.6s ease-in-out infinite}
@keyframes tp-shimmer{from{background-position:100% 0}to{background-position:0 0}}
.tpl-page .tp-fallback{display:none;text-align:center;padding:48px 0;color:#5c5c5c}
.tpl-page .tp-mount.is-failed .tp-loading{display:none}
.tpl-page .tp-mount.is-failed .tp-fallback{display:block}
.tpl-page .tp-fallback .tp-arrow{margin-top:14px}

/* How it works */
.tpl-page .tp-steps{margin-top:var(--tp-gap)}
.tpl-page .tp-head{text-align:center;margin-bottom:clamp(32px,4vw,56px)}
.tpl-page .tp-head h2{width:min(100%,17ch);margin-inline:auto}
.tpl-page .tp-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);text-align:left}
.tpl-page .tp-facts article{border-top:1px solid var(--tp-line);padding-top:18px}
.tpl-page .tp-idx{display:block;font-weight:500;font-size:12px;line-height:1.33;letter-spacing:.12em;color:var(--tp-muted)}
.tpl-page .tp-facts h3{font-size:20px;line-height:1.4;margin:12px 0 6px}
.tpl-page .tp-facts p{font-size:15px;line-height:1.55;color:#5c5c5c;max-width:34ch}

/* Closing CTA */
.tpl-page .tp-cta{margin-top:var(--tp-gap);position:relative;overflow:hidden;isolation:isolate;clip-path:inset(0 round var(--tp-r-lg));background:url("/home-assets/images/rectangle-44-392-634.png") center/cover no-repeat,linear-gradient(180deg,#8fd0f2 0%,#7cc4ee 45%,#6fb6e8 100%);min-height:clamp(280px,30vw,440px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(40px,5vw,72px) 20px}
.tpl-page .tp-cta>*:not(.tp-bg){position:relative;z-index:1}
.tpl-page .tp-bg{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);object-fit:cover;z-index:0;pointer-events:none}
.tpl-page .tp-cta .tp-lede{margin-top:14px;color:var(--ink);font-family:var(--display);font-weight:500;font-size:clamp(22px,2.5vw,32px);line-height:1.19;max-width:24ch}
.tpl-page .tp-cta .btn{margin-top:26px}

@media (max-width:900px){
  .tpl-page .tp-facts{grid-template-columns:1fr;gap:0}
  .tpl-page .tp-facts article{padding:20px 0}
  .tpl-page .tp-facts p{max-width:none}
  .tpl-page .tp-loading{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .tpl-page .tp-loading{grid-template-columns:1fr}
  .tpl-page .tp-loading span:nth-child(n+2){display:none}
}
@media (prefers-reduced-motion:reduce){
  .tpl-page .tp-loading span{animation:none}
  .tpl-page .tp-bg{display:none}
}