/* ============================================================
   manishelf-cozy.css — cozy handmade repaint of the product page
   Pairs with: redesign/manishelf-cozy.html
   Strategy: override CSS vars + targeted selectors to recolor
   and re-surface the page without touching main style.css.
   ============================================================ */

body.manishelf-page {
  /* Cozy palette — matches redesign/index.html */
  --cream:        #f3ecdd;
  --cream-soft:   #f8f2e4;
  --sheet:        #fbf4df;
  --ink:          #2a1f3d;
  --ink-soft:     #4a3a62;
  --ink-faint:    #8a7a9e;
  --plum:         #6b4a8a;
  --plum-dusk:    #8d6fb0;
  --plum-haze:    #c9b8dd;
  --ember:        #c9765a;
  --ember-warm:   #f2c9a6;

  /* Remap the base system vars to the cozy palette */
  --bg-deep:        #fbefd8;
  --surface:        #fbf4df;
  --surface-raised: #fdf8e6;
  --border:         rgba(107, 74, 138, 0.16);
  --border-hover:   rgba(201, 118, 90, 0.45);
  --text:           var(--ink);
  --text-muted:     var(--ink-soft);
  --text-dim:       var(--ink-faint);
  --accent:         var(--plum);
  --accent-bright:  var(--plum-dusk);
  --accent-glow:    rgba(141, 111, 176, 0.18);
}

/* ---------- Body + gradient + aged-paper stains ---------- */

