/* Swiss Fintech — sarwareferralcode.com
   Tokens */
:root{
  --ink:#101e2e;
  --muted:#51606e;
  --paper:#ffffff;
  --wash:#f5f8f9;
  --line:#e3e9ec;
  --accent:#0b7a68;
  --accent-dark:#085d50;
  --accent-wash:#eaf5f2;
  --warn-wash:#fdf6ec;
  --warn-line:#ecd9b8;
  --radius:12px;
  --sans:"Noto Sans Arabic",-apple-system,BlinkMacSystemFont,"avenir next",avenir,"segoe ui","helvetica neue","Adwaita Sans",Cantarell,Ubuntu,roboto,noto,helvetica,arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Menlo,monospace;
  --max:72rem;
  /* Easing tokens — Emil Kowalski guidelines */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);
  /* Spacing scale */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2.5rem;
  --space-7:clamp(3rem,7vw,5rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;color-scheme:light}
/* Intentional touch behaviour for all interactive elements */
a,button,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  font-size:clamp(1rem,.95rem + .25vw,1.0625rem);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
[lang="ar"] body,html[lang="ar"] body{line-height:1.75}
img{max-width:100%;height:auto;display:block}
a{
  color:var(--accent-dark);
  text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent-dark) 40%,transparent);
  /* ease (not ease-out) for colour/underline hover changes — Emil guideline */
  transition:color 150ms ease,text-decoration-color 150ms ease;
}
a:hover{color:var(--accent);text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Skip link: visible only on keyboard focus */
.skip-link{position:absolute;inset-inline-start:var(--space-4);top:-3rem;z-index:50;background:var(--paper);color:var(--accent-dark);border:1px solid var(--accent);border-radius:var(--radius);padding:.6rem 1rem;font-weight:600;text-decoration:none;transition:top 150ms var(--ease-out)}
.skip-link:focus-visible{top:var(--space-3)}
main{scroll-margin-top:5rem}

/* Noto Sans Arabic carries slightly wide default metrics for Latin;
   keep headings at neutral tracking — never letterspace Arabic. */
h1,h2,h3{letter-spacing:0}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}

/* ---------- Header ---------- */
.site-header{border-block-end:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:20}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:3.75rem}
.brand{font-weight:700;text-decoration:none;color:var(--ink);font-size:1.0625rem;display:flex;align-items:center;gap:var(--space-2);min-height:44px;white-space:nowrap}
.brand-dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--accent);flex:none}
.nav{display:flex;gap:clamp(.75rem,2vw,1.5rem);align-items:center;font-size:.9375rem}
.nav a{text-decoration:none;color:var(--muted);padding-block:var(--space-3);min-height:44px;display:inline-flex;align-items:center;transition:color 150ms ease}
@media (hover:hover) and (pointer:fine){
  .nav a:hover{color:var(--ink)}
}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent)}
.lang-switch{text-decoration:none;color:var(--ink);font-size:.9375rem;white-space:nowrap;transition:color 150ms ease}
@media (hover:hover) and (pointer:fine){
  .lang-switch:hover{color:var(--accent-dark)}
}

/* Mobile disclosure menu */
.nav-menu{display:none;position:relative}
.nav-menu summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-2);
  min-height:44px;min-width:44px;padding:.5rem .9rem;justify-content:center;
  border:1px solid var(--line);border-radius:999px;font-size:.875rem;font-weight:600;color:var(--ink);
  transition:border-color 150ms ease;
}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary::after{content:"";width:.5em;height:.5em;border-inline-end:1.5px solid currentColor;border-block-end:1.5px solid currentColor;transform:rotate(45deg) translateY(-15%);transition:transform 200ms var(--ease-out)}
.nav-menu[open] summary::after{transform:rotate(-135deg) translateY(-15%)}
.nav-menu[open] summary{border-color:var(--accent)}
.nav-menu-list{
  position:absolute;inset-inline-end:0;top:calc(100% + .5rem);z-index:30;
  min-width:14rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 8px 28px -8px rgba(16,30,46,.18);padding:var(--space-2);list-style:none;
  /* Enter from scale(0.95) — never scale(0) — Emil guideline */
  transform-origin:top right;
  animation:menu-in 180ms var(--ease-out) both;
}
[dir="rtl"] .nav-menu-list{transform-origin:top left}
@keyframes menu-in{
  from{opacity:0;transform:scale(0.95) translateY(-4px)}
  to{opacity:1;transform:none}
}
.nav-menu-list a{display:flex;align-items:center;min-height:44px;padding:.5rem .9rem;border-radius:8px;text-decoration:none;color:var(--ink);font-size:1rem;transition:background 120ms ease}
@media (hover:hover) and (pointer:fine){
  .nav-menu-list a:hover{background:var(--wash)}
}
.nav-menu-list a[aria-current="page"]{color:var(--accent-dark);font-weight:600;background:var(--accent-wash)}
@media (max-width:720px){
  .nav .nav-page{display:none}
  .nav .lang-switch{display:none}
  .nav-menu{display:block}
}


