/* INDX-sivuston demo v3: kolme teemaa kuten sovelluksessa (Booth, Studio, Daylight). Värit ovat sovelluksen omat
   (index_inlined.html: body.deep-theme, :root, body.light-theme), vaihdin on sama kolmen kuvakkeen kytkin. */
:root[data-theme="daylight"] {
  color-scheme: light;
  --void:#e6e4df; --panel:#d9d7d1; --elevated:#cfcdc6; --row-hover:#dedcd6; --hair:#b3b0a8; --hair-soft:#cfccc5;
  --text-primary:#26262a; --text-secondary:#55555a; --soft:#64646a; --brand:#5b64a6;
  --card:#eeece7; --card-hi:#f3f1ec;
  --c-sound:#6c75cc; --c-script:#3d9150; --c-mix:#b07a12; --c-tag:#068e9a; --c-rec:#d4473a;
  --shadow:0 1px 2px rgba(38,38,42,.06), 0 14px 34px rgba(38,38,42,.11);
  --nav-bg:rgba(230,228,223,.84); --btn-bg:#26262a; --btn-fg:#eeece7;
  --hl-op:.85; --glow:.55; --drop:rgba(38,38,42,.34);
  /* Sovellusväri tekstinä, AA 4.5:1 (mitattu): --ink-em on sovellusvärin osuus nimen INDX-päätteessä ja --ink-pill pillin tekstissä, loput
     on tekstiväriä. Daylightissa 62 %: vähintään 4.96:1 sekä kortilla (#eeece7) että sivun pohjalla (#e6e4df), sama kuin oppaiden --g-ink.
     Booth ja Studio eivät tummennu: pääte on sellaisenaan sovellusväri (100 %) ja pill 70 % kuten ennen. */
  --ink-em:62%; --ink-pill:62%;
}
:root[data-theme="studio"] {
  color-scheme: dark;
  --void:#141519; --panel:#1f2025; --elevated:#2c2d33; --row-hover:#24252b; --hair:#3d3e46; --hair-soft:#2c2d33;
  --text-primary:#e8e8e4; --text-secondary:#b4b4b8; --soft:#8c8c93; --brand:#a9b6e8;
  --card:#1f2025; --card-hi:#2c2d33;
  --c-sound:#aab2ee; --c-script:#7ccf8a; --c-mix:#f0c46a; --c-tag:#5ecad7; --c-rec:#f07f72;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 14px 36px rgba(0,0,0,.45);
  --nav-bg:rgba(20,21,25,.8); --btn-bg:#e8e8e4; --btn-fg:#141519;
  --hl-op:0; --glow:.5; --drop:rgba(0,0,0,.6);
  --ink-em:100%; --ink-pill:70%;
}
:root, :root[data-theme="booth"] {
  color-scheme: dark;
  --void:#0a0a0b; --panel:#131314; --elevated:#1c1c1e; --row-hover:#161617; --hair:#2a2a2c; --hair-soft:#1f1f21;
  --text-primary:#f5f5f4; --text-secondary:#9a9a9d; --soft:#85858a; --brand:#a9b6e8;
  --card:#131314; --card-hi:#1c1c1e;
  --c-sound:#aab2ee; --c-script:#7ccf8a; --c-mix:#f0c46a; --c-tag:#5ecad7; --c-rec:#f07f72;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 36px rgba(0,0,0,.55);
  --nav-bg:rgba(10,10,11,.8); --btn-bg:#f5f5f4; --btn-fg:#0a0a0b;
  --hl-op:0; --glow:.42; --drop:rgba(0,0,0,.7);
  --ink-em:100%; --ink-pill:70%;
}
:root { --sound-b:#aab2ee; --script-b:#7ccf8a; --mix-b:#f0c46a; --tag-b:#5ecad7; --rec-b:#f07f72;
        --font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --r:22px; }

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:5rem; }
body { background:var(--void); color:var(--text-primary); font:400 1.0625rem/1.55 var(--font); -webkit-font-smoothing:antialiased; overflow-x:hidden;
       transition:background-color .28s ease, color .28s ease; }
