/* System / ro. ============================================================
   Desktop is authored on the 1440 artboard (P1 Hero 940, P2 Inside 980, FAQ,
   footer). Phones (< 1024) follow Mobile / System ro.
   ========================================================================== */

/* P1 Hero ----------------------------------------------------------------- */
.ro-hero { height: 940px; }
.ro-hero .stage { height: 940px; }
.ro-hero .art { position: absolute; inset: 0; pointer-events: none; }
.ro-hero .grain { z-index: 1; }

.ro-phone {
  position: absolute;
  width: 272px; height: 580px;
  border-radius: 52px;
  background: #0A0E14;
  box-shadow: 0 40px 70px -10px rgb(0 0 0 / .749);
}
.ro-phone::after {
  /* 2 px inside border, gradient (0,0) -> (1,1) of the body */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: linear-gradient(154.87deg, rgb(220 235 247 / .8), rgb(255 255 255 / .102) 50%, rgb(143 195 234 / .6));
  -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);
}
.ro-phone img, .ro-phone .sheen {
  position: absolute; left: 9px; top: 9px; width: 254px; height: 562px;
  border-radius: 44px;
}
.ro-phone img { object-fit: cover; }
.ro-phone .sheen { background: linear-gradient(148.93deg, rgb(255 255 255 / .102), rgb(255 255 255 / 0) 28.9%); }
.ro-phone--player { left: 520px; top: 200px; rotate: 7deg; }
.ro-phone--week { left: 716px; top: 170px; rotate: -5deg; }
.ro-fade { display: none; }

.crumbs { position: absolute; left: 72px; top: 150px; z-index: 2; }
.crumbs ol { display: flex; font: 400 14px/21px var(--f-text); color: var(--c-haze); }
.crumbs li + li::before { content: "/"; margin: 0 10px; }
.crumbs a { transition: color .3s var(--ease-out); }
.crumbs a:hover { color: var(--c-white); }
.crumbs [aria-current] { color: var(--c-white); }

.ro-title { position: absolute; left: 72px; top: 190px; z-index: 2; margin: 0; font: 400 64px/70px var(--f-display); letter-spacing: -2px; }
.ro-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ro-tag .l1 { display: block; color: var(--c-white); }
.ro-tag .l2 { display: block; color: var(--c-dim); }
.ro-body { position: absolute; left: 72px; top: 356px; width: 380px; z-index: 2; font: 400 16px/25px var(--f-text); letter-spacing: -0.1px; color: var(--c-silver); }

.ro-specs { position: absolute; left: 72px; top: 476px; width: 380px; z-index: 2; margin: 0; border-bottom: 1px solid rgb(255 255 255 / .102); }
.ro-specs > div { display: flex; justify-content: space-between; align-items: flex-start; height: 44px; border-top: 1px solid rgb(255 255 255 / .102); }
.ro-specs dt { margin-top: 14px; font: 400 11px/14px var(--f-mono); letter-spacing: 1.1px; text-transform: uppercase; color: var(--c-haze); }
.ro-specs dd { margin: 11px 0 0; font: 500 15px/20px var(--f-text); letter-spacing: -0.1px; color: var(--c-white); }
.ro-byline { position: absolute; left: 72px; top: 720px; z-index: 2; font: 400 11px/14px var(--f-mono); letter-spacing: 1.1px; text-transform: uppercase; color: var(--c-haze); }

