/* iStom's tour pages (/tour, /tour/<section>). The same colours and components as the hand-made landing
   (brands/istom/static/index.html); the screenshots are the real app on demo data. */
:root{
  color-scheme: light;
  --ink:#101a2b; --ink-2:#2c3a52; --muted:#61708a; --line:#e2e8f4; --line-2:#edf1f9;
  --milk:#f6f9fd; --paper:#ffffff; --wash:#eef3fb;
  --brand:#526bb5; --brand-ink:#3f5693; --brand-tint:#e9eef9; --navy:#192443;
  --teal:#0b8ed2; --teal-tint:#e4f2fc;
  --r:14px; --shadow:0 1px 2px rgba(25,36,67,.05), 0 18px 40px -22px rgba(25,36,67,.30);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0}
body{background:var(--milk); color:var(--ink); font-family:-apple-system,"Segoe UI",Roboto,"Inter","Helvetica Neue",Arial,sans-serif;
     font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
.wrap{max-width:74rem; margin:0 auto; padding:0 24px}
@media (max-width:520px){ .wrap{padding:0 16px} }
a{color:var(--brand-ink); text-underline-offset:2px}
h1,h2{letter-spacing:-.022em; text-wrap:balance; line-height:1.15}
:focus-visible{outline:3px solid var(--brand); outline-offset:2px; border-radius:6px}

header{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--paper) 92%, transparent);
       backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line)}
header .row{display:flex; align-items:center; gap:18px; padding-block:13px}
.logo{display:flex; align-items:center; gap:9px; font-weight:750; font-size:1.22rem; letter-spacing:-.03em;
      color:var(--navy); text-decoration:none; margin-right:auto}
.logo .mk{width:26px; height:26px; flex:0 0 26px}
nav.top{display:flex; gap:22px; font-size:.97rem}
nav.top a{color:var(--ink-2); text-decoration:none}
nav.top a:hover,nav.top a[aria-current]{color:var(--brand-ink)}
nav.top a[aria-current]{font-weight:650}
@media (max-width:860px){ nav.top{display:none} }
.hdr-phone{color:var(--ink); text-decoration:none; font-weight:640; font-size:.97rem; white-space:nowrap}
@media (max-width:1080px){ .hdr-phone{display:none} }
@media (max-width:520px){ .hide-s{display:none} }
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:10px; font-weight:640;
     text-decoration:none; padding:11px 18px; border:1px solid transparent; white-space:nowrap;
     transition:background .2s, border-color .2s, color .2s, transform .2s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--brand); color:#fff} .btn-primary:hover{background:var(--brand-ink)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:var(--paper)} .btn-ghost:hover{border-color:var(--brand); color:var(--brand-ink)}
.btn-lg{padding:14px 24px; font-size:1.03rem}

/* section tabs: one row, scrolls sideways on a phone instead of wrapping */
.tabs{background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:65px; z-index:15}
.tabs .wrap{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-block:8px}
.tabs .wrap::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto; padding:7px 14px; border-radius:999px; color:var(--ink-2); text-decoration:none; font-size:.95rem}
.tabs a:hover{background:var(--wash)}
.tabs a[aria-current]{background:var(--brand); color:#fff; font-weight:640}

.hero{padding-block:54px 18px}
.hero h1{font-size:clamp(2rem,4.4vw,3rem); margin:8px 0 14px}
.hero .lead{font-size:1.18rem; color:var(--muted); margin:0; max-width:46rem}
.crumbs{margin:0; font-size:.9rem; color:var(--muted)} .crumbs a{color:var(--muted)}

.feat{padding-block:44px}
.feat + .feat{border-top:1px solid var(--line-2)}
.two{display:grid; gap:44px; grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr); align-items:center}
.feat.flip .two{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr)} .feat.flip .txt{order:2}
.feat.narrow .two{grid-template-columns:1fr 1fr}
@media (max-width:980px){ .two,.feat.flip .two,.feat.narrow .two{grid-template-columns:1fr; gap:24px} .feat.flip .txt{order:0} }
.feat h2{font-size:clamp(1.45rem,2.6vw,1.9rem); margin:0 0 16px}
ul.ticks{list-style:none; padding:0; margin:0}
ul.ticks li{position:relative; padding-left:28px; margin-bottom:12px; color:var(--ink-2)}
ul.ticks li::before{content:""; position:absolute; left:0; top:.42em; width:16px; height:16px; border-radius:50%; background:var(--teal-tint)}
ul.ticks li::after{content:""; position:absolute; left:5px; top:.72em; width:6px; height:3px;
  border-left:2px solid var(--teal); border-bottom:2px solid var(--teal); transform:rotate(-45deg)}

