/* AT PAR Gauge: font faces. Page styles are appended below. */
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-latin-900-normal-wdth125.woff2") format("woff2");font-weight:900;font-stretch:125%;font-style:normal;font-display:swap;}
@font-face{font-family:"Alexandria";src:url("/assets/fonts/alexandria-arabic-900-normal.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC7,U+10EC9-10EEE,U+10EF0-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;}
@font-face{font-family:"Alexandria";src:url("/assets/fonts/alexandria-latin-900-normal.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;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:"Geist";src:url("/assets/fonts/geist-latin-200-normal.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap;}
@font-face{font-family:"Geist";src:url("/assets/fonts/geist-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Geist";src:url("/assets/fonts/geist-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Geist";src:url("/assets/fonts/geist-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Newsreader";src:url("/assets/fonts/newsreader-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"IBM 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:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC;}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC;}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/ibm-plex-sans-arabic-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC;}

/* AT PAR Gauge, the home page. Values follow design-system/gauge/tokens.json and reference/index.html. */
:root{
  --dark:#14553F;--dark-2:#2C6D56;--page:#FBF4DC;--paper:#FFFBEC;--tint:#F4E7B4;--pop:#F5D650;--bright:#F5D650;--hook:#F44A21;--on-hook:#1A0A04;
  --lg1:var(--bright);--lg2:var(--dark);--lg3:var(--hook);--flg1:var(--bright);--flg2:var(--page);--flg3:var(--hook);--lgname:var(--dark);
  --display:"Archivo","Arial Black","Helvetica Neue",Impact,sans-serif;
  --body:"Geist","Helvetica Neue",Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --arfont:"Alexandria","Geeza Pro","Noto Sans Arabic",Tahoma,sans-serif;
  --arbody:"IBM Plex Sans Arabic","Geeza Pro","Noto Sans Arabic",Tahoma,sans-serif;
  --hs:1;--hls:-.01em;--hlh:.92;--hstretch:125%;--hw:900;--arw:900;--ars:.84;--arlh:1.35;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--dark);font-family:var(--body);font-size:16px;line-height:1.5}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance}
a{color:inherit}
i{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.08em}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--hook);outline-offset:3px}
.skip{position:absolute;top:8px;inset-inline-start:8px;transform:translateY(-300%);background:var(--paper);color:var(--dark);padding:10px 14px;border-radius:8px;z-index:40}
.skip:focus{transform:none}
.page{max-width:1240px;margin:0 auto;padding:18px 16px 40px}
.chunk{font-family:var(--display);font-stretch:var(--hstretch);font-weight:var(--hw);text-transform:uppercase;letter-spacing:var(--hls);line-height:var(--hlh)}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.875rem;line-height:1;padding:13px 17px;border-radius:8px;white-space:nowrap;text-decoration:none}
.btn.k{background:var(--dark);color:var(--paper)}
.btn.p{background:var(--paper);color:var(--dark)}
.btn.h{background:var(--hook);color:var(--on-hook)}
.btn:hover{filter:brightness(1.1)}
.sample{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.mid{text-align:center}
.sample.mid{margin-top:18px}
.thin{font-weight:200;letter-spacing:-.05em;font-variant-numeric:tabular-nums;line-height:.9}
.warm{position:relative;overflow:hidden;background:#3A2A1C}
.warm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.field{background:var(--field,var(--dark));color:var(--on-field,var(--page));border-radius:22px}

/* first screen */
.hero{padding:18px 18px 0;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;position:relative}
.nav{align-self:stretch;background:var(--paper);color:var(--dark);border-radius:12px;padding:10px 12px 10px 18px;display:flex;align-items:center;gap:24px}
.nav .brand{display:block;flex:none}
.logo{height:22px;width:94px;flex:none;display:block;color:var(--lgname)}
.logo .a{fill:var(--lg1)}.logo .b{fill:var(--lg2)}.logo .c{fill:var(--lg3)}
.nav .logo .a{stroke:var(--dark);stroke-width:1.3px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.nav .links{display:flex;gap:26px;font-family:var(--display);font-stretch:var(--hstretch);font-weight:var(--hw);text-transform:uppercase;font-size:.68rem;letter-spacing:.02em}
.nav .links a{text-decoration:none}
.nav .links a:hover{text-decoration:underline;text-underline-offset:4px}
.nav .right{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.lang{font-size:.85rem;font-weight:500;padding:8px 12px;border:1px solid var(--tint);border-radius:8px;background:var(--paper);color:var(--dark);text-decoration:none}
.lang[lang="ar"]{font-family:var(--arfont)}
.hero h1{font-size:calc(clamp(1.55rem,7vw,5.75rem)*var(--hs));margin-top:56px;color:var(--bright)}
.hero .sub{font-size:clamp(1rem,1.5vw,1.2rem);max-width:34em;margin-top:22px}
.facts{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 64px;margin:34px 0 0;padding:0}
.facts div{max-width:15em}
.facts dt{font-family:var(--display);font-stretch:var(--hstretch);font-weight:var(--hw);text-transform:uppercase;font-size:.78rem;color:var(--bright);opacity:.72;margin-bottom:8px}
.facts dd{margin:0;font-size:.95rem;line-height:1.55}
.cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.dialbox{position:relative;width:min(100%,940px);margin-top:34px}
svg{direction:ltr}
.dial{display:block;width:100%;height:auto}
.dial text{font-family:var(--mono);font-weight:500;font-size:22px;letter-spacing:.06em;fill:var(--on-field,var(--page))}
.dial .r1{fill:color-mix(in srgb,var(--hook) 80%,#000)}
.dial .r2{fill:var(--hook)}
.dial .r3{fill:color-mix(in srgb,var(--hook) 62%,#fff)}
.dial .r4{fill:var(--field,var(--dark))}
.dial .ring{stroke:var(--page);stroke-width:4}
.dial .mark{stroke:var(--page)}
.dial .ticks{fill:none;stroke:var(--page);stroke-opacity:.55;stroke-width:16;stroke-dasharray:3 25.1}
.dial .gap{fill:none;stroke:var(--bright);stroke-width:5;stroke-dasharray:2 11;stroke-linecap:round;transition:opacity .5s}
.dial .gaptxt{fill:var(--bright);transition:opacity .5s}
.dial .you,.dial .won,.dial .partxt{transition:opacity .5s}
.dial .won{opacity:0;fill:var(--bright)}
.dial .n1{stroke:var(--dark);stroke-width:9;stroke-linecap:round}
.dial .n2{stroke:var(--page);stroke-width:5;stroke-linecap:round}
.dial .n3{fill:var(--page);stroke:var(--dark);stroke-width:4}
.needle{transform-box:view-box;transform-origin:500px 380px;transition:transform 1.5s cubic-bezier(.3,1.5,.5,1)}
.closed .needle{transform:rotate(24deg)}
.closed .gap,.closed .gaptxt,.closed .you,.closed .partxt{opacity:0}
.closed .won{opacity:1}
.shut{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:var(--paper);color:var(--dark);border-radius:999px;padding:10px 16px;font-size:.8rem;font-weight:600;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.shut[aria-pressed="true"] .s0,.shut[aria-pressed="false"] .s1{display:none}
@media (prefers-reduced-motion:no-preference){
  .dial:not(.closed) .needle{animation:arrive 1.8s cubic-bezier(.3,1.4,.5,1) both,sway 5s ease-in-out 1.8s infinite}
  .dial:not(.closed) .gap{animation:march 1.6s linear infinite}
  @keyframes arrive{from{transform:rotate(-46deg)}to{transform:rotate(0deg)}}
  @keyframes sway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-2.4deg)}}
  @keyframes march{to{stroke-dashoffset:-13}}
}
@media (prefers-reduced-motion:reduce){.needle{transition:none}}

/* moving band */
.ticker{overflow:hidden;background:var(--bright);color:var(--dark);border-radius:14px;margin-top:10px;padding:15px 0}
.ticker div{display:flex;width:max-content;font-family:var(--display);font-stretch:var(--hstretch);font-weight:var(--hw);text-transform:uppercase;font-size:calc(1rem*var(--hs));white-space:nowrap}
.ticker span{padding-inline-start:34px}
.ticker span::after{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--hook);margin-inline-start:34px;vertical-align:middle;position:relative;top:-2px}
@media (prefers-reduced-motion:no-preference){.ticker div{animation:tick 36s linear infinite}@keyframes tick{to{transform:translateX(-50%)}}@keyframes tick-rtl{to{transform:translateX(50%)}}}

/* strips */
.strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding:46px 14px}
.strip .title{display:flex;align-items:center;gap:16px}
.strip .dot{flex:none;width:44px;height:44px;border-radius:50%;background:var(--dark);color:var(--bright);display:grid;place-items:center;font-family:var(--mono);font-weight:500;font-size:.8rem}
.strip h2{font-size:calc(clamp(1.5rem,3.2vw,2.5rem)*var(--hs))}
.strip .say{max-width:28em;display:flex;flex-direction:column;align-items:flex-start;gap:14px;font-size:.98rem}

/* the score keeper and the table */
.keeper{display:grid;grid-template-columns:5fr 7fr;gap:10px}
.me{background:var(--pop);border-radius:18px;padding:26px 26px 0;display:flex;flex-direction:column;justify-content:space-between;gap:22px;overflow:hidden}
.me h3{font-size:clamp(1.3rem,2.3vw,1.8rem);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.kept{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px;font-size:.86rem;line-height:1.35}
.kept li{background:color-mix(in srgb,var(--pop) 45%,var(--paper));border-radius:10px;padding:8px 12px}
.kept b{font-weight:600}
.me .who{align-self:center;position:relative;width:min(100%,330px)}
.me .who img{width:100%;aspect-ratio:1 / 1.1;object-fit:cover;object-position:50% 18%;border-radius:180px 180px 0 0;filter:sepia(.2) saturate(1.12) brightness(1.03)}
.me .who span{position:absolute;inset-inline-start:-12px;bottom:26px;background:var(--paper);border-radius:10px;padding:10px 14px;font-size:.76rem;line-height:1.3;box-shadow:0 8px 24px rgba(0,0,0,.16)}
.me .who span b{display:block;font-weight:600;font-size:.88rem}
.table{border-radius:18px;min-height:480px}
.table::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,20,0) 52%,rgba(20,20,20,.58));pointer-events:none}
.table p{position:absolute;inset-inline-start:24px;bottom:22px;z-index:2;color:#fff;font-size:clamp(1.5rem,3vw,2.3rem);font-weight:500;letter-spacing:-.02em;line-height:1.1;text-shadow:0 2px 18px rgba(0,0,0,.55)}

/* three steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);padding:10px}
.steps div{padding:26px 28px 30px;display:flex;flex-direction:column;gap:10px}
.steps div+div{border-inline-start:1px solid var(--dark-2)}
.steps b{font-family:var(--display);font-stretch:var(--hstretch);font-weight:var(--hw);font-size:calc(4.2rem*var(--hs));line-height:.9;color:var(--bright)}
.steps h3{font-size:1.3rem;font-weight:500;letter-spacing:-.02em;margin-top:8px}
.steps p{font-size:.92rem;max-width:24em}

/* number tiles */
.tiles{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.tile{border-radius:18px;padding:24px}
.s7{grid-column:span 7}.s5{grid-column:span 5}
.tile h3{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.t-dark{background:var(--dark);color:var(--page);display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.t-dark .head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.giant{font-size:clamp(5.5rem,14vw,10.5rem);display:flex;align-items:baseline;gap:10px;color:var(--bright);direction:ltr}
.giant small{font-size:.2em;letter-spacing:0;color:var(--page)}
.track{position:relative;height:10px;border-radius:5px;background:var(--dark-2);margin:8px 0 26px;direction:ltr}
.track::before{content:"";position:absolute;inset:0 29% 0 0;border-radius:5px;background:var(--bright)}
.track b{position:absolute;left:71%;top:-5px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--hook);border:3px solid var(--dark)}
.track span{position:absolute;top:18px;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em}
.track .y{left:71%;transform:translateX(-50%)}
.track .x{right:0}
.t-paper{background:var(--paper);display:flex;flex-direction:column;justify-content:center}
.donuts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px;text-align:center;font-size:.78rem}
.donuts svg{width:min(100%,96px);height:auto;display:block;margin:0 auto 8px}
.donuts text{font-family:var(--mono);font-size:8px;fill:var(--dark)}
.donuts .trk{fill:none;stroke:var(--tint);stroke-width:7}
.donuts .arc{fill:none;stroke:var(--dark);stroke-width:7}
.t-pop{background:var(--pop)}
.nums{display:grid;grid-template-columns:.75fr 1.4fr;gap:20px;align-items:center}
.nums ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.nums li{background:color-mix(in srgb,var(--pop) 45%,var(--paper));border-radius:10px;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:.9rem;line-height:1.2}
.nums li b{font-size:clamp(1.8rem,3.6vw,2.8rem);white-space:nowrap;direction:ltr}
.t-tint{background:var(--tint)}
.chart svg{width:100%;height:auto;display:block;margin-top:10px}
.chart text{font-family:var(--body);fill:var(--dark)}
.chart .ln{stroke:var(--dark)}
.chart .ar{fill:var(--pop);stroke:var(--dark);stroke-width:2.5}
.chart .pt{fill:var(--hook);stroke:var(--dark);stroke-width:3}
.chart .tag{fill:var(--dark)}
.chart .tagt{fill:var(--paper)}

/* trades */
.trades{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 14px 48px}
.trade{display:flex;flex-direction:column;gap:10px;font-size:.9rem;font-weight:500;text-decoration:none}
.trade .pic{border-radius:12px;aspect-ratio:1 / 1.02}
.trade .pic img{transition:transform .5s}
.trade:hover .pic img{transform:scale(1.04)}
.trade span{display:flex;flex-direction:column;gap:2px}
.trade small{font-weight:400;font-size:.78rem;opacity:.78}

/* closing field and footer */
.close{padding:66px 20px 62px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.close .logo{height:44px;width:186px;color:var(--page);--lg1:var(--flg1);--lg2:var(--flg2);--lg3:var(--flg3);margin-bottom:10px}
.close h2{font-size:calc(clamp(1.7rem,4.4vw,3.4rem)*var(--hs));color:var(--bright)}
.close p{max-width:30em;font-size:1.05rem}
.foot{padding:30px 14px 0;display:grid;gap:14px;font-size:.84rem}
.foot nav,.foot .sign{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline;text-underline-offset:4px}
.foot .sign{opacity:.8;font-size:.78rem}
.foot .sign strong{font-weight:600}

/* Arabic, right to left */
[dir="rtl"] body{font-family:var(--arbody)}
[dir="rtl"] .chunk,[dir="rtl"] .nav .links,[dir="rtl"] .facts dt,[dir="rtl"] .ticker div,[dir="rtl"] .steps b{font-family:var(--arfont);font-weight:var(--arw);font-stretch:normal;text-transform:none;letter-spacing:0}
[dir="rtl"] .chunk{line-height:var(--arlh)}
[dir="rtl"] .hero h1{font-size:calc(clamp(1.55rem,7vw,5.75rem)*var(--ars))}
[dir="rtl"] .strip h2{font-size:calc(clamp(1.5rem,3.2vw,2.5rem)*var(--ars))}
[dir="rtl"] .close h2{font-size:calc(clamp(1.7rem,4.4vw,3.4rem)*var(--ars))}
[dir="rtl"] .nav .links{font-size:.8rem}
[dir="rtl"] .nav{padding:10px 18px 10px 12px}
[dir="rtl"] i{font-family:inherit;font-style:normal;font-weight:600;font-size:1em}
[dir="rtl"] .hero .sub{line-height:1.8}
[dir="rtl"] .facts dd{line-height:1.9}
[dir="rtl"] .facts dt{font-size:.9rem}
[dir="rtl"] .dial text{font-family:var(--arbody);font-weight:600;font-size:25px;letter-spacing:0}
[dir="rtl"] .sample,[dir="rtl"] .track span{font-family:var(--arbody);letter-spacing:0;font-size:.74rem}
[dir="rtl"] .chart text,[dir="rtl"] .donuts{font-family:var(--arbody)}
[dir="rtl"] .giant{justify-content:flex-end}
[dir="rtl"] .me h3,[dir="rtl"] .tile h3,[dir="rtl"] .steps h3,[dir="rtl"] .table p{letter-spacing:0;line-height:1.4}
[dir="rtl"] .steps b{line-height:1.2}
[dir="rtl"] .lang{font-family:var(--body)}
@media (prefers-reduced-motion:no-preference){[dir="rtl"] .ticker div{animation-name:tick-rtl}}

@media (max-width:900px){
  .nav .links{display:none}
  .keeper{grid-template-columns:1fr}
  .s7,.s5{grid-column:span 12}
  .trades{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .steps div+div{border-inline-start:0;border-top:1px solid var(--dark-2)}
}
@media (max-width:520px){
  .page{padding:10px 8px 30px}
  .hero{padding:12px 12px 0}
  .hero h1{margin-top:40px}
  .nav{gap:10px;padding-inline-start:12px}
  .lang{padding:8px 9px}
  .dial text{font-size:30px}
  [dir="rtl"] .dial text{font-size:32px}
  .shut{bottom:8px;padding:8px 12px;font-size:.74rem}
  .strip{padding:34px 6px}
  .tile{padding:20px}
  .nums{grid-template-columns:1fr}
  .donuts{grid-template-columns:1fr 1fr}
  .trades{padding:0 6px 40px}
  .table{min-height:360px}
}

/* The first screen fits the window: the dial is whole without a scroll. (2026-11-12, the owner found it half hidden.) */
.hero{min-height:min(calc(100vh - 36px),900px);min-height:min(calc(100svh - 36px),900px)}
.hero h1{font-size:calc(min(clamp(1.55rem,7vw,5.75rem),11.5svh)*var(--hs));margin-top:auto;padding-top:clamp(18px,4.5svh,56px)}
[dir="rtl"] .hero h1{font-size:calc(min(clamp(1.55rem,7vw,5.75rem),11.5svh)*var(--ars))}
.hero .sub{margin-top:clamp(10px,2.4svh,22px)}
.hero .facts{margin-top:clamp(14px,3.5svh,34px)}
.hero .cta{margin-top:clamp(14px,3.5svh,30px);padding-bottom:clamp(14px,3svh,34px)}
.dialbox{--dw:min(100vw - 40px,940px);margin-top:auto;flex:1 1 0;min-height:min(calc(var(--dw)*.356),200px);max-height:calc(var(--dw)*.356)}
.dial{position:absolute;inset:0;width:100%;height:100%}
@media (min-width:1024px){
  .hero .facts{position:absolute;inset-inline:30px;bottom:26px;margin:0;justify-content:space-between;align-items:flex-end;pointer-events:none;z-index:1}
  .hero .facts div{pointer-events:auto}
  .hero .facts div:first-child{text-align:start}
  .hero .facts div:last-child{text-align:end}
  .dialbox{width:min(100%,940px,calc((50% - 260px)/.351))}
}
@media (max-width:520px){
  .hero{min-height:calc(100vh - 18px);min-height:calc(100svh - 18px)}
  .hero .facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;align-self:stretch}
  .hero .facts div{max-width:none}
  .hero .facts dt{margin-bottom:5px}
  .hero .facts dd{font-size:.8rem;line-height:1.4}
  [dir="rtl"] .hero .facts dd{font-size:.82rem;line-height:1.6}
  .dialbox{--dw:calc(100vw - 40px)}
}