/* LIFS Tools landing page — Gantry 5 / Bostan add-on stylesheet
   Load after the theme CSS (Gantry: Styles → Custom CSS, or custom/css/custom.css).
   Fonts: add the two <link> tags from README.md to the page head, or @import them here. */

:root{
  --lifs-primary:#16628F;   /* logo wordmark blue — primary */
  --lifs-sky:#3C9BD6;       /* puzzle-tile blue — links, hover */
  --lifs-rose:#98457A;      /* logo rose — single warm accent */
  --lifs-periwinkle:#6F6BAE;/* logo violet — reserve */
  --lifs-ink:#16304A;       /* headings, dark bands */
  --lifs-slate:#46596B;     /* body text */
  --lifs-grey:#5A6C7D;      /* labels, badges, meta (min for small text) */
  --lifs-paper:#FAFCFD;
  --lifs-mist:#EDF3F8;      /* alternate band — logo ground */
  --lifs-tint:#E4EFF7;      /* badge / tile fill */
  --lifs-line:#D6E2EA;
  --lifs-chip-line:#C9D8E2;
  --lifs-display:"Space Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --lifs-sans:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --lifs-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}

.lifs{font-family:var(--lifs-sans);color:var(--lifs-ink);-webkit-font-smoothing:antialiased}
.lifs *,.lifs *::before,.lifs *::after{box-sizing:border-box}
.lifs a{color:var(--lifs-primary);text-decoration:none}
.lifs a:hover,.lifs a:focus{color:var(--lifs-sky)}
.lifs-wrap{max-width:1240px;margin:0 auto;padding:0 28px}  /* drop if the Gantry section already constrains width */

/* --- shared type --- */
.lifs-eyebrow{font-family:var(--lifs-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lifs-rose);margin:0}
.lifs-label{font-family:var(--lifs-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--lifs-grey);margin:0}
.lifs-h1{font-family:var(--lifs-display);font-size:clamp(32px,4.4vw,52px);line-height:1.05;font-weight:600;letter-spacing:-.03em;text-wrap:pretty;margin:0}
.lifs-h2{font-family:var(--lifs-display);font-size:28px;line-height:1.15;font-weight:600;margin:0}
.lifs-h3{font-family:var(--lifs-display);font-size:21px;line-height:1.2;font-weight:600;margin:0}
.lifs-lead{font-size:15px;line-height:1.65;color:#33475C;margin:0}
.lifs-note{font-size:13.5px;line-height:1.6;color:var(--lifs-slate);margin:0}
.lifs-rule{height:1px;background:var(--lifs-line)}

/* --- hero --- */
.lifs-hero{background:var(--lifs-mist);border-bottom:1px solid var(--lifs-line)}
.lifs-hero__inner{padding:68px 0 44px;display:flex;flex-direction:column;gap:34px}
.lifs-hero__grid{display:flex;flex-wrap:wrap;gap:56px;align-items:flex-end}
.lifs-hero__title{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:16px}
.lifs-hero__mission{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:14px}

/* --- task chips --- */
.lifs-chips{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}
.lifs-chip{font:inherit;font-size:13.5px;padding:10px 16px;border:1px solid var(--lifs-chip-line);background:transparent;color:#33475C;border-radius:999px;cursor:pointer}
.lifs-chip:hover{border-color:var(--lifs-primary)}
.lifs-chip[aria-pressed="true"]{background:var(--lifs-ink);border-color:var(--lifs-ink);color:var(--lifs-paper)}

/* --- tool list --- */
.lifs-tools{padding:36px 0 52px;display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.lifs-tools__aside{flex:0 1 250px;min-width:220px;display:flex;flex-direction:column;gap:14px}
.lifs-tools__list{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:10px}
.lifs-stagelist{display:flex;flex-direction:column;gap:0;margin:4px 0 0;padding:0;list-style:none}
.lifs-stage{width:100%;font:inherit;font-size:13.5px;color:#33475C;background:none;border:0;border-bottom:1px solid var(--lifs-mist);padding:6px 0;display:flex;align-items:baseline;justify-content:space-between;gap:10px;cursor:pointer;text-align:left}
.lifs-stage:hover{color:var(--lifs-sky)}
.lifs-stage[aria-pressed="true"]{color:var(--lifs-primary);font-weight:500}
.lifs-stage__count{font-family:var(--lifs-mono);font-size:11px;color:var(--lifs-grey)}

.lifs-tool{border:1px solid var(--lifs-line);background:#fff;padding:16px 18px;display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.lifs-tool:hover{border-color:var(--lifs-sky);box-shadow:0 8px 22px -14px rgba(22,98,143,.5)}
.lifs-tool[hidden]{display:none}
.lifs-tool__shot{flex:0 0 104px;height:62px;border-radius:2px;overflow:hidden}
.lifs-tool__shot img{width:100%;height:100%;object-fit:cover;display:block}
.lifs-tool__body{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:5px}
.lifs-tool__head{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.lifs-tool__name{font-family:var(--lifs-display);font-size:17px;font-weight:600;margin:0}
.lifs-tool__desc{font-size:13.5px;line-height:1.55;color:#33475C;margin:0}
.lifs-tool__get{flex:0 0 150px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.lifs-tool__meta{font-family:var(--lifs-mono);font-size:10px;color:var(--lifs-grey)}
.lifs-tool__stage{font-family:var(--lifs-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--lifs-rose)}

.lifs-badge{font-family:var(--lifs-mono);font-size:9.5px;padding:2px 5px;background:var(--lifs-tint);color:var(--lifs-primary);border-radius:2px}
.lifs-badge--os{background:none;border:1px solid var(--lifs-line);color:var(--lifs-grey)}

.lifs-btn{display:inline-block;font-family:var(--lifs-mono);font-size:11.5px;font-weight:500;padding:8px 13px;border-radius:3px;white-space:nowrap;border:1px solid transparent;cursor:pointer}
.lifs-btn--outline{border-color:var(--lifs-primary);color:var(--lifs-primary);background:#fff}
.lifs-btn--outline:hover{background:var(--lifs-primary);color:var(--lifs-paper)}
.lifs-btn--solid{background:var(--lifs-primary);color:var(--lifs-paper);font-family:var(--lifs-sans);font-size:12.5px;padding:8px 15px}
.lifs-btn--rose{background:var(--lifs-rose);color:var(--lifs-paper)!important;var(--lifs-paper)!important}
.lifs-btn--rose:hover{background:#7E3563;color:var(--lifs-paper)}

.lifs-support{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border:1px dashed var(--lifs-line);background:var(--lifs-paper)}
.lifs-empty{padding:18px;border:1px dashed var(--lifs-line);font-size:13.5px;color:var(--lifs-slate)}

/* --- news --- */
.lifs-news{border-top:1px solid var(--lifs-line);border-bottom:1px solid var(--lifs-line);background:#fff}
.lifs-news__inner{padding:30px 0;display:flex;flex-wrap:wrap;gap:30px;align-items:center}
.lifs-news__img{flex:0 1 300px;min-width:240px;height:112px;border-radius:2px;overflow:hidden}
.lifs-news__img img{width:100%;height:100%;object-fit:cover;display:block}
.lifs-news__body{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:7px}
.lifs-news__nav{flex:0 0 auto;display:flex;align-items:center;gap:10px}
.lifs-navbtn{width:32px;height:32px;border:1px solid var(--lifs-line);border-radius:3px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--lifs-slate);cursor:pointer}
.lifs-dots{display:flex;gap:5px}
.lifs-dot{width:6px;height:6px;border-radius:50%;background:var(--lifs-line)}
.lifs-dot.is-on{background:var(--lifs-primary)}

/* --- partners & funding --- */
.lifs-logos{background:var(--lifs-paper);border-bottom:1px solid var(--lifs-line)}
.lifs-logos__inner{padding:26px 0;display:flex;flex-wrap:wrap;gap:40px}
.lifs-logos__group{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:9px}
.lifs-logos__group--funding{flex:0 1 280px}
.lifs-logos__row{display:flex;flex-wrap:wrap;gap:10px}
.lifs-logo{flex:1 1 120px;height:42px;display:flex;align-items:center;justify-content:center}
.lifs-logo img{max-width:100%;max-height:100%;object-fit:contain}

/* --- image placeholders (delete once real images are in) --- */
.lifs-ph{background:repeating-linear-gradient(135deg,var(--lifs-tint) 0 6px,#F5FAFD 6px 12px);border:1px solid var(--lifs-line);display:flex;align-items:center;justify-content:center;font-family:var(--lifs-mono);font-size:9.5px;letter-spacing:.04em;color:var(--lifs-grey);text-align:center}

@media (max-width:700px){
  .lifs-hero__inner{padding:44px 0 32px}
  .lifs-hero__grid{gap:28px}
  .lifs-tools{padding:28px 0 36px;gap:28px}
  .lifs-tool__get{flex:1 1 100%;align-items:flex-start}
  .lifs-tool__shot{flex:0 0 72px;height:48px}
}