/* Compare table styling - only for comparison tables */
.compare-shell {
    margin: 24px -24px 0;
    padding: 0 24px;
}

.swipe {
    display: none;
    font-size: 15px;
    color: #4f5f60;
    margin: 0 0 8px;
}

.scroller {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #d6dedd;
    border-radius: 8px;
}

table.compare {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 860px;
    font-size: 16px;
    line-height: 1.45;
}

.compare th,
.compare td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #d6dedd;
}

.compare thead th {
    background: #143f45;
    color: #fff;
    vertical-align: bottom;
    border-bottom: 0;
}

.compare thead th:first-child {
    background: #143f45;
}

.compare thead .name {
    display: block;
    font-size: 18px;
    line-height: 1.25;
}

.compare thead .price {
    display: block;
    font-size: 28px;
    font-weight: 700;
    margin-top: 8px;
}

.compare thead .per {
    display: block;
    font-size: 13px;
    opacity: 0.85;
}

.compare thead .btn {
    display: inline-block;
    margin-top: 12px;
    background: #fff;
    color: #143f45;
    font-weight: 700;
    font-size: 15px;
    padding: 8px 14px;
    border-radius: 4px;
    text-decoration: none;
}

.compare thead .reg {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
    background: #7f9f86;
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
}

.compare tbody th {
    font-weight: 700;
    color: #1b2a2b;
    background: #ffffff;
    width: 210px;
}

.compare tbody tr:nth-child(even) td,
.compare tbody tr:nth-child(even) th {
    background: #e7efef;
}

.compare th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 1px 0 0 #d6dedd;
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
    border-bottom: 0;
}

.mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.mark i {
    font-style: normal;
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 14px;
    flex: none;
    color: #fff;
}

