/* ktv-polish */

/* ---- anchor landing ---------------------------------------------------
   The header is sticky at 64px. Without scroll-margin every in-page anchor
   - including the Google sitelink targets - lands beneath it. */
:target,[id]{scroll-margin-top:84px}
@media(max-width:880px){:target,[id]{scroll-margin-top:76px}}

/* ---- type rendering ---------------------------------------------------
   Retina screens render this typeface noticeably heavier without it. */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility}

/* ---- depth ------------------------------------------------------------
   One flat shadow reads as a border; stacked shadows read as a raised card. */
:root{
  --k-lift-1:0 1px 2px rgba(16,38,24,.05), 0 2px 6px rgba(16,38,24,.05);
  --k-lift-2:0 2px 4px rgba(16,38,24,.05), 0 8px 20px rgba(16,38,24,.07),
             0 16px 36px rgba(16,38,24,.05);
}
:root[data-theme="dark"]{
  --k-lift-1:0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.30);
  --k-lift-2:0 2px 6px rgba(0,0,0,.40), 0 10px 26px rgba(0,0,0,.38),
             0 20px 44px rgba(0,0,0,.30);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --k-lift-1:0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.30);
    --k-lift-2:0 2px 6px rgba(0,0,0,.40), 0 10px 26px rgba(0,0,0,.38),
               0 20px 44px rgba(0,0,0,.30);
  }
}
.feat,.dev,.fx,.shots figure,.safe>div,.specs,.section-grid .g-card{
  box-shadow:var(--k-lift-1);
  transition:box-shadow .22s cubic-bezier(.2,.7,.3,1),
             transform .22s cubic-bezier(.2,.7,.3,1),
             border-color .22s ease}
.feat:hover,.dev:hover,.fx:hover,.shots figure:hover,.section-grid .g-card:hover{
  box-shadow:var(--k-lift-2)}

/* the primary action should feel weightier than a flat fill */
.btn-primary{box-shadow:0 1px 2px rgba(20,146,71,.28), 0 6px 16px rgba(20,146,71,.26)}
.btn-primary:hover{box-shadow:0 2px 4px rgba(20,146,71,.30), 0 10px 26px rgba(20,146,71,.32)}
.btn{transition:box-shadow .2s ease,transform .2s ease,filter .15s ease}
.btn:active{transform:translateY(1px)}

/* ---- small refinements ---- */
.specs dd,.stats-band b{font-variant-numeric:tabular-nums}
img{-webkit-user-drag:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ktv-dark-calm */

/* Dark mode ran Tailwind green-400 as the accent AND painted the notice bar,
   language bar, ticks, pill borders and a button glow with it. On a near-black
   ground that many saturated greens vibrate. Green is kept for the primary
   action and links; taken off everything that was only decorative.
   NOTE: every :not([data-theme="light"]) rule MUST sit inside the dark media
   query - on its own it also matches a light page that has no attribute set. */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --k-accent:#5CBF83;--k-green1:#43B26F;--k-green2:#2E8F55;--k-accent-soft:#16241D;
  --k-bg:#0D1013;--k-bg2:#12161A;--k-surface:#151A1E;--k-line:#242B31;--k-on-accent:#04180C;
}}
:root[data-theme="dark"]{
  --k-accent:#5CBF83;--k-green1:#43B26F;--k-green2:#2E8F55;--k-accent-soft:#16241D;
  --k-bg:#0D1013;--k-bg2:#12161A;--k-surface:#151A1E;--k-line:#242B31;--k-on-accent:#04180C;
}

/* --- explicit dark --- */
:root[data-theme="dark"] #official-notice,
:root[data-theme="dark"] #bn-offer{
  background:#12181C!important;color:var(--k-text)!important;
  border-bottom:1px solid var(--k-line)}
