/* ============================================================================
   styles.css — Portal landing page (Beyond Sure calculators hub)
   Shared by the root hub and the insurer sub-hub index pages under insurers/.
   ========================================================================== */
:root{
  --green:#15803d; --green-mid:#16a34a; --green-deep:#14532d;
  --green-soft:#dcfce7; --green-tint:#ecfdf5;
  --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb; --bg:#f6f7f9; --card:#fff;
  --font:"DM Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --wrap:1240px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow-md:0 10px 30px rgba(15,23,42,.08);
}
*{box-sizing:border-box; font-family:var(--font)}
body{margin:0; background:var(--bg); color:var(--ink); font-size:14px; -webkit-font-smoothing:antialiased}

/* ---------------------------------------------------------------- header */
.hub-top{background:var(--card); border-bottom:1px solid var(--line); padding:16px 30px; position:sticky; top:0; z-index:40}
.hub-top-in{max-width:var(--wrap); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px}
.brand{display:flex; align-items:center; gap:14px; max-width:var(--wrap); margin:0 auto; text-decoration:none}
.hub-top-in .brand{max-width:none; margin:0}
.brand-logo{display:block; height:54px; width:auto}
.logo{display:grid; place-items:center; width:46px; height:46px; border-radius:13px; flex:none;
  background:linear-gradient(135deg,var(--green-mid),var(--green-deep)); box-shadow:0 6px 14px rgba(21,128,61,.28)}
