/* ==========================================================================
   Power Saver section (/power-saver/): the sister app's pages on onsun.app.

   The pages reuse the site's components (hero, feature cards, FAQ, download
   block, legal .wrap) and re-point the accent tokens to the app's own palette
   (lib/core/colors.dart in the app repo): brand teal #2EA8A0, accent blue
   #0099FF, savings green #16A34A. Everything is scoped under .ps so the shared
   nav keeps OnSun's coral.
   ========================================================================== */
.ps {
  --coral: #2ea8a0;
  --coral-2: #1d8a82;
  --peach: #5ed3cb;
  --gold: #0099ff;
  --green: #16a34a;
  --ps-teal: #2ea8a0;
  --ps-teal-strong: #1d8a82;
  --ps-blue: #0099ff;
  --ps-green: #16a34a;
  --ps-ink: #0b1b2b;
  --gradient-accent: linear-gradient(135deg, #2ea8a0 0%, #0099ff 100%);
  --gradient-warm: linear-gradient(135deg, #4df58f 0%, #0ea5ff 100%);
  --gradient-coral-block: linear-gradient(135deg, #2ea8a0 0%, #1a9ad6 55%, #0099ff 100%);
  --gradient-glow: radial-gradient(ellipse at 50% 0%, rgba(46, 168, 160, 0.12) 0%, transparent 55%);
  --gradient-hero:
    radial-gradient(ellipse 80% 60% at 12% -5%, rgba(214, 243, 240, 0.95) 0%, transparent 60%),
    radial-gradient(ellipse 70% 55% at 88% 8%, rgba(214, 235, 255, 0.85) 0%, transparent 58%),
    radial-gradient(ellipse 95% 75% at 50% 108%, rgba(229, 236, 240, 0.7) 0%, transparent 62%),
    #f6f8f8;
  --shadow-card: 0 20px 50px rgba(46, 168, 160, 0.14);
  --shadow-card-hover: 0 28px 60px rgba(46, 168, 160, 0.22);
  --shadow-coral: 0 16px 40px rgba(46, 168, 160, 0.3);
  --chip-bg: rgba(46, 168, 160, 0.12);
  --chip-border: rgba(46, 168, 160, 0.28);
  --code-bg: rgba(46, 168, 160, 0.12);
  --bg-primary: #f6f8f8;
  --bg-secondary: #eef5f5;
}
[data-theme="dark"] .ps {
  --coral: #3fd1c7;
  --coral-2: #5ed3cb;
  --peach: #8ef0e8;
  --gold: #4db8ff;
  --green: #3ddc84;
  --gradient-accent: linear-gradient(135deg, #3fd1c7 0%, #4db8ff 100%);
  --gradient-coral-block: linear-gradient(135deg, #1d8a82 0%, #0b6fb3 100%);
  --gradient-glow: radial-gradient(ellipse at 50% 0%, rgba(63, 209, 199, 0.22) 0%, transparent 50%);
  --gradient-hero: linear-gradient(135deg, #0a0a1a 0%, #0e1f2b 50%, #0d0d24 100%);
  --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 30px 60px rgba(0, 0, 0, 0.45);
  --shadow-coral: 0 10px 30px rgba(63, 209, 199, 0.35);
  --chip-bg: rgba(63, 209, 199, 0.15);
  --chip-border: rgba(63, 209, 199, 0.3);
  --code-bg: rgba(63, 209, 199, 0.15);
  --bg-primary: #0a0a1a;
  --bg-secondary: #12122a;
}

/* Components that hard-code OnSun's coral rather than reading a token. */
/* The shared nav sits outside .ps, so on Power Saver pages build_nav.py tags
   its "Get the App" button .nav-cta-ps and it takes the app's gradient here,
   matching .ps .btn-primary. Dark mode keeps the deeper light-mode gradient so
   the white label stays legible. */
a.nav-cta.nav-cta-ps { background: linear-gradient(135deg, #2ea8a0 0%, #0099ff 100%); }
a.nav-cta.nav-cta-ps:hover { box-shadow: 0 16px 40px rgba(46, 168, 160, 0.3); }
[data-theme="dark"] a.nav-cta.nav-cta-ps:hover { box-shadow: 0 10px 30px rgba(63, 209, 199, 0.35); }

.ps .btn-primary { animation: none; box-shadow: 0 10px 30px rgba(46, 168, 160, 0.3); }
.ps .btn-primary:hover { box-shadow: 0 15px 40px rgba(46, 168, 160, 0.45); }
.ps .phone-glow { background: radial-gradient(ellipse, rgba(46, 168, 160, 0.28) 0%, transparent 70%); }
.ps .highlight-box { background: linear-gradient(135deg, rgba(46, 168, 160, 0.08) 0%, rgba(0, 153, 255, 0.07) 100%); }
[data-theme="dark"] .ps .highlight-box { background: linear-gradient(135deg, rgba(63, 209, 199, 0.1) 0%, rgba(77, 184, 255, 0.06) 100%); }
.ps .benefit-item:hover .benefit-icon { box-shadow: 0 15px 50px rgba(46, 168, 160, 0.45); }
.ps .tip-box { background: rgba(22, 163, 74, 0.08); }
[data-theme="dark"] .ps .tip-box { background: rgba(61, 220, 132, 0.1); }
.ps .particle { background: var(--ps-teal); }
.ps .hero { min-height: auto; padding: 7.5rem 2rem 4rem; }
.ps .hero-title { font-size: clamp(2.3rem, 4.6vw, 3.6rem); }

/* Eyebrow pill above the hero title: "Free power window app" */
.ps-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.9rem; margin-bottom: 1.25rem;
  border-radius: var(--r-pill); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ps-teal-strong); background: var(--chip-bg); border: 1px solid var(--chip-border);
  animation: fadeInUp 1s ease-out;
}
[data-theme="dark"] .ps-eyebrow { color: var(--peach); }
.ps-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gradient-warm); }

/* Store availability line (the app is not yet listed) */
.ps-stores { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.ps-store-soon {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.4rem; border-radius: var(--r-pill);
  background: var(--bg-card); border: 1px solid var(--border-strong);
  color: var(--text-primary); font-weight: 600; font-size: 0.95rem;
}
.ps-store-soon svg { width: 20px; height: 20px; flex-shrink: 0; }
.ps-store-note { font-size: 0.9rem; color: var(--text-muted); margin-top: 0.75rem; }

/* Three-step "how it works" */
.ps-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1100px; margin: 0 auto; }
.ps-step { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 2rem; }
.ps-step-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--gradient-accent); color: #fff; font-weight: 800; margin-bottom: 1.25rem; }
.ps-step h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.6rem; }
.ps-step p { color: var(--text-secondary); font-size: 0.98rem; line-height: 1.7; }

/* Two-column feature band with a phone */
.ps-band { padding: 5rem 2rem; background: var(--bg-primary); }
.ps-band-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 4rem; align-items: center; }
.ps-band-inner.flip { grid-template-columns: 0.85fr 1.15fr; }
.ps-band-inner.flip .ps-band-phone { order: -1; }
.ps-band h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 700; line-height: 1.2; margin-bottom: 1rem; letter-spacing: -0.01em; }
.ps-band p { color: var(--text-secondary); font-size: 1.075rem; line-height: 1.8; margin-bottom: 1rem; }
.ps-band ul { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.ps-band li { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--text-secondary); font-size: 1rem; line-height: 1.6; }
.ps-band li::before { content: ''; flex-shrink: 0; width: 22px; height: 22px; margin-top: 0.1rem; border-radius: 50%; background: var(--chip-bg); border: 1px solid var(--chip-border);
  -webkit-mask: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea8a0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: 12px 12px; background-position: center; background-repeat: no-repeat; }
