/* What's in the box, version E3 (demo switch: /?box=e3) */
/* E3: E2 with a premium pass (full-size screens that run off the card edge, smooth colour wash, app bars,
   one-line descriptions, monochrome brand marks in six screens).
   E2: E with the features reordered by importance (no row intros: the four parts above explain each row).
   E: one row per part of the logo (build. edit. govern. grow.), each a sideways-scrolling strip of cards that runs
   to the right edge of the screen so the next card peeks in. Fewer cards in a row = wider cards (3 cards: 74% of
   the column, text beside the screen); more cards = narrower (4: 56%, 5+: 44%, text above the screen). Every card
   shows its name, description and guide link. Each row has its own accent: a tint behind the screen and the
   matching square in the small logo next to the row name. Demo motion runs only for cards on screen. */
.bx{padding:24px 0 120px;overflow:hidden}
.bx-thread{display:flex;flex-direction:column;align-items:center}
.bx-thread .l{width:0;height:72px;border-left:1.2px dashed var(--ink);opacity:.55}
.bx-thread .d{width:14px;height:14px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 5px rgba(255,203,5,.18)}
.bx-h{font-size:clamp(34px,4.6vw,58px);text-align:center;margin:28px auto 0;max-width:14em}

.er{--acc:#ffcb05;--tint:#fff6cc;--dot:rgba(176,132,0,.22);--row:min(1100px,100vw - 2 * var(--gut));margin-top:clamp(48px,6vw,72px)}
.er.r-edit{--acc:#4f8ef7;--tint:#e9f1fe;--dot:rgba(50,100,200,.2)}
.er.r-govern{--acc:#7c5cff;--tint:#efebff;--dot:rgba(90,60,200,.2)}
.er.r-grow{--acc:#12b886;--tint:#e2f6ee;--dot:rgba(10,130,90,.2)}
.er-top{display:flex;align-items:center;justify-content:space-between;gap:24px}
.er-name{display:flex;align-items:center;gap:12px;margin:0;font-size:clamp(26px,2.6vw,34px);font-weight:700;letter-spacing:-.055em;line-height:1}
.er-name svg{width:30px;height:30px;flex:0 0 auto}
.er-intro{margin:10px 0 0;font-size:17px;color:var(--ink-2);max-width:36em}
.er-nav{display:flex;gap:8px;flex:0 0 auto}
.er-nav button{width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--line);display:grid;place-items:center;cursor:pointer;transition:background .2s,opacity .2s}
.er-nav button:hover{background:var(--tint)}
.er-nav button:disabled{opacity:.35;cursor:default;background:#fff}
.er-nav button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.er-nav svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* the strip runs from the column's left edge to the screen's right edge */
.er-track{display:flex;gap:16px;margin-top:22px;margin-right:calc(50% - 50vw);padding:4px calc(50vw - 50%) 24px 2px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.er-track::-webkit-scrollbar{display:none}
.ec{--cw:calc(var(--row) * .44);flex:0 0 var(--cw);height:470px;scroll-snap-align:start;display:grid;grid-template-rows:auto minmax(0,1fr);gap:18px;padding:26px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.06),0 20px 50px -38px rgba(0,0,0,.3);min-width:0}
.er[data-n="4"] .ec{--cw:calc(var(--row) * .56)}
.er[data-n="3"] .ec,.er[data-n="2"] .ec{--cw:calc(var(--row) * .74);grid-template-rows:none;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px}
.er[data-n="3"] .ec-tx,.er[data-n="2"] .ec-tx{align-self:center}
.ec-t{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0;font-size:21px;font-weight:600;letter-spacing:-.03em;line-height:1.2}
.ec-d{margin:8px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.ec-a{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:14.5px;font-weight:500;color:var(--ink);text-decoration:none}
.ec-a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.bx-only{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:#fff3c4;color:#7a5c00;font:600 9.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.ec-pane{position:relative;min-height:0;border-radius:16px;background-color:var(--tint);background-image:radial-gradient(var(--dot) 1px,transparent 1.4px);background-size:16px 16px;overflow:hidden}
.ec-st{position:absolute;inset:18px;display:flex;justify-content:center;align-items:center}
.dwin{flex:0 0 auto;width:520px;transform-origin:center;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.07),0 24px 50px -30px rgba(0,0,0,.35);overflow:hidden;container-type:inline-size}
.dwin-bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-bottom:1px solid #efefea;background:#fafaf8}
.dwin-bar i{width:8px;height:8px;border-radius:50%;background:#e2e1db}
.dwin-bar span{margin-left:8px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#6b6b67}
.dwin .wb-demo{position:relative;inset:auto;padding:20px 18px 24px}

.bx-hood{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 18px;margin-top:64px;font:500 12.5px/1.6 var(--mono);color:#6b6b67;text-align:center}
.bx-hood b{font-weight:500;color:var(--ink);letter-spacing:.1em;text-transform:uppercase;font-size:11px}
.bx-hood span+span::before{content:"";display:inline-block;width:4px;height:4px;margin:0 18px 2px 0;border-radius:50%;background:#c9c8c1;vertical-align:middle}
.bx-note{margin:10px 0 0;text-align:center;font-size:12.5px;color:#8a8a86}

@media (max-width:900px){
  .er[data-n] .ec{--cw:min(86vw,520px);grid-template-columns:none;grid-template-rows:auto minmax(0,1fr);gap:16px;height:500px}
}
@media (max-width:640px){
  .er-nav{display:none}
  .er[data-n] .ec{padding:20px;height:470px}
  .ec-t{font-size:19px}
  .ec-d{font-size:15px}
  .bx-hood span+span::before{margin-right:10px}
  .bx-hood{gap:6px 10px}
}

/* ===== E3: premium pass over E2 ===== */
.ec{position:relative;height:500px;gap:20px;padding:30px;border-radius:26px;background:#fff;
  box-shadow:0 0 0 1px rgba(17,17,17,.05),0 1px 2px rgba(17,17,17,.04),0 24px 48px -30px rgba(17,17,17,.24);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.ec:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(17,17,17,.07),0 2px 4px rgba(17,17,17,.04),0 40px 70px -38px rgba(17,17,17,.32)}
.ec.e3-has-only .ec-tx{padding-right:120px}
.er[data-n="3"] .ec-tx,.er[data-n="2"] .ec-tx{padding-right:0}
.ec-t{font-size:22px;letter-spacing:-.035em;line-height:1.15}
.ec-d{margin-top:6px;font-size:15.5px;line-height:1.45}
.ec-a{margin-top:10px;font-size:14px;opacity:0;transform:translateY(3px);transition:opacity .25s,transform .25s}
.ec:hover .ec-a,.ec:focus-within .ec-a{opacity:1;transform:none}
@media (hover:none){.ec-a{opacity:1;transform:none}}
.e3-only{position:absolute;top:33px;right:30px;display:inline-flex;align-items:center;gap:7px;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#7a5c00}
.e3-only i{width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 3px rgba(255,203,5,.25)}
.er[data-n="3"] .e3-only,.er[data-n="2"] .e3-only{position:static;margin-bottom:12px}
/* smooth colour wash instead of the dot grid; the screen sits at full size and runs off the edge */
.er{--tint2:#ffe9a3}
.er.r-edit{--tint2:#cfe0fd}
.er.r-govern{--tint2:#dcd3ff}
.er.r-grow{--tint2:#c4eedc}
.ec-pane{border-radius:18px;background:radial-gradient(130% 110% at 0% 0%,#fff 0,var(--tint) 45%,var(--tint2) 100%);box-shadow:inset 0 0 0 1px rgba(17,17,17,.04)}
.ec-st{inset:auto;left:26px;top:26px;display:block;transition:transform .5s var(--ease)}
.ec:hover .ec-st{transform:translate(-3px,-6px)}
.dwin{transform-origin:top left;border-radius:14px;box-shadow:0 0 0 1px rgba(17,17,17,.06),0 2px 4px rgba(17,17,17,.04),0 30px 60px -30px rgba(17,17,17,.3)}
.dwin-bar{height:38px;gap:8px;padding:0 14px;background:#fff;border-bottom:1px solid #f0f0ec}
.dwin-bar svg{width:15px;height:15px;flex:0 0 auto}
.dwin-bar span{margin-left:0;font:500 12.5px/1 var(--font);letter-spacing:-.005em;text-transform:none;color:#55554f}
.dwin-bar span em{font-style:normal;color:#a3a39e;margin:0 6px}
.dwin-bar.e3-term{background:#1c1917;border-bottom-color:#1c1917}
.dwin-bar.e3-term span{color:#d6d3cc;font-family:var(--mono);font-size:11.5px}
/* monochrome brand marks inside the screens */
.e3-lg{width:14px;height:14px;flex:0 0 auto;margin-right:7px;vertical-align:-2px;fill:currentColor}
.wb-plats span{display:inline-flex;align-items:center}
.wb-av.e3-ai{display:inline-grid;place-items:center;background:#fff;box-shadow:0 0 0 1px #e6e6e1}
.wb-av.e3-ai .e3-lg{margin:0;color:var(--ink)}
@media (max-width:640px){.ec.e3-has-only .ec-tx{padding-right:0}.e3-only{position:static;margin-bottom:10px}.ec-st{left:16px;top:16px}}
@media (prefers-reduced-motion:reduce){.bx *{transition:none!important;scroll-behavior:auto!important}}