/* Systems (the shelf) ======================================================
   Desktop follows the 1440 artboard: Y1 Header 700, Y2 Shelf 1240,
   Y3 Pass 560, footer. Phones get the same parts restacked in one column.
   ========================================================================== */

/* Y1 Header ------------------------------------------------------------------ */
.sys-head { height: 700px; }
.sys-head .stage { height: 700px; }
.sys-head .art { position: absolute; inset: 0; pointer-events: none; }
.sys-fade { position: absolute; left: var(--bleed); right: var(--bleed); top: 560px; height: 140px; background: linear-gradient(180deg, rgb(4 6 11 / 0), rgb(4 6 11 / .702) 75%, var(--c-black)); }
.fan { position: absolute; inset: 0; }
.fan-orbit { position: absolute; left: 619.09px; top: 200px; width: 1099.5px; height: 262.6px; overflow: visible; fill: none; stroke: rgb(143 195 234 / .349); stroke-width: 1; stroke-dasharray: 3 7; }
.fan-file {
  --fill: linear-gradient(180deg, rgb(156 195 230 / .2), rgb(29 79 120 / .149));
  --bb: 22px; --bs: 1.2;
  --drop: -6px 24px 44px rgb(2 4 9 / .702);
  --r: 14px; --tab-h: 14px;
  position: absolute; left: var(--x); top: var(--y);
  width: 300px; height: 202px;
  rotate: var(--rot);
}
.fan-file > .folder-shadow { border-radius: 14px; }
.fan-file .cover {
  position: absolute; left: 9px; top: 23px; width: 282px; height: 170px;
  border-radius: 9px; overflow: hidden; background: #000;
}
.fan-file .cover img { width: 100%; height: 100%; object-fit: cover; }
.fan-file .cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .122); }
.tick {
  position: absolute; left: var(--x); top: var(--y); width: 1px; height: 44px;
  rotate: var(--rot);
  background: linear-gradient(180deg, rgb(143 195 234 / .502), rgb(143 195 234 / 0));
}
.fnode {
  position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-black);
  box-shadow: inset 0 0 0 1.5px var(--c-arc), 0 0 10px rgb(90 155 255 / .6);
}
.flabel {
  position: absolute; left: var(--x); top: var(--y);
  font: 400 11px/13px var(--f-mono); letter-spacing: 1.2px; color: var(--c-silver); white-space: pre;
}

