/* The blog (/blog/, /es/blog/) and the Features page, built by scripts/build-blog.py.
   Figma: Piirtopöytä • Markkinointi, section 4992:1290 (Etusivu 4995:1465, Artikkeli
   4995:1278, Mobiili 4995:1373, osat 4994:1262). Text styles Verkkosivu/<Desktop|Mobiili>/
   H1, H2, H3, Ingressi, Leipäteksti, Pieni, Pieni lihavoitu: the same numbers as page.css. */

/* Header: the front page's gym and peeking monkey, its see-through bar (home.css .nav) on top */
.bhero{position:relative; overflow:hidden; background:#0d141f; color:#fff}
.bhero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.bhero::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to right, rgba(13,20,31,.55), rgba(13,20,31,0) 60%)}
.bhero-apina{position:absolute; z-index:2; right:0; bottom:2px; width:845px; height:487px; object-fit:cover; object-position:right center; pointer-events:none}
.bhero-in{position:relative; z-index:3; display:flex; flex-direction:column; gap:12px; padding:192px 16px 104px max(16px, calc(50% - 360px))}
.bhero-in > *{margin:0; max-width:600px}
.bhero h1{font:400 56px/65px "Luckiest Guy", var(--font); color:#fff}
.bhero .crumb{font-size:15px; line-height:22px; font-weight:600}
.bhero .crumb a{color:#fff; text-decoration:none}
.bhero .lead{font-size:21px; line-height:32px; font-weight:300; color:#fff}
.bhero .meta{font-size:15px; line-height:22px; font-weight:400; color:#dce5ef}
.blog .page-main{padding-top:56px}
.blog .posts-main{background:#fff}

/* Answer box: Ingressi on white */
.blog .answer{margin:0; padding:20px 24px; border-radius:16px; background:#fff; font-size:21px; line-height:32px; font-weight:300; color:var(--blue80)}
.blog .col h2 + .answer{margin-top:10px}
.blog .qa h3 + p{margin-top:6px}

/* Blog front page: article rows (H2, Leipäteksti, Pieni) */
.blog .posts{margin-top:8px}
.blog .posts li{margin:0}
.blog .posts li::before{content:none}
.blog .posts a{display:flex; flex-direction:column; gap:6px; padding:20px 0; border-top:1px solid #dce5ef; text-decoration:none}
.blog .posts b{font-size:24px; line-height:30px; font-weight:600; color:var(--blue80)}
.blog .posts span{font-size:18px; line-height:27px; font-weight:300; color:#000}
.blog .posts time{font-size:15px; line-height:22px; color:#4c4c4c}

/* Get Chango: H1 with the stores and Pieni lihavoitu */
.blog .get{margin-top:56px; padding:32px 24px; border-radius:16px; background:linear-gradient(246.37deg, #346ba8 4.2%, #17293d 116.27%); text-align:center; color:#fff}   /* Figma Blogi/Get Chango 4995:1504: Gradient/ylä → Gradient/ala */
.blog .get h2{margin:0; font:400 56px/65px "Luckiest Guy", var(--font); color:#fff}
.blog .get h2 em{font-style:normal; color:#ffb31a; background:linear-gradient(90deg, #ffc421, #ff8c00); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.blog .stores{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:20px}
.blog .store{display:block; line-height:0}
.blog .store img{display:block; height:48px; width:auto}
.blog .get .trial{margin:16px 0 0; font-size:15px; line-height:22px; font-weight:600; color:#fff}

/* Lists, references, pictures, sources */
.blog .col ol{margin:14px 0 0; padding-left:24px}
.blog .col ol li{margin-top:6px; font-size:18px; line-height:27px; font-weight:300; color:#000}
.blog .col ol li::before{content:none}
.blog .col ul:not(.posts) li{padding-left:18px; text-indent:-12px}
.blog .col h2 + ol{margin-top:10px}
.blog .ref{font-size:.8em; vertical-align:super; line-height:0; text-decoration:none}
.blog figure.shot{margin:32px auto 0; max-width:420px; text-align:center}
/* The pictures are transparent and sit straight on the page (Jenni 24.10.2026: no box behind them); the phone
   gets the soft shadow of the front page's phones (home.css .phone-img) at the scale it has in the picture */
.blog figure.shot img, .blog figure.shot video{display:block; width:100%; height:auto;
  filter:drop-shadow(1px 5px 12px rgba(32,37,70,.2)) drop-shadow(5px 20px 22px rgba(32,37,70,.17)) drop-shadow(12px 45px 30px rgba(32,37,70,.1))}
.blog figure.figure-only img{filter:none}
.blog figure.shot figcaption{margin-top:10px; font-size:15px; line-height:22px; color:#4c4c4c}
.blog .sources li{font-size:15px; line-height:22px; scroll-margin-top:24px}
.blog .sources li:target{background:#fff; border-radius:6px}

@media (max-width:1099px){
  .bhero::before{background:linear-gradient(to bottom, rgba(15,28,46,.55) 10%, rgba(15,28,46,.2) 60%)}
  .bhero-apina{bottom:0; width:524px; height:302px}
  .bhero-in{padding:120px 16px 56px; max-width:62%}
  .bhero h1{font-size:30px; line-height:36px}
  .bhero .crumb, .bhero .meta{font-size:14px; line-height:20px}
  .bhero .lead{font-size:17px; line-height:26px}
  .blog .page-main{padding-top:32px}
  .blog .answer{padding:16px 18px; font-size:17px; line-height:26px}
  .blog .posts b{font-size:21px; line-height:26px}
  .blog .posts span{font-size:16px; line-height:24px}
  .blog .posts time{font-size:14px; line-height:20px}
  .blog .get h2{font-size:30px; line-height:36px}
  .blog .get .trial{font-size:14px; line-height:20px}
  .blog .col ol li{font-size:16px; line-height:24px}
  .blog .sources li, .blog figure.shot figcaption{font-size:14px; line-height:20px}
}
/* Before launch the end box asks to join the wait list on the front page (build-blog.py LAUNCHED) */
.blog .get .wl-btn{display:inline-flex; align-items:center; justify-content:center; height:48px; margin-top:20px; padding:0 28px; border-radius:24px;
  background:linear-gradient(90deg, #ffc421, #ff8c00); color:#000; font:600 16px/24px var(--font); text-decoration:none}

/* Comparison tables and choice cards (Jenni 2.11.2026: "Pitäisi olla visuaalisempi", card web-blogi-visuaalit) */
.blog .table-wrap{margin:24px 0 0; overflow-x:auto; border-radius:16px; background:#fff; box-shadow:0 1px 0 #dce5ef;
  -webkit-overflow-scrolling:touch}
.blog .table-wrap:focus-visible{outline:2px solid var(--blue80); outline-offset:2px}
.blog table.compare{width:100%; border-collapse:collapse; font-size:15px; line-height:21px; color:#000}
.blog table.compare th, .blog table.compare td{padding:12px 14px; text-align:left; vertical-align:top; border-top:1px solid #e6edf5; font-weight:300}
.blog table.compare thead th{border-top:0; font-size:13px; line-height:18px; font-weight:600; color:var(--blue80); vertical-align:bottom}
.blog table.compare tbody th{font-weight:600; color:var(--blue80); white-space:nowrap}
.blog table.compare .mark{text-align:center}
/* Chango's row: the page and the table are blue already, so the row is lifted with the orange of the glow (Jenni 2.11.2026) */
.blog table.compare tbody tr.ours{background:#fff1dc}
.blog table.compare tbody tr.ours th{color:#a15c00}
.blog table.compare tbody tr.ours th, .blog table.compare tbody tr.ours td{font-weight:600}
.blog ul.choices{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin:20px 0 0; padding:0; list-style:none}
.blog .col ul.choices li{display:flex; flex-direction:column; gap:6px; margin:0; padding:16px 18px; text-indent:0; border-radius:16px; background:#fff;
  font-size:17px; line-height:25px; font-weight:300; color:#000}
.blog ul.choices li::before{content:none}
.blog ul.choices b{font-weight:600; color:var(--blue80)}
@media (max-width:1099px){
  .blog table.compare{font-size:14px; line-height:20px; min-width:640px}
  .blog table.compare th, .blog table.compare td{padding:10px 12px}
  .blog table.compare tbody th{position:sticky; left:0; z-index:1; background:#fff; box-shadow:1px 0 0 #e6edf5}
  .blog table.compare tbody tr.ours th{background:#fff1dc}
  .blog ul.choices{grid-template-columns:1fr}
  .blog .col ul.choices li{font-size:16px; line-height:24px}
}