/* MyDS marketing site, shell styles (M2 T13a): fonts, extra tokens, base, buttons, nav + menu sheet, footer, skip link, focus.
   Ported from the frozen prototype F01-home. The shared colour tokens come from partials.tokens (inline in <head>). */
/* ===== Fonts (D-513): self-hosted, SIL OFL licences in fonts/, font-display swap ===== */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-latin-ext-standard-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-latin-standard-normal.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:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-latin-wght-normal.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:"Readex Pro";font-style:normal;font-weight:160 700;font-display:swap;src:url(fonts/readex-pro-arabic-wght-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-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-10EC4,U+10EFC-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:"Readex Pro";font-style:normal;font-weight:160 700;font-display:swap;src:url(fonts/readex-pro-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:160 700;font-display:swap;src:url(fonts/readex-pro-latin-wght-normal.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}

/* ===== 1. Tokens the marketing pages add on top of partials.tokens ===== */
:root{
  --road:#E9E7E1;--road-line:#8E8B82;--trace:#CFCBC1;
  --night:#0A0A0C;--night-1:#141417;--night-2:#1C1C20;--night-line:#2A2A30;--gold-glow:rgb(201 162 74/.28);
  --display-stretch:125%;
  --fs-mega:clamp(52px,13.5vw,232px);--lh-mega:.86;--track-mega:-.045em;
  --fs-display:clamp(34px,5.4vw,84px);--lh-display:.96;--track-display:-.035em;
  --fs-h3:clamp(19px,1rem + .5vw,23px);--fs-lead:clamp(17px,1rem + .4vw,21px);--fs-body:clamp(16px,.95rem + .15vw,17px);--fs-cap:12px;--lh-body:1.6;
  --space-9:96px;--section:clamp(80px,11vw,152px);--max:1280px;
  --ease-drive:cubic-bezier(.16,1,.3,1);--ease-shift:cubic-bezier(.65,0,.35,1);--ease-snap:cubic-bezier(.34,1.5,.5,1);
  --dur-reveal:520ms;--stagger:40ms;--fs-title:clamp(34px,4.6vw,72px)}
[data-theme="dark"]{--road:#1E1E22;--road-line:#4A4A52;--trace:#34343B}
@media (prefers-color-scheme:dark){:root:not([data-theme]){--road:#1E1E22;--road-line:#4A4A52;--trace:#34343B}}
.night{--bg:var(--night);--surface-1:var(--night-1);--surface-2:var(--night-2);--text:#F4F2EC;--text-2:#C6C3BA;--text-muted:#9A978F;--border:var(--night-line);--border-strong:#6A6A72;--gold-text:#D6B460;--focus:#D6B460;--danger:#F47C74;--road:#1C1C20;--road-line:#4A4A52;color-scheme:dark;background:var(--bg);color:var(--text)}
[dir="rtl"]{--lh-mega:1.12;--lh-display:1.2;--track-mega:0;--track-display:0;--lh-body:1.85}

/* ===== 2. Base ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-body)/var(--lh-body) var(--font-ui);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ol,ul,figure{margin:0}ul,ol{padding:0;list-style:none}
a{color:inherit}button{font:inherit;color:inherit}
::selection{background:var(--gold);color:var(--on-gold)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;inset-inline-start:16px;top:-60px;z-index:100;background:var(--gold);color:var(--on-gold);padding:10px 16px;border-radius:var(--radius-sm);font-weight:600;text-decoration:none;transition:top var(--dur-base) var(--ease-drive)}
.skip:focus{top:12px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--margin)}
.ov{font:600 var(--fs-cap)/1.3 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);display:flex;align-items:center;gap:10px}
.ov::before{content:"";width:28px;height:2px;background:repeating-linear-gradient(90deg,currentColor 0 6px,transparent 6px 10px)}
[dir="rtl"] .ov{letter-spacing:0;text-transform:none;font-size:14px}
.h2{font:800 var(--fs-display)/var(--lh-display) var(--font-display);font-stretch:var(--display-stretch);letter-spacing:var(--track-display);text-wrap:balance}
.h2 em,.mega em{font-style:normal;color:var(--gold-text)}
.night .mega em{color:var(--gold)}
.lead{font-size:var(--fs-lead);color:var(--text-2);max-width:56ch;text-wrap:pretty}
.num{font-variant-numeric:tabular-nums}
bdi{unicode-bidi:isolate}
.ex{font:600 11px/1 var(--font-ui);color:var(--text-muted);border:1px solid var(--border);border-radius:var(--radius-full);padding:3px 8px}
.mega{font:800 var(--fs-mega)/var(--lh-mega) var(--font-display);font-stretch:var(--display-stretch);letter-spacing:var(--track-mega)}
.mega .ln{display:block;white-space:nowrap;overflow:hidden;padding-block:.06em;margin-block:-.06em}
.mega .ln>span{display:inline-block}
/* quick heading reveal (only some sections, D-073) */
.js .rv-h{clip-path:inset(0 0 100% 0);transform:translateY(.25em)}
.js .rv-h.in{clip-path:inset(-10% -5% -20% -5%);transform:none;transition:clip-path 460ms var(--ease-drive),transform 460ms var(--ease-drive)}

/* ===== 3. Buttons v2 "instrument" (COMPONENTS §1, D-067) ===== */
.btn{--h:44px;--fg:var(--text);--dir:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 20px;border-radius:var(--radius-sm);border:1px solid transparent;font:600 15px/1 var(--font-ui);cursor:pointer;text-decoration:none;position:relative;isolation:isolate;overflow:hidden;white-space:nowrap;color:var(--fg);transition:background-color var(--dur-base),border-color var(--dur-base),box-shadow var(--dur-slow) var(--ease-drive),transform var(--dur-slow) var(--ease-drive)}
[dir="rtl"] .btn{--dir:-1}
.btn.big{--h:54px;padding:0 26px;font-size:16px}
.btn.compact{--h:38px;padding:0 14px;font-size:14px}
.btn .lab{position:relative;display:inline-block}
.btn .lab[data-t]{color:transparent;overflow:hidden;vertical-align:top;padding-block:.25em;margin-block:-.25em}
.btn .lab[data-t]::before,.btn .lab[data-t]::after{content:attr(data-t);content:attr(data-t)/"";position:absolute;inset-inline-start:0;top:.25em;color:var(--fg);transition:transform 420ms var(--ease-drive)}
.btn .lab[data-t]::after{transform:translateY(140%)}
.btn:hover .lab[data-t]::before{transform:translateY(-140%)}.btn:hover .lab[data-t]::after{transform:none}
.btn .arr{width:18px;height:18px;transition:transform var(--dur-slow) var(--ease-drive)}
[dir="rtl"] .btn .arr{transform:scaleX(-1)}
.btn:hover .arr{transform:translateX(3px)}[dir="rtl"] .btn:hover .arr{transform:scaleX(-1) translateX(3px)}
.btn-primary{--fg:var(--on-gold);background:var(--gold);box-shadow:inset 0 1px 0 rgb(255 255 255/.4),inset 0 -1px 0 rgb(0 0 0/.16),0 1px 2px rgb(20 20 20/.14),0 8px 18px -8px rgb(201 162 74/.7)}
.btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgb(255 255 255/.2),rgb(255 255 255/0) 52%,rgb(0 0 0/.05))}
.btn-primary::after{content:"";position:absolute;top:-10%;bottom:-10%;width:40%;inset-inline-start:0;z-index:-1;background:linear-gradient(100deg,transparent,rgb(255 255 255/.6) 50%,transparent);transform:translateX(calc(-130% * var(--dir))) skewX(-20deg);opacity:0;pointer-events:none}
.btn-primary:hover::after{animation:sweep 900ms var(--ease-drive)}
@keyframes sweep{0%{opacity:0;transform:translateX(calc(-130% * var(--dir))) skewX(-20deg)}25%{opacity:1}100%{opacity:0;transform:translateX(calc(330% * var(--dir))) skewX(-20deg)}}
.btn-primary:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgb(255 255 255/.45),inset 0 -1px 0 rgb(0 0 0/.16),0 2px 4px rgb(20 20 20/.14),0 14px 28px -10px rgb(201 162 74/.85)}
.btn-primary:focus-visible{box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 22%,transparent)}
.btn-secondary{--fg:var(--text);background:var(--surface-1);border-color:var(--border-strong)}
.btn-secondary::after,.btn-ghost::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 520ms var(--ease-drive)}
[dir="rtl"] .btn-secondary::after,[dir="rtl"] .btn-ghost::after{transform-origin:right}
.btn-secondary:hover{border-color:var(--text)}.btn-secondary:hover::after{transform:scaleX(1)}
.btn-ghost{--fg:var(--text);background:transparent;padding-inline:12px}
.btn-ghost::after{inset-inline:12px;bottom:8px;height:1.5px;background:var(--gold-text)}
.btn-ghost:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}.btn-ghost:hover::after{transform:scaleX(1)}
.btn:active{transform:translateY(1px) scale(.985);transition-duration:80ms}
.ibtn{position:relative;width:44px;height:44px;display:inline-grid;place-items:center;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--text-2);cursor:pointer}
.ibtn:hover{color:var(--text);border-color:var(--border-strong)}
.ibtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ibtn.sm{width:36px;height:36px}

