@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;1,9..144,300&family=DM+Sans:wght@300;400;500&display=swap');

/* ── CSS Variables scoped to plugin wrapper ── */
#sst-wrap {
  --sst-cream:    #faf8f4;
  --sst-ink:      #1a1612;
  --sst-sage:     #4a7c5f;
  --sst-sage-lt:  #d4e8dc;
  --sst-amber:    #c8834a;
  --sst-amber-lt: #f5e8d8;
  --sst-sky:      #3a6b8a;
  --sst-sky-lt:   #d2e8f5;
  --sst-blush:    #b85c6e;
  --sst-blush-lt: #f5d8df;
  --sst-gold:     #d4a947;
  --sst-muted:    #7a736b;
  --sst-border:   rgba(26,22,18,.10);
  --sst-r-sm:     10px;
  --sst-r-md:     18px;
  --sst-r-lg:     28px;
  --sst-r-xl:     48px;
  --sst-ease:     cubic-bezier(.16,1,.3,1);
  font-family: 'DM Sans', sans-serif;
  color: var(--sst-ink);
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.6;
}

#sst-wrap *, #sst-wrap *::before, #sst-wrap *::after { box-sizing: border-box; }
#sst-wrap a { color: inherit; text-decoration: none !important; }
#sst-wrap a:hover, #sst-wrap a:visited, #sst-wrap a:focus { text-decoration: none !important; }

/* ── Shared ── */
.sst-serif { font-family: 'Fraunces', serif; }
.sst-container { max-width: 1100px; margin: 0 auto; }
.sst-section { padding: clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,4rem); }
.sst-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .75rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase;
  color: var(--sst-muted); margin-bottom: 1rem;
}
.sst-badge::before { content:''; width:20px; height:1.5px; background:var(--sst-muted); border-radius:2px; }
.sst-badge-light { color: rgba(250,248,244,.5); }
.sst-badge-light::before { background: rgba(250,248,244,.4); }
.sst-h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700; line-height: 1.12; letter-spacing: -.02em; margin-bottom: 1rem;
}
.sst-h2.sst-light { color: var(--sst-cream); }
.sst-sub { color: var(--sst-muted); font-size: 1.05rem; max-width: 520px; line-height: 1.7; }
.sst-sub.sst-sub-light { color: rgba(250,248,244,.6); }

/* ── Buttons ── */
.sst-btn-primary {
  background: var(--sst-ink); color: var(--sst-cream) !important;
  padding: .8rem 2rem; border-radius: var(--sst-r-xl);
  font-size: 1rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: background .25s, transform .15s, box-shadow .25s;
  box-shadow: 0 4px 20px rgba(26,22,18,.18);
  text-decoration: none !important;
}
.sst-btn-primary:hover { background: var(--sst-sage); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(74,124,95,.30); color: var(--sst-cream) !important; }
.sst-btn-secondary {
  background: transparent; color: var(--sst-ink) !important;
  padding: .8rem 1.8rem; border-radius: var(--sst-r-xl);
  border: 1.5px solid var(--sst-border);
  font-size: 1rem; font-weight: 400;
  display: inline-flex; align-items: center;
  transition: border-color .2s, background .2s, transform .15s;
  text-decoration: none !important;
}
.sst-btn-secondary:hover { border-color: var(--sst-ink); background: rgba(26,22,18,.04); transform: translateY(-2px); }
.sst-btn-light {
  background: var(--sst-cream); color: var(--sst-ink) !important;
  padding: .8rem 2rem; border-radius: var(--sst-r-xl);
  font-size: 1rem; font-weight: 500;
  transition: transform .15s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  text-decoration: none !important; display: inline-flex; align-items: center;
}
.sst-btn-light:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.sst-btn-outline-light {
  border: 1.5px solid rgba(250,248,244,.3); color: rgba(250,248,244,.8) !important;
  padding: .8rem 1.8rem; border-radius: var(--sst-r-xl);
  font-size: 1rem; font-weight: 400;
  display: inline-flex; align-items: center;
  transition: border-color .2s, background .2s;
  text-decoration: none !important;
}
.sst-btn-outline-light:hover { border-color: rgba(250,248,244,.8); background: rgba(250,248,244,.08); }

/* ── Reveal animation ── */
.sst-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s var(--sst-ease), transform .7s var(--sst-ease);
}
.sst-reveal.sst-visible { opacity: 1; transform: translateY(0); }