:root[data-theme="dark"] #official-notice{font-weight:500}
:root[data-theme="dark"] #official-notice a{color:var(--k-accent)!important}
:root[data-theme="dark"] #official-notice svg{color:var(--k-accent)}
:root[data-theme="dark"] #bn-offer a{background:var(--k-accent)!important;color:#04180C!important;border:0}
:root[data-theme="dark"] #bn-offer .t small{color:var(--k-muted)}
:root[data-theme="dark"] #bn-offer button,
:root[data-theme="dark"] #official-notice button{color:var(--k-muted)}
:root[data-theme="dark"] .btn-primary{box-shadow:0 1px 2px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.45)}
:root[data-theme="dark"] .btn-primary:hover{box-shadow:0 2px 5px rgba(0,0,0,.55),0 10px 26px rgba(0,0,0,.5)}
:root[data-theme="dark"] .trust svg{fill:#8CA093;opacity:.85}
:root[data-theme="dark"] .eyebrow{border-color:var(--k-line);color:var(--k-accent)}
:root[data-theme="dark"] .lang-switch{border-color:var(--k-line)}
:root[data-theme="dark"] .theme-toggle{border-color:var(--k-line)!important}
:root[data-theme="dark"] .feat .ic{background:#1B2A22;border-color:#2A3A31}

/* --- system dark, no explicit choice --- */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #official-notice,
  :root:not([data-theme="light"]) #bn-offer{
    background:#12181C!important;color:var(--k-text)!important;
    border-bottom:1px solid var(--k-line)}
  :root:not([data-theme="light"]) #official-notice{font-weight:500}
  :root:not([data-theme="light"]) #official-notice a{color:var(--k-accent)!important}
  :root:not([data-theme="light"]) #official-notice svg{color:var(--k-accent)}
  :root:not([data-theme="light"]) #bn-offer a{background:var(--k-accent)!important;color:#04180C!important;border:0}
  :root:not([data-theme="light"]) #bn-offer .t small{color:var(--k-muted)}
  :root:not([data-theme="light"]) #bn-offer button,
  :root:not([data-theme="light"]) #official-notice button{color:var(--k-muted)}
  :root:not([data-theme="light"]) .btn-primary{box-shadow:0 1px 2px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.45)}
  :root:not([data-theme="light"]) .btn-primary:hover{box-shadow:0 2px 5px rgba(0,0,0,.55),0 10px 26px rgba(0,0,0,.5)}
  :root:not([data-theme="light"]) .trust svg{fill:#8CA093;opacity:.85}
  :root:not([data-theme="light"]) .eyebrow{border-color:var(--k-line);color:var(--k-accent)}
  :root:not([data-theme="light"]) .lang-switch{border-color:var(--k-line)}
  :root:not([data-theme="light"]) .theme-toggle{border-color:var(--k-line)!important}
  :root:not([data-theme="light"]) .feat .ic{background:#1B2A22;border-color:#2A3A31}
}

/* ktv-hero-density */

/* The hero carried two paragraphs at nearly the same weight, four trust ticks
   and generous padding, which pushed the primary CTA far below the fold on a
   phone. Nothing is removed - the keyword paragraph still ships for search -
   it is just given secondary weight so the hierarchy reads in one glance. */
.hero .lead{font-size:17px;line-height:1.55;color:var(--k-text);max-width:52ch;margin-inline:auto}
.hero .detail{font-size:14.6px;line-height:1.6;color:var(--k-muted);max-width:60ch;
  margin:12px auto 0}
.hero .trust{margin:18px 0 20px;font-size:12.8px;gap:6px 14px}

@media(max-width:880px){
  .hero{padding:26px 0 30px}
  .hero .eyebrow{font-size:10.8px;padding:6px 12px}
  .hero h1{margin:13px 0 10px}
  .hero .lead{font-size:16px}
  .hero .detail{font-size:14px;line-height:1.58;margin-top:10px}
  .hero .trust{margin:15px 0 17px;gap:5px 12px}
  .hero .cta{gap:10px}
  .hero .pills{margin-top:14px}
}
@media(min-width:920px){.hero .lead,.hero .detail{margin-inline:0}}

/* the feature icons were pale green on a pale green tile - almost invisible */
.feat .ic{background:var(--k-accent-soft);border:1px solid var(--k-line)}
.feat .ic svg{fill:var(--k-accent);opacity:1}
:root[data-theme="dark"] .feat .ic,
:root:not([data-theme="light"]) .feat .ic{background:#1B2A22;border-color:#2A3A31}

/* The theme toggle was hidden under 400px back when the navbar also carried a
   download button. That button is gone from mobile now, so there is room -
   and a dark-mode site needs its switch reachable on the smallest phones. */
@media(max-width:399px){
  .theme-toggle{display:inline-flex!important;width:32px;height:32px;flex:0 0 32px}
  .lang-switch{padding:0 9px;height:32px;min-height:32px;font-size:12.5px}
  .header-inner{gap:6px;padding:0 8px}
}

/* ktv-gallery */

/* The strip now mixes portrait and landscape shots. Sizing by HEIGHT instead
   of width lets a landscape frame sit in the same row without breaking it.
   The frames carry their own rounded corners and transparency, so the figure
   drops its own card background, clipping and shadow. */
.shots figure{flex:0 0 auto;width:auto;height:330px;background:transparent;
  border-radius:0;overflow:visible;box-shadow:none!important}
.shots figure img{height:100%;width:auto;display:block;
  filter:drop-shadow(0 5px 16px var(--k-shadow-lg));
  transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.shots figure:hover img{transform:translateY(-3px)}
.shots{gap:16px;align-items:flex-start}
@media(min-width:768px){.shots figure{height:470px}}
@media(max-width:420px){.shots figure{height:290px}.shots{gap:12px}}

/* ktv-gallery-fit */

/* A landscape frame is 2.16x as wide as a portrait one. At the shared row
   height it ran wider than a phone screen, so it dominated the strip and
   spilled past the viewport. Cap its width instead and centre it in the row -
   the row height stays constant, the wide shot just gets smaller. */
.shots figure{display:flex;align-items:center;justify-content:center}
.shots figure[data-o="l"] img{
  height:auto;width:auto;max-height:100%;max-width:min(72vw,430px)}
@media(min-width:768px){
  .shots figure[data-o="l"] img{max-width:520px}
}

/* ktv-ad-fit */

/* An AdSense iframe that renders wider than its slot drags the whole page
   sideways - that is the empty strip you can scroll into. Constrain every
   ad container, including the wrappers Auto Ads injects itself. */
ins.adsbygoogle{max-width:100%!important;overflow:hidden!important}
ins.adsbygoogle iframe{max-width:100%!important}
.google-auto-placed,
[data-google-query-id],
div[id^="google_ads_iframe"],
iframe[id^="aswift_"]{max-width:100%!important}
.google-auto-placed{overflow:hidden!important}
/* clip rather than scroll: overflow-x:hidden on a scroll container would
   break the sticky header, clip does not */
body{overflow-x:clip;max-width:100vw}
@supports not (overflow:clip){body{overflow-x:hidden}}

/* ktv-ads */

/* Reserve the space before the unit fills so nothing shifts under the reader
   (a shifting page next to a download button is how mis-clicks happen). */
.ad-wrap{max-width:1060px;margin:26px auto;padding:0 20px;text-align:center}
.ad-wrap .lbl{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--k-faint,#8b9c90);font-weight:700;margin-bottom:6px}
.ad-wrap ins{display:block;min-height:280px;background:transparent}
@media(max-width:520px){.ad-wrap ins{min-height:250px}}

/* ktv-banner */

.ktv-banner{max-width:1060px;margin:0 auto 40px;padding:0 20px}
.ktv-banner a{display:block;border-radius:18px;overflow:hidden;line-height:0;
  box-shadow:var(--k-lift-1,0 2px 8px rgba(16,38,24,.08));
  transition:box-shadow .22s cubic-bezier(.2,.7,.3,1),transform .22s cubic-bezier(.2,.7,.3,1)}
.ktv-banner a:hover{box-shadow:var(--k-lift-2,0 10px 26px rgba(16,38,24,.14));transform:translateY(-2px)}
.ktv-banner img{width:100%;height:auto;display:block}
@media(max-width:520px){.ktv-banner{padding:0 14px;margin-bottom:30px}
  .ktv-banner a{border-radius:14px}}


/* ---- on-page contents -------------------------------------------------
   Google builds the jump-to links under a search result from a page's own
   anchor links, so this list is what regenerates them. */
.ktoc{max-width:1120px;margin:0 auto;padding:2px 20px 8px}
.ktoc nav{background:var(--k-surface);border:1px solid var(--k-line);border-radius:15px;
  padding:17px 20px}
.ktoc h2{font-size:12px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--k-muted);margin:0 0 11px;text-align:left;border:0;padding:0}
.ktoc ol{list-style:none;margin:0;padding:0;display:grid;gap:3px 22px;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));counter-reset:toc}
.ktoc li{counter-increment:toc;margin:0}
.ktoc a{display:flex;gap:9px;align-items:baseline;color:var(--k-text);text-decoration:none;
  font-size:14.5px;font-weight:600;padding:6px 8px;border-radius:8px;line-height:1.45}
.ktoc a::before{content:counter(toc,decimal-leading-zero);color:var(--k-accent);
  font-size:11.5px;font-weight:800;flex:0 0 auto}
.ktoc a:hover{background:var(--k-accent-soft);color:var(--k-accent)}
@media(max-width:520px){.ktoc{padding:0 14px 4px}.ktoc nav{padding:15px}
  .ktoc a{font-size:14px;padding:5px 6px}}