.ps-band-phone { position: relative; }
.ps-band-phone img { display: block; width: 100%; max-width: 330px; height: auto; margin: 0 auto; }
.ps-source { font-size: 0.85rem; color: var(--text-muted); margin-top: 1rem; }
.ps-source a { color: var(--coral); }

/* "Where it applies" table */
.ps-table-wrap { max-width: 900px; margin: 0 auto; overflow-x: auto; }
.ps-table { width: 100%; border-collapse: collapse; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; font-size: 0.98rem; }
.ps-table th, .ps-table td { text-align: left; padding: 0.95rem 1.2rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.ps-table th { background: var(--surface-soft); font-weight: 600; color: var(--text-primary); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }
.ps-table td { color: var(--text-secondary); }
.ps-table tr:last-child td { border-bottom: none; }
.ps-table td strong { color: var(--text-primary); font-weight: 600; }
.ps-table-note { max-width: 900px; margin: 1rem auto 0; font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; }
.ps-table-note a { color: var(--coral); }

/* Privacy statement block */
.ps-privacy { padding: 5rem 2rem; background: var(--bg-secondary); }
.ps-privacy-inner { max-width: 820px; margin: 0 auto; background: var(--bg-card); border: 1px solid var(--border); border-left: 5px solid var(--ps-teal); border-radius: var(--r-card); padding: 2.25rem 2.5rem; box-shadow: var(--shadow-card); }
.ps-privacy-inner h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; margin-bottom: 0.75rem; }
.ps-privacy-inner p { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.75; margin-bottom: 0.75rem; }
.ps-privacy-inner p:last-child { margin-bottom: 0; }
.ps-privacy-inner a { color: var(--coral); }

