/* ==========================================================================
   Miraai 2026 site
   Light pages with dark bands. The dark bands are the stage of the Miraai
   questionnaire aesthetic: Miraai steel blending into Miraai navy, content
   on frosted glass, Miraai gold for the accent and the main buttons.
   Fonts are self-hosted (assets/fonts), so nothing loads from a third party.
   ========================================================================== */

@font-face{font-family:"Source Serif 4";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/source-serif-4-700.woff2) format("woff2")}
@font-face{font-family:"Karla";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/karla-400.woff2) format("woff2")}
@font-face{font-family:"Karla";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/karla-400-italic.woff2) format("woff2")}
@font-face{font-family:"Karla";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/karla-500.woff2) format("woff2")}
@font-face{font-family:"Karla";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/karla-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-700.woff2) format("woff2")}

:root{
  /* Miraai palette */
  --navy:#0B1733; --navy-deep:#0A1430; --steel:#0F4F6E; --steel-mid:#0D3657; --steel-light:#3F7C99;
  --deepsea:#0E5E6B; --steel-tint:#D4E0E2; --gold:#F3B443; --gold-ink:#7B540D; --pine:#2F6F4F; --celadon:#8FB8AE;
  /* light pages */
  --ground:#E7E9E4; --plate:#EDEFEA; --paper:#FFFFFF;
  --ink:#0B1733; --ink-muted:#3A4750; --ink-quiet:#515D63;
  --hair:rgba(11,23,51,.12); --hair-strong:rgba(11,23,51,.24);
  /* the dark stage */
  --stage:
    radial-gradient(70rem 46rem at 6% -8%, rgba(63,124,153,.42), transparent 62%),
    radial-gradient(56rem 40rem at 104% 108%, rgba(243,180,67,.10), transparent 60%),
    linear-gradient(160deg, #0F4F6E 0%, #0D3657 36%, #0B1733 76%, #0A1430 100%);
  --glass:linear-gradient(160deg, rgba(20,52,82,.72), rgba(8,19,42,.80));
  --glass-strong:linear-gradient(160deg, rgba(20,52,82,.92), rgba(8,19,42,.95));
  --glass-b:rgba(255,255,255,.12);
  --glass-shadow:0 40px 100px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08);
  --tile:rgba(255,255,255,.05); --tile-b:rgba(255,255,255,.09);
  --on-head:#fff; --on-body:rgba(255,255,255,.84); --on-sec:rgba(255,255,255,.68); --on-hint:rgba(255,255,255,.5);
  --accent-text:color-mix(in srgb, #F3B443 42%, #fff);
  /* type */
  --serif:"Source Serif 4","Times New Roman",ui-serif,serif;
  --sans:"Karla","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",Consolas,ui-monospace,monospace;
  --arabic:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  /* motion */
  --settle:cubic-bezier(.22,1,.36,1); --ease:cubic-bezier(.2,.8,.2,1);
  /* layout */
  --wrap:76rem; --pad:clamp(1rem, 4vw, 2.75rem); --hdr:4.5rem;
  --r-panel:1.75rem; --r-card:1.1rem; --r-tile:.85rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 1rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;letter-spacing:0;margin:0;color:var(--ink);text-wrap:balance}
p{margin:0;text-wrap:pretty}
em{font-style:normal}
:focus-visible{outline:3px solid var(--steel);outline-offset:3px;border-radius:4px}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
.dark :focus-visible,.hdr :focus-visible,.ftr :focus-visible,.modal :focus-visible{outline-color:#fff}
[hidden]{display:none!important}
.nw{white-space:nowrap}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--gold);color:var(--navy);padding:.7rem 1.1rem;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{top:1rem}
.wrap{width:min(var(--wrap), 100% - 2*var(--pad));margin-inline:auto}
.num,.ltr{direction:ltr;unicode-bidi:isolate}

/* ---------- headings and type ---------- */
.eyebrow{display:block;font:600 .8rem/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--steel)}
.dark .eyebrow{color:var(--accent-text)}
.bar{display:block;width:3.5rem;height:.375rem;border-radius:1rem;background:var(--gold);margin-bottom:1.1rem}
.dark .bar{box-shadow:0 0 14px rgba(243,180,67,.45)}
.h1{font-size:clamp(2.4rem, 5.2vw, 4.25rem);line-height:1.04}
.h2{font-size:clamp(1.95rem, 3.6vw, 2.9rem);line-height:1.08}
.h3{font-size:1.32rem;line-height:1.2}
h1 em,h2 em,h3 em{color:var(--gold-ink)}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--on-head)}
.dark h1 em,.dark h2 em,.dark h3 em{color:var(--gold)}
.lead{font-size:clamp(1.08rem, 1.45vw, 1.24rem);line-height:1.62;color:var(--ink-muted);max-width:38rem}
.dark .lead{color:var(--on-body)}
.body{color:var(--ink-muted)}
.body p+p{margin-top:1rem}
.dark .body{color:var(--on-body)}
.small{font-size:.94rem;line-height:1.55;color:var(--ink-quiet)}
.dark .small{color:var(--on-sec)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border:1px solid transparent;border-radius:999px;
  font:600 1rem/1.1 var(--sans);padding:.85rem 1.4rem;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .2s var(--ease),filter .2s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s,border-color .2s}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn.lg{padding:1rem 1.9rem;font-size:1.1rem}
.btn.sm{padding:.6rem 1.05rem;font-size:.92rem}
.btn.primary{background:var(--gold);color:var(--navy);box-shadow:0 12px 30px -12px rgba(243,180,67,.75)}
.btn.glass{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.24);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn.line{background:transparent;color:var(--ink);border-color:var(--hair-strong)}
.btn.ghost{background:transparent;color:var(--steel);padding-inline:.35rem}
.dark .btn.ghost{color:var(--on-body)}
@media (hover:hover){
  .btn.primary:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 16px 34px -12px rgba(243,180,67,.85)}
  .btn.glass:hover{background:rgba(255,255,255,.2)}
  .btn.line:hover{border-color:var(--ink);background:var(--paper)}
  .btn.ghost:hover{color:var(--ink)}
  .dark .btn.ghost:hover{color:#fff}
}
.btn:active{transform:scale(.97)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.42;box-shadow:none;cursor:not-allowed;filter:saturate(.4);pointer-events:none}
.btns{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
[dir="rtl"] .btn .arw{transform:scaleX(-1)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;height:var(--hdr);color:#fff;
  background:linear-gradient(100deg,#0F4F6E 0%,#0D3657 42%,#0B1733 100%);border-bottom:1px solid rgba(255,255,255,.1)}
.hdr .wrap{height:100%;display:flex;align-items:center;gap:1.5rem}
.brand{display:flex;align-items:center;flex:none;padding:.3rem 0;direction:ltr}
.brand img{height:1.78rem;width:auto}
.nav{display:flex;align-items:center;gap:.15rem;margin-inline-start:auto}
.nav a{position:relative;display:block;padding:.55rem .72rem;border-radius:999px;color:rgba(255,255,255,.8);text-decoration:none;font-weight:600;font-size:.95rem;white-space:nowrap;transition:color .2s,background .2s}
.nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:.72rem;right:.72rem;bottom:.18rem;height:2px;border-radius:2px;background:var(--gold);box-shadow:0 0 10px rgba(243,180,67,.6)}
.hdr-tools{display:flex;align-items:center;gap:.55rem;flex:none}
.lang{display:inline-flex;align-items:center;justify-content:center;min-width:2.6rem;height:2.4rem;padding:0 .8rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08);color:#fff;text-decoration:none;font-weight:600;font-size:.92rem}
.lang:hover{background:rgba(255,255,255,.16)}
.lang[lang="ar"]{font-family:var(--arabic);font-size:1rem}
.burger{display:none;width:2.6rem;height:2.6rem;border-radius:999px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08);cursor:pointer;place-items:center;padding:0}
.burger svg{width:1.2rem;height:1.2rem}
@media (max-width:1180px){
  .nav{display:none}
  .burger{display:grid}
  .hdr-tools{margin-inline-start:auto}
}
@media (max-width:520px){ .hdr-tools .btn.primary{display:none} .brand img{height:1.55rem} }

.drawer{position:fixed;inset:0;z-index:80;visibility:hidden;transition:visibility 0s .4s}
.drawer.open{visibility:visible;transition:none}
.drawer .scrim{position:absolute;inset:0;background:rgba(5,10,24,.5);opacity:0;transition:opacity .35s}
.drawer.open .scrim{opacity:1}
.drawer .sheet{position:absolute;top:0;bottom:0;inset-inline-end:0;width:min(24rem,88vw);background:var(--glass-strong);
  -webkit-backdrop-filter:blur(28px) saturate(140%);backdrop-filter:blur(28px) saturate(140%);border-inline-start:1px solid var(--glass-b);
  padding:1.2rem 1.4rem 2rem;display:flex;flex-direction:column;gap:.3rem;transform:translateX(102%);transition:transform .45s var(--settle);color:#fff;overflow-y:auto}
[dir="rtl"] .drawer .sheet{transform:translateX(-102%)}
.drawer.open .sheet{transform:none}
.drawer .close{align-self:flex-end;width:2.6rem;height:2.6rem;border-radius:999px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08);cursor:pointer;display:grid;place-items:center;margin-bottom:.8rem}
.drawer .close svg{width:1.1rem;height:1.1rem}
.drawer a.dl{display:flex;align-items:center;justify-content:space-between;padding:.85rem .2rem;border-bottom:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.86);text-decoration:none;font-weight:600;font-size:1.12rem}
.drawer a.dl[aria-current="page"]{color:var(--gold)}
.drawer a.dl svg{width:1.05rem;height:1.05rem;flex:none;opacity:.55}
.drawer a.dl[aria-current="page"] svg{opacity:1}
[dir="rtl"] .drawer a.dl svg{transform:scaleX(-1)}
.drawer .btns{margin-top:1.4rem}
@media (prefers-reduced-motion:reduce){ .drawer .sheet,.drawer .scrim{transition:none} }

