/* EasyClaims — new brand base (from the Casinoliste export). Shared by all mockups.
   Needs design-system/tokens.css loaded BEFORE this file (all colours, sizes, spacing, radii live there). */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--deep);font-family:Manrope,Arial,sans-serif;font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800}
p{margin:0}
.wrap{width:min(1180px,calc(100% - 40px));margin:auto}

/* type */
.eyebrow{color:var(--green-ink);font-size:var(--fs-caption);font-weight:800;letter-spacing:var(--ls-label);text-transform:uppercase}
.on-deep .eyebrow,.eyebrow.lt{color:var(--green)}
.h2{font-size:var(--fs-h2);line-height:1.03;letter-spacing:var(--ls-h2)}
.lead{font-size:var(--fs-lead);line-height:1.65;color:var(--muted)}
.on-deep .lead{color:var(--on-deep)}
.hl{color:var(--green)}
.mark{background:linear-gradient(transparent 58%,var(--green) 58% 92%,transparent 92%);padding:0 .06em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 26px;border-radius:999px;background:var(--green);color:var(--deep)!important;text-decoration:none;font:800 16px Manrope,Arial,sans-serif;border:0;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -8px rgba(45,230,173,.7)}
.btn:focus-visible{outline:3px solid var(--deep);outline-offset:3px}
.btn.dark{background:var(--deep);color:#fff!important}
.btn.dark:hover{box-shadow:0 10px 24px -8px rgba(5,42,29,.6)}
.btn.ghost{background:transparent;color:var(--deep)!important;box-shadow:inset 0 0 0 2px var(--line)}
.btn.block{width:100%}
.btn.lg{min-height:60px;font-size:var(--fs-body)}
.btn .arr{transition:transform .15s}
.btn:hover .arr{transform:translateX(3px)}

/* pills */
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font-size:var(--fs-caption);font-weight:800;line-height:1}
.pill.no{background:var(--no-bg);color:var(--no)}
.pill.no:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--no-dot)}
.pill.yes{background:var(--mint);color:var(--deep)}
.pill.yes:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green-600)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--mint);font-size:var(--fs-caption);font-weight:800}