/* Purchase panel */
.buybox {
  --edge: linear-gradient(147.58deg, rgb(255 255 255 / .4), rgb(255 255 255 / .0706) 50%, rgb(255 255 255 / .18));
  position: absolute; left: 1020px; top: 146px; z-index: 3;
  width: 348px; height: 548px; border-radius: 28px;
  background: linear-gradient(147.58deg, rgb(158 191 221 / .169), rgb(158 191 221 / .051));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .141), 0 30px 60px -12px rgb(0 0 0 / .651);
  -webkit-backdrop-filter: blur(34px) saturate(1.2);
  backdrop-filter: blur(34px) saturate(1.2);
}
.buybox::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--edge);
  -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);
  pointer-events: none;
}
.bb-label { position: absolute; left: 28px; top: 30px; color: var(--c-haze); }
.buybox .toggle--lic { position: absolute; left: 28px; top: 54px; }
.bb-price { position: absolute; left: 26px; top: 134px; display: flex; align-items: flex-start; white-space: nowrap; }
.bb-price .amount { display: block; min-width: 125px; font: 400 72px/72px var(--f-display); letter-spacing: -2.6px; color: var(--c-white); }
.bb-price .per { margin: 42px 0 0 12px; font: 400 14px/21px var(--f-text); color: var(--c-mist); }
.bb-actions { position: absolute; left: 28px; top: 230px; display: flex; gap: 12px; }
.bb-actions .btn--light { min-width: 134px; }
.buybox::after { content: ""; position: absolute; left: 28px; top: 314px; width: 292px; height: 1px; background: rgb(255 255 255 / .102); }
.bb-list { position: absolute; left: 28px; top: 336px; }
.bb-list li { position: relative; height: 36px; padding-left: 28px; font: 400 14px/21px var(--f-text); color: var(--c-silver); }
.bb-list .i { position: absolute; left: 0; top: 2px; width: 18px; height: 18px; color: var(--c-arc); }
.bb-note { position: absolute; left: 28px; top: 494px; width: 292px; font: 400 14px/21px var(--f-text); color: var(--c-haze); }

/* Add to bag: confirmation state */
[data-add-to-bag] { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .5s var(--ease-out); }
[data-add-to-bag].is-added { pointer-events: none; }
[data-add-to-bag] [data-label] { display: inline-flex; align-items: center; gap: 8px; }
[data-add-to-bag] .i { width: 18px; height: 18px; }

/* P2 Inside ---------------------------------------------------------------- */
.ro-inside { height: 980px; }
.ro-inside .stage { height: 980px; }
.inside-title { position: absolute; left: 72px; top: 96px; margin: 0; white-space: nowrap; font: 400 64px/72px var(--f-display); letter-spacing: -2px; }

.tile {
  --edge: linear-gradient(var(--ea, 135deg), rgb(255 255 255 / .302), rgb(255 255 255 / .0588) 50%, rgb(255 255 255 / .149));
  position: absolute;
  overflow: hidden;
  isolation: isolate;
  border-radius: 28px;
  background: linear-gradient(var(--ea, 135deg), rgb(158 191 221 / .129), rgb(158 191 221 / .0314));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .122);
}
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; padding: 1px;
  background: var(--edge);
  -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);
  pointer-events: none;
}
.tile > h3 { position: absolute; left: 32px; top: 30px; margin: 0; }
.tile-desc { position: absolute; left: 32px; top: 64px; }
.tile-foot { position: absolute; left: 32px; top: 286px; color: var(--c-haze); }
.tile--colors { left: 72px; top: 220px; width: 746px; height: 340px; --ea: 114.5deg; }
.tile--motion { left: 842px; top: 220px; width: 526px; height: 340px; --ea: 122.9deg; }
.tile--type { left: 72px; top: 584px; width: 416px; height: 330px; --ea: 128.4deg; }
.tile--tokens { left: 512px; top: 584px; width: 416px; height: 330px; --ea: 128.4deg; }
.tile--sound { left: 952px; top: 584px; width: 416px; height: 330px; --ea: 128.4deg; }
.tile--colors .tile-desc { width: 440px; }
.tile--motion .tile-desc { width: 300px; }
.tile--sound .tile-desc { width: 340px; }