/* ── Hero ── */
.sst-hero {
  position: relative; overflow: hidden;
  background: var(--sst-cream);
}
.sst-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 60% at 80% 30%, rgba(74,124,95,.10) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 15% 70%, rgba(58,107,138,.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 55% 90%, rgba(200,131,74,.08) 0%, transparent 60%);
}
.sst-blob {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .18; pointer-events: none;
  animation: sstBlobDrift 12s ease-in-out infinite alternate;
}
.sst-blob-1 { width:420px; height:420px; background:var(--sst-sage); top:-80px; right:-60px; animation-duration:14s; }
.sst-blob-2 { width:280px; height:280px; background:var(--sst-sky);  bottom:40px; left:-40px; animation-duration:11s; animation-delay:-4s; }
.sst-blob-3 { width:200px; height:200px; background:var(--sst-amber); bottom:100px; right:200px; animation-duration:9s; animation-delay:-7s; }
@keyframes sstBlobDrift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(30px,-30px) scale(1.08); }
}
.sst-hero-inner {
  position: relative; z-index: 1;
  max-width: 1100px; margin: 0 auto;
  padding: clamp(5rem,12vw,9rem) clamp(1.5rem,5vw,4rem) clamp(4rem,8vw,7rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
}
.sst-hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--sst-sage-lt); color: var(--sst-sage);
  font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  padding: .4rem 1rem; border-radius: var(--sst-r-xl); margin-bottom: 1.4rem;
  animation: sstFadeUp .7s var(--sst-ease) both;
}
.sst-pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sst-sage);
  animation: sstPulse 2s infinite; display: inline-block;
}
@keyframes sstPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.4)} }
.sst-h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.6rem, 5.5vw, 4.2rem); font-weight: 700; line-height: 1.08;
  letter-spacing: -.02em; margin-bottom: 1.4rem;
  animation: sstFadeUp .7s var(--sst-ease) .1s both;
}
.sst-h1 em { font-style: italic; font-weight: 300; color: var(--sst-sage); }
.sst-hero-sub {
  font-size: 1.1rem; color: var(--sst-muted); max-width: 440px;
  line-height: 1.7; margin-bottom: 2.2rem;
  animation: sstFadeUp .7s var(--sst-ease) .2s both;
}
.sst-hero-actions {
  display: flex; gap: 1rem; flex-wrap: wrap;
  animation: sstFadeUp .7s var(--sst-ease) .3s both;
}
.sst-hero-stats {
  display: flex; gap: 2.5rem; margin-top: 3rem;
  animation: sstFadeUp .7s var(--sst-ease) .4s both;
}
.sst-stat { display: flex; flex-direction: column; }
.sst-stat-num { font-family:'Fraunces',serif; font-size:2rem; font-weight:700; }
.sst-stat-lbl { font-size:.8rem; color:var(--sst-muted); }

/* hero visual */
.sst-hero-visual { position: relative; animation: sstFadeUp .8s var(--sst-ease) .25s both; }
.sst-hero-card {
  background: #fff; border: 1px solid var(--sst-border); border-radius: var(--sst-r-lg);
  padding: 2rem; box-shadow: 0 20px 60px rgba(26,22,18,.10), 0 4px 16px rgba(26,22,18,.06);
}
.sst-hc-label { font-size:.72rem; font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:var(--sst-muted); margin-bottom:1rem; }
.sst-hc-chart { height:100px; display:flex; align-items:flex-end; gap:6px; margin-bottom:1.2rem; }
.sst-bar { flex:1; border-radius:6px 6px 0 0; background:linear-gradient(180deg,var(--sst-sage) 0%,rgba(74,124,95,.4) 100%); }
.sst-bar.sst-accent { background:linear-gradient(180deg,var(--sst-amber) 0%,rgba(200,131,74,.4) 100%); }
.sst-hc-foot { display:flex; justify-content:space-between; align-items:flex-end; }
.sst-hc-big { font-family:'Fraunces',serif; font-size:2.2rem; font-weight:700; }
.sst-hc-growth { background:var(--sst-sage-lt); color:var(--sst-sage); font-size:.82rem; font-weight:500; padding:.3rem .7rem; border-radius:var(--sst-r-xl); }
.sst-hcf {
  position:absolute; background:#fff; border:1px solid var(--sst-border);
  border-radius:var(--sst-r-md); padding:1rem 1.2rem;
  box-shadow:0 10px 40px rgba(26,22,18,.12);
  display:flex; align-items:center; gap:.8rem; font-size:.85rem;
}
.sst-hcf-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.sst-fi-sage  { background:var(--sst-sage-lt); }
.sst-fi-amber { background:var(--sst-amber-lt); }
.sst-fi-sky   { background:var(--sst-sky-lt); }
.sst-fi-blush { background:var(--sst-blush-lt); }
.sst-fi-gold  { background:#f5edd8; }
.sst-fi-ink   { background:#e8e4e0; }
.sst-hcf-1 { top:-22px; right:-18px; animation:sstFloat 6s ease-in-out infinite; }
.sst-hcf-2 { bottom:-22px; left:-18px; animation:sstFloat 6s ease-in-out infinite; animation-delay:-3s; }
@keyframes sstFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ── How it Works ── */
.sst-about-section { background: var(--sst-cream); }
.sst-steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3.5rem; }
.sst-step-card {
  position:relative; background:#fff; border:1px solid var(--sst-border);
  border-radius:var(--sst-r-lg); padding:2.2rem;
  transition:transform .3s var(--sst-ease), box-shadow .3s;
}
.sst-step-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(26,22,18,.10); }
.sst-step-num { font-family:'Fraunces',serif; font-size:3.5rem; font-weight:700; line-height:1; color:var(--sst-border); position:absolute; top:1.2rem; right:1.5rem; user-select:none; }
.sst-step-icon { font-size:2rem; margin-bottom:1.2rem; }
.sst-step-title { font-family:'Fraunces',serif; font-size:1.25rem; font-weight:600; margin-bottom:.6rem; }
.sst-step-desc { color:var(--sst-muted); font-size:.925rem; line-height:1.7; }

