/* ==========================================================================
   EU Residents — shared stylesheet
   Extracted from the per-page inline <style> blocks (2026-07-28).
   Rendering is unchanged: page-specific values are scoped by the body class
   (.page-home, .page-how, .page-faq, .page-about, .page-privacy).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root{
  --navy-900:#08162d;
  --navy-700:#10213f;
  --blue:#1746a2;

  --ink:#172033;
  --muted:#5d687b;
  --muted-nav:#4f5b70;
  --on-dark:#d9e1ef;
  --on-dark-soft:#d5dceb;
  --on-dark-footer:#cfd6e3;

  --panel:#f5f7fb;
  --line:#e7ebf2;
  --line-header:#e8e8e8;

  --note-bg:#fff7e8;
  --note-line:#f0d29b;
  --note-ink:#8a5a00;

  --radius:18px;
  --radius-lg:20px;
  --shadow:0 8px 24px rgba(0,0,0,.04);
  --container:1180px;

  /* Hero — overridden per page in section 9 */
  --hero-height:68vh;
  --hero-image:url("../img/hero-main.jpg");
  --hero-veil:rgba(7,15,32,.72);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:90%;max-width:var(--container);margin:0 auto}

/* --------------------------------------------------------------------------
   3. Header / navigation
   -------------------------------------------------------------------------- */
header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line-header);z-index:100}
.nav{display:flex;justify-content:space-between;align-items:center;padding:22px 0}
.logo{font-size:22px;font-weight:700}
.menu{display:flex;gap:24px;align-items:center}
.menu a{font-size:15px;color:var(--muted-nav)}
.btn{display:inline-block;background:var(--blue);color:#fff;padding:14px 24px;border-radius:8px;font-weight:700;white-space:nowrap}
.btn:hover{opacity:.92}

/* "Call/Text" qualifier after a phone number — sized in em and dimmed with
   opacity so it reads correctly on both the light header and the dark buttons */
.tel-note{font-size:.9em;font-weight:400;opacity:.75;white-space:nowrap}

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */
.hero{
  min-height:var(--hero-height);
  display:flex;
  align-items:center;
  background:
    linear-gradient(var(--hero-veil),var(--hero-veil)),
    var(--hero-image) center/cover no-repeat;
  color:#fff;
}
.hero-content{max-width:820px}
.hero-label{display:inline-block;background:rgba(255,255,255,.12);padding:8px 14px;border-radius:30px;font-size:14px;margin-bottom:24px}
.hero p{font-size:22px;color:var(--on-dark);margin-bottom:36px;max-width:760px}
.hero-buttons{display:flex;gap:16px;flex-wrap:wrap}
.btn-secondary{background:transparent;border:1px solid rgba(255,255,255,.35)}

/* --------------------------------------------------------------------------
   5. Typography & text blocks
   -------------------------------------------------------------------------- */
section{padding:90px 0}
h1{font-size:58px;line-height:1.05;margin-bottom:24px;letter-spacing:-2px}
h2{font-size:42px;line-height:1.1;margin-bottom:20px;letter-spacing:-1px}
.section-intro{max-width:800px;color:var(--muted);font-size:19px;margin-bottom:50px}
.text-block{max-width:820px}
.text-block p{color:var(--muted);font-size:19px;margin-bottom:18px}
.text-block p:last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   6. Shared components
   -------------------------------------------------------------------------- */
.blue-section{background:var(--panel)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow)}
.card h3{font-size:24px;margin-bottom:14px}
.card p{color:var(--muted);font-size:17px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split img{border-radius:var(--radius-lg)}

.list{list-style:none;margin-top:24px}
.list li{margin-bottom:14px;padding-left:30px;position:relative;color:var(--muted)}
.list li:before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:bold}

.note{background:var(--note-bg);border:1px solid var(--note-line);border-radius:var(--radius);padding:30px;color:var(--muted);font-size:17px}
.note strong{color:var(--note-ink)}

.contact-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:36px;font-size:18px}
.contact-box p{margin-bottom:12px}
.contact-box a{color:var(--blue);font-weight:700}

