/* Landing page, from the approved investor-demo design (kit.css sections 6–16),
   on our tokens and canonical components. Only what this page uses. */
.landing-shell{max-width:var(--container-app);margin:0 auto;padding:0 var(--sp-5)}
.landing-main{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-10);padding-bottom:0}
.landing-main>*{min-width:0}
.landing .muted{color:var(--fg-muted)}
.landing .num,.landing .px{font-variant-numeric:tabular-nums}
[data-direction=up]{color:var(--ok)}
[data-direction=down]{color:var(--bad)}

/* Home header (4 Oct): the page title style shared with every page
   (product-nav.css), one short line under it; no hero band. */
.home-head{display:grid;gap:var(--sp-2)}
.home-head .lede{margin:0;color:var(--fg-2);font-size:var(--fs-md);max-width:60ch}

/* Status: Open · Closed · Paused. Shapes and colours are base.css (.pill.status). */
.landing .pill.status{position:relative}
.landing .pill.status .skel{width:6ch;min-width:0}
.landing .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Explore */
.explore{overflow:hidden}
.landing [hidden]{display:none}
.explore .tbl-wrap{overflow-x:auto}
.explore .tbl{min-width:720px;border:0;border-radius:0}
.explore .tbl td,.explore .tbl th{vertical-align:middle;white-space:nowrap}
.explore .tbl th:first-child,.explore .tbl td:first-child{padding-left:var(--sp-6)}
.explore .tbl th:last-child,.explore .tbl td:last-child{padding-right:var(--sp-6);text-align:right}
.row-actions{display:inline-flex;gap:var(--sp-2)}
.explore .tbl tbody tr:hover{background:var(--bg-sunk)}
.explore .num{font-variant-numeric:tabular-nums}
.explore .spark{color:var(--accent-ink)}
/* J13: the sparkline cell holds the line's width before it is drawn (landing.js SPARK). */
.explore td.spark{min-width:var(--sp-24)}
.asset{display:flex;gap:var(--sp-3);align-items:center;min-width:0}
.asset b{display:block;font-size:var(--fs-md);color:var(--fg)}
.asset span span:not(.pill):not(.ic):not(.sr):not(.co){color:var(--fg-muted);font-size:var(--fs-xs)}
/* The ticker opens the asset page. */
.asset-link{color:inherit;text-decoration:none}
.asset-link:hover b{text-decoration:underline}
.panel-foot{margin:0;padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--border);font-size:var(--fs-2xs);color:var(--fg-muted)}

/* Section headings: one size, no eyebrow. */
.landing-main h2{margin:0 0 var(--sp-4);font-size:var(--fs-h2);line-height:1.15}
.shead{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6);align-items:baseline;justify-content:space-between}
.shead a{color:var(--link);font-weight:600;text-decoration:none}
.shead a:hover{text-decoration:underline}

/* Key features (owner, 4 Oct): four icon blocks in one row, under Markets, no heading. */
.features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);list-style:none;margin:0;padding:0}
.features li{display:grid;grid-template-columns:auto 1fr;gap:2px var(--sp-3);align-items:center;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4)}
.features svg{grid-row:1/span 2;width:var(--sp-6);height:var(--sp-6);color:var(--fg-2)}
.features b{color:var(--fg)}
.features span{color:var(--fg-muted);font-size:var(--fs-xs)}