/* ── Featured Tools ── */
.sst-feat-section { background: #fff; }
.sst-feat-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:3rem; flex-wrap:wrap; gap:1rem; }
.sst-feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.sst-feat-card {
  border:1.5px solid var(--sst-border); border-radius:var(--sst-r-lg);
  padding:1.8rem; position:relative; overflow:hidden;
  transition:transform .3s var(--sst-ease), border-color .3s, box-shadow .3s;
  cursor:pointer;
}
.sst-feat-card::before { content:''; position:absolute; inset:0; opacity:0; transition:opacity .3s; }
.sst-feat-card:hover { transform:translateY(-5px); border-color:transparent; box-shadow:0 16px 48px rgba(26,22,18,.12); }
.sst-feat-card:hover::before { opacity:1; }
.sst-fc-sage::before  { background:linear-gradient(135deg,rgba(74,124,95,.07) 0%,rgba(74,124,95,.02) 100%); }
.sst-fc-sky::before   { background:linear-gradient(135deg,rgba(58,107,138,.07) 0%,rgba(58,107,138,.02) 100%); }
.sst-fc-amber::before { background:linear-gradient(135deg,rgba(200,131,74,.07) 0%,rgba(200,131,74,.02) 100%); }
.sst-fc-blush::before { background:linear-gradient(135deg,rgba(184,92,110,.07) 0%,rgba(184,92,110,.02) 100%); }
.sst-fc-gold::before  { background:linear-gradient(135deg,rgba(212,169,71,.07) 0%,rgba(212,169,71,.02) 100%); }
.sst-fc-ink::before   { background:linear-gradient(135deg,rgba(26,22,18,.06) 0%,rgba(26,22,18,.01) 100%); }
.sst-feat-icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:1.2rem; }
.sst-feat-title { font-family:'Fraunces',serif; font-size:1.15rem; font-weight:600; margin-bottom:.5rem; }
.sst-feat-desc  { font-size:.88rem; color:var(--sst-muted); line-height:1.65; margin-bottom:1rem; }
.sst-feat-link  { font-size:.82rem; font-weight:500; display:inline-flex; align-items:center; gap:.35rem; transition:gap .2s; text-decoration:none !important; }
.sst-feat-link:hover { gap:.6rem; }
.sst-fc-sage  .sst-feat-link { color:var(--sst-sage); }
.sst-fc-sky   .sst-feat-link { color:var(--sst-sky); }
.sst-fc-amber .sst-feat-link { color:var(--sst-amber); }
.sst-fc-blush .sst-feat-link { color:var(--sst-blush); }
.sst-fc-gold  .sst-feat-link { color:var(--sst-gold); }
.sst-fc-ink   .sst-feat-link { color:var(--sst-muted); }

