/* Light by design. A landing page should not change character because the
   visitor's laptop happens to be in night mode. */
:root{
  --ink:#111827; --body:#4b5563; --faint:#6b7280;
  --line:#e5e7eb; --bg:#ffffff; --tint:#f8f9fc;
  --brand:#37327e; --brand-soft:#ecebf6; --brand-ink:#2a2663;
  --alarm:#d6193f; --alarm-soft:#fdeef1;
  --good:#0f766e; --good-soft:#e6f4f2;
  --amber:#b45309; --amber-soft:#fef3e2;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px -12px rgba(16,24,40,.14);
  --shadow-lg:0 2px 4px rgba(16,24,40,.04), 0 24px 48px -20px rgba(16,24,40,.22);
  --r:14px; --max:70rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max); margin:0 auto; padding:0 1.5rem}
.narrow{max-width:46rem}
a{color:var(--brand); text-decoration:none}
p{margin:0 0 1rem; color:var(--body)}
h1,h2,h3,h4{color:var(--ink); margin:0 0 .75rem; letter-spacing:-.025em; line-height:1.15}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem); font-weight:800; letter-spacing:-.038em}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem); font-weight:800}
h3{font-size:1.14rem; font-weight:700}
h4{font-size:.96rem; font-weight:700}
.eyebrow{font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--brand); margin:0 0 .85rem}
.lede{font-size:1.19rem; color:var(--body); line-height:1.6}
.small{font-size:.93rem}.tiny{font-size:.83rem}.muted{color:var(--faint)}.center{text-align:center}
section{padding:5.5rem 0}
.tinted{background:var(--tint); border-block:1px solid var(--line)}
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0}
.logo{font-weight:800; font-size:1.22rem; letter-spacing:-.035em; color:var(--ink);
  display:inline-flex; align-items:center; gap:.52rem; text-decoration:none}
.logo .mark{width:1.85rem; height:1.85rem; flex:none; border-radius:.5rem; background:var(--brand);
  color:#fff; display:grid; place-items:center; font-size:1.3rem; line-height:1; letter-spacing:-.04em;
  padding-bottom:.1rem}