/* top bar + header */
.top{background:var(--deep);color:#fff;font-size:var(--fs-caption)}
.top .wrap{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.top a{color:var(--green);text-decoration:none;font-weight:800}
.hdr{height:78px;border-bottom:1px solid var(--line);background:#fff}
.hdr .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo img{width:176px;height:auto}
.hdr-r{display:flex;align-items:center;gap:22px}
.tel{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:var(--fs-small);text-decoration:none}
.tel svg{width:18px;height:18px;color:var(--green-600)}


/* site nav (topbar + sticky header) — matches the client's homepage mockup exactly */
.topbar{background:var(--deep);color:var(--mint);font:400 var(--fs-note)/1.55 var(--font-nav);padding:9px 0}
.topbar .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.topbar a{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:inherit;text-decoration:none}
.topbar a:hover{color:var(--green)}
.topbar svg{width:15px;height:15px;stroke:var(--green)}
.topbar .sep,.topbar-note{color:var(--mint)}
.site-hdr{position:sticky;top:0;z-index:40;height:78px;display:flex;align-items:center;border-bottom:1px solid rgba(5,42,29,.08);background:rgba(251,253,252,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.site-hdr nav{display:flex;align-items:center;justify-content:space-between;gap:28px}
.site-hdr .logo{display:inline-flex;align-items:center;flex:none}
.site-hdr .logo img{display:block;width:197px;height:auto}
.site-hdr .links{display:flex;align-items:center;gap:30px;font:600 var(--fs-small)/1.55 var(--font-nav);color:var(--deep)}
.site-hdr .links a{color:inherit;text-decoration:none;white-space:nowrap}
.site-hdr .links a:not(.btn):hover{color:var(--green-ink)}
.site-hdr .links .btn{min-height:48px;padding:13px 22px;gap:10px;font:800 var(--fs-small)/1.2 var(--font-nav)}
.site-hdr .links .btn .arr{display:inline-flex;min-width:18px;justify-content:center;font-size:18px}
[id]{scroll-margin-top:96px}
@media(max-width:1080px){.site-hdr .links{gap:22px}}
@media(max-width:900px){.site-hdr .links a:not(.btn){display:none}}
/* mobile header: phone, mail, burger + drop-down menu (client 2026-10-20) */
.hdr-m{display:none;align-items:center;gap:4px}
.hdr-ico{display:inline-flex;align-items:center;gap:6px;height:44px;min-width:44px;justify-content:center;padding:0 8px;border-radius:var(--r-pill);color:var(--deep);text-decoration:none;font:800 var(--fs-note)/1 var(--font-nav);white-space:nowrap}
.hdr-ico svg,.mnav-c svg{width:20px;height:20px;flex:none;stroke:var(--green-ink)}
/* burger + menu: same as the client homepage (GeneratePress menu-toggle, 15px icon, 48px rows, green pill CTA) */
.burger{width:45px;height:48px;flex:none;border:0;background:transparent;color:#052a1d;display:grid;place-items:center;cursor:pointer;padding:0 15px;font-size:15px;line-height:48px}
.burger svg{width:1em;height:1em;fill:currentColor}
.burger .i-close,.burger[aria-expanded="true"] .i-open{display:none}
.burger[aria-expanded="true"] .i-close{display:block}
.mnav{position:absolute;left:0;right:0;top:100%;background:#fbfdfc;border-bottom:1px solid rgba(5,42,29,.08);padding:0 var(--gutter-sm) 4px;max-height:calc(100vh - 68px);overflow-y:auto}
.mnav[hidden]{display:none}
.mnav a:not(.mnav-cta){display:block;padding:0 15px;color:#052a1d;text-decoration:none;font:700 15px/48px var(--font-nav)}
.mnav-cta{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 4px 16px 20px;padding:13px 22px;border-radius:999px;background:#2cedaa;color:#052a1d;text-decoration:none;font:800 15px/1.2 var(--font-nav)}
@media(max-width:900px){.site-hdr .links{display:none}.hdr-m{display:flex}}
@media(min-width:901px){.mnav{display:none!important}}
@media(max-width:560px){.topbar{display:none}.site-hdr{height:68px}.site-hdr nav{gap:8px}.site-hdr .logo img{width:150px}}
@media(max-width:400px){.site-hdr .logo img{width:112px}.hdr-m{gap:2px}.hdr-ico{padding:0 2px;min-width:34px}}
@media(max-width:370px){.hdr-mail{display:none}}

/* checks */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-weight:600}
.ck{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--green);color:var(--deep)}
.ck svg{width:14px;height:14px}

/* calculator field */
.field{display:flex;align-items:stretch;border-radius:var(--r-sm);background:#fff;border:2px solid var(--line);transition:border-color .15s,box-shadow .15s}
.field:focus-within{border-color:var(--green);box-shadow:0 0 0 4px rgba(45,230,173,.2)}
.field input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:0 18px;height:58px;font:800 20px Manrope,Arial,sans-serif;color:var(--deep)}
.field input::placeholder{color:var(--muted-2);font-weight:600}
.field .cur{display:grid;place-items:center;padding:0 18px;font-weight:800;color:var(--muted);border-left:1px solid var(--line-2)}
.hint{margin-top:8px;font-size:var(--fs-note);font-weight:700;color:var(--no)}
.risk{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:14px 0 0;padding:0;list-style:none;font-size:var(--fs-note);font-weight:700;color:var(--muted)}
.risk li{display:inline-flex;align-items:center;gap:6px}
.risk li:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green-600)}
.on-deep .risk{color:var(--on-deep)}
.on-deep .risk li:before{background:var(--green)}

/* stars + reviews */
.stars{display:flex;gap:2px;color:var(--green-600);font-size:var(--fs-body);letter-spacing:2px;line-height:1}
.stars svg{width:18px;height:18px}
.badges{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.badges img{height:52px;width:auto}

/* FAQ */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-weight:800;font-size:var(--fs-body);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--mint);transition:transform .2s,background .2s}
.faq summary .pm:before{content:"+";font-size:var(--fs-h3);font-weight:700;line-height:1}
.faq details[open] summary .pm{transform:rotate(45deg);background:var(--green)}
.faq details p{padding:0 56px 24px 0;color:var(--muted);line-height:1.7}

/* footer */
.ftr{background:var(--deep);color:var(--on-deep);padding:48px 0 36px}
.ftr .wrap{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:start}
.ftr img.fl{width:170px}
.ftr a{color:var(--green);text-decoration:none;font-weight:700}
.ftr small{display:block;margin-top:28px;color:var(--on-deep-2);font-size:var(--fs-caption)}
.ftr-links{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:var(--fs-note)}
.ftr-contact{margin-top:18px;display:grid;gap:4px;font-size:var(--fs-small)}

/* sticky mobile CTA */
.sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;display:none;transform:translateY(140%);transition:transform .3s ease}
.sticky.on{transform:none}
@media(max-width:760px){.sticky{display:block}}

/* mock toast */
.mock-toast{position:fixed;left:50%;bottom:90px;z-index:60;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--deep);color:#fff;padding:12px 18px;border-radius:var(--r-sm);font-size:var(--fs-note);font-weight:700;box-shadow:var(--shadow-lg);transition:.25s;max-width:calc(100% - 32px)}
.mock-toast.on{opacity:1;transform:translate(-50%,0)}

/* load-in */
@media (prefers-reduced-motion:no-preference){
  .in{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .in.d1{animation-delay:.08s}.in.d2{animation-delay:.16s}.in.d3{animation-delay:.24s}.in.d4{animation-delay:.32s}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}

@media(max-width:560px){
  body{font-size:var(--fs-ui)}
  .wrap{width:min(100% - 32px,1180px)}
  .top{display:none}
  .hdr{height:66px}
  .logo img{width:148px}
  .tel span{display:none}
  .hdr .btn{display:none}
  .faq summary{font-size:var(--fs-ui)}
  .faq details p{padding-right:0}
  .ftr .wrap{grid-template-columns:1fr}
}