/* ---------- Hero ---------- */
.hero{position:relative;padding-block:var(--space-7) clamp(2.5rem,6vw,4rem);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset-block-start:-40%;inset-inline-start:50%;
  transform:translateX(-50%);width:60rem;height:34rem;border-radius:50%;
  background:radial-gradient(closest-side,rgba(11,122,104,.10),transparent 70%);
  pointer-events:none;
}
[dir="rtl"] .hero::before{transform:translateX(50%)}
.hero .wrap{position:relative;display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:center}
@media (min-width:880px){.hero .wrap{grid-template-columns:1.15fr 1fr}}
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-size:.8125rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-dark);background:var(--accent-wash);border:1px solid var(--line);border-radius:999px;padding:.3rem .9rem;margin-block-end:var(--space-3)}
[dir="rtl"] .eyebrow{letter-spacing:0;text-transform:none}
h1{font-size:clamp(2rem,1.35rem + 2.8vw,3.25rem);line-height:1.15;font-weight:700;margin-block-end:var(--space-4);text-wrap:balance}
[lang="ar"] h1,html[lang="ar"] h1{line-height:1.35}
.hero p.lede{font-size:clamp(1.05rem,1rem + .4vw,1.2rem);color:var(--muted);max-width:34em;text-wrap:pretty}
.hero-meta{display:flex;gap:var(--space-5);flex-wrap:wrap;margin-block-start:var(--space-5);font-size:.9rem;color:var(--muted)}
.hero-meta strong{color:var(--ink);font-variant-numeric:tabular-nums}

/* Compact hero for subpages (no code card) */
.hero-sub{padding-block:clamp(2.25rem,5vw,3.5rem) clamp(1.75rem,4vw,2.75rem)}
.hero-sub h1{font-size:clamp(1.7rem,1.25rem + 2vw,2.5rem)}
.hero-sub::before{height:22rem;inset-block-start:-60%}

/* ---------- Signature: the code card ---------- */
.code-card{
  position:relative;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdfd 100%);
  border:1px solid var(--line);
  border-radius:calc(var(--radius) + 4px);
  box-shadow:0 1px 2px rgba(16,30,46,.05),0 16px 40px -18px rgba(11,122,104,.28);
  padding:clamp(1.5rem,3vw,2rem);
  overflow:hidden;
  /* ease-in-out for on-screen movement — Emil guideline */
  transition:transform 250ms var(--ease-in-out),box-shadow 250ms var(--ease-in-out);
}
.code-card::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--accent) 70%,transparent);
}
/* Gate hover on pointer devices only — Emil guideline */
@media (hover:hover) and (pointer:fine){
  .code-card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(16,30,46,.05),0 24px 52px -18px rgba(11,122,104,.34)}
}
.code-card .card-label{display:flex;justify-content:space-between;align-items:baseline;font-size:.8125rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-block-end:var(--space-4)}
[dir="rtl"] .code-card .card-label{letter-spacing:0;text-transform:none}
.code-card .verified{color:var(--accent-dark);font-weight:600;letter-spacing:0;text-transform:none;font-size:.8125rem}
.code-value{
  font-family:var(--mono);font-size:clamp(1.5rem,1.1rem + 2vw,2.4rem);font-weight:600;
  letter-spacing:.14em;text-align:center;padding:1.1rem .5rem;
  background:var(--wash);border:1px dashed var(--line);border-radius:var(--radius);
  user-select:all;direction:ltr;unicode-bidi:isolate;
  overflow-wrap:anywhere;
}
@media (max-width:360px){.code-value{letter-spacing:.06em;font-size:1.35rem}}
.copy-btn{
  display:flex;justify-content:center;align-items:center;gap:var(--space-2);width:100%;
  margin-block-start:var(--space-4);padding:.9rem 1rem;border:none;border-radius:var(--radius);
  background:var(--accent);color:#fff;font:inherit;font-weight:600;font-size:1.0625rem;
  cursor:pointer;min-height:44px;
  /* 160ms ease-out for button feedback — Emil guideline */
  transition:background 160ms var(--ease-out),transform 160ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.copy-btn:hover{background:var(--accent-dark)}}
/* scale(0.97) press — never scale(0.9+), keep 0.95-0.98 — Emil guideline */
.copy-btn:active{transform:scale(0.97)}
.copy-btn.copied{background:var(--accent-dark)}
.code-card .card-note{font-size:.85rem;color:var(--muted);margin-block-start:var(--space-3);text-align:center}

