/* invoice-viewer.com — calm paper, deep petrol, one amber accent. IBM Plex Sans/Mono. */
@font-face{font-family:"Plex";src:url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url(/assets/fonts/ibm-plex-sans-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plex";src:url(/assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url(/assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url(/assets/fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --paper:#F7F6F2;--card:#FFFFFF;--ink:#172230;--muted:#5A6573;--line:#DFE2E4;--line-2:#ECEDEE;
  --petrol:#0D3B4A;--petrol-2:#124E61;--petrol-3:#1B6378;--teal:#0E7C70;--teal-d:#0B6259;
  --amber:#F2B441;--amber-soft:#FFF4DA;--red:#B42318;--red-soft:#FDECEA;--green:#127A4A;--green-soft:#E6F4EC;--warn:#8A5A00;--warn-soft:#FFF5DB;
  --wrap:1140px;--text:70ch;--r:14px;
  --f:"Plex",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--mono:"Plex Mono",ui-monospace,Consolas,"Liberation Mono",monospace;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--f);overflow-wrap:break-word}
img,svg{max-width:100%;height:auto}
a{color:var(--petrol-3);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--teal);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}
p,ul,ol,dl,table,figure,pre{margin:0 0 1em}
ul,ol{padding-left:1.25em}li{margin:0 0 .35em}
h1,h2,h3,h4{font-weight:600;line-height:1.18;margin:0 0 .5em;letter-spacing:-.012em;text-wrap:balance;color:var(--petrol)}
h1{font-size:clamp(2.1rem,1.5rem + 2.6vw,3.3rem);font-weight:700;letter-spacing:-.022em}
h2{font-size:clamp(1.6rem,1.3rem + 1.2vw,2.2rem);margin-top:0}
h3{font-size:1.25rem}
strong{font-weight:600}
code,kbd{font-family:var(--mono);font-size:.92em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.text{max-width:var(--text)}
.muted{color:var(--muted)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--petrol);color:#fff;padding:.5em 1em;border-radius:6px;z-index:50}
.skip:focus{left:12px}

/* header */
.top{position:sticky;top:0;z-index:30;background:rgba(247,246,242,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:66px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--petrol);font-weight:700;font-size:1.12rem;letter-spacing:-.01em;white-space:nowrap}
.brand svg{width:34px;height:34px;flex:none}
.brand:hover{color:var(--petrol)}
.nav{display:flex;align-items:center;gap:22px;margin-left:auto}
.nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:.98rem}
.nav a:hover,.nav a[aria-current=page]{color:var(--teal)}
.nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--amber)}
.langs{display:flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--card)}
.langs a{font:600 .78rem/1 var(--f);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;color:var(--muted);padding:6px 9px;border-radius:999px}
.langs a[aria-current=true]{background:var(--petrol);color:#fff}
.pro-pill{font:600 .78rem/1 var(--f);background:var(--amber-soft);color:#6B4A00;border:1px solid #F3D48A;border-radius:999px;padding:6px 10px;white-space:nowrap}
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:8px 12px;font-weight:600;color:var(--petrol)}
.menu summary::-webkit-details-marker{display:none}
.menu[open] .menu-panel{display:flex}
.menu-panel{display:none;position:absolute;right:16px;top:62px;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;min-width:230px;box-shadow:0 18px 40px -20px rgba(13,59,74,.45)}
.menu-panel a{padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--ink);font-weight:500}
.menu-panel a:hover{background:var(--paper)}
.menu-panel .langs{margin:8px 4px 4px;align-self:flex-start}
@media (max-width:900px){.nav{display:none}.menu{display:block}}

