@font-face { font-family:"NA Studio Inter";src:url("/brand-fonts/InterVariable.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap; }
/* Same application grammar as the Rogo guide, composed for the page's eight vignettes. */
body[data-direction=rogo] {
  .features .feature .artwork { padding:28px!important; background:#f5f4f1!important; }
  .features .feature .ix-scene { height:400px; }
  .rgi-app {
    --rgi-font:"NA Studio Inter",Arial,sans-serif;--rp-sans:var(--rgi-font);--rgi-ink:#20241f;--rgi-body:#454d42;--rgi-muted:#687067;--rgi-rule:#e4e7e1;--rgi-field:#f7f8f5;
    width:100%;height:100%;min-width:0;overflow:hidden;border:1px solid #dfe4dc;border-radius:9px;
    background:#fff;color:var(--rgi-body);font:400 12px/1.5 var(--rp-sans);letter-spacing:-.012em;
    box-shadow:0 1px 2px #22232004,0 18px 28px -24px #22232036;
  }
  .rgi-app :is(h3,h4,h5,p,dl,dd){margin:0}
  .rgi-app :is(strong,b){font-weight:500}
  .rgi-chrome { height:42px;display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid var(--rgi-rule);background:#fafbf9;color:var(--rgi-ink); }
  .rgi-chrome .ix-brand { font:500 12px/1.2 var(--rp-sans)!important;letter-spacing:-.035em!important;gap:6px; }
  .rgi-chrome .ix-brand img { width:15px;height:15px;filter:none!important; }
  .rgi-chrome-title { padding-left:12px;border-left:1px solid var(--rgi-rule);color:var(--rgi-muted);font-size:11px;line-height:16px;white-space:nowrap; }
  .rgi-layout { display:grid;grid-template-columns:104px minmax(0,1fr);height:calc(100% - 42px);min-width:0; }
  .rgi-side { display:flex;flex-direction:column;min-width:0;padding:18px 12px 16px;background:#fafaf8;border-right:1px solid var(--rgi-rule); }
  .rgi-main { min-width:0;padding:20px;position:relative;background:#fff; }
  .rgi-label { color:var(--rgi-muted);font:400 11px/1.4 var(--rp-sans);letter-spacing:.01em; }
  .rgi-title { color:var(--rgi-ink);font:500 20px/1.2 var(--rgi-font);letter-spacing:-.04em;text-wrap:pretty; }
  .rgi-data { font:400 12px/1.45 var(--rp-sans);color:var(--rgi-body); }
  .rgi-tag { display:inline-flex;align-items:center;gap:4px;padding:3px 6px;border:1px solid #e1e5d9;border-radius:4px;background:#f4f6ef;color:#667259;font:400 11px/1.2 var(--rp-sans);white-space:nowrap; }
  .rgi-note { color:var(--rgi-muted);font:400 11px/1.5 var(--rp-sans); }
  .rgi-side>.rgi-note:last-child { margin-top:auto; }
  .rgi-app svg { color:inherit; }
  .rgi-app table { font:400 11px/1.45 var(--rp-sans); }
  .features .ix-replay { border-radius:4px!important;padding:5px 8px!important;transition:color 180ms,background-color 180ms!important; }
  .features .ix-replay:focus-visible { outline:2px solid #536d95;outline-offset:3px; }
}
@media (min-width:901px) and (max-width:1120px) {
 body[data-direction=rogo] {
  .features .feature .artwork { padding:18px!important; }
  .rgi-layout { grid-template-columns:102px minmax(0,1fr); }
  .rgi-side { padding-inline:11px; }
  .rgi-main { padding:17px; }
 }
}
@media(max-width:900px){
 body[data-direction=rogo] .features .feature .artwork { padding:32px!important; }
}
@media(max-width:540px){
 body[data-direction=rogo] {
  .features .feature .artwork { padding:14px!important; }
  .rgi-layout { grid-template-columns:90px minmax(0,1fr); }
  .rgi-side { padding:16px 10px; }
  .rgi-main { padding:16px 14px; }
  .rgi-title { font-size:20px; }
  .rgi-chrome { padding-inline:11px;gap:8px; }
  .rgi-chrome .ix-brand { font-size:11px!important; }
  .rgi-chrome-title { padding-left:8px;font-size:11px; }
 }
}
@media(prefers-reduced-motion:reduce){body[data-direction=rogo] .features .ix-replay{transition:none!important}}
body[data-direction=rogo][data-motion=off] .features .ix-replay{transition:none!important}