body.manishelf-page {
  /* Containing block for absolutely-positioned descendants (.side-doodles).
     Without this, aside{top:100vh;bottom:0} resolves against the viewport
     and the layer collapses to zero height.
     NOTE: background-color intentionally NOT set here — iOS Safari was
     sampling that solid fill as the page color and tinting the top URL
     bar white instead of honoring the meta theme-color. The cream
     fallback below the 120vh gradient now lives on the html element. */
  position: relative !important;
  /* Transparent body bg-color so iOS Safari's URL bar tinting falls
     through to the html element's lilac fill (matches the gradient's
     visible top and the meta theme-color). The visible page bg comes
     entirely from the layered bg-image stack below. */
  background-color: transparent !important;
  background-image:
    /* Layer 1 (top): lavender→cream gradient over ~1 viewport. */
    linear-gradient(to bottom,
      #b8a3d0 0%, #c0b0d6 6%, #c9bcdc 14%, #d3c9e2 24%,
      #dcd6e7 36%, #e6e2ec 50%, #efecf1 66%,
      #f6f3f5 82%, #fbf8fa 100%),
    /* Layer 2 (under): solid cream so long pages stay near-white past
       the gradient, instead of bleeding the lilac html bg through. */
    linear-gradient(#fbf8fa, #fbf8fa) !important;
  background-size: 100% 120vh, 100% 100% !important;
  background-position: top, top !important;
  background-repeat: no-repeat, no-repeat !important;
  /* Scroll-attached instead of fixed — see note in index-cozy.css.
     Fixed attachment + complex gradients = Safari paint jitter on
     upward scroll. */
  background-attachment: scroll !important;
  color: var(--ink) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  overflow-x: clip !important;
  overscroll-behavior-x: none !important;
  max-width: 100vw !important;
}
html:has(body.manishelf-page) {
  overflow-x: clip !important;
  /* Allow vertical bounce / pull-to-refresh; only constrain horizontal. */
  overscroll-behavior-x: none !important;
  /* Lilac so iOS top URL bar samples lilac (matches the visible
     header). Cream fill below the 120vh body gradient is provided
     by a stacked solid layer on body.manishelf-page itself. */
  background-color: #b8a3d0 !important;
}

@media (prefers-color-scheme: dark) {
  /* Match the cool top of the body gradient so overscroll bounce stays
     visually consistent with the header colour. */
  html:has(body.manishelf-page) {
    background-color: #0a0a20 !important;
  }
}

body.manishelf-page .mani-ambient { display: none !important; }

/* ---------- Tile "gifts" (decorative GIFs next to each sticky note) ---------- */
/* Each sticky-note tile has a companion GIF pinned to the side opposite
   the video: non-reverse tiles → GIF on the left; reverse tiles → GIF
   on the right. Positioned absolutely so they don't widen the tile
   itself. Hidden below 1100px where the gutters disappear. */
body.manishelf-page .showcase-tile,
body.manishelf-page .tip-row {
  position: relative !important;
}
body.manishelf-page .tile-gift {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 160px !important;
  height: auto !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  z-index: 2 !important;
}
body.manishelf-page .showcase-tile:not(.reverse) .tile-gift,
body.manishelf-page .tip-row:not(.reverse) .tile-gift {
  left: -190px !important;
}
body.manishelf-page .showcase-tile.reverse .tile-gift,
body.manishelf-page .tip-row.reverse .tile-gift {
  right: -190px !important;
}
@media (max-width: 1100px) {
  body.manishelf-page .tile-gift { display: none !important; }
}

/* ---------- Gutter doodles ---------- */
/* Hand-drawn-feeling symbols scattered down the left/right page margins.
   Full-body overlay, pointer-events: none so they never trap clicks.
   Only applies where the layout has gutter space (>= 1100px viewport). */
body.manishelf-page .side-doodles {
  position: absolute !important;
  /* Start below the hero AND the MacBook/converge section so doodles only
     appear from the features section onward. ~200vh covers both above-the-
     fold blocks on most desktop viewports. */
  top: 200vh !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  pointer-events: none !important;
  /* Sections lower on the page paint opaque section backgrounds (sticky
     notes, converge section, FAQ), which were covering doodles sitting
     at z-index 0. Raise the whole layer above in-flow content but keep
     it below any fixed/sticky topbars (which live at much higher z). */
  z-index: 50 !important;
  overflow: hidden !important;
}
body.manishelf-page .side-doodles .doodle {
  position: absolute !important;
  /* The PNG is used as a mask so a single asset can be re-tinted per
     colour scheme. The element's background-color is what actually
     paints; the PNG alpha defines the shape. */
  background-color: rgba(40, 20, 70, 1) !important;
  -webkit-mask-image: var(--src) !important;
          mask-image: var(--src) !important;
  -webkit-mask-repeat: no-repeat !important;
          mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
          mask-position: center !important;
  -webkit-mask-size: contain !important;
          mask-size: contain !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  will-change: transform;
}
@media (prefers-color-scheme: dark) {
  body.manishelf-page .side-doodles .doodle {
    background-color: rgba(235, 220, 250, 0.95) !important;
  }
}
/* Help page has a very short hero; start the doodles when the first
   post-it note appears, roughly 40vh down the page. */
body.help-page .side-doodles {
  top: 40vh !important;
}
/* Below ~1100px the content fills the full width; the gutters disappear
   and doodles would land on top of paragraphs. Just hide them. */
@media (max-width: 1100px) {
  body.manishelf-page .side-doodles { display: none !important; }
}

/* ---------- Topbar ---------- */

body.manishelf-page .topbar-mark {
  color: var(--ember) !important;
}
body.manishelf-page .topbar-mark .dot {
  background: var(--ember) !important;
  box-shadow: 0 0 10px rgba(201, 118, 90, 0.45) !important;
}
body.manishelf-page .topbar-nav a,
body.manishelf-page .site-nav a {
  color: var(--ink) !important;
}
body.manishelf-page .topbar-nav a:hover,
body.manishelf-page .site-nav a:hover {
  color: var(--ember) !important;
}
body.manishelf-page .topbar-nav a::after,
body.manishelf-page .site-nav a::after {
  background: var(--ember) !important;
}
/* Active page link — currently-selected page name renders in ember
   (orange) with the underline permanently shown, matching the rowmate
   page treatment. */
/* Light mode: active nav link uses plum (the page-heading colour) for
   stronger contrast on cream than the ember orange. The underline
   stays ember as the secondary accent — same double-signal pattern
   editorial sites use. Dark mode keeps the original ember (set inside
   the prefers-color-scheme: dark block below). */
body.manishelf-page .site-nav a.is-active,
body.manishelf-page .topbar-nav a.is-active {
  color: var(--plum) !important;
}
body.manishelf-page .site-nav a.is-active::after,
body.manishelf-page .topbar-nav a.is-active::after {
  transform: scaleX(1) !important;
  background: var(--ember) !important;
}

/* ---------- Hero ---------- */

body.manishelf-page .mani-hero {
  color: var(--ink) !important;
}
body.manishelf-page .mani-title,
body.manishelf-page .mani-title * {
  color: var(--plum) !important;
  font-family: 'Caveat', 'Bradley Hand', cursive !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: clamp(3.8rem, 7.5vw, 6.2rem) !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  font-size: clamp(44px, 7vw, 84px) !important;
  letter-spacing: -0.02em !important;
}
body.manishelf-page .hero-titleblock {
  margin: 0 0 24px !important;
  --icon-w: clamp(44px, 5vw, 60px) !important;
  overflow: visible !important;
  padding-right: 0.3em !important;
}
body.manishelf-page .mani-title {
  overflow: visible !important;
  padding-right: 0.2em !important;
}
body.manishelf-page .mani-icon {
  box-shadow: none !important;
  transition: none !important;
}
body.manishelf-page .mani-icon:hover {
  transform: none !important;
}
body.manishelf-page .mani-hero {
  padding-top: clamp(16px, 3vh, 32px) !important;
}
body.manishelf-page .mani-subtitle {
  margin-bottom: 18px !important;
}
body.manishelf-page .mani-desc {
  margin-bottom: 24px !important;
}
body.manishelf-page .mani-title .m-1 {
  color: var(--plum) !important;
}
body.manishelf-page .mani-title .m-2 {
  color: var(--ember) !important;
}
body.manishelf-page .mani-subtitle {
  color: var(--plum) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem) !important;
  line-height: 1.45 !important;
}
body.manishelf-page .mani-subtitle em {
  color: var(--ember) !important;
  font-family: 'Nunito', sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
}
body.manishelf-page .mani-desc {
  color: var(--ink) !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  background: none !important;
  padding: 0 !important;
  font-weight: 700 !important;
}

/* ---------- App icon softness ---------- */
body.manishelf-page .mani-icon {
  filter: drop-shadow(0 6px 14px rgba(107, 74, 138, 0.18)) !important;
}

/* ---------- MAS "App Store" badge (official Apple artwork) ---------- */

/* The badge artwork is the link itself — no frame, no background.
   Apple's guidelines require unmodified artwork, so we just give it
   space and a subtle hover. */
body.manishelf-page .mas-link {
  display: inline-block;
  line-height: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
body.manishelf-page .mas-link:hover { opacity: 0.85; transform: translateY(-1px); }
body.manishelf-page .mas-link img {
  display: block;
  height: 44px;
  width: auto;
}

/* ---------- Converge section (MacBook stage) ---------- */

body.manishelf-page .converge-section {
  background: transparent !important;
}

/* Thumb strip — warm cards */
body.manishelf-page .thumb-item {
  border-radius: 10px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 6px 16px rgba(42, 31, 61, 0.15) !important;
}
body.manishelf-page .thumb-label {
  background: linear-gradient(transparent, rgba(42, 31, 61, 0.55)) !important;
  color: var(--cream) !important;
}
/* On iPhone the cover thumbnails are too small for the category label
   to read clearly (the text overlay turns into illegible smudge). Hide
   the labels on iPhone — the covers themselves communicate the medium
   well enough at that size. Desktop / iPad keep the labels. */
@media (max-width: 560px) {
  body.manishelf-page .thumb-label { display: none !important; }
}
body.manishelf-page .scroll-chevron {
  color: var(--ember) !important;
  opacity: 0.7 !important;
}

/* Keep the original photo MacBook composite, sized to match the features section */
body.manishelf-page .macbook-wrapper {
  max-width: min(1100px, calc((100dvh - 220px) * 1.53)) !important;
  margin: 0 auto !important;
}

/* ---------- Feature showcase tiles — notebook paper cards ---------- */

body.manishelf-page .feature-showcase {
  background: transparent !important;
}
/* Sticky-note feature tiles — pinned at top, peeled/curling away at the bottom */
body.manishelf-page .showcase-tile {
  background: #fff3b8 !important;
  border: none !important;
  border-radius: 1px !important;
  padding: clamp(24px, 3vw, 40px) !important;
  /* Top edge kisses the wall (almost no shadow). Bottom edge curls outward
     so the cast shadow grows dramatically toward the bottom. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 2px 2px -2px rgba(42, 31, 61, 0.12),
    0 22px 22px -14px rgba(42, 31, 61, 0.35),
    0 38px 32px -22px rgba(42, 31, 61, 0.30) !important;
  position: relative !important;
  transform: rotate(-1deg);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
/* Soft cast-shadow below the peeled bottom edge — widens downward.
   Position/angle/intensity varies per card so it doesn't look copy-pasted. */
body.manishelf-page .showcase-tile::after {
  content: "";
  position: absolute;
  bottom: -22px;
  height: 30px;
  background: radial-gradient(ellipse at center top,
    rgba(42, 31, 61, 0.30) 0%,
    rgba(42, 31, 61, 0.16) 40%,
    transparent 75%);
  filter: blur(6px);
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
  left: 8%;
  right: 8%;
}
body.manishelf-page .feature-showcase .showcase-tile:nth-child(4n+1)::after {
  left: 6% !important; right: 12% !important;
  bottom: -20px !important; height: 28px !important;
  transform: rotate(-1.2deg) !important;
}
body.manishelf-page .feature-showcase .showcase-tile:nth-child(4n+2)::after {
  left: 14% !important; right: 5% !important;
  bottom: -24px !important; height: 32px !important;
  transform: rotate(1.4deg) !important;
}
body.manishelf-page .feature-showcase .showcase-tile:nth-child(4n+3)::after {
  left: 10% !important; right: 10% !important;
  bottom: -18px !important; height: 26px !important;
  transform: rotate(-0.6deg) !important;
}
body.manishelf-page .feature-showcase .showcase-tile:nth-child(4n)::after {
  left: 4% !important; right: 14% !important;
  bottom: -26px !important; height: 34px !important;
  transform: rotate(1.8deg) !important;
}
/* Adhesive strip at top — a slightly darker shade of the sticky's own color. */
body.manishelf-page .showcase-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8%;
  pointer-events: none;
  background: linear-gradient(to bottom, currentColor, transparent);
  opacity: 0;
}
body.manishelf-page .feature-showcase .showcase-tile:nth-child(1)::before {
  background: linear-gradient(to bottom, #fcd76a, rgba(252, 215, 106, 0));
  opacity: 1;
}
body.manishelf-page .feature-showcase .showcase-tile:nth-child(2)::before {
  background: linear-gradient(to bottom, #f7b294, rgba(247, 178, 148, 0));
  opacity: 1;
}
body.manishelf-page .feature-showcase .showcase-tile:nth-child(3)::before {
  background: linear-gradient(to bottom, #c8b0e2, rgba(200, 176, 226, 0));
  opacity: 1;
}
body.manishelf-page .feature-showcase .showcase-tile:nth-child(4)::before {
  background: linear-gradient(to bottom, #a8d7b7, rgba(168, 215, 183, 0));
  opacity: 1;
}
body.manishelf-page .showcase-tile:hover {
  transform: rotate(-1deg) translateY(-3px);
}

/* Alternate colors — cozy pastel set */
body.manishelf-page .feature-showcase .showcase-tile:nth-child(1) { background: #ffe88a !important; transform: rotate(-1.2deg); }
body.manishelf-page .feature-showcase .showcase-tile:nth-child(1):hover { transform: rotate(-1.2deg) translateY(-3px); }

body.manishelf-page .feature-showcase .showcase-tile:nth-child(2) { background: #ffc8b0 !important; transform: rotate(1deg); }
body.manishelf-page .feature-showcase .showcase-tile:nth-child(2):hover { transform: rotate(1deg) translateY(-3px); }

body.manishelf-page .feature-showcase .showcase-tile:nth-child(3) { background: #d9c6ed !important; transform: rotate(-0.8deg); }
body.manishelf-page .feature-showcase .showcase-tile:nth-child(3):hover { transform: rotate(-0.8deg) translateY(-3px); }

body.manishelf-page .feature-showcase .showcase-tile:nth-child(4) { background: #c4e6d0 !important; transform: rotate(1.3deg); }
body.manishelf-page .feature-showcase .showcase-tile:nth-child(4):hover { transform: rotate(1.3deg) translateY(-3px); }

/* Feature headings — higher specificity to beat inline HTML's accent-bright rule */
body.manishelf-page .feature-showcase .showcase-text h3,
body.manishelf-page .feature-showcase .showcase-text h3 em {
  color: var(--ink) !important;
}
body.manishelf-page .showcase-text p {
  color: var(--ink) !important;
}
body.manishelf-page .converge-pin .converge-hint {
  color: var(--ink) !important;
  margin-top: 75px !important;
}
body.manishelf-page .converge-pin .converge-hint em {
  color: var(--ember) !important;
}

/* Hover video frames */
body.manishelf-page .hover-video-wrap {
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 10px 28px rgba(42, 31, 61, 0.18) !important;
  border: 1px solid rgba(107, 74, 138, 0.12) !important;
}
body.manishelf-page .hover-play-hint {
  background: rgba(42, 31, 61, 0.35) !important;
  color: var(--cream) !important;
  backdrop-filter: blur(3px) !important;
}

/* ---------- Checklist / Why / FAQ sections ---------- */

body.manishelf-page .checklist-section,
body.manishelf-page .why-section,
body.manishelf-page .faq-section,
body.manishelf-page .support-section,
body.manishelf-page .features-section {
  background: transparent !important;
}

body.manishelf-page .checklist-section h3,
body.manishelf-page .faq-section h3,
body.manishelf-page .why-section h3,
body.manishelf-page .features-section h3,
body.manishelf-page .compare-section h3,
body.manishelf-page .support-section h3 {
  color: var(--ink) !important;
}

/* Ruled-paper sheet for the Why ManiShelf checklist */
body.manishelf-page .checklist-grid {
  position: relative !important;
  background-color: #fbf4df !important;
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 31px,
      rgba(107, 74, 138, 0.10) 31px,
      rgba(107, 74, 138, 0.10) 32px
    ),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.45  0 0 0 0 0.28  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"),
    radial-gradient(ellipse at 50% 40%, #fdf8e6 0%, #f8efd6 65%, #f2e6c7 100%) !important;
  background-size: auto, 260px 260px, cover !important;
  background-repeat: repeat, repeat, no-repeat !important;
  border-radius: 3px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 2px 8px rgba(42,31,61,0.10),
    0 22px 54px -14px rgba(42,31,61,0.28) !important;
  padding: 20px clamp(24px, 4vw, 44px) 16px !important;
  transform: rotate(-0.6deg) !important;
  gap: 0 48px !important;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s !important;
}
body.manishelf-page .checklist-grid:hover {
  transform: rotate(-0.6deg) translateY(-3px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 4px 12px rgba(42,31,61,0.12),
    0 28px 60px -14px rgba(42,31,61,0.34) !important;
}
body.manishelf-page .checklist-item {
  color: var(--ink) !important;
  border-bottom: 0 !important;
  padding: 0 !important;
  line-height: 32px !important;
  min-height: 32px !important;
}
/* Washi tape straddling the two top corners of the sheet */
body.manishelf-page .checklist-grid::before,
body.manishelf-page .checklist-grid::after {
  content: "" !important;
  position: absolute !important;
  top: -10px !important;
  width: 82px !important;
  height: 26px !important;
  background: linear-gradient(180deg,
    rgba(201, 118, 90, 0.92),
    rgba(178, 100, 75, 0.78)) !important;
  border-left: 1px dashed rgba(255,255,255,0.4) !important;
  border-right: 1px dashed rgba(255,255,255,0.4) !important;
  box-shadow: 0 3px 7px rgba(42,31,61,0.16) !important;
  z-index: 3 !important;
}
body.manishelf-page .checklist-grid::before {
  left: -22px !important;
  transform: rotate(-45deg) !important;
}
body.manishelf-page .checklist-grid::after {
  right: -22px !important;
  transform: rotate(45deg) !important;
}
/* Hand-drawn X markers in Caveat cursive, colour-cycled across the two
   columns so no horizontal row repeats. */
body.manishelf-page .checklist-item .check {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: 0 !important;
  color: transparent !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
}
body.manishelf-page .checklist-item .check::before {
  content: "x" !important;
  font-family: 'Caveat', 'Bradley Hand', cursive !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: var(--ink) !important;
  display: inline-block !important;
  transform: rotate(-6deg) !important;
}
body.manishelf-page .why-label {
  color: var(--ember) !important;
}
body.manishelf-page .why-card,
body.manishelf-page .feature-card,
body.manishelf-page .faq-item {
  background: var(--cream-soft) !important;
  border: 1px solid rgba(107, 74, 138, 0.14) !important;
  border-radius: 6px !important;
  color: var(--ink) !important;
  box-shadow: 0 2px 6px rgba(42, 31, 61, 0.06) !important;
}
body.manishelf-page .faq-item {
  background: #d4c4e3 !important;
  border-color: rgba(107, 74, 138, 0.28) !important;
}
body.manishelf-page .why-card h4,
body.manishelf-page .feature-card h4 {
  color: var(--ink) !important;
}
body.manishelf-page .why-card p,
body.manishelf-page .feature-card p,
body.manishelf-page .faq-item p,
body.manishelf-page .support-section .support-desc,
body.manishelf-page .support-section .support-link,
body.manishelf-page .contact-note {
  color: var(--ink) !important;
}

body.manishelf-page .faq-item summary {
  color: var(--ink) !important;
}
body.manishelf-page .faq-item summary::after {
  color: var(--ember) !important;
}

/* ---------- Compare strip ---------- */
body.manishelf-page .compare-label {
  color: var(--ember) !important;
}

/* ---------- Contact / Support links ---------- */
body.manishelf-page .support-section .support-link {
  background: transparent !important;
  border: 1.5px solid var(--ember) !important;
  color: var(--ember) !important;
}
body.manishelf-page .support-section .support-link:hover {
  background: var(--ember) !important;
  color: var(--cream) !important;
}
body.manishelf-page .contact-address {
  color: var(--ink) !important;
}

/* ---------- Footer ---------- */
body.manishelf-page .mani-footer,
body.manishelf-page footer {
  color: var(--ink) !important;
  border-top: 1px dashed rgba(107, 74, 138, 0.22) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}
body.manishelf-page footer a,
body.manishelf-page .mani-footer a {
  color: var(--ink) !important;
}
/* style.css `.manishelf-page .mani-footer` sets DM Sans + uppercase +
   letter-spacing for the whole footer. The fineprint must opt OUT of
   all three (and reset on the <a> children too, since text-transform
   and letter-spacing inherit). Hardcoded Caveat stack because
   manishelf.html doesn't load index-cozy.css → no --hand var. */
body.manishelf-page .mani-foot-fineprint,
body.manishelf-page .mani-foot-fineprint a {
  font-family: 'Caveat', 'Bradley Hand', cursive !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.manishelf-page .mani-foot-fineprint {
  color: var(--ink-soft) !important;
  display: inline-flex !important;
  gap: 8px !important;
  align-items: baseline !important;
}
body.manishelf-page .mani-foot-fineprint a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color .2s !important;
}
body.manishelf-page .mani-foot-fineprint a:hover { color: var(--ember) !important; }

/* ---------- Generic link tint ---------- */
body.manishelf-page a {
  color: var(--ember);
}
body.manishelf-page a:hover {
  color: var(--plum);
}

/* ============================================================
   DARK MODE — cozy purple night
   ============================================================ */

@media (prefers-color-scheme: dark) {
  body.manishelf-page {
    --cream:        #f3ecdd;
    --cream-soft:   #f7f0e2;
    --sheet:        #2a1f3d;
    --ink:          #f3ecdd;
    --ink-soft:     #d8c9ec;
    --ink-faint:    #9e8cb8;
    --plum:         #c9b8dd;
    --plum-dusk:    #a98ec9;
    --plum-haze:    #3a2a52;
    --ember:        #e89878;
    --ember-warm:   #c9765a;

    --bg-deep:        #1a1128;
    --surface:        #2a1f3d;
    --surface-raised: #342851;
    --border:         rgba(201, 184, 221, 0.14);
    --border-hover:   rgba(232, 152, 120, 0.45);
    --text:           var(--ink);
    --text-muted:     var(--ink-soft);
    --text-dim:       var(--ink-faint);
    --accent:         var(--plum);
    --accent-bright:  var(--plum-dusk);
    --accent-glow:    rgba(169, 142, 201, 0.22);
  }

  body.manishelf-page {
    /* Cool → warm dark gradient. Every stop sits at the same near-black
       lightness as the header (~6% L) so it never gets eye-hurting
       brighter; only the HUE drifts from cool indigo at the top to
       warm plum at the bottom. A faint fractal-noise grain breaks up
       the flatness so the surface doesn't read as a solid colour. */
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.78  0 0 0 0 0.95  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
      linear-gradient(to bottom,
        #0a0a20 0%,
        #0a0a20 25%,
        #0c091c 55%,
        #0e081a 80%,
        #0f0718 100%) !important;
    background-size: 240px 240px, auto !important;
    background-repeat: repeat, no-repeat !important;
    background-attachment: scroll !important;
    color: var(--ink) !important;
  }

  /* Sticky notes in dark mode — deep jewel tones */
  body.manishelf-page .feature-showcase .showcase-tile:nth-child(1) { background: #7d5f2a !important; }
  body.manishelf-page .feature-showcase .showcase-tile:nth-child(2) { background: #72442a !important; }
  body.manishelf-page .feature-showcase .showcase-tile:nth-child(3) { background: #4e3972 !important; }
  body.manishelf-page .feature-showcase .showcase-tile:nth-child(4) { background: #2f5a42 !important; }
  body.manishelf-page .showcase-tile {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.12) inset,
      0 2px 2px -2px rgba(0, 0, 0, 0.4),
      0 22px 22px -14px rgba(0, 0, 0, 0.6),
      0 38px 32px -22px rgba(0, 0, 0, 0.5) !important;
  }
  body.manishelf-page .showcase-tile::after {
    background: radial-gradient(ellipse at center top,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.28) 40%,
      transparent 75%) !important;
  }
  /* Dark-mode sticky top strips — darker shade of each jewel tone */
  body.manishelf-page .feature-showcase .showcase-tile:nth-child(1)::before {
    background: linear-gradient(to bottom, #5d441c, rgba(93, 68, 28, 0)) !important;
  }
  body.manishelf-page .feature-showcase .showcase-tile:nth-child(2)::before {
    background: linear-gradient(to bottom, #55301d, rgba(85, 48, 29, 0)) !important;
  }
  body.manishelf-page .feature-showcase .showcase-tile:nth-child(3)::before {
    background: linear-gradient(to bottom, #372855, rgba(55, 40, 85, 0)) !important;
  }
  body.manishelf-page .feature-showcase .showcase-tile:nth-child(4)::before {
    background: linear-gradient(to bottom, #1f4130, rgba(31, 65, 48, 0)) !important;
  }
  /* On dark stickies, force text colors to dark plum so they read like ink on paper.
     Higher specificity so inline HTML and later .showcase-text p rule can't undo it. */
  body.manishelf-page .feature-showcase .showcase-text h3,
  body.manishelf-page .feature-showcase .showcase-text h3 em {
    color: #fef3d9 !important;
  }
  body.manishelf-page .feature-showcase .showcase-text p {
    color: #f0e4cf !important;
  }

  body.manishelf-page .why-card,
  body.manishelf-page .feature-card,
  body.manishelf-page .faq-item {
    background: #2a1f3d !important;
    border: 1px solid rgba(201, 184, 221, 0.12) !important;
    color: var(--ink) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
  }

  /* Titles stay warm-light (plum-dusk is light purple on dark) — except sticky feature tiles which need dark text */
  body.manishelf-page .mani-title,
  body.manishelf-page .mani-title *,
  body.manishelf-page .checklist-section h3,
  body.manishelf-page .faq-section h3,
  body.manishelf-page .why-section h3,
  body.manishelf-page .features-section h3,
  body.manishelf-page .compare-section h3,
  body.manishelf-page .support-section h3,
  body.manishelf-page .converge-hint,
  body.manishelf-page .why-card h4,
  body.manishelf-page .feature-card h4,
  body.manishelf-page .contact-address {
    color: var(--plum-dusk) !important;
  }

  /* Subtitle / body copy — cream for readability */
  body.manishelf-page .mani-subtitle,
  body.manishelf-page .showcase-text p,
  body.manishelf-page .why-card p,
  body.manishelf-page .feature-card p,
  body.manishelf-page .faq-item p,
  body.manishelf-page .faq-item summary,
  body.manishelf-page .checklist-item,
  body.manishelf-page .mani-desc,
  body.manishelf-page .support-section .support-desc,
  body.manishelf-page .contact-note {
    color: var(--ink) !important;
  }

  body.manishelf-page .mani-subtitle em,
  body.manishelf-page .converge-hint em,
  body.manishelf-page .checklist-item .check,
  body.manishelf-page .why-label,
  body.manishelf-page .compare-label,
  body.manishelf-page .topbar-mark,
  body.manishelf-page .topbar-nav a:hover,
  body.manishelf-page .topbar-nav a::after,
  body.manishelf-page .faq-item summary::after,
  body.manishelf-page footer,
  body.manishelf-page .mani-footer,
  body.manishelf-page a {
    color: var(--ember) !important;
  }

  body.manishelf-page .topbar-mark .dot {
    background: var(--ember) !important;
    box-shadow: 0 0 10px rgba(232, 152, 120, 0.55) !important;
  }

  /* Accents in dark mode */
  body.manishelf-page .mani-title .m-1 {
    color: var(--plum-dusk) !important;
  }
  body.manishelf-page .mani-subtitle em,
  body.manishelf-page .converge-pin .converge-hint em {
    color: var(--ember) !important;
  }

  /* Ember-outlined buttons on dark */
  body.manishelf-page .support-section .support-link {
    background: transparent !important;
    border: 1.5px solid var(--ember) !important;
    color: var(--ember) !important;
  }
  body.manishelf-page .support-section .support-link:hover {
    background: var(--ember) !important;
    color: var(--bg-deep) !important;
  }

  /* Washi tapes on dark — slightly glowy */
  body.manishelf-page .showcase-tile::before {
    background: linear-gradient(180deg,
      rgba(169, 142, 201, 0.85),
      rgba(141, 111, 176, 0.72)) !important;
  }
  body.manishelf-page .showcase-tile.reverse::before {
    background: linear-gradient(180deg,
      rgba(232, 152, 120, 0.88),
      rgba(201, 118, 90, 0.72)) !important;
  }

  /* Dashed dividers */
  body.manishelf-page .mani-topbar { border-bottom-color: rgba(201, 184, 221, 0.20) !important; }
  body.manishelf-page .mani-footer,
  body.manishelf-page footer { border-top-color: rgba(201, 184, 221, 0.18) !important; }
  body.manishelf-page .checklist-item { border-bottom-color: rgba(201, 184, 221, 0.12) !important; }

  /* Tile-gift GIFs are black linework; invert them so they're visible on the dark background. */
  body.manishelf-page .tile-gift {
    filter: invert(1) hue-rotate(180deg) !important;
    opacity: 0.9 !important;
  }

  /* "Why ManiShelf" checklist paper repainted as deep plum notebook sheet, matching the journal's featured entry. */
  body.manishelf-page .checklist-grid {
    background-color: #2a1f3d !important;
    background-image:
      repeating-linear-gradient(to bottom, transparent 0, transparent 31px,
        rgba(201, 184, 221, 0.08) 31px, rgba(201, 184, 221, 0.08) 32px),
      radial-gradient(ellipse at 50% 30%, #352850 0%, #2a1f3d 65%, #231734 100%) !important;
    background-size: auto, cover !important;
    background-repeat: repeat, no-repeat !important;
    box-shadow:
      0 1px 0 rgba(201, 184, 221, 0.06) inset,
      0 2px 8px rgba(0, 0, 0, 0.4),
      0 22px 54px -14px rgba(0, 0, 0, 0.55) !important;
  }
  body.manishelf-page .checklist-item,
  body.manishelf-page .checklist-item * {
    color: var(--ink-soft, #d8c9ec) !important;
  }
  body.manishelf-page .checklist-item .check::before {
    color: var(--ember, #e89878) !important;
  }
}

/* ============================================================
   UNIFIED HEADER — matches the homepage style across all pages
   ============================================================ */

body.manishelf-page .site-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding: 0 !important;
  border-bottom: 0 !important;
  margin-bottom: clamp(20px, 3vh, 36px) !important;
}
body.manishelf-page .site-top .mark {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  color: var(--ink) !important;
}
body.manishelf-page .site-top .mark-word {
  font-family: 'Caveat', 'Bradley Hand', cursive !important;
  font-size: 30px !important;
  line-height: 1 !important;
  color: var(--ink) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.manishelf-page .site-top .site-nav {
  font-family: 'Caveat', 'Bradley Hand', cursive !important;
  font-size: 26px !important;
  color: var(--ink) !important;
  display: inline-flex !important;
  gap: 10px !important;
  align-items: baseline !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.manishelf-page .site-top .site-nav a {
  text-decoration: none !important;
  position: relative !important;
  padding: 0 2px !important;
  color: var(--ink) !important;
  transition: color .2s !important;
  font-family: 'Caveat', 'Bradley Hand', cursive !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.manishelf-page .site-top .site-nav a::after {
  content: '' !important;
  position: absolute !important;
  left: 0; right: 0; bottom: -2px !important;
  height: 2px !important;
  background: var(--ember) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform .35s cubic-bezier(.2,.8,.2,1) !important;
  border-radius: 2px !important;
}
body.manishelf-page .site-top .site-nav a:hover { color: var(--ink) !important; }
body.manishelf-page .site-top .site-nav a:hover::after { transform: scaleX(1) !important; }
body.manishelf-page .site-top .site-nav a.is-active { color: var(--plum) !important; }
body.manishelf-page .site-top .site-nav a.is-active::after { transform: scaleX(1) !important; }
body.manishelf-page .site-top .nav-sep { color: var(--ink-faint) !important; }

@media (max-width: 560px) {
  /* Match the home page's iPhone .frame padding so the header sits at the
     same vertical offset and same horizontal inset on every page. */
  body.manishelf-page .mani-wrap { padding: 0 18px !important; }
  body.manishelf-page .mani-wrap-top { padding-top: 22px !important; }

  body.manishelf-page .site-top {
    flex-wrap: nowrap !important;
    gap: 10px !important;
    position: relative !important;
  }
  /* iPhone wordmark: hide "oitoana" text, render a tiny ember pulsing
     dot + back-arrow so the whole nav fits on one row beside it. */
  body.manishelf-page .site-top .mark-word { display: none !important; }
  body.manishelf-page .site-top .mark { gap: 4px !important; }
  body.manishelf-page .site-top .mark::before {
    content: '' !important;
    display: inline-block !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: var(--ember) !important;
    animation: mark-pulse 1.8s ease-in-out infinite !important;
  }
  body.manishelf-page .site-top .mark::after {
    content: '←' !important;
    font-family: 'Caveat', 'Bradley Hand', cursive !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: var(--ember) !important;
    /* Caveat ← glyph sits high in its bounding box — nudge down so
       it shares an optical centre with the dot. */
    transform: translateY(2px) !important;
  }

  /* Smaller nav font + tighter gap so 5 items fit on a single iPhone
     row beside the icon. */
  body.manishelf-page .site-top .site-nav,
  body.manishelf-page .site-top .site-nav a { font-size: 18px !important; }
  body.manishelf-page .site-top .site-nav {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    min-width: 0 !important;
  }
  body.manishelf-page .site-top .site-nav .nav-sep { opacity: 0.55 !important; }
}

@keyframes mark-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.85; box-shadow: 0 0 0 0 rgba(201, 118, 90, 0.40); }
  50%      { transform: scale(1.25); opacity: 1;    box-shadow: 0 0 0 5px rgba(201, 118, 90, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body.manishelf-page .site-top .mark::before { animation: none !important; }
}

@media (prefers-color-scheme: dark) {
  body.manishelf-page .site-top {
    border-bottom: 0 !important;
  }
  body.manishelf-page .site-top .mark-word { color: var(--ink) !important; }
  body.manishelf-page .site-top .site-nav,
  body.manishelf-page .site-top .site-nav a { color: var(--ink) !important; }
  body.manishelf-page .site-top .site-nav a:hover { color: var(--ink) !important; }
  body.manishelf-page .site-top .site-nav a.is-active { color: var(--ember) !important; }
}

/* Mobile: keep the oitoana wordmark as the brand identity (no
   "home" text swap) — consistent with the home page and clearer than
   a generic label. Also hide desktop-only chrome. */
@media (max-width: 560px) {
  body.manishelf-page .desk-only { display: none !important; }
}