/* Swipe SEO pages — extends use-case.css */

/* ── BREADCRUMB ── */
.swipe-breadcrumb{
  padding:76px 0 0;
  font-family:var(--font-sans);
  font-size:13px;
  color:var(--muted);
}
.swipe-breadcrumb a{color:var(--muted);text-decoration:none;transition:color .12s;}
.swipe-breadcrumb a:hover{color:var(--ink);}
.swipe-breadcrumb-sep{margin:0 8px;color:var(--muted2);}

/* ── ARTICLE HERO ── */
.swipe-hero{padding:24px 0 48px;text-align:left;}
.swipe-hero .uc-hero-inner{max-width:720px;margin:0;text-align:left;}
.swipe-hero .uc-hero-h1{text-align:left;}
.swipe-hero .uc-hero-lead{margin:0;max-width:640px;text-align:left;}

/* ── ARTICLE LAYOUT ── */
.swipe-body-wrap{
  display:grid;
  grid-template-columns:1fr 220px;
  gap:60px;
  padding:0 0 60px;
  align-items:start;
}
.swipe-body{
  font-size:17px;
  line-height:1.85;
  color:var(--ink3);
  font-weight:300;
}
.swipe-body h2{
  font-family:var(--font-serif);
  font-size:24px;
  font-weight:500;
  color:var(--ink);
  margin:40px 0 14px;
  letter-spacing:-.02em;
  scroll-margin-top:80px;
}
.swipe-body h2:first-child{margin-top:0;}
.swipe-body h3{
  font-family:var(--font-serif);
  font-size:19px;
  font-weight:500;
  color:var(--ink);
  margin:28px 0 10px;
}
.swipe-body p{margin-bottom:20px;}
.swipe-body p:last-child{margin-bottom:0;}
.swipe-body strong{font-weight:600;color:var(--ink2);}
.swipe-body em{font-style:italic;}
.swipe-body ul{padding-left:22px;margin-bottom:20px;}
.swipe-body li{margin-bottom:8px;}
.swipe-body a{color:var(--amber);text-decoration:none;border-bottom:1px solid var(--amber-border);}
.swipe-body a:hover{color:var(--amber-hover);border-color:var(--amber-hover);}
.swipe-body blockquote{
  border-left:3px solid var(--amber);
  margin:28px 0;
  padding:14px 20px;
  background:var(--amber-bg);
  border-radius:0 10px 10px 0;
  font-family:var(--font-serif);
  font-style:italic;
  font-size:18px;
  color:var(--ink);
  line-height:1.6;
}

/* ── HIGHLIGHT BOXES (from blog) ── */
.swipe-body .hl-box{
  background:var(--paper2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px 22px;
  margin:24px 0;
}
.swipe-body .hl-box-label{
  font-size:10px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-family:var(--font-sans);
  color:var(--muted2);
  margin-bottom:10px;
}
.swipe-body .hl-example{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:16px;
  color:var(--ink);
  line-height:1.6;
  padding:10px 14px;
  border-radius:8px;
  margin-bottom:6px;
}
.swipe-body .hl-example.amber{background:var(--amber-bg);border-left:3px solid var(--amber);}
.swipe-body .hl-example.coral{background:#fff0eb;border-left:3px solid var(--coral);}
.swipe-body .hl-example.sage{background:#f0fdf4;border-left:3px solid var(--sage);}
.swipe-body .hl-example.rose{background:#fff0f5;border-left:3px solid var(--rose);}
.swipe-body .hl-note{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
  margin-left:17px;
  font-family:var(--font-sans);
}

/* ── SWIPE GRID IN ARTICLE ── */
.swipe-examples-section{padding:0 0 48px;}
.swipe-examples-section .swipe-grid{margin-top:32px;}

/* ── SIDEBAR ── */
.swipe-sidebar{position:sticky;top:84px;}
.swipe-sidebar-section{margin-bottom:28px;}
.swipe-sidebar-label{
  font-size:10px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-family:var(--font-sans);
  color:var(--muted2);
  margin-bottom:12px;
}
.swipe-toc-item{
  font-size:13px;
  color:var(--muted);
  padding:5px 0;
  transition:color .12s,border-color .12s;
  border-left:2px solid transparent;
  padding-left:10px;
  display:block;
  text-decoration:none;
}
.swipe-toc-item:hover{color:var(--ink);border-left-color:var(--amber);}
.swipe-glean-box{
  background:var(--amber-bg);
  border:1px solid var(--amber-border);
  border-radius:12px;
  padding:18px;
}
.swipe-glean-box-title{font-size:13px;font-weight:600;color:var(--amber-dark);margin-bottom:6px;}
.swipe-glean-box-body{font-size:12.5px;color:var(--amber-dark);line-height:1.55;margin-bottom:12px;opacity:.8;}
.swipe-glean-cta{
  display:block;
  text-align:center;
  background:var(--amber);
  color:white;
  border-radius:7px;
  padding:8px 14px;
  font-size:12.5px;
  font-weight:500;
  font-family:var(--font-sans);
  text-decoration:none;
  transition:opacity .12s;
}
.swipe-glean-cta:hover{opacity:.88;}

/* ── FAQ ── */
.swipe-faq{padding:48px 0 0;border-top:1px solid var(--border);}
.swipe-faq-h2{
  font-family:var(--font-serif);
  font-size:clamp(22px,3vw,28px);
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.02em;
  margin-bottom:24px;
}
.swipe-faq-item{border-bottom:1px solid var(--border);padding:18px 0;}
.swipe-faq-item:last-child{border-bottom:none;}
.swipe-faq-q{
  font-family:var(--font-serif);
  font-size:17px;
  font-weight:500;
  color:var(--ink);
  margin-bottom:8px;
}
.swipe-faq-a{font-size:15px;color:var(--muted);line-height:1.65;font-weight:300;}

@media(max-width:768px){
  .swipe-body-wrap{grid-template-columns:1fr;gap:32px;}
  .swipe-sidebar{position:static;}
  .swipe-breadcrumb{padding-top:68px;}
}
