/* ExportMart AI — shared site styles (header, footer, new pages).
   Header/footer classes start with "xm-" so they never clash with the invoice tool's own CSS.
   New-page styles apply only inside <body class="xm">. */
:root{
  --xm-navy:#0a0f1e; --xm-navy2:#121a31; --xm-line:#25304d; --xm-mut:#a3abc0;
  --xm-orange:#e8500a; --xm-orange2:#ff7733; --xm-route:#ffb27a; --xm-green:#1a6b3c;
  --xm-paper:#f6f4ef; --xm-card:#ffffff; --xm-ink:#0a0f1e; --xm-text:#3d4457; --xm-soft:#6b7287; --xm-bd:#e6e2d8;
  --xm-display:'Syne',system-ui,sans-serif; --xm-body:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ───────── HEADER ───────── */
.xm-h,.xm-h *{box-sizing:border-box}
.xm-h{position:sticky;top:0;z-index:1000;background:rgba(10,15,30,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.07);font-family:var(--xm-body);line-height:1.4}
.xm-h-in{max-width:1180px;margin:0 auto;padding:0 20px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.xm-logo{font-family:var(--xm-display);font-weight:800;font-size:20px;letter-spacing:-.01em;color:#fff!important;text-decoration:none!important;white-space:nowrap}
.xm-logo b{color:var(--xm-orange);font-weight:800}
.xm-nav{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.xm-nav>li{position:relative;list-style:none;margin:0;padding:0}
.xm-nav a,.xm-nav button{font:500 14px/1 var(--xm-body);color:#c4cadb!important;text-decoration:none!important;background:none;border:0;cursor:pointer;padding:10px 12px;border-radius:8px;display:inline-flex;align-items:center;gap:6px}
.xm-nav a:hover,.xm-nav button:hover,.xm-nav a[aria-current=page]{color:#fff!important;background:rgba(255,255,255,.06)}
.xm-nav a:focus-visible,.xm-nav button:focus-visible,.xm-cta:focus-visible,.xm-burger:focus-visible{outline:2px solid var(--xm-orange2);outline-offset:2px}
.xm-caret{width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.xm-dd[data-open=true] .xm-caret{transform:rotate(225deg) translate(-2px,0)}
.xm-cta{margin-left:8px;background:var(--xm-orange)!important;color:#fff!important;font:600 14px/1 var(--xm-body)!important;padding:11px 16px!important;border-radius:9px!important;text-decoration:none!important;white-space:nowrap}
.xm-cta:hover{background:var(--xm-orange2)!important}
.xm-menu{position:absolute;top:calc(100% + 8px);left:-8px;width:340px;background:#fff;border-radius:14px;box-shadow:0 18px 50px rgba(10,15,30,.28);padding:8px;display:none}
.xm-dd[data-open=true] .xm-menu{display:block}
.xm-menu a{display:flex!important;align-items:flex-start!important;gap:12px!important;padding:10px 12px!important;border-radius:10px!important;color:var(--xm-ink)!important;width:100%}
.xm-menu a:hover{background:#f6f4ef!important}
.xm-menu .ic{flex:0 0 34px;height:34px;border-radius:9px;background:#fff1e9;display:grid;place-items:center;font-size:17px}
.xm-menu strong{display:block;font:600 14px/1.3 var(--xm-body);color:var(--xm-ink)}
.xm-menu small{display:block;font:400 12.5px/1.35 var(--xm-body);color:var(--xm-soft);margin-top:2px}
.xm-tag{display:inline-block;font:700 10px/1 var(--xm-body);letter-spacing:.06em;padding:3px 6px;border-radius:5px;margin-left:6px;vertical-align:1px}
.xm-tag.free{background:#e3f3e9;color:#1a6b3c}.xm-tag.pro{background:#fff1e9;color:#c44008}
.xm-menu .all{border-top:1px solid #eee;margin-top:4px;padding-top:12px!important;font:600 13px/1 var(--xm-body)!important;color:var(--xm-orange)!important}
.xm-burger{display:none;background:none;border:0;width:42px;height:42px;border-radius:9px;cursor:pointer;position:relative}
.xm-burger span,.xm-burger span::before,.xm-burger span::after{position:absolute;left:11px;width:20px;height:2px;background:#fff;border-radius:2px;content:'';transition:transform .2s,opacity .2s}
.xm-burger span{top:20px}.xm-burger span::before{top:-6px;left:0}.xm-burger span::after{top:6px;left:0}
.xm-h[data-open=true] .xm-burger span{background:transparent}
.xm-h[data-open=true] .xm-burger span::before{transform:translateY(6px) rotate(45deg)}
.xm-h[data-open=true] .xm-burger span::after{transform:translateY(-6px) rotate(-45deg)}
.xm-mcta{display:none}
.xm-pop{position:absolute;right:0;top:calc(100% + 8px);width:290px;background:#fff;color:var(--xm-text);border-radius:14px;box-shadow:0 18px 50px rgba(10,15,30,.28);padding:16px;font:400 13.5px/1.5 var(--xm-body);display:none;text-align:left}
.xm-pop strong{display:block;color:var(--xm-ink);font:700 15px/1.3 var(--xm-display);margin-bottom:6px}
.xm-pop a{display:inline-block!important;margin-top:10px;color:var(--xm-orange)!important;font-weight:600!important;padding:0!important;background:none!important}
.xm-login[data-open=true] .xm-pop{display:block}
@media (max-width:920px){
  .xm-burger{display:block}
  .xm-mcta{display:inline-flex;margin-left:auto;padding:9px 12px!important;font-size:13px!important}
  .xm-nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--xm-navy);flex-direction:column;align-items:stretch;padding:8px 14px 18px;border-bottom:1px solid var(--xm-line);max-height:calc(100vh - 64px);overflow:auto}
  .xm-h[data-open=true] .xm-nav{display:flex}
  .xm-nav a,.xm-nav button{width:100%;justify-content:space-between;padding:14px 10px;font-size:16px}
  .xm-nav .xm-cta{margin:10px 0 0;justify-content:center;padding:15px!important;font-size:15px!important}
  .xm-menu{position:static;width:auto;box-shadow:none;background:var(--xm-navy2);margin:2px 0 6px}
  .xm-menu a{color:#fff!important;justify-content:flex-start!important;text-align:left}.xm-menu a:hover{background:rgba(255,255,255,.05)!important}
  .xm-menu strong{color:#fff}.xm-menu small{color:var(--xm-mut)}
  .xm-menu .ic{background:rgba(232,80,10,.15)}
  .xm-menu .all{border-color:var(--xm-line)}
  .xm-pop{position:static;width:auto;margin:2px 0 6px;background:var(--xm-navy2);color:var(--xm-mut)}
  .xm-pop strong{color:#fff}
}
@media (max-width:480px){.xm-mcta{display:none}.xm-h-in{padding:0 14px}.xm-logo{font-size:19px}.xm-burger{margin-left:auto}}
.xm-burger{flex-shrink:0}.xm-logo{flex-shrink:0}

/* ───────── FOOTER ───────── */
.xm-f,.xm-f *{box-sizing:border-box}
.xm-f{background:var(--xm-navy);color:var(--xm-mut);font:400 14px/1.6 var(--xm-body);padding:56px 0 28px;border-top:1px solid rgba(255,255,255,.06)}
.xm-f-in{max-width:1180px;margin:0 auto;padding:0 20px}
.xm-f-top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
.xm-f h4{font:700 13px/1.2 var(--xm-display);letter-spacing:.06em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.xm-f a{display:block;color:var(--xm-mut)!important;text-decoration:none!important;padding:4px 0;font-size:14px}
.xm-f a:hover{color:#fff!important}
.xm-f p{margin:12px 0 16px;max-width:30em;font-size:14px;color:var(--xm-mut)}
.xm-f-btns{display:flex;gap:8px;flex-wrap:wrap}
.xm-f-btns a{display:inline-block;padding:8px 14px;border-radius:8px;background:rgba(255,255,255,.07);color:#fff!important;font-weight:600;font-size:13px}
.xm-f-btns a.wa{background:#25D366}
.xm-f-bot{margin-top:40px;padding-top:20px;border-top:1px solid var(--xm-line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px}
@media (max-width:860px){.xm-f-top{grid-template-columns:1fr 1fr}.xm-f-top>div:first-child{grid-column:1/-1}}

/* ───────── NEW PAGES (body.xm) ───────── */
body.xm{margin:0;background:var(--xm-paper);color:var(--xm-text);font:400 16px/1.6 var(--xm-body);-webkit-font-smoothing:antialiased}
body.xm *{box-sizing:border-box}
.xm h1,.xm h2,.xm h3{font-family:var(--xm-display);color:var(--xm-ink);letter-spacing:-.015em;margin:0}
.xm h1{font-size:clamp(32px,5vw,52px);line-height:1.06;font-weight:800;text-wrap:balance}
.xm h2{font-size:clamp(26px,3.4vw,38px);line-height:1.12;font-weight:800;text-wrap:balance}
.xm h3{font-size:19px;line-height:1.25;font-weight:700}
.xm p{margin:0}
.xm a{color:var(--xm-orange)}
.xm img{max-width:100%;height:auto;display:block}
.xm .wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
.xm .narrow{max-width:780px}
.xm section{padding-block:72px}
.xm .eyebrow{font:600 12px/1 var(--xm-body);letter-spacing:.14em;text-transform:uppercase;color:var(--xm-orange)}
.xm .lead{font-size:18px;color:var(--xm-soft);max-width:36em}
.xm .center{text-align:center}.xm .center .lead{margin-inline:auto}
.xm .sec-head{margin-bottom:40px}.xm .sec-head h2{margin:12px 0 12px}
.xm .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:11px;font:600 15px/1 var(--xm-body);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}
.xm .btn.p{background:var(--xm-orange);color:#fff}.xm .btn.p:hover{background:var(--xm-orange2)}
.xm .btn.s{border-color:#d9d4c7;color:var(--xm-ink);background:#fff}.xm .btn.s:hover{border-color:var(--xm-ink)}
.xm .btn:focus-visible{outline:2px solid var(--xm-orange2);outline-offset:3px}
.xm .btns{display:flex;gap:12px;flex-wrap:wrap}
.xm .card{background:var(--xm-card);border:1px solid var(--xm-bd);border-radius:18px;padding:28px}
.xm .tag{display:inline-block;font:700 11px/1 var(--xm-body);letter-spacing:.06em;padding:5px 8px;border-radius:6px}
.xm .tag.free{background:#e3f3e9;color:var(--xm-green)}.xm .tag.pro{background:#fff1e9;color:#c44008}.xm .tag.soon{background:#eef0f5;color:#525a70}

/* dark hero (homepage globe + inner pages) */
.xm .dark{background:var(--xm-navy);color:#f3f1ec}
.xm .dark h1,.xm .dark h2,.xm .dark h3{color:#fff}
.xm .dark .lead{color:var(--xm-mut)}
.xm .dark .btn.s{background:transparent;border-color:var(--xm-line);color:#fff}.xm .dark .btn.s:hover{border-color:#fff}
.xm .hero{display:grid;grid-template-columns:1.05fr 1fr;gap:24px;align-items:center;padding-block:36px 56px}
.xm .hero h1 em{font-style:normal;color:var(--xm-orange)}
.xm .hero .lead{margin:16px 0 28px;font-size:17px}
.xm .trust{display:flex;gap:10px 20px;flex-wrap:wrap;margin-top:26px;font-size:13.5px;color:var(--xm-mut)}
.xm .trust span{display:flex;gap:8px;align-items:center}
.xm .trust i{width:7px;height:7px;border-radius:50%;background:var(--xm-orange);display:inline-block}
.xm .stage{position:relative;min-width:0;aspect-ratio:1/1;width:100%}
.xm .stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.xm .stage .gtag{position:absolute;font-size:12px;background:rgba(18,26,49,.86);border:1px solid var(--xm-line);padding:7px 11px;border-radius:9px;white-space:nowrap;color:#f3f1ec}
.xm .stage .gtag b{color:var(--xm-orange2);font-weight:600}
.xm .g1{left:2%;top:12%}.xm .g2{right:0;bottom:16%}
.xm .page-hero{padding-block:56px 60px}
.xm .page-hero .lead{margin-top:14px}
@media (max-width:820px){
  .xm .hero{grid-template-columns:1fr;padding-block:16px 40px;gap:8px}
  .xm .stage{order:-1;max-width:400px;margin:0 auto}
  .xm section{padding-block:56px}
}

/* grids */
.xm .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.xm .g2c{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media (max-width:860px){.xm .g3{grid-template-columns:1fr}.xm .g2c{grid-template-columns:1fr;gap:28px}}
.xm .ben .ic{width:46px;height:46px;border-radius:12px;background:#fff1e9;display:grid;place-items:center;font-size:22px;margin-bottom:16px}
.xm .ben h3{margin-bottom:8px}.xm .ben p{color:var(--xm-soft);font-size:15px}
.xm .steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.xm .step{position:relative;padding-top:56px}
.xm .step::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;background:var(--xm-navy);color:#fff;font:800 17px/40px var(--xm-display);text-align:center}
.xm .step h3{margin-bottom:6px}.xm .step p{color:var(--xm-soft);font-size:15px}
@media (max-width:860px){.xm .steps{grid-template-columns:1fr}}

/* document cards with sample pictures */
.xm .docs{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.xm .doc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--xm-bd);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.xm .doc:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(10,15,30,.10)}
.xm .doc .pic{background:#eceae3;padding:14px 14px 0;height:190px;overflow:hidden}
.xm .doc .pic img{border-radius:6px 6px 0 0;box-shadow:0 2px 10px rgba(10,15,30,.12)}
.xm .doc .tx{padding:14px 16px 18px}
.xm .doc h3{font-size:16px;margin:8px 0 4px}
.xm .doc p{font-size:13.5px;color:var(--xm-soft);line-height:1.45}
@media (max-width:1060px){.xm .docs{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.xm .docs{grid-template-columns:1fr 1fr;gap:12px}.xm .doc .pic{height:150px}}

/* trust */
.xm .tr{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.xm .tr div{padding:22px;border-radius:16px;background:var(--xm-navy2);color:var(--xm-mut);font-size:14.5px}
.xm .tr strong{display:block;color:#fff;font:700 17px/1.3 var(--xm-display);margin-bottom:6px}
@media (max-width:860px){.xm .tr{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.xm .tr{grid-template-columns:1fr}}

/* sample PDF frame */
.xm .sheet{background:#eceae3;border-radius:18px;padding:22px}
.xm .sheet img{border-radius:6px;box-shadow:0 10px 30px rgba(10,15,30,.16)}
.xm .sheet figcaption{font-size:13px;color:var(--xm-soft);margin-top:12px;text-align:center}

/* lists, faq, tables */
.xm .ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.xm .ticks li{padding-left:30px;position:relative}
.xm .ticks li::before{content:'';position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:#e3f3e9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%231a6b3c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.xm .ticks li.no::before{background:#f1f1f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10h8' fill='none' stroke='%23a0a4b0' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat;color:#9aa0ae}
.xm details{background:#fff;border:1px solid var(--xm-bd);border-radius:14px;padding:0 20px;margin-bottom:10px}
.xm summary{cursor:pointer;list-style:none;padding:18px 28px 18px 0;font:600 16px/1.4 var(--xm-body);color:var(--xm-ink);position:relative}
.xm summary::-webkit-details-marker{display:none}
.xm summary::after{content:'+';position:absolute;right:0;top:14px;font:400 24px/1 var(--xm-body);color:var(--xm-orange)}
.xm details[open] summary::after{content:'–'}
.xm details>div{padding:0 0 18px;color:var(--xm-text);font-size:15px}
.xm .prose h2{font-size:22px;margin:36px 0 10px}
.xm .prose p,.xm .prose ul{margin:0 0 14px}.xm .prose ul{padding-left:22px}.xm .prose li{margin-bottom:6px}
.xm .prose .date{color:var(--xm-soft);font-size:14px;margin-top:8px}

/* pricing */
.xm .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.xm .plan{display:flex;flex-direction:column;background:#fff;border:1px solid var(--xm-bd);border-radius:20px;padding:30px 26px;position:relative}
.xm .plan.hl{border:2px solid var(--xm-orange);box-shadow:0 18px 44px rgba(232,80,10,.12)}
.xm .plan .nm{font:700 14px/1 var(--xm-body);letter-spacing:.08em;text-transform:uppercase;color:var(--xm-orange)}
.xm .plan .pr{font:800 40px/1 var(--xm-display);color:var(--xm-ink);margin:16px 0 4px}
.xm .plan .pr small{font:500 15px/1 var(--xm-body);color:var(--xm-soft)}
.xm .plan .yr{font-size:14px;color:var(--xm-soft);min-height:22px}
.xm .plan .ticks{margin:22px 0 26px;font-size:15px}
.xm .plan .btn{margin-top:auto;width:100%}
.xm .plan .badge{position:absolute;top:-12px;left:26px;background:var(--xm-orange);color:#fff;font:700 11px/1 var(--xm-body);letter-spacing:.08em;padding:7px 10px;border-radius:7px}
.xm .launch{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--xm-navy);color:var(--xm-mut);border-radius:18px;padding:22px 26px;margin-top:24px}
.xm .launch strong{color:#fff;font:700 18px/1.3 var(--xm-display)}
.xm .eb{display:flex;gap:8px;flex-wrap:wrap}
.xm .eb input{flex:1 1 220px;min-width:0;padding:13px 14px;border-radius:10px;border:1px solid #d9d4c7;font:400 15px var(--xm-body)}
.xm .eb input:focus{outline:2px solid var(--xm-orange2);border-color:transparent}
.xm .cmp{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden;font-size:15px}
.xm .cmp th,.xm .cmp td{padding:14px 16px;border-bottom:1px solid #eee;text-align:center}
.xm .cmp th:first-child,.xm .cmp td:first-child{text-align:left}
.xm .cmp thead th{background:var(--xm-navy);color:#fff;font:700 14px var(--xm-display)}
.xm .cmp td.y{color:var(--xm-green);font-weight:700}.xm .cmp td.n{color:#b0b4bf}
.xm .tblwrap{overflow-x:auto;border-radius:16px;border:1px solid var(--xm-bd)}
@media (max-width:860px){.xm .plans{grid-template-columns:1fr}}

/* CTA band */
.xm .band{background:var(--xm-orange);color:#fff;border-radius:22px;padding:44px 32px;text-align:center}
.xm .band h2{color:#fff}.xm .band p{color:#ffe6d9;margin:10px auto 24px;max-width:34em}
.xm .band .btn{background:#fff;color:var(--xm-orange)}.xm .band .btn:hover{background:#fff4ee}

/* breadcrumbs */
.xm .crumbs{font-size:13px;color:var(--xm-mut);margin-bottom:18px}
.xm .crumbs a{color:var(--xm-mut);text-decoration:none}.xm .crumbs a:hover{color:#fff}
@media (prefers-reduced-motion:reduce){.xm *,.xm-h *{transition:none!important;animation:none!important}}
.xm-menu::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px}
@media (hover:hover) and (min-width:921px){.xm-dd:hover .xm-menu{display:block}}
.xm .docs.r3{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.xm .docs.r3{grid-template-columns:1fr}}
.xm .page-hero .sheet{max-width:470px;justify-self:end;width:100%}
@media (max-width:860px){.xm .page-hero .sheet{justify-self:center}}
.xm .page-hero.g2c h1{font-size:clamp(30px,3.8vw,44px)}
/* about: photo + story side by side on laptops, stacked on phones */
.xm .about-grid{align-items:start}
@media (min-width:861px){.xm .about-grid{grid-template-columns:320px 1fr}}
.xm .about-grid figure img{margin-inline:auto}
@media (max-width:860px){.xm .about-grid figure{text-align:center}.xm .about-grid figure img{max-width:260px}}
/* two equal cards, one column on phones */
.xm .g2e{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:760px){.xm .g2e{grid-template-columns:1fr}}
.xm .prose,.xm .card{min-width:0;overflow-wrap:break-word}