img, svg { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1, h2, h3 { text-wrap:balance; }
.wrap { width:100%; max-width:1120px; margin:0 auto; padding-inline:1.5rem; }

/* ---------- yläpalkki ---------- */
.bar { position:sticky; top:0; z-index:20; background:var(--nav-bg); border-bottom:1px solid var(--hair-soft);
       backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); }
.bar .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; gap:1rem; }
.brand { display:flex; align-items:center; gap:.65rem; min-width:0; color:var(--text-primary); }
.brand svg { width:30px; height:30px; flex:none; }
.wm { display:flex; align-items:baseline; gap:.6rem; white-space:nowrap; }
.wm b { font-weight:800; font-size:1.4rem; letter-spacing:-.02em; }
.wm i { font-style:normal; font-weight:600; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--text-secondary); }
.bar nav { display:flex; align-items:center; gap:1.3rem; font-size:.93rem; font-weight:500; color:var(--text-secondary); }
.bar nav a:not(.btn):hover { color:var(--text-primary); }

/* sovellusvalikko: otsikon tunnus muuttuu ruksiksi ja avaa koko leveyden lasipaneelin */
.brand-wrap { position:relative; display:flex; align-items:center; gap:.35rem; min-width:0; }
.menu-btn { display:grid; place-items:center; width:42px; height:42px; padding:6px; border:none; background:transparent; border-radius:11px; cursor:pointer; color:var(--text-primary); transition:background-color .15s; }
.menu-btn svg { width:30px; height:30px; overflow:visible; }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { background:var(--row-hover); }
.menu-btn:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.menu-btn svg rect { transform-box:fill-box; transform-origin:center; transition:transform .42s cubic-bezier(.2,.9,.25,1), opacity .22s ease; }
.menu-btn .mk-p { transition-delay:calc(var(--k, 0) * 28ms); }
.menu-btn[aria-expanded="true"] .mk-t { transform:translateY(20.5px) rotate(45deg) scale(.65, 1.25); }
.menu-btn[aria-expanded="true"] .mk-b { transform:translate(15px, -24.5px) rotate(-45deg) scale(1.42, 1.6); }
.menu-btn[aria-expanded="true"] .mk-p, .menu-btn[aria-expanded="true"] .mk-m { opacity:0; transform:scale(.3); }

.menu-scrim { position:fixed; inset:0; z-index:18; background:rgba(6,6,8,.55); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
              opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s; }
:root[data-theme="daylight"] .menu-scrim { background:rgba(30,30,34,.38); }
.menu-scrim.open { opacity:1; visibility:visible; }
.menu-panel { position:fixed; left:0; right:0; top:var(--menu-top, 64px); z-index:19; max-height:calc(100vh - var(--menu-top, 64px) - 10px); overflow:auto;
              background:color-mix(in srgb, var(--void) 86%, transparent); -webkit-backdrop-filter:blur(26px) saturate(1.5); backdrop-filter:blur(26px) saturate(1.5);
              border-bottom:1px solid var(--hair); box-shadow:0 44px 90px var(--drop);
              opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-16px) scale(.99); transform-origin:22% 0;
              transition:opacity .24s ease, transform .46s cubic-bezier(.2,.9,.25,1), visibility .24s; }
.menu-panel.open { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.mp-grid { display:grid; grid-template-columns:230px 1fr; gap:2.2rem; align-items:start; padding-block:1.8rem 2.1rem; }
.mp-kicker { font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); font-weight:700; }
.mp-line { margin-top:.55rem; font-size:1.55rem; font-weight:800; letter-spacing:-.03em; line-height:1.1; text-wrap:balance; }
.mp-links { margin-top:1.2rem; display:grid; gap:.05rem; font-weight:600; font-size:.9rem; color:var(--text-secondary); }
.mp-links a { padding:.32rem 0; } .mp-links a:hover { color:var(--text-primary); }
.mp-cards { display:grid; grid-template-columns:repeat(5, 1fr); gap:.8rem; }
.m-card { --c:var(--c-sound); position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; gap:.45rem; padding:1.15rem 1rem .95rem;
          border-radius:18px; border:1px solid var(--hair-soft); background:var(--card); color:var(--text-primary);
          transition:transform .45s cubic-bezier(.2,.9,.25,1), border-color .2s, box-shadow .25s; }