@media(max-width:1080px){
 .features{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Phones: the table keeps only what fits. */
@media(max-width:640px){
 .landing-shell{padding:0 var(--sp-4)}
 .landing-main{gap:var(--sp-8)}
 .explore .tbl{min-width:0}
 .explore .tbl td,.explore .tbl th{padding-inline:var(--sp-2)}
 /* F8: star, Asset (with ticker and state), Price and Buy on phones; 24h, volume and trend on wider screens. */
 .explore .tbl th:nth-child(4),.explore .tbl td:nth-child(4),.explore .tbl th:nth-child(5),.explore .tbl td:nth-child(5),.explore .tbl th:nth-child(6),.explore .tbl td:nth-child(6){display:none}
 /* As the colleague's phone Markets: no star column (the trade page has the star). */
 .explore .tbl .star-col{display:none}
 .explore .tbl th:nth-child(2),.explore .tbl td:nth-child(2){padding-left:var(--sp-4)}
 .explore-tools{padding:var(--sp-3) var(--sp-4) 0}
 .explore-search{max-width:none}
 .strip-card{min-width:calc(var(--sp-30) * 2)}
 .asset-venue{display:none}
 .explore .tbl th:first-child,.explore .tbl td:first-child{padding-left:var(--sp-4)}
 .explore .tbl th:last-child,.explore .tbl td:last-child{padding-right:var(--sp-4)}
 /* The row keeps Buy; Sell is one tap away on the asset page. */
 .row-actions .btn:not(.pri){display:none}
 .row-actions .btn{min-height:var(--ctl-sm);padding:0 var(--sp-3)}
 .explore .tbl td,.explore .tbl th{padding-inline:var(--sp-2)}
 .explore .tbl th:last-child{font-size:0}
 /* Two by two. */
 .features{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
 .features li{grid-template-columns:minmax(0,1fr);align-content:start;padding:var(--sp-3)}
 .features svg{grid-row:auto}
 .explore .explore-tabs{margin-inline:var(--sp-4);max-width:calc(100% - var(--sp-8))}
 .explore .explore-tools{flex-wrap:nowrap}
 .explore .explore-search{flex:1 1 0;min-width:0}
 .explore .explore-market{flex:0 0 auto}
 /* A long name wraps rather than pushing Buy or the pill off the row. */
 .explore .tbl td:nth-child(2){white-space:normal;width:100%}
 .explore .tbl .asset-text b{overflow-wrap:anywhere}
}
/* Live prices: a moved price flashes once. The base.css motion kill-switch stops it. */
.tick-up{animation:landing-tick-up 1.2s ease-out}
.tick-down{animation:landing-tick-down 1.2s ease-out}
@keyframes landing-tick-up{0%{color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,transparent)}100%{background:transparent}}
@keyframes landing-tick-down{0%{color:var(--bad);background:color-mix(in srgb,var(--bad) 16%,transparent)}100%{background:transparent}}
/* The whole market row opens the asset page (E28). */
.landing tr[data-href],table.tbl tr[data-href]{cursor:pointer}
table.tbl tr[data-href]:hover>td{background:var(--bg-sunk)}

/* F8 (3 Oct): name first, then ticker · exchange and the market state. */
.asset-text{display:grid;gap:var(--sp-1);min-width:0}
.asset-text .asset-link b{display:block;font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--fg)}
.asset-sub{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2);font-size:var(--fs-xs);color:var(--fg-muted);font-variant-numeric:tabular-nums}
.asset-ticker{font-weight:var(--fw-semibold);color:var(--fg-2)}
.asset-venue{margin-left:calc(var(--sp-1) * -1)}
.explore .tbl th.num,.explore .tbl td.num{text-align:right;font-variant-numeric:tabular-nums}

/* Strip of listed assets (colleague's kit D, 4 Oct): price, 1M change and
   line per asset. Static; scrolls sideways on a phone. */
.markets-strip{min-width:0}
.strip-list{display:flex;gap:var(--sp-3);list-style:none;margin:0;padding:0;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
.strip-list>li{flex:0 0 auto;scroll-snap-align:start}
.strip-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;min-width:calc(var(--sp-30) * 2.4);padding:var(--sp-3) var(--sp-4);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);color:var(--fg);text-decoration:none}
.strip-card:hover{border-color:var(--border-strong)}
.strip-text{display:grid;gap:var(--sp-1);min-width:0;justify-items:start;text-align:left}
.strip-top{display:flex;align-items:center;gap:var(--sp-2)}
.strip-top b{font-weight:var(--fw-semibold)}
.strip-price{font-size:var(--fs-sm);color:var(--fg-2)}
.strip-trend{display:grid;gap:var(--sp-1);justify-items:end}
.strip-change{font-size:var(--fs-xs)}
.strip-line{display:block;width:calc(var(--sp-16) + var(--sp-2));height:var(--sp-6)}

/* Markets tools: filter tabs (only tabs with rows; scroll sideways when they
   do not fit), search, and a market filter once two exchanges are listed. */
.markets-count{color:var(--fg-muted);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.explore-tabs{display:flex;width:max-content;max-width:calc(100% - var(--sp-12));margin:var(--sp-4) var(--sp-6) 0;overflow-x:auto;scrollbar-width:none}
.explore-tabs button{flex:none;white-space:nowrap}
.explore-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-6) var(--sp-4)}
.explore-search{position:relative;margin:0;flex:1 1 calc(var(--sp-30) * 2);max-width:calc(var(--sp-30) * 3)}
.explore-market{margin:0;flex:0 1 calc(var(--sp-30) * 1.5)}
.explore-market .select-menu,.explore-market .select-menu-button{width:100%}

/* Sections inside the table: Live, then Coming soon, each with its count. */
.explore .tbl .section-row th{padding-top:var(--sp-3);padding-bottom:var(--sp-3);text-transform:none;letter-spacing:var(--ls-normal);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--fg);text-align:left}
.section-count{margin-left:var(--sp-2);font-weight:var(--fw-regular);color:var(--fg-muted);font-size:var(--fs-xs)}
.explore .tbl tbody tr.section-row:hover,.explore .tbl tbody tr.soon-row:hover{background:none}
.soon-row .asset-text b{font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--fg)}

/* Watchlist star: a quiet icon button; filled while on the list (aria-pressed). */
.explore .tbl th.star-col,.explore .tbl td.star-col{width:var(--sp-8);padding-right:0}
.watch-star{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);min-width:var(--ctl-sm);min-height:var(--ctl-sm);padding:0;border:0;background:none;color:var(--fg-muted);border-radius:var(--r-sm);cursor:pointer}
.watch-star svg{width:var(--sp-4);height:var(--sp-4);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.watch-star:hover{color:var(--fg)}
.watch-star[aria-pressed=true]{color:var(--fg)}
.watch-star[aria-pressed=true] svg{fill:currentColor}