/* PlanetPad · Sunlight (/sunlight). The page's one loud thing is the vessel: a glass sphere filling with light, ringed
   by the window's clock. Everything else is quiet rows on the product's night sky (doc.css tokens). Phone first. */
.pp-sl{max-width:1080px;margin:0 auto;padding:18px 16px calc(96px + env(safe-area-inset-bottom,0px));font-variant-numeric:tabular-nums}
.pp-sl *{min-width:0}
body.pp-sl-page{background-image:radial-gradient(760px 520px at 50% 40px,rgba(255,176,46,.13),transparent 70%)}

/* ── hero ─────────────────────────────────────────────────────────────────── */
.pp-sl-hero{display:grid;gap:6px;justify-items:center;text-align:center}
.pp-sl-vessel{position:relative;width:min(78vw,330px);aspect-ratio:1}
.pp-sl-vessel svg{display:block;width:100%;height:100%;overflow:visible}
.pp-sl-pct{position:absolute;left:0;right:0;top:50%;text-align:center;transform:translateY(-50%);font:700 clamp(26px,8vw,38px)/1 var(--display);color:#fff;text-shadow:0 2px 18px rgba(4,5,10,.75),0 0 2px rgba(4,5,10,.9);pointer-events:none;letter-spacing:-.02em}
.pp-sl-pct small{display:block;margin-top:6px;font:600 12px/1.2 var(--hud);letter-spacing:0;color:rgba(255,255,255,.86)}
.pp-sl-read{width:100%;max-width:520px}
body.pp-doc .pp-sl-read h1{margin:6px 0 8px;font-size:clamp(26px,7vw,38px);display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.pp-sl-pill{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font:600 12px/1 var(--hud);letter-spacing:.02em;vertical-align:middle}
.pp-sl-pill.pre{border:1px solid rgba(255,176,46,.5);background:rgba(255,176,46,.1);color:#ffd08a}
.pp-sl-pill.live{border:1px solid rgba(61,220,151,.5);background:rgba(61,220,151,.1);color:#9df0c8}
body.pp-doc .pp-sl-lede{margin:0 auto 16px;max-width:44ch;font-size:16px;line-height:1.5;color:#c9d0e2;text-wrap:balance}
.pp-sl-pot{display:grid;justify-items:center;gap:2px;margin:0 0 14px}
.pp-sl-pot b{font:700 clamp(40px,13vw,64px)/1 var(--display);letter-spacing:-.03em;color:var(--ink);background:linear-gradient(180deg,#fff6c9,#ffd66b 46%,#ffb02e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pp-sl-unit{font:600 14px/1.3 var(--hud);color:var(--ink)}
.pp-sl-usd{font-size:14px;color:var(--dim);min-height:1.3em}
.pp-sl-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 0 12px;border:1px solid var(--line);border-radius:14px;background:rgba(9,12,22,.6);overflow:hidden}
.pp-sl-facts div{padding:10px 6px}.pp-sl-facts div+div{border-left:1px solid var(--line)}
.pp-sl-facts dt{font-size:12px;line-height:1.2;color:var(--dim)}
.pp-sl-facts dd{margin:4px 0 0;font:700 clamp(14px,4.2vw,18px)/1.15 var(--hud);color:var(--ink);overflow-wrap:anywhere}
.pp-sl-tick{display:flex;align-items:center;justify-content:center;gap:9px;min-height:40px;padding:8px 12px;border-radius:12px;background:rgba(255,214,107,.06);font-size:14px;line-height:1.3;color:#ffe9b0;text-align:left}
.pp-sl-tick i{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#ffd66b;box-shadow:0 0 10px #ffb02e}
.pp-sl-tick.in span{animation:pp-sl-in .5s ease-out both}
@keyframes pp-sl-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── sections ─────────────────────────────────────────────────────────────── */
.pp-sl-sec{margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.pp-sl-sec>header{margin-bottom:14px}
body.pp-doc .pp-sl-sec h2{margin:0 0 4px;padding:0;border:0;font-size:clamp(18px,5vw,22px)}
body.pp-doc .pp-sl-sec>header p{margin:0;font-size:14.5px;line-height:1.45;color:var(--dim)}
body.pp-doc .pp-sl-h3{margin:26px 0 10px;font:600 15px/1.3 var(--hud);letter-spacing:0;text-transform:none;color:var(--ink)}
.pp-sl-empty{list-style:none;padding:18px 4px;color:var(--dim);font-size:14.5px}

/* your place */
.pp-sl-you{margin:0 0 14px;padding:13px 14px;border-radius:14px;border:1px solid rgba(143,230,255,.3);background:rgba(143,230,255,.055);font-size:15px;line-height:1.45;color:var(--ink)}
.pp-sl-you.in{border-color:rgba(255,214,107,.55);background:rgba(255,214,107,.08)}
.pp-sl-you b{color:#ffe07a}.pp-sl-you small{display:block;margin-top:4px;font-size:12.5px;color:var(--dim);overflow-wrap:anywhere}
.pp-sl-you button{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;padding:0 16px;border:0;border-radius:11px;background:var(--grad);color:#150800;font:700 14px/1 var(--hud);cursor:pointer}
.pp-sl-you button:focus-visible,.pp-sl-more:focus-visible{outline:2px solid var(--ice);outline-offset:3px}

/* the leaders */
body.pp-doc .pp-sl-lead{list-style:none;margin:0;padding:0;display:grid;gap:10px}
body.pp-doc .pp-sl-lead>li{margin:0}
.pp-sl-l{display:grid;grid-template-columns:34px 44px minmax(0,1fr) auto;grid-template-areas:"rk im nm sh" "bar bar bar bar" "cut cut cut cut";column-gap:10px;row-gap:9px;align-items:center;padding:13px 13px 12px;border:1px solid var(--line);border-radius:16px;background:rgba(11,14,26,.74)}
.pp-sl-l[data-rank="1"]{border-color:rgba(255,214,107,.5);background:linear-gradient(180deg,rgba(255,214,107,.09),rgba(11,14,26,.74) 62%)}
.pp-sl-rk{grid-area:rk;font:700 22px/1 var(--display);color:#ffd66b}.pp-sl-l:not([data-rank="1"]) .pp-sl-rk{color:var(--dim)}
.pp-sl-im{grid-area:im;width:44px;height:44px;border-radius:12px;object-fit:cover;background:#0b0e18;border:1px solid var(--line)}
.pp-sl-nm{grid-area:nm;display:grid;gap:2px}
body.pp-doc .pp-sl-nm a{font:700 16px/1.2 var(--hud);color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
body.pp-doc .pp-sl-nm a:hover{text-decoration:underline}
.pp-sl-nm span{font-size:12.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-sl-sh{grid-area:sh;text-align:right;display:grid;gap:2px}
.pp-sl-sh b{font:700 17px/1.1 var(--hud);color:#ffe07a;white-space:nowrap}.pp-sl-sh span{font-size:12px;color:var(--dim);white-space:nowrap}
.pp-sl-bar{grid-area:bar;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;font-size:12.5px;color:var(--dim)}
.pp-sl-bar i{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.pp-sl-bar i u{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#ffb02e,#ffd66b);text-decoration:none}
.pp-sl-cut{grid-area:cut;padding-top:9px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.4;color:#c9d0e2}
.pp-sl-cut b{color:var(--ink)}
.pp-sl-badge{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;border:1px solid var(--line2);font:600 11px/1.3 var(--hud);color:var(--dim);vertical-align:middle}
.pp-sl-chase{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--dim)}
body.pp-doc .pp-sl-chase a{color:#c9d0e2}

/* history */
.pp-sl-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px}
.pp-sl-totals div{padding:11px 10px;border:1px solid var(--line);border-radius:13px;background:rgba(9,12,22,.6)}
.pp-sl-totals b{display:block;font:700 clamp(16px,5vw,22px)/1.1 var(--hud);color:var(--ink);overflow-wrap:anywhere}
.pp-sl-totals span{display:block;margin-top:3px;font-size:12px;line-height:1.25;color:var(--dim)}
.pp-sl-chart{margin:0 0 16px;padding:12px 12px 8px;border:1px solid var(--line);border-radius:14px;background:rgba(9,12,22,.6)}
.pp-sl-chart figcaption{margin-bottom:8px;font-size:13px;color:var(--dim);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pp-sl-chart svg{display:block;width:100%;height:auto;max-height:230px;overflow:visible}
.pp-sl-chart .bar{fill:#ffb02e}.pp-sl-chart .bar.pre{fill:rgba(255,176,46,.3);stroke:#ffb02e;stroke-width:1}
.pp-sl-chart .bar.none{fill:rgba(150,175,235,.2)}
.pp-sl-chart .ax{stroke:rgba(150,175,235,.17);stroke-width:1}.pp-sl-chart text{fill:#98a1b8;font:500 10px 'Chakra Petch',sans-serif}
.pp-sl-chart .hit{fill:transparent}.pp-sl-chart g.col:hover .bar,.pp-sl-chart g.col:focus .bar{fill:#ffe07a}.pp-sl-chart g.col{outline:none}
.pp-sl-tip{min-height:1.4em;margin-top:6px;font-size:12.5px;color:#c9d0e2}
.pp-sl-key{display:inline-flex;align-items:center;gap:6px}.pp-sl-key i{width:10px;height:10px;border-radius:2px;background:#ffb02e}.pp-sl-key i.pre{background:rgba(255,176,46,.3);box-shadow:inset 0 0 0 1px #ffb02e}
.pp-sl-tw{overflow:hidden}
.pp-sl-t{width:100%;border-collapse:collapse;table-layout:fixed}
.pp-sl-t th{padding:0 8px 8px 0;text-align:left;font:600 12px/1.2 var(--hud);color:var(--dim)}
.pp-sl-t td{padding:11px 8px 11px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.35;vertical-align:top;overflow-wrap:anywhere}
.pp-sl-t td:nth-child(2),.pp-sl-t th:nth-child(2){width:86px}.pp-sl-t td:nth-child(1),.pp-sl-t th:nth-child(1){width:104px}
.pp-sl-t td:nth-child(4),.pp-sl-t th:nth-child(4){width:70px;text-align:right}.pp-sl-t td:nth-child(5),.pp-sl-t th:nth-child(5){width:92px;text-align:right;padding-right:0}
.pp-sl-t td small{display:block;font-size:12px;color:var(--dim)}
.pp-sl-t td b{color:var(--ink);font-weight:600}
.pp-sl-st{display:inline-block;padding:2px 7px;border-radius:999px;font:600 11.5px/1.4 var(--hud);border:1px solid var(--line2);color:var(--dim)}
.pp-sl-st.paid{border-color:rgba(61,220,151,.5);color:#9df0c8}.pp-sl-st.preview{border-color:rgba(255,176,46,.5);color:#ffd08a}
.pp-sl-more{display:block;width:100%;min-height:44px;margin-top:10px;border:1px solid var(--line2);border-radius:12px;background:none;color:var(--ink);font:600 14px/1 var(--hud);cursor:pointer}
body.pp-doc .pp-sl-wins{list-style:none;margin:0;padding:0;display:grid;gap:0}
body.pp-doc .pp-sl-wins>li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:baseline;margin:0;padding:9px 0;border-top:1px solid var(--line);font-size:14.5px}
body.pp-doc .pp-sl-wins>li.pp-sl-empty{display:block;border-top:0}
.pp-sl-wins li>i{font-style:normal;color:var(--dim)}.pp-sl-wins li b{color:var(--ink);font-weight:600}.pp-sl-wins li span{color:var(--dim);font-size:13px;white-space:nowrap}

/* how it works */
body.pp-doc .pp-sl-how ol{margin:0 0 16px;padding-left:22px;max-width:70ch}
body.pp-doc .pp-sl-how li{margin:0 0 10px;font-size:15.5px;line-height:1.55}
.pp-sl-note{max-width:70ch;padding:12px 14px;border:1px solid rgba(255,176,46,.4);border-radius:12px;background:rgba(255,176,46,.07);font-size:14.5px;line-height:1.5;color:#ffe2b0}
.pp-sl-note[hidden]{display:none}
.pp-sl-foot{font-size:14.5px}

@media (max-width:480px){
  .pp-sl-t th:nth-child(4),.pp-sl-t td:nth-child(4){display:none}
  .pp-sl-t td:nth-child(1),.pp-sl-t th:nth-child(1){width:88px}.pp-sl-t td:nth-child(2),.pp-sl-t th:nth-child(2){width:66px}.pp-sl-t td:nth-child(5),.pp-sl-t th:nth-child(5){width:74px}
}
@media (min-width:900px){
  .pp-sl{padding-top:34px}
  .pp-sl-t td:nth-child(1),.pp-sl-t th:nth-child(1){width:170px}.pp-sl-t td:nth-child(5),.pp-sl-t th:nth-child(5){width:150px}
  .pp-sl-hero{grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:48px;align-items:center;justify-items:start;text-align:left}
  .pp-sl-vessel{width:400px}
  body.pp-doc .pp-sl-read h1{justify-content:flex-start}.pp-sl-pot{justify-items:start}body.pp-doc .pp-sl-lede{margin-left:0}
  .pp-sl-tick{justify-content:flex-start}
  body.pp-doc .pp-sl-lead{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pp-sl-l{height:100%;align-content:start}
}
@media (prefers-reduced-motion:reduce){.pp-sl-tick.in span{animation:none}}