/* Borro's site pages around the landing (2026-10-20 go-live build: "get the entire site ready to go live"): the shared
   header menu and footer, and the reading pages (Products, Security, Terms, Privacy, Insights and its notes, the
   Robinhood Earn page, Prices and the 404). Over pro.css and flair.css, before dark.css; tokens only, so dark mode
   follows dark.css, and the few fixed shades have dark overrides at the end. */

/* ------------------------------------------------------------------ shared */
.skip { position: absolute; left: 12px; top: -48px; z-index: 60; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--canvas); font-weight: 600; text-decoration: none; transition: top .15s; }
.skip:focus { top: 12px; }
[id] { scroll-margin-top: 92px; }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--accent); }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .92em; letter-spacing: -.01em; }
.link { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: text-decoration-color .15s; }
.link:hover { text-decoration-color: var(--ink); }
.arrow::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: translateY(-1px) rotate(45deg); transition: transform .2s var(--ease); }
a:hover > .arrow::after, a.arrow:hover::after { transform: translate(3px, -1px) rotate(45deg); }

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sk-num { display: inline-block; width: 3.4ch; height: .78em; border-radius: 10px; background: var(--sunk); vertical-align: -.04em; }

/* ------------------------------------------------------------------ the hero ticket's market list: the market row
   opens a list over the card, inside it, so the card never changes height */
