/* Home page — Apple-calm version (2026-10-04, v4).
   Light hero with centred type, a quiet search field, white tiles on light grey,
   segmented controls, hairlines, gentle one-time fades. Orange only in the brand dot.
   Scoped to body.hm. Tokens come from apple.css. */
.hm{font-family:var(--ap-font);background:var(--ap-bg);color:var(--ap-text);font-size:17px;line-height:1.7}
.hm .hm-wrap{width:min(1024px,100% - 32px);margin-inline:auto}
.hm :focus-visible{outline:3px solid rgba(0,113,227,.55);outline-offset:2px;border-radius:8px}

/* ---------- global nav ---------- */
.hm .topbar{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;position:sticky;top:0;z-index:300;min-height:48px;
  padding:.35rem max(16px,(100% - 1024px)/2);background:rgba(251,251,253,.82);color:var(--ap-text);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.hm .tl-brand{display:flex;align-items:center;gap:0;color:var(--ap-text);font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}
.hm .tl-dot{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--ap-orange);margin-inline-end:8px;box-shadow:none}
.hm .hm-topnav{display:flex;gap:2px;margin-inline-start:auto}
.hm .hm-topnav a{color:var(--ap-text);opacity:.8;text-decoration:none;font-size:13.5px;padding:.3rem .65rem;border-radius:8px;white-space:nowrap}
.hm .hm-topnav a:hover{opacity:1;background:rgba(0,0,0,.04)}
.hm .tl-right{flex:none}
.hm .lang-btn,.hm a.lang-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--ap-sep);color:var(--ap-text);
  border-radius:999px;font-size:13px;font-weight:500;padding:.2rem .75rem;min-height:30px;text-decoration:none;white-space:nowrap;flex:none}
