/* No, Pero Why? immersive homepage — single authored visual system.
   Editorial youth-media world: camera rolls, source receipts, real devices, print edges,
   asymmetric composition and the NPW color family. No gradients, glassmorphism or generic SaaS cards. */
.npw-x{
  --x-ink:#122742;--x-blue:#1748e7;--x-sky:#9edcf5;--x-aqua:#63e2dc;
  --x-lime:#ccef55;--x-gold:#ffd95a;--x-coral:#ff765f;--x-pink:#d11f69;
  --x-purple:#7958d7;--x-cream:#fff8e9;--x-paper:#fffdf8;--x-rule:#cbd6e5;
  color:var(--x-ink);background:var(--x-cream);font:450 1rem/1.58 "Pero Text",system-ui,sans-serif;
  isolation:isolate;overflow:hidden
}
.npw-x,.npw-x *{box-sizing:border-box;font-style:normal}
.npw-x a{color:inherit;text-underline-offset:.22em}
.npw-x :is(h1,h2,h3,p,figure){margin:0}
.npw-x :is(h1,h2,h3){font-family:"Pero Display",system-ui,sans-serif;font-weight:800;letter-spacing:-.018em;text-wrap:balance}
.npw-x h2{font-size:clamp(2.45rem,4.7vw,5.05rem);line-height:.96}
.npw-x a:focus-visible,.npw-x input:focus-visible{outline:3px solid var(--x-coral);outline-offset:5px}
.npw-x .npw-x-eyebrow{font:700 .86rem/1.2 "Pero Text",sans-serif;letter-spacing:.02em!important;text-transform:none!important;margin-bottom:14px;color:var(--x-blue)}
.npw-x-section{padding:clamp(52px,7vw,104px) clamp(22px,5.3vw,86px);position:relative}
.npw-x-section::before{content:"";position:absolute;left:clamp(22px,5.3vw,86px);right:clamp(22px,5.3vw,86px);top:0;border-top:1.5px solid rgba(18,39,66,.32)}
.npw-x-section-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:clamp(28px,5vw,74px);align-items:end;margin-bottom:42px}
.npw-x-section-head>p{max-width:36ch;font-size:1.02rem;line-height:1.6}

