main{
  display:block;
  max-width:1280px;
  margin:0 auto;
  padding:0 1.25rem;
}

main h1,main h2,main h3{
  font-family:var(--font-heading);
  color:var(--color-dark);
  line-height:1.2;
  margin:0 0 1rem;
}
main h1{ font-size:clamp(1.9rem,4vw,2.75rem); font-weight:700; }
main h2{ font-size:clamp(1.5rem,3vw,2.1rem); font-weight:700; }
main h3{ font-size:clamp(1.15rem,2.2vw,1.4rem); font-weight:600; }
main p{ color:var(--color-text); margin:0 0 1rem; }
main p:last-child{ margin-bottom:0; }

/* ===== SECTION WRAPPERS ===== */
main .cspin-section{
  padding:4rem 0;
  border-bottom:1px solid rgba(18,20,43,0.06);
}
main .cspin-section:last-child{ border-bottom:none; }
main .cspin-subsection{
  padding:2.5rem 0;
}
main .cspin-subsection:not(:last-child){
  border-bottom:1px dashed rgba(18,20,43,0.08);
}

@media (min-width:768px){
  main .cspin-section{ padding:6rem 0; }
}

/* ===== HERO ===== */
main .cspin-hero{
  padding:3rem 0 4rem;
}
main .cspin-hero__grid{
  display:grid;
  gap:2.5rem;
  align-items:center;
}
main .cspin-hero__content h1{
  background:linear-gradient(120deg,var(--color-dark),var(--color-accent) 120%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
main .cspin-hero__content p{
  font-size:1.05rem;
  color:var(--color-muted);
}
main .cspin-hero__content--full{
  max-width:820px;
}
main .cspin-hero__ctas{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1.5rem;
}
main .cspin-hero__media{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:radial-gradient(circle at 30% 20%, rgba(255,61,110,0.18), transparent 60%),
             linear-gradient(135deg,var(--color-dark),#232659);
  padding:1.5rem;
  box-shadow:var(--shadow-soft);
}
main .cspin-hero__media img{
  border-radius:calc(var(--radius) * 0.7);
  width:100%;
}

@media (min-width:900px){
  main .cspin-hero__grid{
    grid-template-columns:1.1fr 0.9fr;
  }
}

/* ===== MEDIA GRID (text-image sections) ===== */
main .cspin-media-grid{
  display:grid;
  gap:2rem;
  align-items:center;
}
main .cspin-media{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
main .cspin-media img{ width:100%; border-radius:var(--radius); }

@media (min-width:860px){
  main .cspin-media-grid{
    grid-template-columns:1fr 1fr;
  }
  main .cspin-media-grid--reverse > *:first-child{ order:2; }
  main .cspin-media-grid--reverse > *:last-child{ order:1; }
}

/* ===== CTA ROW / BUTTONS ===== */
main .cspin-cta-row{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1.5rem;
}
main .cspin-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0.75rem 1.75rem;
  border-radius:999px;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:0.95rem;
  transition:transform .2s ease, box-shadow .2s ease;
  border:2px solid transparent;
}
main .cspin-cta--primary{
  background:var(--color-accent);
  color:var(--color-bright);
  box-shadow:var(--shadow-strong);
}
main .cspin-cta--primary:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 20px 45px var(--color-accent-glow);
}
main .cspin-cta--secondary{
  background:transparent;
  color:var(--color-dark);
  border-color:var(--color-dark);
}
main .cspin-cta--secondary:hover{
  background:var(--color-dark);
  color:var(--color-bright);
}

/* ===== TABLES ===== */
main .cspin-table-wrap{
  overflow-x:auto;
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  margin-top:1rem;
}
main .cspin-table{
  width:100%;
  border-collapse:collapse;
  background:var(--color-bright);
  min-width:480px;
}
main .cspin-table th,
main .cspin-table td{
  padding:0.85rem 1.1rem;
  text-align:left;
  font-size:0.92rem;
  border-bottom:1px solid rgba(18,20,43,0.06);
}
main .cspin-table thead th{
  background:var(--color-dark);
  color:var(--color-bright);
  font-family:var(--font-heading);
  font-weight:600;
  white-space:nowrap;
}
main .cspin-table tbody tr:nth-child(even){
  background:rgba(18,20,43,0.035);
}
main .cspin-table tbody th{
  background:rgba(18,20,43,0.04);
  font-weight:600;
  color:var(--color-dark);
  white-space:nowrap;
}
main .cspin-table tbody tr:hover{
  background:rgba(255,61,110,0.06);
}

/* ===== CARDS / GRID ===== */
main .cspin-card-grid{
  display:grid;
  gap:1.5rem;
  margin-top:2rem;
  grid-template-columns:1fr;
}
@media (min-width:640px){
  main .cspin-card-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  main .cspin-card-grid{ grid-template-columns:repeat(3,1fr); }
}
main .cspin-card{
  background:var(--color-bright);
  border:1px solid rgba(18,20,43,0.08);
  border-radius:var(--radius);
  padding:1.75rem;
  box-shadow:var(--shadow-soft);
  transition:transform .25s ease, box-shadow .25s ease;
  position:relative;
}
main .cspin-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 45px rgba(18,20,43,0.15);
}
main .cspin-card h3{ margin-bottom:0.6rem; }
main .cspin-card p{ color:var(--color-muted); font-size:0.95rem; }
main .cspin-card__meta{
  margin-top:0.75rem;
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  font-size:0.85rem;
  color:var(--color-text);
  font-weight:600;
}
main .cspin-card--icon{ padding-top:2.75rem; }
main .cspin-card__badge{
  position:absolute;
  top:-18px;
  left:1.5rem;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--color-accent);
  color:var(--color-bright);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-heading);
  font-weight:700;
  box-shadow:var(--shadow-strong);
}