/* ---------- Sections ---------- */
section{padding-block:var(--space-7)}
section + section{border-block-start:1px solid var(--line)}
h2{font-size:clamp(1.4rem,1.15rem + 1vw,1.9rem);font-weight:700;margin-block-end:var(--space-3);text-wrap:balance}
.section-intro{color:var(--muted);max-width:44em;margin-block-end:var(--space-5)}
.section-intro-tight{color:var(--muted);max-width:44em;margin:0}
h3{font-size:1.0625rem;font-weight:650;margin-block-end:var(--space-2)}

/* Steps */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;counter-reset:step}
@media (min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{list-style:none;background:var(--paper);padding:var(--space-5);counter-increment:step;position:relative}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--mono);font-size:.8125rem;font-weight:600;color:var(--accent-dark);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-wash);border-radius:999px;padding:.2rem .6rem;
  margin-block-end:var(--space-3);
}
@media (min-width:760px){
  .steps li:not(:last-child)::after{
    content:"";position:absolute;inset-inline-end:-1px;top:50%;width:0;height:0;
    border-block:6px solid transparent;border-inline-start:6px solid var(--line);
    transform:translateY(-50%);z-index:1;
  }
}
.steps li p{font-size:.9375rem;color:var(--muted)}

/* Tables */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);margin-block:var(--space-4) var(--space-5);-webkit-overflow-scrolling:touch;background:
  linear-gradient(to right,var(--paper) 30%,transparent),
  linear-gradient(to left,var(--paper) 30%,transparent) 100% 0,
  radial-gradient(farthest-side at 0 50%,rgba(16,30,46,.14),transparent),
  radial-gradient(farthest-side at 100% 50%,rgba(16,30,46,.14),transparent) 100% 0;
  background-repeat:no-repeat;background-size:3rem 100%,3rem 100%,1rem 100%,1rem 100%;background-attachment:local,local,scroll,scroll}
table{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:28rem}
caption{text-align:start;font-size:.85rem;color:var(--muted);padding:var(--space-3) var(--space-4);caption-side:bottom}
th,td{text-align:start;padding:.85rem 1rem;border-block-start:1px solid var(--line)}
thead th{border-block-start:none;background:var(--wash);font-size:.8125rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600}
[dir="rtl"] thead th{letter-spacing:0;text-transform:none}
td.num,th.num{font-variant-numeric:tabular-nums;text-align:end}
tbody tr:hover{background:var(--wash)}

/* Fact rows / honest constraints */
.facts{display:grid;gap:var(--space-5)}
@media (min-width:760px){.facts{grid-template-columns:1fr 1fr}}
.fact{border:1px solid var(--line);border-inline-start:3px solid var(--line);border-radius:var(--radius);padding:var(--space-5);background:var(--paper)}
.fact p{font-size:.9375rem;color:var(--muted)}
.fact.warn{background:var(--warn-wash);border-color:var(--warn-line);border-inline-start-color:#c9962e}
.fact:not(.warn){border-inline-start-color:var(--accent)}

/* FAQ */
details{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);transition:border-color 200ms ease}
details[open]{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
details + details{margin-block-start:var(--space-3)}
summary{cursor:pointer;font-weight:600;padding:var(--space-4) var(--space-5);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);min-height:44px}
summary::-webkit-details-marker{display:none}
/* Rotate the icon, keep the + vs – swap */
summary::after{content:"+";font-family:var(--mono);color:var(--accent-dark);font-size:1.2rem;flex:none;transition:transform 200ms var(--ease-out)}
details[open] summary::after{content:"–"}
details .answer{padding:0 var(--space-5) var(--space-4);color:var(--muted);font-size:.9375rem}
details .answer p + p{margin-block-start:var(--space-2)}
/* Enter from scale(0.98)+opacity — never scale(0) — Emil guideline; ease-out for entering elements */
details[open] .answer{animation:answer-in 220ms var(--ease-out) both}
@keyframes answer-in{
  from{opacity:0;transform:translateY(-6px) scale(0.98)}
  to{opacity:1;transform:none}
}
/* Progressive enhancement: smooth height via ::details-content where supported */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  details::details-content{
    block-size:0;overflow:hidden;
    transition:block-size 280ms var(--ease-out),content-visibility 280ms allow-discrete;
  }
  details[open]::details-content{block-size:auto}
  details[open] .answer{animation:none}
}