.logo b{color:var(--brand)}
.navlinks{display:none; gap:1.6rem; font-size:.92rem; font-weight:500}
.navlinks a{color:var(--body)}.navlinks a:hover{color:var(--ink)}
@media(min-width:980px){.navlinks{display:flex}}
.btn{display:inline-block; border-radius:10px; padding:.72rem 1.3rem; font-size:.95rem; font-weight:600;
  border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:transform .12s ease, background .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn-solid{background:var(--brand); color:#fff; box-shadow:0 6px 16px -6px rgba(55,50,126,.6)}
.btn-solid:hover{background:var(--brand-ink)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:#fff}
.btn-lg{padding:.95rem 1.8rem; font-size:1.02rem}
.btn-row{display:flex; flex-wrap:wrap; gap:.8rem}
/* padding-block, not the padding shorthand. On the English page the classes
   are on one element, <div class="wrap hero">, and the shorthand's 0 wiped the
   1.5rem side padding .wrap supplies: at 390px the headline and now the video
   ran edge to edge with no gutter. The Greek page nests them and never showed
   it. Logical axis only, so .wrap keeps the inline padding. */
.hero{padding-block:4.5rem 4rem}
/* Four children, not two: the headline, the video, the lede and the call to
   action. On a phone they stack in DOM order, so the player sits between the
   headline and the explanation and is fully inside the first screen. Stacked
   any later it fell below the fold: the Greek lede alone runs ten lines at
   390px. The headline still comes first and is never pushed off.
   On desktop the video is placed explicitly in column two and spans all three
   rows, so the left column still reads headline, lede, buttons. */
.hero-grid{display:grid; gap:1.8rem}
@media(min-width:960px){
  .hero-grid{grid-template-columns:1.05fr .95fr; column-gap:4rem; row-gap:1.4rem; align-items:start}
  .hero-copy{grid-column:1; grid-row:1}
  .hero-lede{grid-column:1; grid-row:2}
  .hero-cta {grid-column:1; grid-row:3; margin-top:.8rem}
  .hero-vid {grid-column:2; grid-row:1 / span 3; align-self:center}
}
.pill{display:inline-flex; align-items:center; gap:.5rem; background:var(--brand-soft); color:var(--brand-ink);
  border-radius:999px; padding:.4rem .9rem; font-size:.82rem; font-weight:600; margin-bottom:1.5rem}
.dot{width:7px;height:7px;border-radius:50%;background:var(--good)}
.trust{display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; margin-top:1.9rem; font-size:.87rem; color:var(--faint); font-weight:500}
.trust span::before{content:"✓ "; color:var(--good); font-weight:800}
.device{background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-lg); overflow:hidden; max-width:26rem; margin:0 auto; width:100%}
.device-top{background:var(--brand); color:#fff; padding:.9rem 1.15rem; display:flex; align-items:center; justify-content:space-between}
.device-top strong{font-size:.98rem}.device-top span{font-size:.76rem; opacity:.75}
.device-body{padding:.6rem}
.row{border-bottom:1px solid var(--line); padding:.95rem .8rem}.row:last-child{border-bottom:0}
.row-head{display:flex; justify-content:space-between; align-items:baseline; gap:.75rem}
.row-name{font-weight:700; font-size:.98rem; color:var(--ink)}
.row-val{font-size:.82rem; color:var(--faint); white-space:nowrap; font-weight:600}
.row-why{font-size:.85rem; color:var(--body); margin:.28rem 0 0; line-height:1.5}
.tag{display:inline-block; border-radius:6px; padding:.13rem .48rem; font-size:.71rem; font-weight:700; margin-top:.5rem}
.tag-good{background:var(--good-soft); color:var(--good)}
.tag-alarm{background:var(--alarm-soft); color:var(--alarm)}
.tag-brand{background:var(--brand-soft); color:var(--brand-ink)}
.caption{text-align:center; font-size:.83rem; color:var(--faint); margin-top:1rem}
.grid{display:grid; gap:1.6rem}
.g2{grid-template-columns:1fr}.g3{grid-template-columns:1fr}
@media(min-width:760px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.7rem; box-shadow:var(--shadow)}
.card h3,.card h4{margin-bottom:.4rem}.card p{margin:0; font-size:.95rem}
.step-n{width:2.1rem; height:2.1rem; border-radius:10px; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; margin-bottom:1rem}
.stat{font-size:clamp(1.9rem,4.2vw,2.7rem); font-weight:800; letter-spacing:-.035em; color:var(--brand); line-height:1.1}
.stat-l{font-size:.9rem; color:var(--body); margin-top:.35rem}
.case{background:var(--brand); color:#fff; border-radius:20px; padding:clamp(2rem,4vw,3.2rem)}
.case h2{color:#fff}.case p{color:rgba(255,255,255,.82)}
.case .stat{color:#fff}.case .stat-l{color:rgba(255,255,255,.75)}
.case-grid{display:grid; gap:2rem; margin-top:2.2rem}
@media(min-width:760px){.case-grid{grid-template-columns:repeat(4,1fr)}}
.quote{border-left:3px solid rgba(255,255,255,.35); padding-left:1.2rem; margin-top:2.2rem; font-size:1.05rem}
:root[data-region="eu"] .scen[data-region="eu"]{order:-1}
.scen{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.6rem; box-shadow:var(--shadow)}
.scen .where{font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); margin-bottom:.55rem}
.scen h4{font-size:1.02rem; margin-bottom:.5rem}
.scen p{font-size:.93rem; margin:0}
.scen .out{margin-top:.9rem; padding-top:.9rem; border-top:1px dashed var(--line); font-size:.9rem; color:var(--good); font-weight:600}
.plan{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:2rem; box-shadow:var(--shadow); display:flex; flex-direction:column}
.plan.featured{border:2px solid var(--brand); box-shadow:var(--shadow-lg); position:relative}
.badge{position:absolute; top:-.8rem; left:50%; transform:translateX(-50%); background:var(--brand); color:#fff;
  font-size:.72rem; font-weight:700; padding:.3rem .8rem; border-radius:999px}
.amount{font-size:2.6rem; font-weight:800; letter-spacing:-.04em; margin:.6rem 0 .1rem}
.amount small{font-size:.92rem; font-weight:500; color:var(--faint); letter-spacing:0}
.ticks{list-style:none; padding:0; margin:1.3rem 0 1.8rem; flex:1}
.ticks li{position:relative; padding-left:1.6rem; margin-bottom:.62rem; font-size:.93rem; color:var(--body)}
.ticks li::before{content:"✓"; position:absolute; left:0; color:var(--good); font-weight:800}
.compare{width:100%; border-collapse:collapse; font-size:.95rem; margin-top:1.5rem}
.compare th,.compare td{padding:.85rem 1rem; text-align:left; border-bottom:1px solid var(--line)}
.compare th{font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--faint)}
.compare td:first-child{font-weight:600; color:var(--ink)}
.compare tr:last-child td{border-bottom:0}
.ours{color:var(--good); font-weight:700}
.scroll{overflow-x:auto}
details{border-bottom:1px solid var(--line); padding:1.25rem 0}
details summary{cursor:pointer; font-weight:650; font-size:1.03rem; color:var(--ink); list-style:none; display:flex; justify-content:space-between; gap:1rem}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; color:var(--brand); font-weight:800; font-size:1.3rem; line-height:1}
details[open] summary::after{content:"–"}
details p{margin:.85rem 0 0; font-size:.96rem}
.band{background:var(--brand); border-radius:20px; padding:clamp(2.2rem,4vw,3.4rem); text-align:center}
.band h2{color:#fff}.band p{color:rgba(255,255,255,.85)}
.band .btn-solid{background:#fff; color:var(--brand); box-shadow:none}
.band .btn-ghost{background:transparent; border-color:rgba(255,255,255,.4); color:#fff}
footer{border-top:1px solid var(--line); padding:3rem 0 4rem; font-size:.9rem}
.foot{display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:center; color:var(--faint)}
.shots{display:grid;gap:1.6rem;grid-template-columns:1fr}
@media(min-width:760px){.shots{grid-template-columns:repeat(3,1fr)}}
.shot{text-align:center}
.shot img{width:100%;max-width:300px;border:1px solid #e3e3ee;border-radius:18px;
  box-shadow:0 10px 30px rgba(20,20,45,.10);display:block;margin:0 auto}
.shot p{margin:.9rem auto 0;max-width:300px;font-size:.92rem;color:#555569;text-align:left}
.shot b{color:#37327e}
.vidwrap{display:grid;gap:2rem;align-items:center;grid-template-columns:1fr;margin-bottom:3.2rem}
@media(min-width:860px){.vidwrap{grid-template-columns:300px 1fr}}
.vidwrap video{width:100%;max-width:300px;border:1px solid #e3e3ee;border-radius:18px;
  box-shadow:0 10px 30px rgba(20,20,45,.10);display:block;margin:0 auto;background:#fff}
.vidwrap h3{margin:0 0 .6rem}

/* The two minute video, in the hero of every market's home page (22 Oct 2026).
   aspect-ratio reserves the 16:9 box before the poster paints, so the hero
   does not reflow under the visitor on a slow connection, and the background
   is the brand purple rather than black because the poster is brand purple:
   a black flash on first paint reads as a broken file. */
.herovid{max-width:34rem; margin:0 auto; width:100%; scroll-margin-top:6rem}
.herovid video{width:100%; aspect-ratio:16/9; display:block; background:#37327e;
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg)}
.vlabel{margin:0 0 .75rem; text-align:center; font-weight:800; font-size:1.05rem;
  letter-spacing:-.01em; color:var(--ink)}

/* The phone mock keeps its place under the player on desktop, where the right
   column is taller than the video and would otherwise end in dead white. It is
   hidden on a phone so the hero stays short and the lede is still reachable:
   the same screens appear as pictures in See it a little further down.
   It is also the only markup on the page carrying data-eu, so without it a
   European visitor's euros and European company names have nothing to swap
   into and that localisation quietly does nothing. */
.herodev{display:none}
@media(min-width:960px){.herodev{display:block; margin-top:2.6rem}}