/* Self-hosted fonts (latin subsets, served first-party) */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('/plus-jakarta-sans-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/ibm-plex-mono-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* =========================================================================
   PayslipIQ Gulf — Elite design system
   Dark luxe fintech, gold/sand accents. Mobile-first. UK English.
   ========================================================================= */

:root{
  /* Palette */
  --ink:#0a0c10;            /* near-black background */
  --ink-2:#0f131a;          /* raised surface */
  --ink-3:#141a23;          /* card */
  --ink-4:#1b2230;          /* hover/elevated */
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --txt:#eef2f7;            /* primary text */
  --txt-2:#b6c0ce;          /* secondary text (AA on dark) */
  --txt-3:#9aa4b3;          /* muted (AA on dark) */
  --gold:#e8c27a;          /* primary accent */
  --gold-2:#f3d8a0;
  --gold-deep:#b8893f;
  --emerald:#37d99a;        /* positive / money */
  --emerald-soft:rgba(55,217,154,.12);
  --rose:#ff7a7a;           /* warning */
  --rose-soft:rgba(255,122,122,.12);
  --sky:#6fb7ff;
  --grad-gold:linear-gradient(135deg,#f3d8a0 0%,#e8c27a 40%,#b8893f 100%);
  --grad-dawn:radial-gradient(1200px 600px at 70% -10%,rgba(232,194,122,.18),transparent 60%),
              radial-gradient(900px 500px at 10% 0%,rgba(111,183,255,.10),transparent 55%);
  --shadow:0 24px 60px -24px rgba(0,0,0,.7);
  --shadow-sm:0 8px 24px -12px rgba(0,0,0,.6);
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:28px;
  --maxw:1180px;
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--txt);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  line-height:1.6;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{line-height:1.12;letter-spacing:-.02em;font-weight:800;margin:0}
p{margin:0 0 1rem}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.muted{color:var(--txt-2)}
.tiny{font-size:.8rem;color:var(--txt-3)}
.gold-text{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.emerald{color:var(--emerald)}
.center{text-align:center}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;font-size:.98rem;
  padding:.85rem 1.4rem;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--grad-gold);color:#1a1206;box-shadow:0 12px 30px -10px rgba(232,194,122,.5)}
.btn-gold:hover{box-shadow:0 18px 40px -12px rgba(232,194,122,.65)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:var(--line-2);color:var(--txt)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-wa{background:#25D366;color:#06281a}
.btn-lg{padding:1.05rem 1.8rem;font-size:1.05rem}
.btn-block{display:flex;width:100%;justify-content:center}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);
  background:rgba(10,12,16,.72);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:-.02em;font-size:1.15rem}
.brand .mark{width:34px;height:34px;border-radius:9px;background:var(--grad-gold);display:grid;place-items:center;
  color:#1a1206;font-weight:900;font-size:1rem;box-shadow:0 6px 18px -6px rgba(232,194,122,.6)}
.brand small{display:block;font-size:.62rem;letter-spacing:.22em;color:var(--gold);font-weight:700;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:1.5rem;font-size:.94rem;font-weight:600;color:var(--txt-2)}
.nav-links a:hover{color:var(--txt)}
.nav-cta{display:flex;align-items:center;gap:.6rem}
.nav-toggle{display:none;background:none;border:0;color:var(--txt);font-size:1.5rem;cursor:pointer}
@media(max-width:900px){
  .nav-links,.nav-cta .btn-ghost{display:none}
  .nav-toggle{display:block}
  .nav-links.open{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;
    background:var(--ink-2);border-bottom:1px solid var(--line);padding:1rem 22px 1.4rem;gap:1.1rem}
}

/* ---------- Hero ---------- */
.hero{position:relative;padding:84px 0 60px;background:var(--grad-dawn)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.3rem,5vw,3.7rem);margin:.5rem 0 1rem}
.hero p.lead{font-size:1.18rem;color:var(--txt-2);max-width:34ch}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.hero-killers{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1.5rem;font-size:.85rem;color:var(--txt-2)}
.hero-killers span{display:inline-flex;align-items:center;gap:.4rem}
.hero-killers span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--emerald)}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr;gap:30px}.hero p.lead{max-width:none}}