/* ===== 4. Nav ===== */
.nav{position:fixed;inset-inline:0;top:0;z-index:50;height:68px;display:flex;align-items:center;gap:var(--space-5);padding-inline:var(--margin);color:var(--text);border-bottom:1px solid transparent;transition:background-color var(--dur-slow),border-color var(--dur-slow)}
.nav.scrolled{background:color-mix(in srgb,var(--bg) 88%,transparent);border-bottom-color:var(--border);backdrop-filter:saturate(1.2) blur(10px)}
.nav.on-night{--bg:var(--night);--surface-1:var(--night-1);--text:#F4F2EC;--text-2:#C6C3BA;--border:var(--night-line);--border-strong:#6A6A72;--gold-text:#D6B460;--focus:#D6B460;color-scheme:dark}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:800 21px/1 "Archivo",system-ui,sans-serif;font-stretch:125%;letter-spacing:-.03em;direction:ltr}
.logo svg{width:28px;height:28px;color:var(--gold)}
.logo b{color:var(--gold-text)}
.logo .mk path,.logo .mk rect{fill:none;stroke:currentColor}
.js .nav .mk :is(path,rect){stroke-dasharray:1;stroke-dashoffset:1}
.js.ready .nav .mk :is(path,rect){stroke-dashoffset:0;transition:stroke-dashoffset 900ms var(--ease-drive) 150ms}
.nav-links{display:flex;gap:var(--space-5);margin-inline-start:auto;font-size:15px;color:var(--text-2)}
.nav-links a{text-decoration:none;padding-block:8px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--dur-slow) var(--ease-drive),color var(--dur-base)}
[dir="rtl"] .nav-links a{background-position:100% 100%}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--text);background-size:100% 1px}
.soon{font-size:11px;padding:2px 7px;border:1px solid var(--border-strong);border-radius:var(--radius-full);margin-inline-start:6px;color:var(--text-muted)}
.tools{display:flex;gap:var(--space-2);align-items:center}
.tbtn{min-width:44px;height:40px;padding-inline:10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--text);font:600 14px/1 var(--font-ui);cursor:pointer}
.tbtn:hover{border-color:var(--border-strong)}
.menu-btn{display:none}
.nav-links a.m-only{display:none}
@media (max-width:960px){
  .menu-btn{display:inline-grid}.tools{margin-inline-start:auto}
  .nav-links{position:fixed;top:68px;inset-inline:0;flex-direction:column;gap:0;padding:8px var(--margin) 20px;background:var(--bg);border-bottom:1px solid var(--border);font-size:20px;visibility:hidden;opacity:0;transform:translateY(-8px)}
  .nav-links.open{visibility:visible;opacity:1;transform:none;transition:opacity var(--dur-base),transform var(--dur-slow) var(--ease-drive)}
  .nav-links a{padding-block:14px;border-bottom:1px solid var(--border);background:none}
  .nav-links a.m-only{display:block}}
