/* StapleWatch pages, layered on top of /assets/styles.css.
   Swaps the site's red accent for the app's green inside body.sw only. */
body.sw{
  --red:#22c55e; --red-2:#34d876; --red-dark:#15803d; --red-glow:rgba(34,197,94,.32);
}
body.sw .notice{ background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.3); }
body.sw .btn-primary{ color:#04130a; }
body.sw .hero h1 .accent{ background:linear-gradient(120deg, var(--red-2), #a7f3c4); -webkit-background-clip:text; background-clip:text; }
body.sw .hero::before{
  background:
    radial-gradient(720px 420px at 78% 8%, rgba(34,197,94,.16), transparent 65%),
    radial-gradient(600px 500px at 12% 90%, rgba(34,197,94,.07), transparent 60%);
}
body.sw .cta{ background:radial-gradient(600px 300px at 50% 0%, rgba(34,197,94,.14), transparent 70%), var(--bg-2); }

.sw-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:700; letter-spacing:-.01em; }
.sw-brand img{ width:34px; height:34px; border-radius:9px; }

.sw-hero{ padding-bottom:80px; }
.sw-hero-inner{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.sw-hero-copy h1{ font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.06; letter-spacing:-.03em; margin:18px 0 18px; }
.sw-icon{ width:96px; height:96px; border-radius:22px; box-shadow:0 18px 50px rgba(34,197,94,.28); margin-bottom:22px; display:block; }
.sw-hero-shot{ display:flex; justify-content:center; }
.sw-hero-shot img, .sw-shot img{
  width:100%; height:auto; display:block;
  border-radius:34px; border:1px solid var(--border-2);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.sw-hero-shot img{ max-width:320px; }
.sw-soon{ cursor:default; opacity:.92; }
.sw-soon:hover{ transform:none; }
.sw-fine{ color:var(--muted-2); font-size:.9rem; margin-top:18px; }

.sw-emoji{ font-size:1.9rem; line-height:1; margin-bottom:14px; }
.sw-card h3{ margin:0 0 8px; }
.sw-card p{ color:var(--muted); margin:0; font-size:.95rem; }
.sw-card a{ color:var(--red-2); }

.sw-shots{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,260px);
  gap:22px; overflow-x:auto; padding:6px 4px 22px; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.sw-shot{ margin:0; scroll-snap-align:start; }
.sw-shot img{ border-radius:28px; }
.sw-shot figcaption{ color:var(--muted); font-size:.92rem; text-align:center; margin-top:12px; }

.sw-pro{ display:grid; grid-template-columns:1fr 1.2fr; gap:48px; padding:44px; align-items:start; }
.sw-pro h2{ margin:10px 0 14px; }
.sw-prolist{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; }
.sw-prolist li{ padding-left:26px; position:relative; }
.sw-prolist li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--red-2); font-weight:800; }
.sw-prolist strong{ display:block; }
.sw-prolist span{ color:var(--muted); font-size:.92rem; }

.doc h3{ color:var(--text); font-size:1.05rem; }

@media (max-width: 860px){
  .sw-hero-inner{ grid-template-columns:1fr; gap:40px; }
  .sw-hero-shot img{ max-width:260px; }
  .sw-pro{ grid-template-columns:1fr; padding:28px; gap:28px; }
  .sw-prolist{ grid-template-columns:1fr; }
}