.m-card.script { --c:var(--c-script); } .m-card.mix { --c:var(--c-mix); } .m-card.rec { --c:var(--c-rec); } .m-card.tag { --c:var(--c-tag); }
.m-card::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.5; transition:opacity .3s;
                  background:radial-gradient(130% 95% at 18% -12%, color-mix(in srgb, var(--c) 30%, transparent), transparent 64%); }
.m-card::after { content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--c); opacity:.9; }
.m-card:hover, .m-card:focus-visible { transform:translateY(-5px); border-color:color-mix(in srgb, var(--c) 55%, var(--hair-soft)); box-shadow:0 18px 40px var(--drop); outline:none; }
.m-card:hover::before, .m-card:focus-visible::before { opacity:1; }
.m-card[aria-current="page"] { border-color:var(--c); }
.m-card img { width:52px; height:52px; margin-bottom:.3rem; filter:drop-shadow(0 8px 14px var(--drop)); transition:transform .45s cubic-bezier(.2,.9,.25,1); }
.m-card:hover img, .m-card:focus-visible img { transform:translateY(-2px) rotate(-4deg) scale(1.08); }
.m-txt b { display:block; font-weight:800; letter-spacing:-.02em; font-size:1.08rem; line-height:1.12; }
.m-txt b em { font-style:normal; color:color-mix(in srgb, var(--c) var(--ink-em), var(--text-primary)); }
.m-txt span { display:block; margin-top:.3rem; color:var(--text-secondary); font-size:.8rem; line-height:1.35; }
.m-go { margin-top:auto; padding-top:.55rem; font-style:normal; font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:color-mix(in srgb, var(--c) 70%, var(--text-primary)); }
.m-go::after { content:" →"; display:inline-block; transition:transform .25s; }
.m-card:hover .m-go::after, .m-card:focus-visible .m-go::after { transform:translateX(5px); }
.menu-panel.open .m-card { animation:m-in .55s cubic-bezier(.2,.9,.25,1) backwards; animation-delay:calc(var(--i) * 60ms + 110ms); }
.menu-panel.open .mp-intro { animation:m-in .55s cubic-bezier(.2,.9,.25,1) .05s backwards; }
@keyframes m-in { from { opacity:0; transform:translateY(16px) scale(.97); } to { opacity:1; transform:none; } }
@media (max-width:1100px) { .mp-cards { grid-template-columns:repeat(3, 1fr); } }
@media (max-width:860px) { .mp-grid { grid-template-columns:1fr; gap:1.2rem; padding-block:1.3rem 1.6rem; } .mp-cards { grid-template-columns:repeat(2, 1fr); } html.menu-open { overflow:hidden; } }
@media (max-width:560px) { .mp-cards { grid-template-columns:1fr; gap:.55rem; } .m-card { flex-direction:row; align-items:center; gap:.9rem; padding:.8rem .9rem; }
                           .m-card img { width:44px; height:44px; margin:0; } .m-go { display:none; } .m-txt span { margin-top:.15rem; } }
@media (prefers-reduced-motion:reduce) { .menu-btn svg rect, .menu-panel, .menu-scrim, .m-card, .m-card img { transition:none !important; } .menu-panel.open .m-card, .menu-panel.open .mp-intro { animation:none !important; } }

/* teemakytkin: sama kuin sovelluksessa (kolme kuvaketta yhdessä kehyksessä) */
.theme-switch { display:inline-flex; align-items:center; gap:2px; padding:2px; border:1px solid var(--hair); border-radius:9px; background:var(--elevated); }
.theme-switch .tb { width:26px; height:24px; padding:0; display:flex; align-items:center; justify-content:center; border:none; background:transparent;
                    border-radius:6px; cursor:pointer; color:var(--soft); }
.theme-switch .tb:hover { background:var(--row-hover); color:var(--text-primary); }
.theme-switch .tb.active { color:var(--brand); background:var(--row-hover); }
.theme-switch .tb svg { width:14px; height:14px; fill:currentColor; }