@media (max-width:600px){.nav .login,.nav .btn-primary{display:none}}

.sec-h{display:grid;gap:var(--space-4);max-width:920px;margin-bottom:var(--space-7)}
.sec-h .h2{font-size:var(--fs-title)}
.sec-h.c{justify-items:center;text-align:center;margin-inline:auto}
.sec-h.c .lead{margin-inline:auto}
.tag{font-size:13px;font-weight:600;color:var(--on-gold);background:var(--gold);padding:6px 11px;border-radius:var(--radius-xs)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:var(--radius-full);border:1px solid var(--border);font-size:14px;font-weight:500}
.chip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
svg.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ===== 12. Footer: the wordmark fills as you arrive ===== */
.foot{padding-top:var(--space-9);border-top:1px solid var(--border);overflow:hidden}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--space-6);font-size:14px;color:var(--text-2)}
.fgrid h3{font:600 12px/1 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:14px}
[dir="rtl"] .fgrid h3{letter-spacing:0;font-size:13px}
.fgrid ul{display:grid;gap:10px}
.fgrid a{text-decoration:none}.fgrid a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.fine{margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--border);font-size:13px;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.fine .langs{display:flex;gap:14px;margin-inline-start:auto}
.fine .langs a{text-decoration:none}.fine .langs a[aria-current]{color:var(--text);font-weight:600}
.giant{margin-top:var(--space-7);font:800 22vw/.78 "Archivo",system-ui,sans-serif;font-stretch:125%;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px var(--border-strong);white-space:nowrap;text-align:center;direction:ltr;user-select:none;margin-bottom:-.12em;background:linear-gradient(var(--gold),var(--gold)) 0 0/var(--fill,0%) 100% no-repeat;-webkit-background-clip:text;background-clip:text}
.giant b{-webkit-text-stroke-color:var(--gold)}
@media (max-width:900px){.fgrid{grid-template-columns:repeat(2,1fr)}.fgrid>div:first-child{grid-column:1/-1}}