/* ---------- Hero stat card ---------- */
.stat-card{background:linear-gradient(180deg,var(--ink-3),var(--ink-2));border:1px solid var(--line-2);
  border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow)}
.stat-card .row{display:flex;justify-content:space-between;align-items:center;padding:.7rem 0;border-bottom:1px dashed var(--line)}
.stat-card .row:last-child{border-bottom:0}
.stat-card .k{color:var(--txt-2);font-size:.92rem}
.stat-card .v{font-weight:800;font-size:1.05rem}
.stat-card .big{font-size:2.4rem;font-weight:800;letter-spacing:-.03em}
.pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;padding:.28rem .6rem;border-radius:999px}
.pill-emerald{background:var(--emerald-soft);color:var(--emerald)}
.pill-gold{background:rgba(232,194,122,.14);color:var(--gold)}
.pill-rose{background:var(--rose-soft);color:var(--rose)}

/* ---------- Sections ---------- */
section{position:relative}
.sec{padding:72px 0}
.sec-head{max-width:62ch;margin-bottom:40px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:.6rem 0 1rem}
.sec h2 + p{color:var(--txt-2);font-size:1.08rem}
.divider{height:1px;background:var(--line);margin:0}

/* ---------- Persona router ---------- */
.persona-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.persona{display:block;background:var(--ink-3);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;transition:border-color .2s,transform .2s,background .2s}
.persona:hover{border-color:var(--gold);transform:translateY(-4px);background:var(--ink-4)}
.persona .ic{font-size:1.7rem}
.persona h3{font-size:1.12rem;margin:.7rem 0 .4rem}
.persona p{font-size:.9rem;color:var(--txt-2);margin:0}
.persona .go{margin-top:1rem;color:var(--gold);font-weight:700;font-size:.88rem}
@media(max-width:880px){.persona-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.persona-grid{grid-template-columns:1fr}}