/* hero */
.hero{background:var(--petrol);color:#E6EEF0;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(180deg,#000 0%,transparent 95%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:56px;padding-bottom:64px}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero .lead{font-size:clamp(1.08rem,1rem + .4vw,1.25rem);line-height:1.6;color:#CFE0E4;max-width:52ch;margin-bottom:1.4em}
.ticks{list-style:none;padding:0;margin:0 0 1.2em;display:grid;gap:10px}
.ticks li{display:flex;gap:10px;align-items:flex-start;margin:0;color:#E6EEF0}
.ticks svg{flex:none;width:22px;height:22px;margin-top:2px}
.formats{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.formats span{font:500 .82rem/1 var(--mono);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 11px;background:rgba(255,255,255,.05)}
@media (max-width:960px){.hero .wrap{grid-template-columns:1fr;gap:30px;padding-top:34px;padding-bottom:40px}}

/* tool card */
.tool{background:var(--card);color:var(--ink);border-radius:20px;padding:22px;box-shadow:0 30px 70px -30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
.ivx-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;border:2px dashed #B9C7CC;border-radius:16px;padding:34px 18px;background:linear-gradient(180deg,#FBFCFC,#F3F6F6);cursor:pointer;transition:border-color .15s,background .15s}
.ivx-drop:hover,.ivx-drop.over{border-color:var(--teal);background:#EEF7F5}
.ivx-drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ivx-drop-icon svg{width:52px;height:52px;color:var(--teal)}
.ivx-drop-title{font-weight:600;font-size:1.18rem;color:var(--petrol)}
.ivx-drop-or{color:var(--muted);font-size:.9rem}
.ivx-drop-types{color:var(--muted);font-size:.86rem;max-width:36ch;margin-top:6px}
.ivx-local{display:flex;gap:8px;align-items:flex-start;font-size:.9rem;color:var(--green);margin:14px 2px 6px}
.ivx-local svg{width:18px;height:18px;flex:none;margin-top:2px}
.ivx-samples{font-size:.88rem;color:var(--muted);margin:0 2px}
.ivx-link{background:none;border:0;padding:0;font:inherit;color:var(--petrol-3);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.ivx-link:hover{color:var(--teal)}
.ivx-archive{margin-top:12px;font-size:.92rem;border-top:1px solid var(--line-2);padding-top:10px}
.ivx-archive summary{cursor:pointer;font-weight:600;color:var(--petrol)}
.ivx-archive ul{list-style:none;padding:0;margin:8px 0;max-height:220px;overflow:auto}
.ivx-archive li{display:flex;gap:8px;align-items:center;margin:0 0 4px}
.ivx-x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:1.1rem;line-height:1}
.ivx-muted{color:var(--muted)}

/* buttons */
.ivx-btn,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 .95rem/1.2 var(--f);border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--petrol);padding:10px 14px;cursor:pointer;text-decoration:none;white-space:nowrap}
.ivx-btn:hover,.btn:hover{border-color:var(--teal);color:var(--teal)}
.ivx-btn svg,.btn svg{width:18px;height:18px}
.ivx-primary,.btn-primary{background:var(--teal);border-color:var(--teal);color:#fff}
.ivx-primary:hover,.btn-primary:hover{background:var(--teal-d);border-color:var(--teal-d);color:#fff}
.btn-amber{background:var(--amber);border-color:var(--amber);color:#3A2800}
.btn-amber:hover{background:#E9A62A;border-color:#E9A62A;color:#3A2800}
.btn-lg{padding:14px 20px;font-size:1.02rem;border-radius:12px}
.ivx-star{width:14px!important;height:14px!important;color:#D9971F}

/* result area */
.result{padding:28px 0 8px}
.result[hidden]{display:none}
.ivx-loading{padding:40px;text-align:center;color:var(--muted)}
.ivx-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:14px;position:sticky;top:74px;z-index:5}
.ivx-bar-file{display:flex;gap:10px;align-items:center;min-width:0}
.ivx-fname{font-weight:600;color:var(--petrol);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46ch}
.ivx-bar-actions{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:760px){.ivx-bar{position:static}.ivx-bar-actions .ivx-btn span{display:none}.ivx-bar-actions .ivx-btn{padding:10px}}
.ivx-check-badge{font:600 .8rem/1 var(--f);border-radius:999px;padding:6px 10px;white-space:nowrap}
.ivx-check-badge.good{background:var(--green-soft);color:var(--green)}
.ivx-check-badge.warn{background:var(--warn-soft);color:var(--warn)}
.ivx-check-badge.bad{background:var(--red-soft);color:var(--red)}
.ivx-note{font-size:.92rem;color:var(--muted);margin:0 0 12px}
.ivx-error{background:var(--card);border:1px solid #F1C3BD;border-left:5px solid var(--red);border-radius:var(--r);padding:20px}
.ivx-error-file{font-weight:600;margin-bottom:.3em}
.ivx-checkpanel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:14px}
.ivx-checkpanel h3{display:flex;gap:8px;align-items:center}
.ivx-checkpanel h3 svg{width:22px;height:22px;color:var(--teal)}
.ivx-check-sum .bad{color:var(--red);font-weight:600}.ivx-check-sum .warn{color:var(--warn);font-weight:600}
.ivx-rules{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:4px}
.ivx-rules li{display:grid;grid-template-columns:22px 104px 1fr;gap:8px;align-items:baseline;margin:0;padding:6px 8px;border-radius:8px;font-size:.93rem}
.ivx-rules li.error{background:var(--red-soft)}.ivx-rules li.warning{background:var(--warn-soft)}
.ivx-rule-state{font-weight:700;text-align:center}
.ivx-rules li.ok .ivx-rule-state{color:var(--green)}.ivx-rules li.error .ivx-rule-state{color:var(--red)}.ivx-rules li.warning .ivx-rule-state{color:var(--warn)}
.ivx-rule-id{font:500 .82rem/1.4 var(--mono);color:var(--muted)}
.ivx-rule-text small{display:block;color:var(--muted);font-family:var(--mono);font-size:.8rem}
.ivx-check-note{font-size:.86rem;color:var(--muted);margin:0}
@media (max-width:560px){.ivx-rules li{grid-template-columns:20px 1fr}.ivx-rule-id{grid-column:2}.ivx-rule-text{grid-column:2}}
.ivx-paper{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 22px 50px -38px rgba(13,59,74,.6);padding:clamp(18px,3vw,40px)}
.ivx-xml{margin-top:14px}
.ivx-xml pre{background:#0F2530;color:#D6E4E8;border-radius:var(--r);padding:18px;overflow:auto;max-height:70vh;font:400 .8rem/1.55 var(--mono)}
.ivx-pdfatts{margin-top:14px;font-size:.95rem}
.ivx-batch tbody tr{cursor:pointer}.ivx-batch tbody tr:hover{background:#F2F7F6}
.ivx-row-err td{color:var(--red)}

/* invoice document */
.iv-doc{font-size:.97rem;line-height:1.5;color:var(--ink)}
.iv-head{border-bottom:2px solid var(--petrol);padding-bottom:14px;margin-bottom:18px}
.iv-head-top{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;margin-bottom:10px}
.iv-title{margin:0;font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem)}
.iv-badge{font:500 .78rem/1 var(--mono);background:var(--paper);border:1px solid var(--line);color:var(--petrol-3);border-radius:999px;padding:7px 10px}
.iv-dl{margin:0;display:grid;gap:4px}
.iv-kv{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:10px}
.iv-kv dt{color:var(--muted);hyphens:auto;-webkit-hyphens:auto;overflow-wrap:normal}
.iv-kv dd{margin:0;font-weight:500}
.iv-meta{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));column-gap:28px}
.iv-meta .iv-kv{grid-template-columns:minmax(132px,42%) 1fr}
.iv-mono{font-family:var(--mono);font-size:.93em;letter-spacing:.01em}
.iv-copy{border:0;background:none;color:var(--muted);cursor:pointer;padding:2px 4px;vertical-align:-2px;border-radius:5px}
.iv-copy:hover{color:var(--teal);background:var(--paper)}
.iv-pay{display:grid;grid-template-columns:minmax(220px,auto) 1fr;gap:12px 32px;align-items:start;background:var(--amber-soft);border:1px solid #F2D8A0;border-radius:var(--r);padding:16px 18px;margin-bottom:22px}
.iv-pay.iv-cn{background:#EAF4F2;border-color:#BFDCD6}
.iv-pay-amount{display:flex;flex-direction:column;gap:2px}
.iv-pay-label{font-size:.85rem;color:#6B4A00;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.iv-cn .iv-pay-label{color:var(--teal-d)}
.iv-pay-value{font-size:clamp(1.6rem,1.3rem + 1.4vw,2.2rem);font-weight:700;color:var(--petrol);letter-spacing:-.02em;line-height:1.1}
.iv-pay-due{font-size:.95rem;color:var(--ink)}
.iv-pay-dl .iv-kv{grid-template-columns:minmax(130px,34%) 1fr}
.iv-terms,.iv-hint{grid-column:1/-1;margin:0;font-size:.93rem}
@media (max-width:680px){.iv-pay{grid-template-columns:1fr}}
.iv-parties{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:22px}
.iv-party{border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.iv-party h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0 0 6px;font-weight:600}
.iv-seller{border-top:4px solid var(--petrol)}.iv-buyer{border-top:4px solid var(--amber)}
.iv-pname{font-weight:600;font-size:1.05rem;margin:0 0 4px;color:var(--petrol)}
.iv-addr{margin:0 0 8px}
.iv-party .iv-dl{font-size:.9rem}
.iv-contact{font-size:.9rem;margin:8px 0 0}
.iv-lines h3,.iv-acs h3,.iv-vat h3,.iv-notes h3,.iv-refs h3,.iv-atts h3{font-size:1.05rem;margin:0 0 8px}
.iv-table-wrap{overflow-x:auto;margin-bottom:22px;border:1px solid var(--line);border-radius:12px}
.iv-table{width:100%;border-collapse:collapse;margin:0;font-size:.93rem}
.iv-table th{text-align:left;font-weight:600;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;background:#F7F8F8;padding:10px 12px;border-bottom:1px solid var(--line)}
.iv-table td{padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:top}
.iv-table tbody tr:last-child td{border-bottom:0}
.iv-table tfoot td{border-top:1px solid var(--line);background:#FAFAF8}
.iv-c-num{text-align:right;white-space:nowrap}
.iv-c-pos{width:3.5em;color:var(--muted)}
.iv-c-total{font-weight:600}
.iv-iname{font-weight:600;display:block}
.iv-isub{display:block;color:var(--muted);font-size:.88rem;margin-top:2px}
.iv-strike{text-decoration:line-through}
.iv-ac{display:inline-block;margin-right:10px}
.iv-allow{color:var(--green)}.iv-charge{color:var(--warn)}
.iv-small{font-size:.9rem}
.iv-sums{display:grid;grid-template-columns:1fr minmax(260px,380px);gap:22px;align-items:start;margin-bottom:22px}
.iv-sums .iv-table-wrap{margin-bottom:0}
.iv-totals{margin:0;border:1px solid var(--line);border-radius:12px;padding:10px 16px;background:#FCFCFB}
.iv-tot{display:flex;justify-content:space-between;gap:16px;padding:5px 0}
.iv-tot dt{color:var(--muted)}.iv-tot dd{margin:0;font-weight:500;white-space:nowrap}
.iv-tot-taxInclusive{border-top:1px solid var(--line);margin-top:4px;padding-top:9px}
.iv-tot-taxInclusive dd{font-weight:600}
.iv-tot-payable{border-top:2px solid var(--petrol);margin-top:6px;padding-top:10px}
.iv-tot-payable dt{color:var(--petrol);font-weight:600}.iv-tot-payable dd{font-weight:700;font-size:1.15rem;color:var(--petrol)}
@media (max-width:780px){.iv-sums{grid-template-columns:1fr}}
.iv-notes p{margin:0 0 .5em;white-space:pre-line}
.iv-notes,.iv-refs,.iv-atts{margin-bottom:20px}
.iv-dl-cols{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));column-gap:24px}
.iv-att-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.iv-att{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:9px 12px;font:500 .93rem/1.3 var(--f);color:var(--petrol);cursor:pointer;text-decoration:none}
.iv-att:hover{border-color:var(--teal);color:var(--teal)}
.iv-made{margin-top:18px;padding-top:10px;border-top:1px dashed var(--line);font-size:.8rem;color:var(--muted);text-align:right}
.iv-muted{color:var(--muted)}
@media (max-width:640px){
  .iv-table.iv-lines-t thead{display:none}
  .iv-lines .iv-table thead{display:none}
  .iv-lines .iv-table tr{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);padding:8px 0}
  .iv-lines .iv-table td{border:0;padding:4px 12px}
  .iv-lines .iv-table td.iv-c-item{grid-column:1/-1;order:-1}
  .iv-lines .iv-table td.iv-c-pos{display:none}
  .iv-lines .iv-table td.iv-c-num{text-align:left}
  .iv-lines .iv-table td.iv-c-num::before{content:attr(data-l);display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
  .iv-kv{grid-template-columns:1fr;gap:0;margin-bottom:6px}
}

/* dialog + toast */
.ivx-dialog{border:0;border-radius:18px;padding:26px 26px 20px;max-width:480px;width:calc(100% - 32px);box-shadow:0 40px 90px -30px rgba(0,0,0,.55);color:var(--ink)}
.ivx-dialog::backdrop{background:rgba(13,30,38,.55)}
.ivx-dlg-x{position:absolute;right:12px;top:8px}
.ivx-dlg-x button{border:0;background:none;font-size:1.6rem;color:var(--muted);cursor:pointer}
.ivx-dlg-kicker{display:flex;gap:6px;align-items:center;font-weight:600;color:#8A5A00;margin:0 0 6px;font-size:.88rem;text-transform:uppercase;letter-spacing:.06em}
.ivx-dlg-kicker svg{width:16px;height:16px;color:#D9971F}
.ivx-dlg-reason{font-weight:600;color:var(--petrol);margin-bottom:.3em}
.ivx-dlg-reason:empty{display:none}
.ivx-dlg-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.ivx-key summary{cursor:pointer;color:var(--petrol-3);font-size:.93rem}
.ivx-key-form{display:flex;gap:8px;margin-top:10px}
.ivx-key-form input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:500 .95rem var(--mono);text-transform:uppercase}
.ivx-key-msg{font-size:.9rem;margin:8px 0 0;min-height:1.3em}
.ivx-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--petrol);color:#fff;padding:10px 16px;border-radius:10px;font-weight:500;transition:.2s;z-index:60;pointer-events:none}
.ivx-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* content sections */
.band{padding:72px 0}
.band-white{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-tight{padding:48px 0}
.kicker{font:600 .82rem/1 var(--f);text-transform:uppercase;letter-spacing:.09em;color:var(--teal);margin-bottom:12px}
.section-head{max-width:62ch;margin-bottom:34px}
.section-head p{color:var(--muted);font-size:1.08rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin:0;position:relative}
.steps li::before{counter-increment:s;content:counter(s);display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--petrol);color:#fff;font-weight:700;margin-bottom:12px}
.steps h3{font-size:1.1rem;margin-bottom:.35em}
.steps p{margin:0;color:var(--muted)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media (max-width:900px){.grid-2{grid-template-columns:1fr;gap:28px}}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column}
.card h3{font-size:1.1rem}
.card p{color:var(--muted);flex:1}
.card .more{font-weight:600;text-decoration:none}
.card .tag{font:500 .78rem/1 var(--mono);color:var(--petrol-3);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 9px;align-self:flex-start;margin-bottom:12px}
.prose{max-width:var(--text)}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose table{border-collapse:collapse;width:100%;font-size:.95rem;margin:1em 0 1.4em;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:top}
.prose th{background:#F7F8F8;color:var(--petrol);font-weight:600}
.callout{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--amber);border-radius:12px;padding:16px 18px;margin:1.2em 0}
.callout p:last-child{margin:0}
.privacy-band{background:var(--petrol);color:#DCE8EB}
.privacy-band h2{color:#fff}
.privacy-band .lock{width:64px;height:64px;color:var(--amber)}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:10px}
.faq summary{cursor:pointer;padding:16px 18px;font-weight:600;color:var(--petrol);list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:1.4rem;line-height:1;color:var(--teal)}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 18px 16px;color:var(--ink)}
.faq .a p:last-child{margin:0}
.crumbs{font-size:.88rem;color:#B9CDD3;margin-bottom:14px}
.crumbs a{color:#DDEAEE}
.page-hero{background:var(--petrol);color:#DCE8EB;padding:46px 0 52px}
.page-hero h1{color:#fff;max-width:24ch}
.page-hero .lead{color:#CFE0E4;font-size:1.15rem;max-width:62ch;margin:0}

/* visual: xml -> invoice */
.transform{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}
.xmlcard{background:#0F2530;color:#9DB8C1;border-radius:16px;padding:18px 18px 14px;font:400 .78rem/1.65 var(--mono);box-shadow:0 26px 60px -36px rgba(0,0,0,.7);overflow:hidden;white-space:pre;position:relative}
.xmlcard::before{content:"";position:absolute;top:0;right:0;bottom:0;width:64px;background:linear-gradient(90deg,rgba(15,37,48,0),#0F2530 85%);z-index:1}
.xmlcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;background:linear-gradient(180deg,rgba(15,37,48,0),#0F2530)}
.xmlcard .t{color:#7FC4D6}.xmlcard .a{color:#E6C07B}.xmlcard .v{color:#E8F1F3}
.arrow{width:54px;height:54px;border-radius:50%;background:var(--amber);display:grid;place-items:center;color:#3A2800;box-shadow:0 10px 24px -10px rgba(242,180,65,.9)}
.arrow svg{width:26px;height:26px}
.mini{background:var(--card);border-radius:16px;border:1px solid var(--line);padding:18px;box-shadow:0 26px 60px -36px rgba(13,59,74,.6);font-size:.88rem}
.mini .h{display:flex;flex-wrap:wrap;gap:2px 12px;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--petrol);padding-bottom:8px;margin-bottom:10px}
.mini .h b{font-size:1.15rem;color:var(--petrol)}
.mini .h span{color:var(--muted);font-size:.82rem}
.mini{min-width:0}
.mini .due{background:var(--amber-soft);border:1px solid #F2D8A0;border-radius:10px;padding:10px 12px;margin-bottom:10px}
.mini .due b{display:block;font-size:1.4rem;color:var(--petrol)}
.mini .row{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid var(--line-2)}
.mini .row:last-child{border:0}
.mini .mono{font-family:var(--mono);font-size:.82rem}
@media (max-width:820px){.transform{grid-template-columns:1fr}.arrow{transform:rotate(90deg);justify-self:center}}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
@media (max-width:960px){.plans{grid-template-columns:1fr}}
.plan{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column}
.plan.hl{border:2px solid var(--teal);box-shadow:0 30px 60px -40px rgba(14,124,112,.7);position:relative}
.plan .ribbon{position:absolute;top:-13px;left:24px;background:var(--amber);color:#3A2800;font:700 .75rem/1 var(--f);text-transform:uppercase;letter-spacing:.07em;padding:7px 10px;border-radius:999px}
.plan h3{font-size:1.3rem;margin-bottom:.2em}
.plan .for{color:var(--muted);margin-bottom:1em}
.price{font-size:2.4rem;font-weight:700;color:var(--petrol);letter-spacing:-.02em;line-height:1}
.price small{font-size:.95rem;font-weight:500;color:var(--muted);letter-spacing:0}
.price-alt{color:var(--muted);font-size:.92rem;margin:.4em 0 1.1em}
.plan ul{list-style:none;padding:0;margin:0 0 1.4em;flex:1}
.plan li{display:flex;gap:10px;margin-bottom:.55em}
.plan li svg{flex:none;width:20px;height:20px;margin-top:3px;color:var(--teal)}
.plan li.no{color:var(--muted)}.plan li.no svg{color:#B6BEC5}
.checkout{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(18px,3vw,34px);max-width:820px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.form-grid .full{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
label.f{display:flex;flex-direction:column;gap:6px;font-weight:500;font-size:.95rem}
label.f span.opt{color:var(--muted);font-weight:400}
.f input,.f select{font:inherit;border:1px solid #C9D0D5;border-radius:10px;padding:11px 12px;background:#fff;color:var(--ink);min-width:0}
.f input:focus,.f select:focus{border-color:var(--teal);outline:2px solid rgba(14,124,112,.2)}
.planpick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:640px){.planpick{grid-template-columns:1fr}}
.planpick label{border:1px solid #C9D0D5;border-radius:12px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start;cursor:pointer;background:#fff}
.planpick label:has(input:checked){border-color:var(--teal);background:#EEF7F5;box-shadow:inset 0 0 0 1px var(--teal)}
.planpick input{margin-top:4px;accent-color:var(--teal)}
.planpick b{display:block;color:var(--petrol)}
.planpick small{color:var(--muted)}
.calc{background:var(--paper);border-radius:12px;padding:14px 16px;margin:16px 0;font-size:.95rem}
.calc div{display:flex;justify-content:space-between;gap:12px}
.calc .tot{border-top:1px solid var(--line);margin-top:6px;padding-top:6px;font-weight:700;color:var(--petrol)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;margin:10px 0 16px}
.consent input{margin-top:5px;accent-color:var(--teal)}
.form-msg{font-weight:600;color:var(--red);min-height:1.2em}
.notice{background:var(--amber-soft);border:1px solid #F2D8A0;border-radius:12px;padding:14px 16px}

/* footer */
.foot{background:#0A2E3A;color:#B9CDD3;padding:48px 0 28px;font-size:.93rem;margin-top:0}
.foot a{color:#DCE8EB;text-decoration:none}
.foot a:hover{color:var(--amber);text-decoration:underline}
.foot .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px}
@media (max-width:820px){.foot .cols{grid-template-columns:1fr 1fr}}
.foot h4{color:#fff;font-size:.95rem;margin-bottom:.8em}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:.45em}
.foot .brand{color:#fff;margin-bottom:12px}
.foot .legal{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:18px;font-size:.84rem;color:#8FA9B1}

/* printing: only the invoice */
@media print{
  @page{margin:14mm}
  html,body{background:#fff}
  body *{visibility:hidden}
  .ivx-paper,.ivx-paper *{visibility:visible}
  .ivx-paper{position:absolute;left:0;top:0;width:100%;border:0;box-shadow:none;padding:0}
  .iv-copy{display:none}
  .iv-table-wrap{overflow:visible;border:1px solid #ccc}
  .iv-pay{break-inside:avoid}
  .iv-table tr{break-inside:avoid}
  a{color:inherit;text-decoration:none}
}

/* misc components */
.pro-ticks li{color:var(--ink)}
.cta-box{max-width:var(--text);margin-top:40px;border-left-color:var(--teal)}
.cta-box h2{font-size:1.4rem}
.keybox{font:600 1.4rem/1.3 var(--mono);letter-spacing:.06em;color:var(--petrol);background:var(--amber-soft);border:1px dashed #E3BF6E;border-radius:12px;padding:16px;text-align:center;user-select:all}
.store-btns{display:flex;flex-wrap:wrap;gap:12px}
.btn[aria-disabled=true]{opacity:.7;cursor:default}
.mailmock{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 26px 60px -36px rgba(13,59,74,.55);overflow:hidden}
.mm-top{display:flex;gap:6px;padding:12px 14px;background:#EEF1F2;border-bottom:1px solid var(--line)}
.mm-top span{width:11px;height:11px;border-radius:50%;background:#C9D2D6}
.mm-body{padding:20px}
.mm-line{height:10px;border-radius:5px;background:#E7EBEC;margin-bottom:10px}
.mm-line.w60{width:60%}.mm-line.w90{width:90%}.mm-line.w75{width:75%}
.mm-att{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:18px;background:#FAFBFB}
.mm-file{font:600 .8rem/1 var(--mono);background:var(--petrol);color:var(--amber);border-radius:6px;padding:8px 7px}
.mm-name{font:500 .92rem/1.2 var(--mono);color:var(--ink);flex:1;min-width:150px}
.mm-btn{display:inline-flex;align-items:center;gap:7px;background:var(--teal);color:#fff;font-weight:600;font-size:.9rem;border-radius:8px;padding:8px 11px;box-shadow:0 0 0 4px rgba(242,180,65,.45)}
.mm-btn svg{width:18px;height:18px}
.privacy-band p{color:#DCE8EB}

/* layout safety: grid children may shrink, wide tables scroll inside their wrapper */
.iv-sums>*,.iv-parties>*,.grid-2>*,.transform>*,.foot .cols>*,.hero .wrap>*{min-width:0}
.xmlcard{max-width:100%}
.foot a{overflow-wrap:anywhere}
@media (max-width:520px){.foot .cols{grid-template-columns:1fr}}
.iv-pay-value-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.transform{grid-template-columns:minmax(0,1fr) auto minmax(0,1.1fr)}
.band-transform .grid-2{grid-template-columns:.85fr 1.15fr}
@media (max-width:900px){.band-transform .grid-2{grid-template-columns:1fr}}
.mini .h{gap:10px}.mini .h b{white-space:nowrap}
@media (max-width:820px){.transform{grid-template-columns:minmax(0,1fr)}}