/* StudyPool Landing v2 — scoped under .sp2-landing so it never
   clashes with the active theme's styles. Matches the reference
   design: navy-to-purple gradient hero, colored category cards,
   stats band, 4-step flow, popular-resources columns, testimonials. */

.sp2-landing{
  --n900:#0B1330;
  --n800:#141B3D;
  --purple:#6D3FE0;
  --purple-soft:#8B5CF6;
  --blue:#3B82F6;
  --paper:#F6F7FB;
  --card:#FFFFFF;
  --line:#E7E9F3;
  --text:#1B2140;
  --text-dim:#6B7290;
  --gold:#F5A623;
  --radius:14px;
  --radius-sm:10px;

  font-family:'Inter','IBM Plex Sans',Arial,sans-serif;
  color:var(--text);
  background:var(--paper);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.sp2-landing *{ box-sizing:border-box; }
.sp2-landing h1,.sp2-landing h2,.sp2-landing h3{ margin:0; color:var(--text); font-weight:800; letter-spacing:-0.02em; }
.sp2-landing p{ margin:0; }
.sp2-landing a{ color:inherit; text-decoration:none; }
.sp2-landing img,.sp2-landing svg{ max-width:100%; display:block; }
.sp2-landing button{ font-family:inherit; cursor:pointer; }
.sp2-landing .sp2-wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
@media (prefers-reduced-motion: reduce){ .sp2-landing *{ animation:none !important; transition:none !important; } }

/* Full-bleed helper: stretches an element edge-to-edge regardless
   of how narrow/padded the theme's page container is. If your
   theme wraps content in a container with "overflow: hidden" on
   an ancestor element, this trick cannot escape it — in that case,
   use a "Full Width" / "Canvas" / "Blank" page template instead
   (Page Attributes -> Template, in the page editor sidebar). */
.sp2-fullbleed{
  width:100vw !important;
  max-width:100vw !important;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw !important;
  margin-right:-50vw !important;
  box-sizing:border-box;
}

/* ---------- Brand header (inside hero, integrated) ---------- */
.sp2-hero-top{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:34px; opacity:0; animation:sp2-rise .5s ease 0s forwards;
}
.sp2-logo{ display:flex; align-items:center; gap:12px; }
.sp2-logo-mark{
  width:46px; height:46px; border-radius:13px; flex-shrink:0;
  background:linear-gradient(135deg,#FF7AC6,#8B5CF6 55%,#3B82F6);
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem;
  box-shadow:0 8px 20px rgba(139,92,246,0.45), inset 0 0 0 1px rgba(255,255,255,0.25);
}
.sp2-logo-word{ font-size:1.2rem; font-weight:800; color:#fff; line-height:1.1; }
.sp2-logo-word span{ background:linear-gradient(90deg,#7DD3FC,#C4B5FD); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sp2-logo-tag{ font-size:0.74rem; color:rgba(255,255,255,0.6); font-weight:500; margin-top:2px; }
.sp2-brand-search{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center; font-size:1rem;
  transition:background .2s ease;
}
.sp2-brand-search:hover{ background:rgba(255,255,255,0.18); }

/* ---------- Hero ---------- */
.sp2-hero{
  position:relative; overflow:hidden; border-radius:0;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(139,92,246,0.55), transparent 60%),
    radial-gradient(700px 400px at 100% 40%, rgba(59,130,246,0.35), transparent 60%),
    linear-gradient(135deg, var(--n900) 0%, #1B2350 55%, #3B2472 100%);
  padding:52px 0 64px;
  color:#fff;
  box-sizing:border-box;
}
.sp2-hero-grid{ display:grid; grid-template-columns:1.1fr 0.95fr; gap:40px; align-items:center; }
.sp2-badge{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.18); padding:7px 16px; border-radius:99px;
  font-size:0.82rem; font-weight:600; margin-bottom:22px; opacity:0; animation:sp2-rise .6s ease .05s forwards;
}
.sp2-hero h1{ font-size:clamp(2.2rem,4.6vw,3.4rem); line-height:1.08; margin-bottom:20px; color:#fff; opacity:0; animation:sp2-rise .6s ease .15s forwards; }
.sp2-hero h1 .sp2-grad{ background:linear-gradient(90deg,#7DD3FC,#C4B5FD); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sp2-hero-sub{ font-size:1.05rem; color:rgba(255,255,255,0.78); max-width:48ch; margin-bottom:26px; opacity:0; animation:sp2-rise .6s ease .25s forwards; }
@keyframes sp2-rise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }

.sp2-search{
  display:flex; background:#fff; border-radius:99px; padding:6px; gap:4px;
  box-shadow:0 20px 40px rgba(11,19,48,0.35); margin-bottom:24px; max-width:560px;
  opacity:0; animation:sp2-rise .6s ease .35s forwards;
}
.sp2-search input{ flex:1; border:none; outline:none; padding:12px 18px; font-size:0.95rem; border-radius:99px; color:var(--text); font-family:inherit; min-width:0; }
.sp2-search button{ background:linear-gradient(90deg,var(--purple),var(--blue)); color:#fff; border:none; padding:12px 26px; border-radius:99px; font-weight:700; font-size:0.9rem; transition:transform .18s ease, box-shadow .2s ease; white-space:nowrap; }
.sp2-search button:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(109,63,224,0.45); }

.sp2-trust{ display:flex; gap:26px; flex-wrap:wrap; opacity:0; animation:sp2-rise .6s ease .45s forwards; }
.sp2-trust-item{ display:flex; gap:10px; align-items:flex-start; }
.sp2-trust-ico{ width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.sp2-trust-item b{ display:block; font-size:0.85rem; font-weight:700; }
.sp2-trust-item span{ font-size:0.76rem; color:rgba(255,255,255,0.65); }

/* Hero illustration */
.sp2-illustration{ position:relative; height:100%; min-height:340px; opacity:0; animation:sp2-rise .7s ease .3s forwards; }
.sp2-pill{
  position:absolute; display:flex; align-items:center; gap:8px; padding:9px 16px; border-radius:99px;
  font-size:0.82rem; font-weight:700; color:#fff; box-shadow:0 12px 24px rgba(0,0,0,0.25);
  animation:sp2-float 4s ease-in-out infinite;
}
.sp2-pill-1{ background:#3B82F6; top:6%; right:8%; animation-delay:0s; }
.sp2-pill-2{ background:#14B8A6; top:26%; right:0%; animation-delay:.4s; }
.sp2-pill-3{ background:#22C55E; top:46%; right:6%; animation-delay:.8s; }
.sp2-pill-4{ background:#F97316; top:66%; right:0%; animation-delay:1.2s; }
@keyframes sp2-float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }

/* ---------- Category section ---------- */
.sp2-section{ padding:66px 0; }
.sp2-section-head{ display:grid; grid-template-columns:1fr auto; align-items:end; gap:20px; margin-bottom:34px; }
.sp2-eyebrow{ color:var(--purple); font-weight:700; font-size:0.85rem; margin-bottom:8px; }
.sp2-section-head h2{ font-size:clamp(1.5rem,3vw,2rem); }
.sp2-section-head p{ color:var(--text-dim); max-width:40ch; margin-top:8px; }
.sp2-link{ font-size:0.88rem; font-weight:700; color:var(--purple); white-space:nowrap; }

.sp2-cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.sp2-cat-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; display:flex; gap:14px; align-items:flex-start;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sp2-cat-card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(20,20,60,0.08); border-color:transparent; }
.sp2-cat-ico{ width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.sp2-cat-card h3{ font-size:0.98rem; margin-bottom:4px; }
.sp2-cat-card p{ font-size:0.8rem; color:var(--text-dim); }
@media(max-width:980px){ .sp2-cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .sp2-cat-grid{ grid-template-columns:1fr; } }

/* ---------- Stats band ---------- */
.sp2-stats{
  background:linear-gradient(120deg, var(--n900), #241454 70%, #3B2472);
  border-radius:var(--radius); padding:38px 34px; color:#fff;
  display:grid; grid-template-columns:1.2fr repeat(4,auto) auto; gap:26px; align-items:center;
}
.sp2-stats h3{ color:#fff; font-size:1.25rem; margin-bottom:6px; }
.sp2-stats > div:first-child p{ color:rgba(255,255,255,0.65); font-size:0.85rem; max-width:26ch; }
.sp2-stat{ text-align:center; }
.sp2-stat-ico{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 10px; font-size:1.05rem; }
.sp2-stat-num{ font-size:1.35rem; font-weight:800; }
.sp2-stat-label{ font-size:0.76rem; color:rgba(255,255,255,0.65); margin-top:2px; }
.sp2-stats-tag{ font-style:italic; font-size:0.9rem; color:rgba(255,255,255,0.55); text-align:right; }
@media(max-width:980px){ .sp2-stats{ grid-template-columns:repeat(2,1fr); } .sp2-stats-tag{ display:none; } }
@media(max-width:560px){ .sp2-stats{ grid-template-columns:1fr 1fr; } }

/* ---------- How it works ---------- */
.sp2-flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; position:relative; }
.sp2-flow-step{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; position:relative; }
.sp2-flow-num{ width:26px; height:26px; border-radius:50%; background:var(--n900); color:#fff; font-size:0.75rem; font-weight:700; display:flex; align-items:center; justify-content:center; position:absolute; top:-12px; left:18px; }
.sp2-flow-ico{ width:44px; height:44px; border-radius:12px; background:#EEF0FE; color:var(--purple); display:flex; align-items:center; justify-content:center; font-size:1.15rem; margin-bottom:14px; }
.sp2-flow-step h3{ font-size:0.98rem; margin-bottom:6px; }
.sp2-flow-step p{ font-size:0.84rem; color:var(--text-dim); }
@media(max-width:900px){ .sp2-flow{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .sp2-flow{ grid-template-columns:1fr; } }

/* ---------- Popular resources ---------- */
.sp2-pop-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.sp2-pop-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.sp2-pop-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 18px; }
.sp2-pop-pill{ display:flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:700; color:#fff; padding:7px 14px; border-radius:99px; }
.sp2-pop-pill.q{ background:#7C3AED; }
.sp2-pop-pill.n{ background:#16A34A; }
.sp2-pop-pill.t{ background:#2563EB; }
.sp2-pop-view{ font-size:0.78rem; color:var(--purple); font-weight:700; }
.sp2-pop-list{ padding:4px 10px 14px; }
.sp2-pop-item{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 10px; border-radius:var(--radius-sm); transition:background .15s ease; }
.sp2-pop-item:hover{ background:var(--paper); }
.sp2-pop-item h4{ font-size:0.86rem; font-weight:600; margin-bottom:2px; }
.sp2-pop-item span{ font-size:0.74rem; color:var(--text-dim); }
.sp2-tutor-row{ display:flex; align-items:center; gap:10px; }
.sp2-avatar{ width:34px; height:34px; border-radius:50%; background:var(--purple); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:700; flex-shrink:0; }
@media(max-width:900px){ .sp2-pop-grid{ grid-template-columns:1fr; } }

/* ---------- Testimonials ---------- */
.sp2-test-band{ background:var(--n900); border-radius:var(--radius); padding:44px 34px; color:#fff; }
.sp2-test-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:26px; gap:16px; flex-wrap:wrap; }
.sp2-test-head h2{ color:#fff; font-size:clamp(1.4rem,3vw,1.9rem); }
.sp2-test-head p{ color:rgba(255,255,255,0.6); font-size:0.9rem; max-width:40ch; margin-top:6px; }
.sp2-test-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.sp2-test-card{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-sm); padding:20px; transition:transform .2s ease; }
.sp2-test-card:hover{ transform:translateY(-4px); }
.sp2-test-top{ display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.sp2-test-name{ font-size:0.88rem; font-weight:700; }
.sp2-test-sub{ font-size:0.74rem; color:rgba(255,255,255,0.55); }
.sp2-stars{ color:var(--gold); font-size:0.78rem; margin-bottom:8px; }
.sp2-test-card p{ font-size:0.86rem; color:rgba(255,255,255,0.82); }
@media(max-width:900px){ .sp2-test-grid{ grid-template-columns:1fr; } }

/* ---------- CTA ---------- */
.sp2-cta{
  background:linear-gradient(120deg,var(--purple),var(--blue));
  border-radius:var(--radius); padding:44px 36px; color:#fff;
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
}
.sp2-cta h2{ color:#fff; font-size:clamp(1.3rem,3vw,1.8rem); max-width:20ch; }
.sp2-cta p{ color:rgba(255,255,255,0.85); margin-top:8px; max-width:40ch; }
.sp2-cta a{ background:#fff; color:var(--n900); font-weight:800; padding:13px 26px; border-radius:99px; white-space:nowrap; transition:transform .18s ease; }
.sp2-cta a:hover{ transform:translateY(-2px); }

/* ---------- Subject archive + Single article pages ---------- */
.sp2-subpage{ background:var(--paper); }
.sp2-subhero{
  padding:40px 0 44px;
  background:
    radial-gradient(700px 400px at 90% -10%, rgba(139,92,246,0.45), transparent 60%),
    linear-gradient(135deg, var(--n900) 0%, #1B2350 55%, #3B2472 100%);
  color:#fff;
}
.sp2-breadcrumb{ font-size:0.82rem; color:rgba(255,255,255,0.6); margin-bottom:14px; }
.sp2-breadcrumb a{ color:rgba(255,255,255,0.85); }
.sp2-breadcrumb a:hover{ color:#fff; }
.sp2-subhero h1{ color:#fff; font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:10px; }
.sp2-subhero-desc{ color:rgba(255,255,255,0.72); font-size:0.98rem; max-width:56ch; }
.sp2-article-meta{ color:rgba(255,255,255,0.65); font-size:0.85rem; margin-top:6px; }

.sp2-article-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.sp2-article-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; display:block; transition:transform .2s ease, box-shadow .2s ease;
}
.sp2-article-card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(20,20,60,0.1); }
.sp2-article-badge{ display:inline-block; font-size:0.74rem; font-weight:700; padding:4px 11px; border-radius:99px; color:#fff; margin-bottom:14px; }
.sp2-article-badge.q{ background:#7C3AED; }
.sp2-article-badge.n{ background:#16A34A; }
.sp2-article-card h3{ font-size:1.02rem; margin-bottom:8px; line-height:1.4; }
.sp2-article-card p{ font-size:0.87rem; color:var(--text-dim); margin-bottom:14px; }
.sp2-article-date{ font-size:0.78rem; color:var(--text-dim); }
@media(max-width:980px){ .sp2-article-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:620px){ .sp2-article-grid{ grid-template-columns:1fr; } }

.sp2-pagination{ margin-top:32px; }
.sp2-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 12px; margin-right:6px;
  border-radius:8px; border:1px solid var(--line); background:var(--card);
  font-size:0.88rem; color:var(--text);
}
.sp2-pagination .page-numbers.current{ background:var(--n900); color:#fff; border-color:var(--n900); }

/* Article reading typography (single Post/Note pages) */
.sp2-article-body{ max-width:760px; margin:0 auto; font-size:1.02rem; color:var(--text); line-height:1.75; }
.sp2-article-body h2{ font-size:1.4rem; margin:36px 0 14px; color:var(--n900); }
.sp2-article-body h3{ font-size:1.15rem; margin:26px 0 10px; color:var(--n900); }
.sp2-article-body p{ margin-bottom:16px; }
.sp2-article-body ul, .sp2-article-body ol{ margin:0 0 18px; padding-left:22px; }
.sp2-article-body li{ margin-bottom:8px; }
.sp2-article-body strong{ color:var(--n900); }
.sp2-article-body em{ color:var(--purple); font-style:normal; font-weight:600; }
.sp2-article-body a{ color:var(--purple); text-decoration:underline; }
.sp2-article-body img{ border-radius:var(--radius-sm); margin:20px 0; }