/* /open/ — classes shared by the hub, campaign and article pages. Most styling is inline in the
   page markup, as drawn on the approved canvas artboards. */
.wo{font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;color:#27273f;-webkit-font-smoothing:antialiased;overflow-x:clip;text-align:left;line-height:normal}
.wo *,.wo *::before,.wo *::after{box-sizing:border-box}
.wo h1,.wo h2,.wo h3,.wo p,.wo dl,.wo dd,.wo ol,.wo ul{text-transform:none}
.wo a{color:#27273f}.wo a:hover{color:#5e0159}
.wo [hidden]{display:none!important}
.ja-hero:has(> .wo){margin-bottom:0;padding:0}
.ja-hero > .wo{width:100%}

.wo .btn{display:inline-flex;align-items:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:16px;line-height:1.2;padding:13px 22px;border-radius:11px;text-decoration:none;white-space:nowrap;cursor:pointer}
.wo .btn-p{background:#e85c3f;color:#fff;border:1px solid rgba(39,39,63,.42);box-shadow:2px 2px 0 rgba(39,39,63,.28)}
.wo .btn-p:hover{color:#fff}
.wo .btn-s{background:#fff;color:#27273f;border:1px solid #27273f;box-shadow:2px 2px 0 #fcd34d}
.wo .btn-s-gold{background:#fff;color:#27273f;border:1px solid #27273f;box-shadow:2px 2px 0 #27273f}
.wo .btn-s:hover,.wo .btn-s-gold:hover{color:#27273f}

/* hub */
.wo .wo-tabs{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:6px;padding-left:0}
.wo .tab{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px;padding:14px 24px;border-radius:16px 16px 0 0;cursor:pointer;margin-bottom:-1px;position:relative;min-height:48px;color:#27273f;text-align:left}
.wo .tab:focus-visible{outline:2px solid #27273f;outline-offset:2px}
/* Phones: the three tabs share one row, so the folder stays one piece. */
@media (max-width:640px){.wo .wo-tabs{gap:4px}.wo .tab{flex:1 1 0;min-width:0;font-size:14px;line-height:1.15;padding:10px 12px;border-radius:12px 12px 0 0;align-self:stretch}}
.wo .tile{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.wo .tile:hover{transform:translate(-4px,-4px);box-shadow:10px 10px 0 color-mix(in srgb,#f5f3ff 45%,#27273f)}
.wo .tile:hover .tile-t{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
.wo a.tile.rot:hover{transform:translate(-4px,-4px) rotate(var(--tilt))}
.wo .tile.rot{transform:rotate(var(--tilt))}
.wo div.tile.rot:hover{transform:rotate(var(--tilt));box-shadow:4px 4px 0 rgba(39,39,63,.12)}
.wo div.tile.rot:hover .tile-t{text-decoration:none}
.wo .fan .leaf{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.wo .fan:hover .l1{transform:translate(-30px,-56px) rotate(-9deg)}
.wo .fan:hover .l2{transform:translate(4px,-78px) rotate(2deg)}
.wo .fan:hover .l3{transform:translate(40px,-48px) rotate(10deg)}
.wo .px{transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.wo .px:hover{transform:translate(-3px,-3px) rotate(-4deg);box-shadow:4px 4px 0 rgba(39,39,63,.22);z-index:2}
.wo .wave{animation:wo-wave 5.6s ease-in-out infinite}
.wo .panel-in{animation:wo-fadeup .4s ease-out both}
@keyframes wo-wave{0%,62%,100%{transform:scale(1);filter:none}70%{transform:scale(.72);filter:brightness(1.08)}78%{transform:scale(1.06)}}
@keyframes wo-scan{from{transform:translateX(-120%)}to{transform:translateX(420%)}}
@keyframes wo-litup{from{opacity:0;transform:scale(.3) rotate(-20deg)}to{opacity:1;transform:none}}
@keyframes wo-breathe{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes wo-fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes wo-mvL{to{transform:translateX(-50%)}}
@keyframes wo-lit{0%,100%{transform:scale(1)}50%{transform:scale(.88)}}
@keyframes wo-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* campaign */
.wo .art:hover .art-t{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.wo .art:hover .doc{transform:rotate(0deg) translateY(-4px)!important}

/* article */
.wo .wo-toc a{display:block;text-decoration:none;color:#4a4858;font-weight:600;font-size:15px;line-height:1.35;padding:8px 0 8px 14px;border-left:2px solid rgba(39,39,63,.14)}
.wo .wo-toc a:hover,.wo .wo-toc a.on{color:#27273f;border-left-color:#850180}
.wo .paper p{margin:0 0 1em}
.wo .paper p:last-child{margin-bottom:0}
.wo .paper ul{margin:0 0 1em;padding-left:1.3em}
.wo .paper ul li{margin:0 0 .4em}
.wo .more{margin-top:6px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:15.5px;color:#27273f;background:#fff;border:1px solid rgba(39,39,63,.42);border-radius:11px;padding:11px 18px;box-shadow:2px 2px 0 rgba(39,39,63,.12);cursor:pointer;min-height:44px}

/* Phone layouts: grids that are two-column on the artboards stack. */
@media (max-width:860px){
  .wo .two{grid-template-columns:minmax(0,1fr)!important}
  .wo .fan{height:300px!important;margin-top:8px}
  .wo .next-row{grid-template-columns:minmax(0,1fr)!important}
  .wo .next-row .next-s{text-align:left!important}
  .wo .read-grid{grid-template-columns:minmax(0,1fr)!important}
  .wo .read-grid .wo-toc{position:static!important}
  .wo .paper-grid{grid-template-columns:minmax(0,1fr)!important}
  .wo .paper-grid aside{background:#fff;border-left:1px solid rgba(39,39,63,.16);border-right:1px solid rgba(39,39,63,.16);padding:0 clamp(28px,4vw,56px) 18px!important}
  .wo .paper-grid aside:empty{display:none}
  .wo .art{grid-template-columns:minmax(0,1fr)!important}
  .wo .stat-strip > div{border-right:0!important;padding-left:0!important}
}
@media (prefers-reduced-motion:reduce){.wo *{animation:none!important;transition:none!important}}