.hm .lang-btn .arr{font-size:9px;opacity:.6}
.hm .skip-link{position:absolute;inset-inline-start:8px;top:-60px;z-index:999;background:#fff;color:var(--ap-text);padding:.5rem .9rem;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.hm .skip-link:focus{top:8px}
@media(max-width:720px){.hm .hm-topnav a:nth-child(n+3){display:none}.hm .hm-topnav a{font-size:13px;padding:.3rem .45rem}.hm .topbar{padding:.35rem 14px}}
@media(max-width:420px){html[lang="nl"] .hm .hm-topnav a:nth-child(n+2){display:none}}

/* ---------- hero ---------- */
.hm .hm-hero{background:#fff;padding:64px 0 56px;text-align:center}
.hm .hm-hero h1{margin:0 auto;font-size:clamp(34px,6vw,56px);line-height:1.15;font-weight:700;color:var(--ap-text);max-width:16ch}
html[lang="nl"] .hm .hm-hero h1{max-width:20ch;letter-spacing:-.02em}
.hm .hm-lede{margin:14px auto 0;font-size:clamp(17px,2.2vw,21px);line-height:1.55;color:var(--ap-text-2);max-width:40ch}
.hm .hm-search{margin:32px auto 0;max-width:620px;text-align:start}
.hm .hm-search-label{display:block;text-align:center;font-size:14px;color:var(--ap-text-2);margin-bottom:10px}
.hm .hm-search .search-wrap{position:relative;max-width:none;flex:none;order:0}
.hm .hm-search .search-input{width:100%;background:var(--ap-bg);color:var(--ap-text);border:1px solid transparent;border-radius:14px;
  font:inherit;font-size:17px;padding:15px 48px 15px 44px;min-height:54px;box-shadow:none;transition:background-color .2s,border-color .2s,box-shadow .2s}
.hm .hm-search .search-input::placeholder{color:var(--ap-text-3)}
.hm .hm-search .search-input:focus{background:#fff;border-color:var(--ap-blue);box-shadow:0 0 0 4px rgba(0,113,227,.15);outline:0}
.hm .hm-search .search-ico{opacity:.45}
.hm .hm-search .search-results{border:0;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.14);font-size:15px}
.hm .hm-quick{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.hm .hm-quick li{margin:0}
.hm .hm-quick a{display:inline-block;color:var(--ap-text);text-decoration:none;font-size:14px;padding:.38rem .9rem;background:var(--ap-bg);border-radius:999px;transition:background-color .2s}
.hm .hm-quick a:hover{background:var(--ap-fill)}

/* ticker sits under the hero on the grey page */
.hm #news-ticker{margin:28px auto 0;max-width:1024px;width:calc(100% - 32px);position:relative;z-index:1}

/* ---------- sections ---------- */
.hm .hm-section{padding:56px 0 0}
.hm .hm-section>.hm-wrap>h2,.hm .hm-tools-head h2,.hm .hm-about h2{font-size:clamp(26px,3.6vw,34px);font-weight:700;margin:0;color:var(--ap-text);line-height:1.25;padding:0}
.hm .hm-section-sub{margin:.4rem 0 0;color:var(--ap-text-2);font-size:17px;max-width:60ch}

/* ---------- tools ---------- */
.hm .hm-tools-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hm .hm-switch{display:inline-flex;background:var(--ap-fill);border-radius:10px;padding:2px}
.hm .hm-switch button{font:inherit;font-size:14px;font-weight:500;border:0;background:transparent;color:var(--ap-text);padding:.35rem 1rem;border-radius:8px;cursor:pointer;min-height:34px;transition:background-color .2s,box-shadow .2s}
.hm .hm-switch button[aria-selected="true"]{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}
.hm .hm-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,44%);gap:12px;margin:22px 0 0;padding:2px 2px 14px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;align-items:stretch}
.hm .hm-rail::-webkit-scrollbar{display:none}
.hm .hm-rail[hidden]{display:none}
.hm .hm-rail li{scroll-snap-align:start;margin:0;padding:0;list-style:none}
@media(min-width:640px){.hm .hm-rail{grid-auto-columns:minmax(180px,1fr)}}
@media(min-width:1000px){.hm .hm-rail{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible}.hm #rail-life,.hm .hm-rail-3{grid-template-columns:repeat(3,1fr)}}
.hm .hm-tool{display:flex;flex-direction:column;gap:6px;height:100%;min-height:128px;padding:20px 20px 18px;background:#fff;border:0;border-radius:18px;
  color:var(--ap-text);text-decoration:none;cursor:pointer;font:inherit;text-align:start;width:100%;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.hm .hm-tool:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.07)}
.hm .hm-tool svg{width:28px;height:28px;color:var(--ap-blue);flex:none;margin-bottom:4px}
.hm .hm-tool strong{font-size:16px;font-weight:600;line-height:1.35}
.hm .hm-tool span{font-size:14px;color:var(--ap-text-2);line-height:1.5}
.hm .hm-tool-ext strong::after{content:" ↗";font-size:12px;color:var(--ap-text-3);font-weight:400}

.hm .hm-stage{margin-top:18px;background:#fff;border:0;border-radius:18px;padding:6px 20px 20px}
.hm .hm-stage[hidden]{display:none}
.hm .hm-stage-bar{display:flex;justify-content:flex-end;padding-top:10px}
.hm .hm-stage-close{font:inherit;font-size:14px;border:0;background:var(--ap-fill);color:var(--ap-text);border-radius:999px;padding:.35rem 1rem;cursor:pointer;min-height:34px}
.hm .hm-stage nav.navbar{height:0;min-height:0;padding:0;margin:0;border:0;overflow:hidden;position:static;background:none;box-shadow:none}
.hm .hm-stage #mainContent{padding:0;margin:0;max-width:none}
.hm #hm-stage,.hm #tools,.hm #topics{scroll-margin-top:64px}

/* ---------- topics ---------- */
.hm .hm-tabs{display:flex;gap:8px;margin-top:22px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.hm .hm-tabs::-webkit-scrollbar{display:none}
.hm .hm-tab{font:inherit;font-size:14px;font-weight:500;white-space:nowrap;border:0;background:#fff;color:var(--ap-text);padding:.45rem 1.05rem;border-radius:999px;cursor:pointer;min-height:38px;transition:background-color .2s,color .2s}
.hm .hm-tab:hover{background:var(--ap-fill)}
.hm .hm-tab[aria-selected="true"]{background:var(--ap-text);color:#fff}
.hm .hm-panel{margin-top:14px;background:#fff;border:0;border-radius:18px;padding:28px 30px;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:32px}
.hm .hm-panel[hidden]{display:none}
.hm .hm-panel:not([hidden]){animation:hm-fade .35s ease-out}
.hm .hm-panel h3{font-size:21px;font-weight:650;margin:0 0 4px}
.hm .hm-panel-intro{margin:0 0 12px;color:var(--ap-text-2);font-size:15px}
.hm .hm-links{list-style:none;margin:0;padding:0;columns:2;column-gap:32px}
.hm .hm-links li{break-inside:avoid;margin:0;border-top:1px solid var(--ap-sep-soft)}
.hm .hm-links a{display:block;padding:.7rem 0;color:var(--ap-text);text-decoration:none;font-size:15px;line-height:1.5;transition:color .2s}
.hm .hm-links a:hover{color:var(--ap-link)}
.hm .hm-aside{border-inline-start:1px solid var(--ap-sep-soft);padding-inline-start:28px}
.hm .hm-aside h4{font-size:13px;font-weight:600;margin:0 0 10px;color:var(--ap-text-2)}
.hm .hm-sources{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px;padding:0;list-style:none}
.hm .hm-sources li{margin:0}
.hm .hm-sources a{display:inline-block;font-size:13px;color:var(--ap-text);text-decoration:none;background:var(--ap-bg);border-radius:999px;padding:.25rem .75rem}
.hm .hm-sources a:hover{background:var(--ap-fill)}
.hm .hm-all{display:inline-block;color:var(--ap-link);text-decoration:none;font-size:15px}
.hm .hm-all::after{content:" ›"}
.hm .hm-all:hover{text-decoration:underline}
@media(max-width:820px){
  .hm .hm-panel{grid-template-columns:1fr;padding:20px;gap:18px}
  .hm .hm-links{columns:1}
  .hm .hm-aside{border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--ap-sep-soft);padding-top:16px}
}
.hm.no-js .hm-tabs{display:none}

/* ---------- about ---------- */
.hm .hm-about{padding:64px 0 72px}
.hm .hm-about-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:44px;margin-top:18px}
.hm .hm-about-text p{margin:0 0 1em;max-width:68ch;color:#424245;font-size:16px}
.hm .hm-facts{list-style:none;margin:0;padding:6px 22px;background:#fff;border:0;border-radius:18px;align-self:start}
.hm .hm-facts li{margin:0;padding:.75rem 0;border-top:1px solid var(--ap-sep-soft);font-size:15px}
.hm .hm-facts li:first-child{border-top:0;color:var(--ap-text-2)}
.hm .hm-facts a{color:var(--ap-link);text-decoration:none}
.hm .hm-facts a:hover{text-decoration:underline}
@media(max-width:820px){.hm .hm-about-grid{grid-template-columns:1fr;gap:20px}}

/* ---------- footer (home uses the big legacy footer: make it Apple-quiet) ---------- */
.hm .footer{background:var(--ap-bg)!important;color:var(--ap-text-2)!important;border-top:1px solid var(--ap-sep)!important;font-size:13px}
.hm .footer :is(a,button,span,p,li){color:#424245!important}
.hm .footer :is(.footer-logo,.footer-col-title,.footer-logo span){color:var(--ap-text)!important}
.hm .footer .footer-tagline,.hm .footer .footer-bottom span{color:var(--ap-text-2)!important}
.hm .footer .social-btn{background:#fff!important;border:0!important;color:var(--ap-text)!important}
.hm .footer .footer-bottom{border-top:1px solid var(--ap-sep)!important}
.hm>footer.wrap{width:min(1024px,100% - 32px);margin-inline:auto}

/* ---------- motion: one calm entrance, then quiet ---------- */
@keyframes hm-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hm-fade{from{opacity:0}to{opacity:1}}
.hm .hm-hero h1{animation:hm-rise .9s cubic-bezier(.2,.7,.2,1) both}
.hm .hm-lede{animation:hm-rise .9s cubic-bezier(.2,.7,.2,1) .12s both}
.hm .hm-search{animation:hm-rise .9s cubic-bezier(.2,.7,.2,1) .24s both}
.hm #news-ticker{animation:hm-fade 1s ease .4s both}
.hm .hm-section,.hm .hm-about{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.hm.js-reveal .hm-section:not(.hm-in),.hm.js-reveal .hm-about:not(.hm-in){opacity:0;transform:translateY(18px)}
@media(prefers-reduced-motion:reduce){
  .hm *,.hm *::before,.hm *::after{animation:none!important;transition:none!important}
  .hm.js-reveal .hm-section,.hm.js-reveal .hm-about{opacity:1!important;transform:none!important}
}

/* forgiving site search field */
.hm .ss-wrap{position:relative}
.hm .ss-ico{position:absolute;inset-inline-start:16px;top:50%;width:19px;height:19px;transform:translateY(-50%);color:var(--ap-text-3);pointer-events:none;z-index:1}
.hm .hm-search .search-input{padding-inline:46px 16px}
.hm .hm-search .search-input::-webkit-search-cancel-button{opacity:.5}
.hm .tl-brand{flex:none}
@media(max-width:420px){.hm .hm-topnav a:nth-child(n+2){display:none}}

/* Site name: one slow-motion shine on arrival (reading direction: right→left in Arabic) */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hm .hm-hero h1{
    background-image:linear-gradient(105deg,#1d1d1f 0%,#1d1d1f 36%,#56565c 42%,#ff9f5e 47.5%,#ffe9d6 50%,#ff9f5e 52.5%,#56565c 58%,#1d1d1f 64%,#1d1d1f 100%);
    background-size:260% 100%;background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
    animation:hm-rise .9s cubic-bezier(.2,.7,.2,1) both,hm-shine-rtl 6.5s cubic-bezier(.45,.05,.55,.95) .9s 1 both}
  html[dir="ltr"] .hm .hm-hero h1{animation:hm-rise .9s cubic-bezier(.2,.7,.2,1) both,hm-shine-ltr 6.5s cubic-bezier(.45,.05,.55,.95) .9s 1 both}
}
@keyframes hm-shine-rtl{from{background-position:0% 0}to{background-position:100% 0}}
@keyframes hm-shine-ltr{from{background-position:100% 0}to{background-position:0% 0}}
@media(prefers-reduced-motion:reduce){.hm .hm-hero h1{animation:none!important;background:none!important;color:var(--ap-text)!important;-webkit-text-fill-color:currentColor!important}}