/* Header box (Nov 1, 2026): the Apps page header, shared. Add class="ahero" to a page's top section (usually .top).
   Inside it: an optional .kick line, h1, one paragraph, then any buttons (.acts or links), a search box (.sbox) and
   counts (.stats). A picture (img.thumb) moves to the right as a tilted card; a .wall of icon tiles does the same.
   Doubled class names so these win over each page's own .top rules. */
.ahero.ahero{position:relative;overflow:hidden;display:block;text-align:left;margin:22px 0 28px;border-radius:28px;padding:52px 48px 42px;
  background:radial-gradient(1200px 400px at 85% -10%,#DCE7FF 0,rgba(220,231,255,0) 60%),radial-gradient(900px 380px at 0% 110%,#E7F6EC 0,rgba(231,246,236,0) 55%),#F6F7F9;box-sizing:border-box}
.ahero.ahero .tl{display:block}
.ahero.ahero .tl>div,.ahero.ahero>div:not(.acts):not(.stats):not(.wall):not(.sbox){max-width:720px}
.ahero.ahero h1{margin:0 0 12px;font-size:clamp(38px,5.6vw,64px);line-height:1.03;letter-spacing:-.04em;font-weight:800;color:#14161A;font-family:Inter,system-ui,sans-serif}
.ahero.ahero p{margin:0;color:#4A505C;font-size:19px;line-height:1.5;max-width:640px}
.ahero.ahero .kick{margin:0 0 10px;color:#5B6270;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none}
.ahero.ahero .acts,.ahero.ahero>a,.ahero.ahero>.btns{margin-top:24px}
.ahero.ahero .acts{display:flex;gap:10px;flex-wrap:wrap}
.ahero.ahero>a{display:inline-flex;margin-right:8px}
.ahero.ahero .sbox{max-width:720px;margin-top:26px;display:flex;align-items:center;gap:8px;border:1px solid #D7DBE3;border-radius:999px;padding:6px 6px 6px 22px;background:#fff;box-shadow:0 12px 34px rgba(20,22,26,.08)}
.ahero.ahero .sbox input{flex:1;border:0!important;outline:none;font:inherit;font-size:17px;padding:12px 0!important;min-width:0;box-shadow:none!important;background:none}
.ahero.ahero .sbox button{border:0;border-radius:999px;background:#14161A;color:#fff;font:600 15px Inter,Roboto,sans-serif;padding:13px 24px;cursor:pointer}
.ahero.ahero .stats{display:flex;gap:28px;flex-wrap:wrap;margin:26px 0 0;font-size:14.5px;color:#4A505C}
.ahero.ahero .stats b{display:block;font-size:26px;color:#14161A;letter-spacing:-.02em}
.ahero.ahero .stats a{color:inherit;text-decoration:none}.ahero.ahero .stats a:hover b{color:#2F5BEA}
/* The picture: a tilted card on the right */
.ahero.ahero:has(.thumb){min-height:320px}
.ahero.ahero .thumb{position:absolute;right:56px;top:50%;width:230px;height:230px;margin:0;border-radius:30px;object-fit:cover;transform:translateY(-50%) rotate(-5deg);box-shadow:0 18px 40px rgba(20,22,26,.16);border:6px solid #fff;background:#fff}
.ahero.ahero:has(.thumb) .tl>div,.ahero.ahero:has(.thumb)>div:not(.acts):not(.stats):not(.wall){max-width:calc(100% - 320px)}
/* Icon tiles: a tilted grid on the right */
.ahero.ahero .wall{position:absolute;right:40px;top:44px;display:grid;grid-template-columns:repeat(4,72px);gap:14px;transform:rotate(-6deg)}
.ahero.ahero .wall>*{width:72px;height:72px;border-radius:20px;background:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(20,22,26,.10);font-size:32px;text-decoration:none;color:#14161A;transition:transform .15s}
.ahero.ahero .wall a:hover{transform:translateY(-3px) scale(1.04)}
@media(max-width:1300px){.ahero.ahero .wall{display:none}}
@media(max-width:1000px){.ahero.ahero:has(.thumb){min-height:0}.ahero.ahero .thumb{display:none}.ahero.ahero:has(.thumb) .tl>div,.ahero.ahero:has(.thumb)>div:not(.acts):not(.stats):not(.wall){max-width:720px}}
@media(max-width:860px){.ahero.ahero{padding:38px 26px 30px}}
@media(max-width:600px){.ahero.ahero{border-radius:22px;margin-top:14px;padding:30px 20px 24px}.ahero.ahero p{font-size:17px}.ahero.ahero .stats{gap:18px}.ahero.ahero .stats b{font-size:22px}.ahero.ahero .sbox button{padding:12px 18px}}
/* Buttons in the box (template pages and others): one dark main button, white outlined others. */
.ahero.ahero .acts a{text-decoration:none}
.ahero.ahero .acts .tps-go,.ahero.ahero .acts .tp-go{display:inline-flex;align-items:center;background:#14161A!important;color:#fff!important;border:0;border-radius:999px;padding:11px 20px;font:600 15px Inter,system-ui,sans-serif;margin:0}
.ahero.ahero .acts .tps-lk{display:inline-flex;align-items:center;background:#fff;border:1px solid #D7DBE3;color:#14161A!important;border-radius:999px;padding:11px 18px;font:600 15px Inter,system-ui,sans-serif}
.ahero.ahero .acts .tps-lk:hover{border-color:#2F5BEA}
.ahero.ahero .tp-st{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 0!important}
.ahero.ahero .tp-st .tp-chip{border:1px solid #E3E6EC;border-radius:999px;padding:6px 13px;font:500 14px Inter,system-ui,sans-serif;background:#fff;color:#5B6270;text-decoration:none}
/* The details card under a template page's box */
.tp-det{margin-top:0}.tp-det .tp-hero{align-items:start}.tp-det .tp-ih:first-child{margin-top:0}.tp-det .tp-fb{margin-top:0}
@media(max-width:1000px){.tp-det .tp-hero{grid-template-columns:1fr!important}.tp-det .tp-chk{border-left:0!important;padding-left:0!important}}
/* A logo on the tilted card: shown whole on white, not cropped. */
.ahero.ahero .thumb.logo{object-fit:contain;padding:34px;box-sizing:border-box}