/* hero — a designed editorial spread, not a landing-page template */
.npw-x-hero{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(390px,.72fr);min-height:760px;background:var(--x-cream);border-bottom:3px solid var(--x-ink)}
.npw-x-hero-image{position:relative;min-height:760px;overflow:hidden;background:var(--x-sky);border-right:3px solid var(--x-ink)}
.npw-x-hero-image::after{content:"";position:absolute;right:-18px;top:8%;width:82px;height:220px;background:var(--x-lime);border:3px solid var(--x-ink);transform:rotate(7deg);z-index:1}
.npw-x-hero-image>img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:43% center;filter:saturate(.96) contrast(1.02)}
.npw-x-hero-image figcaption{position:absolute;z-index:5;left:24px;bottom:24px;max-width:calc(100% - 48px);padding:10px 14px;background:var(--x-paper);border:2px solid var(--x-ink);font-size:.8rem;box-shadow:5px 5px 0 var(--x-coral)}
.npw-x-hero-image figcaption span{font-weight:800;margin-right:7px}
.npw-x-camera{position:absolute;z-index:4;right:22px;bottom:86px;width:min(350px,44%);background:#0f1e31;color:white;border:3px solid var(--x-ink);border-radius:26px;padding:15px;box-shadow:8px 9px 0 var(--x-blue);transform:rotate(2deg)}
.npw-x-camera::before{content:"";display:block;width:34%;height:5px;border-radius:999px;background:#65768e;margin:0 auto 12px}
.npw-x-camera-top{display:flex;justify-content:space-between;font-size:.72rem;padding:0 3px 10px;border-bottom:1px solid #526178}
.npw-x-camera-top span{font-weight:800}.npw-x-camera-top b{font-weight:600;color:var(--x-aqua)}
.npw-x-camera-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding-top:10px}
.npw-x-camera-frame{aspect-ratio:.83;display:flex;flex-direction:column;justify-content:end;padding:8px;border:1px solid #75849a;overflow:hidden;position:relative}
.npw-x-camera-frame::before{content:"";position:absolute;inset:0;opacity:.85}
.npw-x-camera-frame--clip::before{background:var(--x-coral)}.npw-x-camera-frame--chat::before{background:var(--x-purple)}.npw-x-camera-frame--source::before{background:var(--x-aqua)}
.npw-x-camera-frame b,.npw-x-camera-frame small{position:relative;z-index:1;color:#10213a}
.npw-x-camera-frame b{font-family:"Pero Display";font-size:1.15rem}.npw-x-camera-frame small{font-size:.58rem;font-weight:800;line-height:1.05}
.npw-x-receipt{position:absolute;z-index:5;left:7%;top:10%;display:grid;width:150px;padding:14px 16px;background:var(--x-paper);border:2px solid var(--x-ink);box-shadow:5px 6px 0 var(--x-gold);transform:rotate(-5deg);font-size:.65rem;text-transform:none}
.npw-x-receipt b{font-family:"Pero Display";font-size:.86rem;margin-bottom:8px}.npw-x-receipt span{font-weight:700}.npw-x-receipt i{height:1px;background:var(--x-rule);margin:5px 0}
.npw-x-hero-copy{padding:clamp(44px,5vw,82px) clamp(26px,4.4vw,70px);display:flex;align-items:flex-start;flex-direction:column;justify-content:center;position:relative;background:var(--x-cream)}
.npw-x-hero-copy::before{content:"NO / PERO / WHY";position:absolute;right:17px;top:20px;font:800 .66rem/1 "Pero Text";letter-spacing:.08em;color:var(--x-pink);writing-mode:vertical-rl}
.npw-x-hero h1{font-size:clamp(4.5rem,8vw,9rem);line-height:.84;letter-spacing:-.035em!important;margin:2px 0 32px;max-width:6.4ch}
.npw-x-hero h1 span{display:inline;background:var(--x-lime);padding:0 .035em;box-decoration-break:clone;-webkit-box-decoration-break:clone;color:var(--x-ink)}
.npw-x-hero-copy .npw-x-intro{font-size:clamp(1.13rem,1.45vw,1.38rem);line-height:1.45;max-width:34ch;margin-bottom:13px;font-weight:700}
.npw-x-hero-copy>p:not(.npw-x-eyebrow):not(.npw-x-intro):not(.npw-x-educator-note){max-width:39ch}
.npw-x-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:26px}
.npw-x-button{display:inline-flex;justify-content:space-between;align-items:center;text-decoration:none!important;background:var(--x-blue);color:white!important;border:2.5px solid var(--x-ink);border-radius:0;padding:14px 18px;font-weight:800;box-shadow:6px 6px 0 var(--x-ink);margin:0;transition:transform .15s,box-shadow .15s}
.npw-x-button:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--x-ink)}
.npw-x-quiet-link{font-size:.88rem;font-weight:750;text-decoration:underline;text-decoration-thickness:1.5px}
.npw-x-educator-note{margin-top:34px!important;padding-top:17px;border-top:1.5px solid var(--x-rule);font-size:.82rem;max-width:40ch!important}
.npw-x-educator-note a{font-weight:750}

/* chooser — tabbed media desk */
.npw-x-chooser{background:var(--x-paper)}
.npw-x-situations{border:0;padding:0;margin:0;min-width:0}
.npw-x-situations legend{position:absolute;clip-path:inset(50%);height:1px;width:1px;overflow:hidden}
.npw-x-choices{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.npw-x-choice{position:relative;cursor:pointer;padding:12px 16px;color:var(--x-ink);font:700 .95rem/1.25 "Pero Text",sans-serif;text-align:center;border:2px solid var(--x-ink);background:var(--x-cream);box-shadow:3px 3px 0 var(--x-ink)}
.npw-x-choice input{position:absolute;width:1px;height:1px;opacity:0;inset:50%}
.npw-x-choice:has(input:checked){background:var(--x-lime);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--x-ink)}
.npw-x-choice:hover:not(:has(input:checked)){background:var(--x-sky)}
.npw-x-choice:has(input:focus-visible){outline:3px solid var(--x-coral);outline-offset:4px}
.npw-x-panels{position:relative;background:var(--x-cream);border:3px solid var(--x-ink);box-shadow:10px 10px 0 var(--x-blue)}
.npw-x-panels::before{content:"SOURCE DESK";position:absolute;right:18px;top:-29px;background:var(--x-pink);color:white;border:2px solid var(--x-ink);padding:5px 9px;font-size:.7rem;font-weight:800;letter-spacing:.04em}
.npw-x-panel{display:none;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);min-height:350px}
.npw-x-chooser:has(#npw-x-chat:checked) .npw-x-panel--chat,.npw-x-chooser:has(#npw-x-creator:checked) .npw-x-panel--creator,.npw-x-chooser:has(#npw-x-rule:checked) .npw-x-panel--rule,.npw-x-chooser:has(#npw-x-email:checked) .npw-x-panel--email{display:grid}
.npw-x-claim{padding:clamp(30px,4vw,54px);background:var(--x-gold);border-right:3px solid var(--x-ink);display:flex;flex-direction:column;justify-content:center;position:relative}
.npw-x-panel--creator .npw-x-claim{background:var(--x-coral)}.npw-x-panel--rule .npw-x-claim{background:var(--x-aqua)}.npw-x-panel--email .npw-x-claim{background:var(--x-sky)}
.npw-x-claim::after{content:"";position:absolute;right:22px;bottom:22px;width:56px;height:56px;border:2px solid var(--x-ink);border-radius:50%;background:var(--x-paper);box-shadow:4px 4px 0 var(--x-ink)}
.npw-x-claim>p:not(.npw-x-eyebrow){font:800 clamp(2.3rem,3.7vw,4rem)/.98 "Pero Display",sans-serif;letter-spacing:-.02em;text-wrap:balance;max-width:9ch}
.npw-x-claim>span{font-size:.77rem;line-height:1.4;margin-top:30px;font-weight:700;max-width:30ch}
.npw-x-response{padding:clamp(30px,4vw,52px);display:flex;flex-direction:column;align-items:flex-start;background:repeating-linear-gradient(var(--x-paper) 0,var(--x-paper) 34px,#eef1f5 35px)}
.npw-x-response h3{font-size:clamp(1.75rem,2.6vw,2.65rem);line-height:1.04;margin-bottom:17px;background:var(--x-paper);padding-right:8px}
.npw-x-response>p{font-size:.98rem;line-height:1.6;background:rgba(255,253,248,.92);padding-right:6px}
.npw-x-response .npw-x-prompt{padding:13px 15px;border-left:5px solid var(--x-pink);font-weight:700;margin:22px 0;background:var(--x-paper)}
.npw-x-link{font:750 1rem/1.35 "Pero Text",sans-serif;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:4px;display:inline-flex;gap:18px;align-items:center}
.npw-x-response .npw-x-link{margin-top:auto;background:var(--x-lime);padding:8px 10px;border:2px solid var(--x-ink);box-shadow:3px 3px 0 var(--x-ink)}
.npw-x-real-media{margin-top:27px;font-size:.91rem}.npw-x-real-media a{font-weight:750}

/* worlds — one strong field, three editorial lanes */
.npw-x-worlds{background:var(--x-blue);color:white;border-block:3px solid var(--x-ink)}
.npw-x-worlds::before{border-color:rgba(255,255,255,.35)}
.npw-x-worlds .npw-x-eyebrow{color:var(--x-lime)}
.npw-x-worlds .npw-x-section-head>p{color:#e8eeff}
.npw-x-world-routes{border-top:1px solid rgba(255,255,255,.6)}
.npw-x-world-routes>a{display:grid;grid-template-columns:125px minmax(240px,.8fr) 1fr;gap:clamp(18px,3vw,50px);align-items:center;border-bottom:1px solid rgba(255,255,255,.55);padding:28px 0;text-decoration:none;position:relative}
.npw-x-world-routes>a::after{content:"↗";font:800 2rem/1 "Pero Display";color:var(--x-lime);justify-self:end}
.npw-x-world-routes>a:hover{background:rgba(255,255,255,.055);padding-left:12px}
.npw-x-world-age{font:750 .82rem/1.2 "Pero Text",sans-serif;color:var(--x-gold)}
.npw-x-world-routes h3{font-size:clamp(1.9rem,3.2vw,3.5rem);line-height:.94}
.npw-x-world-routes p{font-size:.93rem;line-height:1.55;color:#eff3ff}
.npw-x-worlds a:focus-visible{outline-color:var(--x-gold)}

/* crew — conversation, faces, room texture */
.npw-x-crew{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(34px,6vw,96px);background:var(--x-cream);border-bottom:3px solid var(--x-ink);align-items:center}
.npw-x-crew::after{content:"";position:absolute;width:220px;height:220px;right:-70px;bottom:-80px;background:var(--x-purple);border:3px solid var(--x-ink);border-radius:50%}
.npw-x-crew h2{font-size:clamp(3rem,5.2vw,5.7rem);line-height:.9}
.npw-x-crew h2 span{color:var(--x-pink)}
.npw-x-crew-faces{display:flex;margin-top:34px;padding-left:6px}
.npw-x-crew-faces img{width:64px;height:64px;object-fit:cover;border-radius:50%;border:4px solid var(--x-paper);box-shadow:0 0 0 2px var(--x-ink);background:var(--x-paper)}
.npw-x-crew-faces img+img{margin-left:-10px}
.npw-x-crew-story{position:relative;z-index:2}
.npw-x-chat-peek{width:min(420px,100%);margin:0 0 30px auto;padding:17px;background:var(--x-paper);border:2.5px solid var(--x-ink);box-shadow:7px 7px 0 var(--x-aqua);transform:rotate(1deg)}
.npw-x-chat-peek::before{content:"COMMON ROOM · 9";display:block;padding-bottom:9px;margin-bottom:11px;border-bottom:1.5px solid var(--x-rule);font-size:.68rem;font-weight:800;color:var(--x-blue)}
.npw-x-chat-peek p{width:max-content;max-width:88%;padding:9px 11px;margin-bottom:8px!important;background:#eef3ff;border:1.5px solid var(--x-ink);border-radius:14px 14px 14px 3px;font-size:.82rem!important;line-height:1.35!important}
.npw-x-chat-peek p:last-child{margin-left:auto;background:#fff0dc;border-radius:14px 14px 3px 14px}
.npw-x-chat-peek b{display:block;font-size:.72rem;color:var(--x-pink)}
.npw-x-crew-story>p{font-size:1.05rem;line-height:1.65;margin-bottom:18px;max-width:48ch}
.npw-x-crew-story>p span{font-weight:700}.npw-x-crew-story .npw-x-link{margin-top:10px}.npw-x-small-link{display:block;margin-top:18px;font-size:.85rem;font-weight:700}

/* packets — publication shelf, not app cards */
.npw-x-packets{background:var(--x-paper)}
.npw-x-packet-list{list-style:none;padding:0;margin:0;border-top:3px solid var(--x-ink)}
.npw-x-packet-list li{display:grid;grid-template-columns:66px 1fr 82px;gap:25px;align-items:center;padding:28px 0;border-bottom:2px solid var(--x-ink);position:relative}
.npw-x-packet-list li:nth-child(1){--packet:var(--x-lime)}.npw-x-packet-list li:nth-child(2){--packet:var(--x-coral)}.npw-x-packet-list li:nth-child(3){--packet:var(--x-aqua)}
.npw-x-packet-list li::before{content:"";position:absolute;left:-18px;top:10px;bottom:10px;width:7px;background:var(--packet)}
.npw-x-packet-n{font:800 2.6rem/1 "Pero Display",sans-serif;color:var(--x-blue)}
.npw-x-packet-list li>a:nth-child(2){text-decoration:none}
.npw-x-packet-list small{display:block;font:750 .76rem/1.2 "Pero Text",sans-serif;margin-bottom:7px;color:var(--x-pink)}
.npw-x-packet-list h3{font-size:clamp(1.55rem,2.25vw,2.4rem);line-height:1.03;margin-bottom:7px}
.npw-x-packet-list p{font-size:.94rem;max-width:70ch}
.npw-x-pdf{border:2px solid var(--x-ink);padding:9px 8px;text-align:center;text-decoration:none;font:800 .82rem/1.3 "Pero Text",sans-serif;background:var(--packet);box-shadow:3px 3px 0 var(--x-ink)}
.npw-x-pdf:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--x-ink)}

/* educator desk — mature, quieter, still same brand */
.npw-x-desk{background:var(--x-ink);color:white;display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(40px,6vw,90px);align-items:center}
.npw-x-desk::before{border-color:#65748a}
.npw-x-desk .npw-x-eyebrow{color:var(--x-aqua)}
.npw-x-desk h2{font-size:clamp(2.5rem,4vw,4.4rem);margin-bottom:22px}
.npw-x-desk p:not(.npw-x-eyebrow){max-width:52ch;font-size:.96rem;line-height:1.7;color:#eef2f8}
.npw-x-desk .npw-x-button{background:var(--x-gold);color:var(--x-ink)!important;margin-top:25px}
.npw-x-desk-index{border-top:1px solid #7c899a}
.npw-x-desk-index a{display:flex;flex-direction:column;padding:22px 0;border-bottom:1px solid #7c899a;text-decoration:none;gap:4px}
.npw-x-desk-index a:hover strong{color:var(--x-gold)}
.npw-x-desk-index span{font-size:.8rem;color:#c7d0dd}.npw-x-desk-index strong{font:800 1.55rem/1.15 "Pero Display",sans-serif}
.npw-x-desk a:focus-visible{outline-color:var(--x-gold)}

@media(min-width:1600px){.npw-x-hero{min-height:860px}.npw-x-hero-image{min-height:860px}.npw-x-hero h1{font-size:9.4rem}}
@media(max-width:1050px){
 .npw-x-hero{grid-template-columns:1.1fr .9fr;min-height:680px}.npw-x-hero-image{min-height:680px}.npw-x-hero h1{font-size:6.4rem}.npw-x-camera{width:52%}
 .npw-x-section-head{grid-template-columns:1fr}.npw-x-section-head>p{max-width:52ch}.npw-x-world-routes>a{grid-template-columns:95px 1fr 1fr}
 .npw-x-crew{gap:40px}.npw-x-desk{gap:40px}
}
@media(max-width:760px){
 .npw-x-section{padding:48px 20px}.npw-x-section::before{left:20px;right:20px}
 .npw-x-hero{display:flex;flex-direction:column-reverse;min-height:0}.npw-x-hero-copy{padding:38px 22px 42px}
 .npw-x-hero h1{font-size:clamp(4.2rem,16vw,6rem);line-height:.9;max-width:7ch}.npw-x-hero h1 br{display:none}.npw-x-hero h1 span{display:block}
 .npw-x-hero-image{min-height:500px;border-right:0;border-top:3px solid var(--x-ink)}.npw-x-hero-image>img{object-position:40% 42%}
 .npw-x-camera{right:14px;bottom:68px;width:56%;padding:11px;border-radius:22px}.npw-x-camera-grid{gap:5px}.npw-x-camera-frame{padding:5px}
 .npw-x-receipt{left:14px;top:18px;width:122px}.npw-x-hero-image figcaption{left:14px;bottom:14px}
 .npw-x-hero-copy::before{display:none}.npw-x-hero-actions{align-items:flex-start;flex-direction:column}
 .npw-x-choice{flex:1 1 calc(50% - 8px);min-width:0;padding:12px 8px;font-size:.88rem}
 .npw-x-panel{grid-template-columns:1fr;min-height:0}.npw-x-claim{border-right:0;border-bottom:3px solid var(--x-ink);padding:29px 24px}
 .npw-x-claim>p:not(.npw-x-eyebrow){max-width:12ch}.npw-x-response{padding:28px 23px}.npw-x-panels{box-shadow:7px 7px 0 var(--x-blue)}
 .npw-x-world-routes>a{grid-template-columns:1fr auto;gap:8px 15px;padding:24px 0}.npw-x-world-age,.npw-x-world-routes h3,.npw-x-world-routes p{grid-column:1}
 .npw-x-world-routes h3{font-size:2.6rem}.npw-x-world-routes a::after{grid-column:2;grid-row:2;align-self:center}
 .npw-x-crew,.npw-x-desk{grid-template-columns:1fr;gap:35px}.npw-x-crew::after{display:none}.npw-x-crew h2{font-size:3.5rem}
 .npw-x-crew-faces img{width:56px;height:56px}.npw-x-chat-peek{margin-left:0}
 .npw-x-packet-list li{grid-template-columns:40px 1fr;gap:14px}.npw-x-packet-n{font-size:2rem;align-self:start;padding-top:12px}.npw-x-pdf{grid-column:2;justify-self:start;margin-top:4px}
}
@media(prefers-reduced-motion:reduce){.npw-x *{scroll-behavior:auto!important;transition:none!important}}
@supports not selector(:has(*)){.npw-x-panel{display:grid}.npw-x-choices{display:none}}