/* Prose pages */
.prose{max-width:44rem}
.prose h2{margin-block-start:var(--space-6)}
.prose h2:first-child{margin-block-start:0}
.prose p + p{margin-block-start:var(--space-4)}
.prose ol,.prose ul{padding-inline-start:1.4rem;margin-block:var(--space-4)}
.prose li + li{margin-block-start:var(--space-2)}
.prose .term{font-weight:650;color:var(--ink)}

/* Callout */
.callout{background:var(--accent-wash);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-5);margin-block:var(--space-5);font-size:.9375rem}
.callout.warn{background:var(--warn-wash);border-color:var(--warn-line)}

/* CTA band */
.cta-band{background:var(--wash);border-block-start:1px solid var(--line)}
.cta-band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-5);padding-block:var(--space-6)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.7rem 1.5rem;border-radius:var(--radius);background:var(--accent);color:#fff;font-weight:600;text-decoration:none;transition:background 160ms var(--ease-out),transform 160ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--accent-dark);color:#fff}}
.btn:active{transform:scale(0.97)}

/* Footer */
.site-footer{border-block-start:1px solid var(--line);background:var(--wash);padding-block:var(--space-6);font-size:.875rem;color:var(--muted)}
.site-footer .disclosure{max-width:52rem;margin-block-end:var(--space-5)}
.site-footer nav{display:flex;gap:var(--space-5);flex-wrap:wrap;margin-block-end:var(--space-4)}
.site-footer nav a{color:var(--muted);display:inline-flex;align-items:center;min-height:44px}
.site-footer .fineprint{font-size:.8125rem}

/* Reveal on scroll — ease-out for entering elements; scale(0.98) not scale(0) — Emil guideline */
.reveal{opacity:0;transform:translateY(10px) scale(0.98);transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* Stagger for steps grid — container stays visible, children stagger in */
.steps.reveal{opacity:1;transform:none}
.steps.reveal li{opacity:0;transform:translateY(8px);transition:opacity 350ms var(--ease-out),transform 350ms var(--ease-out)}
.steps.reveal.in li{opacity:1;transform:none}
/* 60ms stagger — keeps it under 80ms max — Emil guideline */
.steps.reveal.in li:nth-child(2){transition-delay:60ms}
.steps.reveal.in li:nth-child(3){transition-delay:120ms}
.steps.reveal.in li:nth-child(4){transition-delay:180ms}

/* Stagger for fact cards */
.facts.reveal{opacity:1;transform:none}
.facts.reveal .fact{opacity:0;transform:translateY(8px);transition:opacity 350ms var(--ease-out),transform 350ms var(--ease-out)}
.facts.reveal.in .fact{opacity:1;transform:none}
.facts.reveal.in .fact:nth-child(2){transition-delay:60ms}
.facts.reveal.in .fact:nth-child(3){transition-delay:120ms}
.facts.reveal.in .fact:nth-child(4){transition-delay:180ms}

/* Reduced motion: keep opacity fades, strip all transforms — Emil guideline */
@media (prefers-reduced-motion:reduce){
  .reveal,.steps.reveal li,.facts.reveal .fact{opacity:1;transform:none;transition:none}
  .steps.reveal.in li,.facts.reveal.in .fact{transition-delay:0ms}
}

/* Mobile hero: tighten so the code card fits in the initial viewport */
@media (max-width:879px){
  .hero{padding-block:var(--space-5)}
  .hero .wrap{gap:var(--space-4)}
  .hero .eyebrow{margin-block-end:var(--space-2)}
  .hero h1{margin-block-end:var(--space-2)}
  .hero .hero-meta{margin-block-start:var(--space-3);gap:var(--space-3)}
}

/* iPhone notch safety */
@supports (padding:max(0px)){
  .wrap{padding-inline:max(clamp(1.25rem,4vw,2.5rem),env(safe-area-inset-left),env(safe-area-inset-right))}
  .site-footer{padding-block-end:max(var(--space-6),env(safe-area-inset-bottom))}
}

/* Three-column fact grid variant */
@media (min-width:760px){.facts--3{grid-template-columns:repeat(3,1fr)}}

/* Official links list */
.official-links{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-block-start:var(--space-5);font-size:.9375rem}
.official-links a{text-decoration-color:transparent}
.official-links a:hover{text-decoration-color:currentColor}

/* Regulation badge */
.reg-note{display:inline-flex;align-items:center;gap:.4rem;font-size:.8125rem;color:var(--muted);background:var(--wash);border:1px solid var(--line);border-radius:999px;padding:.25rem .75rem;margin-block-start:var(--space-4)}

/* Print: keep it from exploding */
@media print{
  .site-header,.copy-btn,.cta-band .btn,.nav-menu{display:none}
  .hero::before{display:none}
  .reveal{opacity:1;transform:none}
  body{font-size:11pt}
  a{color:var(--ink);text-decoration:none}
}