/* TowAtlas towing guide readability layer */

/* Keep simple guide pages readable even before they adopt the enhanced layout. */
main .content-narrow,
main.container .content,
main > .section > .container > .content,
main > .section > .container.content-narrow{
  width:min(100%,860px);
  margin-left:auto;
  margin-right:auto;
}

/* Guide hero: use the same visual width as the article shell below. */
.hero > .container{
  width:min(100% - 44px,1000px);
  padding-top:42px;
  padding-bottom:28px;
}
.hero .kicker,
.hero .section-kicker{margin-bottom:10px}
.hero h1{
  max-width:900px;
  font-size:clamp(2.8rem,5vw,4.75rem);
  line-height:1.01;
  letter-spacing:-.045em;
  margin:0 0 18px;
}
.hero .lead{
  max-width:700px;
  font-size:1.1rem;
  line-height:1.68;
  color:#c4ced9;
}
.hero .page-actions,
.hero .cta-row{margin-top:24px}

/* Enhanced article shell: keep the sidebar and article anchored to the same left/right frame as the hero. */
.guide-shell{
  width:min(100% - 44px,1000px);
  margin:0 auto;
  display:grid;
  grid-template-columns:210px minmax(0,746px);
  gap:44px;
  align-items:start;
}
.guide-sidebar{
  position:sticky;
  top:92px;
  padding:18px;
  border:1px solid rgba(150,165,182,.18);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(29,37,48,.88),rgba(20,27,35,.88));
}
.guide-sidebar .sidebar-label{
  color:var(--teal);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.72rem;
  font-weight:900;
  margin-bottom:12px;
}
.guide-sidebar nav{display:grid;gap:4px}
.guide-sidebar nav a{
  display:block;
  padding:8px 9px;
  border-radius:8px;
  color:#aeb9c6;
  font-size:.84rem;
  line-height:1.35;
}
.guide-sidebar nav a:hover{
  color:#fff;
  background:rgba(0,182,196,.08);
}
.guide-sidebar .sidebar-cta{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.07);
}
.guide-sidebar .sidebar-cta p{
  margin:0 0 10px;
  color:#95a3b2;
  font-size:.8rem;
  line-height:1.5;
}
.guide-sidebar .btn{width:100%;font-size:.82rem;padding:9px 10px}

.guide-article{
  min-width:0;
  font-size:1.06rem;
  line-height:1.78;
}
.guide-section{
  padding:0 0 34px;
  margin:0 0 34px;
  border-bottom:1px solid rgba(150,165,182,.14);
  scroll-margin-top:105px;
}
.guide-section:last-child{border-bottom:0;margin-bottom:0}
.guide-section h2{
  font-size:clamp(1.65rem,2.2vw,2rem);
  line-height:1.18;
  letter-spacing:-.026em;
  margin:0 0 13px;
}
.guide-section p{
  margin:0 0 17px;
  color:#c4ced9;
}
.guide-section p:last-child{margin-bottom:0}
.guide-section a{
  color:#58dbe2;
  text-decoration:underline;
  text-decoration-color:rgba(88,219,226,.4);
  text-underline-offset:3px;
}
.guide-section a:hover{color:#8eecef;text-decoration-color:currentColor}

/* Fallback typography for existing guides. */
main .content-narrow,
main.container .content{font-size:1.05rem;line-height:1.78}
main .content-narrow p,
main.container .content p,
main .content-narrow li,
main.container .content li{color:#c3cdd8}
main .content-narrow p,
main.container .content p{margin:0 0 22px}
main .content-narrow h2,
main.container .content h2{
  font-size:clamp(1.6rem,2.2vw,2.05rem);
  line-height:1.18;
  letter-spacing:-.025em;
  margin:42px 0 14px;
}
main .content-narrow h2:first-child,
main.container .content h2:first-child{margin-top:0}
main .content-narrow h3,
main.container .content h3{margin-top:30px;font-size:1.3rem}
main .content-narrow a,
main.container .content a{
  color:#58dbe2;
  text-decoration:underline;
  text-decoration-color:rgba(88,219,226,.4);
  text-underline-offset:3px;
}
main .content-narrow a:hover,
main.container .content a:hover{color:#8eecef;text-decoration-color:currentColor}

/* Examples and important notes. */
main .callout,
main .check-note{
  margin:24px 0;
  padding:19px 21px;
  border:1px solid rgba(0,182,196,.28);
  border-left:4px solid var(--teal);
  border-radius:12px;
  background:linear-gradient(135deg,rgba(0,182,196,.09),rgba(0,182,196,.035));
  color:#d8e1e9;
  line-height:1.68;
}
.guide-related{
  padding:22px;
  border:1px solid rgba(150,165,182,.18);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(29,37,48,.72),rgba(20,27,35,.72));
}
.guide-related h2{margin-top:0}
.guide-related-links{display:flex;flex-wrap:wrap;gap:9px}
.guide-related-links a{
  display:inline-flex;
  padding:8px 11px;
  border:1px solid rgba(0,182,196,.22);
  border-radius:999px;
  text-decoration:none;
  font-size:.88rem;
  color:#8be9ed;
  background:rgba(0,182,196,.055);
}
.guide-related-links a:hover{background:rgba(0,182,196,.11);color:#fff}

footer.footer{margin-top:34px}

@media(max-width:1040px){
  .guide-shell{grid-template-columns:200px minmax(0,1fr);gap:36px}
}
@media(max-width:920px){
  .guide-shell{grid-template-columns:1fr;gap:24px;width:min(100% - 36px,820px)}
  .guide-sidebar{position:static;padding:16px}
  .guide-sidebar nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .guide-sidebar .sidebar-cta{display:none}
}
@media(max-width:760px){
  .hero > .container{width:calc(100% - 28px);padding-top:30px;padding-bottom:18px}
  .hero h1{font-size:clamp(2.35rem,12vw,3.5rem)}
  .hero .lead{font-size:1.04rem;line-height:1.62}
  main .content-narrow,
  main.container .content{font-size:1rem;line-height:1.7}
  main .content-narrow h2,
  main.container .content h2{margin-top:34px}
  .guide-shell{width:calc(100% - 28px)}
  .guide-article{font-size:1rem;line-height:1.7}
  .guide-section{padding-bottom:27px;margin-bottom:27px}
  .guide-sidebar nav{grid-template-columns:1fr}
}