/* ---------- dark band (the stage) ---------- */
.dark{position:relative;background:var(--stage);color:var(--on-body);isolation:isolate;overflow:hidden}
.dark .mark-wm{position:absolute;z-index:-1;color:var(--steel-light);opacity:.32;pointer-events:none;width:44rem;height:44rem;inset-inline-end:-12rem;bottom:-17rem}
.dark .mark-wm svg{width:100%;height:100%}
.dark .mark-wm.top{bottom:auto;top:-15rem;inset-inline-end:auto;inset-inline-start:-14rem;width:36rem;height:36rem;opacity:.22}

/* glass */
.glass{background:var(--glass);border:1px solid var(--glass-b);box-shadow:var(--glass-shadow);border-radius:var(--r-panel);
  -webkit-backdrop-filter:blur(28px) saturate(140%);backdrop-filter:blur(28px) saturate(140%)}
.gtile{background:var(--tile);border:1px solid var(--tile-b);border-radius:var(--r-tile)}
.gcard{background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--r-card);box-shadow:0 24px 60px -34px rgba(0,0,0,.9);
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
a.gcard{display:block;text-decoration:none;color:inherit}
@media (hover:hover){
  a.gcard:hover,button.gcard:hover{transform:translateY(-3px);border-color:color-mix(in srgb, var(--gold) 55%, transparent);
    box-shadow:0 30px 70px -30px rgba(0,0,0,.95),0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent)}
}

