.sx{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);margin-top:clamp(32px,4vw,56px);align-items:start}
.sx-label{margin:0;font:500 .7rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.sx-tabs{display:grid;gap:0;border-top:1.5px solid var(--ink)}
.sx-tab{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 28px;align-items:center;gap:12px;width:100%;padding:22px 8px 22px 4px;border:0;border-bottom:1px solid var(--rule);background:none;color:var(--ink);text-align:left;font:inherit;cursor:pointer;transition:background .3s var(--ease-out),padding .35s var(--ease-out)}
.sx-tab::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;background:#4f7a3c;transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease-out)}
.sx-tab:hover{background:rgba(29,32,36,.035)}
.sx-tab:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.sx-tab[aria-selected=true]{padding-left:18px;background:rgba(79,122,60,.07)}
.sx-tab[aria-selected=true]::before{transform:scaleY(1)}
.sx-num{font:500 .74rem/1 var(--mono);color:var(--ink-3)}
.sx-tab-body{display:grid;gap:6px;min-width:0}
.sx-name{font:700 clamp(1.3rem,1rem + 1vw,1.75rem)/1.1 "Schibsted Grotesk",var(--sans);letter-spacing:0}
.sx-tab-proof{font:400 .9rem/1.3 var(--sans);color:var(--ink-3)}
.sx-tab[aria-selected=true] .sx-tab-proof{color:#3b6a2c}
.sx-chev{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--ink-3);transition:transform .35s var(--ease-out),background .3s,color .3s}
.sx-chev svg{width:16px;height:16px}
.sx-tab:hover .sx-chev{transform:translateX(3px)}
.sx-tab[aria-selected=true] .sx-chev{background:var(--ink);color:var(--paper)}
.sx-other{margin:22px 0 0;font:400 .95rem/1.55 var(--sans);color:var(--ink-2)}
.sx-other a{color:var(--ink);font-weight:600;text-underline-offset:4px}
.sx-panel{display:grid;gap:22px}
.sx-panel.is-in .sx-media img{animation:sx-zoom 1.1s var(--ease-out) both}
.sx-panel.is-in .sx-copy>*{animation:sx-up .6s var(--ease-out) both}
.sx-panel.is-in .sx-copy>*:nth-child(2){animation-delay:.05s}.sx-panel.is-in .sx-copy>*:nth-child(3){animation-delay:.1s}.sx-panel.is-in .sx-copy>*:nth-child(4){animation-delay:.15s}.sx-panel.is-in .sx-copy>*:nth-child(5){animation-delay:.2s}
@keyframes sx-zoom{from{transform:scale(1.06);opacity:.4}to{transform:none;opacity:1}}
@keyframes sx-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sx-media{position:relative;margin:0;aspect-ratio:1312/816;overflow:hidden;border-radius:8px;border:1.5px solid var(--ink);background:var(--paper-deep)}
.sx-media img{width:100%;height:100%;object-fit:cover;display:block}
.sx-badge{position:absolute;left:14px;bottom:14px;display:grid;gap:4px;padding:10px 14px;border-radius:8px;background:rgba(244,241,234,.92);backdrop-filter:blur(6px);box-shadow:0 10px 24px -16px rgba(29,32,36,.6)}
.sx-proof-name{display:inline-flex;align-items:center;gap:6px;font:700 1.15rem/1.15 "Schibsted Grotesk",var(--sans);color:#2f5a22;text-decoration:none}
a.sx-proof-name:hover{text-decoration:underline;text-underline-offset:4px}
.sx-proof-name svg{width:15px;height:15px}
.sx-copy{display:grid;gap:14px}
.sx-text{margin:0;font:400 1.08rem/1.6 var(--sans);color:var(--ink)}
.sx-uses{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.sx-use{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:12px 14px;border:1.5px solid var(--rule);border-radius:8px;background:rgba(244,241,234,.6);color:var(--ink);text-decoration:none;font:500 .95rem/1.3 var(--sans);transition:border-color .25s,background .25s,transform .25s var(--ease-out)}
.sx-use svg{flex:none;width:16px;height:16px;transition:transform .25s var(--ease-out)}
.sx-use:hover{border-color:#4f7a3c;background:var(--paper);transform:translateY(-2px)}
.sx-use:hover svg{transform:translateX(3px);color:#2f5a22}
.sx-use:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sx-sub{display:grid;gap:8px}
.sx-sub-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.sx-sub-links a{color:var(--ink);font:500 .95rem/1.6 var(--sans);text-underline-offset:4px}
.sx-cta{margin:6px 0 0}
@media (width<=900px){.sx{grid-template-columns:minmax(0,1fr)}.sx-tabs{display:flex;overflow-x:auto;gap:8px;border-top:0;padding-bottom:6px;scrollbar-width:none;scroll-padding-left:16px;-webkit-mask:linear-gradient(90deg,#000 88%,transparent)}.sx-tabs::-webkit-scrollbar{display:none}.sx-tab{flex:none;width:auto;grid-template-columns:auto;padding:10px 14px;border:1.5px solid var(--rule);border-radius:22px}.sx-tab[aria-selected=true]{padding-left:14px;background:var(--ink);color:var(--paper);border-color:var(--ink)}.sx-tab::before,.sx-num,.sx-tab-proof,.sx-tab-logo,.sx-chev{display:none}.sx-name{font-size:1rem}.sx-other{display:none}}
@media (prefers-reduced-motion:reduce){.sx-panel.is-in .sx-media img,.sx-panel.is-in .sx-copy>*{animation:none}}
.sx-badge-row{display:flex;align-items:center;gap:12px}
.sx-badge-txt{display:grid;gap:4px}
.sx-logo-box{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px rgba(29,32,36,.08);overflow:hidden}
.sx-logo{width:44px;height:44px;object-fit:contain}
.sx-logo.is-wide{width:46px;height:auto}
.sx-logo.is-multiply,.sx-mini.is-multiply{mix-blend-mode:multiply}
.sx-tab-proof{display:flex;align-items:center;gap:8px}
.sx-tab-logo{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px rgba(29,32,36,.08);overflow:hidden}
.sx-mini{width:20px;height:20px;object-fit:contain}
.sx-mini.is-wide{width:22px;height:auto}
@media (width<=900px){.sx-tab .sx-tab-proof,.sx-tab .sx-tab-logo{display:none}}
