/* VND Modern home. Tokens, font and shell are supplied by the shared modern CSS. */
.portal-home main { background:var(--canvas); color:var(--ink); font-size:17px; }
.portal-home .feature-modern { background:var(--graphite); color:var(--inverse); overflow:visible; }
.portal-home .feature-modern :focus-visible { outline-color:var(--inverse); }
.portal-home .feature-wrap { padding-top:32px; }
.portal-home .feature-slide { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:center; gap:48px; }
.portal-home .feature-copy { display:block; padding:0; }
.portal-home .feature-copy h1,.portal-home .feature-copy h2 { margin:0 0 16px; font-size:48px; line-height:1.15; font-weight:650; color:var(--inverse); letter-spacing:0; }
.portal-home .feature-description { max-width:40ch; font-size:17px; line-height:1.5; color:var(--inverse-secondary); margin:0; }
.portal-home .feature-benefit { display:flex; align-items:center; gap:16px; margin:24px 0 0; text-align:left; }
.portal-home .feature-benefit .feature-value { display:block; font-size:32px; font-weight:650; line-height:1.2; color:var(--inverse); margin:0; white-space:nowrap; }
.portal-home .feature-benefit p { margin:0; font-size:17px; line-height:1.5; color:var(--inverse-secondary); }
.portal-home .feature-benefit p span { display:block; font-size:17px; }
.portal-home .feature-bybit .feature-benefit,.portal-home .feature-okx .feature-benefit { align-items:flex-start; }
.portal-home .feature-bybit .feature-value,.portal-home .feature-okx .feature-value { font-size:20px; }
.portal-home .feature-actions { display:flex; align-items:start; flex-wrap:wrap; gap:8px 24px; margin-top:24px; }
.portal-home .feature-copy .button { margin:0; min-height:48px; padding:12px 24px; gap:24px; font-size:17px; font-weight:650; background:var(--action); color:var(--inverse); border-radius:12px; }
.portal-home .feature-copy .button:hover { background:var(--action-hover); }
.portal-home .feature-terms { flex:1 1 144px; min-width:0; color:var(--inverse-secondary); }
.portal-home .feature-terms summary { min-height:48px; width:max-content; max-width:100%; display:flex; align-items:center; gap:8px; list-style:none; font-size:14px; font-weight:650; cursor:pointer; }
.portal-home .feature-terms summary::-webkit-details-marker { display:none; }
.portal-home .feature-terms summary:hover { color:var(--inverse); }
.portal-home .feature-terms summary .icon { width:16px; height:16px; transform:rotate(90deg); }
.portal-home .feature-terms[open] summary .icon { transform:rotate(-90deg); }
.portal-home .feature-terms-copy { padding-top:8px; }
.portal-home .feature-terms-copy p { font-size:17px; line-height:1.5; }
.portal-home .feature-terms-copy .feature-checked { font-size:12px; margin-top:8px; }
.portal-home .feature-visual { display:block; min-width:0; }
.portal-home .feature-visual figure { margin:0; }
.portal-home .feature-visual img { width:100%; height:248px; object-fit:contain; display:block; transform:none; }
.portal-home .feature-visual figcaption { font-size:12px; line-height:1.5; color:var(--inverse-secondary); margin-top:16px; text-align:center; }
.portal-home .feature-controls { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:24px 16px; }
.portal-home .feature-topics { display:grid; grid-template-columns:repeat(4,minmax(80px,1fr)); gap:8px; }
.portal-home .feature-topics button { display:flex; align-items:center; justify-content:center; min-height:48px; width:auto; padding:8px 16px; font-size:17px; font-weight:400; color:var(--inverse-secondary); border-radius:12px; }
.portal-home .feature-topics button[aria-pressed=true] { background:var(--graphite-raised); color:var(--inverse); font-weight:650; }
.portal-home .feature-topics button:hover { background:var(--graphite-raised); color:var(--inverse); }
.portal-home .feature-paging { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.portal-home .feature-count { color:var(--inverse-secondary); font-size:14px; margin-right:8px; }
.portal-home .feature-paging button { width:44px; min-width:44px; height:44px; padding:0; display:grid; place-items:center; background:var(--graphite-raised); color:var(--inverse); border-radius:12px; }
.portal-home .feature-paging button:hover { background:var(--dark-line); }
.portal-home .topic-label { position:static; display:inline; width:auto; height:auto; overflow:visible; clip-path:none; white-space:nowrap; }
/* Responsive product rows share five tracks; restricted products sit outside the shelf. */
.portal-home .card-shelf { padding-block:48px 64px; }
.portal-home .card-basics { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:48px; padding-bottom:48px; }
.portal-home .card-basics h2 { margin:0 0 8px; font-size:20px; font-weight:650; line-height:1.4; }
.portal-home .card-basics-copy p { max-width:48ch; font-size:17px; line-height:1.65; color:var(--secondary); }
.portal-home .card-basics .text-link { margin-top:8px; min-height:44px; font-size:14px; color:var(--ink); font-weight:650; }
.portal-home .card-basics-example { padding:24px; background:var(--surface); border-radius:12px; }
.portal-home .card-basics-example>p { font-size:14px; color:var(--secondary); margin:0 0 16px; }
.portal-home .card-basics-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:0; padding:0; list-style:none; }
.portal-home .card-basics-flow li { position:relative; font-size:17px; font-weight:650; line-height:1.5; white-space:nowrap; }
.portal-home .card-basics-flow li+li::before { content:'→'; position:absolute; right:calc(100% + 8px); color:var(--secondary); font-weight:400; }
.portal-home .section-heading { gap:32px; margin-bottom:24px; }
.portal-home .section-heading h2 { font-size:32px; line-height:1.3; font-weight:650; color:var(--ink); }
.portal-home .section-eyebrow { color:var(--secondary); font-size:14px; margin-bottom:8px; }
.portal-home .section-heading .text-link { min-height:44px; font-size:14px; color:var(--ink); }
.portal-home .shelf-heading-links { display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.portal-home .text-link:hover { color:var(--action); }
.portal-home .text-link:hover svg { transform:none; }
.portal-home .card-shelf-track { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:152px minmax(56px,auto) minmax(64px,auto) minmax(56px,auto) minmax(80px,auto); grid-auto-flow:row; grid-auto-columns:auto; overflow:visible; column-gap:24px; row-gap:0; padding:0; }
.portal-home .shelf-card { display:grid; grid-row:span 5; grid-template-rows:subgrid; align-items:stretch; min-width:0; color:var(--ink); text-align:left; border-radius:12px; }
.portal-home .shelf-card [data-slot] { margin:0; height:100%; width:100%; align-self:stretch; box-sizing:border-box; }
.portal-home .shelf-art { display:flex; align-items:center; justify-content:center; height:100%; padding:16px; background:var(--surface); border-radius:12px; }
.portal-home .shelf-art img { display:block; width:100%; max-width:192px; height:120px; object-fit:contain; transform:none; transition:none; }
.portal-home .shelf-art.brand-art img { width:100%; max-width:144px; height:40px; }
.portal-home .shelf-card:hover .shelf-art { background:var(--surface-hover); }
.portal-home .shelf-card:hover .shelf-art img { transform:none; }
.portal-home .shelf-card h3 { display:flex; align-items:center; padding-block:8px; text-align:left; font-size:20px; font-weight:650; line-height:1.4; color:var(--ink); white-space:normal; text-overflow:clip; overflow:visible; }
.portal-home .shelf-subtitle { display:block; padding:0 0 8px; text-align:left; font-size:17px; line-height:1.5; color:var(--secondary); overflow:visible; -webkit-line-clamp:unset; }
.portal-home .shelf-state { display:block; padding:8px 0; text-align:left; font-size:14px; line-height:1.5; color:var(--secondary); overflow:visible; -webkit-line-clamp:unset; }
.portal-home .shelf-action { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 0 40px; min-height:80px; font-size:14px; font-weight:650; color:var(--ink); }
.portal-home .shelf-card:hover .shelf-action { color:var(--action); }
.portal-home .shelf-action .icon { width:16px; height:16px; flex-shrink:0; }
.portal-home .shelf-note { max-width:100ch; margin-top:16px; font-size:12px; line-height:1.6; color:var(--muted); }
.portal-home .shelf-note time { white-space:nowrap; }
.portal-home .shelf-scroll-hint { display:none; }
.portal-home .shelf-art {--card-art-height:120px;--card-art-width:192px}
.portal-home .shelf-card-crop {display:block;position:relative;overflow:hidden;width:min(100%,var(--card-art-width),calc(var(--card-art-height)*var(--card-ratio)));aspect-ratio:var(--card-ratio);border-radius:12px;flex-shrink:0}
.portal-home .shelf-card-crop img {position:absolute;display:block;left:var(--source-left);top:var(--source-top);width:var(--source-width);max-width:none;height:auto}
.portal-home .shelf-restricted { display:grid; grid-template-columns:144px minmax(0,1fr) auto; gap:32px; align-items:center; margin-top:32px; padding:24px; background:var(--surface); border-radius:12px; }
.portal-home .shelf-restricted>img { width:100%; height:auto; }
.portal-home .shelf-restricted-copy { min-width:0; }
.portal-home .shelf-restricted-copy h3 { margin:0 0 8px; font-size:20px; line-height:1.4; font-weight:650; }
.portal-home .shelf-restricted-copy p { margin:0; font-size:14px; line-height:1.5; color:var(--secondary); }
.portal-home .shelf-restricted-copy .shelf-restricted-state { font-weight:650; color:var(--ink); margin-bottom:8px; }
.portal-home .shelf-restricted-action { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:8px 16px; min-height:48px; background:var(--paper); color:var(--ink); border-radius:12px; font-size:14px; font-weight:650; text-decoration:none; }
.portal-home .shelf-restricted-action:hover { background:var(--surface-hover); }
.portal-home .shelf-restricted-action .icon { width:16px; height:16px; flex-shrink:0; }
/* The reading surface gives a real answer before asking readers to open a guide. */
.portal-home .magazine { padding-block:48px 64px; background:var(--paper); color:var(--ink); }
.portal-home .story-layout { display:block; }
.portal-home .lead-story { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; padding:32px; background:var(--canvas); border-radius:12px; }
.portal-home .lead-story-copy { padding:0; }
.portal-home .story-category { font-size:14px; color:var(--secondary); line-height:1.5; margin:0 0 8px; }
.portal-home .lead-story h3 { font-size:32px; font-weight:650; line-height:1.4; margin:0; color:var(--ink); }
.portal-home .story-summary { font-size:17px; line-height:1.65; color:var(--secondary); margin:0; }
.portal-home .story-read-link { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; margin-top:16px; font-size:14px; font-weight:650; color:var(--ink); }
.portal-home .story-read-link .icon { width:16px; height:16px; }
.portal-home .story-meta,.portal-home .story-row .story-meta { font-size:12px; line-height:1.5; gap:8px; color:var(--muted); margin-top:8px; }
.portal-home .story-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px; row-gap:32px; margin-top:32px; }
.portal-home .story-row { display:grid; grid-template-columns:minmax(0,1fr) 24px; gap:24px; align-items:start; padding:8px 0; min-width:0; }
.portal-home .story-row-copy { min-width:0; }
.portal-home .story-row h3 { font-size:20px; font-weight:650; line-height:1.4; color:var(--ink); margin:0; }
.portal-home .story-row-summary { display:block; font-size:17px; line-height:1.65; color:var(--secondary); margin:8px 0 0; }
.portal-home .story-row>.icon { display:block; width:16px; height:16px; justify-self:end; margin-top:32px; color:var(--secondary); }
.portal-home .story-row:hover h3,.portal-home .lead-story:hover h3,.portal-home .lead-story:hover .story-read-link { color:var(--action); }
@media(min-width:1600px) {
  .portal-home .feature-slide { gap:64px; }
  .portal-home .feature-visual img { height:264px; }
  .portal-home .card-shelf-track { grid-auto-rows:176px minmax(56px,auto) minmax(64px,auto) minmax(56px,auto) minmax(80px,auto); }
  .portal-home .shelf-art {--card-art-height:144px;--card-art-width:224px}
  .portal-home .shelf-art img { max-width:224px; height:144px; }
  .portal-home .shelf-art.brand-art img { max-width:160px; height:40px; }
  .portal-home .story-list { column-gap:64px; }
}
@media(max-width:1100px) {
  .portal-home .feature-slide { grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:32px; }
  .portal-home .feature-copy h1,.portal-home .feature-copy h2 { font-size:40px; }
  .portal-home .feature-visual img { height:208px; }
  .portal-home .feature-benefit { flex-direction:column; align-items:flex-start; gap:8px; }
  .portal-home .card-basics { gap:32px; }
  .portal-home .card-basics-example { padding:16px; }
  .portal-home .card-basics-flow { gap:24px; }
  .portal-home .card-basics-flow li { font-size:14px; }
  .portal-home .card-shelf-track { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 24px; }
  .portal-home .shelf-card { scroll-snap-align:start; }
  .portal-home .shelf-restricted { grid-template-columns:112px minmax(0,1fr); gap:24px; }
  .portal-home .shelf-restricted-action { grid-column:2; justify-self:start; }
  .portal-home .lead-story { gap:32px; padding:24px; }
  .portal-home .story-list { column-gap:32px; }
}
@media(max-width:767px) {
  .portal-home .feature-wrap { padding-top:16px; }
  .portal-home .feature-slide { grid-template-columns:minmax(0,1fr) 104px; gap:8px 16px; align-items:start; }
  .portal-home .feature-copy { display:contents; }
  .portal-home .feature-copy h1,.portal-home .feature-copy h2 { grid-column:1/-1; margin:0; font-size:32px; line-height:1.2; }
  .portal-home .feature-description { grid-column:1/-1; grid-row:auto; font-size:17px; line-height:1.5; max-width:none; }
  .portal-home .feature-benefit { display:flex; flex-direction:column; grid-column:1; grid-row:3; gap:4px; margin:0; align-self:center; }
  .portal-home .feature-benefit .feature-value { font-size:28px; }
  .portal-home .feature-bybit .feature-benefit .feature-value,.portal-home .feature-okx .feature-benefit .feature-value { font-size:17px; white-space:normal; }
  .portal-home .feature-benefit p,.portal-home .feature-benefit p span { font-size:14px; line-height:1.5; }
  .portal-home .feature-visual { grid-column:2; grid-row:3; align-self:center; }
  .portal-home .feature-visual img { height:72px; }
  .portal-home .feature-visual figcaption { font-size:12px; margin-top:4px; }
  .portal-home .feature-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-column:1/-1; gap:8px; margin-top:8px; }
  .portal-home .feature-copy .button { grid-row:auto; grid-column:1; min-height:48px; width:100%; padding:8px 16px; justify-content:space-between; font-size:14px; gap:8px; }
  .portal-home .feature-terms { display:contents; }
  .portal-home .feature-terms summary { grid-column:2; grid-row:1; min-height:48px; gap:4px; font-size:14px; }
  .portal-home .feature-terms-copy { grid-column:1/-1; }
  .portal-home .feature-terms:not([open]) .feature-terms-copy { display:none; }
  .portal-home .feature-controls { gap:0; padding-block:8px; }
  .portal-home .feature-topics { flex:1; grid-template-columns:minmax(64px,1.5fr) repeat(3,minmax(44px,1fr)); gap:0; }
  .portal-home .feature-topics button { min-width:0; width:100%; padding:8px 4px; min-height:44px; font-size:14px; }
  .portal-home .feature-paging { gap:0; }
  .portal-home .feature-count { display:none; }
  .portal-home .card-shelf { padding-block:32px 48px; }
  .portal-home .card-basics { grid-template-columns:1fr; gap:16px; padding-bottom:32px; }
  .portal-home .card-basics h2 { font-size:20px; }
  .portal-home .card-basics-copy p { max-width:none; }
  .portal-home .card-basics-example { padding:16px; }
  .portal-home .card-basics-example>p { margin-bottom:8px; }
  .portal-home .card-basics-flow { gap:24px; }
  .portal-home .card-basics-flow li { font-size:14px; }
  .portal-home .section-heading { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:16px; }
  .portal-home .section-heading h2 { font-size:26px; }
  .portal-home .shelf-heading-links { gap:24px; }

  .portal-home .card-shelf-track { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; grid-auto-rows:128px minmax(64px,auto) minmax(80px,auto) minmax(64px,auto) minmax(80px,auto); }
  .portal-home .shelf-art {--card-art-height:96px;--card-art-width:112px}
  .portal-home .shelf-art img { max-width:112px; height:96px; }
  .portal-home .shelf-art.brand-art img { max-width:112px; height:40px; }
  .portal-home .shelf-note { margin-top:0; font-size:12px; }
  .portal-home .shelf-restricted { grid-template-columns:1fr; gap:16px; padding:24px; }
  .portal-home .shelf-restricted>img { width:112px; }
  .portal-home .shelf-restricted-action { grid-column:1; justify-self:stretch; }
  .portal-home .magazine { padding-block:32px 48px; }
  .portal-home .lead-story { grid-template-columns:1fr; gap:16px; padding:24px; }
  .portal-home .lead-story h3 { font-size:26px; }
  .portal-home .story-list { grid-template-columns:1fr; row-gap:24px; margin-top:24px; }
  .portal-home .story-row { gap:16px; padding:8px 0; }
  .portal-home .story-row .story-category { font-size:14px; margin-bottom:8px; }
  .portal-home .story-row h3 { font-size:20px; }
}
@media(max-width:767px) and (max-height:600px) {
  .portal-home .feature-wrap { padding-top:8px; }
  .portal-home .feature-slide { row-gap:4px; }
  .portal-home .feature-actions { margin-top:0; }
}
@media(prefers-reduced-motion:reduce) {
  .portal-home .feature-modern * { animation:none!important; transition:none!important; }
}

.portal-home .shelf-card-crop img {max-width:none;height:auto}