/*
 * Bayan Write Experience v1.3.0
 * Human Editorial System
 * Presentation only. No product logic, identity, billing or writing-state changes.
 */

@view-transition { navigation: auto; }
::view-transition-old(root){animation:wn-page-out .22s ease both}
::view-transition-new(root){animation:wn-page-in .46s cubic-bezier(.2,.8,.2,1) both}
@keyframes wn-page-out{to{opacity:.72;filter:blur(2px);transform:translateY(-3px)}}
@keyframes wn-page-in{from{opacity:0;filter:blur(4px);transform:translateY(8px)}to{opacity:1;filter:none;transform:none}}

:root{
  --bayan-violet:#797EF6;
  --bayan-gold:#EABF4B;
  --bayan-teal:#2DD4BF;
  --bayan-paper:#F3EFE6;
  --bayan-paper-2:#FBFAF7;
  --bayan-ink:#111111;
  --bayan-muted:#706C65;
  --bayan-line:rgba(17,17,17,.12);
  --bayan-soft-violet:rgba(121,126,246,.11);
  --bayan-soft-gold:rgba(234,191,75,.12);
  --wn-pointer-x:50vw;
  --wn-pointer-y:24vh;
}

body.wn-public{
  background:
    radial-gradient(720px circle at var(--wn-pointer-x) var(--wn-pointer-y),rgba(121,126,246,.045),transparent 62%),
    var(--bayan-paper);
}
body.wn-public::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.72;
  background-image:linear-gradient(rgba(17,17,17,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,17,.014) 1px,transparent 1px);
  background-size:54px 54px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 72%);
}