/* ---------- hero ---------- */
.hero{padding:clamp(3.2rem,7vw,6rem) 0 clamp(3.6rem,7vw,6.2rem)}
.hero .grid{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero .grid.single{display:block;max-width:52rem}
.hero .lead{margin-top:1.15rem}
.hero .btns{margin-top:1.8rem}
.crumb{display:flex;align-items:center;gap:.5rem;font-size:.9rem;margin-bottom:1.25rem;color:var(--on-sec)}
.crumb a{color:var(--on-sec);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.crumb a:hover{color:#fff}
.crumb svg{width:.85rem;height:.85rem;opacity:.7}
[dir="rtl"] .crumb svg{transform:scaleX(-1)}
.hero-note{margin-top:1.4rem;font-size:.92rem;color:var(--on-sec);display:flex;gap:.55rem;align-items:center}
.hero-note svg{width:1rem;height:1rem;color:var(--accent-text);flex:none}
@media (max-width:960px){ .hero .grid{grid-template-columns:1fr} .hero .visual{order:2} }

/* fanned stills */
.fan{position:relative;width:100%;aspect-ratio:16/11}
.fan img{position:absolute;width:62%;aspect-ratio:16/9;object-fit:cover;border-radius:1rem;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.85);left:19%;top:18%}
.fan img:nth-child(1){transform:translate(-30%,6%) rotate(-9deg)}
.fan img:nth-child(2){z-index:2;transform:translateY(-4%)}
.fan img:nth-child(3){transform:translate(30%,6%) rotate(9deg)}
.js .fan.in img:nth-child(1){animation:fanA 1s var(--settle) both, floatA 7s ease-in-out 1s 2}
.js .fan.in img:nth-child(2){animation:fanB 1s var(--settle) .08s both, floatB 7s ease-in-out 1.1s 2}
.js .fan.in img:nth-child(3){animation:fanC 1s var(--settle) .16s both, floatC 7s ease-in-out 1.2s 2}
@keyframes fanA{from{opacity:0;transform:translate(0,10%) rotate(0)}to{opacity:1;transform:translate(-30%,6%) rotate(-9deg)}}
@keyframes fanB{from{opacity:0;transform:translateY(8%)}to{opacity:1;transform:translateY(-4%)}}
@keyframes fanC{from{opacity:0;transform:translate(0,10%) rotate(0)}to{opacity:1;transform:translate(30%,6%) rotate(9deg)}}
@keyframes floatA{0%,100%{transform:translate(-30%,6%) rotate(-9deg)}50%{transform:translate(-30%,calc(6% - 8px)) rotate(-9deg)}}
@keyframes floatB{0%,100%{transform:translateY(-4%)}50%{transform:translateY(calc(-4% + 8px))}}
@keyframes floatC{0%,100%{transform:translate(30%,6%) rotate(9deg)}50%{transform:translate(30%,calc(6% - 6px)) rotate(9deg)}}
.js .fan:not(.in) img{opacity:0}
.fan .cap{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:3;white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .85rem;border-radius:999px;font-size:.86rem;font-weight:600;
  background:rgba(10,22,46,.72);border:1px solid rgba(255,255,255,.16);color:#fff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.chip i{width:.5rem;height:.5rem;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(243,180,67,.8)}

/* ---------- sections on the light page ---------- */
.sec{padding:clamp(4rem,8vw,6.75rem) 0}
.sec.tight{padding:clamp(3rem,6vw,4.75rem) 0}
.sec.plate{background:var(--plate)}
.sec.paper{background:var(--paper)}
.sec + .sec.ruled{border-top:1px solid var(--hair)}
.head{max-width:44rem;margin-bottom:clamp(2rem,4vw,3rem)}
.head .h2{margin-top:.5rem}
.head .lead{margin-top:1rem}
.head.center{margin-inline:auto;text-align:center}
.head.center .bar{margin-inline:auto}
.head.center .lead{margin-inline:auto}
.split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.split.rev{grid-template-columns:7fr 5fr}
.split.even{grid-template-columns:1fr 1fr}
.split.mid{align-items:center}
@media (max-width:900px){ .split,.split.rev,.split.even{grid-template-columns:1fr} }

.grid2,.grid3,.grid4{display:grid;gap:1.25rem}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){ .grid4{grid-template-columns:repeat(2,minmax(0,1fr))} .grid3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .grid2,.grid3,.grid4{grid-template-columns:1fr} }

.card{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-card);padding:1.6rem 1.6rem 1.7rem;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.card h3{font-size:1.28rem;line-height:1.22;margin-top:.9rem}
.card h3:first-child{margin-top:0}
.card p{margin-top:.55rem;color:var(--ink-muted);font-size:1rem;line-height:1.6}
.card .eyebrow+h3{margin-top:.45rem}
a.card{display:block;text-decoration:none;color:inherit}
@media (hover:hover){ a.card:hover{transform:translateY(-2px);border-color:color-mix(in srgb, var(--steel) 45%, transparent);box-shadow:0 22px 50px -32px rgba(11,23,51,.45)} }
.card.flat{background:transparent}
.card .more{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-weight:600;color:var(--steel);text-decoration:none}
.card .more svg{width:1rem;height:1rem}

.itile{width:2.5rem;height:2.5rem;border-radius:.75rem;display:grid;place-items:center;flex:none;background:var(--steel-tint);color:var(--steel)}
.itile svg{width:1.2rem;height:1.2rem}
.dark .itile{background:rgba(63,124,153,.34);color:var(--accent-text)}

/* glass cards on dark bands */
.dark .gcard{padding:1.5rem 1.5rem 1.6rem}
.dark .gcard h3{font-size:1.24rem;margin-top:.85rem;color:#fff}
.dark .gcard p{margin-top:.5rem;color:var(--on-body);font-size:.99rem;line-height:1.6}

/* figures */
.figs{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:0;border-top:1px solid var(--hair-strong)}
.figs>div{padding:1.25rem 1.25rem 0;border-inline-end:1px solid var(--hair)}
.figs>div:first-child{padding-inline-start:0}
.figs>div:last-child{border-inline-end:0}
.figs b{display:block;font:700 clamp(1.9rem,3.2vw,2.6rem)/1.05 var(--serif);color:var(--navy);font-variant-numeric:tabular-nums lining-nums}
.figs span{display:block;margin-top:.55rem;font-size:.95rem;line-height:1.45;color:var(--ink-quiet)}
.figs.tight b{font-size:clamp(1.5rem,2.4vw,2.1rem);white-space:nowrap}
@media (max-width:520px){.figs.tight{grid-template-columns:1fr}.figs.tight>div{padding-inline-start:0;border-inline-end:0}}
.dark .figs{border-top-color:rgba(255,255,255,.3)}
.dark .figs>div{border-color:rgba(255,255,255,.12)}
.dark .figs b{color:#fff}
.dark .figs span{color:var(--on-sec)}
@media (max-width:700px){ .figs{grid-template-columns:1fr} .figs>div{border-inline-end:0;border-bottom:1px solid var(--hair);padding:1.1rem 0} }

/* lists */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ticks li{display:flex;gap:.7rem;align-items:flex-start;line-height:1.55}
.ticks li svg{width:1.1rem;height:1.1rem;flex:none;margin-top:.25rem;color:var(--steel)}
.dark .ticks li{color:var(--on-body)}
.dark .ticks li svg{color:var(--gold)}

/* quotes */
.pull{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.25;color:var(--ink);max-width:46rem}
.pull em{color:var(--gold-ink)}
.dark .pull{color:#fff}
.dark .pull em{color:var(--gold)}
.byline{margin-top:1.2rem;display:flex;align-items:center;gap:.8rem;font-size:.95rem;color:var(--ink-quiet)}
.byline img{width:2.8rem;height:2.8rem;border-radius:50%;object-fit:cover}
.dark .byline{color:var(--on-sec)}

/* figure blocks (charts are light images) */
.figure{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden}
.figure img{width:100%}
.figure figcaption{padding:.9rem 1.2rem 1.1rem;font-size:.92rem;color:var(--ink-quiet);border-top:1px solid var(--hair)}
figure{margin:0}

/* step track (weeks, method) */
.track{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:1.25rem;counter-reset:st}
.step{position:relative;padding-top:1.4rem}
.step::before{content:"";position:absolute;top:0;left:0;right:-1.25rem;height:2px;background:var(--hair-strong)}
.step:last-child::before{right:0}
[dir="rtl"] .step::before{left:-1.25rem;right:0}
[dir="rtl"] .step:last-child::before{left:0}
.step::after{content:"";position:absolute;top:-.3rem;inset-inline-start:0;width:.65rem;height:.65rem;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--ground)}
.sec.plate .step::after{box-shadow:0 0 0 4px var(--plate)}
.step .when{font:500 .78rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.step h3{font-size:1.22rem;margin-top:.45rem}
.step p{margin-top:.45rem;color:var(--ink-muted);font-size:.98rem;line-height:1.58}
.dark .step::before{background:rgba(255,255,255,.22)}
.dark .step::after{box-shadow:0 0 0 4px #0c2546,0 0 12px rgba(243,180,67,.7)}
.dark .step .when{color:var(--accent-text)}
.dark .step p{color:var(--on-body)}
@media (max-width:900px){
  .track{grid-template-columns:1fr;gap:0}
  .step{padding:0 0 1.6rem 1.6rem}
  [dir="rtl"] .step{padding:0 1.6rem 1.6rem 0}
  .step::before{top:.35rem;bottom:0;left:.3rem;right:auto;width:2px;height:auto}
  [dir="rtl"] .step::before{left:auto;right:.3rem}
  .step:last-child::before{display:none}
  .step::after{top:.05rem}
}

/* outlined numerals */
.onum{font-family:var(--serif);font-weight:700;font-size:clamp(2.6rem,5vw,3.8rem);line-height:1;color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb, var(--steel) 75%, #fff);font-variant-numeric:tabular-nums}
.dark .onum{-webkit-text-stroke:1.5px color-mix(in srgb, var(--gold) 70%, #fff)}

/* people */
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.person{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-card);padding:1.6rem}
.person img{width:5.5rem;height:5.5rem;border-radius:50%;object-fit:cover;object-position:50% 20%;border:4px solid var(--plate);box-shadow:0 0 0 1px var(--hair)}
.person h3{margin-top:1rem;font-size:1.3rem}
.person .role{margin-top:.3rem;font-weight:600;color:var(--steel);font-size:.95rem}
.person p{margin-top:.7rem;color:var(--ink-muted);font-size:.98rem;line-height:1.6}
@media (max-width:900px){ .people{grid-template-columns:1fr} }

/* closing band */
.cta{padding:clamp(4rem,8vw,6.5rem) 0}
.cta .inner{display:grid;grid-template-columns:1.2fr 1fr;gap:2.5rem;align-items:end}
.cta .btns{justify-content:flex-end}
@media (max-width:900px){ .cta .inner{grid-template-columns:1fr} .cta .btns{justify-content:flex-start} }

/* pager between product pages */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;padding:2.5rem 0 0}
.pager a{display:flex;flex-direction:column;gap:.2rem;padding:1.1rem 1.3rem;border-radius:var(--r-card);border:1px solid var(--hair);background:var(--paper);text-decoration:none}
.pager a:hover{border-color:var(--steel)}
.pager a .small{display:flex;align-items:center;gap:.4rem}
.pager a .small svg{width:.9rem;height:.9rem}
.pager a b{font-family:var(--serif);font-size:1.2rem}
.pager a.next{text-align:end;align-items:flex-end}
[dir="rtl"] .pager svg{transform:scaleX(-1)}

/* footer */
.ftr{background:var(--navy);color:rgba(255,255,255,.72);padding:3.5rem 0 2.2rem;font-size:.95rem}
.ftr .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:2rem}
.ftr img{height:1.7rem;width:auto}
.ftr h4{font:600 .78rem/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--accent-text);margin-bottom:.8rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.ftr a{color:rgba(255,255,255,.8);text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr .about{margin-top:1rem;max-width:22rem;line-height:1.6}
.ftr .base{margin-top:2.5rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.86rem;color:rgba(255,255,255,.55)}
@media (max-width:900px){ .ftr .cols{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .ftr .cols{grid-template-columns:1fr} }

/* entrance */
.js [data-rise]{opacity:0;transform:translateY(16px)}
.js [data-rise].in{animation:rise .75s var(--settle) both;animation-delay:calc(var(--i,0) * .08s)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* embedded frames */
.frame{position:relative;border-radius:var(--r-panel);overflow:hidden;background:#081226;border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 90px -36px rgba(0,0,0,.9)}
.frame iframe{display:block;width:100%;border:0}
.frame.ar169 iframe{aspect-ratio:16/9;height:auto}
.frame-note{margin-top:1rem;font-size:.92rem;color:var(--on-sec);display:flex;gap:.5rem;align-items:center}
.frame-note svg{width:1rem;height:1rem;flex:none;color:var(--accent-text)}
.formframe{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden}
.formframe iframe{display:block;width:100%;border:0}

/* tags */
.tag{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:999px;font:600 .8rem/1.2 var(--sans);
  background:var(--steel-tint);color:var(--steel)}
.dark .tag{background:rgba(255,255,255,.08);color:var(--on-body);border:1px solid rgba(255,255,255,.14)}
.tag.gold{background:rgba(243,180,67,.18);color:var(--gold-ink)}
.dark .tag.gold{background:rgba(243,180,67,.2);color:var(--accent-text);border-color:rgba(243,180,67,.45)}

/* links list (OSF etc.) */
.links{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.links a{display:flex;align-items:center;gap:1rem;padding:1rem 1.15rem;border-radius:var(--r-tile);background:var(--paper);border:1px solid var(--hair);text-decoration:none}
.links a:hover{border-color:var(--steel)}
.links a b{display:block;font-family:var(--serif);font-size:1.08rem}
.links a span{display:block;font-size:.92rem;color:var(--ink-quiet)}
.links a .go{margin-inline-start:auto;width:1.1rem;height:1.1rem;color:var(--steel);flex:none}
.dark .links a{background:var(--tile);border-color:var(--tile-b)}
.dark .links a b{color:#fff}
.dark .links a span{color:var(--on-sec)}
.dark .links a .go{color:var(--accent-text)}

/* ---------- Arabic ---------- */
[dir="rtl"] body{font-family:var(--arabic);line-height:1.85}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] .pull,[dir="rtl"] .onum,[dir="rtl"] .person h3,[dir="rtl"] .pager a b,[dir="rtl"] .links a b{font-family:var(--arabic);font-weight:700;line-height:1.4}
[dir="rtl"] .h1{line-height:1.3}
[dir="rtl"] *{letter-spacing:0!important}
[dir="rtl"] .eyebrow,[dir="rtl"] .ftr h4,[dir="rtl"] .step .when{text-transform:none;font-family:var(--arabic);font-weight:700;font-size:.9rem}
[dir="rtl"] .btn,[dir="rtl"] .nav a,[dir="rtl"] .drawer a.dl,[dir="rtl"] .chip,[dir="rtl"] .tag{font-family:var(--arabic)}
[dir="rtl"] .lead,[dir="rtl"] .body,[dir="rtl"] .card p{line-height:1.9}
[dir="rtl"] .mono{font-family:var(--mono)}
[dir="rtl"] .figs b{font-family:var(--arabic)}
[dir="rtl"] .lang[lang="en"]{font-family:var(--sans)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js [data-rise]{opacity:1;transform:none}
  .js .fan:not(.in) img{opacity:1}
}

/* ==========================================================================
   Components: product tiles, miniatures of the real screens, and the demos.
   Miniatures are sized in container units so each one scales as a whole.
   ========================================================================== */

/* ---------- product tiles ---------- */
.ptiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
@media (max-width:1100px){ .ptiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .ptiles{grid-template-columns:1fr} }
.dark .gcard.ptile{padding:0;overflow:hidden;display:flex;flex-direction:column}
.pt-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#081226;border-bottom:1px solid rgba(255,255,255,.1);container-type:inline-size}
.pt-img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pt-art{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 70% 80%, rgba(14,94,107,.6), transparent 70%)}
.pt-art img{width:150%;max-width:none;transform:translateY(-14%)}
.pt-loop{position:absolute;inset:0;overflow:hidden}
.pt-loop .bg{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;filter:blur(16px) brightness(.5) saturate(1.1)}
.pt-loop .fr{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);aspect-ratio:1280/548;box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.pt-loop .fr img,.pt-loop .fr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pt-loop video{opacity:0;transition:opacity .5s}
.pt-loop .fr.live video{opacity:1}
.pt-body{padding:1.25rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.dark .ptile h3{margin-top:.45rem;font-size:1.2rem}
.dark .ptile p{font-size:.96rem}
.pt-go{margin-top:auto;padding-top:1rem;display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:var(--accent-text)}
.pt-go svg{width:1rem;height:1rem;transition:transform .25s var(--ease)}
@media (hover:hover){ .ptile:hover .pt-img{transform:scale(1.04)} .ptile:hover .pt-go svg{transform:translateX(3px)} [dir="rtl"] .ptile:hover .pt-go svg{transform:scaleX(-1) translateX(3px)} }

/* ---------- miniature: reasoning test, held ---------- */
.mini-reason{position:absolute;inset:0;padding:5cqw 6cqw;background:linear-gradient(160deg,#123a5c,#0a1733);font-family:var(--sans);color:#fff}
.mr-top{display:flex;justify-content:space-between;align-items:baseline}
.mr-cap{font-size:2.6cqw;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.mr-clock{font-size:5cqw;font-weight:500}
.mr-bar{height:.7cqw;border-radius:1cqw;background:rgba(255,255,255,.18);margin-top:2.2cqw;overflow:hidden}
.mr-bar i{display:block;height:100%;width:69%;background:var(--gold);border-radius:1cqw}
.mr-q{margin-top:6cqw;text-align:center;font-size:3.1cqw;color:rgba(255,255,255,.72)}
.mr-stem{margin-top:1.2cqw;text-align:center;font-size:7.4cqw;font-weight:600;letter-spacing:.04em}
.mr-opts{position:absolute;left:5cqw;right:5cqw;bottom:6cqw;display:grid;grid-template-columns:repeat(5,1fr);gap:1.8cqw}
.mr-opt{display:grid;place-items:center;height:12cqw;border-radius:2.6cqw;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);font-size:3.3cqw}
.mr-opt.hot{border-color:var(--gold);background:rgba(243,180,67,.16);box-shadow:0 0 2.6cqw rgba(243,180,67,.4)}
.mr-orb{position:absolute;left:29%;bottom:9.6cqw;z-index:2;width:7cqw;height:7cqw;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95),rgba(255,255,255,.4) 16%,transparent 42%),radial-gradient(circle at 50% 52%,#fff 0%,#cfd8de 65%);
  box-shadow:0 0 4cqw 1cqw rgba(255,255,255,.28)}
[dir="rtl"] .mr-orb{left:auto;right:29%}
.js .ptile.in .mr-orb{animation:orbReach 3.2s var(--settle) .6s both}
@keyframes orbReach{from{transform:translate(18cqw,-22cqw)}to{transform:none}}
[dir="rtl"] .js .ptile.in .mr-orb{animation-name:orbReachR}
@keyframes orbReachR{from{transform:translate(-18cqw,-22cqw)}to{transform:none}}

/* ---------- miniature: personality pair ---------- */
.mini-pair{position:absolute;inset:0;padding:4cqw 4cqw 0;display:grid;grid-template-columns:1fr 1fr;gap:3cqw;background:linear-gradient(160deg,#123a5c,#0a1733)}
.mini-pair figure{position:relative;border-radius:2.6cqw;overflow:hidden;aspect-ratio:1;border:1px solid rgba(255,255,255,.16)}
.mini-pair img{width:100%;height:100%;object-fit:cover}
.mini-pair figcaption{position:absolute;left:0;right:0;bottom:0;padding:5cqw 2.4cqw 2.2cqw;font-size:2.9cqw;line-height:1.3;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(5,10,24,.88))}
.mp-scale{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;margin:2.6cqw 6cqw 0;position:relative}
.mp-scale::before{content:"";position:absolute;left:0;right:0;top:50%;height:.5cqw;background:rgba(255,255,255,.2);border-radius:1cqw}
.mp-scale i{position:relative;width:4.4cqw;height:4.4cqw;border-radius:50%;background:#0d2747;border:1px solid rgba(255,255,255,.35)}
.mp-scale i.c{border-style:dashed}
.mp-scale i.on{background:var(--gold);border-color:var(--gold);box-shadow:0 0 2.4cqw rgba(243,180,67,.7)}

/* ==========================================================================
   Pair screen and Edge screen (personality page): drag the disk onto a target
   ========================================================================== */
.pscreen{padding:clamp(1rem,2.4vw,1.75rem);max-width:54rem;margin-inline:auto}
.ps-top{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.ps-top .eyebrow{flex:1}
.ps-count{direction:ltr;unicode-bidi:isolate;font:500 .85rem/1 var(--mono);color:var(--on-sec);font-variant-numeric:tabular-nums}
.ps-segs{display:flex;gap:.4rem;margin-bottom:1.1rem}
.ps-segs i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.16);position:relative;overflow:hidden}
.ps-segs i.done{background:var(--gold)}
.ps-segs i.cur{background:rgba(243,180,67,.45)}
.ps-scenario{font-family:var(--serif);font-weight:700;color:#fff;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.35;margin:.2rem 0 1rem}
[dir="rtl"] .ps-scenario{font-family:var(--arabic)}
.ps-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.7rem,1.6vw,1.1rem)}
.ps-card{position:relative;border-radius:1.1rem;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:#081226;aspect-ratio:1;
  transition:border-color .3s,box-shadow .3s,opacity .35s,transform .35s var(--settle)}
.ps-card img{width:100%;height:100%;object-fit:cover;transition:filter .35s}
.ps-card .txt{position:absolute;left:0;right:0;bottom:0;padding:3rem 1rem 1rem;font-size:clamp(.98rem,1.6vw,1.15rem);line-height:1.4;font-weight:500;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(5,10,24,.9) 55%)}
.ps-card.textonly{aspect-ratio:auto;min-height:8.5rem;display:flex;align-items:center;padding:1.2rem 1.25rem;background:var(--tile)}
.ps-card.textonly .txt{position:static;padding:0;background:none;font-size:clamp(1rem,1.6vw,1.12rem)}
.ps-card.lean{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 26px rgba(243,180,67,.35)}
.ps-card.lean.much{transform:translateY(-3px)}
.ps-card.fade{opacity:.72}
.ps-card.fade img{filter:saturate(.6) brightness(.8)}
.ps-edge{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(.8rem,2vw,1.3rem);align-items:start}
.ps-edge .ps-scenario{margin-top:0}
.ps-edge-img{border-radius:1.1rem;overflow:hidden;border:1px solid rgba(255,255,255,.16);aspect-ratio:1}
@media (max-width:700px){ .ps-edge{grid-template-columns:1fr} .ps-edge-img{aspect-ratio:16/10} }
.ps-edge-img img{width:100%;height:100%;object-fit:cover}

.ps-scale{position:relative;margin:1.4rem auto 0;max-width:46rem;padding:0 .5rem;user-select:none;-webkit-user-select:none;touch-action:none}
.ps-rail{position:relative;height:5.2rem}
.ps-rail::before{content:"";position:absolute;left:8%;right:8%;top:2.35rem;height:3px;border-radius:3px;background:rgba(255,255,255,.18)}
.ps-tg{position:absolute;top:1.1rem;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:#0d2747;color:rgba(255,255,255,.75);display:grid;place-items:center;cursor:pointer;padding:0;margin-left:0;margin-inline-start:-1.3rem;transition:border-color .2s,background .2s,color .2s,box-shadow .25s}
.ps-tg svg{width:1.05rem;height:1.05rem}
.ps-tg .two{display:flex;gap:1px}
.ps-tg .two svg{width:.82rem;height:.82rem}
.ps-tg.ctr svg{width:1rem;height:1rem}
.ps-tg:hover{border-color:rgba(255,255,255,.6);color:#fff}
.ps-tg.on{border-color:var(--gold);color:var(--gold);box-shadow:0 0 14px rgba(243,180,67,.55)}
.ps-disk{position:absolute;top:0;width:2.4rem;height:2.4rem;margin-inline-start:-1.2rem;border-radius:50%;z-index:3;cursor:grab;touch-action:none;
  background:radial-gradient(circle at 35% 30%,#fff7e3 0%,#F3B443 45%,#c98f2b 100%);box-shadow:0 8px 20px -6px rgba(0,0,0,.6),0 0 0 4px rgba(243,180,67,.22)}
.ps-disk:active{cursor:grabbing}
.ps-disk:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ps-disk.placed{box-shadow:0 8px 20px -6px rgba(0,0,0,.6),0 0 0 4px rgba(243,180,67,.35),0 0 22px rgba(243,180,67,.6)}
.ps-labels{display:grid;grid-template-columns:repeat(5,1fr);font-size:.8rem;line-height:1.25;color:var(--on-hint);text-align:center;margin-top:-.3rem}
.ps-labels span.on{color:#fff;font-weight:600}
.ps-hint{text-align:center;margin-top:.9rem;font-size:.95rem;color:var(--on-sec);min-height:1.5em}
.ps-hint b{color:#fff}
.ps-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.1rem}
.ps-foot .note{font-size:.88rem;color:var(--on-hint)}
.ps-end{text-align:center;padding:2rem 1rem}
.ps-end .disc{width:4rem;height:4rem;border-radius:50%;background:var(--gold);color:var(--navy);display:grid;place-items:center;margin:0 auto 1.1rem;
  box-shadow:0 0 0 .5rem rgba(243,180,67,.18),0 0 30px rgba(243,180,67,.45)}
.ps-end .disc svg{width:1.8rem;height:1.8rem}
.ps-end h3{font-size:1.5rem;color:#fff}
.ps-end p{margin:.7rem auto 0;max-width:34rem;color:var(--on-body)}
.ps-end .btns{justify-content:center;margin-top:1.3rem}
.pscreen .swapR{animation:swapR .5s var(--settle)}
@keyframes swapR{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
[dir="rtl"] .pscreen .swapR{animation-name:swapL}
@keyframes swapL{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .ps-card .txt{padding:2.2rem .7rem .7rem;font-size:.92rem}
  .ps-labels{font-size:.68rem}
  .ps-tg{width:2.2rem;height:2.2rem;margin-inline-start:-1.1rem;top:1.3rem}
  .ps-disk{width:2.1rem;height:2.1rem;margin-inline-start:-1.05rem}
}

/* ==========================================================================
   The scale model (personality page)
   ========================================================================== */
.model{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media (max-width:1000px){ .model{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .model{grid-template-columns:1fr} }
.factor{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-card);padding:1.25rem 1.3rem 1.3rem}
.factor .fhead{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.factor h3{font-size:1.2rem}
.poles{display:flex;align-items:center;gap:.5rem;margin-top:.55rem;font-size:.88rem;color:var(--ink-quiet)}
.poles i{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--steel-tint),var(--steel))}
[dir="rtl"] .poles i{background:linear-gradient(-90deg,var(--steel-tint),var(--steel))}
.traits{margin-top:1rem;display:grid;gap:.6rem}
.trait{border-top:1px solid var(--hair);padding-top:.7rem}
.trait b{display:block;font-weight:600;font-size:.98rem}
.trait .poles{margin-top:.25rem;font-size:.82rem}
.facets{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.facets span{font-size:.78rem;padding:.2rem .55rem;border-radius:999px;background:var(--plate);border:1px solid var(--hair);color:var(--ink-muted)}
.lvl{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.25rem}
.lvl button{border:1px solid var(--hair-strong);background:var(--paper);border-radius:999px;padding:.5rem 1rem;font-weight:600;cursor:pointer;color:var(--ink-muted)}
.lvl button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.model[data-level="1"] .traits{display:none}
.model[data-level="2"] .facets{display:none}

/* forms of the suite */
.forms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media (max-width:1100px){ .forms{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .forms{grid-template-columns:1fr} }
.form-card{display:flex;flex-direction:column}
.form-card .meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:1rem}

/* needs */
.needs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
@media (max-width:900px){ .needs{grid-template-columns:repeat(2,minmax(0,1fr))} }
.need{padding:.85rem 1rem;border-radius:var(--r-tile);background:var(--paper);border:1px solid var(--hair)}
.need b{display:block;color:var(--ink);font-weight:600}
.need span{display:block;font-size:.88rem;color:var(--ink-quiet);margin-top:.15rem;line-height:1.4}
.dark .need{background:var(--tile);border-color:var(--tile-b)}
.dark .need b{color:#fff}
.dark .need span{color:var(--on-sec)}

/* edge art strip */
.edge-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media (max-width:1000px){ .edge-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .edge-cards{grid-template-columns:1fr} }
.edge-card{position:relative;overflow:hidden;padding:0!important}
.edge-card .art{position:relative;aspect-ratio:16/10;overflow:hidden}
.edge-card .art img{position:absolute;width:118%;max-width:none;left:-9%;top:-12%}
.edge-card .art img.fit{width:100%;height:100%;left:0;top:0;object-fit:cover}
.edge-card .eb{padding:0 1.3rem 1.4rem}
.dark .edge-card h3{margin-top:.3rem}

/* ==========================================================================
   Judgment: silent film cards and the response demonstration
   ========================================================================== */
.clips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
@media (max-width:900px){ .clips{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .clips{grid-template-columns:1fr} }
.clip{margin:0;border-radius:var(--r-card);overflow:hidden;background:var(--paper);border:1px solid var(--hair)}
.clip .cv{position:relative;aspect-ratio:16/9;background:#081226;overflow:hidden}
.clip .cv img,.clip .cv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.clip .cv video{opacity:0;transition:opacity .6s}
.clip .cv.live video{opacity:1}
.clip figcaption{padding:.85rem 1.1rem 1rem;display:flex;flex-direction:column;gap:.15rem}
.clip b{font-family:var(--serif);font-size:1.1rem;color:var(--ink)}
[dir="rtl"] .clip b{font-family:var(--arabic)}
.clip figcaption span{font-size:.92rem;color:var(--ink-quiet)}
.dark .clip{background:var(--glass);border-color:var(--glass-b);box-shadow:0 40px 90px -36px rgba(0,0,0,.9)}
.dark .clip b{color:#fff}
.dark .clip figcaption span{color:var(--on-sec)}
/* the hero reel: one scene at a time, with a segment per scene */
.reel .cv img.rs,.reel .cv video{opacity:0;transition:opacity .6s}
.reel .cv img.rs.on{opacity:1}
.reel .cv video.on.live{opacity:1}
.reel figcaption{flex-direction:row;align-items:center;justify-content:space-between;gap:1rem}
.reel .rc{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.rsegs{display:flex;gap:.4rem;flex:none}
.rseg{position:relative;width:2.4rem;height:.32rem;padding:0;border:0;border-radius:1rem;background:rgba(255,255,255,.2);cursor:pointer;overflow:visible}
.rseg::before{content:"";position:absolute;inset:-.7rem -.15rem}
.rseg b{position:absolute;inset-block:0;inset-inline-start:0;width:0;border-radius:1rem;background:var(--gold)}
.rseg.done b{width:100%}
.rseg.cur{box-shadow:0 0 0 2px #fff}
.rseg:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.clips-note{margin-top:1.4rem;max-width:52rem}

.rd{position:relative;margin-top:clamp(2rem,4vw,3rem)}
.rd-view{position:relative;aspect-ratio:16/9;border-radius:1.4rem;overflow:hidden;background:#050a18;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 100px -40px rgba(0,0,0,.9);container-type:inline-size;color:#fff;isolation:isolate}
@media (max-width:760px){ .rd-view{aspect-ratio:3/4;border-radius:1.1rem} }
.rd-poster,.rd-view video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .6s var(--ease),transform .8s var(--settle),opacity .4s}
.rd-view video{opacity:0}
.rd-view.film video{opacity:1}
.rd-view.blur video,.rd-view.blur .rd-poster{filter:blur(14px) brightness(.6) saturate(1.1);transform:scale(1.06)}
.rd-top{position:absolute;inset-inline:0;top:0;z-index:5;display:flex;align-items:center;gap:clamp(.6rem,1.6cqw,1rem);
  padding:clamp(.7rem,2cqw,1.15rem) clamp(.8rem,2.4cqw,1.4rem) 2rem;padding-inline-end:4.4rem;background:linear-gradient(180deg,rgba(5,10,24,.8),rgba(5,10,24,0))}
.rd-mk{width:clamp(1.6rem,3.4cqw,2.3rem);height:clamp(1.6rem,3.4cqw,2.3rem);color:var(--gold);flex:none}
.rd-mk svg{width:100%;height:100%}
.rd-top .tt{flex:1;min-width:0}
.rd-top .e{display:block;font-size:clamp(.64rem,1.2cqw,.78rem);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
[dir="rtl"] .rd-top .e{letter-spacing:0;font-size:clamp(.72rem,1.3cqw,.85rem)}
.rd-top b{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(1rem,2.1cqw,1.3rem);line-height:1.25}
[dir="rtl"] .rd-top b{font-family:var(--arabic)}
.rd-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:clamp(.66rem,1.2cqw,.8rem);color:rgba(255,255,255,.88);background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:.3rem .7rem;white-space:nowrap}
.rd-badge svg{width:1rem;height:1rem;flex:none}
@container (max-width:520px){ .rd-badge{display:none} }
.rd-play{position:absolute;top:.85rem;inset-inline-end:.95rem;z-index:8}
.rd-play .i-play{display:none}
.rd.held .rd-play .i-play{display:block}
.rd.held .rd-play .i-pause{display:none}
.rd.paused *,.rd.paused *::after{animation-play-state:paused!important}

.rd-caps{position:absolute;left:50%;bottom:clamp(1rem,5cqw,2.6rem);transform:translateX(-50%);width:90%;z-index:4;text-align:center;direction:ltr;pointer-events:none}
.rd-caps .sp{display:block;font-size:clamp(.6rem,1.2cqw,.78rem);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.rd-caps .ln{display:inline;font-family:var(--sans);font-size:clamp(.92rem,2.4cqw,1.4rem);line-height:1.8;color:#fff;background:rgba(5,10,24,.72);padding:.25rem .6rem;
  border-radius:.5rem;-webkit-box-decoration-break:clone;box-decoration-break:clone}
[dir="rtl"] .rd-caps{direction:rtl}
[dir="rtl"] .rd-caps .sp{letter-spacing:0;text-transform:none;font-family:var(--arabic);font-size:clamp(.72rem,1.4cqw,.9rem)}
[dir="rtl"] .rd-caps .ln{font-family:var(--arabic);line-height:2}
[dir="rtl"] .rd-ask .stem,[dir="rtl"] .rd-rate .stmt{font-family:var(--arabic);line-height:1.6}
[dir="rtl"] .rd-intro p{font-family:var(--arabic);line-height:1.85}
.rd-caps .w{color:rgba(255,255,255,.62);border-radius:.3rem;padding:0 .12em;transition:background .12s,color .12s}
.rd-caps .w.past{color:#fff}
.rd-caps .w.now{background:var(--gold);color:var(--navy)}

.rd-pane{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  padding:clamp(3.6rem,9cqw,5.2rem) clamp(.7rem,3cqw,2rem) clamp(.8rem,3cqw,2rem);visibility:hidden;opacity:0;transition:opacity .4s,visibility 0s .4s}
.rd-pane.on{visibility:visible;opacity:1;transition:opacity .45s}
.rd-pane>.glass{width:min(100%,46rem);max-height:100%;overflow:hidden;padding:clamp(1rem,3cqw,1.9rem) clamp(1.1rem,3.4cqw,2.2rem);border-radius:clamp(1rem,2.4cqw,1.6rem);
  transform:translateY(24px);transition:transform .7s var(--settle)}
.rd-pane.on>.glass{transform:none}
.rd-rate,.rd-voice{align-items:flex-end}
.rd-rate>.glass{width:min(100%,60rem)}
.rd-voice>.glass{width:min(100%,50rem)}
.rd-pane .eyebrow{font-size:clamp(.66rem,1.25cqw,.8rem)}
.rd-pane .h{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(1.05rem,2.4cqw,1.5rem);line-height:1.25;margin-top:.35rem;color:#fff}
[dir="rtl"] .rd-pane .h{font-family:var(--arabic)}
.rd-pane .en{text-align:left}
.rd-intro .en{margin-top:.7rem;font-size:clamp(.82rem,1.7cqw,1.05rem);line-height:1.65;color:var(--on-body)}
.rd-ask .stem{margin-top:.6rem;font-family:var(--serif);font-weight:700;font-size:clamp(1rem,2.3cqw,1.45rem);line-height:1.35;color:#fff}
.rd .modes{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.1rem}
.rd-btn{display:inline-flex;align-items:center;gap:.55rem;border-radius:999px;padding:clamp(.45rem,1.1cqw,.62rem) clamp(.8rem,2cqw,1.15rem);font-weight:600;
  font-size:clamp(.78rem,1.5cqw,.98rem);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.26);color:#fff;transition:background .2s,transform .15s,box-shadow .25s}
.rd-btn svg{width:1.1rem;height:1.1rem;flex:none}
.rd-btn.primary{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.rd-btn.press{transform:scale(.95);background:rgba(243,180,67,.32);box-shadow:0 0 0 .3rem rgba(243,180,67,.18)}
.rd-btn.primary.press{background:#ffd27a}
[dir="rtl"] .rd-btn .arw{transform:scaleX(-1)}
.rd .rh{display:flex;align-items:center;gap:1rem}
.rd .rh .eyebrow{white-space:nowrap}
.rdots{display:flex;gap:.4rem;flex:1}
.rdots i{width:clamp(1.4rem,3cqw,2.4rem);height:.3rem;border-radius:1rem;background:rgba(255,255,255,.2);transition:background .25s,box-shadow .25s}
.rdots i.done{background:var(--gold)}
.rdots i.cur{box-shadow:0 0 0 2px #fff}
.rd-rate .stmt{font-family:var(--serif);font-weight:700;color:#fff;font-size:clamp(.98rem,2.15cqw,1.5rem);line-height:1.32;margin-top:.55rem;min-height:2.64em}
.rd-rate .stmt.swap{animation:rdSwap .45s var(--settle)}
@keyframes rdSwap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rd-rate .rq{color:var(--accent-text);font-size:clamp(.76rem,1.4cqw,.95rem);font-weight:600;margin:.7rem 0 .5rem}
.rd .rscale{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.25rem,.9cqw,.55rem)}
.rd .rt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;min-height:clamp(2.7rem,7cqw,4rem);padding:.35rem .25rem;
  border-radius:clamp(.55rem,1.4cqw,1rem);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.9);
  font:600 clamp(.6rem,1.3cqw,.92rem)/1.15 var(--sans);text-align:center;transition:background .2s,border-color .2s,color .2s,box-shadow .25s,transform .15s}
[dir="rtl"] .rd .rt{font-family:var(--arabic)}
.rd .rt .n{font:500 .8em/1 var(--mono);opacity:.7}
.rd .rt.sel{background:var(--gold);border-color:var(--gold);color:var(--navy);box-shadow:0 0 14px rgba(243,180,67,.6)}
.rd .rt.press{transform:scale(.95)}
.rd .rfoot{display:flex;justify-content:flex-end;margin-top:clamp(.5rem,1.4cqw,.9rem)}
@container (max-width:560px){ .rd-rate .rq{display:none} .rd .rt{min-height:3rem} }

.rd-voice>.glass{padding:clamp(.9rem,2.4cqw,1.5rem) clamp(1rem,2.8cqw,1.8rem)}
.rd-voice .vq{margin-top:.35rem;font-family:var(--serif);font-weight:700;color:#fff;font-size:clamp(.86rem,1.75cqw,1.12rem);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
[dir="rtl"] .rd-voice .vq{font-family:var(--arabic);line-height:1.6}
.rd .vbtns{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:clamp(.5rem,1.3cqw,.8rem)}
.rd-btn.sm{padding:clamp(.3rem,.8cqw,.42rem) clamp(.6rem,1.5cqw,.85rem);font-size:clamp(.7rem,1.3cqw,.84rem);gap:.4rem}
.rd-btn.sm svg{width:.95rem;height:.95rem}
.rd .eq{display:none;align-items:flex-end;gap:2px;height:.8rem}
.rd .eq i{width:2px;height:30%;border-radius:1px;background:var(--gold);animation:rdEq .7s ease-in-out infinite alternate}
.rd .eq i:nth-child(2){animation-delay:.15s}.rd .eq i:nth-child(3){animation-delay:.3s}.rd .eq i:nth-child(4){animation-delay:.45s}
@keyframes rdEq{to{height:100%}}
.rd .v-hear.on{border-color:rgba(243,180,67,.7);background:rgba(243,180,67,.14)}
.rd .v-hear.on .eq{display:inline-flex}
.rd .v-mic .sq{display:none;width:.62rem;height:.62rem;border-radius:2px;background:var(--gold);flex:none}
.rd .v-mic.live{border-color:var(--gold);background:rgba(243,180,67,.16);box-shadow:0 0 0 .2rem rgba(243,180,67,.14)}
.rd .v-mic.live svg{display:none}
.rd .v-mic.live .sq{display:block;animation:rdBlink 1.1s ease-in-out infinite}
.rd .vbox{margin-top:clamp(.5rem,1.3cqw,.75rem);height:calc(4 * 1.55em + 1.1rem);overflow:hidden;padding:.55rem .8rem;border-radius:.75rem;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);font-size:clamp(.74rem,1.55cqw,.98rem);transition:border-color .3s,box-shadow .3s}
.rd .vbox{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 .7rem);mask-image:linear-gradient(180deg,transparent 0,#000 .7rem)}
.rd .vbox.live{border-color:rgba(243,180,67,.75);box-shadow:0 0 0 .2rem rgba(243,180,67,.12)}
.rd .vbox .tx{line-height:1.55;color:#fff;margin:0}
[dir="rtl"] .rd .vbox .tx{font-family:var(--arabic);line-height:1.7}
.rd .vbox .w{display:none}
.rd .vbox .w.on{display:inline}
.rd .vbox .caret{display:none;width:2px;height:1.05em;background:var(--gold);vertical-align:text-bottom;margin-inline-start:2px;animation:rdBlink 1s steps(1) infinite}
.rd .vbox.live .caret{display:inline-block}
@keyframes rdBlink{50%{opacity:0}}
.rd .vlen{margin-top:clamp(.45rem,1.2cqw,.7rem)}
.rd .segs{display:flex;gap:4px}
.rd .segs i{position:relative;flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.rd .segs b{position:absolute;inset-block:0;inset-inline-start:0;width:0;border-radius:3px;transition:width .2s linear}
.rd .z0 b{background:#F3B443}.rd .z1 b{background:#5E9DBA}.rd .z2 b{background:#5FB08A}.rd .z3 b{background:#B9707A}
.rd .labs{display:grid;grid-template-columns:repeat(4,1fr);margin-top:.3rem;font:500 clamp(.52rem,1cqw,.66rem)/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.42);text-align:center}
[dir="rtl"] .rd .labs{font-family:var(--arabic);letter-spacing:0;text-transform:none;font-size:clamp(.6rem,1.1cqw,.74rem)}
.rd .labs .on.z0{color:#F3B443}.rd .labs .on.z1{color:#7FB6CF}.rd .labs .on.z2{color:#7CC7A2}.rd .labs .on.z3{color:#D08A93}
.rd .vstat{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-top:.45rem;font-size:clamp(.68rem,1.3cqw,.84rem)}
.rd .msg{display:flex;align-items:flex-start;gap:.4rem;color:var(--on-body)}
.rd .msg svg{width:.95rem;height:.95rem;flex:none;margin-top:.1em}
.rd .msg .i-ok{display:none}
.rd .msg.m2 .i-pen,.rd .msg.m3 .i-pen,.rd .msg.m4 .i-pen{display:none}
.rd .msg.m2 .i-ok,.rd .msg.m3 .i-ok,.rd .msg.m4 .i-ok{display:block}
.rd .msg.m1{color:#F3B443}.rd .msg.m2{color:#F3B443}.rd .msg.m3{color:#7CC7A2}.rd .msg.m4{color:#D08A93}
.rd .cnt{white-space:nowrap;color:rgba(255,255,255,.72)}
.rd .cnt b{color:#fff;font-weight:500}
.rd .vfoot{display:flex;align-items:center;justify-content:space-between;margin-top:clamp(.5rem,1.3cqw,.8rem)}
.rd .vback{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.7)}
.rd .vback svg{width:1rem;height:1rem}
[dir="rtl"] .rd .vback svg{transform:scaleX(-1)}
.rd .v-sub{transition:opacity .3s,background .2s,transform .15s}
.rd .v-sub.off{opacity:.38;filter:saturate(.4)}
@container (max-width:560px){ .rd .vbox{height:calc(3 * 1.55em + 1rem)} .rd-voice .vq{-webkit-line-clamp:4;font-size:.84rem} .rd .labs{font-size:.5rem;letter-spacing:.04em} }
.rd-end>.glass{width:min(100%,34rem);text-align:center}
.rd-end .disc{width:clamp(2.8rem,6cqw,4rem);height:clamp(2.8rem,6cqw,4rem);border-radius:50%;background:var(--gold);color:var(--navy);display:grid;place-items:center;margin:0 auto .9rem;
  box-shadow:0 0 0 .5rem rgba(243,180,67,.18),0 0 30px rgba(243,180,67,.45)}
.rd-end .disc svg{width:45%;height:45%}
.rd-end p{margin-top:.5rem;color:var(--on-body);font-size:clamp(.84rem,1.6cqw,1rem)}

.rd-cursor{position:absolute;left:0;top:0;z-index:7;width:clamp(1.3rem,2.5cqw,1.8rem);opacity:0;pointer-events:none;
  transition:transform .75s var(--ease),opacity .3s;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.rd-cursor svg{display:block;width:100%;height:auto;fill:#fff;stroke:#0B1733;stroke-width:1.3;stroke-linejoin:round}
.rd-cursor.on{opacity:1}
.rd-cursor.jump{transition:opacity .3s}
.rd-cursor::after{content:"";position:absolute;left:-30%;top:-25%;width:110%;aspect-ratio:1;border-radius:50%;background:rgba(243,180,67,.6);transform:scale(0);opacity:0}
.rd-cursor.tap::after{animation:rdTap .45s ease-out}
@keyframes rdTap{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.7);opacity:0}}

.rd-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.4rem,1vw,.7rem);margin-top:clamp(2rem,4vw,3rem)}
.rd-steps+.rd{margin-top:1rem}
.rd-steps button{display:flex;flex-direction:column;align-items:stretch;gap:.6rem;padding:0;background:none;border:0;cursor:pointer;color:var(--on-sec);
  font:600 .92rem/1.25 var(--sans);text-align:start}
[dir="rtl"] .rd-steps button{font-family:var(--arabic)}
.rd-steps .trk{position:relative;display:block;height:4px;border-radius:4px;background:rgba(255,255,255,.16);overflow:hidden}
.rd-steps .trk i{position:absolute;inset-block:0;inset-inline-start:0;width:0;border-radius:4px;background:var(--gold)}
.rd-steps .lb{display:flex;align-items:baseline;gap:.55rem}
.rd-steps .n{font-size:.78rem;color:rgba(255,255,255,.45);letter-spacing:.06em}
.rd-steps button:hover{color:#fff}
.rd-steps button[aria-current="step"]{color:#fff}
.rd-steps button[aria-current="step"] .n{color:var(--accent-text)}
@media (max-width:560px){ .rd-steps button{font-size:.78rem} .rd-steps .n{display:none} }
@media (prefers-reduced-motion:reduce){ .rd-pane>.glass{transform:none!important;transition:none} .rd-cursor{transition:none} .rd-poster,.rd-view video{transition:none} }

/* icon button on a dark ground */
.ibtn{width:2.75rem;height:2.75rem;border-radius:999px;display:grid;place-items:center;padding:0;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:background .2s}
.ibtn:hover{background:rgba(255,255,255,.22)}
.ibtn svg{width:1.2rem;height:1.2rem}

/* My Path screens */
.phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
@media (max-width:900px){ .phones{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .phones{grid-template-columns:1fr} }
.phone-card{padding:0!important;overflow:hidden}
.phone-card img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 20%}
.phone-card .pb{padding:1rem 1.2rem 1.25rem}

/* integration flow */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:1rem;align-items:stretch}
.flow .arrow{display:grid;place-items:center;color:var(--accent-text)}
.flow .arrow svg{width:1.6rem;height:1.6rem}
[dir="rtl"] .flow .arrow svg{transform:scaleX(-1)}
@media (max-width:900px){ .flow{grid-template-columns:1fr} .flow .arrow svg{transform:rotate(90deg)} [dir="rtl"] .flow .arrow svg{transform:rotate(90deg)} }

/* the five method steps, larger */
.method{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
@media (max-width:1100px){ .method{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .method{grid-template-columns:1fr} }
.method .gcard .when{display:block;font:500 .78rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);margin-top:.8rem}
[dir="rtl"] .method .gcard .when{font-family:var(--arabic);text-transform:none}
.method .gcard.last{border-color:rgba(243,180,67,.55);box-shadow:0 0 0 1px rgba(243,180,67,.25),0 24px 60px -34px rgba(0,0,0,.9)}

/* contest and privacy: long-form rules */
.rules{counter-reset:r;display:grid;gap:1rem}
.rule{display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;padding:1.3rem 1.4rem;background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-card)}
.rule .rn{font:500 1rem/1.6 var(--mono);color:var(--steel)}
.rule h3{font-size:1.15rem}
.rule p,.rule li{color:var(--ink-muted);margin-top:.5rem}
.rule ul{margin:.4rem 0 0;padding-inline-start:1.2rem}
.prose{max-width:46rem}
.prose h2{font-size:1.5rem;margin-top:2.2rem}
.prose p,.prose li{color:var(--ink-muted);margin-top:.8rem}
.prose ul{padding-inline-start:1.2rem}
.prose a{color:var(--steel)}
.crit{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
@media (max-width:1000px){ .crit{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .crit{grid-template-columns:1fr} }
.crit .gcard b.w{display:block;font:500 1.6rem/1 var(--mono);color:var(--gold);margin-top:.9rem}
.mini-reason.released .mr-orb{animation:none!important}

.dark .pager a{background:var(--tile);border-color:var(--tile-b);color:#fff}
.dark .pager a:hover{border-color:rgba(243,180,67,.6)}
.dark .pager a .small{color:var(--on-sec)}

/* ==========================================================================
   How we build it: Pseudo Factor Analysis against the empirical factor analysis (embedded chart)
   ========================================================================== */
.figure.ck{margin-top:clamp(2.2rem,4.5vw,3.2rem);overflow:visible}
.ck-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.6rem,4vw,3.5rem);padding:clamp(1.2rem,3vw,2rem) clamp(1rem,3vw,2.2rem) .6rem}
@media (max-width:820px){ .ck-panels{grid-template-columns:1fr} }
.ck-panel{position:relative;min-width:0}
.ck-head h3{font-size:1.2rem;line-height:1.2;margin:0}
.ck-measure{display:block;margin-top:.3rem;font:500 .72rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-quiet)}
[dir="rtl"] .ck-measure{font-family:var(--arabic);letter-spacing:0;text-transform:none;font-size:.85rem}
.ck-legend{display:flex;flex-wrap:wrap;gap:.35rem .5rem;margin:.8rem 0 .2rem}
.ck-key{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .65rem;border-radius:999px;border:1px solid var(--hair);background:none;cursor:pointer;
  font:500 .86rem/1.2 var(--sans);color:var(--ink);transition:background .15s,opacity .15s}
[dir="rtl"] .ck-key{font-family:var(--arabic)}
.ck-key:hover{background:var(--plate)}
.ck-key i{width:.8rem;height:.8rem;border-radius:2px;flex:none}
.ck-key.s0 i{background:#0B1733}.ck-key.s1 i{background:#F3B443}
.ck-key[aria-pressed="false"]{opacity:.45}
.ck-key[aria-pressed="false"] i{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.ck-plot{position:relative;width:100%}
.ck-plot svg{display:block;overflow:visible}
.ck-grid{stroke:#E6E8E3;stroke-width:1}
.ck-base{stroke:#9AA3A8;stroke-width:1}
.ck-tick{font:400 11px var(--mono);fill:var(--ink-quiet);font-variant-numeric:tabular-nums}
.ck-cat{font:600 12px var(--sans);fill:var(--ink)}
.ck-sub{font:400 11px var(--mono);fill:var(--ink-quiet)}
[dir="rtl"] .ck-cat{font-family:var(--arabic);font-size:12.5px}
[dir="rtl"] .ck-sub{font-family:var(--arabic);font-size:11.5px}
.ck-val{font:500 11px var(--mono);fill:var(--ink);font-variant-numeric:tabular-nums}
.ck-val,.ck-tick{direction:ltr;unicode-bidi:embed}
@media (max-width:480px){ .ck-cat,[dir="rtl"] .ck-cat{font-size:10.5px} .ck-sub,[dir="rtl"] .ck-sub{font-size:10px} .ck-val{font-size:10px} }
.ck-bar.s0{fill:#0B1733}.ck-bar.s1{fill:#F3B443}
.ck-g{transition:opacity .15s}
.ck-g.dim{opacity:.32}
.ck-hit{fill:transparent;cursor:default}
.ck-hit.on{fill:rgba(11,23,51,.045)}
.ck-a11y{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ck-a11y button{position:absolute}
.ck-tip{position:absolute;z-index:5;min-width:12rem;max-width:17rem;padding:.65rem .8rem .7rem;border-radius:.6rem;background:#fff;border:1px solid var(--hair);
  box-shadow:0 14px 34px -14px rgba(11,23,51,.45);pointer-events:none;font-size:.86rem;line-height:1.35}
.ck-tip-h{font-weight:600;color:var(--ink)}
.ck-tip-n{color:var(--ink-quiet);font-size:.8rem;margin:.15rem 0 .45rem}
.ck-tip-r{display:flex;align-items:center;gap:.5rem;margin-top:.2rem}
.ck-tip-r i{width:.9rem;height:3px;border-radius:2px;flex:none}
.ck-tip-r i.s0{background:#0B1733}.ck-tip-r i.s1{background:#F3B443}
.ck-tip-r b{font:600 .95rem/1 var(--mono);color:var(--ink);min-width:2.6rem;direction:ltr;unicode-bidi:isolate}
.ck-tip-r span{color:var(--ink-muted)}
[dir="rtl"] .ck-tip{font-family:var(--arabic)}
.ck-tables{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 3rem;padding:.4rem clamp(1rem,3vw,2.2rem) 1.2rem}
.ck-tables[hidden]{display:none!important}
@media (max-width:820px){ .ck-tables{grid-template-columns:1fr} }
.ck-table{width:100%;border-collapse:collapse;font-size:.88rem}
.ck-table caption{text-align:start;font-family:var(--serif);font-weight:700;font-size:.98rem;padding-bottom:.5rem;color:var(--ink)}
[dir="rtl"] .ck-table caption{font-family:var(--arabic)}
.ck-table th,.ck-table td{padding:.42rem .5rem;border-bottom:1px solid var(--hair);text-align:start}
.ck-table thead th{font:500 .68rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-quiet);border-bottom:1px solid var(--ink)}
[dir="rtl"] .ck-table thead th{font-family:var(--arabic);letter-spacing:0;text-transform:none;font-size:.8rem}
.ck-table td{font-family:var(--mono);text-align:right;direction:ltr;font-variant-numeric:tabular-nums}
.ck-table tbody th{font-weight:600}
.figure.ck figcaption{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.ck-toggle{border:1px solid var(--hair);background:none;border-radius:999px;padding:.35rem .8rem;font:600 .82rem/1.2 var(--sans);color:var(--steel,#0F4F6E);cursor:pointer}
[dir="rtl"] .ck-toggle{font-family:var(--arabic)}
.ck-toggle:hover{background:var(--plate)}

/* ==========================================================================
   Personality, the evidence: what a language model produces when told to fake (embedded line chart)
   ========================================================================== */
.figure.fk{margin-top:0}
.fk-wrap{position:relative;padding:clamp(1.1rem,2.6vw,1.6rem) clamp(1rem,2.6vw,1.6rem) .4rem}
.fk .ck-head h3{font-size:1.12rem}
.fk-key .fk-sh{width:.95rem;height:.95rem;flex:none}
.fk-sh.s0{fill:#0B1733}.fk-sh.s1{fill:#F3B443}.fk-sh.s2{fill:#0F4F6E}.fk-sh.s3{fill:#2F6F4F}
.fk-key[aria-pressed="false"] .fk-sh{fill:none;stroke:currentColor;stroke-width:1.5}
.fk-plot{margin-top:.5rem}
.fk-band{fill:transparent;transition:fill .12s}
.fk-band.on{fill:rgba(11,23,51,.045)}
.fk-lab .ck-cat{fill:var(--ink-quiet);font-weight:500;transition:fill .12s}
.fk-lab.on .ck-cat{fill:var(--ink);font-weight:600}
.fk-lab.abbr .ck-cat{font:500 11px var(--mono);letter-spacing:.06em}
.fk-mean{stroke:#515D63;stroke-width:1.2;stroke-dasharray:1.5 3.5;stroke-linecap:round}
.fk-mean-l{font:400 11px var(--sans);fill:var(--ink-quiet)}
[dir="rtl"] .fk-mean-l{font-family:var(--arabic);font-size:11.5px}
.fk-s{transition:opacity .15s}
.fk-s.dim{opacity:.16}
.fk-l{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.fk-l.s0{stroke:#0B1733}.fk-l.s1{stroke:#F3B443}.fk-l.s2{stroke:#0F4F6E}.fk-l.s3{stroke:#2F6F4F}
.fk-m{stroke:#fff;stroke-width:1.6;paint-order:stroke}
.fk-m.s0{fill:#0B1733}.fk-m.s1{fill:#F3B443}.fk-m.s2{fill:#0F4F6E}.fk-m.s3{fill:#2F6F4F}
.fk-ann text{font:400 12px var(--sans);fill:var(--ink-muted)}
[dir="rtl"] .fk-ann text{font-family:var(--arabic);font-size:12px}
.fk-arrow{fill:none;stroke:#515D63;stroke-width:1.2}
.fk-head{fill:#515D63}
.fk-abbr{margin:.3rem 0 0;font-size:.78rem;line-height:1.5;color:var(--ink-quiet)}
.fk-abbr b{font:500 .72rem var(--mono);letter-spacing:.06em;color:var(--ink)}
.fk-abbr span{white-space:nowrap}
.fk-read{margin-top:.9rem;border-top:1px solid var(--ink);padding-top:.7rem}
.fk-read-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.fk-fac{font-family:var(--serif);font-weight:700;font-size:1.02rem;color:var(--ink)}
[dir="rtl"] .fk-fac{font-family:var(--arabic)}
.fk-hint{font:400 .7rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-quiet)}
[dir="rtl"] .fk-hint{font-family:var(--arabic);letter-spacing:0;text-transform:none;font-size:.8rem}
.fk-rows{list-style:none;margin:.45rem 0 0;padding:0}
.fk-rows li{display:grid;grid-template-columns:1rem 2.9rem minmax(0,1fr);align-items:center;gap:.1rem .55rem;padding:.4rem 0;border-bottom:1px solid var(--hair);
  font-size:.88rem;line-height:1.3;transition:opacity .15s}
.fk-rows li[hidden]{display:none}
.fk-rows li.dim{opacity:.35}
.fk-rows .fk-sh{width:1rem;height:1rem}
.fk-rows b{font:600 .95rem/1 var(--mono);color:var(--ink);direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.fk-rows span{color:var(--ink-muted)}
.fk-rows em{grid-column:3;font-style:normal;font:400 .76rem/1.2 var(--mono);color:var(--ink-quiet);font-variant-numeric:tabular-nums}
.fk-rows .fk-sh{grid-row:1}
.fk-d{unicode-bidi:isolate}
[dir="rtl"] .fk-rows em{font-family:var(--arabic);font-size:.8rem}
.fk-rows li.big em{color:var(--ink);font-weight:600}
.fk .ck-tables{grid-template-columns:1fr}
.fk-note{display:block;margin-top:.45rem;font-size:.82rem;color:var(--ink-quiet)}
@media (min-width:900px){
  .fk-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,21rem);column-gap:clamp(1.8rem,3.5vw,3rem);align-items:start}
  .fk-wrap>.ck-head,.fk-wrap>.ck-legend{grid-column:1/-1}
  .fk-plot,.fk-abbr{grid-column:1}
  .fk-read{grid-column:2;grid-row:3;margin-top:.6rem}
  .fk-read-h{display:block}
  .fk-hint{display:block;margin-top:.35rem}
}
.fk figcaption>span{max-width:50rem}
.fk-table thead th+th{text-align:right}
/* homepage Personality card: one pictured statement, as the candidate sees it */
.pt-photo{object-position:50% 38%}
.pt-stmt{position:absolute;left:0;right:0;bottom:0;padding:2.6rem 1.1rem .9rem;color:#fff;font:600 1.02rem/1.3 var(--sans);
  background:linear-gradient(to top,rgba(5,12,28,.88),rgba(5,12,28,.55) 55%,transparent);text-shadow:0 1px 8px rgba(0,0,0,.4)}
[dir="rtl"] .pt-stmt{font-family:var(--arabic);font-size:1.06rem}