.smp{display:inline-flex;align-items:center;width:max-content;border:1px dashed var(--gold-text);color:var(--gold-text);border-radius:var(--radius-full);padding:4px 10px;font:700 11px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase}
[dir="rtl"] .smp{letter-spacing:0;text-transform:none;font-size:12px}
/* ===== T13a additions to the prototype (no inline styles needed) ===== */
.sprite{position:absolute;width:0;height:0}
a.tbtn{display:inline-grid;place-items:center;text-decoration:none}
.ftag{margin-top:12px}

/* ===== Cookie banner (S92/S08, M2 T14; ported from the F01 .cookie card). Works with no JavaScript: a plain form + <details>. ===== */
.ck{position:fixed;inset-inline-start:var(--margin);bottom:20px;z-index:60;width:min(440px,calc(100% - 32px));max-height:calc(100vh - 40px);overflow:auto;background:var(--surface-1);border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--e3);padding:16px;font-size:14px;color:var(--text-2)}
.ck-form{display:grid;gap:12px}
.ck h2{font:600 15px/1.2 var(--font-ui);color:var(--text)}
.ck p{margin:0}
.ck a{color:var(--gold-text)}
.ck-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.ck-btn{flex:1 1 auto;white-space:nowrap}
.ck-btn::-webkit-details-marker{display:none}
summary.ck-btn{list-style:none}
.ck-choose{flex:1 1 auto;display:block}
.ck-choose[open]{flex-basis:100%}
.ck-choose>summary{display:flex}
.ck-panel{display:grid;gap:12px;padding-top:12px;margin-top:12px;border-top:1px solid var(--border)}
.ck-row{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer}
.ck-row b{display:block;color:var(--text);font-weight:600}
.ck-row small{display:block;color:var(--text-muted);font-size:13px}
.ck-on{font-weight:600;color:var(--text);white-space:nowrap}
.ck-row input[type=checkbox]{appearance:none;flex:none;width:44px;height:26px;border-radius:13px;background:var(--border-strong);position:relative;cursor:pointer;transition:background-color var(--dur-base)}
.ck-row input[type=checkbox]::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:var(--surface-1);box-shadow:0 1px 2px rgb(0 0 0/.3);transition:transform var(--dur-base) var(--ease-drive)}
.ck-row input[type=checkbox]:checked{background:var(--gold)}
.ck-row input[type=checkbox]:checked::after{transform:translateX(18px)}
[dir="rtl"] .ck-row input[type=checkbox]:checked::after{transform:translateX(-18px)}
.ck-note{font-size:13px;color:var(--text-muted)}
@media (max-width:600px){.ck{bottom:12px;inset-inline-start:16px}}

/* ===== Reduced motion: the device setting only (shared tokens also stop animations; JS adds .rm for the static final states) ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .skip,.btn,.btn *,.btn::before,.btn::after,.nav-links a{transition-duration:1ms!important;animation:none!important}
}
.rm *,.rm *::before,.rm *::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:120ms!important;transition-delay:0ms!important}
.rm .nav .mk :is(path,rect),.rm .vanish line{stroke-dashoffset:0!important}