.tk-pickwrap { position: relative; margin-top: 12px; }
.tk-pick { display: flex; width: calc(100% + 20px); margin: 0 -10px; padding: 8px 10px; border: 1px solid transparent; border-radius: 12px; background: none; text-align: left; cursor: pointer; transition: background .15s, border-color .15s; }
.ticket .tk-pick { margin-top: 0; }
.tk-pick:hover, .tk-pick[aria-expanded="true"] { background: var(--sunk); border-color: var(--line); }
.tk-pick .tk-name { min-width: 0; }
.tk-chev { flex: none; margin-left: 2px; color: var(--text-3); transition: transform .2s var(--ease); }
.tk-pick[aria-expanded="true"] .tk-chev { transform: rotate(180deg); }
.tk-menu { position: absolute; z-index: 5; left: -10px; right: -10px; top: calc(100% + 6px); max-height: min(380px, 60vh); overflow: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 24px 50px -20px rgba(13, 13, 15, .32); animation: menu-in .18s var(--ease); }
.tk-menu[hidden] { display: none; }
.tk-menu-k { display: flex; justify-content: space-between; padding: 6px 10px 8px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.tk-opt { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; }
.tk-opt:hover, .tk-opt:focus-visible { background: var(--sunk); outline: 0; }
.tk-opt[aria-selected="true"] { background: rgba(220, 116, 64, .06); }
:root[data-theme="dark"] .tk-opt[aria-selected="true"] { background: rgba(230, 110, 55, .14); }
.tk-opt img { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: #fff; }
.tk-opt b { display: block; font-size: 15px; font-weight: 650; }
.tk-opt small { display: block; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-opt .r { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.band-go { margin-top: 28px; }
.band .btn.line { color: #fff; border-color: rgba(255, 255, 255, .28); }
.band .btn.line:hover { border-color: #fff; }

/* ------------------------------------------------------------------ the header: every page in the nav on a wide
   screen; below 1280px the same pages behind the menu button. */
.head { z-index: 40; }
.head .nav { gap: 2px; }
.head .nav a { padding: 8px 11px; }
.menu { display: none; flex: none; }
.menu > summary { list-style: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover, .menu[open] > summary { color: var(--ink); border-color: var(--line-2); }
.menu[open] > summary { background: var(--sunk); }
.menu .i-close, .menu[open] .i-open { display: none; }
.menu[open] .i-close { display: block; }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -36px rgba(13, 13, 15, .35); max-height: calc(100vh - 71px); max-height: calc(100dvh - 71px); overflow: auto; overscroll-behavior: contain; }
.menu[open] .menu-panel { animation: menu-in .2s var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
.menu-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 32px; padding: 24px 0 32px; }
.menu-in p { padding: 6px 0; font-size: 13px; font-weight: 600; color: var(--text-3); }
.menu-in a:not(.btn) { display: block; width: fit-content; padding: 9px 0; font-size: 17px; font-weight: 600; color: var(--ink); text-decoration: none; }
.menu-in a:not(.btn):hover { color: var(--accent); }
.menu-in a[aria-current="page"] { color: var(--accent); }
.menu-cta .btn { height: 50px; font-size: 16px; }
.menu-cta { display: none; }
@media (max-width: 1279px) {
  .head .nav { display: none; }
  .menu { display: block; }
  .head-in > .theme-toggle { margin-left: auto; }
}
@media (max-width: 760px) {
  .menu-in { grid-template-columns: 1fr 1fr; gap: 4px 24px; padding: 16px 0 24px; }
  .menu-in a:not(.btn) { padding: 8px 0; font-size: 16px; }
  .menu-cta { display: flex; grid-column: 1 / -1; margin-top: 12px; }
  .menu-cta .btn { width: 100%; }
  .head-in { gap: 10px; }
}
@media (max-width: 400px) {
  .head-in > .btn.sm { padding: 0 12px; }
}

/* ------------------------------------------------------------------ the footer: the site map, the plain line, the
   wordmark */
.foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); align-items: start; gap: 40px 64px; padding: 56px 0 40px; }
.foot-brand p { margin-top: 14px; max-width: 22em; font-size: 15px; color: var(--text-2); }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; }
.foot .foot-cols { display: grid; }
.foot-cols p { margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.foot-cols a { display: block; width: fit-content; padding: 5px 0; color: var(--text-2); font-size: 15px; text-decoration: none; }
.foot-cols a:hover { color: var(--ink); }
.foot small { padding-top: 24px; border-top: 1px solid var(--line); max-width: none; }
@media (max-width: 960px) {
  .foot-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-in { padding: 44px 0 32px; }
}

/* ------------------------------------------------------------------ a page's head */
.pg-head { position: relative; overflow: hidden; isolation: isolate; padding: 64px 0 56px; border-bottom: 1px solid var(--line); }
.pg-head .horizon { width: 70%; right: -18%; bottom: -70%; height: 150%; opacity: .5; }
.pg-head h1 { margin-top: 14px; max-width: 20ch; font: 700 clamp(40px, 4.4vw, 66px)/1.02 var(--display); font-stretch: 110%; letter-spacing: -.04em; text-wrap: balance; }
.pg-head .lede { margin-top: 20px; max-width: 40em; font-size: 19px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.pg-head .ctas { margin-top: 28px; }
.pg-head + .section { padding-top: 56px; }
.sec-k { font-size: 13px; font-weight: 600; color: var(--text-3); }
@media (max-width: 760px) {
  .pg-head { padding: 40px 0 36px; }
  .pg-head h1 { font-size: 40px; }
  .pg-head .lede { font-size: 17px; }
  .pg-head .horizon { width: 140%; right: -50%; bottom: -60%; }
}

/* ------------------------------------------------------------------ Products */
.surfaces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.surface { display: flex; flex-direction: column; padding: 24px 22px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); text-decoration: none; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .2s; }
.surface:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: 0 26px 50px -34px rgba(13, 13, 15, .32); }
.surface .ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--sunk); color: var(--accent); }
.surface .ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.surface h3 { margin-top: 18px; font: 700 21px/1.15 var(--display); font-stretch: 104%; letter-spacing: -.02em; }
.surface p { margin-top: 8px; font-size: 15px; color: var(--text-2); }
.surface .go { margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 600; color: var(--ink); }
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); overflow: hidden; }
.feature .copy { display: flex; flex-direction: column; padding: 30px 30px 28px; }
.feature h3 { font: 700 28px/1.1 var(--display); font-stretch: 106%; letter-spacing: -.025em; }
.feature p { margin-top: 12px; color: var(--text-2); }
.feature .btn { margin-top: auto; align-self: flex-start; }
.feature .copy p + .btn { margin-top: 26px; }
.feature .viz { display: grid; place-items: center; align-content: center; gap: 10px; padding: 28px 20px; background: linear-gradient(180deg, #F7F7F5, #FFFFFF); border-left: 1px solid var(--line); text-align: center; }
.feature .viz .figure { font: 700 clamp(48px, 4.6vw, 68px)/1 var(--display); font-stretch: 112%; letter-spacing: -.04em; background: var(--sunset); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.feature .viz small { max-width: 18em; font-size: 13px; color: var(--text-3); }
@media (max-width: 1279px) {
  .surfaces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .features { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .surfaces { grid-template-columns: 1fr; }
  .feature { grid-template-columns: 1fr; }
  .feature .viz { border-left: 0; border-top: 1px solid var(--line); order: -1; }
}

/* ------------------------------------------------------------------ Security */
.holds { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); overflow: hidden; }
.holds ol { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 40px 32px 34px; counter-reset: h; }
.holds ol::before { content: ""; position: absolute; left: 32px; right: 32px; top: 61px; height: 1px; background: var(--line-2); }
.holds ol::after { content: ""; position: absolute; left: 32px; top: 58px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(220, 116, 64, .16); animation: travel 6s var(--ease) infinite; }
@keyframes travel { 0% { left: 32px; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 39px); opacity: 0; } }
.holds li { position: relative; counter-increment: h; }
.holds li b { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 15px; font-weight: 650; box-shadow: 0 1px 2px rgba(13, 13, 15, .05); }
.holds li b::before { content: counter(h); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sunk); font-size: 13px; color: var(--text-2); }
.holds li p { margin-top: 14px; max-width: 18em; font-size: 15px; color: var(--text-2); }
.holds-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); background: var(--canvas); }
.holds-foot p { padding: 20px 32px; font-size: 15px; color: var(--text-2); }
.holds-foot p + p { border-left: 1px solid var(--line); }
.holds-foot span { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.contracts { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); overflow: hidden; }
.contracts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 15px 22px; border-bottom: 1px solid var(--line); }
.contracts li:last-child { border-bottom: 0; }
.contracts span { font-weight: 600; }
.contracts a { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); text-decoration: none; }
.contracts a:hover { color: var(--ink); }
.contracts a::after { content: ""; width: 12px; height: 12px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2.5h5v5M9.5 2.5l-7 7' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2.5h5v5M9.5 2.5l-7 7' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .6; }
.contracts .short { display: none; }
.contracts-foot { margin-top: 16px; }
.mk.onchain th, .mk.onchain td { text-align: left; }
.mk.onchain a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); text-decoration: none; }
.mk.onchain a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mk.onchain .dim { color: var(--text-3); }
@media (max-width: 760px) {
  .mk.onchain th:nth-child(n+4), .mk.onchain td:nth-child(n+4) { display: table-cell; }
}
.sec-cols { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.sec-cols .sec-head { display: block; }
.sec-cols .sec-head p { margin-top: 12px; }
@media (max-width: 1100px) {
  .holds ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .holds ol::before, .holds ol::after { display: none; }
  .sec-cols { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 760px) {
  .holds ol { grid-template-columns: 1fr; padding: 28px 22px; }
  .holds-foot { grid-template-columns: 1fr; }
  .holds-foot p { padding: 18px 22px; }
  .holds-foot p + p { border-left: 0; border-top: 1px solid var(--line); }
  .contracts li { grid-template-columns: 1fr; gap: 4px; padding: 14px 18px; }
  .contracts .full { display: none; }
  .contracts .short { display: inline; }
}

/* ------------------------------------------------------------------ Terms and Privacy: the legal text as written,
   with its contents beside it on a wide screen. main.legal keeps the live page's own structure (i18n.js swaps a
   translation in whole), so the layout is placed on that structure: a translation's note, the title, the date, the
   lead, then the contents on the left and the sections on the right. */
main.legal { display: grid; grid-template-columns: minmax(200px, 270px) minmax(0, 760px); justify-content: center; column-gap: 80px; padding: 64px 0 0; }
/* Rows 1 to 4 are the head's, whether or not a translation's note fills row 1: this empty item keeps the sections from
   being placed up there. */
main.legal::before { content: ""; grid-column: 1 / -1; grid-row: 1 / 5; }
main.legal > .governs { grid-column: 1 / -1; grid-row: 1; margin-bottom: 24px; padding: 12px 16px; border-radius: 12px; background: var(--sunk); border: 1px solid var(--line); font-size: 15px; }
main.legal > h1 { grid-column: 1 / -1; grid-row: 2; font: 700 clamp(40px, 4.4vw, 64px)/1.02 var(--display); font-stretch: 110%; letter-spacing: -.04em; }
main.legal > .updated { grid-column: 1 / -1; grid-row: 3; margin-top: 14px; font-size: 14px; color: var(--text-3); }
main.legal > .lead { grid-column: 1 / -1; grid-row: 4; margin: 20px 0 48px; max-width: 46em; font-size: 19px; line-height: 1.55; color: var(--text-2); }
main.legal > .toc { grid-column: 1; grid-row: 5 / span 60; align-self: start; position: sticky; top: 92px; padding-top: 4px; }
main.legal > .toc ol { list-style: none; padding: 0; counter-reset: toc; border-left: 1px solid var(--line); }
main.legal > .toc li { counter-increment: toc; }
main.legal > .toc a { display: grid; grid-template-columns: 26px 1fr; padding: 5px 0 5px 16px; margin-left: -1px; border-left: 1px solid transparent; font-size: 14px; line-height: 1.4; color: var(--text-2); text-decoration: none; }
main.legal > .toc a::before { content: counter(toc, decimal-leading-zero); font-size: 12px; color: var(--text-3); padding-top: 1px; font-variant-numeric: tabular-nums; }
main.legal > .toc a:hover { color: var(--ink); border-left-color: var(--ink); }
main.legal > section { grid-column: 2; padding: 0 0 36px; }
main.legal > section + section { padding-top: 36px; border-top: 1px solid var(--line); }
main.legal h2 { display: flex; align-items: baseline; gap: 14px; font: 700 24px/1.2 var(--display); font-stretch: 104%; letter-spacing: -.02em; }
main.legal h2 span { font: 600 13px var(--ui); color: var(--accent); font-variant-numeric: tabular-nums; }
main.legal section p, main.legal section li { font-size: 17px; line-height: 1.7; color: var(--text-2); }
main.legal section p { margin-top: 14px; }
main.legal section b { color: var(--ink); font-weight: 650; }
main.legal section ul { margin-top: 14px; padding: 0; list-style: none; }
main.legal section li { position: relative; padding-left: 22px; margin-top: 10px; }
main.legal section li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--sunset); }
main.legal a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
main.legal a:hover { text-decoration-color: var(--ink); }
main.legal > .toc a { text-decoration: none; }
@media (max-width: 1000px) {
  main.legal { grid-template-columns: minmax(0, 1fr); padding-top: 40px; }
  main.legal > .toc { grid-column: 1; grid-row: 5; position: static; margin-bottom: 40px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
  main.legal > .toc ol { border-left: 0; columns: 2; column-gap: 24px; }
  main.legal > .toc a { padding: 5px 0; margin: 0; border: 0; break-inside: avoid; }
  main.legal > section { grid-column: 1; }
}
@media (max-width: 760px) {
  main.legal > h1 { font-size: 40px; }
  main.legal > .lead { font-size: 17px; margin-bottom: 32px; }
  main.legal > .toc ol { columns: 1; }
  main.legal section p, main.legal section li { font-size: 16px; }
}

/* ------------------------------------------------------------------ Insights: the index */
.ins-feat { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); overflow: hidden; text-decoration: none; transition: box-shadow .45s var(--ease), transform .45s var(--ease); }
.ins-feat:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -38px rgba(13, 13, 15, .35); }
.ins-feat-art { position: relative; height: clamp(280px, 22vw, 400px); overflow: hidden; background: #0E1033; }
.ins-feat-art img, .ins-thumb img, .ins-art img, .lcard-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ins-feat:hover .ins-feat-art img, .ins-row:hover .ins-thumb img, .lcard:hover .lcard-art img { transform: scale(1.03); }
.ins-feat-copy { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 40px 48px; }
.ins-cat { font-size: 13px; font-weight: 600; color: var(--accent); }
.ins-feat-title { font: 700 clamp(32px, 3vw, 46px)/1.04 var(--display); font-stretch: 108%; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.ins-feat-sub { font-size: 17px; color: var(--text-2); }
.ins-meta { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-3); }
.ins-meta b { color: var(--ink); font-weight: 600; }
.ins-meta span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px 3px 0; border-radius: 50%; background: var(--text-3); }
.ins-feat .go { margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--ink); }
.ins-list { border-top: 1px solid var(--line); }
.ins-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.ins-thumb { display: block; aspect-ratio: 6 / 5; border-radius: 12px; overflow: hidden; background: #0E1033; }
.ins-row-copy { display: grid; gap: 6px; }
.ins-row-title { font: 700 23px/1.15 var(--display); font-stretch: 104%; letter-spacing: -.02em; color: var(--ink); }
.ins-row-sub { color: var(--text-2); }
.ins-row .go { font-size: 14px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.ins-row:hover .go { color: var(--ink); }
@media (max-width: 960px) {
  .ins-feat { grid-template-columns: 1fr; }
  .ins-feat-art { height: auto; aspect-ratio: 16 / 10; }
  .ins-feat-copy { padding: 28px 26px 30px; }
}
@media (max-width: 760px) {
  .ins-row { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 18px 0; }
  .ins-row .go { display: none; }
  .ins-row-title { font-size: 18px; }
  .ins-row-sub { font-size: 15px; }
}

/* ------------------------------------------------------------------ Insights: a note. The article stays at
   main.ins article.ins-article .ins-prose: the app's in-app reader takes the note from there. */
main.ins { padding-top: 56px; }
.ins-article { max-width: 760px; margin-inline: auto; }
.ins-crumb { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text-3); }
.ins-crumb a { color: var(--accent); text-decoration: none; }
.ins-crumb a:hover { text-decoration: underline; }
.ins-article h1 { margin-top: 16px; font: 700 clamp(38px, 4vw, 58px)/1.03 var(--display); font-stretch: 108%; letter-spacing: -.04em; text-wrap: balance; }
.ins-sub { margin-top: 16px; font-size: 20px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.ins-article > .ins-meta { margin-top: 18px; }
.ins-art { margin: 36px 0 0; aspect-ratio: 16 / 10; width: 100%; border-radius: 20px; overflow: hidden; background: #0E1033; }
.ins-prose { margin-top: 40px; }
.ins-prose p { margin-top: 22px; font-size: 18px; line-height: 1.72; color: var(--text-2); text-wrap: pretty; }
.ins-prose p:first-child { margin-top: 0; font-size: 20px; line-height: 1.6; color: var(--ink); }
.ins-prose strong { color: var(--ink); font-weight: 650; }
.ins-prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; overflow-wrap: anywhere; }
.ins-prose a:hover { text-decoration-color: var(--ink); }
.ins-more { max-width: 1200px; margin: 88px auto 0; padding-top: 40px; border-top: 1px solid var(--line); }
.ins-more h2 { font: 700 28px/1.1 var(--display); font-stretch: 106%; letter-spacing: -.025em; }
.learn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.lcard { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 22px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); text-decoration: none; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.lcard:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -34px rgba(13, 13, 15, .32); }
.lcard-art { display: block; aspect-ratio: 6 / 5; border-radius: 12px; overflow: hidden; background: #0E1033; }
.lcard-copy { display: grid; gap: 8px; }
.lcard-title { font: 700 21px/1.15 var(--display); font-stretch: 104%; letter-spacing: -.02em; color: var(--ink); }
.ins-back { margin-top: 28px; }
@media (max-width: 960px) {
  .learn { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  main.ins { padding-top: 36px; }
  .ins-article h1 { font-size: 36px; }
  .ins-sub { font-size: 18px; }
  .ins-art { margin-top: 26px; border-radius: 16px; }
  .ins-prose p { font-size: 17px; }
  .ins-prose p:first-child { font-size: 18px; }
  .lcard { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 12px; }
  .lcard-title { font-size: 18px; }
  .ins-more { margin-top: 64px; }
}

/* ------------------------------------------------------------------ From Robinhood Earn */
.pg-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 72px; align-items: center; }
.pg-split h1 { max-width: 14ch; }
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vs-card { padding: 22px 26px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.vs-card .k { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.vs-card .k span { font-weight: 500; color: var(--text-3); }
.vs-card strong { display: block; margin-top: 14px; font: 700 clamp(46px, 4.4vw, 64px)/1 var(--display); font-stretch: 110%; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--text-2); min-height: 1em; }
.vs-card small { display: block; margin-top: 10px; font-size: 14px; color: var(--text-3); min-height: 1.5em; }
.vs-card.lit { position: relative; border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--sunset) border-box; border: 1.5px solid transparent; box-shadow: 0 30px 70px -40px rgba(220, 116, 64, .55); }
.vs-card.lit strong { color: var(--ink); }
.vs-asof { margin-top: 16px; max-width: 46em; font-size: 14px; color: var(--text-3); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.facts li { padding: 20px 22px; }
.facts li + li { border-left: 1px solid var(--line); }
.facts span { display: block; font-size: 13px; font-weight: 600; color: var(--text-3); }
.facts b { display: block; margin-top: 6px; font-weight: 600; line-height: 1.45; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.steps li { counter-increment: s; display: flex; flex-direction: column; padding: 22px 22px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--sunk); font: 700 16px var(--display); color: var(--accent); }
.steps .app { margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.steps b { margin-top: 4px; font: 700 19px/1.2 var(--display); font-stretch: 104%; letter-spacing: -.015em; }
.steps p { margin-top: 10px; font-size: 15px; color: var(--text-2); }
.steps .path { color: var(--ink); font-weight: 600; }
.know { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.know h3 { font-size: 16px; font-weight: 650; }
.know p { margin-top: 8px; font-size: 15px; color: var(--text-2); }
.know a { color: var(--ink); }
@media (max-width: 1100px) {
  .pg-split { grid-template-columns: minmax(0, 1fr); }
  .vs { max-width: 760px; }
  .steps, .know { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts li:nth-child(3) { border-left: 0; }
  .facts li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .vs, .steps, .know, .facts { grid-template-columns: 1fr; }
  .facts li + li { border-left: 0; border-top: 1px solid var(--line); }
}

/* ------------------------------------------------------------------ Prices and the 404: one card in the middle */
.stub { display: grid; place-items: center; min-height: calc(100vh - 71px - 120px); padding: 56px 0; text-align: center; }
.stub-in { display: grid; justify-items: center; max-width: 640px; }
.stub h1 { margin-top: 14px; font: 700 clamp(40px, 4.4vw, 64px)/1.02 var(--display); font-stretch: 110%; letter-spacing: -.04em; text-wrap: balance; }
.stub p.lede { margin-top: 18px; font-size: 18px; color: var(--text-2); text-wrap: pretty; }
.stub .ctas { justify-content: center; }
.stub .fine { margin-top: 22px; }
.stub-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; }
.stub-links a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.stub-links a:hover { color: var(--ink); border-color: var(--line-2); }

/* ------------------------------------------------------------------ dark */
:root[data-theme="dark"] .menu-panel { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .feature .viz { background: linear-gradient(180deg, #17171B, #131316); }
:root[data-theme="dark"] .surface:hover, :root[data-theme="dark"] .ins-feat:hover, :root[data-theme="dark"] .lcard:hover { box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .vs-card.lit { box-shadow: 0 30px 70px -40px rgba(220, 116, 64, .4); }
:root[data-theme="dark"] .holds li b { box-shadow: none; }
:root[data-theme="dark"] .skip { color: #0A0A0B; }

@media (prefers-reduced-motion: reduce) {
  .holds ol::after { animation: none; left: 32px; opacity: 1; }
  .menu[open] .menu-panel { animation: none; }
  .surface, .ins-feat, .lcard, .ins-feat-art img, .ins-thumb img, .lcard-art img { transition: none; }
}