/* ---------------------------------------------------------------------------
   Screen Cleaner — styles
   Light, minimal, iOS-inspired. Monochrome accent.
   --------------------------------------------------------------------------- */

/* Base / tokens ----------------------------------------------------------- */
:root {
  --bg: #ffffff;
  --text: #1d1d1f;          /* Apple near-black */
  --text-secondary: #6e6e73; /* Apple secondary gray */

  --btn-bg: #1d1d1f;
  --btn-bg-hover: #000000;
  --btn-text: #ffffff;

  --overlay-bg: #000000;
  --neon: #ff2a2a;
  --ring-track: rgba(255, 255, 255, 0.14);
  --ring-fill: #ffffff;
  --overlay-text: #ffffff;
  --overlay-hint: rgba(255, 255, 255, 0.32);

  --focus-ring: rgba(0, 0, 0, 0.45);

  --nav-h: 58px;            /* sticky top nav height */
  --content-max: 720px;    /* readable column width for content pages */
  --border: rgba(0, 0, 0, 0.08);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* Kill pull-to-refresh and scroll chaining (e.g. iOS/Android rubber-banding) */
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Site navigation (shared) ------------------------------------------------ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000; /* above page content + ad rails, below the cleaning overlay */
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}

.site-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Anton", "Arial Narrow", system-ui, sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}

.site-nav__brand img {
  border-radius: 7px;
}

.site-nav__brand-accent {
  color: var(--neon);
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.site-nav__links a {
  padding: 0.4rem 0.7rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 8px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.site-nav__links a:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.04);
}

.site-nav__links a[aria-current="page"] {
  color: var(--text);
  background: rgba(0, 0, 0, 0.05);
}

.site-nav__links a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* On phones, hide the brand wordmark text room and let links wrap tightly. */
@media (max-width: 560px) {
  .site-nav {
    height: auto;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }
  .site-nav__links {
    justify-content: center;
  }
}

/* Home page: lock to a single, non-scrolling screen ----------------------- */
/* Body becomes a vertical flex column the exact height of the viewport, with
   the hero filling the middle and a compact footer pinned at the bottom.
   The fixed ad rails and cleaning overlay are position:fixed, so they don't
   participate in this flex flow. Content pages (no .home) scroll normally. */
body.home {
  height: 100vh;        /* fallback */
  height: 100svh;       /* small viewport unit — excludes mobile browser UI */
  overflow: hidden;     /* the whole point: no scroll on the home screen */
  display: flex;
  flex-direction: column;
}