/* Header becomes a calm writing toolbar instead of a SaaS navbar. */
.site-head{
  width:min(1480px,calc(100% - 28px));
  margin:10px auto 0;
  border:1px solid transparent;
  border-radius:22px;
  background:rgba(243,239,230,.72);
  backdrop-filter:blur(16px) saturate(118%);
  transition:background .28s ease,border-color .28s ease,box-shadow .28s ease,transform .28s ease;
}
.site-head.is-scrolled{
  background:rgba(251,250,247,.92);
  border-color:rgba(17,17,17,.085);
  box-shadow:0 16px 44px rgba(31,26,18,.08);
  transform:translateY(2px);
}
.site-head .brand .mark{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.site-head .brand:hover .mark{transform:rotate(-2deg) translateY(-1px)}
html[dir="rtl"] .site-head .brand:hover .mark{transform:rotate(2deg) translateY(-1px)}

.wn-main-nav>a,.wn-nav-drop>summary,.head-actions .text-link{
  position:relative;text-transform:none;letter-spacing:0;
}
.wn-main-nav>a::after,.wn-nav-drop>summary::after,.head-actions .text-link::after{
  content:"";position:absolute;left:12%;right:12%;bottom:-8px;height:2px;border-radius:999px;
  background:linear-gradient(90deg,var(--bayan-violet),var(--bayan-gold));
  transform:scaleX(0);transform-origin:center;transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.wn-main-nav>a:hover::after,.wn-main-nav>a.is-current::after,.wn-nav-drop:hover>summary::after,.wn-nav-drop.is-current>summary::after,.head-actions .text-link:hover::after{transform:scaleX(1)}
.wn-main-nav .wn-mega{
  border:1px solid rgba(17,17,17,.09);border-radius:24px;
  background:rgba(251,250,247,.97);box-shadow:0 34px 80px rgba(31,26,18,.14);
  transform-origin:50% 0;
}
.wn-nav-drop[open] .wn-mega{animation:wn-paper-open .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes wn-paper-open{from{opacity:0;transform:translateY(-7px) scale(.985);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.wn-mega .mega-kicker{font-size:12px;letter-spacing:.02em;text-transform:none;color:#8A847A}
.wn-mega a{border-radius:14px;transition:background .2s ease,transform .2s ease}
.wn-mega a:hover{background:rgba(121,126,246,.06);transform:translateY(-1px)}
.wn-mega a small{line-height:1.6}
.head-actions .pill{border-radius:999px;box-shadow:0 8px 24px rgba(17,17,17,.08);transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.head-actions .pill:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(17,17,17,.13)}
.wn-scroll-progress{overflow:hidden;border-radius:999px}
.wn-scroll-progress i{background:linear-gradient(90deg,var(--bayan-violet),var(--bayan-gold),var(--bayan-teal));box-shadow:0 0 14px rgba(121,126,246,.3)}

/* Breadcrumb becomes a quiet reading trail. */
.wn-page-locus{border:0;background:transparent;margin-top:18px}
.wn-page-locus .shell{gap:10px;color:#777168;font-size:13px}
.wn-page-locus i{opacity:.4}
.wn-locus-map{border-bottom:1px solid rgba(17,17,17,.16);padding-bottom:2px}

/* New route introductions. They speak before they classify. */
.wn-human-page-intro{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(78px,10vw,148px) 0 clamp(54px,8vw,104px);
}
.wn-human-page-intro::before{
  content:"";position:absolute;width:min(46vw,680px);aspect-ratio:1;border-radius:50%;z-index:-2;
  inset-inline-end:-12vw;top:-20%;background:radial-gradient(circle,rgba(121,126,246,.17),rgba(121,126,246,.045) 42%,transparent 70%);filter:blur(2px);
  animation:wn-breathe 9s ease-in-out infinite alternate;
}
.wn-human-page-intro::after{
  content:"";position:absolute;width:min(29vw,420px);aspect-ratio:1;border-radius:50%;z-index:-2;
  inset-inline-start:8vw;bottom:-45%;background:radial-gradient(circle,rgba(234,191,75,.16),transparent 68%);filter:blur(3px);
  animation:wn-breathe 12s ease-in-out 1.4s infinite alternate-reverse;
}
@keyframes wn-breathe{to{transform:translate3d(16px,-9px,0) scale(1.05)}}
.wn-human-page-intro .wn-human-intro-inner{max-width:980px;position:relative}
.wn-human-page-intro h1{
  margin:0;max-width:950px;font-size:clamp(46px,6.8vw,92px);line-height:1.08;letter-spacing:-.045em;font-weight:590;text-wrap:balance;
}
html[lang="ar"] .wn-human-page-intro h1{font-family:var(--ar-display);letter-spacing:-.035em;line-height:1.35;font-weight:600}
.wn-human-page-intro .wn-human-lead{max-width:760px;margin:34px 0 0;font-size:clamp(18px,2vw,23px);line-height:1.95;color:#45413B}
.wn-human-page-intro .wn-human-lead p{margin:0 0 12px}
.wn-human-page-intro .wn-human-note{display:inline-flex;align-items:center;gap:9px;margin-top:24px;padding:10px 14px;border:1px solid rgba(17,17,17,.09);border-radius:999px;background:rgba(251,250,247,.7);font-size:13px;color:#69635B}
.wn-human-page-intro .wn-human-note::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--bayan-violet);box-shadow:0 0 0 5px rgba(121,126,246,.08)}
.wn-human-thread{position:absolute;inset-inline-end:0;bottom:-14px;width:min(440px,36vw);height:90px;opacity:.85;pointer-events:none}
.wn-human-thread i{position:absolute;height:1px;border-radius:999px;background:linear-gradient(90deg,transparent,var(--bayan-violet),var(--bayan-gold),transparent);transform-origin:100% 50%}
.wn-human-thread i:nth-child(1){width:100%;top:18px;transform:rotate(-3deg)}
.wn-human-thread i:nth-child(2){width:72%;top:45px;inset-inline-end:12%;transform:rotate(2deg);opacity:.6}
.wn-human-thread i:nth-child(3){width:44%;top:68px;inset-inline-end:31%;opacity:.42}

/* Old promotional hero stays in the package for backward compatibility but no longer competes with the human intro. */
.route-features .wn-capability-hero,
.route-teams main>.page-hero,
.route-download main>.page-hero,
.route-privacy main>.page-hero,
.route-terms main>.page-hero,
.route-support main>.page-hero{display:none!important}

/* Preserve the expressive route artwork, but let the new human introduction carry the copy. */
.route-arabic main>.wn-arabic-hero,
.route-palestinian main>.wn-arabic-hero,
.route-heritage main>.wn-arabic-hero,
.route-workshop main>.wn-arabic-hero{
  display:block!important;min-height:0!important;padding:0 0 clamp(56px,8vw,104px)!important;background:transparent!important;border-bottom:0!important;
}
.route-arabic main>.wn-arabic-hero .wn-arabic-hero-grid,
.route-palestinian main>.wn-arabic-hero .wn-arabic-hero-grid,
.route-heritage main>.wn-arabic-hero .wn-arabic-hero-grid,
.route-workshop main>.wn-arabic-hero .wn-arabic-hero-grid{
  display:block!important;width:min(920px,100%);margin-inline:auto;
}
.route-arabic main>.wn-arabic-hero .wn-arabic-hero-copy,
.route-palestinian main>.wn-arabic-hero .wn-arabic-hero-copy,
.route-heritage main>.wn-arabic-hero .wn-arabic-hero-copy,
.route-workshop main>.wn-arabic-hero .wn-arabic-hero-copy{display:none!important}
.route-arabic main>.wn-arabic-hero .wn-arabic-institution,
.route-palestinian main>.wn-arabic-hero .wn-arabic-institution,
.route-heritage main>.wn-arabic-hero .wn-arabic-institution,
.route-workshop main>.wn-arabic-hero .wn-arabic-institution{
  min-height:clamp(320px,40vw,480px);width:100%;margin:0 auto;border-radius:32px;
  transform:rotate(-.35deg);box-shadow:0 34px 90px rgba(31,26,18,.09);
}
html[dir="rtl"] .route-arabic main>.wn-arabic-hero .wn-arabic-institution,
html[dir="rtl"] .route-palestinian main>.wn-arabic-hero .wn-arabic-institution,
html[dir="rtl"] .route-heritage main>.wn-arabic-hero .wn-arabic-institution,
html[dir="rtl"] .route-workshop main>.wn-arabic-hero .wn-arabic-institution{transform:rotate(.35deg)}

.route-mobile main>.wn-mobile-hero{display:block!important;min-height:0!important;padding:0 0 clamp(62px,8vw,108px)!important;background:transparent!important}
.route-mobile main>.wn-mobile-hero .wn-mobile-copy{display:none!important}
.route-mobile main>.wn-mobile-hero .wn-mobile-hero-grid{display:block!important;width:min(560px,100%);margin-inline:auto}
.route-mobile main>.wn-mobile-hero .wn-phone-stage{width:100%;display:grid;place-items:center}

/* Pricing keeps its live state but loses the staged sales-language feel. */
.route-pricing .wn-price-hero{padding-top:40px}
.route-pricing .wn-price-hero .eyebrow,.route-pricing .wn-pricing-stage-head .eyebrow{display:none}
.route-pricing .wn-price-hero h1{font-size:clamp(34px,5vw,64px);font-weight:580;letter-spacing:-.04em}
.route-pricing .wn-price-hero h1 em{font-style:normal;color:inherit}
.route-pricing .wn-price-note-path{display:none}
.route-pricing .wn-price-trust{gap:10px;flex-wrap:wrap}
.route-pricing .wn-price-trust span{border:1px solid rgba(17,17,17,.08);background:rgba(255,255,255,.45);border-radius:999px;padding:8px 12px}

/* Less label-first, more reading-first. */
main .eyebrow{font-size:12px;letter-spacing:.02em;text-transform:none;color:#7B756B}
html[lang="en"] main .eyebrow{text-transform:none;letter-spacing:.01em}
main section:not(.wn-gaza-hero) .eyebrow{opacity:.78}
.section-heading h2,.wn-pricing-stage-head h2{letter-spacing:-.035em;text-wrap:balance}
html[lang="ar"] .section-heading h2,html[lang="ar"] .wn-pricing-stage-head h2{font-family:var(--ar-display);line-height:1.45}

/* Existing cards become pieces of paper, not a feature wall. */
.feature-library,.teams-grid,.privacy-list,.download-grid,.wn-mobile-feature-grid,.wn-arabic-lens-grid,.wn-arabic-pack-grid,.wn-arabic-world-grid,.wn-arabic-workshop-grid{
  gap:clamp(14px,2vw,24px)!important;
}
.feature-library article,.teams-grid article,.privacy-list article,.download-grid article,.wn-mobile-feature-grid article,.wn-arabic-lens-grid article,.wn-arabic-pack-grid article,.wn-arabic-world-grid article,.wn-arabic-workshop-grid article{
  border-color:rgba(17,17,17,.09)!important;
  box-shadow:0 12px 34px rgba(31,26,18,.045)!important;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,border-color .32s ease!important;
}
.feature-library article:hover,.teams-grid article:hover,.download-grid article:hover,.wn-mobile-feature-grid article:hover,.wn-arabic-lens-grid article:hover,.wn-arabic-pack-grid article:hover,.wn-arabic-world-grid article:hover,.wn-arabic-workshop-grid article:hover{
  transform:translateY(-4px)!important;border-color:rgba(121,126,246,.22)!important;box-shadow:0 22px 52px rgba(31,26,18,.08)!important;
}
.privacy-list article:hover{transform:none!important}
.privacy-list article>span,.teams-grid article>span,.wn-mobile-feature-grid article>span,.wn-arabic-lens-grid article>span,.wn-arabic-world-grid article>span{font-variant-numeric:tabular-nums;opacity:.42}

/* Human route text inserts. */
.wn-human-bridge{width:min(980px,calc(100% - 44px));margin:0 auto clamp(56px,8vw,110px);padding:clamp(26px,4vw,46px);border:1px solid rgba(17,17,17,.09);border-radius:24px;background:rgba(251,250,247,.7);position:relative;overflow:hidden}
.wn-human-bridge::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--bayan-violet),var(--bayan-gold))}
.wn-human-bridge p{max-width:740px;margin:0;font-size:18px;line-height:1.9;color:#46413B}

/* Site awareness reads like a continuation instead of a sitemap component. */
.wn-site-awareness{background:rgba(251,250,247,.52);border-block:1px solid rgba(17,17,17,.075)}
.wn-awareness-current .eyebrow{display:none}
.wn-awareness-current h2{font-size:clamp(30px,4vw,52px);letter-spacing:-.035em}
.wn-awareness-next{border-radius:16px!important;background:rgba(121,126,246,.065)!important;border:1px solid rgba(121,126,246,.13)!important}
.wn-awareness-related>a{border-radius:14px;transition:transform .22s ease,background .22s ease}
.wn-awareness-related>a:hover{transform:translateX(-2px);background:rgba(234,191,75,.06)}
html[dir="ltr"] .wn-awareness-related>a:hover{transform:translateX(2px)}

/* Footer breathes. */
.wn-footer-v5{position:relative;overflow:hidden}
.wn-footer-v5::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;inset-inline-end:-260px;top:-260px;background:radial-gradient(circle,rgba(121,126,246,.12),transparent 65%);pointer-events:none}
.wn-footer-navgrid a{position:relative;width:max-content;max-width:100%}
.wn-footer-navgrid a::after{content:"";position:absolute;inset-inline-start:0;bottom:-2px;width:0;height:1px;background:var(--bayan-gold);transition:width .24s ease}
.wn-footer-navgrid a:hover::after{width:100%}

/* Scroll reveal is editorial and quiet. */
.wn-human-reveal{opacity:0;transform:translateY(22px);filter:blur(2px);transition:opacity .65s ease,transform .75s cubic-bezier(.2,.8,.2,1),filter .65s ease}
.wn-human-reveal.is-visible{opacity:1;transform:none;filter:none}
.wn-human-reveal[data-human-delay="1"]{transition-delay:.05s}.wn-human-reveal[data-human-delay="2"]{transition-delay:.1s}.wn-human-reveal[data-human-delay="3"]{transition-delay:.15s}

/* Link movement is expressive but not arrow-dependent. */
main a:not(.cta):not(.secondary):not(.wn-plan-cta):not(.bh-button):not(.wn-feature-action){text-underline-offset:4px}
.wn-feature-action{display:inline-flex;align-items:center;gap:7px}
.wn-feature-action::after{content:"";width:18px;height:1px;background:currentColor;transition:width .22s ease}
.wn-feature-action:hover::after{width:34px}

/* Gaza keeps its own identity, with the promotional labels softened. */
.route-students .wn-gaza-copy>.eyebrow,.route-students .wn-gaza-principle .eyebrow{display:none}
.route-students .wn-gaza-copy h1{font-weight:590;letter-spacing:-.04em}
.route-students .wn-gaza-copy h1 em{font-style:normal}
.route-students .wn-student-trust{gap:9px;flex-wrap:wrap}
.route-students .wn-student-trust span{border-radius:999px}

/* Mobile menu feels like opening a sheet of paper. */
@media(max-width:980px){
  .site-head{width:calc(100% - 16px);margin-top:8px;border-radius:18px}
  .site-head.is-open{background:rgba(251,250,247,.98);box-shadow:0 28px 70px rgba(31,26,18,.16)}
  .site-head.is-open .wn-main-nav{animation:wn-menu-sheet .3s cubic-bezier(.2,.8,.2,1) both}
  @keyframes wn-menu-sheet{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .wn-human-page-intro{padding-top:72px}
  .wn-human-page-intro h1{font-size:clamp(42px,11vw,66px)}
  .wn-human-thread{width:55vw;opacity:.52}
}
@media(max-width:680px){
  body.wn-public{background:var(--bayan-paper)}
  body.wn-public::before{display:none}
  .wn-human-page-intro{padding:58px 0 52px}
  .wn-human-page-intro::before{width:90vw;inset-inline-end:-42vw;top:-10%}
  .wn-human-page-intro .wn-human-lead{font-size:18px;line-height:1.86;margin-top:24px}
  .wn-human-thread{display:none}
  .wn-page-locus .wn-locus-map{display:none}
  .wn-human-bridge{width:calc(100% - 30px);border-radius:18px;padding:22px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
  .wn-human-reveal{opacity:1!important;transform:none!important;filter:none!important}
  body.wn-public{background:var(--bayan-paper)}
}

/* Pricing keeps the live plan state, while the human intro owns the page title. */
.route-pricing .wn-price-hero h1{display:none!important}
.route-pricing .wn-price-hero{padding-top:clamp(14px,2vw,28px)!important}