.cta{background:var(--navy-700);color:#fff;text-align:center;padding:100px 20px}
.cta h2{max-width:820px;margin:0 auto 20px}
.cta p{max-width:720px;margin:0 auto 34px;color:var(--on-dark-soft);font-size:20px}

footer{background:var(--navy-900);color:var(--on-dark-footer);padding:34px 0;font-size:14px}
.footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* --------------------------------------------------------------------------
   7. How it works — steps & timeline
   -------------------------------------------------------------------------- */
.steps{display:grid;gap:24px;max-width:920px}
.step{display:grid;grid-template-columns:76px 1fr;gap:24px;align-items:flex-start}
.step-number{
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:22px;
}
.step-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.step-box h3{font-size:24px;margin-bottom:10px}
.step-box p{color:var(--muted);font-size:17px}

.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.timeline-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.timeline-item strong{display:block;color:var(--blue);margin-bottom:8px}
.timeline-item h3{font-size:22px;margin-bottom:10px}
.timeline-item p{color:var(--muted);font-size:16px}

/* --------------------------------------------------------------------------
   8. FAQ & privacy policy
   -------------------------------------------------------------------------- */
.faq-wrap{max-width:960px}
.faq-item{border-bottom:1px solid var(--line);padding:30px 0}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-item h3{font-size:24px;margin-bottom:12px}
.faq-item p{color:var(--muted);font-size:18px}

.policy-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:50px;
  box-shadow:var(--shadow);
}
.policy-box h2{font-size:32px;margin-top:46px;margin-bottom:16px;line-height:1.2;letter-spacing:normal}
.policy-box h2:first-child{margin-top:0}
.policy-box p{color:var(--muted);font-size:18px;margin-bottom:18px}
.policy-box ul{margin-left:22px;margin-bottom:20px}
.policy-box li{color:var(--muted);font-size:18px;margin-bottom:10px}

/* --------------------------------------------------------------------------
   9. Page-scoped values
   -------------------------------------------------------------------------- */
.page-home{--hero-height:92vh;--hero-image:url("../img/hero-main.jpg");--hero-veil:rgba(7,15,32,.70)}
.page-how{--hero-height:72vh;--hero-image:url("../img/how-it-works-hero.jpg")}
.page-faq{--hero-height:62vh;--hero-image:url("../img/faq-hero.jpg")}
.page-about{--hero-height:68vh;--hero-image:url("../img/about-hero.jpg")}
.page-privacy{--hero-height:56vh;--hero-image:url("../img/privacy-hero.jpg")}

/* Home — larger display type and roomier check-lists */
.page-home h1{font-size:62px}
.page-home h3{font-size:28px;line-height:1.2;margin-bottom:16px;letter-spacing:-.5px}
.page-home .list{margin-bottom:24px}
.page-home .list li{font-size:19px}

/* About */
.page-about .hero-content{max-width:850px}

/* FAQ */
.page-faq .note{max-width:960px}
.page-faq .contact-box{background:#fff;max-width:760px}

/* Privacy policy — narrower measure, looser leading */
.page-privacy{line-height:1.7}
.page-privacy .container{max-width:1000px}
.page-privacy h1{font-size:56px}
.page-privacy .hero p{margin-bottom:0}
.page-privacy .note{margin-top:40px}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */
/* Between 900 and 1000px the header runs out of room on the home page, which is
   the only one carrying a phone number in the nav. Drop the "Call/Text" note
   there — the number stays, and the note is still shown in the hero button,
   the contact box and the footer. */
@media(max-width:1000px){
  .menu .tel-note{display:none}
}

@media(max-width:900px){
  /* the page-scoped sizes in section 9 are more specific, so they are
     restated here — otherwise they would win over the mobile size */
  h1,
  .page-home h1,
  .page-privacy h1{font-size:42px}
  h2{font-size:34px}
  .grid-3,
  .split,
  .step,
  .timeline{grid-template-columns:1fr}
  .menu{display:none}
  .hero{min-height:auto;padding:110px 0}
  .policy-box{padding:30px}
}