.y i { background: #1f6b45; }
.y { color: #1f6b45; }

.n i { background: #9a3b2e; }
.n { color: #9a3b2e; }

.m i { background: #8a6a12; }
.m { color: #8a6a12; }

.note {
    display: block;
    font-weight: 400;
    color: #4f5f60;
    font-size: 14px;
    margin-top: 2px;
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-size: 15px;
    margin: 12px 0 0;
    color: #4f5f60;
}

/* Mobile adjustments */
@media (max-width: 760px) {
    .swipe {
        display: block;
    }
    
    .compare tbody th {
        width: 150px;
    }
    
    table.compare {
        min-width: 680px;
    }
}

@media (max-width: 360px) {
    table.compare {
        min-width: 600px;
    }
}

/* Article layout and components for the redesigned pages.
   Everything is scoped to .hbg-article so the site header, menu and footer are untouched. */
.hbg-article{max-width:1200px;margin:0 auto;padding:0 24px 24px;color:#1b2a2b;font-family:Arial,Helvetica,"Liberation Sans",sans-serif;font-size:18px;line-height:1.65}
.hbg-article *,.hbg-article *::before,.hbg-article *::after{box-sizing:border-box}
.hbg-article a{color:#143f45}
.hbg-article .prose{max-width:760px}
.hbg-article h1{font-size:clamp(32px,4.4vw,50px);line-height:1.12;letter-spacing:-.5px;margin:48px 0 18px}
.hbg-article h2{font-size:clamp(25px,2.6vw,32px);line-height:1.2;margin:56px 0 14px}
.hbg-article h3{font-size:22px;line-height:1.3;margin:0 0 6px}
.hbg-article h4{font-size:17px;margin:0 0 6px}
.hbg-article p{margin:0 0 18px}
.hbg-article .lede{font-size:21px;color:#4f5f60}
.hbg-article .checked{font-size:15px;color:#4f5f60;margin-top:-4px}
.hbg-article .heads-up{background:#eef3ef;border-radius:6px;padding:22px 26px;margin:32px 0}
.hbg-article .heads-up strong{display:block;font-size:19px;margin-bottom:4px}
.hbg-article .heads-up p:last-child{margin-bottom:0}
.hbg-article .quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));border-top:2px solid #143f45;margin:12px 0 0}
.hbg-article .quick div{padding:18px 20px 18px 0;border-bottom:1px solid #d6dedd}
.hbg-article .quick b{display:block;font-size:17px;color:#143f45}
.hbg-article .quick span{font-size:17px}
.hbg-article .course{border-top:1px solid #d6dedd;padding-top:28px;margin-top:36px}
.hbg-article .course .tag{color:#4f5f60;font-size:17px;margin-bottom:14px}
.hbg-article .pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:6px 0 18px}
.hbg-article .pros-cons ul{margin:0;padding-left:20px}
.hbg-article .pros-cons li{margin-bottom:6px}
.hbg-article details{border-top:1px solid #d6dedd;padding:16px 0;margin-top:40px}
.hbg-article summary{cursor:pointer;font-weight:700}
.hbg-article details ol{font-size:15px;color:#4f5f60;word-break:break-word}
.hbg-article .legend{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px;margin:12px 0 0;color:#4f5f60}
.hbg-article .compare thead .btn{text-decoration:none}
@media (max-width:760px){
  .hbg-article{font-size:17px}
  .hbg-article .pros-cons{grid-template-columns:1fr}
}

/* Narrower tables for two- and three-column comparisons */
table.compare.narrow{min-width:560px}
.hbg-article ol{padding-left:22px}
.hbg-article ol li{margin-bottom:10px}
.hbg-article code{background:#eef3ef;padding:2px 6px;border-radius:4px;font-size:16px;word-break:break-all}

/* Article photos */
.hbg-article .article-photo{margin:28px 0 34px}
.hbg-article .article-photo img{display:block;width:100%;height:auto;border-radius:8px}

/* Diagrams: built from real text so they stay readable and reflow on phones */
.hbg-article .diagram{margin:30px 0 36px;padding:24px;border:1px solid #d6dedd;border-radius:10px;background:#fff}
.hbg-article .diagram-title{font-weight:700;font-size:18px;margin:0 0 4px;color:#143f45}
.hbg-article .diagram-sub{font-size:15px;color:#4f5f60;margin:0 0 20px}
/* 1. Levels as steps */
.hbg-article .lv-steps{display:flex;align-items:flex-end;gap:14px}
.hbg-article .lv-step{flex:1;border-radius:8px 8px 0 0;padding:16px 14px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end}
.hbg-article .lv-step.s1{background:#5a7f64;min-height:150px}
.hbg-article .lv-step.s2{background:#2f6157;min-height:205px}
.hbg-article .lv-step.s3{background:#143f45;min-height:260px}
.hbg-article .lv-step .lv-name{font-size:22px;font-weight:700;line-height:1.1}
.hbg-article .lv-step .lv-who{font-size:15px;line-height:1.4;margin:8px 0}
.hbg-article .lv-step .lv-cost{font-size:14px;font-weight:700;background:rgba(255,255,255,.18);border-radius:4px;padding:3px 8px;align-self:flex-start}
.hbg-article .lv-base{height:6px;background:#1b2a2b;border-radius:3px;margin-top:0}
/* 2. Timeline */
.hbg-article .tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.hbg-article .tl::before{content:"";position:absolute;left:10%;right:10%;top:13px;height:4px;background:#7f9f86;border-radius:2px}
.hbg-article .tl li{position:relative;text-align:center;padding:0 8px;margin:0}
.hbg-article .tl .dot{display:block;width:30px;height:30px;border-radius:50%;background:#143f45;border:4px solid #fff;box-shadow:0 0 0 2px #143f45;margin:0 auto 12px;position:relative;z-index:1}
.hbg-article .tl .when{display:block;font-weight:700;font-size:16px;color:#143f45;line-height:1.25}
.hbg-article .tl .what{display:block;font-size:14px;color:#1b2a2b;line-height:1.4;margin-top:6px}
/* 3. Learn, practise, check loop */
.hbg-article .loop{display:flex;align-items:stretch;gap:0}
.hbg-article .loop-box{flex:1;background:#eef3ef;border-radius:8px;padding:18px 16px;text-align:center}
.hbg-article .loop-box .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#143f45;color:#fff;font-weight:700;margin-bottom:8px}
.hbg-article .loop-box strong{display:block;font-size:19px;color:#143f45}
.hbg-article .loop-box span{display:block;font-size:14px;line-height:1.4;margin-top:6px}
.hbg-article .loop-arrow{flex:0 0 34px;display:grid;place-items:center;font-size:24px;color:#7f9f86;font-weight:700}
.hbg-article .loop-back{text-align:center;font-size:15px;color:#4f5f60;margin:14px 0 0}
.hbg-article .loop-back b{color:#143f45}
@media (max-width:760px){
  .hbg-article .diagram{padding:18px}
  .hbg-article .lv-steps{flex-direction:column;align-items:stretch;gap:8px}
  .hbg-article .lv-step{min-height:0!important;border-radius:8px}
  .hbg-article .lv-step.s1{margin-right:30%}.hbg-article .lv-step.s2{margin-right:15%}
  .hbg-article .lv-steps{flex-direction:column-reverse}
  .hbg-article .lv-base{display:none}
  .hbg-article .tl{grid-template-columns:1fr;gap:18px}
  .hbg-article .tl::before{left:13px;right:auto;top:10px;bottom:10px;width:4px;height:auto}
  .hbg-article .tl li{text-align:left;padding-left:48px}
  .hbg-article .tl .dot{position:absolute;left:0;top:0;margin:0}
  .hbg-article .loop{flex-direction:column}
  .hbg-article .loop-arrow{flex-basis:28px;transform:rotate(90deg)}
}