/*
Theme Name: زياد شلبي
Author: Zeyad Shalaby
Description: Portfolio theme.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: zeyad-shalaby
*/

:root{--lr:32px;--bg:#F3E5DA;--surface:#FBF4EE;--ink:#312C3E;--muted:#6b6170;--line:#D3C4C2;--pr:#416EDD;--pr2:#2857C0;--onpr:#fff;--soft:#E3E6FB;--ivory:#F3E5DA;--mocha:#B47D68;--hero:#416EDD;color-scheme:light}
[data-theme=dark]{--bg:#221E2C;--surface:#312C3E;--ink:#F3E5DA;--muted:#D3C4C2;--line:#4b445b;--pr:#869BF0;--pr2:#6983E8;--onpr:#1f1b29;--soft:#3b3960;--hero:#2857C0;color-scheme:dark}

*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--ink);font-family:"IBM Plex Sans Arabic","Plus Jakarta Sans",system-ui,sans-serif;line-height:1.7;overflow-x:hidden}
[dir=ltr] body{font-family:"Plus Jakarta Sans","IBM Plex Sans Arabic",system-ui,sans-serif}
h1,h2,h3,.logo{font-family:"Alexandria",sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--pr);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* Language: both are in the markup, <html lang> picks one. */
html[lang=ar] .l-en,html[lang=en] .l-ar{display:none}

/* Theme icon */
[data-theme=light] .i-dark,[data-theme=dark] .i-light{display:none}

