/* Platform and alternative pages (/mac, /windows, /linux, /notchnook-alternative). Builds on home.css. */
.pg-hero { padding: 72px 0 0; text-align: center; }
.pg-hero .eyebrow { color: var(--blue); }
.pg-visual { position: relative; width: min(1000px, 100% - 2 * var(--gutter)); margin: 56px auto 0; }
.pg-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 10px #0b0b0d, 0 0 0 12px #3a3e46, 0 40px 90px rgba(20, 20, 40, .22); }
.pg-screen .wall { position: absolute; inset: 0; }
.pg-screen .menubar { opacity: 1; height: 28px; font-size: 13px; gap: 18px; }
.pg-screen .taskbar { opacity: 1; height: 40px; }
.pg-screen .taskbar .apps { top: 5px; }
.pg-screen .taskbar .apps i { width: 30px; height: 30px; border-radius: 8px; }
.pg-screen .taskbar .srch { height: 30px; width: 130px; font-size: 12px; }
.gnome-bar { position: absolute; left: 0; right: 0; top: 0; height: 28px; background: #000; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font: 600 13px var(--font); z-index: 2; }
.wall-gnome { background: radial-gradient(60% 70% at 70% 30%, #e95420 0%, rgba(233, 84, 32, 0) 70%), linear-gradient(135deg, #2c001e, #5e2750 55%, #77216f); }
.pg-isl { position: absolute; left: 50%; top: 0; transform: translateX(-50%); background: #000; color: #fff; border-radius: 0 0 26px 26px; display: flex; align-items: center; gap: 14px; padding: 0 22px; height: 76px; white-space: nowrap; font-size: 15px; z-index: 3; box-shadow: 0 18px 40px rgba(0, 0, 0, .3); }
.pg-isl .t { font-weight: 650; font-size: 16px; } .pg-isl .s { font: 500 12px var(--mono); color: rgba(255, 255, 255, .55); }
.pg-isl .ip { height: 32px; padding: 0 15px; border-radius: 16px; display: inline-flex; align-items: center; font-weight: 650; font-size: 14px; }
.pg-isl .ip.w { background: #fff; color: #000; } .pg-isl .ip.g { background: rgba(255, 255, 255, .15); }
.pg-isl .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px var(--red); flex: none; animation: pulse 1s ease-in-out infinite; }
.pg-soon { position: absolute; right: 18px; bottom: 18px; z-index: 3; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--ink); font: 700 13px var(--font); box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }
.pg-ed { position: absolute; left: 50%; top: 74px; width: 160px; height: 200px; margin-left: -80px; z-index: 2; pointer-events: none; }
.feat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 50px; }
.feat div { border-radius: 24px; background: #fff; padding: 24px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); }
.sec.light .feat div { background: #fff; }
.sec:not(.light) .feat div { background: var(--light); box-shadow: none; }
.feat i { font-style: normal; font-size: 26px; }
.feat h3 { font-size: 19px; letter-spacing: -0.015em; margin: 12px 0 6px; }
.feat p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.prose { max-width: 760px; margin: 0 auto; font-size: 19px; line-height: 1.6; color: var(--ink-2); }
.prose p { margin: 0 0 18px; }
.prose b { color: var(--ink); }
.prose h2 { color: var(--ink); }
.pos-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.pos-list span { height: 40px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; background: var(--light); font-size: 15px; font-weight: 600; }
.related { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 860px; margin: 40px auto 0; text-align: left; }
.related a { display: block; border-radius: 20px; background: var(--light); padding: 20px 22px; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; transition: background .2s; }
.related a:hover { background: #ebebf0; }
.related a small { display: block; font-size: 14px; font-weight: 500; color: var(--ink-3); margin-top: 4px; }
.crumbs { display: flex; justify-content: center; gap: 8px; font-size: 13px; color: var(--ink-3); margin-bottom: 18px; }
.crumbs a:hover { color: var(--ink); }
footer .foot-cols { display: flex; flex-wrap: wrap; gap: 8px 20px; }
@media (max-width: 900px) { .feat { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .feat, .related { grid-template-columns: 1fr; } .pg-isl { height: 58px; padding: 0 14px; gap: 10px; font-size: 12px; } .pg-isl .t { font-size: 13px; } .pg-isl .s, .pg-isl .ip.g { display: none; } .pg-ed { top: 56px; transform: scale(.7); transform-origin: 50% 0; } }