/* ── Tools Directory ── */
.sst-dir-section { background: var(--sst-cream); }
.sst-tools-head  { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1.5rem; margin-bottom:2rem; }
.sst-controls    { display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; margin-bottom:2rem; }
.sst-search-wrap { position:relative; flex:1; min-width:220px; }
.sst-search-wrap svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--sst-muted); }
#sst-search {
  width:100%; padding:.7rem 1rem .7rem 2.6rem;
  border:1.5px solid var(--sst-border); border-radius:var(--sst-r-xl);
  background:#fff; font-family:'DM Sans',sans-serif; font-size:.9rem;
  outline:none; transition:border-color .2s;
}
#sst-search:focus { border-color:var(--sst-sage); }
.sst-pills { display:flex; gap:.5rem; flex-wrap:wrap; }
.sst-pill {
  padding:.45rem 1.1rem; border-radius:var(--sst-r-xl);
  font-size:.82rem; font-weight:500; cursor:pointer;
  border:1.5px solid var(--sst-border); background:#fff; color:var(--sst-muted);
  transition:all .2s; user-select:none;
}
.sst-pill:hover  { border-color:var(--sst-ink); color:var(--sst-ink); }
.sst-pill.active { background:var(--sst-ink); color:var(--sst-cream); border-color:var(--sst-ink); }

#sst-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.2rem; }
.sst-tool-card {
  background:#fff; border:1.5px solid var(--sst-border);
  border-radius:var(--sst-r-md); padding:1.6rem;
  transition:transform .3s var(--sst-ease), box-shadow .3s, border-color .3s;
  cursor:pointer; position:relative;
}
.sst-tool-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(26,22,18,.10); border-color:rgba(26,22,18,.18); }
.sst-tool-card-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.7rem; }
.sst-tool-name { font-family:'Fraunces',serif; font-size:1.05rem; font-weight:600; }
.sst-tool-new  { background:var(--sst-sage-lt); color:var(--sst-sage); font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:.25rem .65rem; border-radius:var(--sst-r-xl); flex-shrink:0; }
.sst-tool-desc { font-size:.87rem; color:var(--sst-muted); line-height:1.6; margin-bottom:1rem; }
.sst-tool-tags { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem; }
.sst-tag { font-size:.73rem; font-weight:500; padding:.22rem .65rem; border-radius:var(--sst-r-xl); background:var(--sst-sage-lt); color:var(--sst-sage); }
.sst-tag.sky   { background:var(--sst-sky-lt);   color:var(--sst-sky); }
.sst-tag.amber { background:var(--sst-amber-lt); color:var(--sst-amber); }
.sst-tag.blush { background:var(--sst-blush-lt); color:var(--sst-blush); }
.sst-tag.gold  { background:#f5edd8; color:var(--sst-gold); }
.sst-tag.ink   { background:#e8e4e0; color:var(--sst-muted); }
.sst-tool-url  { font-size:.82rem; font-weight:500; color:var(--sst-sage); display:inline-flex; align-items:center; gap:.3rem; transition:gap .2s; text-decoration:none !important; }
.sst-tool-url:hover { gap:.55rem; }
.sst-tools-empty { text-align:center; padding:4rem 2rem; color:var(--sst-muted); font-size:.95rem; grid-column:1/-1; }
.sst-tools-empty a { color:var(--sst-sage) !important; font-weight:500; }

.sst-pagination { display:flex; justify-content:center; gap:.5rem; margin-top:2rem; flex-wrap:wrap; }
.sst-page-btn {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--sst-border); background:#fff;
  font-size:.85rem; font-weight:500; cursor:pointer; color:var(--sst-muted);
  transition:all .2s;
}
.sst-page-btn:hover  { border-color:var(--sst-ink); color:var(--sst-ink); }
.sst-page-btn.active { background:var(--sst-ink); color:var(--sst-cream); border-color:var(--sst-ink); }

/* ── CTA ── */
.sst-cta-section {
  background: var(--sst-ink); position:relative; overflow:hidden;
  padding: clamp(4rem,8vw,6rem) clamp(1.5rem,5vw,4rem);
}
.sst-cta-section::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 80% at 90% 50%, rgba(74,124,95,.25) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 10% 50%, rgba(58,107,138,.20) 0%, transparent 60%);
}
.sst-cta-inner { position:relative; max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.sst-cta-actions { display:flex; gap:1rem; flex-wrap:wrap; }

/* ── Noise overlay ── */
#sst-wrap::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity:.4;
}
#sst-wrap { position:relative; }

/* ── Animations ── */
@keyframes sstFadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

/* ── Responsive ── */
@media(max-width:900px){
  .sst-hero-inner   { grid-template-columns:1fr; }
  .sst-hero-visual  { display:none; }
  .sst-steps-grid, .sst-feat-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:640px){
  .sst-steps-grid, .sst-feat-grid { grid-template-columns:1fr; }
  .sst-hero-stats  { gap:1.5rem; }
  .sst-controls    { flex-direction:column; align-items:stretch; }
}