.sys-eyebrow { position: absolute; left: 72px; top: 168px; display: flex; align-items: center; color: var(--c-mist); }
.sys-eyebrow .dot { width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: #4A60B2; }
.sys-title { position: absolute; left: 72px; top: 204px; margin: 0; font: 400 64px/72px var(--f-display); letter-spacing: -2px; white-space: nowrap; }
.sys-title > span { display: block; }
.sys-title em { margin-left: 2px; font-style: normal; color: var(--c-blue); }
.sys-lead { position: absolute; left: 72px; top: 462px; width: 440px; font: 400 20px/30px var(--f-text); letter-spacing: -0.2px; color: var(--c-mist); }

/* Y2 Shelf ------------------------------------------------------------------- */
.sys-shelf { height: auto; }
.sys-shelf .stage { height: auto; padding: 120px 72px 37px; }
.shelf-bar { position: absolute; left: 72px; right: 72px; top: 22px; height: 40px; display: flex; align-items: center; }
.shelf-chips { display: flex; gap: 10px; }
.shelf-chips .chip { justify-content: center; padding: 0; }
.sort { position: relative; margin-left: auto; margin-right: 12px; }
.sort select {
  -webkit-appearance: none; appearance: none;
  height: 36px; width: 176px; padding: 0 36px 0 16px;
  border-radius: 18px;
  background: rgb(255 255 255 / .0588);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .141);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  font: 500 13px/16px var(--f-text); color: var(--c-silver);
  cursor: pointer;
  transition: color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.sort select:hover { color: var(--c-white); }
.sort select:focus-visible { outline: 2px solid var(--c-arc); outline-offset: 2px; }
.sort select option { background: #0B1626; color: var(--c-white); }
.sort .i { position: absolute; right: 14px; top: 10px; color: var(--c-silver); pointer-events: none; }
.view-toggle { display: flex; gap: 4px; }
.view-toggle .icon-btn { color: var(--c-frost); }
.view-toggle .icon-btn[aria-pressed="true"] { color: var(--c-black); background: var(--light-fill-2); box-shadow: 0 6px 16px -4px rgb(4 6 11 / .502); }
.view-toggle .icon-btn[aria-pressed="false"] {
  background: linear-gradient(90deg, rgb(158 191 221 / .278), rgb(158 191 221 / .141));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 10px 28px -8px rgb(4 6 11 / .349);
  -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2);
}
.view-toggle .icon-btn[aria-pressed="false"]::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgb(255 255 255 / .349), rgb(255 255 255 / .0706) 50%, rgb(255 255 255 / .18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.shelf-rule { position: absolute; left: 72px; right: 72px; top: 88px; height: 1px; background: rgb(255 255 255 / .0784); }

.sys-grid {
  position: relative; width: 1296px;
  display: grid;
  grid-template-columns: repeat(4, 306px);
  grid-auto-rows: 308px;
  gap: 24px;
  grid-auto-flow: row dense;
}
.sys-grid > [hidden] { display: none; }
.sys-grid .sys-card { width: 306px; }

/* Featured card (ro., two columns wide) */
.feat-card { grid-column: span 2; width: 636px; height: 308px; }
.feat-visual {
  position: absolute; left: 12px; top: 30px; width: 340px; height: 266px;
  border-radius: 14px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #04060B, #0E2A44);
}
.feat-visual::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .102); pointer-events: none; }
.fphone {
  position: absolute; width: 122px; height: 258px; border-radius: 24px;
  background: #0A0E14;
  box-shadow: inset 0 0 0 1px rgb(220 235 247 / .4), 0 18px 30px rgb(0 0 0 / .651);
  transition: transform 1s var(--ease-out);
}
.fphone img { position: absolute; left: 4px; top: 4px; width: 114px; height: 250px; border-radius: 20px; object-fit: cover; }
.fphone--player { left: 69px; top: 27px; rotate: -7deg; }
.fphone--week { left: 153px; top: 9px; rotate: 5deg; }
.feat-card:hover .fphone--player { transform: translate(-5px, -3px) rotate(-1deg); }
.feat-card:hover .fphone--week { transform: translate(5px, -6px) rotate(1deg); }
.feat-name { position: absolute; left: 380px; top: 40px; margin: 0; font: 400 48px/52px var(--f-display); letter-spacing: -1.4px; }
.feat-pick {
  position: absolute; left: 442px; top: 56px;
  display: grid; place-items: center; height: 24px; padding: 0 18.5px; border-radius: 12px;
  background: rgb(90 155 255 / .149); box-shadow: inset 0 0 0 1px rgb(90 155 255 / .4);
  font: 500 12px/15px var(--f-text); color: #9CC4FF;
}
.feat-studio { position: absolute; left: 380px; top: 102px; color: var(--c-haze); }
.feat-desc { position: absolute; left: 380px; top: 128px; width: 230px; color: var(--c-mist); }
.feat-facts { position: absolute; left: 380px; top: 202px; display: flex; gap: 8px; }
.feat-facts li {
  height: 26px; padding: 0 11px; border-radius: 13px;
  background: rgb(255 255 255 / .0392); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .141);
  font: 400 12px/26px var(--f-text); color: var(--c-silver); white-space: nowrap;
}
.feat-price { position: absolute; left: 380px; top: 250px; font: 400 32px/38px var(--f-display); letter-spacing: -0.8px; }
.feat-go { position: absolute; left: 477px; top: 248px; }