.shot{margin:0; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.shot .bar{display:flex; align-items:center; gap:7px; padding:9px 14px; border-bottom:1px solid var(--line-2); background:var(--wash)}
.shot .bar i{width:9px; height:9px; border-radius:50%; background:var(--line)}
.shot .bar span{margin-left:8px; font-size:.8rem; color:var(--muted)}
.shot .zoom{display:block; cursor:zoom-in}
.shot.phone{max-width:300px; margin-inline:auto; border-radius:34px; border:8px solid var(--navy); box-shadow:var(--shadow)}
.more{margin:0 0 30px}

.pager{display:flex; justify-content:space-between; gap:16px; padding-block:26px 50px}
.pager a{font-weight:640; text-decoration:none}

.tiles{display:grid; gap:20px; grid-template-columns:repeat(3,1fr); padding-bottom:60px}
@media (max-width:980px){ .tiles{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .tiles{grid-template-columns:1fr} }
.tile{display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
      overflow:hidden; text-decoration:none; color:var(--ink); transition:transform .25s, box-shadow .25s, border-color .25s}
.tile:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--brand) 35%, var(--line))}
.tile .thumb{display:block; aspect-ratio:16/10; overflow:hidden; background:var(--wash); border-bottom:1px solid var(--line-2)}
.tile .thumb img{width:100%; height:100%; object-fit:cover; object-position:left top; transition:transform .5s}
.tile:hover .thumb img{transform:scale(1.04)}
.tile .t{display:block; padding:16px 18px 20px}
.tile b{display:block; font-size:1.06rem; margin-bottom:4px}
.tile .t span{color:var(--muted); font-size:.94rem}

.cta{background:var(--wash); border-top:1px solid var(--line)}
.cta .in{display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; padding-block:50px}
.cta h2{margin:0 0 6px; font-size:clamp(1.45rem,3vw,1.9rem)}
.cta p{margin:0; color:var(--muted)}
.cta .btns{display:flex; gap:12px; flex-wrap:wrap}
footer{border-top:1px solid var(--line); padding-block:28px; font-size:.92rem; color:var(--muted)}
footer .cols{display:flex; gap:28px; flex-wrap:wrap; justify-content:space-between}
footer p{margin:0} footer a{color:var(--ink-2)}
.fact-placeholder{background:#fdf4e3; color:#b9770a; border-radius:3px; padding:0 .25em}

/* lightbox for a screenshot opened large */
.lb{position:fixed; inset:0; z-index:50; background:rgba(16,26,43,.82); display:grid; place-items:center; padding:24px; cursor:zoom-out;
    opacity:0; transition:opacity .25s}
.lb.on{opacity:1}
.lb img{max-width:min(1600px,100%); max-height:100%; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.4)}

/* motion: only when the script marked <html> and nobody asked for less of it */
@media (prefers-reduced-motion: no-preference){
  .hero .wrap{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  html.js .rv{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
  html.js .rv.in{opacity:1; transform:none}
  html.js .rv-kids > *{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
  html.js .rv-kids.in > *{opacity:1; transform:none}
  html.js .rv-kids.in > *:nth-child(2){transition-delay:.07s} html.js .rv-kids.in > *:nth-child(3){transition-delay:.14s}
  html.js .rv-kids.in > *:nth-child(4){transition-delay:.21s} html.js .rv-kids.in > *:nth-child(5){transition-delay:.28s}
  html.js .rv-kids.in > *:nth-child(6){transition-delay:.35s} html.js .rv-kids.in > *:nth-child(7){transition-delay:.42s}
  html.js .shot{transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s}
  html.js .shot:hover{transform:translateY(-4px)}
  html.js ul.ticks li{opacity:0; transform:translateX(-10px); transition:opacity .5s ease, transform .5s ease}
  html.js .rv.in ul.ticks li{opacity:1; transform:none}
  html.js .rv.in ul.ticks li:nth-child(2){transition-delay:.12s} html.js .rv.in ul.ticks li:nth-child(3){transition-delay:.24s}
}
@keyframes rise{from{opacity:0; transform:translateY(20px)}to{opacity:1; transform:none}}