/* ---------- napit ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.85rem 1.55rem; border-radius:999px;
       font:600 1rem/1.2 var(--font); border:1.5px solid var(--text-primary); color:var(--text-primary); background:transparent; cursor:pointer;
       transition:transform .15s, box-shadow .15s; }
.btn:hover { transform:translateY(-1px); }
.btn.primary { background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bg); }
.btn.primary:hover { box-shadow:0 8px 20px var(--drop); }
.btn.sm { padding:.5rem 1.05rem; font-size:.88rem; }
/* Myynti ei ole auki: nappi näkyy mutta ei johda mihinkään (stage.py vaihtaa tämän ostolinkin tilalle). */
.btn.is-soon { background:transparent; border:1.5px dashed var(--hair); color:var(--text-secondary); cursor:default; transform:none; box-shadow:none; }
.btn.is-soon:hover { transform:none; box-shadow:none; }
.cta { display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2rem; }

/* ---------- etusivun hero ---------- */
.hero { position:relative; isolation:isolate; overflow:hidden; text-align:center; padding-block:4.5rem 4rem; }
.hero h1 { font-weight:800; letter-spacing:-.04em; line-height:1.06; font-size:clamp(2.3rem, 6.4vw, 4.6rem); max-width:12em; margin-inline:auto; }
.sub { margin-top:1.5rem; font-size:clamp(1.1rem, 2.2vw, 1.4rem); color:var(--text-secondary); font-weight:500; }
.stage { position:relative; margin-top:3.4rem; padding-inline:1.5rem; }
/* Hehku: ylä- ja alareuna häivytetään nollaan maskilla, ettei elementin laatikko tai hero-alueen leikkaus näy suorakulmiona. */
.stage::before { content:""; position:absolute; inset:-3.5rem 0 -1.5rem; z-index:-1; pointer-events:none; filter:blur(34px); opacity:var(--glow);
  background:
    radial-gradient(40% 55% at 18% 38%, #aab2ee, transparent 70%),
    radial-gradient(38% 50% at 82% 32%, #5ecad7, transparent 70%),
    radial-gradient(40% 50% at 68% 74%, #f0c46a, transparent 70%),
    radial-gradient(38% 50% at 28% 76%, #7ccf8a, transparent 70%);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 24%, #000 66%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 24%, #000 66%, transparent); }
/* Läppärikuvat ovat läpinäkyviä ilman leivottua varjoa: varjo piirtyy läppärin muodosta ja mahtuu heron sisään. */
.laptop { width:min(980px, 100%); margin:0 auto; filter:drop-shadow(0 26px 30px var(--drop)); }
.laptop-wrap { position:relative; width:min(980px, 100%); margin:0 auto; filter:drop-shadow(0 26px 30px var(--drop)); }
.laptop-wrap .laptop { display:block; width:100%; margin:0; filter:none; }
/* Sovelluskuvat ovat oikeita ruutukaappauksia kustakin teemasta (Booth, Studio, Daylight): näkyviin tulee sivun teeman kuva. Ilman JS:ää (ei data-theme) näkyy Daylight. */
.shot-t { display:none; }
html:not([data-theme]) .shot-daylight, html[data-theme="daylight"] .shot-daylight,
html[data-theme="booth"] .shot-booth, html:not([data-theme]) .shot-booth, html[data-theme="studio"] .shot-studio { display:block; }
.laptop-wrap .laptop.shot-t { display:none; }
html:not([data-theme]) .laptop-wrap .shot-daylight, html[data-theme="daylight"] .laptop-wrap .shot-daylight,
html[data-theme="booth"] .laptop-wrap .shot-booth, html:not([data-theme]) .laptop-wrap .shot-booth, html[data-theme="studio"] .laptop-wrap .shot-studio { display:block; }
/* Suodatinarvio teemasta: vain niille kuville, joista ei vielä ole oikeita Studio- ja Daylight-kaappauksia (SCRIPTINDX). */
.demo-theme { transition:filter .4s ease; }
:root[data-theme="studio"] .demo-theme { filter:brightness(1.55) contrast(.9) saturate(.95); }
:root[data-theme="daylight"] .demo-theme { filter:invert(.93) hue-rotate(180deg) sepia(.12) brightness(.96) contrast(.93) saturate(.9); }

/* ---------- osiot ---------- */
.sec { padding-top:5rem; }
.sec-title { font-size:clamp(1.8rem, 3.6vw, 2.6rem); font-weight:800; letter-spacing:-.035em; line-height:1.1; text-align:center; margin-bottom:2rem; }

/* sovelluskortit */
.apps { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
.app { --c:var(--c-sound); --cb:var(--sound-b); position:relative; display:flex; flex-direction:column; gap:.65rem; overflow:hidden; flex:1 1 200px; max-width:260px;
       padding:1.6rem 1.25rem 1.3rem; background:var(--card); border:1px solid var(--hair-soft); border-radius:var(--r); box-shadow:var(--shadow);
       transition:transform .2s, border-color .2s, box-shadow .2s, background-color .28s; }
.app::before { content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--cb); }
.app:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--c) 45%, var(--hair-soft)); }
.app.script, .mini.script { --c:var(--c-script); --cb:var(--script-b); }
.app.mix, .mini.mix { --c:var(--c-mix); --cb:var(--mix-b); }
.app.rec, .mini.rec, .feature.rec { --c:var(--c-rec); --cb:var(--rec-b); }
.app.tag, .mini.tag { --c:var(--c-tag); --cb:var(--tag-b); }
.app.soon > *:not(.soon-badge) { filter:blur(1.6px); opacity:.72; transition:filter .25s, opacity .25s; }
.app.soon:hover > *:not(.soon-badge) { filter:blur(.6px); opacity:.9; }
.soon-wrap .laptop { filter:blur(2.2px); opacity:.78; }
.soon-wrap:hover .laptop { filter:blur(.8px); opacity:.92; }
.soon-wrap .soon-badge { font-size:.95rem; padding:.6rem 1.2rem; }
.soon-badge { position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%); padding:.45rem .9rem; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:color-mix(in srgb, var(--c) 22%, var(--card)); color:var(--text-primary); border:1px solid color-mix(in srgb, var(--c) 55%, transparent); white-space:nowrap; pointer-events:none; }
.app .tile { width:64px; height:64px; margin-bottom:.25rem; filter:drop-shadow(0 6px 10px var(--drop)); }
.app h3 { font-size:1.35rem; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.app h3 em, .mini b em { font-style:normal; color:color-mix(in srgb, var(--c) var(--ink-em), var(--text-primary)); }
.app p { color:var(--text-secondary); font-size:.98rem; line-height:1.45; }
.app .row { margin-top:auto; padding-top:.9rem; display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; }
.price { font-weight:800; font-size:1.25rem; letter-spacing:-.01em; line-height:1.1; }
.price small { display:block; margin-top:.15rem; font-size:.7rem; font-weight:600; letter-spacing:.02em; color:var(--soft); white-space:nowrap; }
.more { font-weight:600; font-size:.88rem; white-space:nowrap; color:color-mix(in srgb, var(--c) 70%, var(--text-primary)); }
.more::after { content:" →"; }
.pill { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.22rem .6rem; border-radius:999px;
        background:color-mix(in srgb, var(--c) 16%, var(--card)); color:color-mix(in srgb, var(--c) var(--ink-pill), var(--text-primary)); white-space:nowrap; }

/* sovelluskaistat: kuva + yksi lause, vuorotellen vasen/oikea */
.rows { display:grid; gap:1.2rem; }
.feature { --c:var(--c-sound); display:grid; grid-template-columns:4fr 8fr; gap:2.5rem; align-items:center; padding:clamp(1.4rem, 3.6vw, 2.6rem);
           background:var(--card); border:1px solid var(--hair-soft); border-radius:28px; box-shadow:var(--shadow); }
.feature.script { --c:var(--c-script); } .feature.mix { --c:var(--c-mix); }
.feature.rev { grid-template-columns:8fr 4fr; }
.feature.rev .copy { order:2; }
.kicker { font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:color-mix(in srgb, var(--c) 70%, var(--text-primary)); }
.feature h2 { font-size:clamp(1.7rem, 3.4vw, 2.4rem); font-weight:800; letter-spacing:-.035em; line-height:1.08; margin:.6rem 0 .8rem; }
.feature p { color:var(--text-secondary); }
.link { display:inline-block; margin-top:1.2rem; font-weight:600; color:color-mix(in srgb, var(--c) 70%, var(--text-primary)); }
.link::after { content:" →"; }
.shot { border-radius:14px; overflow:hidden; background:#0c0d10; box-shadow:0 22px 44px var(--drop); border:1px solid rgba(128,128,128,.28); }
.shot img { width:100%; }

/* rauhallinen tukirivi */
.points { list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; }
.points li { display:flex; align-items:center; gap:.8rem; padding:1rem 1.2rem; font-weight:600; font-size:.98rem;
             background:color-mix(in srgb, var(--card) 70%, transparent); border:1px solid var(--hair-soft); border-radius:16px; }
.one-price { text-align:center; font-size:clamp(1.7rem, 4vw, 2.7rem); font-weight:800; letter-spacing:-.035em; line-height:1.1; margin:1.2rem 0; color:var(--text-primary); }
.points svg { width:22px; height:22px; flex:none; color:var(--c-script); fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- tuotesivu ---------- */
.p-hero { position:relative; isolation:isolate; overflow:hidden; text-align:center; padding-block:4rem 3rem; }
.p-logo { width:min(520px, 86%); margin:0 auto 2rem; }
.p-logo.on-dark { display:none; }
:root[data-theme="studio"] .p-logo.on-light, :root[data-theme="booth"] .p-logo.on-light, :root:not([data-theme]) .p-logo.on-light { display:none; }
:root[data-theme="studio"] .p-logo.on-dark, :root[data-theme="booth"] .p-logo.on-dark, :root:not([data-theme]) .p-logo.on-dark { display:block; }
.p-hero h1 { font-weight:800; letter-spacing:-.04em; line-height:1.06; font-size:clamp(2.1rem, 5.6vw, 3.8rem); max-width:15em; margin-inline:auto; }
.nb { white-space:nowrap; }
.lead { max-width:36rem; margin:1.1rem auto 0; color:var(--text-secondary); font-size:1.15rem; }
.fine-line { margin-top:1.1rem; font-size:.86rem; color:var(--soft); }
.checks { list-style:none; display:flex; flex-wrap:wrap; gap:.45rem 1.4rem; margin-top:1.3rem; color:var(--text-secondary); font-weight:500; font-size:.95rem; }
.checks li::before { content:"✓"; color:var(--c-script); font-weight:800; margin-right:.45rem; }
.tiles { display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; }
.tcard { padding:1.5rem; background:var(--card); border:1px solid var(--hair-soft); border-radius:20px; box-shadow:var(--shadow); }
.ico { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; margin-bottom:.95rem;
       background:color-mix(in srgb, var(--sound-b) 28%, var(--card)); color:var(--brand); }
.ico svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tcard h3 { font-size:1.1rem; font-weight:700; letter-spacing:-.01em; }
.tcard p { margin-top:.3rem; color:var(--text-secondary); font-size:.95rem; line-height:1.45; }
.buybox { max-width:640px; margin-inline:auto; text-align:center; padding:2.6rem 1.6rem; background:var(--card); border:1px solid var(--hair-soft);
          border-radius:28px; box-shadow:var(--shadow); }
.buybox .big { font-size:clamp(3.2rem, 9vw, 4.6rem); font-weight:800; letter-spacing:-.045em; line-height:1; }
.buybox .note { color:var(--text-secondary); margin-top:.6rem; }
.buybox .checks { justify-content:center; margin:1.4rem 0 1.8rem; }
.faq { max-width:760px; margin-inline:auto; }
details { border-bottom:1px solid var(--hair-soft); padding-block:1.05rem; }
summary { cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; font-weight:500; color:var(--soft); }
details[open] summary::after { content:"–"; }
details p { margin-top:.6rem; color:var(--text-secondary); }
.others { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; }
.mini { --c:var(--c-script); display:flex; align-items:center; gap:.95rem; padding:1.05rem 1.15rem; background:var(--card); border:1px solid var(--hair-soft);
        border-radius:18px; box-shadow:var(--shadow); transition:transform .2s, border-color .2s; }
.mini:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--c) 45%, var(--hair-soft)); }
.mini img { width:46px; height:46px; flex:none; filter:drop-shadow(0 4px 8px var(--drop)); }
.mini b { display:block; font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.mini span { display:block; color:var(--text-secondary); font-size:.86rem; line-height:1.35; margin-top:.1rem; }

/* ---------- alatunniste ---------- */
footer { margin-top:6rem; padding-block:2.2rem 3rem; border-top:1px solid var(--hair-soft); }
.f-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.2rem 2rem; }
.f-links { display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; font-size:.9rem; color:var(--text-secondary); font-weight:500; }
.f-links a:hover { color:var(--text-primary); }
footer .legal { margin-top:1.5rem; color:var(--text-secondary); font-size:.88rem; }
footer .legal a { text-decoration:underline; text-underline-offset:2px; }
footer .fine { margin-top:.5rem; color:var(--soft); font-size:.8rem; }


/* ---------- pienet näytöt ---------- */
@media (max-width:980px) {
  .feature, .feature.rev { grid-template-columns:1fr; gap:1.6rem; }
  .feature.rev .copy { order:0; }
  .points { grid-template-columns:1fr; }
  .tiles { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:720px) {
  .hide-sm { display:none; }
  .hero { padding-top:3rem; }
  .sec { padding-top:3.6rem; }
  footer { margin-top:4rem; }
}
@media (max-width:560px) {
  .tiles { grid-template-columns:1fr; }
  .app { flex-basis:100%; max-width:none; }
  .bar .wm i { display:none; }
  .bar nav { gap:.7rem; }
  .theme-switch .tb { width:30px; height:30px; }
  .stage { padding-inline:1rem; }
}

/* Uutiskirjelomake alatunnisteessa (2.11.2026) */
.news { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; padding-bottom:1.8rem; margin-bottom:1.8rem; border-bottom:1px solid var(--hair-soft); }
.news-copy { display:flex; flex-direction:column; gap:.25rem; max-width:34rem; }
.news-copy span { color:var(--text-secondary); font-size:.92rem; }
.news-form { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; flex:1 1 20rem; max-width:30rem; }
.news-form input[type=email] { flex:1 1 12rem; min-width:0; padding:.62rem .9rem; border-radius:999px; border:1px solid var(--hair-soft); background:transparent; color:inherit; font:inherit; font-size:.95rem; }
.news-form input[type=email]:focus { outline:2px solid var(--accent, currentColor); outline-offset:2px; }
.news-msg { flex-basis:100%; margin:.15rem 0 0; min-height:1.2em; font-size:.86rem; color:var(--text-secondary); }
.news-msg.ok { color:var(--ok, #2f9e5f); } .news-msg.err { color:var(--err, #d4473a); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* Latauskortti: "Want release news?" (2.11.2026) */
.dl-card { position:fixed; right:max(16px, env(safe-area-inset-right,0px)); bottom:max(16px, env(safe-area-inset-bottom,0px)); z-index:60; width:min(360px, calc(100vw - 32px));
  display:flex; flex-direction:column; gap:.55rem; padding:1.1rem 1.1rem 1rem; border-radius:12px; background:var(--panel, #1f2025); color:inherit;
  border:1px solid var(--hair-soft); box-shadow:0 12px 32px rgba(0,0,0,.28); font-size:.92rem; }
.dl-card strong { font-size:1rem; padding-right:1.6rem; }
.dl-card span { color:var(--text-secondary); }
.dl-card .dl-x { position:absolute; top:.35rem; right:.5rem; background:none; border:0; color:inherit; font-size:1.4rem; line-height:1; cursor:pointer; opacity:.7; padding:.2rem .4rem; }
.dl-card .dl-x:hover { opacity:1; }
.dl-card .news-form { max-width:none; flex:0 0 auto; width:100%; }
.dl-card .news-msg { min-height:0; margin:0; }