/* Welcome page (1.9.16, concept B): one screen, no dialogs. Light only. Nothing below 14 px. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Onest,Arial,sans-serif;font-size:16px;color:#fff;background:#103a9c;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:inherit}
:is(a,button):focus-visible{outline:3px solid #ffdf57;outline-offset:3px;border-radius:6px}

.page{min-height:100vh;display:flex;flex-direction:column;position:relative;
  background:radial-gradient(ellipse at 80% 32%,#2f72ee 0%,transparent 56%),linear-gradient(125deg,#0e2f95,#1555dc 67%,#103a9c)}
.hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:0 80px 6px 56px;min-height:84px}
.brand{display:flex;align-items:center;gap:12px;font-size:19px;line-height:1.15;padding-top:20px}
.brand img{width:46px;height:46px;border-radius:11px}

/* where the icon is */
.pinhint{width:min(440px,100%);margin-left:auto;display:flex;flex-direction:column;align-items:flex-end}
.pinarrow{display:block;margin-right:120px;flex:none}   /* the icon: next to the puzzle piece, left of it */
body[data-pin="off"] .pinarrow{margin-right:82px}   /* the puzzle piece itself */
.bubble{background:#fff;color:#19335a;border-radius:16px;padding:14px 20px;font-size:18px;line-height:1.45;box-shadow:0 10px 30px #0006;margin-top:-2px}
.bubble b{color:#1555dc}
.mini{display:none;align-items:center;gap:10px;margin-top:10px;color:#445}
.mini img{border-radius:6px}
body[data-pin="off"] .mini{display:flex}

.hero{flex:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;padding:0 56px 20px;align-items:start}
h1{font-size:clamp(38px,4.4vw,54px);line-height:1.04;margin:6px 0 10px;letter-spacing:-1.4px}
h1 em{font-style:normal;color:#ffdf57}
.lead{font-size:19px;line-height:1.45;color:#e7efff;margin:0 0 16px;max-width:640px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.steps li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:16px;align-items:center;background:#fff;color:#14295a;border-radius:18px;padding:12px 18px;box-shadow:0 5px 0 #0b358e,0 14px 26px #0a1f6a55}
.num{width:48px;height:48px;border-radius:50%;background:#1555dc;color:#fff;font-weight:800;font-size:23px;display:grid;place-items:center}
.steps h2{font-size:23px;margin:0 0 2px;letter-spacing:-.4px}
.steps p{margin:0;font-size:17px;line-height:1.45;color:#3d5379}
.steps .vfe{display:block;border-radius:12px;margin:0}
.opts{display:flex;flex-wrap:wrap;gap:2px 16px;font-weight:700;color:#1c4abb!important;font-size:18px!important}
.fmts{font-size:19px!important;font-weight:800;color:#1c4abb!important;letter-spacing:.2px}
.more{display:inline-flex;align-items:center;min-height:48px;margin-top:6px;font-size:19px;font-weight:700;color:#ffdf57;text-decoration:underline;text-underline-offset:4px}

.art .card{border:1px solid #90b5ff;border-radius:18px;overflow:hidden;background:#1555dc;box-shadow:0 7px 0 #0b358e,0 22px 36px #08277470;margin-top:8px}
.art .card img{display:block;width:100%;height:auto}

/* "How each one works": one page, three cards */
.howpage{flex:1;padding:0 56px 28px}
.howhead{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 24px;margin:6px 0 12px}
.howhead h2{font-size:40px;margin:0;letter-spacing:-1px}
.howhead .back{margin:0}
.fmts2{margin:0;font-size:19px;font-weight:700;color:#ffdf57}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pcard{background:#fff;color:#14295a;border-radius:20px;padding:22px 24px;box-shadow:0 6px 0 #0b358e,0 18px 30px #0a1f6a66;display:flex;flex-direction:column}
.pcard h3{font-size:25px;margin:0 0 4px;color:#1555dc}
.pcard .for{font-size:17px;color:#4a6387;margin:0 0 12px;line-height:1.4}
.pcard ol{margin:0;padding-left:26px;font-size:18px;line-height:1.5;color:#2f4468}
.pcard li{margin:8px 0}.pcard li::marker{font-weight:800;color:#1555dc}
.pcard .note{font-size:16px;line-height:1.5;color:#4a6387;margin:10px 0 0}
.pcard .save{margin:auto 0 0;padding-top:12px;border-top:1px solid #dbe5f7;font-size:17px;line-height:1.5;color:#2f4468}

.foot{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;padding:16px 24px;border-top:1px solid #ffffff30;font-size:16px;color:#e4edff}
.foot a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.foot a:hover{text-decoration:underline}
.foot span,.foot a{display:inline-flex;align-items:center;min-height:44px}
.soon{font-weight:700}

@media (max-width:900px){
  .hdr{flex-direction:column;align-items:stretch;padding:0 20px 8px;gap:8px}
  .brand{padding-top:16px}
  .pinhint{width:100%;align-items:stretch;margin-left:0}
  .hero{grid-template-columns:minmax(0,1fr);gap:20px;padding:0 20px 24px}
  .art .card{margin-top:0}
  .howpage{padding:0 20px 24px}
  .cols{grid-template-columns:minmax(0,1fr)}
  .steps li{padding:14px 16px}
}
@media (max-width:760px){
  /* a narrow window: the hint is a plain note, without the arrow */
  .pinarrow{display:none}
  .bubble{margin-top:0}
}
.pcard .note{margin-bottom:14px}
@media (max-width:420px){.steps li{grid-template-columns:40px minmax(0,1fr) auto;gap:10px;padding:12px}.num{width:40px;height:40px;font-size:20px}.steps .vfe{width:40px;height:40px}.steps h2{font-size:21px}}
.foot a.soon{text-decoration:underline;text-underline-offset:3px}