/* Colors: the Tide scale. 300 stands up; the others stand up on hover. */
.swatches { position: absolute; left: 32px; top: 128px; display: flex; gap: 4.5px; height: 180px; align-items: flex-end; }
.swatches li {
  position: relative; flex: none;
  width: 52px; height: 150px;
  border-radius: 12px;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .122);
  color: rgb(234 243 249 / .8);
  transition: height .7s var(--ease-out);
}
.swatches li.dk { color: rgb(10 17 23 / .8); }
.swatches .step { position: absolute; left: 0; right: 0; bottom: 11px; font: 400 10px/11px var(--f-mono); text-align: center; }
.swatches .hex {
  position: absolute; left: 2.5px; top: 14px; width: 47px;
  font: 400 11px/13px var(--f-mono); letter-spacing: 0; text-align: center; white-space: nowrap;
  opacity: 0; transform: translateY(4px);
  transition: opacity .4s var(--ease-out), transform .6s var(--ease-out);
}
.swatches li.dk .hex { color: rgb(10 17 23 / .902); }
.swatches li.is-on { height: 180px; }
.swatches li.is-on .hex { opacity: 1; transform: none; }
@media (hover: hover) {
  .swatches:hover li.is-on:not(:hover) { height: 150px; }
  .swatches:hover li.is-on:not(:hover) .hex { opacity: 0; transform: translateY(4px); }
  .swatches li:hover { height: 180px; }
  .swatches li:hover .hex { opacity: 1; transform: none; }
}

/* Motion: the ease-out curve, with a runner that rides it on hover */
.curve { position: absolute; left: 32px; top: 132px; width: 260px; height: 170px; }
.curve svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.curve .runner { position: absolute; left: -5px; top: 165px; width: 10px; height: 10px; }
.curve .runner .dot {
  display: block; width: 10px; height: 10px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 12px rgb(90 155 255 / .9), 0 0 0 3px rgb(125 176 255 / .25);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .tile--motion:hover .runner { animation: run-x 1.6s linear infinite; }
  .tile--motion:hover .runner .dot { animation: run-y 1.6s cubic-bezier(.22, 1, .36, 1) infinite; }
}
@keyframes run-x { 0% { transform: translateX(0); } 75%, 100% { transform: translateX(260px); } }
@keyframes run-y {
  0% { transform: translateY(0); opacity: 0; }
  6% { opacity: 1; }
  75% { transform: translateY(-170px); opacity: 1; }
  100% { transform: translateY(-170px); opacity: 0; }
}
.tokens-dl { position: absolute; left: 340px; top: 150px; margin: 0; }
.tokens-dl > div { height: 64px; }
.tokens-dl dt { font: 400 11px/14px var(--f-mono); letter-spacing: 1.1px; text-transform: uppercase; color: var(--c-haze); }
.tokens-dl dd { margin: 6px 0 0; font: 500 15px/20px var(--f-text); letter-spacing: -0.1px; color: var(--c-white); white-space: nowrap; }

/* Type: the specimen follows the style you pick */
.specimen {
  position: absolute; left: 26px; top: 92px; width: 240px;
  font: 100 150px/150px var(--f-display); letter-spacing: -5px; color: var(--c-white);
  white-space: nowrap;
  transition: opacity .3s var(--ease-out);
}
.specimen[data-font="title"] { font-weight: 400; letter-spacing: -6px; }
.specimen[data-font="body"] { font-family: var(--f-text); font-weight: 400; font-size: 120px; letter-spacing: -4px; }
.specimen[data-font="label"] { font-family: var(--f-text); font-weight: 500; font-size: 120px; letter-spacing: -4px; }
.specimen[data-font="mono"] { font-family: var(--f-mono); font-weight: 400; font-size: 112px; letter-spacing: -6px; }
.styles { position: absolute; left: 280px; top: 110px; }
.styles li { height: 32px; }
.styles button {
  display: block;
  font: 400 14px/21px var(--f-text); color: var(--c-mist);
  transition: color .3s var(--ease-out);
}
.styles button:hover, .styles button[aria-pressed="true"] { color: var(--c-white); }