body.home .landing {
  flex: 1 1 auto;
  min-height: 0;        /* allow the hero to shrink within the column */
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

/* The footer is already slim; on the home screen it just stays pinned at the
   bottom of the flex column and never shrinks. */
body.home .site-footer {
  flex: none;
}

/* On short screens, drop the center ad so the Start button is never clipped. */
@media (max-height: 720px) {
  body.home .landing__ad {
    display: none;
  }
}

/* Landing screen (state: IDLE) -------------------------------------------- */
.landing {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.75rem;
  padding: 2rem 1.5rem;
  /* Respect notches / safe areas on mobile */
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
  /* Reserve room at the bottom so the centered stack (incl. the ad) never
     collides with the absolutely-positioned credit footer. */
  padding-bottom: max(6rem, calc(env(safe-area-inset-bottom) + 5rem));
}

/* Brand logo */
.landing__logo {
  width: clamp(64px, 18vw, 88px);
  height: auto;
  margin-bottom: 0.5rem;
  border-radius: 20px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

/* Parent venture — Plutoworld, pinned to the top center */
.brand-top {
  position: absolute;
  left: 0;
  right: 0;
  top: max(1.25rem, env(safe-area-inset-top));
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.brand-top__link {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.brand-top__link:hover {
  opacity: 0.7;
}

.brand-top__link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

/* "Plutoworld" wordmark: Quicksand, Pluto neon red + world black */
.pluto-mark {
  font-family: "all-round-gothic", "Quicksand", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

.pluto-mark__pluto {
  color: var(--neon);
}

.pluto-mark__world {
  color: #000000;
}

/* Developer — Flying Being, pinned to the bottom center (single row) */
.landing__credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

.landing__credit-prefix {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-secondary);
}

.landing__fb-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.landing__fb-name {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}

.landing__title {
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap; /* wraps only on very narrow screens */
  line-height: 1;
}

/* Both words: tall, condensed, heavy display — joined with no space. */
.landing__title-screen,
.landing__title-cleaner {
  font-family: "Anton", "Arial Narrow", system-ui, sans-serif;
  font-weight: 400; /* Anton ships a single heavy weight */
  font-size: clamp(2.25rem, 11vw, 3.5rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* "Screen" — neon red with a faint glow. */
.landing__title-screen {
  color: #ff2a2a;
  text-shadow: 0 0 10px rgba(255, 42, 42, 0.5);
}

/* "Cleaner" — black. */
.landing__title-cleaner {
  color: #000000;
}

.landing__tagline {
  margin: 0.25rem 0 1.75rem;
  font-size: clamp(0.75rem, 3vw, 0.875rem);
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  /* indent compensates for trailing letter-spacing so text stays centered */
  text-indent: 0.22em;
  color: var(--text-secondary);
}

/* Start button — iOS filled rounded rect ---------------------------------- */
.btn-start {
  min-width: 240px;
  padding: 1.05rem 2.5rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-indent: 0.18em; /* offset trailing letter-spacing to keep text centered */
  color: var(--btn-text);
  background: var(--btn-bg);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.12s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-start:hover {
  background: var(--btn-bg-hover);
}

.btn-start:active {
  transform: scale(0.97);
  opacity: 0.9;
}

.btn-start:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Landing ad slot --------------------------------------------------------- */
/* Lives in the centered column, below the Start button. Width-capped to a
   leaderboard; a reserved min-height avoids layout shift (CLS) when it fills. */
.landing__ad {
  width: 100%;
  max-width: 728px;
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

/* Small, honest "Advertisement" label (required by most ad networks). */
.landing__ad-label {
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--text-secondary);
  opacity: 0.7;
}

/* The real AdSense unit. Collapsed to zero height while empty (before the
   account is live) so it leaves no gap; the fallback below reserves the
   space instead. AdSense sizes the <ins> itself once an ad fills. */
.landing__ad-unit {
  width: 100%;
}

/* Visible stand-in until a live ad fills. AdSense renders into the <ins>
   above this, so when an ad loads it simply sits above the fallback; remove
   the fallback once ads are live if you don't want a backup box. */
.landing__ad-fallback {
  width: 100%;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.02);
}

/* When a real ad has filled the <ins>, hide the fallback box. AdSense sets
   data-ad-status="filled" on the <ins> once an ad renders. */
.landing__ad-unit[data-ad-status="filled"] ~ .landing__ad-fallback {
  display: none;
}

/* Side ad rails (desktop ≥1200px) ----------------------------------------- */
/* Two full-height side panels that frame the hero. Hidden by default and only
   shown on wide viewports — mobile/tablet keep the clean single-column layout.
   Sit below the cleaning overlay (which uses the max z-index), so they vanish
   automatically while cleaning. */
.ad-rail {
  display: none; /* shown via the ≥1200px media query below */
  position: fixed;
  top: var(--nav-h); /* start below the sticky nav */
  bottom: 0;
  width: 340px;
  z-index: 10; /* well below the overlay's max z-index */
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 0;
  /* Faint panel tint + hairline so the rail reads as a deliberate sidebar
     rather than a floating ad. */
  background: rgba(0, 0, 0, 0.015);
}

.ad-rail--left {
  left: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.ad-rail--right {
  right: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
}

/* Tower region grows to fill the rail, centering the Half-Page unit. */
.ad-rail__main {
  flex: 1;
  display: flex;
  align-items: center;
}

/* Billboard region pinned to the bottom corner. */
.ad-rail__foot {
  flex: none;
  margin-top: 1.25rem;
}

/* Shared ad framing ------------------------------------------------------- */
.ad-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}

/* Honest "Advertisement" label (required by most ad networks). */
.ad-label {
  font-size: 0.5625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--text-secondary);
  opacity: 0.6;
}

/* A slot is a fixed-size box that layers the live ad over a placeholder, so
   there's no blank gap before the account goes live and no layout shift after.
   The <ins> paints on top; the fallback shows through while the ad is empty. */
.ad-slot {
  position: relative;
}

.ad-slot--tower {
  width: 300px;
  height: 600px;
}

.ad-slot--billboard {
  width: 300px;
  height: 250px;
}

.ad-slot .adsbygoogle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

/* Placeholder behind the ad — dashed card, billboard-style for the rectangle. */
.ad-slot .ad-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.5;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.02);
}

/* Once a real ad fills the unit, drop the placeholder. */
.ad-slot .adsbygoogle[data-ad-status="filled"] + .ad-fallback {
  display: none;
}

/* Billboard treatment: a clean card with a soft shadow + two little "legs"
   under it, so the bottom-corner rectangle reads as a mounted billboard. */
.ad-frame--billboard .ad-slot {
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.ad-frame--billboard .ad-slot .ad-fallback,
.ad-frame--billboard .ad-slot .adsbygoogle {
  border-radius: 14px;
  overflow: hidden;
}

.ad-frame--billboard .ad-slot::before,
.ad-frame--billboard .ad-slot::after {
  content: "";
  position: absolute;
  bottom: -10px;
  width: 5px;
  height: 10px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 0 0 2px 2px;
}

.ad-frame--billboard .ad-slot::before { left: 64px; }
.ad-frame--billboard .ad-slot::after { right: 64px; }

/* Reveal rails only when there's room, and reserve side gutters so the hero
   content never slides under a rail. Gated on .ads-live so the rails (and the
   gutters that make room for them) only appear once ads are switched on. */
@media (min-width: 1200px) {
  body.ads-live .ad-rail {
    display: flex;
  }

  body.ads-live .landing {
    padding-left: 360px;
    padding-right: 360px;
  }
}

/* Drop the bottom-corner billboards on short viewports so the 300×600 tower
   never collides with them; the tower stays centered. */
@media (max-height: 940px) {
  .ad-rail__foot {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   AD VISIBILITY SWITCH
   Ads (and their placeholder boxes) are HIDDEN by default so the site looks
   finished while waiting for AdSense approval. To turn every ad slot on at
   once — the center unit, the in-content units and the side rails — add the
   class "ads-live" to the <body> tag on each page:  <body class="ads-live">
   (the home page becomes  <body class="home ads-live">).
   --------------------------------------------------------------------------- */
.landing__ad,
.content-ad {
  display: none;
}

body.ads-live .landing__ad,
body.ads-live .content-ad {
  display: flex;
}

/* Cleaning overlay (state: CLEANING) -------------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647; /* max — sits above everything */
  background: var(--overlay-bg); /* pure black so smudges are visible */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: max(3rem, env(safe-area-inset-bottom));
  touch-action: none; /* kill scroll, pinch-zoom and double-tap gestures */
  user-select: none;
  -webkit-user-select: none;
}

.overlay[hidden] {
  display: none;
}

/* "Tap to resume fullscreen" hint — shown only when the browser drops
   fullscreen (e.g. Esc). Sits near the top, out of the way of cleaning. */
.overlay__resume {
  position: absolute;
  top: max(1.75rem, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0 1rem;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--overlay-hint);
  pointer-events: none; /* never intercept the cleaning touch */
}

.overlay__resume[hidden] {
  display: none;
}

/* Hold-to-exit control with progress ring --------------------------------- */
/* The whole group stays very dim so the screen reads as near-pure-black, then
   brightens when the user hovers (desktop) or presses/holds (touch). */
.exit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  opacity: 0.18;
  transition: opacity 0.25s ease;
}

.exit:hover,
.exit:has(.is-holding) {
  opacity: 1;
}

.exit__control {
  position: relative;
  width: 116px;
  height: 116px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  touch-action: none; /* gesture handled manually via Pointer Events */
  -webkit-tap-highlight-color: transparent;
}

.exit__control:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.6);
  outline-offset: 4px;
}

/* SVG progress ring */
.exit__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Start the ring at 12 o'clock and fill clockwise */
  transform: rotate(-90deg);
}

.exit__ring-track {
  fill: none;
  stroke: var(--ring-track);
  stroke-width: 5;
}

.exit__ring-progress {
  fill: none;
  stroke: var(--ring-fill);
  stroke-width: 5;
  stroke-linecap: round;
  /* dasharray/offset are set in JS from the circle circumference */
}

/* "END" — tall condensed cap, matches the wordmark font. */
.exit__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Anton", "Arial Narrow", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--overlay-text);
}