/* "Your system, on this shelf" */
.sell-card { grid-column: span 2; width: 636px; height: 308px; --fill: rgb(90 155 255 / .0392); --bb: 0px; --bs: 1; }
.sell-card > .folder-fill { -webkit-backdrop-filter: none; backdrop-filter: none; }
.sell-title { position: absolute; left: 32px; top: 60px; margin: 0; font: 400 32px/38px var(--f-display); letter-spacing: -0.8px; }
.sell-title > span { display: block; }
.sell-text { position: absolute; left: 32px; top: 152px; width: 300px; }
.sell-go { position: absolute; left: 32px; top: 226px; }
.sell-arc { position: absolute; inset: 0; pointer-events: none; }
.sell-arc svg { position: absolute; overflow: visible; fill: none; }
.arc-track { left: 421.1px; top: 106.1px; width: 191.9px; height: 179px; stroke: rgb(143 195 234 / .302); stroke-width: 1; stroke-dasharray: 3 6; }
.arc-prog { left: 421.1px; top: 152.8px; width: 70.3px; height: 132.3px; stroke: var(--c-blue); stroke-width: 2; filter: drop-shadow(0 0 4px rgb(90 155 255 / .6)); }
.snode { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--c-black); box-shadow: inset 0 0 0 2px var(--c-blue), 0 0 10px rgb(90 155 255 / .6); }
.snode.s1 { left: 422.79px; top: 237.2px; }
.snode.s2 { left: 484.44px; top: 145.79px; }
.snode.s3 { left: 585.17px; top: 100.95px; box-shadow: inset 0 0 0 2px rgb(143 195 234 / .502); }
.slabel { position: absolute; font: 400 13px/16px var(--f-text); color: var(--c-white); white-space: nowrap; }
.slabel.l1 { left: 369.56px; top: 228.16px; }
.slabel.l2 { left: 452.73px; top: 124.87px; }
.slabel.l3 { left: 551.05px; top: 74.2px; color: var(--c-mist); }
@media (prefers-reduced-motion: no-preference) {
  .arc-prog path { stroke-dasharray: 160; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease-out); }
  .sell-card:hover .arc-prog path { animation: arc-draw 1.6s var(--ease-out); }
}
@keyframes arc-draw { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } }

.shelf-empty { margin-top: 24px; }
.shelf-end { position: relative; width: 1296px; height: 12px; margin-top: 62px; }
.shelf-end .ln { position: absolute; top: 6px; width: 620px; height: 1px; }
.shelf-end .l { left: 0; background: linear-gradient(90deg, rgb(143 195 234 / 0), rgb(143 195 234 / .349)); }
.shelf-end .r { left: 676px; background: linear-gradient(90deg, rgb(143 195 234 / .349), rgb(143 195 234 / 0)); }
.shelf-end .nd { position: absolute; left: 642px; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--c-black); box-shadow: inset 0 0 0 1.5px var(--c-arc); }
.shelf-note { margin-top: 16px; text-align: center; font: 400 14px/21px var(--f-text); color: var(--c-haze); }

/* List view: the same cards as rows */
.sys-grid.is-list { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 16px; }
.sys-grid.is-list > .sys-card, .sys-grid.is-list > .feat-card { grid-column: auto; width: 1296px; height: 150px; }
.sys-grid.is-list .sys-card .cover { left: 12px; top: 30px; width: 180px; height: 108px; border-radius: 12px; }
.sys-grid.is-list .sys-card .name { left: 220px; top: 44px; }
.sys-grid.is-list .sys-card .studio { left: 220px; top: 78px; }
.sys-grid.is-list .sys-card .includes { left: 220px; top: 102px; }
.sys-grid.is-list .sys-card .price-pill { left: auto; right: 28px; top: 62px; }
.sys-grid.is-list .sys-card .badge { left: auto !important; right: 112px; top: 66px; }
.sys-grid.is-list .feat-visual { width: 180px; height: 108px; border-radius: 12px; }
.sys-grid.is-list .fphone { scale: .5; transform-origin: 0 0; }
.sys-grid.is-list .fphone--player { left: 34px; top: 12px; }
.sys-grid.is-list .fphone--week { left: 84px; top: 4px; }
.sys-grid.is-list .feat-card .glow { display: none; }
.sys-grid.is-list .feat-name { left: 220px; top: 36px; font-size: 32px; line-height: 38px; letter-spacing: -0.8px; }
.sys-grid.is-list .feat-pick { left: 270px; top: 44px; }
.sys-grid.is-list .feat-studio { left: 220px; top: 80px; }
.sys-grid.is-list .feat-desc { left: 520px; top: 44px; width: 320px; }
.sys-grid.is-list .feat-facts { left: 520px; top: 104px; }
.sys-grid.is-list .feat-price { left: auto; right: 200px; top: 56px; }
.sys-grid.is-list .feat-go { left: auto; right: 28px; top: 53px; }
.sys-grid.is-list > .sell-card { grid-column: auto; width: 1296px; }
.sys-grid.is-list .sell-arc { left: 640px; }