/* Section rhythm */
.ps .features { padding: 5rem 2rem; }
.ps .faq { padding: 5rem 2rem; }
.ps .section-header { margin-bottom: 3rem; }
.ps .download-cta-inner::before { background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.22) 0%, transparent 55%); }

/* Legal pages: a teal logo box in place of OnSun's SVG */
.ps .logo-box img { border-radius: 14px; }
.ps .wrap .ps-summary { background: var(--chip-bg); border: 1px solid var(--chip-border); border-radius: var(--r-panel); padding: 1.25rem 1.5rem; margin: 1.5rem 0 2rem; }
.ps .wrap .ps-summary p { margin-bottom: 0.5rem; }
.ps .wrap .ps-summary p:last-child { margin-bottom: 0; }
.ps .wrap .ps-summary strong { color: var(--text-primary); }
.ps .wrap section { scroll-margin-top: 6rem; }
.ps .wrap .toc { columns: 2; column-gap: 2rem; margin: 0 0 2rem; padding: 0; list-style: none; font-size: 0.95rem; }
.ps .wrap .toc li { break-inside: avoid; margin-bottom: 0.35rem; }
.ps .wrap .toc a { text-decoration: none; }
.ps .wrap .toc a:hover { text-decoration: underline; }
.ps .wrap .defs dt { color: var(--text-primary); font-weight: 600; margin-top: 0.75rem; }
.ps .wrap .defs dd { color: var(--text-secondary); margin: 0.2rem 0 0 0; line-height: 1.7; }

@media (max-width: 968px) {
  .ps-steps { grid-template-columns: 1fr; }
  .ps-band-inner, .ps-band-inner.flip { grid-template-columns: 1fr; gap: 2.5rem; text-align: left; }
  .ps-band-inner.flip .ps-band-phone { order: 0; }
  .ps-band-phone img { max-width: 280px; }
}
@media (max-width: 640px) {
  /* Tables stack into labelled cards so nothing scrolls sideways on a phone. */
  /* onsun.css turns .wrap tables into nowrap scrollers on small screens; undo that here. */
  .ps-table, .ps .wrap table { display: block; border: none; background: none; white-space: normal; overflow: visible; }
  .ps-table thead, .ps .wrap thead { display: none; }
  .ps-table tbody, .ps .wrap tbody { display: block; }
  .ps-table tr, .ps .wrap tr { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-panel); margin-bottom: 0.9rem; overflow: hidden; }
  .ps-table td, .ps .wrap td { display: block; border: none; border-bottom: 1px solid var(--hairline); padding: 0.7rem 1rem; }
  .ps-table td:last-child, .ps .wrap td:last-child { border-bottom: none; }
  .ps .wrap tbody tr:nth-child(even) td { background: transparent; }
  .ps-table td::before, .ps .wrap td[data-label]::before { content: attr(data-label); display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.2rem; }
  .ps .wrap .toc { columns: 1; }
  .ps-privacy-inner { padding: 1.75rem 1.5rem; }
  .ps .hero { padding: 6.5rem 1.25rem 3rem; }
}