.hub-top h1{margin:0; font-size:20px; font-weight:800; color:#111827; letter-spacing:-.2px}
.tag{margin:2px 0 0; color:var(--muted); font-size:13px}

/* margin-left:auto keeps this hard right whether or not a brand sits
   opposite it — space-between alone would slide it left once the logo
   was removed. */
.hub-actions{display:flex; align-items:center; gap:18px; margin-left:auto}

.help-link{display:flex; align-items:center; gap:10px; background:none; border:0; padding:0; cursor:pointer; text-align:left}
.help-ic{display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#f3f4f6; color:#6b7280; flex:none}
.help-link:hover .help-ic{background:var(--green-soft); color:var(--green)}
.help-link small{display:block; color:var(--muted); font-size:12.5px; line-height:1.35}
.help-link strong{display:block; color:var(--green); font-size:13.5px; font-weight:700; line-height:1.35}

/* ------------------------------------------------------------------ page */
.hub{max-width:var(--wrap); margin:0 auto; padding:28px 30px 64px}

/* hero */
.hero{position:relative; overflow:hidden; border:1px solid #e3f1e8; border-radius:24px; padding:44px 48px;
  background:linear-gradient(115deg,#effcf3 0%,#f5fdf8 42%,#fff 100%);
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); align-items:center; gap:28px}
.hero h2{margin:0; font-size:clamp(30px,4vw,50px); line-height:1.08; font-weight:800; color:#0f172a; letter-spacing:-1.2px}
.hero h2 em{display:block; font-style:normal; color:var(--green-mid)}
.hero p{margin:20px 0 0; color:#4b5563; font-size:15.5px; line-height:1.6; max-width:46ch}
.hero-art{justify-self:end; width:100%; max-width:520px}
.hero-art svg{width:100%; height:auto; display:block}

/* section heads */
.hub-intro{margin:52px 0 22px; text-align:center}
.hub-intro h2{margin:0 0 6px; font-size:34px; font-weight:800; color:#111827; letter-spacing:-.7px}
.hub-intro p{margin:0; color:var(--muted); font-size:14.5px}
.hub .hero + .cards{margin-top:32px}

/* ----------------------------------------------------------------- cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.cards{grid-template-columns:1fr}}

.ccard{--tint:#f3f4f6; --tone:#4b5563;
  display:grid; grid-template-columns:64px minmax(0,1fr); grid-template-rows:auto 1fr auto;
  column-gap:18px; row-gap:6px; background:var(--card); border:2px solid #6ee7a8; border-radius:20px;
  padding:26px 26px 22px; text-decoration:none; color:inherit;
  box-shadow:0 0 0 4px rgba(34,197,94,.10), 0 0 18px rgba(34,197,94,.22), 0 2px 6px rgba(16,24,40,.05);
  transition:transform .16s, box-shadow .16s, border-color .16s}
.ccard:hover{transform:translateY(-4px); border-color:var(--green-mid);
  box-shadow:0 0 0 5px rgba(34,197,94,.16), 0 0 28px rgba(34,197,94,.38), 0 12px 26px rgba(15,23,42,.10)}
.ccard.t-red{--tint:#fef2f2; --tone:#dc2626}
.ccard.t-blue{--tint:#eff6ff; --tone:#2563eb}
.ccard.t-amber{--tint:#fffbeb; --tone:#b45309}
.ccard.t-violet{--tint:#f5f3ff; --tone:#7c3aed}
.ccard.t-teal{--tint:#ecfeff; --tone:#0e7490}
.ccard.t-rose{--tint:#fdf2f8; --tone:#be185d}
.ccard.t-green{--tint:#ecfdf5; --tone:#15803d}
.ccard.t-slate{--tint:#f1f5f9; --tone:#475569}

.cicon{grid-column:1; grid-row:1 / span 2; align-self:start; display:grid; place-items:center;
  width:64px; height:64px; border-radius:16px; font-size:30px; background:var(--tint)}
/* legacy tint classes used by the insurer sub-hubs */
.cicon.fire{background:#fef2f2}
.cicon.marine{background:#eff6ff}
.cicon.engg{background:#fffbeb}
.cicon.benefits{background:#eef2ff}

.ccard h3{grid-column:2; margin:4px 0 0; font-size:19px; font-weight:800; color:#111827; letter-spacing:-.3px}
.ccard p{grid-column:2; align-self:start; margin:0; color:var(--muted); font-size:13.5px; line-height:1.6}

.ccard-foot{grid-column:1 / -1; display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:18px}
.pill{background:var(--tint); color:var(--tone); font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:999px; white-space:nowrap}
/* back-to-hub button at the foot of the insurer sub-hubs */
.back-wrap{margin-top:44px; text-align:center}
.btn-all{display:inline-flex; align-items:center; gap:10px; padding:14px 30px; border-radius:12px;
  background:linear-gradient(135deg,var(--green-mid),var(--green)); color:#fff; font-size:15px; font-weight:700;
  text-decoration:none; box-shadow:0 6px 18px rgba(21,128,61,.28); transition:transform .16s, box-shadow .16s}
.btn-all:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(21,128,61,.38)}

.hub-note{margin-top:40px; text-align:center; color:var(--muted); font-size:12px; font-style:italic}

/* ------------------------------------------------------------ help modal */
.guide{border:0; border-radius:20px; padding:0; width:min(560px,92vw); box-shadow:0 24px 60px rgba(15,23,42,.24)}
.guide::backdrop{background:rgba(15,23,42,.45)}
.guide-in{padding:28px 30px 26px}
.guide h3{margin:0 0 6px; font-size:20px; font-weight:800; color:#111827}
.guide > form{position:absolute; top:16px; right:16px}
.guide-close{background:#f3f4f6; border:0; border-radius:9px; width:32px; height:32px; font-size:16px; color:#6b7280; cursor:pointer}
.guide-close:hover{background:#e5e7eb}
.guide ol{margin:16px 0 0; padding-left:20px; color:#4b5563; font-size:14px; line-height:1.7}
.guide ol b{color:#111827}
.guide-note{margin:18px 0 0; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:12.5px; line-height:1.6}

@media(max-width:900px){
  .hero{grid-template-columns:1fr; padding:32px 26px}
  .hero-art{display:none}
}
@media(max-width:620px){
  .hub-top{padding:14px 18px}
  .hub{padding:22px 18px 48px}
  .help-link small{display:none}
  .brand-logo{height:42px}
  .hub-top-in{flex-wrap:wrap; gap:12px}
  .hub-intro h2{font-size:27px}
}