/* ---------- Feature/cards grid ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards.two{grid-template-columns:1fr 1fr}
.card{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.card .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.4rem;
  background:rgba(232,194,122,.12);margin-bottom:1rem}
.card h3{font-size:1.18rem;margin-bottom:.5rem}
.card p{color:var(--txt-2);font-size:.96rem;margin:0}
@media(max-width:880px){.cards,.cards.two{grid-template-columns:1fr}}

/* ---------- Calculator layout ---------- */
.calc-wrap{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
@media(max-width:920px){.calc-wrap{grid-template-columns:1fr}}
.panel{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px}
.panel h3{font-size:1.2rem;margin-bottom:1.2rem}
.field{margin-bottom:1.15rem}
.field label{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;font-weight:600;color:var(--txt-2);margin-bottom:.45rem}
.field .hint{color:var(--txt-3);font-weight:500;font-size:.78rem}
.input{display:flex;align-items:center;background:var(--ink);border:1px solid var(--line-2);border-radius:12px;
  padding:.1rem .9rem;transition:border-color .15s}
.input:focus-within{border-color:var(--gold)}
.input .pre{color:var(--txt-3);font-weight:700;font-size:.92rem;padding-right:.5rem;border-right:1px solid var(--line);margin-right:.6rem}
.input input,.input select{flex:1;background:none;border:0;outline:none;color:var(--txt);font-size:1.05rem;
  font-weight:600;padding:.8rem 0;font-family:var(--font);width:100%}
.input select{cursor:pointer}
select.bare{width:100%;background:var(--ink);border:1px solid var(--line-2);border-radius:12px;color:var(--txt);
  font-size:1.02rem;font-weight:600;padding:.85rem .9rem;font-family:var(--font);outline:none;cursor:pointer}
select.bare:focus{border-color:var(--gold)}
.seg{display:flex;background:var(--ink);border:1px solid var(--line-2);border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;background:none;border:0;color:var(--txt-2);font-weight:700;font-size:.88rem;padding:.6rem;border-radius:9px;cursor:pointer;transition:.15s}
.seg button.active{background:var(--grad-gold);color:#1a1206}
.range-row{display:flex;align-items:center;gap:1rem}
input[type=range]{flex:1;accent-color:var(--gold)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0}

/* Results panel */
.result{background:linear-gradient(180deg,var(--ink-3),var(--ink-2));border:1px solid var(--line-2);position:sticky;top:88px}
.result .headline{text-align:center;padding:.5rem 0 1.2rem;border-bottom:1px solid var(--line);margin-bottom:1.2rem}
.result .headline .label{color:var(--txt-2);font-size:.92rem;margin-bottom:.3rem}
.result .headline .amount{font-size:2.7rem;font-weight:800;letter-spacing:-.03em}
.result .headline .sub{color:var(--txt-3);font-size:.85rem;margin-top:.3rem}
.line{display:flex;justify-content:space-between;align-items:center;padding:.62rem 0;border-bottom:1px dashed var(--line)}
.line:last-of-type{border-bottom:0}
.line .l{color:var(--txt-2);font-size:.95rem;display:flex;align-items:center;gap:.5rem}
.line .r{font-weight:700;font-variant-numeric:tabular-nums}
.line.total .l,.line.total .r{font-size:1.15rem;font-weight:800;color:var(--txt)}
.verdict{display:flex;gap:.7rem;align-items:flex-start;border-radius:12px;padding:.9rem 1rem;font-size:.9rem;margin-top:1rem}
.verdict.ok{background:var(--emerald-soft);color:#bff3df}
.verdict.warn{background:var(--rose-soft);color:#ffd6d6}
.verdict .ic{font-size:1.1rem;line-height:1.2}

/* ---------- Comparison bars ---------- */
.barcmp{margin-top:1rem}
.barcmp .bar{height:46px;border-radius:10px;display:flex;align-items:center;padding:0 .9rem;color:#06281a;font-weight:800;margin-bottom:.6rem;min-width:90px}
.barcmp .uk{background:linear-gradient(90deg,#6fb7ff,#9bd0ff)}
.barcmp .uae{background:linear-gradient(90deg,#37d99a,#7ef0c4)}
.barcmp .lbl{font-size:.82rem;color:var(--txt-2);font-weight:600;margin-bottom:.25rem}

/* ---------- Sample report ---------- */
.report{background:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.report .top{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--line)}
.report .body{padding:8px 22px 20px}
.rline{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 0;border-bottom:1px dashed var(--line)}
.rline:last-child{border-bottom:0}
.rline .meta{display:flex;flex-direction:column}
.rline .meta b{font-weight:700}
.rline .meta span{font-size:.8rem;color:var(--txt-3)}
.tag{font-size:.72rem;font-weight:800;padding:.28rem .55rem;border-radius:7px;white-space:nowrap}
.tag.g{background:var(--emerald-soft);color:var(--emerald)}
.tag.a{background:rgba(232,194,122,.14);color:var(--gold)}
.tag.r{background:var(--rose-soft);color:var(--rose)}

/* ---------- Trust strip ---------- */
.trust-strip{display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;align-items:center;justify-content:center;
  padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--ink-2)}
.trust-strip .ts{display:flex;align-items:center;gap:.6rem;color:var(--txt-2);font-size:.92rem;font-weight:600}
.trust-strip .ts b{color:var(--txt)}

/* ---------- Steps ---------- */
.steps{counter-reset:s;display:grid;gap:14px}
.step{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;background:var(--ink-3);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.step .n{counter-increment:s;width:38px;height:38px;border-radius:10px;background:var(--grad-gold);color:#1a1206;font-weight:900;display:grid;place-items:center}
.step .n::before{content:counter(s)}
.step h4{font-size:1.05rem;margin-bottom:.25rem}
.step p{margin:0;color:var(--txt-2);font-size:.94rem}

/* ---------- FAQ ---------- */
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--ink-2)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:18px 22px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.3rem;font-weight:700;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 22px 18px;color:var(--txt-2);font-size:.96rem}

/* ---------- Prose ---------- */
.prose{max-width:74ch}
.prose h2{font-size:1.7rem;margin:2.4rem 0 1rem}
.prose h3{font-size:1.25rem;margin:1.8rem 0 .6rem}
.prose p,.prose li{color:var(--txt-2);font-size:1.04rem}
.prose ul{padding-left:1.2rem}
.prose li{margin-bottom:.5rem}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.callout{border-left:3px solid var(--gold);background:rgba(232,194,122,.06);padding:16px 20px;border-radius:0 12px 12px 0;margin:1.6rem 0}
.callout.warn{border-left-color:var(--rose);background:var(--rose-soft)}
.note{font-size:.85rem;color:var(--txt-3);border-top:1px solid var(--line);padding-top:1rem;margin-top:2rem}

/* ---------- CTA band ---------- */
.cta-band{background:var(--grad-gold);border-radius:var(--radius-lg);padding:48px;color:#160f04;text-align:center;box-shadow:var(--shadow)}
.cta-band h2{font-size:clamp(1.7rem,3vw,2.4rem);color:#160f04}
.cta-band p{color:#3a2c12;font-weight:600;max-width:50ch;margin:.6rem auto 1.6rem}
.cta-band .btn-dark{background:#160f04;color:var(--gold-2)}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);background:var(--ink-2);padding:56px 0 30px;margin-top:20px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.footer h3{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);margin-bottom:1rem}
.footer a{display:block;color:var(--txt-2);font-size:.92rem;padding:.28rem 0}
.footer a:hover{color:var(--gold)}
.foot-bottom{border-top:1px solid var(--line);margin-top:36px;padding-top:22px;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--txt-3);font-size:.82rem}
@media(max-width:780px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}

/* ---------- Floating WhatsApp ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;align-items:center;gap:.6rem;
  background:#25D366;color:#06281a;font-weight:800;padding:.85rem 1.2rem;border-radius:999px;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.6);transition:transform .18s}
.wa-float:hover{transform:translateY(-3px)}
.wa-float .dot{width:9px;height:9px;border-radius:50%;background:#06281a;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
@media(max-width:520px){.wa-float span.txt{display:none}}

/* ---------- Disclaimer chip ---------- */
.disc{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--txt-3);
  background:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:.4rem .85rem}

/* ---------- Breadcrumb ---------- */
.crumb{font-size:.85rem;color:var(--txt-3);padding:18px 0 0}
.crumb a:hover{color:var(--gold)}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* utilities */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:780px){.grid-2{grid-template-columns:1fr}}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.stack>*+*{margin-top:1rem}

/* ---------- Accessibility ---------- */
/* Skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:#160f04;
  font-weight:800;padding:.7rem 1.1rem;border-radius:0 0 10px 0;text-decoration:none}
.skip:focus{left:0}
/* Visible keyboard focus on all interactive elements */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
[tabindex]:focus-visible,summary:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
/* Panel heading parity (keeps look when using semantic h2) */
.panel h2{font-size:1.2rem;margin-bottom:1.2rem;letter-spacing:-.01em}
/* Screen-reader-only helper */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Honour reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .wa-float .dot{animation:none!important}
}

/* =========================================================================
   APPLE-GRADE POLISH LAYER  (overrides — refined craft pass)
   ========================================================================= */
:root{
  --ease:cubic-bezier(.16,1,.3,1);          /* ease-out-expo feel */
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --hair:rgba(255,255,255,.07);
}
html{-webkit-text-size-adjust:100%}
body{font-size:1.0625rem;letter-spacing:-.005em}           /* 17px base, Apple-ish */
::selection{background:rgba(232,194,122,.28);color:#fff}
/* Refined scrollbar */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:20px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28);background-clip:content-box}

/* Typography — tighter, more confident */
h1,h2,h3,h4{letter-spacing:-.032em}
.hero h1{font-size:clamp(2.6rem,6vw,4.3rem);line-height:1.04;letter-spacing:-.04em;font-weight:800}
.sec h2{letter-spacing:-.035em}
.eyebrow{letter-spacing:.2em;font-size:.74rem}
.lead{line-height:1.5;letter-spacing:-.01em}
.prose p,.prose li{line-height:1.72}

/* Rhythm — more generous, Apple-like breathing room */
.sec{padding:92px 0}
@media(max-width:700px){.sec{padding:62px 0}}
.hero{padding:104px 0 80px}

/* Buttons — crisp pill, refined motion */
.btn{border-radius:980px;font-weight:600;letter-spacing:-.01em;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .25s var(--ease-soft),opacity .25s}
.btn:hover{transform:translateY(-2px) scale(1.015)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:.08s}
.btn-gold{box-shadow:0 10px 28px -12px rgba(232,194,122,.55)}

/* Header — condenses & deepens blur on scroll */
.site-header{transition:height .35s var(--ease),background .35s var(--ease),border-color .35s,box-shadow .35s;
  background:rgba(10,12,16,.6);border-bottom:1px solid var(--hair)}
.site-header.scrolled{background:rgba(10,12,16,.85);backdrop-filter:blur(20px) saturate(160%);
  border-bottom-color:var(--line-2);box-shadow:0 1px 0 rgba(255,255,255,.04),0 20px 40px -28px rgba(0,0,0,.8)}
.site-header.scrolled .nav{height:58px}
.nav{transition:height .35s var(--ease)}

/* Cards / personas — premium hover physics */
.card,.persona,.stat-card,.panel{transition:transform .45s var(--ease),border-color .35s var(--ease),background .35s var(--ease),box-shadow .45s var(--ease)}
.card:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:0 30px 60px -32px rgba(0,0,0,.75)}
.persona:hover{transform:translateY(-6px) scale(1.005)}
.stat-card:hover{transform:translateY(-3px);box-shadow:0 40px 80px -36px rgba(0,0,0,.85)}

/* Reveal — smoother, with optional stagger set by JS */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}

/* Inputs — refined focus glow */
.input,select.bare{transition:border-color .25s var(--ease-soft),box-shadow .25s var(--ease-soft),background .25s}
.input:focus-within,select.bare:focus{box-shadow:0 0 0 4px rgba(232,194,122,.14)}

/* Hairline dividers a touch finer */
.divider{background:var(--hair)}

/* Result amounts — tasteful tabular figures + transition */
.result .headline .amount,.stat-card .big,.barcmp .bar span{font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.result .amount,.line .r{transition:color .3s var(--ease)}

/* Floating WhatsApp — calmer, premium */
.wa-float{border-radius:980px;box-shadow:0 16px 40px -14px rgba(37,211,102,.5);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.wa-float:hover{transform:translateY(-3px) scale(1.03)}

/* Brand mark crispness */
.brand .mark{box-shadow:0 6px 18px -8px rgba(232,194,122,.7),inset 0 1px 0 rgba(255,255,255,.4)}

/* Focus ring consistency already set; ensure summary/anchors smooth */
a,summary{transition:color .2s var(--ease-soft)}

/* --- Aug 2026 fix pack: mobile overflow, tap targets, heading styles --- */
.hero-grid>*,.calc-wrap>*,.grid-2>*,.foot-grid>*{min-width:0}
.stat-card{max-width:100%}
@media(max-width:560px){.btn{white-space:normal;text-align:center}}
.footer a{padding:.62rem 0}
.nav-toggle{padding:.5rem .65rem;min-width:44px;min-height:44px}
.nav-links a{padding:.5rem 0;display:inline-block}
.h3s{font-size:1.2rem;margin-bottom:1.2rem}
.step h3.h4s{font-size:1.02rem;margin-bottom:.2rem}

.btn-wa,.btn-wa:hover,.btn-wa:visited{color:#06281a !important}
/* wa-float lives inside footer landmark; restore its styling over .footer a */
.footer a.wa-float{display:flex;color:#06281a;font-size:1rem;padding:.85rem 1.2rem}

/* ============================================================================
   13 August 2026 — mobile repair pack
   Every rule below fixes a defect measured in a real rendered viewport, not a
   style preference. Kept at the end of the file so it wins on cascade order.
   ========================================================================= */

/* 1. The header WhatsApp pill wrapped to two lines and rendered 79px tall inside
      a 68px header bar, spilling above and below it on every phone from 320-390px.
      Cause: .btn{white-space:normal} at max-width:560px. Keep the button on one
      line in the header only; body buttons may still wrap. */
.nav-cta .btn,.nav .btn-wa{white-space:nowrap;flex:0 0 auto}
@media(max-width:560px){
  .nav-cta .btn,.nav .btn-wa{white-space:nowrap;font-size:.86rem;padding:.5rem .8rem;line-height:1.1}
}

/* 2. At 320px the hamburger was pushed 30px outside the viewport and
      body{overflow-x:hidden} made it unreachable — the site had no navigation at all
      on a 320px phone. Tighten the gutter and the nav gap below 400px. */
@media(max-width:400px){
  .container{padding:0 14px}
  .nav{gap:.5rem}
  .brand{font-size:.94rem}
  .nav-cta .btn,.nav .btn-wa{font-size:.8rem;padding:.45rem .65rem}
}
@media(max-width:340px){
  .nav-cta{display:none} /* below 340px the hamburger wins; WhatsApp lives in the drawer and the sticky bar */
}

/* 3. The floating WhatsApp button was the site's only persistent CTA and rendered
      as a blank 47x36 green pill on every phone: the label was display:none and there
      was no icon. Give it a real icon, a 56px target and safe-area clearance. */
.wa-float{min-height:56px}
.wa-float::before{
  content:"";width:22px;height:22px;flex:0 0 22px;background-color:currentColor;
  -webkit-mask:var(--wa-icon) center/contain no-repeat;mask:var(--wa-icon) center/contain no-repeat;
}
:root{--wa-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm5.8 14.14c-.24.68-1.42 1.31-1.95 1.36-.5.05-1.13.07-1.82-.11-.42-.11-.96-.29-1.65-.59-2.9-1.25-4.8-4.17-4.94-4.36-.15-.19-1.19-1.58-1.19-3.02 0-1.43.75-2.14 1.02-2.43.27-.29.58-.36.78-.36.19 0 .39 0 .56.01.18.01.42-.07.66.5.24.58.83 2.01.9 2.16.07.14.12.31.02.5-.1.19-.15.31-.29.48-.15.17-.31.38-.44.51-.15.14-.3.3-.13.59.17.29.76 1.25 1.63 2.03 1.12 1 2.06 1.3 2.35 1.45.29.15.46.12.63-.07.17-.19.73-.85.92-1.14.19-.29.39-.24.66-.15.27.1 1.7.8 1.99.95.29.14.48.22.55.34.07.12.07.7-.17 1.38z'/%3E%3C/svg%3E")}
@media(max-width:520px){
  .wa-float span.txt{display:none}
  .wa-float,.footer a.wa-float{
    width:56px;height:56px;min-height:56px;padding:0;justify-content:center;gap:0;
    right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
  }
  .wa-float .dot{display:none}
  .wa-float::before{width:26px;height:26px;flex-basis:26px}
}

/* 4. .result was position:sticky;top:88px but measures 978-1085px tall inside an
      812px viewport, so it could never engage — it only pushed the answer further
      down the page. Turn it off where the layout is single-column. */
@media(max-width:920px){.result{position:static;top:auto}}

/* 5. <input class="bare"> got no styling at all because the rule was written as
      select.bare, so the two date fields rendered as native white 125x21px boxes. */
input.bare{width:100%;background:var(--ink);border:1px solid var(--line-2);border-radius:12px;color:var(--txt);
  padding:.7rem .8rem;font-family:var(--font);font-weight:600;font-size:1rem;min-height:44px}

/* 6. Every calculator control now clears 44px and 16px text. Sub-16px inputs make
      iOS zoom the whole page on focus, which reads as a broken form. */
.calc input[type=number],.calc input[type=date],.calc input[type=text],.calc select,
input[type=number],input[type=date],select.bare{font-size:16px}
.calc input[type=number],.calc input[type=date],.calc select{min-height:44px}
input[type=range]{height:44px;padding:0;background:transparent}
input[type=checkbox]{width:24px;height:24px}
#costBody input[type=number]{min-height:44px;font-size:16px}

/* 7. Anchor links landed under the 69px sticky header. */
html{scroll-padding-top:88px}
:target,h1[id],h2[id],h3[id],section[id],div[id]{scroll-margin-top:88px}

/* 8. The current page was never indicated in the navigation. */
.nav-links a[aria-current=page]{color:var(--gold)}
.nav-links a[aria-current=page]::after{content:"";display:block;height:2px;background:var(--gold);border-radius:2px;margin-top:2px}

/* 9. Mobile drawer links were 40px tall; the drawer also needs to sit above content. */
@media(max-width:900px){.nav-links.open a{min-height:44px;display:flex;align-items:center}}

/* 10. Without JavaScript, .reveal hid 77% of the homepage body copy at opacity:0.
       Handled by a <noscript> style override in each page head; the reduced-motion
       rule below also guarantees the copy is readable. */
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* 11. The "UAE" market qualifier — the only thing separating this brand from
       payslipiq.co.uk — rendered at 9.92px. */
.brand small{font-size:.72rem}

/* 12. Remaining sub-44px controls measured at 320/375/390px. */
@media(max-width:900px){
  .seg button{min-height:44px;font-size:.95rem}
  .crumbs a,.breadcrumb a{display:inline-block;padding:.55rem .2rem;min-height:44px;line-height:34px}
}
input[type=checkbox]{width:24px;height:24px;min-width:24px;min-height:24px}

/* 13. Header WhatsApp pill now fits the bar but was only 30px tall; the bar is 68px. */
@media(max-width:900px){.nav-cta .btn-wa{min-height:44px}}
/* WhatsApp entry injected into the mobile drawer by main.js */
.nav-links a.drawer-wa{color:#25D366;font-weight:800}

/* ============================================================================
   27 August 2026 — repair pack R1 (styles.css, main.js, 404.html)
   Every rule below fixes a defect measured in a rendered viewport with Chromium,
   not a style preference. Kept at the end of the file so it wins on cascade order.
   ========================================================================= */

/* 14. SPECIFICITY COLLISION — invisible CTA copy.
       `.sec h2 + p` (0,1,2, line 125) outranked `.cta-band p` (0,1,1, line 251),
       so the supporting line under all nine gold CTA bands took var(--txt-2)
       #b6c0ce and composited against the gold gradient at 1.00:1 measured — text
       the reader cannot see, immediately above the site's primary conversion
       button. Two classes now outrank the descendant + sibling pair.
       The colour is also nudged from #3a2c12 to #32260f: at #3a2c12 the pair
       measured 4.65:1 against the darkest pixel behind the text and only 4.32:1
       against the gradient's darkest stop #b8893f, so the pass depended on where
       the paragraph happened to sit. #32260f clears 4.5:1 against every stop in
       --grad-gold (4.71 : 8.75 : 10.66) and is the same brown to the eye.
       Measured after: 5.07-6.24:1 at 390, 768 and 1440px across all nine bands. */
.cta-band p,.sec .cta-band p{color:#32260f}

/* 15. WIDE DIAGRAM LABELS — the three 900-unit landscape figures scaled with their
       container. At a 320px viewport the frame is 292px against a 900-unit viewBox
       (scale 0.324), so a 12px label computed at 3.9px and a 15px label at 4.9px.
       Hold the frame
       at a width that keeps the smallest label above 11px and let the figure
       scroll sideways. Nothing is cropped. 848 / 900 x 12px = 11.3px.
       main.js gives the scroll container a tab stop while it actually scrolls.

       28 Aug 2026: scoped to those three assets by name. The selector was
       `figure:has(> img[src$=".svg"])`, which matched every SVG figure on the site.
       Eight later diagrams were authored at a 480-unit viewBox to fit a phone
       without scrolling, and forcing them to 850px inside a 292px frame showed a
       third of a picture at a time at roughly 35px type, cutting titles mid-word at
       320px. It also overrode the correct inline max-width:480px caps on /trust,
       /moving-from-uk and /working-in-uae. Only these three assets need it. */
@media(max-width:900px){
  figure:has(> img[src$="/uae-gratuity-accrual-diagram.svg"]),
  figure:has(> img[src$="/uae-basic-salary-vs-allowances-split.svg"]),
  figure:has(> img[src$="/uk-vs-dubai-take-home-comparison.svg"]){
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch
  }
  figure > img[src$="/uae-gratuity-accrual-diagram.svg"],
  figure > img[src$="/uae-basic-salary-vs-allowances-split.svg"],
  figure > img[src$="/uk-vs-dubai-take-home-comparison.svg"]{min-width:850px;max-width:none}
}
figure[tabindex="0"]:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:14px}

/* 16. MOBILE TOOL PAGES opened on a wall of inputs with the answer 1,292-1,550px
       below the fold at 390px. Put the result panel first in visual order below
       768px. .calc-wrap has exactly two children on all three tool pages, so a
       flex column with `order` is enough: the DOM is untouched, so the reading
       order and the tab order are unchanged. */
@media(max-width:768px){
  /* align-items:start is inherited from the grid rule; in a column flex container
     that is the CROSS axis, so the inputs panel sized to its widest table and
     rendered 338.5px inside a 292px column. Stretch restores the grid behaviour. */
  .calc-wrap{display:flex;flex-direction:column;align-items:stretch}
  .calc-wrap > .panel{order:2;min-width:0}
  .calc-wrap > .panel.result{order:1}
}

/* 17. AI-SEARCH ANSWER BLOCK. The lead sentence answer engines quote. Written with
       two classes so it survives the same `.prose p` / `.sec h2 + p` collision that
       broke the CTA bands above. */
.answer,.sec .answer,.prose .answer{
  color:var(--txt);
  font-size:1.12rem;
  line-height:1.62;
  font-weight:600;
  letter-spacing:-.01em;
  max-width:70ch;
  margin:0 0 1rem;
  padding:.85rem 1rem .85rem 1.15rem;
  border-left:3px solid var(--gold);
  border-radius:0 12px 12px 0;
  background:rgba(232,194,122,.06);
}
.answer strong,.answer b{font-weight:800;color:var(--txt)}
.answer a,.sec .answer a,.prose .answer a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.answer + .src{margin-top:-.4rem}
@media(max-width:560px){.answer,.sec .answer,.prose .answer{font-size:1.06rem;padding:.75rem .85rem .75rem 1rem}}

/* 18. SOURCE AND DATE LINE beneath a block. Small, muted, still AA on --ink. */
.src,.sec .src,.prose .src{
  display:block;
  font-size:.85rem;
  line-height:1.55;
  font-weight:500;
  color:var(--txt-3);
  max-width:74ch;
  margin:.6rem 0 1.6rem;
}
.src a,.sec .src a,.prose .src a{color:var(--txt-2);text-decoration:underline;text-underline-offset:3px}
.src a:hover{color:var(--gold)}

/* 19. FIGURES. The sheet had no figure or figcaption rule at all; the three
       existing diagrams carry inline styles and several pages are gaining images. */
figure,.figure{margin:0 0 1.6rem;max-width:100%}
figure > img,.figure > img{height:auto;border-radius:14px;border:1px solid var(--line-2)}
figcaption,.figure figcaption{
  font-size:.85rem;line-height:1.55;color:var(--txt-3);margin-top:.6rem;max-width:74ch;
}
.figure figcaption a,figcaption a{color:var(--txt-2);text-decoration:underline;text-underline-offset:3px}
/*     .diagram caps a 480-unit diagram at its own intrinsic width. Without the cap
       a 480-unit viewBox stretched to the 720px prose column and rendered its
       base-20 type at 31.7-37.5px against ~16px body text, so a footnote inside the
       picture read nearly three times the size of the caption beneath it. The border
       and radius are scoped to img so that a figure carrying the class does not draw
       a second border around the already-bordered image inside it. */
.diagram{width:100%;max-width:480px;height:auto}
img.diagram{border-radius:14px;border:1px solid var(--line-2)}

/* 20. WCAG 2.2 SC 2.5.8 target size. The breadcrumb link computed 39.3 x 17 CSS px
       on every page. The 13 August pack aimed a fix at `.crumbs a` and
       `.breadcrumb a`; neither class exists in any page on this site, so the
       breadcrumb was never fixed. The real class is `.crumb`. */
.crumb a{display:inline-flex;align-items:center;min-height:24px;padding:0 .2rem;margin:0 -.2rem}
/*     Same criterion in the contact tables and contact lists: an email or phone
       link that is the whole content of a table cell is not "inline in a sentence",
       so SC 2.5.8's Inline exception does not cover it. Measured 19px tall on
       /privacy and 21px on /about and /authors. inline-block, not inline-flex, so a
       long address still wraps inside a narrow cell instead of overflowing it. */
td a,li > a[href^="mailto:"],li > a[href^="tel:"],li > a[href*="wa.me"]{display:inline-block;min-height:24px;max-width:100%}
@media(max-width:900px){.crumb{line-height:1.9}}