/* digitalpratik.com home v2 (Digital Pratik's ask, 2 Nov 2026): the look of the Growth Engine Workshop page
   on the main site. Cream dotted paper, navy ink, the brand blue, and yellow as the new loud colour (buttons,
   highlighter, sticky notes). Comic stickers of him in many moods. Loaded AFTER assets/ks/style.css, so the
   topbar, header, menu and footer keep the site's own styles; only small touches on the header below.
   Light is the default, dark is one click away. */
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/caveat600-normal-latin.woff2') format('woff2')}

body.hv2{
  --hv-paper:#FBFAF6;--hv-cream:#F3F0E8;--hv-card:#FFFFFF;--hv-ink:#16182B;--hv-mute:#4F5263;
  --hv-blue:#2E6BD3;--hv-yel:#F6D234;--hv-yel-ink:#16182B;--hv-line:#16182B;--hv-shadow:#16182B;
  --hv-dot:rgba(19,22,40,.10);--hv-tape:rgba(246,210,52,.78);--hv-hand:'Caveat',cursive;
  --hv-navy:linear-gradient(135deg,#1E4A96 0%,#133875 52%,#0B2450 100%);
  background:var(--hv-paper);
}
html[data-theme="dark"] body.hv2{
  --hv-paper:#070707;--hv-cream:#0E1320;--hv-card:#141A2A;--hv-ink:#F8F8F8;--hv-mute:#B4B9C6;
  --hv-blue:#5E92E8;--hv-line:rgba(248,248,248,.82);--hv-shadow:#2E6BD3;
  --hv-dot:rgba(255,255,255,.07);--hv-tape:rgba(246,210,52,.62);
}

/* ---------- header touches: cream bar, yellow button. Logo and menu untouched ---------- */
body.hv2 header.site{background:var(--hv-paper);border-bottom:2px solid var(--hv-line)}
body.hv2 header.site .nav-cta .btn-primary{background:var(--hv-yel);color:#16182B;border:2px solid #16182B;box-shadow:3px 3px 0 #16182B;transition:transform .12s ease,box-shadow .12s ease}
body.hv2 header.site .nav-cta .btn-primary:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #16182B}
html[data-theme="dark"] body.hv2 header.site .nav-cta .btn-primary{box-shadow:3px 3px 0 #F8F8F8}

body.hv2 .call-float{background:var(--hv-yel);color:#16182B;border:2px solid #16182B;box-shadow:3px 3px 0 #16182B}
body.hv2 .call-float svg{stroke:#16182B}

/* ---------- base ---------- */
.hv{color:var(--hv-ink);font-family:'Plus Jakarta Sans',system-ui,sans-serif;overflow-x:clip}
.hv *{box-sizing:border-box}
.hv h1,.hv h2,.hv h3{color:var(--hv-ink);text-wrap:balance;margin:0}
.hv p,.hv li{text-wrap:pretty}
.hv h2{font-size:clamp(28px,3.4vw,44px);line-height:1.12;font-weight:800;letter-spacing:-.02em}
.hv h2 em{font-style:normal;color:var(--hv-blue);display:block}
.hv h3{font-size:19px;line-height:1.3;font-weight:800;letter-spacing:-.01em}
.hv p{color:var(--hv-mute);font-size:17px;line-height:1.6;margin:0}
.hv-dots{background-color:var(--hv-paper);background-image:radial-gradient(var(--hv-dot) 1.2px,transparent 1.2px);background-size:22px 22px}
.hv-cream{background:var(--hv-cream)}
.hv-sec{padding:96px 0;position:relative}
.hv-head{text-align:center;max-width:780px;margin:0 auto 52px;position:relative}
.hv-head p{margin-top:14px}
.hv-kick{display:inline-block;font-family:var(--hv-hand);font-weight:600;font-size:27px;line-height:1;color:var(--hv-blue);transform:rotate(-3deg);margin-bottom:10px}
.hv-kick-y{color:var(--hv-yel)}
.hv-center{text-align:center;margin-top:44px}

/* ---------- buttons: yellow with an ink border and a hard shadow ---------- */
.hv-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--hv-yel);color:var(--hv-yel-ink)!important;text-decoration:none;font-weight:800;font-size:17px;line-height:1.2;padding:16px 28px;border-radius:14px;border:2px solid #16182B;box-shadow:4px 4px 0 #16182B;transition:transform .12s ease,box-shadow .12s ease;cursor:pointer;font-family:inherit;text-align:center}
.hv-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #16182B}
.hv-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #16182B}
.hv-btn small{font-size:12.5px;font-weight:600;opacity:.82}
.hv-btn-ghost{background:var(--hv-card);color:var(--hv-ink)!important;border-color:var(--hv-line);box-shadow:4px 4px 0 var(--hv-shadow)}
.hv-btn-ghost:hover{box-shadow:6px 6px 0 var(--hv-shadow)}
.hv-btn-navy{background:#16182B;color:#fff!important;box-shadow:4px 4px 0 var(--hv-blue)}
html[data-theme="dark"] .hv-btn{box-shadow:4px 4px 0 #F8F8F8}
html[data-theme="dark"] .hv-btn:hover{box-shadow:6px 6px 0 #F8F8F8}
html[data-theme="dark"] .hv-btn-ghost{box-shadow:4px 4px 0 var(--hv-shadow)}
html[data-theme="dark"] .hv-btn-navy{background:#F8F8F8;color:#16182B!important;box-shadow:4px 4px 0 var(--hv-blue)}

/* ---------- shared bits ---------- */
.hv-card{position:relative;background:var(--hv-card);border:2px solid var(--hv-line);border-radius:16px;padding:26px 24px 24px;box-shadow:6px 6px 0 var(--hv-shadow);color:inherit;text-decoration:none;display:block;transition:transform .15s ease,box-shadow .15s ease}
a.hv-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--hv-shadow)}
.hv-card p{margin-top:8px;font-size:16px}
.hv-num{position:absolute;top:-17px;left:22px;width:36px;height:36px;border-radius:50%;background:var(--hv-yel);color:#16182B;border:2px solid #16182B;display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:15px;z-index:2}
.hv-g3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.hv-g2{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.hv-tape{position:absolute;top:-13px;left:50%;width:92px;height:26px;margin-left:-46px;background:var(--hv-tape);transform:rotate(-4deg);z-index:3;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.hv-polar{position:relative;margin:0;background:#fff;padding:12px 12px 0;border-radius:4px;box-shadow:0 18px 40px -18px rgba(19,22,40,.45),0 2px 6px rgba(19,22,40,.12)}
.hv-polar img{display:block;width:100%;height:auto;border-radius:2px}
.hv-polar figcaption{font-family:var(--hv-hand);font-weight:600;font-size:24px;color:#16182B;text-align:center;padding:10px 6px 12px;white-space:nowrap}
.hv-tilt-r{transform:rotate(2.2deg)}
.hv-tilt-l{transform:rotate(-2.4deg)}
.hv-note{font-family:var(--hv-hand);font-weight:600;color:var(--hv-blue);font-size:28px;line-height:1;margin:0;white-space:nowrap}
.hv-note svg{display:block;width:96px;height:48px;margin-top:4px}
.hv-sticky{display:inline-block;background:var(--hv-yel);color:#16182B;font-weight:800;font-size:15px;line-height:1.3;padding:12px 16px;border-radius:3px;box-shadow:0 10px 22px -12px rgba(19,22,40,.55);max-width:190px;text-align:center}
.hv-shot{position:relative;margin:0;background:var(--hv-card);border:2px solid var(--hv-line);border-radius:12px;overflow:visible;box-shadow:6px 6px 0 var(--hv-shadow)}
.hv-shot img{display:block;width:100%;height:auto;border-radius:0 0 10px 10px}
.hv-bar{display:flex;gap:6px;padding:9px 12px;border-bottom:2px solid var(--hv-line)}
.hv-bar i{width:10px;height:10px;border-radius:50%;background:var(--hv-line);opacity:.35}
.hv-bar i:first-child{background:#F26B5B;opacity:1}.hv-bar i:nth-child(2){background:var(--hv-yel);opacity:1}
.hv-shot figcaption{position:absolute;left:12px;bottom:12px;background:var(--hv-card);color:var(--hv-ink);border:1.5px solid var(--hv-line);border-radius:999px;padding:5px 12px;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}

/* the comic stickers of him */
.hv-toon{position:absolute;height:auto;pointer-events:none;filter:drop-shadow(0 10px 14px rgba(19,22,40,.22));z-index:4}
html[data-theme="dark"] .hv-toon{filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
@media (prefers-reduced-motion:no-preference){
  .hv-toon{animation:hvBob 5.5s ease-in-out infinite}
  @keyframes hvBob{0%,100%{translate:0 0}50%{translate:0 -7px}}
}

/* ---------- 1. hero ---------- */
.hv-hero{padding:64px 0 96px;position:relative}
.hv-hero-g{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center}
.hv-pill{display:inline-flex;align-items:center;gap:9px;background:var(--hv-card);border:2px solid var(--hv-line);color:var(--hv-ink);border-radius:999px;padding:7px 16px;font-size:13.5px;font-weight:800;box-shadow:3px 3px 0 var(--hv-shadow);white-space:nowrap}
.hv-pill i{width:9px;height:9px;border-radius:50%;background:var(--hv-blue)}
.hv-hero h1{font-size:clamp(38px,4.9vw,66px);line-height:1.06;font-weight:800;letter-spacing:-.03em;margin:22px 0 20px}
.hv-mark{display:inline;color:var(--hv-ink);background:linear-gradient(transparent 58%,var(--hv-yel) 58%,var(--hv-yel) 92%,transparent 92%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (min-width:761px){.hv-mark{white-space:nowrap}}
html[data-theme="dark"] .hv-mark{color:#16182B;background:var(--hv-yel);border-radius:6px;padding:0 .14em}
.hv-lead{font-size:19px!important;max-width:560px}
.hv-ctas{display:flex;flex-wrap:wrap;gap:18px;align-items:stretch;margin-top:30px}
.hv-proof{list-style:none;padding:0;margin:36px 0 0;display:flex;flex-wrap:wrap;gap:12px 30px}
.hv-proof li{display:flex;flex-direction:column}
.hv-proof b{font-size:28px;font-weight:800;color:var(--hv-ink);letter-spacing:-.02em;line-height:1.05}
.hv-proof span{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--hv-mute);margin-top:4px;white-space:nowrap}
.hv-hero-art{position:relative;padding:20px 30px 40px 70px}
.hv-hero-art .hv-polar{max-width:380px;margin-left:auto}
.hv-hero-art .hv-polar img{aspect-ratio:4/5;object-fit:cover;object-position:50% 28%}
.hv-toon-hero{width:190px;left:-30px;bottom:-40px}
.hv-note-hero{position:absolute;left:-20px;top:30px;transform:rotate(-6deg);font-size:32px}
.hv-note-hero svg{margin-left:30px}
.hv-hero-art .hv-sticky{position:absolute;right:-6px;top:-2px;z-index:5}

/* ---------- 2. problem ---------- */
.hv-toon-shock{width:120px;left:-150px;top:-70px}
#problem .hv-card{padding-top:32px}

/* ---------- 3. logos ---------- */
.hv-logos-sec{padding-top:80px;padding-bottom:80px}
.hv-logos{display:grid;grid-template-columns:repeat(8,1fr);gap:14px;background:var(--hv-card);border:2px solid var(--hv-line);border-radius:18px;padding:22px;box-shadow:6px 6px 0 var(--hv-shadow)}
.hv-logo{height:78px;border:1.5px dashed rgba(19,22,40,.18);border-radius:12px;display:grid;place-items:center;padding:12px;background:var(--hv-paper)}
.hv-logo img{max-width:100%;max-height:44px;width:auto;height:auto;object-fit:contain;filter:grayscale(1) contrast(1.1);opacity:.85;transition:filter .2s,opacity .2s}
.hv-logo:hover img{filter:none;opacity:1}
html[data-theme="dark"] .hv-logo{border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .hv-logo img{filter:grayscale(1) invert(1) brightness(1.6);opacity:.85}
.hv-logo-more{background:var(--hv-yel);border:2px solid #16182B}
.hv-logo-more span{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;color:#16182B;white-space:nowrap;letter-spacing:.04em;text-transform:uppercase}

/* ---------- 4. system ---------- */
.hv-sys{position:relative}
.hv-toon-point{width:112px;left:-122px;top:40px;transform:scaleX(-1)}
.hv-pic{padding:14px 14px 22px}
.hv-pic img{display:block;width:100%;height:auto;border-radius:10px;border:1.5px solid rgba(19,22,40,.15);margin-bottom:16px}
.hv-pic h3,.hv-pic p{padding:0 8px}
.hv-pic .hv-num{top:-17px;left:22px}
.hv-swipe-hint{display:none}

/* ---------- 5. cases ---------- */
.hv-toon-think{width:120px;right:-150px;top:-30px}
.hv-case h3{margin-top:30px}
.hv-case p{margin-top:8px}

/* ---------- 6. demo, the navy signature card ---------- */
.hv-navy{position:relative;background:var(--hv-navy);border-radius:24px;border:2px solid #16182B;box-shadow:8px 8px 0 var(--hv-yel);padding:60px 56px;display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.hv-navy h2,.hv-navy h2 em{color:#fff}
.hv-navy h2 em{color:#BFD3F7}
.hv-navy p{color:rgba(255,255,255,.86);margin:16px 0 28px}
.hv-navy .hv-shot{--hv-line:#16182B;--hv-card:#fff;--hv-ink:#16182B;box-shadow:6px 6px 0 rgba(0,0,0,.35)}
.hv-navy-shot{display:block;transition:transform .2s}
.hv-navy-shot:hover{transform:translateY(-4px) rotate(-.6deg)}
.hv-toon-idea{width:150px;right:-30px;top:-120px}

/* ---------- 7. storm ---------- */
.hv-toon-cele{width:170px;right:-210px;top:-30px}
.hv-storm{display:grid;grid-template-columns:repeat(8,1fr);gap:16px;padding:14px 4px 6px}
.hv-slide{background:#fff;padding:7px;border-radius:4px;box-shadow:0 14px 26px -14px rgba(19,22,40,.55),0 1px 3px rgba(19,22,40,.15);transition:transform .2s ease}
.hv-slide img{display:block;width:100%;height:auto;border-radius:2px}
.hv-slide:nth-child(odd){transform:rotate(-2.2deg)}
.hv-slide:nth-child(even){transform:rotate(1.8deg) translateY(10px)}
.hv-slide:hover{transform:rotate(0) scale(1.06);z-index:2;position:relative}

/* ---------- 8. websites, the live deck re-skinned ---------- */
.hv-sites-g{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.hv-sites-copy{position:relative}
.hv-sites-copy p{margin:16px 0 28px}
.hv-toon-surp{position:relative;display:block;width:120px;margin:34px 0 0 30px}
.hv-sites .sw-mini{color:var(--hv-ink);margin-right:6%}
.hv-sites .sw-mini .sw-card{background:var(--hv-card);border:2px solid var(--hv-line);box-shadow:6px 6px 0 var(--hv-shadow);-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:16px}
.hv-sites .sw-mini .sw-card img{border-radius:10px;border:1.5px solid rgba(19,22,40,.12)}
.hv-sites .sw-mini .sw-card.p1,.hv-sites .sw-mini .sw-card.p2{opacity:1}
.hv-sites .sw-mini figcaption b{color:var(--hv-ink)}
.hv-sites .sw-mini figcaption span{color:var(--hv-blue)}
.hv-sites .sw-mini figcaption i{border-color:var(--hv-blue)}

/* ---------- 9. who runs it ---------- */
.hv-op{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center;max-width:1040px;margin:0 auto}
.hv-op .hv-polar{max-width:360px;justify-self:center}
.hv-op-copy h2{margin-bottom:22px}
.hv-op-copy h2 em{display:inline}
.hv-lined{list-style:none;margin:0 0 30px;padding:18px 24px;background:var(--hv-card);border:2px solid var(--hv-line);border-radius:12px;box-shadow:6px 6px 0 var(--hv-shadow);background-image:repeating-linear-gradient(transparent 0 43px,rgba(46,107,211,.16) 43px 44px);background-position:0 14px}
.hv-lined li{font-size:17px;line-height:1.55;color:var(--hv-ink);padding:9px 0 9px 30px;position:relative}
.hv-lined li::before{content:"";position:absolute;left:2px;top:15px;width:14px;height:8px;border-left:3px solid var(--hv-blue);border-bottom:3px solid var(--hv-blue);transform:rotate(-45deg)}
.hv-talks{margin-top:80px}
.hv-talks .talks-a button{border:2px solid var(--hv-line);background:var(--hv-card);color:var(--hv-ink);box-shadow:3px 3px 0 var(--hv-shadow)}
.hv-talks .talks-d button.on{background:var(--hv-blue)}

/* ---------- 10. not for ---------- */
.hv-toon-cross{width:72px;left:-120px;top:-96px}
.hv-not .hv-card{display:flex;gap:18px;align-items:flex-start}
.hv-x{flex:none;width:36px;height:36px;border-radius:50%;background:#F26B5B;color:#fff;border:2px solid #16182B;display:grid;place-items:center;font-size:24px;line-height:1;font-weight:700}

/* ---------- 11. newsletter, the yellow sticky note ---------- */
.hv-nl{position:relative;max-width:900px;margin:0 auto;background:var(--hv-yel);color:#16182B;border:2px solid #16182B;border-radius:6px;box-shadow:8px 8px 0 #16182B;padding:48px 52px 44px 230px;transform:rotate(-.8deg)}
html[data-theme="dark"] .hv-nl{box-shadow:8px 8px 0 var(--hv-blue)}
.hv-nl .hv-kick{color:#16182B}
.hv-nl h2,.hv-nl h2 em{color:#16182B}
.hv-nl h2 em{display:inline;text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:6px;text-decoration-color:var(--hv-blue)}
html[data-theme="dark"] .hv-nl h2 em{text-decoration-color:#2E6BD3}
.hv-nl p{color:#2A2C3D;margin-top:10px}
.hv-toon-love{width:170px;left:30px;bottom:-30px}
.hv-form{margin-top:24px;position:relative}
.hv-form-row{display:flex;gap:12px;margin-bottom:14px}
.hv-form-row input{flex:1;min-width:0;font:inherit;font-size:16px;padding:15px 16px;border:2px solid #16182B;border-radius:12px;background:#fff;color:#16182B}
.hv-form-row input:focus{outline:3px solid var(--hv-blue);outline-offset:1px}
.hv-nl .nl-note{color:#2A2C3D;font-size:14px;margin-top:12px}
.hv-nl .nl-msg{color:#16182B;font-weight:700}
.hv-form.ok .hv-btn{display:none}

/* ---------- 12. apply ---------- */
.hv-apply{position:relative;overflow:hidden;text-align:center;border-radius:24px;border:2px solid #16182B;box-shadow:8px 8px 0 var(--hv-yel);padding:84px 32px;background:#0B2450}
.hv-apply-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;opacity:.42}
.hv-apply::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,36,80,.55),rgba(11,36,80,.88));z-index:1}
.hv-apply>*:not(.hv-apply-bg){position:relative;z-index:2}
.hv-apply h2{color:#fff;font-size:clamp(32px,4vw,52px)}
.hv-apply p{color:rgba(255,255,255,.88);max-width:620px;margin:16px auto 32px;font-size:18px}

/* ---------- laptops: comics that sit outside the text column need the room ---------- */
@media (max-width:1280px){
  .hv-toon-shock{left:-120px;width:110px}
  .hv-toon-point{left:-120px;width:120px}
  .hv-toon-cele{right:-150px;width:140px}
  .hv-toon-think{right:-110px;width:100px}
  .hv-toon-cross{left:-90px;width:66px}
}
@media (max-width:1120px){
  .hv-logos{grid-template-columns:repeat(4,1fr)}
  .hv-storm{grid-template-columns:repeat(4,1fr);row-gap:30px}
  .hv-hero-g,.hv-sites-g{gap:36px}
  .hv-navy{grid-template-columns:1fr;padding:56px 44px}
  .hv-toon-point{display:none}
}
/* tablets and phones: comics move into the flow, small, above the heading */
@media (max-width:1020px){
  .hv-sec{padding:76px 0}
  .hv-hero{padding:40px 0 70px}
  .hv-hero-g{grid-template-columns:1fr}
  .hv-hero-art{max-width:520px;margin:10px auto 0;padding:20px 20px 40px 90px}
  .hv-hero-art .hv-polar{max-width:340px}
  .hv-head .hv-toon{position:relative;left:auto;right:auto;top:auto;display:block;margin:0 auto 12px;width:110px}
  .hv-head .hv-toon-cross{width:72px}
  .hv-toon-cele{width:150px!important}
  .hv-g3{grid-template-columns:1fr 1fr}
  .hv-sites-g{grid-template-columns:1fr}
  .hv-op{grid-template-columns:1fr;gap:44px}
  .hv-nl{padding:44px 36px 40px 200px}
  .hv-toon-love{width:140px;left:24px}
}
@media (max-width:760px){
  .hv-sec{padding:64px 0}
  .hv-head{margin-bottom:40px}
  .hv-h1,.hv-hero h1{font-size:clamp(34px,9.4vw,46px)}
  .hv-lead{font-size:17.5px!important}
  .hv-ctas{flex-direction:column;align-items:stretch}
  .hv-btn{width:100%}
  .hv-proof{gap:14px 22px}
  .hv-proof b{font-size:24px}
  .hv-hero-art{padding:16px 6px 40px 74px}
  .hv-toon-hero{width:120px;left:-6px;bottom:-26px}
  .hv-note-hero{font-size:23px;left:0;top:14px}
  .hv-note-hero svg{width:74px;height:40px;margin-left:16px}
  .hv-hero-art .hv-sticky{font-size:13px;max-width:150px;padding:9px 12px;right:-4px;top:-10px}
  .hv-g2,.hv-g3{grid-template-columns:1fr;gap:34px}
  .hv-logos{grid-template-columns:repeat(3,1fr);gap:10px;padding:14px}
  .hv-logo{height:64px;padding:10px}
  .hv-logo img{max-height:34px}
  .hv-logo-more{grid-column:1/-1}
  /* swipe rows on phones */
  .hv-swipe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:20px;padding:22px 4px 18px;margin:0 -20px;padding-left:20px;padding-right:20px;scrollbar-width:none}
  .hv-swipe::-webkit-scrollbar{display:none}
  .hv-swipe>*{flex:0 0 82%;scroll-snap-align:center}
  .hv-storm.hv-swipe>*{flex-basis:58%}
  .hv-swipe-hint{display:block;text-align:center;font-family:var(--hv-hand);font-size:22px;color:var(--hv-blue);margin-top:6px}
  .hv-navy{padding:44px 24px 30px;border-radius:20px}
  .hv-toon-idea{width:96px;right:-6px;top:-70px}
  .hv-shot figcaption{font-size:10px;left:8px;bottom:8px;padding:4px 9px}
  .hv-nl{padding:150px 22px 32px;transform:none;text-align:left}
  .hv-toon-love{width:110px;left:50%;margin-left:-55px;top:-46px;bottom:auto}
  .hv-form-row{flex-direction:column}
  .hv-apply{padding:60px 22px}
  .hv-talks{margin-top:56px}
}

/* ===================== v2 positioning (2 Nov 2026): grow and scale, Request Consultation ===================== */
/* hero: one centred question, his comic on the left, his real photo on the right */
.hv-hero{padding:56px 0 70px}
.hv-hero-c{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1.8fr) minmax(0,.5fr);gap:24px;align-items:center}
.hv-hero-mid{text-align:center}
.hv-hero-mid h1{font-size:clamp(38px,4.3vw,62px);line-height:1.04;margin:22px auto 20px;max-width:760px}
.hv-hero-mid .hv-lead{margin:0 auto}
.hv-hero-mid .hv-ctas{justify-content:center}
.hv-hero-side{position:relative}
.hv-hero-l{min-height:540px}
.hv-hero-l .hv-toon-hero{position:absolute;width:180px;left:50%;margin-left:-90px;bottom:0;top:auto}
.hv-hero-l .hv-note-hero{position:absolute;left:0;right:auto;top:0;font-size:26px;transform:rotate(-5deg)}
.hv .hv-after{margin:44px auto 0}
@media (min-width:761px){.hv-nw{white-space:nowrap}}
.hv-hero-l .hv-note-hero svg{margin-left:70px;width:70px;height:40px}
.hv-hero-r .hv-polar{max-width:240px;margin:0 auto}
.hv-hero-r .hv-polar img{aspect-ratio:4/5;object-fit:cover;object-position:50% 28%}
.hv-hero-r .hv-polar figcaption{font-size:clamp(16px,1.6vw,22px)}
.hv-btn-xl{font-size:20px;padding:20px 40px;border-radius:16px}
.hv-mark{white-space:nowrap}
.hv-stats{list-style:none;padding:26px 10px;margin:52px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:980px;background:var(--hv-card);border:2px solid var(--hv-line);border-radius:18px;box-shadow:6px 6px 0 var(--hv-shadow)}
.hv-stats li{text-align:center;border-left:2px dashed rgba(127,130,150,.35);padding:0 8px}
.hv-stats li:first-child{border-left:0}
.hv-stats b{display:block;font-size:clamp(28px,3vw,40px);font-weight:800;letter-spacing:-.02em;color:var(--hv-ink);line-height:1.05}
.hv-stats span{display:block;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--hv-mute);margin-top:6px}

/* small coloured label inside cards */
.hv-tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hv-blue);margin-bottom:8px}

/* the 3 places */
.hv-stuck{padding-top:34px}
.hv-stuck ul{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:2px dashed rgba(127,130,150,.35)}
.hv-stuck li{position:relative;padding:5px 0 5px 22px;font-size:15.5px;line-height:1.45;color:var(--hv-mute)}
.hv-stuck li::before{content:"";position:absolute;left:2px;top:12px;width:9px;height:9px;border-radius:50%;background:#F26B5B}
.hv-after{text-align:center;max-width:640px;margin:44px auto 0;font-size:19px!important;font-weight:700;color:var(--hv-ink)!important}

/* the engine */
.hv-eng .hv-tag,.hv-eng h3,.hv-eng p,.hv-eng .hv-chips{padding:0 8px}
.hv-eng img{aspect-ratio:1024/688;object-fit:cover}
.hv-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hv-chips a{display:inline-block;font-size:13.5px;font-weight:700;color:var(--hv-ink);text-decoration:none;background:var(--hv-paper);border:1.5px solid var(--hv-line);border-radius:999px;padding:6px 12px;box-shadow:2px 2px 0 var(--hv-shadow);transition:transform .12s,box-shadow .12s;white-space:nowrap}
.hv-chips a:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--hv-shadow);background:var(--hv-yel);color:#16182B}

/* demo card now sits inside the proof section */
#demo.hv-navy{margin-top:110px}

/* ways to work together */
.hv-toon-love{width:130px;right:-170px;left:auto;top:-40px;bottom:auto}
.hv-way{display:flex;flex-direction:column;padding:28px 26px}
.hv-way p{flex:1}
.hv-go{display:inline-block;margin-top:20px;font-weight:800;font-size:15.5px;color:var(--hv-ink);border-bottom:3px solid var(--hv-yel);align-self:flex-start;padding-bottom:2px}
.hv-way-main{background:var(--hv-yel);border-color:#16182B;box-shadow:6px 6px 0 #16182B}
.hv-way-main h3,.hv-way-main p,.hv-way-main .hv-go,.hv-way-main .hv-tag{color:#16182B}
.hv-way-main .hv-go{border-bottom-color:#16182B}
html[data-theme="dark"] .hv-way-main{box-shadow:6px 6px 0 #F8F8F8}

/* faq */
.hv-faq{max-width:820px;margin:0 auto;display:grid;gap:14px}
.hv-faq details{background:var(--hv-card);border:2px solid var(--hv-line);border-radius:14px;box-shadow:4px 4px 0 var(--hv-shadow);padding:0}
.hv-faq summary{list-style:none;cursor:pointer;padding:18px 56px 18px 22px;font-weight:800;font-size:17px;color:var(--hv-ink);position:relative}
.hv-faq summary::-webkit-details-marker{display:none}
.hv-faq summary::after{content:"+";position:absolute;right:18px;top:50%;margin-top:-15px;width:30px;height:30px;border-radius:50%;background:var(--hv-yel);color:#16182B;border:2px solid #16182B;display:grid;place-items:center;font-size:18px;line-height:1;font-weight:800}
.hv-faq details[open] summary::after{content:"\2212"}
.hv-faq details p{padding:0 22px 20px;font-size:16px}

/* newsletter comic is the standing pose now */
.hv-toon-nl{width:120px;left:50px;bottom:-30px}

/* v2 responsive */
@media (max-width:1280px){
  .hv-toon-love{right:-130px;width:110px}
}
@media (max-width:1120px){
  .hv-hero-c{grid-template-columns:minmax(0,.5fr) minmax(0,1.8fr) minmax(0,.5fr);gap:16px}
  .hv-hero-l .hv-toon-hero{width:150px;margin-left:-75px}
  .hv-hero-l .hv-note-hero{font-size:22px}
}
@media (max-width:1020px){
  .hv-hero-c{grid-template-columns:1fr 1fr;gap:20px}
  .hv-hero-mid{grid-column:1/-1;grid-row:1}
  .hv-hero-l{min-height:380px;grid-row:2}
  .hv-hero-r{grid-row:2}
  .hv-hero-l .hv-toon-hero{width:140px;margin-left:-70px}
  .hv-hero-r .hv-polar{max-width:230px}
  .hv-stats{grid-template-columns:repeat(2,1fr);row-gap:22px}
  .hv-stats li:nth-child(3){border-left:0}
  .hv-head .hv-toon-love{width:110px}
}
@media (max-width:760px){
  .hv-hero{padding:34px 0 56px}
  /* THE HOOK WRAPS THE SAME ON EVERY PHONE (his ask, 6 Nov 2026, iPhone 17 Pro Max showed "your" alone on a line):
     line 1 "Do you want to", line 2 the yellow "grow and scale your", line 3 "service business?". Explicit lines,
     and the type is sized so line 2 always fits the width; above 760px the desktop rule (hv-nw) is untouched. */
  .hv-hero-mid h1{font-size:clamp(26px,8.8vw,46px)}
  .hv-hero-mid h1 .hv-l1,.hv-hero-mid h1 .hv-l3{display:block}
  .hv-hero-mid h1 .hv-mark{white-space:nowrap}
  .hv-mark{white-space:normal}
  .hv-btn-xl{font-size:18px;padding:18px 22px}
  .hv-hero-l{min-height:330px}
  .hv-hero-l .hv-toon-hero{width:110px;margin-left:-55px;bottom:0}
  .hv-hero-l .hv-note-hero{font-size:18px;left:-4px;top:0}
  .hv-hero-l .hv-note-hero svg{width:50px;height:28px;margin-left:46px}
  .hv-hero-r .hv-polar{max-width:170px;padding:8px 8px 0}
  .hv-hero-r .hv-polar figcaption{font-size:17px;padding:6px 2px 8px}
  .hv-stats{margin-top:40px;padding:20px 8px}
  .hv-stats span{font-size:10.5px}
  #demo.hv-navy{margin-top:90px}
  .hv-faq summary{font-size:16px;padding:16px 52px 16px 18px}
  .hv-toon-nl{width:84px;left:50%;margin-left:-42px;top:-56px;bottom:auto}
  .hv-nl{padding-top:120px}
}

/* the 3 big words (his ask, 2 Nov 2026): a comic speech bubble on each card, and the three in a row under the heading */
.hv-stuck{padding-top:44px}
.hv-bub{position:absolute;top:-22px;right:18px;z-index:3;background:#16182B;color:#fff;font-weight:800;font-size:15px;letter-spacing:.02em;line-height:1;padding:10px 16px 11px;border-radius:14px;border:2px solid #16182B;box-shadow:3px 3px 0 var(--hv-yel);white-space:nowrap;transform:rotate(-2deg)}
.hv-bub::after{content:"";position:absolute;left:18px;bottom:-10px;width:14px;height:14px;background:#16182B;transform:skewX(-28deg) rotate(0deg);clip-path:polygon(0 0,100% 0,0 100%)}
.hv-stuck:nth-child(2) .hv-bub{transform:rotate(1.5deg)}
html[data-theme="dark"] .hv-bub{background:var(--hv-yel);color:#16182B;box-shadow:3px 3px 0 #F8F8F8}
html[data-theme="dark"] .hv-bub::after{background:var(--hv-yel)}
.hv .hv-bub-line{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 10px;margin-top:20px}
.hv-bw{display:inline-block;background:var(--hv-yel);color:#16182B;font-weight:800;font-size:16px;padding:7px 14px;border-radius:999px;border:2px solid #16182B;box-shadow:2px 2px 0 #16182B;white-space:nowrap}
.hv-bub-line span{flex-basis:100%;text-align:center;color:var(--hv-mute);font-size:17px;margin-top:4px}
@media (max-width:760px){
  .hv-bub{font-size:14px;padding:9px 13px 10px;right:14px}
  .hv-bw{font-size:14.5px;padding:6px 12px}
}
/* a long chip may wrap on a narrow phone; its last two words are glued so none hangs alone */
.hv-chips a.hv-chip-long{white-space:normal;text-align:left;line-height:1.3}

/* the "who runs it" list: plain rows with a divider, the tick sits on the first line of each row (his note: the ruled lines did not line up) */
.hv-lined{background-image:none;padding:8px 24px}
.hv-lined li{padding:14px 0 14px 32px;border-bottom:1.5px dashed rgba(127,130,150,.35);line-height:1.5}
.hv-lined li:last-child{border-bottom:0}
.hv-lined li::before{top:calc(14px + .75em - 7px);left:3px}

/* STORM board: 12 carousel styles, each with a handwritten label (his ask, 2 Nov 2026) */
.hv-storm{grid-template-columns:repeat(6,1fr);gap:26px 18px}
.hv-slide{margin:0;padding:7px 7px 0}
.hv-slide figcaption{font-family:var(--hv-hand);font-weight:600;font-size:20px;color:#16182B;text-align:center;padding:6px 2px 8px;white-space:nowrap;line-height:1}
.hv-slide:nth-child(3n){transform:rotate(-1deg) translateY(4px)}
@media (max-width:1120px){.hv-storm{grid-template-columns:repeat(4,1fr)}}
@media (max-width:760px){.hv-storm.hv-swipe>*{flex-basis:56%}.hv-slide figcaption{font-size:18px}}

/* the navy strip above the header: smaller words (his ask, 3 Nov), same as src/skin.css */
body.hv2 .topbar{font-size:14.5px}
body.hv2 .topbar svg{width:13px;height:13px}
/* STORM board with reels and GIFs (his ask, 3 Nov 2026: more variety) */
.hv-slide{position:relative}
.hv-slide video{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:2px;background:#16182B}
.hv-kind{position:absolute;top:-10px;left:-8px;z-index:1;display:inline-flex;align-items:center;gap:4px;font:800 10.5px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px 4px 8px;border-radius:999px;background:var(--hv-yel);color:#16182B;border:2px solid #16182B;box-shadow:2px 2px 0 #16182B;white-space:nowrap}
.hv-kind svg{width:11px;height:11px}
@media (max-width:1120px) and (min-width:761px){.hv-storm{display:flex;flex-wrap:wrap;justify-content:center}.hv-storm>*{width:calc((100% - 54px)/4)}}
/* the hero photo caption is longer now ("digitalpratik, on a client call"): it sizes to the frame so it never spills out */
.hv-hero-r .hv-polar{container-type:inline-size}
.hv-hero-r .hv-polar figcaption{font-size:min(22px,10cqi);padding-left:4px;padding-right:4px}


/* ---------- more room at the sides on phones (his ask, 3 Nov 2026: "the text on the mobile looks way too much on the
   left"). The template kept 4% each side, about 16px on a phone; now 24px. Swipe rows still reach the screen edge ---------- */
@media(max-width:720px){
  body.hv2 .wrap{width:calc(100% - 48px)}
  body.hv2 .swipe-m,body.hv2 .sw-chips{margin-inline:-24px;padding-inline:24px;scroll-padding-inline:24px}
  body.hv2 .hv-swipe{margin:0 -24px;padding-left:24px;padding-right:24px}
}

/* the header on the smallest phones (found by the 3 Nov 2026 check after the wider sides): logo, theme and menu
   buttons need 303px, so the spacing tightens under 360px and under 340px the header alone keeps 16px sides */
@media(max-width:360px){body.hv2 header.site .wrap{gap:10px}body.hv2 header.site .nav-cta{gap:6px}}
@media(max-width:340px){body.hv2 header.site .wrap{width:calc(100% - 32px)}}