/* =========================================================================
   Phones (< 1024)
   ========================================================================= */
@media (max-width: 1023.98px) {
  .sys-head { height: 716px; }
  .sys-head .stage { width: 100%; max-width: 600px; height: 716px; }
  .sys-head .glow.m { z-index: 0; }
  .sys-fade { top: 330px; height: 430px; background: linear-gradient(180deg, rgb(4 6 11 / 0), rgb(4 6 11 / .7) 40%, var(--c-black) 80%); }
  /* the fan, at half size and centred on the phone */
  .fan { left: calc(50% - 195px); top: 0; width: 1440px; height: 700px; transform-origin: 0 0; transform: translate(-290px, 30px) scale(.49); }
  .flabel { display: none; }
  .sys-eyebrow { left: 24px; top: 380px; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; }
  .sys-title { left: 24px; top: 408px; font-size: 44px; line-height: 46px; letter-spacing: -1.4px; }
  .sys-title em { margin-left: 0; }
  .sys-lead { left: 24px; right: 24px; top: 564px; width: auto; max-width: 342px; font-size: 16px; line-height: 24px; letter-spacing: -0.1px; }

  .sys-shelf .stage { width: 100%; max-width: 600px; height: auto; padding: 0 0 56px; }
  .shelf-bar { position: relative; left: auto; right: auto; top: auto; height: auto; display: block; padding: 0; }
  .shelf-chips { padding: 0 24px; overflow-x: auto; scrollbar-width: none; }
  .shelf-chips::-webkit-scrollbar { display: none; }
  .shelf-chips .chip { flex: none; }
  .sort { display: inline-block; margin: 16px 0 0 24px; }
  .view-toggle { display: none; }
  .shelf-rule { position: relative; left: auto; right: auto; top: auto; margin: 20px 24px 0; }
  .sys-grid { width: auto; margin: 24px 24px 0; grid-template-columns: 1fr; grid-auto-rows: auto; justify-items: center; gap: 16px; }
  .sys-grid .sys-card { width: 306px; height: 308px; }
  /* phones: one column, the wide cards restack */
  @media (max-width: 699.98px) {
    .feat-card, .sell-card { grid-column: auto; width: 100%; max-width: 342px; }
    .feat-card { height: 572px; }
    .feat-visual { left: 12px; right: 12px; width: auto; height: 266px; }
    .fphone--player { left: calc(50% - 101px); }
    .fphone--week { left: calc(50% - 17px); }
    .feat-name { left: 24px; top: 316px; }
    .feat-pick { left: 86px; top: 332px; }
    .feat-studio { left: 24px; top: 378px; }
    .feat-desc { left: 24px; right: 24px; top: 404px; width: auto; }
    .feat-facts { left: 24px; top: 470px; }
    .feat-price { left: 24px; top: 508px; }
    .feat-go { left: auto; right: 16px; top: 505px; }
    .sell-card { height: 482px; }
    .sell-title { left: 24px; top: 48px; }
    .sell-text { left: 24px; right: 24px; top: 140px; width: auto; }
    .sell-go { left: 24px; top: 398px; }
    .sell-arc { transform-origin: 0 0; transform: translate(-196.9px, 137.1px) scale(.8); }
    .sell-arc .slabel { font-size: 16px; line-height: 20px; }
  }
  /* tablets: two columns, the wide cards keep their desktop layout */
  @media (min-width: 700px) {
    .sys-grid { width: 636px; margin: 24px 0 0 calc(50% - 318px); grid-template-columns: repeat(2, 306px); gap: 24px; justify-items: start; }
    .sys-grid .sys-card { width: 306px; height: 308px; }
  }
  .shelf-empty { margin: 16px 24px 0; }
  .shelf-end { width: auto; margin: 48px 24px 0; }
  .shelf-end .ln { width: calc(50% - 22px); }
  .shelf-end .r { left: auto; right: 0; }
  .shelf-end .nd { left: calc(50% - 6px); }
  .shelf-note { margin: 16px 24px 0; }
  .sys-grid.is-list > .sys-card, .sys-grid.is-list > .feat-card, .sys-grid.is-list > .sell-card { width: 100%; }

}