/* Landing page round 2 (CLO-11): Nettipoika Studio demo preview, trial line and
   credit packs. Loaded after home-landing-v1.css; self-hosted fonts only. */

/* The result card's "Valmis!" sticker in English. */
html[lang=en] .sv-result:after{content:'Done!'}

/* A small picture of the finished page inside the result card. */
.sv-preview{margin:0 0 .9rem;border:2px solid var(--color-ink);border-radius:12px;overflow:hidden;background:#fff}
.sv-preview-bar{display:flex;align-items:center;gap:.6rem;padding:.4rem .7rem;background:var(--color-cream);border-bottom:2px solid var(--color-ink);min-width:0}
.sv-preview-dots{display:inline-flex;gap:.25rem;flex:none}
.sv-preview-dots i{width:.5rem;height:.5rem;border-radius:50%;border:1.5px solid var(--color-ink);background:#fff}
.sv-preview-dots i:first-child{background:var(--color-sun-400)}
.sv-preview-url{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;font-weight:600;color:var(--color-ink-700)}
.sv-preview-page{padding:.8rem .9rem .9rem;background:linear-gradient(135deg,#fff 0%,#fff 60%,var(--color-sky-100) 100%)}
.sv-preview-page strong{display:block;font:800 1.05rem/1.25 var(--font-display);color:var(--color-ink)}
.sv-preview-page ul{display:flex;flex-wrap:wrap;gap:.35rem;margin:.55rem 0 0;padding:0;list-style:none}
.sv-preview-page li{padding:.15rem .55rem;border:1.5px solid var(--color-ink);border-radius:999px;background:#fff;font-size:.75rem;font-weight:600;color:var(--color-ink)}

/* Price card: the trial line between the price and the start button. */
.sivusto-page .sv-price-trial{margin:1rem 0 0;padding:.7rem .9rem;background:var(--color-sun-100,#fff3c4);border-radius:10px;font-size:.9rem;line-height:1.55;color:var(--color-ink)}

/* Credit packs under the price columns. */
.sv-packs{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:.75rem 2rem;align-items:center;margin-top:2.5rem;padding:1.5rem 1.75rem;background:#fff;border:2px solid var(--color-ink);border-radius:16px;box-shadow:4px 4px 0 var(--color-ink);color:var(--color-ink-700)}
.sv-packs h3{margin:0 0 .4rem;font:800 1.2rem/1.25 var(--font-display);color:var(--color-ink)}
.sivusto-page .sv-packs-copy p{margin:0;font-size:.95rem;line-height:1.6}
.sv-pack-list{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.sv-pack-list li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.55rem .85rem;background:var(--color-cream);border:1.5px solid var(--color-ink);border-radius:10px;color:var(--color-ink);font-weight:600}
.sv-pack-list strong{font:800 1.05rem/1.2 var(--font-display);white-space:nowrap}
.sv-pack-bonus{margin-left:.35rem;padding:.05rem .45rem;border-radius:999px;background:var(--color-sun-400);font-style:normal;font-size:.75rem;font-weight:800}
.sivusto-page .sv-pack-fine{grid-column:2;margin:0;font-size:.8rem;line-height:1.5;color:var(--color-ink-500)}

/* The AI-service logos sit lower on the page when the Chat leads. */
.sv-services-late .sv-services{margin:4rem 0 1rem}

@media(max-width:767px){
  .sv-packs{grid-template-columns:minmax(0,1fr);padding:1.25rem}
  .sivusto-page .sv-pack-fine{grid-column:1}
  .sv-services-late .sv-services{margin-top:3rem}
}