/* ==========================================================================
   Medical cover guides
   Long-form pages behind the quote engine: one per insurer, one per product.
   Built on the same palette as the rest of the site (styles.css variables).
   ========================================================================== */

.guide-breadcrumb{background:#fff;border-bottom:1px solid #e4eaea;font-size:.82rem}
.guide-breadcrumb .container{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;padding-top:.7rem;padding-bottom:.7rem;color:#5d6b63}
.guide-breadcrumb a{color:#01545f;font-weight:600}
.guide-breadcrumb a:hover{text-decoration:underline}
.guide-breadcrumb span{color:#b9c4bd}
.guide-breadcrumb strong{color:#013947;font-weight:700}

.guide-hero{background:linear-gradient(135deg,#013947 0%,#01545f 100%);color:#fff;padding:3.2rem 0 4.4rem}
.guide-hero h1{font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.1;max-width:900px;margin:.5rem 0 .9rem;font-weight:800}
.guide-hero p{max-width:760px;color:#d7e5e6;font-size:1.03rem}
.guide-eyebrow{display:inline-flex;align-items:center;gap:.5rem;color:#f0cf66;font-weight:800;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
.guide-hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}

.guide-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.78rem 1.35rem;border-radius:999px;font-weight:700;font-size:.92rem;transition:transform .15s ease,box-shadow .15s ease}
.guide-btn:hover{transform:translateY(-1px)}
.guide-btn-primary{background:#d4af37;color:#013947;box-shadow:0 12px 26px rgba(212,175,55,.28)}
.guide-btn-light{background:#fff;color:#013947;box-shadow:0 12px 26px rgba(0,0,0,.16)}
.guide-btn-ghost{border:1px solid rgba(1,57,71,.28);color:#013947}
.guide-btn-ghost-light{border:1px solid rgba(255,255,255,.36);color:#fff}

.guide-main{margin-top:-2.2rem;padding-bottom:2rem}
.guide-section{background:#fff;border:1px solid #e4eaea;border-radius:20px;padding:1.6rem 1.7rem;margin-bottom:1.5rem;box-shadow:0 14px 40px rgba(1,57,71,.07)}
.guide-section h2{color:#013947;font-size:1.32rem;margin-bottom:.9rem;line-height:1.25}
.guide-section h3{color:#01545f;font-size:1.02rem;margin:1.35rem 0 .55rem}
.guide-section h3:first-of-type{margin-top:.2rem}
.guide-section p{margin-bottom:.85rem;color:#334155}
.guide-section p:last-child{margin-bottom:0}
.guide-section a{color:#01545f;font-weight:600}
.guide-section a:hover{text-decoration:underline}

.guide-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.8rem;margin-bottom:1.5rem}
.guide-fact{background:#fff;border:1px solid #e4eaea;border-left:4px solid #d4af37;border-radius:14px;padding:.85rem 1rem;box-shadow:0 10px 26px rgba(1,57,71,.06)}
.guide-fact small{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;font-weight:800;color:#7c8a82;margin-bottom:.3rem}
.guide-fact strong{color:#013947;font-size:.98rem;font-weight:700}

.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.guide-card{display:flex;flex-direction:column;gap:.45rem;background:#f9fbfb;border:1px solid #e4eaea;border-radius:16px;padding:1.1rem 1.2rem;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.guide-card:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(1,57,71,.12);border-color:#cfdbdc}
.guide-card strong{color:#013947;font-size:1.02rem}
.guide-card span{color:#516058;font-size:.9rem;line-height:1.55}
.guide-card-tag{align-self:flex-start;background:#e8f1f1;color:#01545f;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.22rem .55rem;border-radius:999px}
.guide-card-link{color:#01545f;font-weight:700;font-size:.85rem;margin-top:.2rem}

.guide-table-wrap{overflow-x:auto;border:1px solid #e4eaea;border-radius:14px}
.guide-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
.guide-table th{background:#013947;color:#fff;text-align:left;padding:.7rem .9rem;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase}
.guide-table td{padding:.68rem .9rem;border-top:1px solid #eef2f2;color:#334155;vertical-align:top}
.guide-table tbody tr:nth-child(even){background:#f8fafa}
.guide-table strong{color:#013947}
.guide-table a{color:#01545f;font-weight:700}

.guide-list{display:grid;gap:.5rem}
.guide-list li{position:relative;padding-left:1.25rem;color:#334155}
.guide-list li::before{content:"";position:absolute;left:0;top:.55rem;width:.45rem;height:.45rem;border-radius:50%;background:#d4af37}
.guide-inline-list{display:flex;flex-wrap:wrap;gap:.5rem}
.guide-inline-list li{padding-left:0}
.guide-inline-list li::before{display:none}
.guide-inline-list a{display:inline-block;background:#f1f6f6;border:1px solid #dfe9ea;border-radius:999px;padding:.42rem .85rem;font-size:.86rem;font-weight:600;color:#01545f}
.guide-inline-list a:hover{background:#e6f0f0;text-decoration:none}

/* Each pill wears the insurer it points at, using the same colours the quote
   cards and badges use, so the row reads as insurers rather than as six
   identical links. The last pill ("Compare every insurer") keeps the site
   green. */
.guide-inline-list a[href^="heritage-"],
.guide-inline-list a[href^="heriafya-"]{background:#e7ecf5;border-color:#cfd9ea;color:#0d2440}
.guide-inline-list a[href^="heritage-"]:hover,
.guide-inline-list a[href^="heriafya-"]:hover{background:#cfd9ea}

.guide-inline-list a[href^="britam-"]{background:#eef0fa;border-color:#d9def3;color:#22408e}
.guide-inline-list a[href^="britam-"]:hover{background:#d9def3}

.guide-inline-list a[href^="apa-"]{background:#e5f1fb;border-color:#cfe3f6;color:#0f5c9c}
.guide-inline-list a[href^="apa-"]:hover{background:#cfe3f6}

.guide-inline-list a[href^="first-assurance-"]{background:#fff7ed;border-color:#ffedd5;color:#c2610d}
.guide-inline-list a[href^="first-assurance-"]:hover{background:#ffedd5}

.guide-inline-list a[href^="aar-"]{background:#fdf3e6;border-color:#f9e6cd;color:#a95c04}
.guide-inline-list a[href^="aar-"]:hover{background:#f9e6cd}

.guide-inline-list a[href^="cic-"]{background:#f7ecec;border-color:#eedede;color:#5f0f14}
.guide-inline-list a[href^="cic-"]:hover{background:#eedede}

.guide-inline-list a[href^="jubilee-"]{background:#fce6e6;border-color:#f2c9c9;color:#b80303}
.guide-inline-list a[href^="jubilee-"]:hover{background:#f2c9c9}

.guide-note{display:flex;gap:.55rem;align-items:flex-start;background:#fbf7ea;border:1px solid #f0e3bd;border-radius:12px;padding:.75rem .9rem;color:#5b4a1c;font-size:.88rem;margin-top:1rem}
.guide-note i{color:#b58a1c;margin-top:.15rem}

.guide-faq{display:grid;gap:.6rem}
.guide-faq-item{border:1px solid #e4eaea;border-radius:14px;padding:.85rem 1rem;background:#fbfcfc}
.guide-faq-item summary{cursor:pointer;font-weight:700;color:#013947;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.guide-faq-item summary::-webkit-details-marker{display:none}
.guide-faq-item summary::after{content:"\002B";color:#b58a1c;font-weight:800;font-size:1.15rem;line-height:1}
.guide-faq-item[open] summary::after{content:"\2212"}
.guide-faq-item div{margin-top:.6rem;color:#3d4b45;font-size:.92rem}
.guide-faq-item div a{color:#01545f;font-weight:700}

.guide-cta{background:linear-gradient(135deg,#013947 0%,#01545f 100%);color:#fff;padding:3rem 0}
.guide-cta h2{font-size:clamp(1.4rem,3vw,2.1rem);margin-bottom:.6rem}
.guide-cta p{color:#d7e5e6;max-width:720px}
.guide-cta-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}

@media (max-width:720px){
  .guide-hero{padding:2.4rem 0 3.6rem}
  .guide-main{margin-top:-1.6rem}
  .guide-section{padding:1.25rem 1.15rem;border-radius:16px}
  .guide-facts{grid-template-columns:1fr 1fr}
  .guide-grid{grid-template-columns:1fr}
  /* Let the cells wrap instead of forcing a horizontal scroll on phones. */
  .guide-table{font-size:.84rem;min-width:0}
  .guide-table th,.guide-table td{padding:.55rem .6rem}
  .guide-btn{width:100%;justify-content:center}
}

@media (max-width:420px){
  .guide-facts{grid-template-columns:1fr}
}