/* ===== LISTS ===== */
main .cspin-list{
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  margin:1rem 0;
  padding:0;
}
main .cspin-list li{
  position:relative;
  padding-left:1.5rem;
  color:var(--color-text);
  font-size:0.97rem;
}
main .cspin-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.5em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--color-accent);
}
main .cspin-list--inline{
  flex-direction:row;
  flex-wrap:wrap;
  gap:0.6rem;
}
main .cspin-list--inline li{
  padding:0.4rem 0.9rem 0.4rem 1.6rem;
  background:rgba(255,61,110,0.08);
  border-radius:999px;
  font-size:0.85rem;
  font-weight:600;
}
main .cspin-list--inline li::before{ top:0.85em; }

/* ===== STEPS (ordered list) ===== */
main .cspin-steps{
  display:flex;
  flex-direction:column;
  gap:0.9rem;
  margin:1.25rem 0;
  padding:0;
  counter-reset:cspin-step;
}
main .cspin-steps li{
  list-style:none;
  position:relative;
  padding:0.9rem 1rem 0.9rem 3rem;
  background:var(--color-bright);
  border:1px solid rgba(18,20,43,0.08);
  border-radius:calc(var(--radius) * 0.75);
  font-size:0.95rem;
  box-shadow:0 4px 14px rgba(18,20,43,0.05);
  counter-increment:cspin-step;
}
main .cspin-steps li::before{
  content:counter(cspin-step);
  position:absolute;
  left:0.85rem;
  top:0.9rem;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--color-dark);
  color:var(--color-bright);
  font-family:var(--font-heading);
  font-weight:700;
  font-size:0.85rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ===== CALLOUT ===== */
main .cspin-callout{
  background:linear-gradient(120deg,rgba(255,61,110,0.1),rgba(18,20,43,0.05));
  border-left:4px solid var(--color-accent);
  border-radius:var(--radius);
  padding:1.5rem 1.75rem;
  margin:1.5rem 0;
}
main .cspin-callout h3{ margin-bottom:0.5rem; color:var(--color-dark); }
main .cspin-callout p{ margin:0; color:var(--color-text); }

/* ===== FAQ ACCORDION ===== */
main .cspin-accordion{
  display:flex;
  flex-direction:column;
  gap:0.9rem;
  margin-top:1.5rem;
}
main .cspin-accordion__item{
  border:1px solid rgba(18,20,43,0.1);
  border-radius:var(--radius);
  background:var(--color-bright);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
main .cspin-accordion__trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.1rem 1.4rem;
  background:none;
  border:none;
  cursor:pointer;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:1rem;
  color:var(--color-dark);
  text-align:left;
  min-height:44px;
}
main .cspin-accordion__icon{
  flex-shrink:0;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--color-accent);
  position:relative;
}
main .cspin-accordion__icon::before,
main .cspin-accordion__icon::after{
  content:"";
  position:absolute;
  background:var(--color-bright);
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
main .cspin-accordion__icon::before{ width:10px; height:2px; }
main .cspin-accordion__icon::after{ width:2px; height:10px; transition:transform .2s ease; }
main .cspin-accordion__item[data-open="true"] .cspin-accordion__icon::after{
  transform:translate(-50%,-50%) scaleY(0);
}
main .cspin-accordion__panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  padding:0 1.4rem;
}
main .cspin-accordion__panel p{
  color:var(--color-muted);
  padding-bottom:1.2rem;
  margin:0;
}
main .cspin-accordion__item[data-open="true"] .cspin-accordion__panel{
  max-height:600px;
}

/* ===== SECTION WITH MEDIA VARIANT (table sections) ===== */
main .cspin-section--media .cspin-media-grid > div:first-child{
  min-width:0;
}

/* ===== APP SCREENSHOTS GALLERY ===== */
main .cspin-app-gallery{
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(2,1fr);
  margin-top:1.5rem;
}
@media (min-width:640px){
  main .cspin-app-gallery{ grid-template-columns:repeat(4,1fr); }
}
main .cspin-app-gallery img{
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}