/* The five tools: one shelf, on their own page and as a landing-page band. */
.tool-head{padding:52px 0 26px;max-width:720px}
.tool-head h1{font-size:clamp(30px,4vw,46px)}
.tool-head p{margin-top:14px;color:var(--muted);font-size:16px}
.tool-results{padding-bottom:70px}

/* Abstract flight-path artwork, generated to the site palette. Purely
   decorative, so it carries no text and no alternative description. */
.tool-banner{height:clamp(120px,18vw,210px);margin-bottom:34px;border-radius:14px;background:var(--line) url("/assets/tools-band.webp") center/cover no-repeat}

.tool-band{padding:64px 0 10px}
.tool-band .section-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:18px;margin-bottom:26px}
.tool-band .section-heading>div{max-width:620px}
.tool-band h2{font-size:clamp(25px,3vw,36px);margin-top:8px}
.tool-band .section-heading p:last-child{margin-top:12px;color:var(--muted);font-size:15px}

.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;list-style:none;margin:0;padding:0}
.tool-card a{display:flex;flex-direction:column;height:100%;padding:24px 22px 20px;background:var(--white);border:1px solid var(--line);border-radius:12px;transition:transform .2s,box-shadow .2s,border-color .2s}
.tool-card a:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:0 14px 30px rgba(24,62,53,.11)}

/* The mark is drawn, never photographed: these sit beside real, bookable
   offers and must not read as a picture of a place. */
.tool-mark{display:flex;align-items:center;justify-content:center;width:62px;height:62px;margin-bottom:18px;border-radius:14px;background:var(--lime);color:var(--ink)}
.tool-art{width:34px;height:34px}
.tool-search .tool-mark{background:#d7ed91}
.tool-last-minute .tool-mark{background:#f6cfb4}
.tool-flights .tool-mark{background:#cfe4f1}
.tool-planner .tool-mark{background:#e4dcf2}
.tool-score .tool-mark{background:#f3e3a8}

.tool-kicker{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.tool-card strong{margin-top:7px;font-family:var(--heading);font-size:20px;letter-spacing:-.4px;line-height:1.2}
.tool-text{margin-top:10px;font-size:14px;line-height:1.55}
/* Four of the five run on cached or self-entered data. Printing that next to
   the promise is the point, so it is quiet but never hidden. */
.tool-limit{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--muted)}
.tool-open{margin-top:auto;padding-top:16px;font-size:13px;font-weight:600}

@media(max-width:820px){
 .tool-head{padding-top:34px}
 .tool-band{padding-top:40px}
 .tool-grid{grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
 .tool-card a{padding:20px 18px 18px}
 .tool-mark{width:54px;height:54px;margin-bottom:14px}
}