/* StudyRoster — shared styles for SEO / comparison / utility funnel pages.
   Loaded ALONGSIDE styles.css (which provides the body aurora, header, footer, buttons, brand tokens).
   Light theme on the aurora field; no customer-facing em-dashes. */

/* ---- generic page scaffold ---- */
.page-main{ padding-top:8px; }
.breadcrumb{ font-size:.82rem; color:var(--gray-500); padding:18px 0 0; }
.breadcrumb a{ color:var(--indigo-700); font-weight:600; }
.breadcrumb a:hover{ text-decoration:underline; }
.lede{ max-width:720px; }
.lede .eyebrow{ display:inline-block; margin-bottom:.7rem; }
.lede h1{ font-size:clamp(2rem,4vw,3rem); letter-spacing:-.022em; }
.lede p.sub{ font-size:1.16rem; color:var(--muted); margin:1.1rem 0 1.7rem; }
.sec{ padding:38px 0; }
.sec.tight{ padding:26px 0; }
.sec h2{ font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-.02em; margin-bottom:.4rem; }
.sec h2 + .sub{ color:var(--muted); font-size:1.05rem; margin-bottom:1.2rem; max-width:62ch; }
.sec h3{ font-size:1.12rem; margin:1.2rem 0 .35rem; }
.prose p{ color:var(--gray-700); margin:0 0 1rem; max-width:68ch; font-size:1.02rem; }
.prose ul{ color:var(--gray-700); margin:0 0 1rem; padding-left:1.15rem; max-width:68ch; }
.prose li{ margin:.3rem 0; }
.prose strong{ color:var(--gray-900); }

/* ---- light comparison table ---- */
.ctab-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:.4rem 0 1rem; border-radius:16px;
  border:1px solid var(--gray-200); box-shadow:var(--shadow-md); background:rgba(255,255,255,.92); }
.ctab{ width:100%; border-collapse:collapse; min-width:560px; }
.ctab th,.ctab td{ padding:.85rem 1rem; text-align:left; font-size:.95rem; border-bottom:1px solid var(--gray-100); vertical-align:top; }
.ctab thead th{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-500); font-weight:700; background:var(--gray-50); }
.ctab thead th.us{ color:#fff; background:var(--grad-brand); border-top-left-radius:0; }
.ctab td.feat{ color:var(--gray-900); font-weight:600; width:38%; }
.ctab td.us{ background:rgba(99,102,241,.08); color:var(--gray-900); font-weight:600; }
.ctab tbody tr:last-child td{ border-bottom:none; }
.ctab .y{ color:var(--emerald-500); font-weight:700; }
.ctab .n{ color:var(--gray-400); font-weight:600; }
.ctab .p{ color:var(--amber-500,#f59e0b); font-weight:600; }
.ctab .mini{ display:block; color:var(--gray-500); font-size:.8rem; font-weight:400; margin-top:2px; }

/* ---- feature / reason cards ---- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:.6rem; }
@media (max-width:820px){ .cards{ grid-template-columns:1fr; max-width:520px; } }
.card{ background:rgba(255,255,255,.86); border:1px solid var(--gray-200); border-radius:16px; padding:20px;
  box-shadow:var(--shadow-sm); }
.card .ci{ width:38px; height:38px; border-radius:10px; background:var(--indigo-50); border:1px solid var(--indigo-100);
  display:grid; place-items:center; color:var(--indigo-600); margin-bottom:.7rem; }
.card .ci svg{ width:20px; height:20px; }
.card h3{ margin:0 0 .3rem; font-size:1.06rem; }
.card p{ margin:0; color:var(--gray-600); font-size:.95rem; }

/* ---- CTA band ---- */
.cta-band{ margin:30px 0; background:rgba(255,255,255,.7); border:1px solid var(--indigo-100);
  border-radius:20px; padding:30px 28px; text-align:center; box-shadow:var(--shadow-md); }
.cta-band h2{ margin:0 0 .35rem; }
.cta-band p{ color:var(--muted); margin:0 auto 1.2rem; max-width:48ch; }
.cta-band .row{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }
.cta-band .fine{ margin-top:.9rem; font-size:.84rem; color:var(--gray-500); }

/* ---- honesty / disclosure note ---- */
.note-box{ background:var(--gray-50); border:1px solid var(--gray-200); border-left:3px solid var(--indigo-600);
  border-radius:10px; padding:12px 15px; font-size:.86rem; color:var(--gray-600); max-width:68ch; margin:.4rem 0 1rem; }
.note-box b{ color:var(--gray-800,#1f2937); }

/* ---- simple FAQ ---- */
.qa{ max-width:720px; }
.qa .item{ padding:16px 0; border-bottom:1px solid var(--gray-200); }
.qa .item h3{ margin:0 0 .3rem; font-size:1.04rem; }
.qa .item p{ margin:0; color:var(--gray-600); font-size:.97rem; }

/* ---- invoice-template specimen (utility page) ---- */
.specimen{ background:#fff; border:1px solid var(--gray-200); border-radius:14px; box-shadow:var(--shadow-md);
  padding:26px; max-width:620px; position:relative; overflow:hidden; }
.specimen::before{ content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--grad-vivid); }