/* Page curtain: lifts on load with CSS alone, and drops again (from JS) when a link is followed. */
.curtain{position:fixed;inset:0;z-index:200;background:#416EDD;pointer-events:none;transform-origin:top;animation:curtain-out .65s cubic-bezier(.76,0,.24,1) .1s both}
@keyframes curtain-out{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@media (prefers-reduced-motion:reduce){.curtain{display:none}}
@media print{.curtain{display:none}}

/* Nav: --p runs 0 (open bar across the page) to 1 (floating charcoal card). */
@property --p{syntax:'<number>';inherits:true;initial-value:0}
.nav{position:fixed;inset-block-start:0;inset-inline:0;z-index:50;pointer-events:none;
	--p:0;transition:--p .6s cubic-bezier(.65,0,.35,1);
	--n-ink:color-mix(in srgb,#F3E5DA calc(var(--p)*100%),var(--ink));
	--n-acc:color-mix(in srgb,#869BF0 calc(var(--p)*100%),var(--pr));
	--n-line:color-mix(in srgb,rgb(243 229 218/.2) calc(var(--p)*100%),var(--line));
	--n-chip:color-mix(in srgb,rgb(243 229 218/.07) calc(var(--p)*100%),var(--surface));
	color:var(--n-ink)}
.admin-bar .nav{inset-block-start:32px}
.nav.is-static{position:relative;inset-block-start:0}
.nav.is-stuck{--p:1}
.nav.gsap{transition:none}
.nav-in{pointer-events:auto;position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;
	min-height:calc(88px - var(--p)*20px);
	margin-block-start:calc(var(--p)*14px);
	margin-inline:calc(var(--p)*max(14px,(100vw - var(--nav-w,1040px))/2));
	padding-inline:calc(max(24px,(100vw - 1072px)/2)*(1 - var(--p)) + 14px*var(--p));
	background:color-mix(in srgb,#312C3E calc(var(--p)*100%),transparent);
	border:1px solid color-mix(in srgb,#4b445b calc(var(--p)*100%),transparent);
	border-radius:calc(var(--p)*var(--nav-r,22px));
	box-shadow:0 calc(var(--p)*18px) calc(var(--p)*44px) rgb(34 30 44/calc(var(--p)*.28))}
.has-fixed-nav main{padding-block-start:88px}
.nav .l-ar,.nav .l-en{display:inline-block}

/* The brand's flowing blue, painted from one WebGL source into every .flow canvas. */
.flow{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.has-flow .flow{opacity:1}

.logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.2rem;white-space:nowrap}
.logo-img{display:block;height:44px;width:auto}
.logo-mark{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:14px;background:var(--pr);color:#fff;overflow:hidden;font-size:1.3rem}
.logo-ch{position:relative;line-height:1}
.logo-ch .l-ar{transform:translateY(-4px)}

.nav-list{display:flex;align-items:center;gap:4px;list-style:none;padding:0;counter-reset:n}
.nav-list li{counter-increment:n}
.nav-list a{display:flex;align-items:baseline;gap:7px;padding:10px 11px;font-weight:600;font-size:.95rem;white-space:nowrap}
.nav-list a::before{content:"0" counter(n);font:500 .7rem "JetBrains Mono",monospace;color:var(--n-acc)}
.roll{display:inline-grid;overflow:hidden;line-height:1.6}
.roll>span{grid-area:1/1;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.roll>span:last-child{transform:translateY(110%);color:var(--n-acc)}
a:hover>.roll>span:first-child{transform:translateY(-110%)}
a:hover>.roll>span:last-child{transform:none}
.nav-cta .roll>span:last-child{color:inherit}
.nav-menu{position:relative}
.nav-list a{position:relative}
.nav-hl{position:absolute;inset-block-start:50%;left:0;height:42px;margin-block-start:-21px;border:1px solid var(--n-line);border-radius:999px;background:var(--n-chip);opacity:0;visibility:hidden;pointer-events:none}

/* Reading progress along the bottom edge of the floating card. */
.nav-prog{position:absolute;inset-block-end:-1px;inset-inline:var(--nav-r,22px);height:2px;border-radius:2px;background:var(--n-acc);opacity:var(--p);transform:scaleX(var(--sp,0));transform-origin:left}
[dir=rtl] .nav-prog{transform-origin:right}

.nav :focus-visible{outline-color:var(--n-acc)}
.nav-cta,.tgl,.lang,.burger,.logo-mark{transition-property:transform,color,background;transition-duration:.3s}
.nav-cta:active,.tgl:active,.lang:active,.burger:active{transform:scale(.95)}
.nav-list .current-menu-item>a .roll{box-shadow:inset 0 -2px 0 var(--n-acc)}

.nav-act{display:flex;align-items:center;gap:12px}
.nav-cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;height:48px;padding-inline:22px 7px;border-radius:999px;background:var(--pr);color:#fff;font-weight:600;font-size:.95rem;white-space:nowrap}
.nav-cta>:not(canvas){position:relative}
.cta-i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#F3E5DA;color:#312C3E;font-size:1.1rem;transition:transform .45s cubic-bezier(.65,0,.35,1)}
[dir=rtl] .cta-i{transform:scaleX(-1)}
.nav-cta:hover .cta-i{transform:rotate(45deg)}
[dir=rtl] .nav-cta:hover .cta-i{transform:scaleX(-1) rotate(45deg)}

.ctl{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--n-line);border-radius:999px;background:var(--n-chip)}
.lang{position:relative;display:flex;direction:ltr;height:40px;border-radius:999px}
.lang-thumb{position:absolute;inset-block:0;left:0;width:44px;border-radius:999px;background:var(--pr);overflow:hidden;transition:transform .4s cubic-bezier(.65,0,.35,1)}
html[lang=en] .lang-thumb{transform:translateX(44px)}
.lang-o{position:relative;display:grid;place-items:center;width:44px;font-weight:600;font-size:.8rem;color:var(--n-ink);opacity:.55;transition:color .3s,opacity .3s}
.lang-o[data-l=ar]{font-family:"Alexandria",sans-serif;font-size:1.1rem;line-height:1;padding-block-end:5px}
.lang-o[data-l=en]{font-family:"Plus Jakarta Sans",sans-serif;letter-spacing:.06em}
html[lang=ar] .lang-o[data-l=ar],html[lang=en] .lang-o[data-l=en]{color:#fff;opacity:1}

.tgl{position:relative;display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;overflow:hidden;color:var(--n-ink)}
.tgl .ti{position:relative;grid-area:1/1;font-size:1.3rem}
.tgl.fx .ti{display:block}
.tgl .flow{transition:opacity .35s}
.has-flow .tgl .flow{opacity:0}
.tgl:hover{color:#fff;background:var(--pr)}
.has-flow .tgl:hover .flow{opacity:1}

.burger{display:none;position:relative;width:40px;height:40px;flex:none;border-radius:50%}
.burger span{position:absolute;left:11px;right:11px;top:50%;height:2px;border-radius:2px;background:var(--n-ink);transition:transform .4s cubic-bezier(.65,0,.35,1)}
.burger span:first-child{transform:translateY(-4px)}
.burger span:last-child{transform:translateY(3px)}
.is-open .burger span:first-child{transform:rotate(45deg)}
.is-open .burger span:last-child{transform:rotate(-45deg)}

@media (max-width:900px){
	.nav-in{min-height:calc(76px - var(--p)*12px);gap:12px}
	.has-fixed-nav main{padding-block-start:76px}
	.burger{display:block}
	.nav .nav-cta{display:none}
	.nav-menu{position:absolute;inset-inline:0;inset-block-start:calc(100% + 10px);display:none;margin-inline:calc((1 - var(--p))*14px);padding:12px;background:#312C3E;border:1px solid #4b445b;border-radius:22px;box-shadow:0 18px 44px rgb(34 30 44/.28);--n-ink:#F3E5DA;--n-acc:#869BF0;color:var(--n-ink)}
	.is-open .nav-menu{display:block}
	.nav-hl{display:none}
	.nav-list{flex-direction:column;align-items:stretch;gap:0}
	.nav-list a{padding:14px 16px;font-family:"Alexandria",sans-serif;font-weight:800;font-size:1.6rem;gap:14px}
	.nav-list li+li{border-block-start:1px solid rgb(243 229 218/.12)}
}
@media (max-width:782px){.admin-bar .nav{inset-block-start:46px}}
@media (max-width:420px){
	.logo-name{font-size:1.02rem}
	.logo-mark{width:40px;height:40px}
	.lang-thumb,.lang-o{width:40px}
	html[lang=en] .lang-thumb{transform:translateX(40px)}
}

.entry{padding:64px 0}
.entry h1{font-weight:800;font-size:clamp(2rem,6vw,4rem);line-height:1.2;margin-bottom:24px}
[dir=rtl] .entry h1{line-height:1.35}
.entry-body>*+*{margin-top:1em}
.entry-body a{color:var(--pr);text-decoration:underline}

/* Sign in and sign up */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:stretch;gap:clamp(24px,5vw,72px);padding-block:clamp(20px,3vw,40px) 0;min-height:min(760px,calc(100vh - 120px))}
.auth-form{align-self:center;max-width:480px;width:100%}
.auth-title{margin-block:16px 14px;font-weight:800;font-size:clamp(2.3rem,5.4vw,4.4rem);line-height:1.1;text-wrap:balance}
[dir=rtl] .auth-title{line-height:1.3}
.auth-lead{margin-block-end:30px;max-width:40ch;font-size:1.08rem;color:var(--muted)}
.auth-error{display:flex;align-items:center;gap:10px;margin-block-end:14px;padding:14px 18px;border-inline-start:3px solid var(--mocha);border-radius:14px;background:var(--soft);font-weight:500}
.auth-error .ti{flex:none;font-size:1.3rem;color:var(--mocha)}
.auth-trap{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.auth-field{position:relative;display:block;margin-block-end:26px}
.auth-field>span{display:block;font-weight:600;font-size:.92rem;color:var(--muted);transition:color .3s}
.auth-field:focus-within>span{color:var(--pr)}
.auth-field input{width:100%;padding:12px 0;border:0;border-block-end:2px solid var(--line);border-radius:0;background:transparent;color:var(--ink);font:inherit;font-size:1.4rem;font-weight:500;transition:border-color .3s}
.auth-field input[dir=ltr]{font-family:"JetBrains Mono",monospace;font-size:1.2rem}
[dir=rtl] .auth-field input[dir=ltr]{text-align:right}
.auth-field input:focus{outline:0;border-color:var(--pr)}
.auth-field small{display:block;margin-block-start:8px;font-size:.85rem;color:var(--muted)}
.auth-pass input{padding-inline-end:52px}
[dir=rtl] .auth-pass input{padding-inline:52px 0}
.auth-eye{position:absolute;inset-block-start:22px;inset-inline-end:0;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--muted);font-size:1.3rem;transition:background .3s,color .3s}
.auth-eye:hover{background:var(--soft);color:var(--pr)}
.auth-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin-block-end:26px}
.auth-check{display:flex;align-items:flex-start;gap:10px;margin-block-end:26px;font-size:.95rem;line-height:1.7;cursor:pointer}
.auth-row .auth-check{margin:0}
.auth-check input{flex:none;width:20px;height:20px;margin-block-start:3px}
.auth-check a,.auth-link,.auth-switch a{color:var(--pr);font-weight:600;text-decoration:underline;text-underline-offset:5px}
.auth-check a:hover,.auth-link:hover,.auth-switch a:hover{color:var(--pr2)}
.auth-submit{display:flex;justify-content:space-between;width:100%;height:66px;padding-inline:30px 10px;font-size:1.12rem}
.auth-submit .cta-i{width:46px;height:46px;font-size:1.4rem}
.auth-switch{margin-block-start:26px;color:var(--muted)}

.auth-panel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(20px,3vw,36px);overflow:hidden;padding:clamp(32px,5vw,72px) clamp(24px,4vw,56px);border-radius:var(--lr);background:#416EDD;color:#fff;text-align:center}
.auth-panel>:not(canvas){position:relative}
.auth-gl{position:absolute;inset:0;width:100%;height:100%}
/* The photo is always shown whole: square, rounded, ivory border. Effects sit around or over it and never bend it. */
.auth-photo{position:relative;width:min(100%,360px)}
.auth-photo-img{position:relative;display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border:8px solid #F3E5DA;border-radius:36px;background:#416EDD}
.auth-photo-frame{position:absolute;inset:0;border:3px solid #F3E5DA;border-radius:36px;transform:translate(-22px,22px)}
[dir=rtl] .auth-photo-frame{transform:translate(22px,22px)}
.auth-photo-light{position:absolute;inset:8px;border-radius:28px;background:radial-gradient(circle at var(--lx,50%) var(--ly,25%),rgb(255 255 255/.28),transparent 55%);mix-blend-mode:soft-light;pointer-events:none}
.auth-photo .auth-stamp{position:absolute;inset-block-start:-40px;inset-inline-end:-40px;width:118px;height:118px}
.auth-stamp .ti{width:52px;height:52px;transform:none!important}
.auth-say{font-family:"Alexandria",sans-serif;font-weight:800;font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.4;text-wrap:balance}
.auth-by{font:500 .88rem "JetBrains Mono",monospace;color:rgb(255 255 255/.85)}
.auth-by .l-ar{font-family:"IBM Plex Sans Arabic",sans-serif;font-size:.95rem}
.nav-account .cta-i,[dir=rtl] .nav-account .cta-i{transform:none}
.nav-account:hover .cta-i,[dir=rtl] .nav-account:hover .cta-i{transform:scale(1.12)}

@media (max-width:900px){
	.auth{grid-template-columns:1fr;min-height:0}
	.auth-panel{order:-1;padding-block:36px 40px}
	.auth-photo{width:min(64%,240px)}
	.auth-stamp{display:none}
	.auth-form{max-width:none}
}

/* Account screens, motion: step connector, email tick, drawn checkbox, code states, sending. */
.auth-steps li+li::before{content:"";width:34px;height:2px;border-radius:2px;background:var(--line);transform-origin:right}
[dir=ltr] .auth-steps li+li::before{transform-origin:left}
.auth-steps li.on:not(:first-child)::before{background:var(--pr)}
.auth-field.ok::before{content:"";position:absolute;inset-block-end:22px;inset-inline-end:6px;width:9px;height:17px;border:solid var(--pr);border-width:0 3px 3px 0;transform:rotate(45deg);animation:zs-tick .5s cubic-bezier(.34,1.56,.64,1) both}
.auth-check input{appearance:none;-webkit-appearance:none;border:2px solid var(--line);border-radius:7px;background:transparent center/0 no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");cursor:pointer;transition:background-size .35s cubic-bezier(.34,1.56,.64,1),background-color .25s,border-color .25s,transform .2s}
.auth-check input:checked{border-color:#416EDD;background-color:#416EDD;background-size:15px}
.auth-check input:active{transform:scale(.86)}
.auth-check input:focus-visible{outline:2px solid var(--pr);outline-offset:3px}
.otp-bar{display:block;height:3px;margin-block-start:14px;border-radius:3px;background:var(--line);overflow:hidden}
.otp-bar i{display:block;height:100%;border-radius:3px;background:var(--pr);transform:scaleX(var(--left,1));transform-origin:left;transition:transform 1s linear,background .4s}
[dir=rtl] .otp-bar i{transform-origin:right}
.otp.low .otp-bar i,.otp.over .otp-bar i{background:var(--mocha)}
.otp.full .otp-boxes i{border-color:#416EDD;background:#416EDD;color:#fff}
.auth-submit.busy{pointer-events:none}
.auth-submit.busy .cta-i i{visibility:hidden}
.auth-submit.busy .cta-i::after{content:"";position:absolute;width:20px;height:20px;border:3px solid currentColor;border-inline-start-color:transparent;border-radius:50%;animation:zs-spin .7s linear infinite}
.auth-submit .cta-i{position:relative}
.auth.busy .auth-form{cursor:progress}
@keyframes zs-tick{from{opacity:0;transform:rotate(45deg) scale(.2)}}
@keyframes zs-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:no-preference){
	.auth-steps li.on:not(:first-child)::before{animation:zs-draw .9s cubic-bezier(.65,0,.35,1) .6s both}
	.otp.low .otp-clock{animation:zs-beat 1s ease-in-out infinite}
}
@keyframes zs-draw{from{transform:scaleX(0)}}
@keyframes zs-beat{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.auth-field.ok::before,.auth-submit.busy .cta-i::after{animation:none}}

/* Account screens: steps, one-time code, password strength */
.auth-steps{display:flex;flex-wrap:wrap;gap:8px 22px;margin:18px 0 0;padding:0;list-style:none;font-weight:600;font-size:.9rem;color:var(--muted)}
.auth-steps li{display:inline-flex;align-items:center;gap:8px;transition:color .3s}
.auth-steps li>span:first-child{padding:3px 9px;border:1px solid currentColor;border-radius:999px;font:500 .72rem "JetBrains Mono",monospace}
.auth-steps .on{color:var(--pr)}
.auth-steps .on>span:first-child{background:var(--pr);border-color:var(--pr);color:var(--onpr)}
.auth-steps .done{color:var(--ink)}
.auth-lead strong{display:inline-block;font-family:"JetBrains Mono",monospace;font-weight:500;color:var(--ink)}
/* The line under a field draws in from the start edge when the field is focused. */
.auth-field::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;height:2px;background:var(--pr);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.65,0,.35,1)}
[dir=rtl] .auth-field::after{transform-origin:right}
.auth-field:focus-within::after{transform:scaleX(1)}
.auth-field:has(small)::after,.auth-field:has(.auth-meter)::after{display:none}
.auth-meter{display:block;height:4px;margin-block-start:10px;border-radius:4px;background:var(--line);overflow:hidden}
.auth-meter i{display:block;height:100%;width:calc(var(--s,0)*25%);border-radius:4px;background:var(--mocha);transition:width .5s cubic-bezier(.65,0,.35,1),background .4s}
.auth-meter[data-s="3"] i,.auth-meter[data-s="4"] i{background:var(--pr)}

.otp{position:relative;margin-block-end:28px}
.otp-label{display:block;margin-block-end:10px;font-weight:600;font-size:.92rem;color:var(--muted)}
.otp-real{width:100%;padding:14px 0;border:0;border-block-end:2px solid var(--line);background:transparent;color:var(--ink);font:500 2rem "JetBrains Mono",monospace;letter-spacing:.5em}
.otp-real:focus{outline:0;border-color:var(--pr)}
.otp-boxes{display:none}
/* With JS the six boxes are drawn and the real input lies invisibly on top of them, so paste and autofill keep working. */
.otp.js .otp-real{position:absolute;inset-inline:0;inset-block-start:28px;z-index:1;width:100%;height:78px;padding:0;border:0;opacity:0;cursor:text;letter-spacing:0}
.otp.js .otp-boxes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(6px,1.4vw,12px)}
.otp-boxes i{display:grid;place-items:center;height:78px;border:2px solid var(--line);border-radius:18px;background:var(--surface);font:500 2rem "JetBrains Mono",monospace;font-style:normal;color:var(--ink);transition:border-color .25s,background .25s,transform .25s}
.otp-boxes i.cur{border-color:var(--pr);transform:translateY(-4px)}
.otp-boxes i.set{border-color:var(--pr);background:var(--soft)}
.otp.bad .otp-boxes i{border-color:var(--mocha)}
.otp-time{display:flex;align-items:center;gap:8px;margin-block-start:14px;font-size:.92rem;color:var(--muted)}
.otp-time .ti{font-size:1.1rem;color:var(--pr)}
.otp-clock,.otp-wait{font-family:"JetBrains Mono",monospace;font-weight:500;color:var(--ink)}
.otp.over .otp-clock{color:var(--mocha)}
.auth-resend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-block-start:24px;color:var(--muted)}
.auth-resend button{cursor:pointer}
.auth-resend button:disabled{opacity:.5;cursor:default;text-decoration:none}
.auth-num{position:absolute;inset-block-end:-.22em;inset-inline-start:-.04em;font-family:"Alexandria",sans-serif;font-weight:800;font-size:clamp(9rem,22vw,18rem);line-height:1;color:transparent;-webkit-text-stroke:2px rgb(255 255 255/.18);pointer-events:none;user-select:none}
.auth-panel>.auth-num{position:absolute}
.auth-say .w{padding-block:.2em;margin-block:-.2em}

/* Legal pages */
.legal{padding-block-start:14px}
/* Hero: a blue panel as wide as the screen, same 14px gutter as the nav card and the footer. */
.legal-head{position:relative;overflow:hidden;margin-inline:calc(50% - 50vw + 14px);padding:clamp(36px,6vw,88px) max(22px,calc(50vw - 550px)) clamp(28px,4vw,56px);border-radius:var(--lr);background:#416EDD;color:#fff;transform-origin:50% 100%}
.legal-head>:not(canvas):not(.legal-num){position:relative}
.legal-gl{position:absolute;inset:0;width:100%;height:100%}
.legal-num{position:absolute;inset-block-end:-.2em;inset-inline-end:max(8px,calc(50vw - 580px));font-family:"Alexandria",sans-serif;font-weight:800;font-size:clamp(11rem,34vw,30rem);line-height:1;color:transparent;-webkit-text-stroke:2px rgb(255 255 255/.2);pointer-events:none;user-select:none}
.legal-kick{display:flex;align-items:center;gap:12px;font-weight:600}
.legal-kick>span:first-child{direction:ltr;padding:5px 12px;border:1px solid rgb(255 255 255/.55);border-radius:999px;font:500 .8rem "JetBrains Mono",monospace}
.legal-title{margin-block:18px clamp(28px,5vw,64px);max-width:16ch;font-weight:800;font-size:clamp(2.4rem,7.4vw,6.2rem);line-height:1.08;text-wrap:balance}
[dir=rtl] .legal-title{line-height:1.3}
.legal-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding-block-start:22px;border-block-start:1px solid rgb(255 255 255/.28);font-size:.95rem;color:rgb(255 255 255/.88)}
.legal-meta>span{display:inline-flex;align-items:center;gap:8px}
.legal-meta .ti{font-size:1.2rem}
.legal-print{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 20px;margin-inline-start:auto;border-radius:999px;background:#F3E5DA;color:#312C3E;font-weight:600;font-size:.92rem;transition:background .3s,color .3s}
.legal-print:hover{background:#312C3E;color:#F3E5DA}

.legal-body{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(28px,6vw,88px);padding-block-start:clamp(36px,5vw,72px)}
.legal-side{position:sticky;inset-block-start:104px;align-self:start;max-height:calc(100vh - 124px);overflow:auto;scrollbar-width:thin}
.admin-bar .legal-side{inset-block-start:136px}
.legal-h{margin-block-end:12px;font-weight:600;font-size:.85rem;color:var(--pr)}
/* The grey rail fills with blue as the page is read. */
.legal-toc-list{position:relative;list-style:none;padding:0;counter-reset:t;border-inline-start:2px solid var(--line)}
.legal-toc-list::before{content:"";position:absolute;inset-block:0;inset-inline-start:-2px;width:2px;background:var(--pr);transform:scaleY(var(--lp,0));transform-origin:top}
.legal-toc-list li{counter-increment:t}
.legal-toc-list a{display:flex;align-items:baseline;gap:10px;padding:7px 14px;border-radius:10px;font-size:.93rem;line-height:1.55;color:var(--muted);transition:color .3s,background .3s,transform .4s cubic-bezier(.65,0,.35,1)}
.legal-toc-list a::before{content:counter(t,decimal-leading-zero);font:500 .7rem "JetBrains Mono",monospace;color:var(--pr)}
.legal-toc-list a:hover{color:var(--ink)}
.legal-toc-list a.on{background:var(--soft);color:var(--ink);font-weight:600;transform:translateX(6px)}
[dir=rtl] .legal-toc-list a.on{transform:translateX(-6px)}
.legal-more{margin-block-start:32px}
.legal-more ul{list-style:none;padding:0;border-block-start:1px solid var(--line)}
.legal-more a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 4px;border-block-end:1px solid var(--line);font-size:.93rem;font-weight:600;transition:color .3s,padding .3s}
.legal-more a:hover{color:var(--pr);padding-inline-start:10px}
.legal-more .ti{transition:transform .4s cubic-bezier(.65,0,.35,1)}
[dir=rtl] .legal-more .ti{transform:scaleX(-1)}
.legal-more a:hover .ti{transform:rotate(45deg)}
[dir=rtl] .legal-more a:hover .ti{transform:scaleX(-1) rotate(45deg)}

.legal-text{max-width:70ch;font-size:1.06rem;line-height:1.95;counter-reset:h}
.legal-text>*+*{margin-block-start:1em}
.legal-text>p:first-child{font-size:1.25rem;line-height:1.85;font-weight:500}
/* Each section opens with a rule (drawn in by --rule) and a mono number. */
.legal-text h2{--rule:1;counter-increment:h;position:relative;display:flex;align-items:baseline;gap:16px;margin-block:2.2em .7em;padding-block-start:1.3em;font-weight:800;font-size:clamp(1.4rem,2.7vw,2rem);line-height:1.45;scroll-margin-block-start:112px}
.legal-text h2::after{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:1px;background:var(--line);transform:scaleX(var(--rule));transform-origin:left}
[dir=rtl] .legal-text h2::after{transform-origin:right}
.legal-text h2::before{content:counter(h,decimal-leading-zero);flex:none;padding:3px 9px;border:1px solid var(--pr);border-radius:999px;font:500 .75rem "JetBrains Mono",monospace;color:var(--pr)}
.legal-text ul{padding-inline-start:1.3em}
.legal-text li{margin-block-start:.5em}
.legal-text li::marker{color:var(--pr)}
.legal-text a{color:var(--pr);text-decoration:underline;text-underline-offset:5px}
.legal-text a:hover{color:var(--pr2)}
.legal-text .note{padding:20px 24px;border-inline-start:3px solid var(--pr);border-radius:16px;background:var(--soft);font-weight:500}

/* Next page: a full-width row that fills with blue. */
.legal-next{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 24px;overflow:hidden;margin-block-start:clamp(48px,7vw,96px);padding:clamp(22px,3.4vw,40px) clamp(18px,3vw,36px);border:1px solid var(--line);border-radius:var(--lr);transition:color .4s,border-color .4s}
.legal-next::before{content:"";position:absolute;inset:0;background:var(--pr);transform:scaleY(0);transform-origin:bottom;transition:transform .55s cubic-bezier(.65,0,.35,1)}
.legal-next>*{position:relative}
.legal-next:hover{color:var(--onpr);border-color:var(--pr)}
.legal-next:hover::before{transform:scaleY(1)}
.legal-next-k{font-weight:600;font-size:.9rem;color:var(--pr);transition:color .4s}
.legal-next:hover .legal-next-k{color:inherit}
.legal-next-t{grid-column:1;font-family:"Alexandria",sans-serif;font-weight:800;font-size:clamp(1.5rem,4.2vw,3.2rem);line-height:1.3}
.legal-next .ti{grid-column:2;grid-row:1/3;font-size:clamp(2rem,5vw,3.6rem);transition:transform .55s cubic-bezier(.65,0,.35,1)}
[dir=rtl] .legal-next .ti{transform:scaleX(-1)}
.legal-next:hover .ti{transform:rotate(45deg)}
[dir=rtl] .legal-next:hover .ti{transform:scaleX(-1) rotate(45deg)}

@media (max-width:900px){
	:root{--lr:24px}
	.legal-body{grid-template-columns:1fr}
	.legal-side{position:static;max-height:none;overflow:visible;padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
	.legal-toc-list{max-height:260px;overflow:auto}
	.legal-more{display:none}
	.legal-print{margin-inline-start:0}
}
@media print{
	.nav,.foot,.legal-side,.legal-print,.legal-next,.legal-gl,.legal-num,#wpadminbar{display:none!important}
	.has-fixed-nav main{padding-block-start:0}
	.legal-head{margin:0;padding:0 0 16px;background:none;color:#000}
	.legal-meta{color:#000;border-color:#999}
	.legal-body{display:block;padding:0}
	body{background:#fff;color:#000}
	.legal-text .note{background:none;border:1px solid #999}
}

/* Footer: the same charcoal card as the floating nav, at full scale. */
.foot{padding:96px 14px 14px;overflow:hidden}
.foot-in{position:relative;overflow:hidden;--fp:clamp(12px,1.6vw,22px);--fi:clamp(8px,3.6vw,52px);padding:var(--fp) var(--fp) 0;background:#312C3E;color:#F3E5DA;border:1px solid #4b445b;border-radius:calc(var(--foot-r,22px) + 10px);
	--f-acc:#869BF0;--f-line:rgb(243 229 218/.14);--f-mute:rgb(243 229 218/.62);--n-acc:#869BF0}
.foot :focus-visible{outline-color:var(--f-acc)}

/* Blue panel inside the card, with the pointer-reactive WebGL field behind it. */
.foot-cta{position:relative;display:grid;grid-template-columns:1fr auto;gap:32px;overflow:hidden;padding:clamp(24px,4.4vw,64px);border-radius:var(--foot-r,22px);background:#416EDD;color:#fff}
.foot-cta>:not(canvas){position:relative}
.foot-gl{position:absolute;inset:0;width:100%;height:100%}
.foot-side{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;gap:28px}
.stamp{direction:ltr;position:relative;display:grid;place-items:center;width:132px;height:132px;flex:none}
.stamp svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.stamp text{font:500 9.4px "JetBrains Mono",monospace;letter-spacing:.04em;fill:#F3E5DA}
.stamp .ti{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#F3E5DA;color:#312C3E;font-size:1.6rem}
[dir=rtl] .stamp .ti{transform:scaleX(-1)}
.foot-title{font-weight:800;font-size:clamp(2.3rem,7vw,6.2rem);line-height:1.08;max-width:13ch;text-wrap:balance}
[dir=rtl] .foot-title{line-height:1.3}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-block:.14em;margin-block:-.14em}
.w>span{display:inline-block}
.foot-lead{margin-block-start:18px;max-width:34ch;font-size:1.15rem;color:rgb(255 255 255/.82)}
.foot-acts{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.foot-btn{height:66px;padding-inline:30px 10px;font-size:1.1rem}
.foot-btn .cta-i{width:46px;height:46px;font-size:1.4rem;background:#312C3E;color:#F3E5DA}
.foot-btn{background:#F3E5DA;color:#312C3E}
.foot-btn .flow{display:none}
.foot-mail{display:inline-flex;align-items:center;gap:12px;direction:ltr;padding:12px 18px;border:1px solid rgb(255 255 255/.4);border-radius:999px;font:500 .95rem "JetBrains Mono",monospace;transition:background .3s,color .3s,border-color .3s}
.foot-mail:hover{background:#F3E5DA;border-color:#F3E5DA;color:#312C3E}
.foot-mail .ti{font-size:1.15rem}
.foot-mail .ti-check,.foot-mail.done .ti-copy{display:none}
.foot-mail.done .ti-check{display:inline-block}

.foot-grid{display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:clamp(28px,6vw,96px);margin-inline:var(--fi);padding-block:clamp(36px,5vw,72px)}
.foot-h{margin-block-end:14px;font:500 .75rem "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--f-acc)}
.foot-h .l-ar{font-family:"IBM Plex Sans Arabic",sans-serif;font-size:.9rem;letter-spacing:0}
.foot-col .foot-h:not(:first-child){margin-block-start:36px}
.foot-list{list-style:none;padding:0;counter-reset:f}
.foot-list li{counter-increment:f}
.foot-list a{display:inline-flex;align-items:baseline;gap:12px;padding-block:6px;font-family:"Alexandria",sans-serif;font-weight:600;font-size:1.35rem}
.foot-list a::before{content:"0" counter(f);font:500 .7rem "JetBrains Mono",monospace;color:var(--f-acc)}
.foot-contact{list-style:none;padding:0}
.foot-contact a{display:inline-block;padding-block:4px;direction:ltr;font:500 .98rem "JetBrains Mono",monospace;color:var(--f-mute);transition:color .3s}
.foot-contact a:hover{color:#F3E5DA}

.foot-soc{list-style:none;padding:0;border-block-start:1px solid var(--f-line)}
.soc{position:relative;display:flex;align-items:center;gap:20px;padding:20px 16px;border-block-end:1px solid var(--f-line);overflow:hidden}
.soc::before{content:"";position:absolute;inset:0;background:#416EDD;transform:scaleY(0);transform-origin:bottom;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.soc:hover::before{transform:scaleY(1)}
.soc>*{position:relative}
.soc-n{font:500 .75rem "JetBrains Mono",monospace;color:var(--f-acc);transition:color .3s}
.soc:hover .soc-n{color:#fff}
.soc-h{direction:ltr;font:500 .85rem "JetBrains Mono",monospace;color:var(--f-mute);transition:color .3s}
.soc:hover .soc-h{color:#fff}
.soc-t{flex:1;font-family:"Alexandria",sans-serif;font-weight:800;font-size:clamp(1.3rem,2.6vw,2.1rem);line-height:1.2;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.soc:hover .soc-t{transform:translateX(14px)}
[dir=rtl] .soc:hover .soc-t{transform:translateX(-14px)}
.soc .ti{font-size:1.7rem;transition:transform .5s cubic-bezier(.65,0,.35,1)}
[dir=rtl] .soc .ti{transform:scaleX(-1)}
.soc:hover .ti{transform:rotate(45deg)}
[dir=rtl] .soc:hover .ti{transform:scaleX(-1) rotate(45deg)}

/* Outlined name; the pointer carries a light that fills the letters. */
.foot-word{margin-inline:calc(var(--fp)*-1);padding-block:.12em .04em;font-family:"Alexandria",sans-serif;font-weight:800;font-size:10vw;line-height:1;white-space:nowrap;text-align:center;user-select:none;
	color:transparent;-webkit-text-stroke:1.5px rgb(243 229 218/.32);
	background:radial-gradient(circle at var(--mx,50%) var(--my,-120%),#F3E5DA 0,#869BF0 12%,transparent 26%);-webkit-background-clip:text;background-clip:text}
/* Arabic letters overlap where they join, so an outline shows seams: use a faint solid fill instead. */
html[lang=ar] .foot-word{font-size:18vw;line-height:1.35;-webkit-text-stroke:0;
	background:radial-gradient(circle at var(--mx,50%) var(--my,-120%),#F3E5DA 0,#869BF0 12%,transparent 26%),linear-gradient(rgb(243 229 218/.13),rgb(243 229 218/.13));-webkit-background-clip:text;background-clip:text}

.foot-legal{margin-inline:var(--fi);padding-block:18px;border-block-start:1px solid var(--f-line)}
.foot-legal ul{display:flex;flex-wrap:wrap;gap:8px 26px;list-style:none;padding:0}
.foot-legal a{font-size:.9rem;color:var(--f-mute);transition:color .3s}
.foot-legal a:hover{color:#F3E5DA;text-decoration:underline;text-underline-offset:5px}
.foot-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-inline:var(--fi);padding-block:18px;border-block-start:1px solid var(--f-line);font-size:.9rem;color:var(--f-mute)}
.foot-top{position:relative;display:grid;place-items:center;width:52px;height:52px;flex:none;border:1px solid var(--f-line);border-radius:50%;overflow:hidden;color:#F3E5DA;font-size:1.3rem;transition:border-color .3s}
.foot-top .ti{position:relative}
.has-flow .foot-top .flow{opacity:0;transition:opacity .35s}
.foot-top:hover{border-color:transparent;background:#416EDD}
.has-flow .foot-top:hover .flow{opacity:1}

@media (max-width:820px){
	.foot{padding-block-start:64px}
	.foot-cta,.foot-grid{grid-template-columns:1fr}
	.foot-side{align-items:stretch}
	.stamp,.soc-h{display:none}
	.foot-acts{align-items:stretch}
	.foot-btn{justify-content:space-between}
	.foot-mail{justify-content:space-between}
}

::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.entry h2{font-weight:800;font-size:clamp(1.5rem,4vw,2.5rem);line-height:1.35;margin-bottom:16px}

/* About page */
.about-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(28px,4vw,56px);min-height:calc(100svh - 120px);margin-inline:calc(50% - 50vw + 14px);padding:clamp(36px,6vw,84px) max(22px,calc(50vw - 560px)) clamp(22px,3vw,34px);border-radius:var(--lr);background:#416EDD;color:#fff;transform-origin:50% 100%}
.about-hero>:not(canvas):not(.about-hero-word){position:relative}
.about-hero-word{position:absolute;inset-block-end:-.16em;left:50%;translate:-50% 0;font:800 clamp(9rem,31vw,30rem)/1 "Alexandria",sans-serif;letter-spacing:-.02em;white-space:nowrap;color:rgb(255 255 255/.09);pointer-events:none;user-select:none}
.about-hero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(36px,6vw,96px);flex:1}
.about-title{margin:20px 0 0;font-weight:800;font-size:clamp(3rem,8.6vw,7.6rem);line-height:1.12;color:#fff}
.about-lead{margin-block:24px 32px;max-width:44ch;font-size:1.15rem;line-height:1.9;color:rgb(255 255 255/.88)}
.about-hero .about-cta{height:60px;padding-inline:28px 8px;background:#F3E5DA;color:#312C3E;font-size:1.05rem}
.about-hero .about-cta .cta-i{width:44px;height:44px;background:#312C3E;color:#F3E5DA;font-size:1.3rem}
.about-photo{justify-self:center;width:min(100%,460px)}
.about-photo .auth-photo-img{border-width:10px;border-radius:44px;box-shadow:0 40px 80px -30px rgb(20 30 80/.55)}
.about-photo .auth-photo-frame{border-radius:44px}
.about-photo .auth-photo-light{inset:10px;border-radius:34px}
.about-photo .auth-stamp{width:140px;height:140px;inset-block-start:-52px;inset-inline-end:-52px}
.about-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(16px,3vw,40px);margin:0;padding:18px 0 0;list-style:none;border-block-start:1px solid rgb(255 255 255/.28);font-weight:600}
.about-meta li{display:flex;align-items:baseline;gap:12px}
.about-meta li>span:first-child{font:500 .78rem "JetBrains Mono","IBM Plex Sans Arabic",monospace;color:rgb(255 255 255/.7)}
.about-sec{padding-block:clamp(40px,7vw,110px) 0}
.about-h{display:flex;align-items:baseline;gap:16px;margin:0 0 20px;font-weight:800;font-size:clamp(2rem,5vw,3.8rem);line-height:1.2}
.about-h>span[aria-hidden]{font:500 .85rem "JetBrains Mono",monospace;color:var(--pr)}
.about-rule{display:block;height:1px;background:var(--line);transform-origin:right}
[dir=ltr] .about-rule{transform-origin:left}
.about-say-wrap{padding-block:clamp(48px,9vw,140px) clamp(30px,5vw,70px)}
.about-say{margin:0;max-width:22ch;font-family:"Alexandria",sans-serif;font-weight:800;font-size:clamp(1.7rem,4.6vw,3.9rem);line-height:1.45}
.about-say .wd{transition:color .3s}
.about-say .wd.dim{color:color-mix(in srgb,var(--ink) 16%,transparent)}
.about-rows{margin:0;padding:0;list-style:none}
.about-row{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:clamp(14px,3vw,36px);padding:clamp(18px,2.6vw,30px) clamp(6px,1.4vw,18px);border-block-end:1px solid var(--line);color:inherit;transition:color .35s,padding .5s cubic-bezier(.65,0,.35,1)}
.about-row::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--hero);transform:translateY(101%);transition:transform .55s cubic-bezier(.65,0,.35,1)}
.about-row:hover{color:#fff;padding-inline:clamp(16px,3vw,40px)}
.about-row:hover::after{transform:none}
.about-row-n{font:500 .85rem "JetBrains Mono",monospace;color:var(--pr);transition:color .35s}
.about-row-t{flex:1;min-width:0}
.about-row strong{display:block;font-family:"Alexandria",sans-serif;font-weight:800;font-size:clamp(1.4rem,4vw,3rem);line-height:1.35}
.about-row p{margin:6px 0 0;max-width:52ch;color:var(--muted);line-height:1.7;transition:color .35s}
.about-row .ti{font-size:clamp(1.6rem,3vw,2.4rem);color:var(--pr);transition:color .35s,transform .55s cubic-bezier(.65,0,.35,1)}
.about-row:hover :is(.about-row-n,.ti){color:#fff}
.about-row:hover p{color:rgb(255 255 255/.88)}
.about-row:hover .ti{transform:rotate(-12deg) scale(1.15)}
[dir=rtl] .about-learn .ti{transform:scaleX(-1)}
[dir=rtl] .about-learn .about-row:hover .ti{transform:scaleX(-1) rotate(45deg) scale(1.15)}
.about-flow-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);padding-block-start:clamp(24px,4vw,56px)}
.about-flow-side{position:sticky;inset-block-start:120px;align-self:start;display:flex;align-items:flex-end;gap:22px;height:clamp(220px,30vw,380px)}
.about-flow-num{font:800 clamp(8rem,20vw,17rem)/.82 "Alexandria",sans-serif;color:var(--pr);font-variant-numeric:tabular-nums}
.about-flow-bar{position:relative;width:3px;height:100%;border-radius:3px;background:var(--line);overflow:hidden}
.about-flow-bar i{position:absolute;inset:0;border-radius:3px;background:var(--pr);transform:scaleY(var(--fp,0));transform-origin:top}
.about-steps{margin:0;padding:0;list-style:none}
.about-step{padding-block:clamp(26px,5vw,64px);border-block-end:1px solid var(--line);transition:opacity .5s}
.about-step:first-child{padding-block-start:0}
.about-flow.js .about-step:not(.on){opacity:.28}
.about-step-n{display:none;font:500 .85rem "JetBrains Mono",monospace;color:var(--pr)}
.about-step strong{display:block;font-family:"Alexandria",sans-serif;font-weight:800;font-size:clamp(2rem,5vw,4rem);line-height:1.25}
.about-step p{margin:12px 0 0;max-width:40ch;font-size:1.12rem;line-height:1.9;color:var(--muted)}
.about-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-block-start:clamp(24px,4vw,48px)}
.about-card{position:relative;overflow:hidden;padding:clamp(22px,3vw,34px);border-radius:var(--lr);background:#312C3E;color:#F3E5DA;transition:transform .5s cubic-bezier(.65,0,.35,1),background .4s}
[data-theme=dark] .about-card{border:1px solid #4b445b}
.about-card:hover{background:#416EDD;transform:translateY(-8px)}
.about-card>.ti{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#416EDD;color:#fff;font-size:1.7rem;transition:background .4s,color .4s,transform .55s cubic-bezier(.34,1.56,.64,1)}
.about-card:hover>.ti{background:#F3E5DA;color:#312C3E;transform:rotate(-10deg) scale(1.08)}
.about-card-n{position:absolute;inset-block-start:clamp(22px,3vw,34px);inset-inline-end:clamp(22px,3vw,34px);font:500 .8rem "JetBrains Mono",monospace;color:#869BF0;transition:color .4s}
.about-card:hover .about-card-n{color:#fff}
.about-card strong{display:block;margin-block-start:clamp(40px,7vw,90px);font-family:"Alexandria",sans-serif;font-weight:800;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.4}
.about-card p{margin:10px 0 0;line-height:1.8;color:rgb(243 229 218/.78);transition:color .4s}
.about-card:hover p{color:#fff}
.about-learn{padding-block-end:clamp(40px,7vw,110px)}
.about-body{padding-block-end:clamp(40px,7vw,110px)}
@media (max-width:860px){
	.about-hero{min-height:0;padding-block-start:56px}
	.about-hero-in{grid-template-columns:1fr}
	.about-photo{order:-1;width:min(74%,300px);margin-block-end:14px}
	.about-photo .auth-stamp{width:104px;height:104px;inset-block-start:-34px;inset-inline-end:-34px}
	.about-meta{grid-template-columns:1fr;gap:10px}
	.about-flow-in{grid-template-columns:1fr}
	.about-flow-side{display:none}
	.about-flow.js .about-step:not(.on){opacity:1}
	.about-step-n{display:block;margin-block-end:8px}
	.about-cards{grid-template-columns:1fr}
	.about-card strong{margin-block-start:28px}
}
@media (prefers-reduced-motion:reduce){.about-row,.about-row *,.about-card,.about-card *,.about-step{transition:none}}

/* Navbar: sized by its content. Between phone and wide screens the account button drops its label; when even that is not enough the links fold away. */
.nav-in>*{flex:none}
.nav-menu{min-width:0}
@media (min-width:901px) and (max-width:1240px){
	.nav .nav-cta .roll{display:none}
	.nav .nav-cta{padding-inline:7px;gap:0}
	.nav-in{gap:14px}
}
@media (min-width:901px){
	.nav.is-tight .nav-list a{padding-inline:7px;font-size:.9rem}
	.nav.is-tight .nav-list a::before{display:none}
}
@media (max-width:480px){
	.nav-in{gap:8px}
	.logo{gap:8px;font-size:1.02rem}
	.logo-mark{width:38px;height:38px;border-radius:12px}
	.ctl{gap:0;padding:3px}
	.tgl,.burger{width:36px;height:36px}
}

/* Password-protected content and attachment pages */
.pw{display:grid;gap:10px;max-width:620px;margin:clamp(20px,4vw,48px) auto;padding:clamp(26px,4vw,48px);border-radius:var(--lr);background:#312C3E;color:#F3E5DA}
[data-theme=dark] .pw{border:1px solid #4b445b}
.pw-i{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:#416EDD;color:#fff;font-size:1.9rem}
.pw-t{margin:10px 0 0;font:800 clamp(1.6rem,3.4vw,2.4rem)/1.3 "Alexandria",sans-serif}
.pw-d{margin:0 0 14px;color:rgb(243 229 218/.78)}
.pw-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px}
.pw .auth-field{flex:1;min-width:200px;margin:0}
.pw .auth-field>span{color:rgb(243 229 218/.7)}
.pw .auth-field input{color:#F3E5DA;border-color:rgb(243 229 218/.3)}
.pw .auth-field input:focus{border-color:#869BF0}
.pw .nav-cta{height:56px}
.att-back{display:inline-flex;align-items:center;gap:8px;margin-block-end:18px;font-weight:600;color:var(--pr)}
[dir=ltr] .att-back .ti{transform:scaleX(-1)}
.att-media{margin:0 0 clamp(48px,8vw,120px)}
.att-media img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--lr)}
.att-media figcaption{margin-block-start:12px;color:var(--muted)}

/* Confirmation shown before an AI agent's tool sends anything in the visitor's name (assets/js/webmcp.js). */
.ai-ask{width:min(92vw,520px);padding:clamp(22px,4vw,36px);border:0;border-radius:var(--lr);background:#312C3E;color:#F3E5DA;box-shadow:0 30px 80px rgb(20 16 30/.5)}
.ai-ask::backdrop{background:rgb(34 30 44/.72)}
.ai-ask-k{display:inline-block;margin:0 0 14px;padding:4px 12px;border:1px solid rgb(243 229 218/.4);border-radius:999px;font:500 .72rem "JetBrains Mono",monospace;letter-spacing:.1em;direction:ltr}
.ai-ask h2{margin:0;font:800 clamp(1.5rem,4vw,2.1rem)/1.3 "Alexandria",sans-serif;color:#F3E5DA}
.ai-ask-d{margin:8px 0 18px;color:rgb(243 229 218/.78);line-height:1.8}
.ai-ask dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 18px;margin:0;border-block-start:1px solid rgb(243 229 218/.16)}
.ai-ask dt,.ai-ask dd{margin:0;padding:12px 0;border-block-end:1px solid rgb(243 229 218/.16)}
.ai-ask dt{font-size:.85rem;color:#869BF0}
.ai-ask dd{font-weight:600;overflow-wrap:anywhere;white-space:pre-line}
.ai-ask-a{display:flex;gap:10px;justify-content:flex-end;margin-block-start:22px}
.ai-ask-a button{height:52px;padding-inline:26px;border-radius:999px;font-weight:600;transition:background .3s,color .3s,transform .2s}
.ai-ask-a button:active{transform:scale(.95)}
.ai-ask-no{border:1.5px solid rgb(243 229 218/.35);color:#F3E5DA}
.ai-ask-no:hover{background:rgb(243 229 218/.12)}
.ai-ask-yes{background:#416EDD;color:#fff}
.ai-ask-yes:hover{background:#F3E5DA;color:#312C3E}

/* Nothing may widen the page: on phones a single over-wide element makes the browser zoom the whole layout out. clip (not hidden) keeps position:sticky working. */
html,body{max-width:100%;overflow-x:clip}

/* Character poses across the site (zs_char() in inc/pf.php). Whole figures, only moved and faded. */
.zs-char.zs-char.zs-char{position:absolute;z-index:1;height:auto;pointer-events:none;user-select:none}
.zs-char-hero{inset-block-end:0;inset-inline-end:max(4%,calc(50vw - 640px));width:clamp(150px,17vw,270px)}
.foot-cta .zs-char-hero{inset-inline-end:clamp(180px,24vw,360px);width:clamp(110px,11vw,170px)}
.pjx-ask .zs-char-hero{inset-inline-end:auto;inset-inline-start:calc(50% - 90px);width:clamp(120px,12vw,180px)}
.acc-hero .zs-char-hero,.ty .zs-char-hero{inset-inline-end:4%;width:clamp(120px,14vw,200px)}
.home-sec:has(>.zs-char),.home-sec:has(>.zs-char){position:relative}
.zs-char-sec{inset-block-start:clamp(10px,3vw,40px);inset-inline-end:0;width:clamp(110px,12vw,190px)}
@media (max-width:900px){
	.zs-char-hero{inset-block-start:14px;inset-block-end:auto;inset-inline-end:10px;width:96px}
	.foot-cta .zs-char-hero,.pjx-ask .zs-char-hero{inset-inline-start:auto;inset-inline-end:10px;width:84px}
	.zs-char-sec{width:84px;inset-block-start:6px}
}