/* ==========================================================
   Templates gallery (/demos/)
   ========================================================== */
body.demos{background:var(--cream)}
.dh{position:relative;overflow:hidden;padding-block:clamp(48px,7vw,96px) clamp(50px,7vw,90px);
  background:radial-gradient(50% 55% at 92% 6%,rgba(255,219,224,.95),transparent 72%),radial-gradient(46% 46% at 4% 92%,rgba(185,225,229,.95),transparent 72%),radial-gradient(40% 40% at 64% 100%,rgba(255,244,179,.9),transparent 72%),var(--cream)}
.dh__in{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:26px;max-width:880px}
.dh h1{font-size:clamp(3rem,7.6vw,6.6rem)}
.dh h1 em{background:linear-gradient(transparent 60%,var(--pink-d) 60% 92%,transparent 92%);padding-inline:.05em;text-shadow:none}
.dh .chips{display:flex;flex-wrap:wrap;gap:10px}
.dh .chip{border:1.5px dashed var(--ink);border-radius:999px;padding:.5em 1.1em;font-size:.9rem;font-weight:500;background:var(--cream)}

/* gallery */
.tpls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,34px)}
.tpl{background:var(--bg);border:1.5px solid var(--ink);border-radius:34px;padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:20px;transition:transform .4s var(--ease),box-shadow .4s}
.tpl:hover{transform:translateY(-6px);box-shadow:9px 11px 0 -1px var(--ink)}
.tpl__mock{position:relative;aspect-ratio:16/11.5}
.tpl .win{position:absolute;left:0;top:0;width:84%;border:1.5px solid var(--ink);border-radius:16px;background:#fff;box-shadow:7px 8px 0 -2px var(--ink);overflow:hidden}
.tpl .win__bar{height:26px;display:flex;align-items:center;gap:5px;padding:0 10px;border-bottom:1.5px solid var(--ink);background:var(--butter)}
.tpl .win__bar i{width:8px;height:8px;border-radius:50%;background:var(--pink-d);border:1px solid var(--ink)}
.tpl .win__bar span{margin-left:8px;font-family:var(--mono);font-size:.55rem;letter-spacing:.04em;background:#fff;border-radius:99px;padding:1px 12px;border:1px solid rgba(44,43,43,.3)}
.tpl .win__view{position:relative;overflow:hidden;background:#fff;aspect-ratio:16/10}
.tpl .win__view iframe,.tpl .phone .win__view iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;pointer-events:none}
.tpl .phone{position:absolute;right:0;bottom:0;width:27%;border:2px solid var(--ink);border-radius:22px;background:#fff;box-shadow:6px 8px 0 -2px var(--ink);overflow:hidden;transform:rotate(4deg)}
.tpl .phone .win__view{aspect-ratio:390/800}
.tpl__for{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.tpl h3{font-family:var(--display);font-weight:600;font-size:clamp(2rem,3vw,2.7rem);line-height:1;letter-spacing:-.02em;text-transform:lowercase}
.tpl__txt{display:flex;flex-direction:column;gap:10px}
.tpl__txt p{color:rgba(44,43,43,.85);font-size:.98rem;line-height:1.5}
.tpl .chips{display:flex;flex-wrap:wrap;gap:8px}
.tpl .chip{border:1.5px dashed var(--ink);border-radius:999px;padding:.35em .9em;font-size:.8rem;font-weight:500;background:rgba(255,255,255,.55)}
.tpl__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.tpl__cta .btn{font-size:.85rem;padding:.75em 1.2em}
@media (max-width:900px){.tpls{grid-template-columns:1fr}}

/* how it works */
.hw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hw>div{border:1.5px solid var(--ink);border-radius:28px;padding:28px;background:var(--cream);display:flex;flex-direction:column;gap:12px}
.hw b{font-family:var(--display);font-style:italic;font-size:2.6rem;line-height:1}
.hw h3{font-family:var(--display);font-weight:600;font-size:1.7rem;line-height:1.05;text-transform:lowercase}
.hw p{color:rgba(44,43,43,.85);font-size:.98rem}
@media (max-width:820px){.hw{grid-template-columns:1fr}}

/* wide card (small-business template) */
.tpl--wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:clamp(20px,3vw,44px)}
.tpl--wide .tpl__mock{flex:1.15;min-width:0}
.tpl--wide .tpl__side{flex:.85;display:flex;flex-direction:column;gap:20px;min-width:0}
@media (max-width:900px){.tpl--wide{flex-direction:column;align-items:stretch}.tpl--wide .tpl__mock,.tpl--wide .tpl__side{flex:none;width:100%}}