/* Hint — uppercase tracked label, with "HOLD" in neon red */
.exit__hint {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-indent: 0.2em; /* offset trailing letter-spacing to keep centered */
  color: var(--overlay-hint);
}

.exit__hint-hot {
  color: inherit; /* no highlight — same as the rest of the hint */
}

/* Accessibility: reduced motion ------------------------------------------- */
/* Disable decorative transitions/transforms. The hold progress ring is left
   intact — it conveys essential feedback (remaining hold time), not decoration. */
@media (prefers-reduced-motion: reduce) {
  .btn-start,
  .exit {
    transition: none;
  }

  .btn-start:active {
    transform: none;
  }
}

/* ===========================================================================
   Content pages (About, How it works, Blog, Upcoming, Privacy)
   Shared layout: sticky nav (above) + readable prose column + global footer.
   =========================================================================== */

.page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2.5rem max(1.25rem, env(safe-area-inset-left)) 3.5rem;
  padding-right: max(1.25rem, env(safe-area-inset-right));
}

/* Page header block */
.page-hero {
  margin-bottom: 2rem;
}

.page-eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--neon);
}

.page-title {
  margin: 0;
  font-family: "Anton", "Arial Narrow", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 7vw, 3rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
}

.page-lede {
  margin: 0.9rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Readable prose */
.prose {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
}

.prose h2 {
  margin: 2.25rem 0 0.75rem;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.prose h3 {
  margin: 1.6rem 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.prose p {
  margin: 0 0 1.1rem;
}

.prose ul,
.prose ol {
  margin: 0 0 1.1rem;
  padding-left: 1.3rem;
}

.prose li {
  margin: 0 0 0.5rem;
}

.prose a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--neon);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.prose a:hover {
  color: var(--neon);
}

.prose strong {
  font-weight: 700;
}

.prose blockquote {
  margin: 1.4rem 0;
  padding: 0.4rem 0 0.4rem 1.1rem;
  border-left: 3px solid var(--neon);
  color: var(--text-secondary);
  font-style: italic;
}

.prose hr {
  margin: 2.5rem 0;
  border: none;
  border-top: 1px solid var(--border);
}

/* "Try it" call-to-action button reused on content pages.
   Scoped under .prose so it beats the `.prose a` link styling (which would
   otherwise tint the text dark and add an underline). Simple black + white. */
.prose .btn-inline {
  display: inline-block;
  margin: 0.5rem 0;
  padding: 0.85rem 1.8rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ffffff;
  background: #000000;
  border-radius: 12px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.prose .btn-inline:hover {
  background: #1a1a1a;
  color: #ffffff;
}

/* In-content advertisement (blog / how-it-works / etc.) -------------------- */
.content-ad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin: 2.5rem 0;
}

.content-ad__unit {
  width: 100%;
}

.content-ad__fallback {
  width: 100%;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.02);
}

.content-ad__unit[data-ad-status="filled"] + .content-ad__fallback {
  display: none;
}

/* Blog index -------------------------------------------------------------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}

.blog-card {
  display: flex;
  flex-direction: column;
  padding: 1.4rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.14);
}

.blog-card__tag {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--neon);
}

.blog-card__title {
  margin: 0.5rem 0 0.4rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
}

.blog-card__excerpt {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.blog-card__more {
  margin-top: auto;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

/* Article meta (individual posts) */
.post-meta {
  margin: 0 0 1.5rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

/* Feature list (Upcoming) */
.feature-list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.feature-list li {
  position: relative;
  padding: 1.1rem 1.2rem 1.1rem 3rem;
  margin-bottom: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}

.feature-list li::before {
  content: "→";
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  color: var(--neon);
  font-weight: 700;
}

.feature-list h3 {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.feature-list p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.feature-list .tag-soon {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.12rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--neon);
  border: 1px solid var(--neon);
  border-radius: 999px;
  vertical-align: middle;
}

/* Global footer — Apple-style slim bottom bar ----------------------------- */
/* Light gray panel, hairline divider, small muted text and divider-separated
   links. Slim enough that the home page stays a single non-scrolling screen,
   and identical on every page. */
.site-footer {
  border-top: 1px solid #d2d2d7;
  background: #f5f5f7;
  padding: 1.45rem max(1.5rem, env(safe-area-inset-left)) 1.55rem;
  padding-right: max(1.5rem, env(safe-area-inset-right));
  font-size: 0.875rem; /* ~14px */
  line-height: 1.5;
  color: #6e6e73;
}

.site-footer__inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
}

.site-footer__legal {
  margin: 0;
  color: #6e6e73;
}

.site-footer__brand-accent {
  color: var(--neon);
  font-weight: 600;
}

/* Two-tone "plutoworld" inside the legal line keeps its brand colors. */
.site-footer__legal .pluto-mark__pluto,
.site-footer__legal .pluto-mark__world {
  font-weight: 600;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.site-footer__links a {
  color: #424245;
  text-decoration: none;
  padding: 0 0.75rem;
  line-height: 1.1;
  border-left: 1px solid #d2d2d7;
}

.site-footer__links a:first-child {
  padding-left: 0;
  border-left: none;
}

.site-footer__links a:hover {
  color: var(--neon);
  text-decoration: underline;
}

.site-footer__links a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}

/* On narrow screens, center the bar and stack legal above the links. */
@media (max-width: 600px) {
  .site-footer__inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}