/* Tokens */
.code {
  position: absolute; left: 24px; top: 80px; width: 368px; height: 170px; margin: 0;
  padding: 20px 20px 0;
  border-radius: 16px;
  background: rgb(4 6 11 / .8);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .0784);
  font: 400 12px/18px var(--f-mono);
  white-space: normal;
  overflow: hidden;
}
.code code { font: inherit; }
.code .k, .code .v { display: block; white-space: pre; }
.code .k { color: var(--c-arc); margin-top: 1px; }
.code .k:first-child { margin-top: 0; }
.code .v { color: rgb(242 245 248 / .902); margin-top: -3px; }
.code .swatch { position: absolute; left: 332px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: #8DB4D3; }
.tile-cap { position: absolute; left: 32px; top: 270px; width: 352px; }

/* Sound */
.tile--sound .wave { position: absolute; left: 32px; top: 173.59px; width: 348px; height: 72.81px; overflow: visible; }
.tile--sound .wave rect { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .tile--sound:hover .wave rect { animation: wave 1.2s var(--ease-sine) infinite alternate; }
  .tile--sound:hover .wave rect:nth-child(3n) { animation-delay: -.4s; }
  .tile--sound:hover .wave rect:nth-child(3n+1) { animation-delay: -.8s; }
}
@keyframes wave { from { transform: scaleY(1); } to { transform: scaleY(.55); } }

/* =========================================================================
   Phones (< 1024): Mobile / System ro.
   ========================================================================= */
@media (max-width: 1023.98px) {
  .ro-hero, .ro-hero.spill { height: auto; overflow: clip; }
  .ro-hero .stage { width: 100%; max-width: 600px; height: auto; padding: 96px 24px 0; }
  .ro-hero .grain { display: none; }
  .ro-phone {
    width: 163.2px; height: 348px;
    border-radius: 52px;
  }
  .ro-phone img, .ro-phone .sheen { left: 5.4px; top: 5.4px; width: 152.4px; height: 337.2px; border-radius: 44px; }
  .ro-phone--player { left: calc(50% - 195px + 56px); top: 150px; }
  .ro-phone--week { left: calc(50% - 195px + 173.6px); top: 132px; }
  .ro-fade {
    display: block; position: absolute; left: var(--bleed); right: var(--bleed); top: 430px; height: 300px;
    background: linear-gradient(180deg, rgb(4 6 11 / 0), rgb(4 6 11 / .902) 45%, var(--c-black));
  }

  .crumbs { position: relative; left: auto; top: auto; }
  .crumbs ol { color: var(--c-mist); }
  .crumbs li + li::before { margin: 0 8px; color: #5F6A75; }

  .ro-title { position: relative; left: auto; top: auto; display: flex; flex-wrap: wrap; align-items: flex-start; margin-top: 415px; }
  .ro-name { position: static; width: auto; height: auto; overflow: visible; clip: auto; margin-left: -2px; font: 400 60px/58px var(--f-display); letter-spacing: -2.4px; color: var(--c-white); }
  .badge-pick {
    display: inline-grid; place-items: center;
    height: 24px; margin: 19px 0 0 12px; 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); letter-spacing: 0; color: #9CC4FF;
  }
  .ro-tag { flex-basis: 100%; margin-top: 6px; font: 400 24px/30px var(--f-display); letter-spacing: -0.4px; color: var(--c-dim); }
  .ro-tag .l1, .ro-tag .l2 { display: inline; color: inherit; }

  .ro-body { position: relative; left: auto; top: auto; width: auto; max-width: 342px; margin-top: 14px; font-size: 16px; line-height: 24px; color: var(--c-mist); }

  .buybox-m { margin-top: 48px; }
  .toggle-m {
    position: relative; isolation: isolate;
    display: grid; grid-template-columns: 1fr 1fr;
    height: 48px; padding: 4px;
    border-radius: 24px;
    background: rgb(255 255 255 / .0392);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .122);
  }
  .toggle-m .thumb {
    position: absolute; left: 4px; top: 4px; z-index: 0;
    width: calc(50% - 4px); height: 40px; border-radius: 20px;
    background: var(--c-white);
    box-shadow: 0 0 14px rgb(143 195 234 / .302);
    transition: transform .6s var(--ease-out);
  }
  .toggle-m[data-state="team"] .thumb { transform: translateX(100%); }
  .toggle-m button { position: relative; z-index: 1; height: 40px; border-radius: 20px; font: 500 13px/16px var(--f-text); color: var(--c-silver); transition: color .45s var(--ease-out); }
  .toggle-m button[aria-pressed="true"] { color: var(--c-black); }
  .bbm-price { display: flex; align-items: flex-start; margin-top: 22px; white-space: nowrap; }
  .bbm-price .amount { display: block; min-width: 84px; margin-left: -2px; font: 100 52px/56px var(--f-display); letter-spacing: -2px; color: var(--c-white); }
  .bbm-price .per { margin: 26px 0 0 14px; font: 400 14px/21px var(--f-text); color: var(--c-mist); }
  .buybox-m .btn--lit { margin-top: 24px; }
  .buybox-m .btn--ghost { margin-top: 12px; }

  .ro-specs { position: relative; left: auto; top: auto; width: auto; margin-top: 47.43px; border-bottom-color: rgb(255 255 255 / .0784); }
  .ro-specs > div { height: 49.29px; border-top-color: rgb(255 255 255 / .0784); }
  .ro-specs dt { margin-top: 17.64px; }
  .ro-specs dd { margin-top: 13.57px; }
  .ro-byline { display: none; }

  /* MP2 Inside */
  .ro-inside { height: auto; }
  .ro-inside .stage { width: 100%; max-width: 600px; height: auto; padding: 54.07px 24px 55.85px; }
  .inside-title { position: relative; left: auto; top: auto; white-space: normal; font: 400 44px/46px var(--f-display); letter-spacing: -1.4px; }
  .inside-title > span { display: block; }
  .inside-title > span + span { margin-top: 3.29px; }
  .rows { margin-top: 48.78px; }
  .row {
    --edge: linear-gradient(135deg, rgb(255 255 255 / .278), rgb(255 255 255 / .0588) 50%, rgb(255 255 255 / .122));
    position: relative; isolation: isolate;
    border-radius: 22px;
    background: linear-gradient(135deg, rgb(158 191 221 / .122), rgb(158 191 221 / .0314));
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  }
  .row::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: var(--edge);
    -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);
    pointer-events: none;
  }
  .row + .row { margin-top: 12.86px; }
  .row h3 { position: absolute; left: 20px; top: 22.15px; margin: 0; font: 500 15px/20px var(--f-text); letter-spacing: -0.1px; color: var(--c-white); }
  .row h3 + p { position: absolute; left: 20px; top: 47.9px; font: 400 14px/21px var(--f-text); color: var(--c-mist); }
  .row--colors, .row--tokens { height: 160.71px; }
  .row--type, .row--motion { height: 137.14px; }
  .row--sound { height: 117.86px; }
  .bars { position: absolute; left: 20px; top: 90px; display: flex; gap: 2px; width: 300px; height: 49.29px; }
  .bars li { flex: 1; border-radius: 2px; background: var(--c); }
  .bars li:first-child, .bars li:last-child { border-radius: 8px; }
  .bars li.spark { box-shadow: 0 0 12px rgb(144 216 246 / .6); }
  .row--type .aa { position: absolute; left: 20px; top: 36.58px; font: 100 64px/64px var(--f-display); letter-spacing: -2px; color: var(--c-white); }
  .row--type h3 { left: 126px; top: 39.29px; }
  .row--type h3 + p { left: 126px; top: 65.79px; width: 196px; }
  .mcurve { position: absolute; left: 20px; top: 25.72px; width: 92px; height: 87px; overflow: visible; }
  .row--motion h3 { left: 136px; top: 39.29px; }
  .row--motion .ease { position: absolute; left: 136px; top: 66.9px; font: 400 11px/13px var(--f-mono); color: var(--c-arc); white-space: nowrap; }
  .row--motion .ease + p { position: absolute; left: 136px; top: 88.61px; font: 400 14px/21px var(--f-text); color: var(--c-mist); }
  .code-m {
    position: absolute; left: 20px; top: 81.43px; width: calc(100% - 40px); max-width: 302px; height: 57.86px; margin: 0;
    padding: 11.18px 14px 0;
    border-radius: 12px;
    background: rgb(4 6 11 / .6);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .0784);
    font: 400 11px/13px var(--f-mono);
    white-space: normal;
  }
  .code-m code { font: inherit; }
  .code-m span { display: block; white-space: pre; }
  .code-m .l1 { color: var(--c-ice); }
  .code-m .l2 { margin-top: 6.29px; color: var(--c-mist); }
  .row--sound .wave { position: absolute; left: 20px; top: 85.17px; width: 295.5px; height: 27.33px; }
}