/* Klipspot v3 redesign layer (loaded after site.css) */
:root{--t:200ms;--ease:cubic-bezier(.2,.7,.2,1)}
h1,h2,h3{color:var(--ink)}
.dark h1,.dark h2,.dark h3,.film-band h2,.film-band h3{color:#fff}
/* text visible immediately: neutralise scroll reveals */
.rv,.rv.in,.stagger>*{opacity:1!important;transform:none!important;transition:none}
section{padding:56px 0}
@media (max-width:760px){section{padding:40px 0}}
/* buttons: quick press feedback */
.btn{transition:background-color var(--t) var(--ease),color var(--t) var(--ease),transform 150ms var(--ease),box-shadow var(--t) var(--ease)}
.btn:active{transform:scale(.97)}
.btn-coral{background:var(--coral);color:var(--ink);box-shadow:0 2px 0 var(--coral-dark)}
.btn-coral:hover{background:#f26a59;color:var(--ink)}
.btn-coral:active{box-shadow:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
.btn-wa svg{width:20px;height:20px;fill:currentColor;flex:none}
/* HERO */
.v3-hero{background:var(--paper);padding:20px 0 40px}
.v3-hero .shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:44px;align-items:center}
.v3-hero h1{font-size:clamp(1.85rem,4.6vw,3.3rem);margin:0 0 .35em;color:var(--ink)}
.v3-hero .price-line{font-size:1.08rem;color:var(--ink);margin:0 0 18px;font-weight:600}
.v3-hero .price-line span{color:var(--slate);font-weight:400}
.v3-hero .sub{color:var(--slate);margin:14px 0 0;font-size:.95rem}
.v3-hero .sub a{font-weight:700}
.film{position:relative;margin:0}
.film .yt{border-radius:16px;box-shadow:0 24px 50px -28px rgba(23,27,26,.6);transform:none}
.film .yt:hover{transform:none}
.film .yt:after{width:84px;height:60px;margin:-30px 0 0 -42px;background-size:34px}
.film figcaption{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;justify-content:space-between;margin-top:10px;font-size:.92rem;color:var(--slate)}
.film figcaption strong{color:var(--ink)}
.film-tag{position:absolute;left:12px;top:12px;z-index:2;background:rgba(23,27,26,.82);color:#fff;font:700 .74rem/1 "Space Mono",monospace;letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border-radius:6px;pointer-events:none}
@media (max-width:860px){
 .v3-hero{padding:14px 0 28px}
 .v3-hero .shell{grid-template-columns:1fr;gap:16px}
 .v3-hero .eyebrow{display:none}
 .v3-hero .price-line{margin-bottom:12px;font-size:1rem}
 .v3-hero .btn-coral{width:100%;justify-content:center}
 .film figcaption{font-size:.85rem}
}
@media (max-width:360px){.v3-hero h1{font-size:1.65rem}.v3-hero .price-line{font-size:.92rem}}
/* film band */
.film-band{background:var(--ink);color:#e8ecea}
.film-band p,.film-band .lead{color:#c6cdca}
.film-band .eyebrow{color:var(--coral)}
.film-band a:not(.btn){color:#8fd6d4}
/* website preview: light surface */
.preview{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.feat{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:36px;align-items:center}
@media (max-width:860px){.feat{grid-template-columns:1fr;gap:20px}}
.switch{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px;margin:0 0 14px}
.switch button,.filters button{font:700 .95rem "DM Sans",system-ui,sans-serif;border:0;background:transparent;color:var(--ink);padding:9px 18px;border-radius:999px;cursor:pointer;min-height:40px;transition:background-color var(--t) var(--ease),color var(--t) var(--ease),transform 150ms var(--ease)}
.switch button:active,.filters button:active{transform:scale(.96)}
.switch button[aria-pressed=true],.filters button[aria-pressed=true]{background:var(--ink);color:#fff}
.stage{background:var(--paper);border-radius:12px;overflow:hidden;display:grid;align-items:start;justify-items:center}
.stage img{grid-area:1/1;transition:opacity var(--t) var(--ease),visibility var(--t)}
.stage .s-desktop{width:100%;height:auto}
.stage .s-phone{width:min(250px,72%);height:auto;margin:16px auto;border:8px solid var(--ink);border-radius:26px}
.stage.is-desktop .s-phone,.stage.is-phone .s-desktop{opacity:0;visibility:hidden}
.shot-note{font-size:.85rem;color:var(--slate);margin-top:8px}
/* compact price table */
.ptable{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1020px){.ptable{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ptable{grid-template-columns:1fr}}
.pcell{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:6px}
.pcell h3{margin:0;font-size:1.1rem}
.pcell .amt{font:800 1.6rem/1.1 Manrope,system-ui,sans-serif;color:var(--ink);margin:2px 0}
.pcell .amt small{font-size:.85rem;font-weight:600;color:var(--slate)}
.pcell p{margin:0;color:var(--slate);font-size:.95rem}
.pcell .btn{margin-top:auto;justify-content:center;font-size:.95rem;padding:11px 16px}
.pcell .more{font-size:.9rem;margin-top:4px}
.pcell.hi{border:2px solid var(--teal)}
/* approval steps */
.approve{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;list-style:none;padding:0;margin:0;counter-reset:s}
.approve li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;counter-increment:s}
.approve li:before{content:counter(s);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--teal-dark);color:#fff;font-weight:800;margin-bottom:8px}
.approve strong{display:block;color:var(--ink)}
.approve span{color:var(--slate);font-size:.95rem}
@media (max-width:860px){.approve{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.approve{grid-template-columns:1fr}}
/* portfolio collection */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.filters button{border:2px solid var(--ink)}
.coll{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:960px){.coll{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.coll{grid-template-columns:1fr}}
.item{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:opacity var(--t) var(--ease)}
.item[hidden]{display:none}
.item .media{background:var(--ink)}
.item.is-web .media{background:var(--paper);aspect-ratio:16/10;overflow:hidden}
.item.is-web .media img{width:100%;height:100%;object-fit:cover;object-position:top}
.item .yt{border-radius:0;transform:none;box-shadow:none}
.item .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.item h3{margin:0;font-size:1.12rem}
.item .trade{font:700 .74rem/1.3 "Space Mono",monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--teal-dark)}
.item .trade a{color:inherit}
.item p{margin:0;color:var(--slate);font-size:.95rem}
.item .act{margin-top:auto;padding-top:8px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.act .btn{padding:9px 16px;font-size:.92rem;margin:0}
.act a.link{font-size:.9rem}
.count-note{color:var(--slate);font-size:.95rem}
/* evidence */
.ev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:900px){.ev{grid-template-columns:1fr}}
.ev figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ev figure img{width:100%;height:auto}
.ev figcaption{padding:12px 16px;font-size:.92rem;color:var(--slate)}
.ev figcaption strong{color:var(--ink);display:block}
.label-style{display:inline-block;background:var(--coral-pale);color:var(--ink);font:700 .78rem/1.2 "Space Mono",monospace;padding:6px 10px;border-radius:6px;margin:0 0 10px;letter-spacing:.04em}
.final{background:var(--ink);color:#eef1ef}
.final h2{color:#fff}.final p{color:#c6cdca}.final a:not(.btn){color:#8fd6d4}
.final .alt-routes{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:16px}
form :user-invalid{border-color:var(--coral-dark)!important;outline-color:var(--coral-dark)}
.err{color:#a3372d;font-size:.9rem;margin:4px 0 0;min-height:0}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:0ms!important;animation-duration:0ms!important;scroll-behavior:auto!important}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site-card .vp{display:block;color:var(--teal-dark);font-weight:700;font-size:.9rem;margin-top:4px}