:root {
  color-scheme: dark;
  --bg: #0b0916; --bg2: #100d20; --panel: #151127; --panel2: #1b1532;
  --text: #f7f5ff; --muted: #b7b0cc; --muted2: #a49abb;
  --violet: #8b63f6; --violet2: #b39aff; --green: #79dfbb;
  --line: rgba(188,165,255,.16); --shadow: 0 24px 80px rgba(0,0,0,.3);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; color: var(--text); background: radial-gradient(ellipse at 70% 8%,rgba(115,72,214,.12),transparent 28%),var(--bg); font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button,input,select { font: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #c4afff; outline-offset: 5px; }
.wrap { width: min(1200px,calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 2000; top: 12px; left: 12px; padding: 12px 18px; background: #e5dbff; color: #21133b; border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.topbar { display: flex; justify-content: space-between; align-items: center; min-height: 104px; gap: 24px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(145deg,#aa89ff,#6740cf); box-shadow: inset 0 1px 0 #b59afa,0 6px 22px #7647ff25; }
.mark:after { content: ''; width: 14px; height: 14px; border-radius: 3px; transform: rotate(45deg); background: white; }
.brandword { font-size: 24px; font-weight: 800; letter-spacing: -.9px; }
.brandword b { color: var(--violet2); }
.desktop-actions { display: flex; align-items: center; gap: 24px; }
.nav-link,.action { font-size: 13px; font-weight: 650; }
.nav-link { color: var(--muted); padding-block: 14px; }
.nav-link:hover,.login:hover { color: white; }
.action { padding: 13px 18px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; }
.login { color: #ddd4ef; border: 1px solid var(--line); }
.subscribe,.primary { color: white; background: linear-gradient(135deg,#976dfb,#7548e1); box-shadow: inset 0 1px 0 #c4a8ff66,0 5px 22px #7647ff26; }
.primary:hover,.subscribe:hover { background: linear-gradient(135deg,#a780ff,#8354ee); }
.mobile-tools { display: none; align-items: center; gap: 12px; }
.mobile-login { color: #e0d9ef; font-size: 13px; font-weight: 650; padding: 12px 4px; }
.hamb,.close { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 11px; color: white; background: #1a142c; display: grid; place-items: center; }
.hamb i,.hamb i:before,.hamb i:after { display: block; width: 17px; height: 2px; background: #ece7f5; border-radius: 3px; position: relative; }
.hamb i:before,.hamb i:after { content: ''; position: absolute; }
.hamb i:before { top: -6px; }.hamb i:after { top: 6px; }
.drawer-backdrop { display: none; position: fixed; inset: 0; z-index: 70; background: #07050fbb; backdrop-filter: blur(5px); }
.drawer-backdrop.open { display: block; }
.drawer { position: fixed; inset: 0 0 0 auto; z-index: 80; width: min(88vw,370px); height: 100dvh; overflow-y: auto; padding: 24px; background: #131022; border-left: 1px solid var(--line); transform: translateX(100%); visibility: hidden; transition: transform .2s,visibility .2s; }
.drawer.open { transform: none; visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.drawer-title { font-weight: 800; font-size: 20px; }.drawer-title span { color: var(--violet2); }
.close { font-size: 24px; }
.drawer a { display: block; padding: 15px 12px; border-radius: 10px; color: #ddd4ef; font-weight: 650; }
.drawer a:hover { background: #241b3b; }
.drawer-divider { height: 1px; background: var(--line); margin: 18px 0; }
.drawer .d-upload { color: var(--green); background: #79dfbb09; }
.drawer .d-sub { margin-top: 12px; color: white; background: #8155e8; text-align: center; }
.hero { display: grid; grid-template-columns: 1fr 1.12fr; align-items: center; gap: 48px; padding-block: 88px 92px; }
.hero-copy { min-width: 0; }
.eyebrow { font-size: 10px; font-weight: 750; letter-spacing: .065em; text-transform: uppercase; color: #b8a6df; line-height: 1.6; margin-bottom: 24px; }
.eyebrow span { display: inline-flex; align-items: center; gap: 6px; color: #ded4f2; }
.eyebrow span:before { content: ''; width: 6px; height: 6px; background: var(--green); border-radius: 50%; margin-right: 2px; }
h1 { font-size: clamp(40px,4.05vw,58px); line-height: 1.1; letter-spacing: -.055em; font-weight: 750; margin: 0 0 24px; }
h1 span { color: #b99cff; }
.lead { font-size: 16px; line-height: 1.85; color: var(--muted); max-width: 475px; margin: 0; }
.hero-actions { display: flex; gap: 12px; margin-top: 30px; align-items: stretch; flex-wrap: wrap; }
.hero-actions a { display: inline-flex; justify-content: center; align-items: center; gap: 24px; min-height: 48px; padding: 14px 20px; border-radius: 10px; font-size: 13px; font-weight: 700; }
.secondary { border: 1px solid #a78bd036; background: #ffffff03; color: #e1d9ee; }
.secondary:hover { background: #ffffff08; border-color: #b59bd16b; }
.hero-note { color: #a49ab8; font-size: 11px; margin: 20px 0 0; line-height: 1.6; }
.product-preview { min-width: 0; position: relative; }
.product-preview:before { content: ''; position: absolute; z-index: -1; inset: 12% 0; background: #6b42d119; filter: blur(44px); border-radius: 50%; }
.demo { background: linear-gradient(150deg,#201831,#110e20 70%); border: 1px solid #b89be333; border-radius: 18px; box-shadow: var(--shadow),inset 0 1px 0 #ffffff08; padding: 18px; text-align: left; scroll-margin-top: 30px; }
.workspace-heading { display: flex; align-items: center; gap: 8px; padding: 0 0 17px; border-bottom: 1px solid var(--line); margin-bottom: 16px; color: #e0d6ef; font-size: 11px; }
.workspace-icon { display: grid; place-items: center; border-radius: 7px; width: 25px; height: 25px; color: #c8aeff; background: #8157d82b; font-size: 19px; }
.workspace-market { margin-left: auto; padding: 4px 7px; font-size: 9px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); }
.demo-top { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--muted); font-size: 10px; font-weight: 600; }
.live { width: 5px; height: 5px; background: var(--green); border-radius: 50%; }
.demo-name { margin-right: auto; }
.demo-currency { color: #b1a2c7; text-transform: uppercase; font-size: 8px; letter-spacing: .08em; }
.stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.stat { border: 1px solid #b094d524; background: #100d1d66; padding: 13px 10px; border-radius: 10px; }
.stat small { display: block; color: #aca1bf; font-size: 8px; font-weight: 650; letter-spacing: .025em; text-transform: uppercase; line-height: 1.6; }
.stat strong { display: block; margin-top: 7px; font-size: clamp(17px,1.65vw,23px); font-weight: 700; letter-spacing: -.035em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat strong.good { color: var(--green); }
.demo-grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: 8px; margin-top: 8px; }
.chart,.ledger { background: #100d1d66; border: 1px solid #b094d524; border-radius: 10px; padding: 15px 12px; min-width: 0; }
.chart-title,.ledger-title { color: #d4c9e4; font-size: 10px; font-weight: 650; margin-bottom: 16px; }
.bars { height: 103px; display: flex; align-items: flex-end; gap: 6px; padding-top: 12px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top,transparent,transparent 32px,#ffffff05 32px,#ffffff05 33px); }
.bar { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(0deg,#7250ba,#b28afa); opacity: .9; }
.ledger-row { display: flex; justify-content: space-between; gap: 8px; padding: 11px 0; border-bottom: 1px solid #b094d51a; font-size: 9px; color: var(--muted); line-height: 1.5; }
.ledger-row b { color: #e7e0f0; white-space: nowrap; font-weight: 650; font-variant-numeric: tabular-nums; }
.ledger-row:last-child { border: 0; }
.demo-dots { display: flex; justify-content: center; gap: 2px; }
.dot { border: 0; padding: 0; width: 44px; height: 36px; display: grid; place-items: center; background: transparent; border-radius: 6px; }
.dot:after { content: ''; width: 18px; height: 4px; background: #b69acd33; border-radius: 8px; }
.dot.active:after { background: #ac85f6; width: 26px; }
.processing-flow { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); padding-top: 14px; gap: 8px; }
.flow-step { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #c5b9d9; white-space: nowrap; }
.flow-number { color: #ab89f1; background: #956cf415; border: 1px solid #a883f32c; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 6px; font-size: 8px; }
.demo-caption { text-align: center; color: #a89cbb; font-size: 10px; margin: 14px 0 0; line-height: 1.7; }
section { padding: 80px 0; }
.workflow-section { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #ffffff02; }
.section-kicker { text-align: center; color: #b79be8; font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; line-height: 1.7; }
.section-title { text-align: center; font-size: clamp(30px,3.2vw,43px); line-height: 1.15; letter-spacing: -.045em; font-weight: 700; margin: 16px auto; }
.section-sub { text-align: center; max-width: 640px; color: var(--muted); font-size: 15px; line-height: 1.8; margin: auto; }
.steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-top: 42px; }
.card { position: relative; padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg,#1c152b66,#120f2088); }
.step-no { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #c4a6ff; background: #a47af013; border: 1px solid #ac87e82b; font-size: 12px; font-weight: 750; }
.card h3 { font-size: 17px; letter-spacing: -.025em; margin: 24px 0 10px; font-weight: 650; }
.card p { color: var(--muted); font-size: 13px; line-height: 1.85; margin: 0; }
.pricing { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-top: 48px; align-items: stretch; }
.price-card { position: relative; padding: 28px 22px 22px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(160deg,#1b142a,#110e1d); display: flex; flex-direction: column; min-width: 0; }
.price-card.featured { border-color: #ac87efaa; background: linear-gradient(160deg,#2e1e49,#191229 70%); box-shadow: 0 8px 35px #7350c116; }
.popular { position: absolute; right: 16px; top: -12px; border: 1px solid #9b75d577; border-radius: 6px; padding: 6px 9px; background: #422960; color: #e6d5ff; font-size: 8px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.plan { font-weight: 650; font-size: 18px; letter-spacing: -.03em; }
.price { font-size: 42px; font-weight: 750; line-height: 1.2; letter-spacing: -.065em; margin: 20px 0 0; }
.price span { font-size: 12px; letter-spacing: normal; color: var(--muted); font-weight: 500; }
.desc { font-size: 13px; line-height: 1.7; color: var(--muted); min-height: 43px; margin: 16px 0 0; }
.features { list-style: none; padding: 18px 0 0; margin: 20px 0 22px; border-top: 1px solid var(--line); }
.features li { position: relative; padding: 7px 0 7px 19px; font-size: 13px; line-height: 1.65; color: #cec2df; }
.features li:before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.choose { display: block; text-align: center; padding: 13px 8px; margin-top: auto; border: 1px solid #b69add38; border-radius: 9px; font-size: 12px; font-weight: 700; min-height: 44px; background: #ffffff03; }
.choose:hover { background: #a784d618; }
.featured .choose { background: #9366ed; border-color: #a67ef9; color: #fff; }
.payroll-choice { padding: 11px 0 16px; margin: auto 0 0; background: none; border: 0; border-radius: 0; }
.payroll-choice + .choose { margin-top: 0; }
.payroll-choice-label { font-size: 11px; align-items: baseline; color: #e3d7f1; }
.payroll-choice-label small { font-size: 9px; color: var(--muted); }
.payroll-toggle { gap: 3px; padding: 3px; background: #0b091977; }
.payroll-toggle button { font-size: 11px; min-height: 42px; padding: 7px 4px; color: #b9abc9; line-height: 1.5; }
.payroll-toggle button.active { color: #f4edff; background: #59407f66; }
.payroll-total { font-size: 10px; color: var(--muted); }
#services { padding-top: 30px; }
.obligation-grid { display: grid; gap: 16px; margin-top: 36px; }
.obligation-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.obligation-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.obligation { display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--line); border-radius: 14px; padding: 26px; background: #17122170; min-width: 0; }
.obligation-head { display: flex; flex-direction: column; gap: 18px; }
.obligation h3 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.025em; }
.oprice { font-size: 28px; color: #c6a8ff; font-weight: 700; letter-spacing: -.03em; }
.obligation p { color: var(--muted); font-size: 13px; line-height: 1.8; }
.tag { display: inline-block; padding: 7px 9px; margin: 8px 0 22px; background: #b18bdb0e; color: #c4b3d7; font-size: 9px; border: 1px solid #aa80cf1f; border-radius: 5px; letter-spacing: .05em; line-height: 1.5; }
.obligation-buy { margin-top: auto; padding: 13px; font-size: 12px; min-height: 44px; color: #dfd0ef; }
.workspace-section { border-top: 1px solid var(--line); background: #ffffff02; }
.security { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; }
.security-copy .section-kicker { text-align: left; }
.security-copy h2 { font-size: clamp(30px,3.2vw,43px); line-height: 1.15; letter-spacing: -.045em; font-weight: 700; margin: 18px 0; }
.security-copy p { font-size: 15px; color: var(--muted); line-height: 1.8; }
.text-link { display: inline-flex; gap: 20px; font-weight: 650; font-size: 13px; color: #c5a5ff; padding-block: 14px; }
.security-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.security-item { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg,#251a3488,#14101f); }
.benefit-index { display: block; margin-bottom: 28px; font-size: 12px !important; color: #b79adb !important; font-variant-numeric: tabular-nums; }
.security-item b { display: block; font-size: 14px; font-weight: 650; letter-spacing: -.02em; margin-bottom: 10px; }
.security-item span { color: var(--muted); font-size: 13px; line-height: 1.8; }
.final { text-align: center; padding: 64px 0 80px; }
.final-box { padding: 54px 24px; border: 1px solid #b89be433; border-radius: 18px; background: radial-gradient(ellipse at 50% -10%,#8e5ae833,transparent 70%),#151020; }
.final-mark { display: inline-block; color: #b891ff; font-size: 34px; margin-bottom: 18px; }
.final h2 { font-size: clamp(30px,3.5vw,46px); font-weight: 700; line-height: 1.15; letter-spacing: -.045em; margin: 0 0 20px; }
.final p { color: var(--muted); font-size: 14px; line-height: 1.8; margin: auto; max-width: 500px; }
.final .hero-actions { justify-content: center; }
.footer { border-top: 1px solid var(--line); padding: 36px 0 28px; color: var(--muted2); font-size: 11px; }
.footer-row { display: flex; justify-content: space-between; gap: 32px; align-items: flex-start; }
.footer-company { font-size: 17px; font-weight: 750; color: #e4d9f1; }
.footer-description { margin: 12px 0; }
.footer-links { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px 22px; padding-top: 2px; }
.footer-links button { min-height: 40px; color: #c2b5d1; font-size: 11px; }
.change-country { display: block; width: min(1200px,calc(100% - 64px)); margin: 22px auto 0; color: #c0afcf; }
.checkout-close,.legal-close { min-height: 44px; min-width: 44px; }
.checkout-intro,.checkout-summary span,.checkout-field label { color: #c3b5d6; }
.checkout-field input,.checkout-field select { font-size: 16px; min-height: 46px; }
.checkout-field label { font-size: 11px; }.checkout-terms { font-size: 12px; color: #c7b9db; }
.checkout-terms input { min-width: 18px; min-height: 18px; }
.legal-panel p,.legal-panel li { color: #c3b5d6; }
.checkout-panel,.legal-panel { max-height: 90dvh; }
@media(min-width:1600px) { .hero { padding-block: 102px 110px; } }
@media(max-width:1100px) {
  .wrap { width: calc(100% - 48px); }.desktop-actions { gap: 14px; }.nav-link { font-size: 12px; }
  .hero { gap: 28px; } h1 { font-size: 44px; }.lead { font-size: 15px; }
  .hero-actions { gap: 10px; }.hero-actions a { padding: 14px 16px; font-size: 12px; }
  .demo { padding: 14px; }.stat { padding: 12px 8px; }.stat small { font-size: 7px; }
  .flow-step { font-size: 9px; gap: 4px; }.flow-number { width: 20px; height: 20px; }
  .pricing { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px 18px; }.price-card { padding: 28px; }
  .features li { font-size: 13px; }.payroll-toggle button { font-size: 12px; }.payroll-choice-label { font-size: 12px; }.payroll-choice-label small { font-size: 10px; }
  .desc { font-size: 13px; min-height: 44px; }.security { gap: 40px; }
  .obligation { padding: 22px; }.obligation h3 { font-size: 16px; }
}
@media(max-width:960px) {
  .desktop-actions { display: none; }.mobile-tools { display: flex; }.topbar { min-height: 88px; }
  .hero { grid-template-columns: 1fr; padding-block: 54px 64px; gap: 44px; text-align: center; }
  .hero-copy { max-width: 620px; margin: auto; }.eyebrow { margin-bottom: 20px; }
  h1 { font-size: clamp(42px,6.4vw,58px); }.lead { max-width: 550px; margin: auto; font-size: 16px; }
  .hero-actions { justify-content: center; }.hero-actions a { font-size: 14px; padding-inline: 24px; }
  .product-preview { width: min(630px,100%); margin: auto; }.product-preview:before { inset: 12% 0; }.demo { padding: 20px; }
  .stat { padding: 16px 12px; }.stat strong { font-size: 24px; }.stat small { font-size: 9px; }
  .demo-top,.workspace-heading { font-size: 12px; }.ledger-row { font-size: 11px; }.chart-title,.ledger-title { font-size: 12px; }
  .flow-step { font-size: 11px; gap: 8px; }.flow-number { width: 25px; height: 25px; font-size: 10px; }
  .steps { gap: 12px; }.card { padding: 20px; }.card h3 { font-size: 16px; }
  section { padding: 64px 0; }.security { grid-template-columns: 1fr; gap: 30px; }
  .security-copy { max-width: 560px; }.security-item { padding: 26px; }
  .security-item b { font-size: 16px; }.security-item span { font-size: 13px; }
  .obligation-grid.three { grid-template-columns: 1fr; }.obligation-head { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; }.obligation h3 { font-size: 18px; }
  .footer-row { flex-direction: column; gap: 18px; }.footer-links { justify-content: flex-start; }
}
@media(max-width:600px) {
  .wrap { width: calc(100% - 36px); }.topbar { min-height: 80px; gap: 12px; }.brandword { font-size: 21px; }.mark { width: 34px; height: 34px; border-radius: 10px; }.mark:after { width: 12px; height: 12px; }.brand { gap: 9px; }.mobile-tools { gap: 10px; }.mobile-login { font-size: 12px; }
  .hero { padding-block: 40px 48px; gap: 36px; }.eyebrow { font-size: 9px; letter-spacing: .035em; line-height: 1.9; }
  h1 { font-size: clamp(33px,8.6vw,46px); line-height: 1.13; letter-spacing: -.05em; margin-bottom: 20px; }.lead { font-size: 14px; line-height: 1.85; }
  .hero-actions { margin-top: 24px; gap: 10px; }.hero-actions a { font-size: 12px; padding: 13px 16px; gap: 12px; min-height: 48px; }.hero-note { font-size: 10px; margin-top: 16px; }
  .demo { padding: 14px; border-radius: 15px; }.workspace-heading { font-size: 11px; }.demo-top { font-size: 10px; }
  .stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.stat { padding: 14px; }.stat small { font-size: 9px; }.stat strong { font-size: 23px; }
  .demo-grid { grid-template-columns: 1fr; }.chart { padding: 16px 14px; }.bars { height: 80px; gap: 10px; }.ledger { padding: 16px 14px 6px; }.ledger-title { margin-bottom: 6px; }.ledger-row { padding: 10px 0; }
  .processing-flow { gap: 6px; }.flow-step { flex-direction: column; gap: 8px; font-size: 10px; }.flow-number { width: 24px; height: 24px; }.demo-caption { font-size: 9px; }.dot { height: 44px; }
  section { padding: 50px 0; }.section-kicker { font-size: 9px; }.section-title { font-size: 30px; line-height: 1.18; margin: 14px auto; }.section-sub { font-size: 14px; }
  .steps { grid-template-columns: 1fr; margin-top: 28px; gap: 12px; }.card { padding: 24px; }.card h3 { font-size: 18px; margin-top: 20px; }.card p { font-size: 14px; }
  .pricing { grid-template-columns: 1fr; margin-top: 36px; gap: 24px; }.price-card { padding: 28px 24px 24px; }.plan { font-size: 21px; }.price { font-size: 46px; margin-top: 18px; }.price span { font-size: 13px; }.desc { min-height: 0; font-size: 14px; }.features { margin-top: 20px; }.features li { font-size: 13px; }.choose { font-size: 14px; }.popular { font-size: 9px; }.payroll-choice { padding-bottom: 18px; }
  #services { padding-top: 14px; }.obligation-grid.two,.obligation-grid.three { grid-template-columns: 1fr; }.obligation { padding: 24px; }.obligation-head { flex-direction: column; align-items: flex-start; gap: 16px; }.obligation h3 { font-size: 19px; }.obligation p { font-size: 14px; }.oprice { font-size: 29px; }.obligation-buy { font-size: 14px; }
  .security-list { grid-template-columns: 1fr; gap: 12px; }.security-copy h2 { font-size: 32px; }.security-copy p { font-size: 14px; }.security-item { padding: 24px; }.benefit-index { margin-bottom: 16px; }.security-item b { font-size: 17px; }.security-item span { font-size: 14px; }
  .final { padding: 40px 0 48px; }.final-box { padding: 36px 20px; border-radius: 15px; }.final h2 { font-size: 31px; }.final p { font-size: 14px; }.final .hero-actions { flex-direction: column; }.final-mark { margin-bottom: 18px; }
  .footer { padding: 30px 0; }.footer-links { gap: 2px 20px; }.footer-links button { min-height: 44px; font-size: 11px; }.change-country { width: calc(100% - 36px); margin-top: 18px; padding-block: 10px; }
  .checkout-panel { padding: 24px 20px; }.checkout-panel h3 { padding-right: 12px; }.checkout-close { right: 14px; top: 14px; }.checkout-terms { font-size: 13px; }.checkout-submit { min-height: 48px; }
}
@media(max-width:360px) {
 .wrap { width: calc(100% - 28px); }.brandword { font-size: 18px; }.brand { gap: 7px; }.mark { width: 30px; height: 30px; }.mobile-tools { gap: 8px; }.mobile-login { font-size: 11px; }.hamb { width: 40px; height: 44px; }
 .hero-actions { flex-direction: column; }.hero-actions a { width: 100%; font-size: 13px; }.eyebrow { font-size: 8px; }.demo { padding: 12px; }.stat { padding: 12px; }.stat strong { font-size: 22px; }.flow-step { font-size: 9px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *,*:before,*:after { transition: none !important; animation: none !important; } }

/* Document upload: approved FR/UK emerald highlight. */
.hero-actions .upload-highlight,.drawer .upload-highlight{position:relative;gap:10px;color:#c7ffe8;border:1px solid rgba(83,221,169,.8);background:linear-gradient(135deg,rgba(27,104,79,.28),rgba(17,53,46,.36));box-shadow:inset 0 1px 0 rgba(183,255,222,.08),0 0 0 1px rgba(79,216,165,.07),0 0 24px rgba(53,213,149,.17),0 8px 24px rgba(12,112,75,.12);transition:background .18s,box-shadow .18s,border-color .18s}
.hero-actions .upload-highlight:hover,.drawer .upload-highlight:hover{color:#e5fff3;border-color:#86efc0;background:linear-gradient(135deg,rgba(31,130,94,.35),rgba(17,68,52,.45));box-shadow:0 0 0 1px rgba(79,216,165,.13),0 0 30px rgba(53,213,149,.25),0 8px 28px rgba(12,112,75,.18)}
.hero-actions .upload-highlight:focus-visible,.drawer .upload-highlight:focus-visible{outline:2px solid #adf7d7;outline-offset:4px}
.upload-icon{width:19px;height:19px;flex:0 0 19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.drawer .upload-highlight{display:flex;align-items:center;margin:8px 0;padding:14px 16px;border-radius:10px}
@media(prefers-reduced-motion:reduce){.upload-highlight{transition:none}}

/* Payroll packs */
.payroll-count{display:block;margin-top:12px;font-size:12px;color:var(--muted)}.payroll-count[hidden]{display:none}.payroll-count input{display:block;width:100%;margin:8px 0;padding:10px 12px;background:#171125;color:var(--text);border:1px solid var(--line);border-radius:8px;font:inherit}.payroll-count small{display:block;line-height:1.5}.payroll-entry{text-align:center;padding:42px 24px;border:1px solid var(--line);border-radius:18px;margin-top:24px}.payroll-entry p{color:var(--muted);line-height:1.7;margin:16px 0 24px}.payroll-entry .secondary{display:inline-flex}.payroll-entry h2{font-size:clamp(22px,4vw,32px);line-height:1.3}

.payroll-entry .primary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 24px;border-radius:12px;font-weight:800}.annual-order-link{display:block;text-align:center}