/* tools.vslmedia.co.uk - shared styles.
   Palette and header/footer pattern deliberately match vslmedia.co.uk
   (app/globals.css: --red, --dark, --soft, --paper, --grey, --line)
   so this reads as VSL Media's own site. */

:root {
  --red: #e31622;
  --dark: #07090a;
  --soft: #111416;
  --paper: #f6f6f3;
  --grey: #686b6d;
  --line: #dedfdf;
}

* , *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--soft);
  font-family: "Archivo", Arial, sans-serif;
}

a { color: inherit; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* ---- header ---- */

.toolsHeader {
  height: 70px;
  padding: 0 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--dark);
  color: #fff;
  border-bottom: 1px solid #292b2d;
}

.toolsLogo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  line-height: 1;
  text-decoration: none;
}

.toolsLogoMark {
  display: block;
  width: 32px;
  height: 31px;
  flex: 0 0 32px;
}

.toolsLogoType {
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.toolsLogoType b {
  font-size: 1.55rem;
  letter-spacing: -0.045em;
  color: var(--red);
  font-weight: 900;
}

.toolsLogoType strong {
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  color: #fff;
  font-weight: 700;
}

.toolsLogoSuffix {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  margin-left: 4px;
}

.toolsNav {
  display: flex;
  gap: 28px;
  text-transform: uppercase;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.toolsNav a {
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 2px solid transparent;
}

.toolsNav a:hover { border-bottom-color: var(--red); }

@media (max-width: 640px) {
  .toolsNav { display: none; }

  body:not(:has(#toolsSidebar)) .toolsNav {
    display: flex;
    gap: 0;
  }

  body:not(:has(#toolsSidebar)) .toolsNav a:first-child { display: none; }
}

/* ---- main content area ---- */

.toolsMain {
  min-height: calc(100vh - 70px - 220px);
  padding: 3rem 1rem;
}

.toolsIntro {
  max-width: 860px;
  margin: 0 auto 2rem;
}

.toolsIntro h1 {
  font-family: Impact, "Arial Narrow", sans-serif;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 0.95;
  margin: 0 0 0.5rem;
}

.toolsIntro p {
  color: var(--grey);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 60ch;
  margin: 0;
}

.redLabel {
  text-transform: uppercase;
  color: var(--red);
  font-size: 0.67rem;
  letter-spacing: 0.12em;
  font-weight: 900;
  margin: 0 0 12px;
}

/* ---- tool card grid (hub page) ---- */

.toolCardGrid {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 640px) {
  .toolCardGrid { grid-template-columns: 1fr; }
}

.toolCard {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s;
}

.toolCard:hover { border-color: var(--red); }

.toolCard h3 {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}

.toolCard p {
  color: var(--grey);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0 0 1rem;
}

.toolCard span {
  display: inline-block;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--red);
}

/* ---- category heading (hub page, above each category's card grid) ---- */

.toolCategoryHeading {
  max-width: 860px;
  margin: 40px auto 16px;
  font-family: Impact, "Arial Narrow", sans-serif;
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--soft);
}

.toolCategoryHeading:first-of-type {
  margin-top: 0;
}

/* ---- agency call to action ---- */

.toolsAgencyCta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
  padding: clamp(2.5rem, 6vw, 5rem) max(4vw, calc((100vw - 1180px) / 2));
  background: var(--dark);
  color: #fff;
  border-bottom: 1px solid #292b2d;
}

.toolsAgencyCta > div:first-child { max-width: 760px; }

.toolsAgencyCta h2 {
  max-width: 720px;
  margin: 0 0 0.8rem;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 0.98;
  text-transform: uppercase;
}

.toolsAgencyCta p:not(.redLabel) {
  max-width: 68ch;
  margin: 0;
  color: #b9bbbd;
  line-height: 1.65;
}

.toolsAgencyCtaActions {
  display: grid;
  gap: 0.75rem;
  min-width: 280px;
}

.toolsButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85rem 1.15rem;
  border: 2px solid var(--red);
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.toolsButtonPrimary { background: var(--red); color: #fff; }
.toolsButtonPrimary:hover { background: #b90f18; border-color: #b90f18; }
.toolsButtonSecondary { color: #fff; }
.toolsButtonSecondary:hover { background: #fff; border-color: #fff; color: var(--dark); }

@media (max-width: 760px) {
  .toolsAgencyCta { grid-template-columns: 1fr; align-items: start; }
  .toolsAgencyCtaActions { min-width: 0; }
}

/* ---- footer ---- */

.toolsFooter {
  background: #050607;
  color: #aaa;
  padding: 45px 4vw 25px;
  display: grid;
  gap: 18px;
}

.toolsFooterLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  text-transform: uppercase;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.toolsFooterLinks a { text-decoration: none; }
.toolsFooterLinks a:hover { color: #fff; }

.toolsFooter small {
  display: block;
  border-top: 1px solid #252728;
  padding-top: 20px;
  color: #777;
  font-size: 0.6rem;
  line-height: 1.6;
}

/* ---- data-notice banner (privacy reassurance on every tool page) ---- */

.dataNotice {
  max-width: 860px;
  margin: 0 auto 1.5rem;
  padding: 12px 18px;
  background: #eef7f0;
  border: 1px solid #bfe0c8;
  border-radius: 8px;
  color: #1f5c33;
  font-size: 0.85rem;
  line-height: 1.5;
}

.dataNotice strong { font-weight: 800; }

/* ---- small app-title label inside a tool's own container. Was a
   <h1> on each tool page; demoted to a <p> so every page has exactly
   one real <h1> - the SEO one in .toolsIntro above it. Same visual
   treatment as the old .container h1 rule it replaces. ---- */

.toolAppLabel {
  font-size: 16px;
  font-weight: 600;
  color: #18181b;
  margin: 0 0 1.25rem;
}

/* ---- tool page layout with sidebar nav ---- */

.toolsLayout {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1rem;
}

.toolsLayout .toolsMain {
  flex: 1 1 auto;
  min-width: 0;
  padding: 3rem 0;
}

.toolsSidebar {
  flex: 0 0 220px;
  padding: 3rem 0;
}

.toolsSidebarUtility { display: none; }

.toolsSidebarGroup { margin-bottom: 1.75rem; }

.toolsSidebarHeading {
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--grey);
  margin: 0 0 0.6rem;
}

.toolsSidebarLink {
  display: block;
  text-decoration: none;
  color: var(--soft);
  font-size: 0.88rem;
  line-height: 1.4;
  padding: 5px 0;
}

.toolsSidebarLink:hover { color: var(--red); }

.toolsSidebarLink.active {
  color: var(--red);
  font-weight: 700;
}

/* ---- ad slots ---- */

.toolsAdSlot {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1rem;
  min-height: 72px;
}

@media (min-width: 641px) {
  .toolsAdSlotTop { min-height: 120px; }
  .toolsAdSlotBottom { min-height: 180px; }
}

/* ---- mobile nav toggle (hamburger button in the header; only shown
   on pages that actually have a sidebar to open) ---- */

.toolsNavToggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.toolsNavToggle span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}

@media (max-width: 640px) {
  body:has(#toolsSidebar) .toolsNavToggle { display: flex; }

  .toolsLayout { flex-direction: column; padding: 0 1rem; }

  .toolsSidebar {
    display: none;
    width: 100%;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1rem;
  }

  .toolsSidebarUtility {
    display: flex;
    gap: 18px;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
    text-transform: uppercase;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
  }

  .toolsSidebarUtility a { text-decoration: none; }
  .toolsSidebarUtility a:hover { color: var(--red); }

  .toolsSidebar.open { display: block; }
}
/* Hospitality design refresh — shared shell, not individual tool controls. */
:root{--red:#d91524;--dark:#101713;--soft:#171a17;--paper:#f7f4ed;--grey:#555d56;--line:#d7d9cf}body{font-family:Arial,sans-serif}.toolsHeader{height:auto;min-height:82px;background:var(--paper);color:var(--soft);padding:18px 5%;position:relative;border-bottom:1px solid var(--line);gap:24px}.toolsLogo{gap:10px}.toolsLogoType{gap:6px}.toolsLogoType b,.toolsLogoType strong{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:29px;font-weight:400;letter-spacing:0;color:var(--soft)}.toolsLogoMark{width:36px;height:32px;flex-basis:36px}.toolsNav{align-items:center;gap:25px;font-size:12px;letter-spacing:.06em}.toolsNav .toolsTalk{padding:17px 22px;background:var(--red);color:white;border:0}.toolsSkip{position:absolute;top:-100px;left:20px;background:white;padding:12px;z-index:100}.toolsSkip:focus{top:8px}.toolsMobileActions{display:none}.toolsIntro h1,.toolCategoryHeading,.toolsAgencyCta h2,.toolsHub h1,.toolsHub h2,.toolsHub h3{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-weight:400;text-transform:none;letter-spacing:-.02em;line-height:1.06}.toolsIntro h1{font-size:clamp(36px,4vw,55px);margin-bottom:20px}.toolsIntro .redLabel{margin-bottom:18px}.toolsIntro p{font-size:16px}.toolsLayout{max-width:1380px;gap:40px;padding:0 5%}.toolsLayout .toolsMain{padding-top:38px}.toolsSidebar{flex-basis:220px;padding-top:40px}.toolsSidebarHeading{font-size:10px;color:#a81521}.toolsSidebarLink{padding:7px 0;font-size:13px}.toolsUseCase{max-width:860px;margin:0 auto 24px;padding:18px 20px;background:#eaeede;border-left:3px solid #173f32;line-height:1.6;font-size:14px}.toolsAgencyCta{background:#101713}.toolsAgencyCta h2{font-size:clamp(38px,4.5vw,62px)}.toolsAgencyCta .redLabel{color:#f0c9c6}.toolsAgencyCtaActions{min-width:260px}.toolsButton{text-transform:none;letter-spacing:0;font-size:14px}.toolsContactLink{font-size:14px;text-underline-offset:5px;margin-top:9px}.toolsFooter{background:var(--paper);color:var(--soft)}.toolsFooterLinks{text-transform:none;font-size:13px;letter-spacing:0;font-weight:400}.toolsFooterLinks a:hover{color:#a81521}.toolsFooter small{border-color:#c8cbbc;color:#555d56;font-size:11px}.toolsHero{display:grid;grid-template-columns:1fr 1fr;background:#101713;color:white}.toolsHero>div{padding:75px 10%}.toolsHero .redLabel{color:#d7ddd3;font-size:11px;letter-spacing:.14em}.toolsHero h1{font-size:clamp(60px,6.5vw,92px);margin:28px 0}.toolsHero p{font-size:19px;line-height:1.6;max-width:48ch}.toolsHero p.toolsHeroSmall{font-size:15px;color:#cad3c5}.toolsHero figure{margin:0;position:relative;min-height:620px}.toolsHero img{height:100%;width:100%;object-fit:cover;position:absolute;inset:0}.toolsHero figcaption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#000b);padding:60px 30px 25px;font-size:14px}.toolsHero figcaption span{display:block;font-size:10px;margin-top:8px}.toolsHeroActions{display:flex;gap:25px;align-items:center;flex-wrap:wrap;margin:28px 0 24px;font-size:14px}.toolsHeroActions>a:not(.toolsButton){text-underline-offset:6px}.toolsPrivacyLink{font-size:11px;color:#cad3c5;text-underline-offset:4px}.toolsHubSection{padding:80px 6%;max-width:1500px;margin:auto}.toolsHubSection>h2{font-size:clamp(42px,4.5vw,62px);margin:20px 0 35px}.toolsTaskGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.toolsTask{text-decoration:none;border-top:1px solid #aeb7a7;padding-top:24px}.toolsTask:hover{border-color:var(--red)}.toolsTaskNumber{color:#a81521;letter-spacing:.1em;text-transform:uppercase;font-size:10px}.toolsTask h3{font-size:32px;margin:25px 0 16px}.toolsTask p{line-height:1.65;color:var(--grey);font-size:16px}.toolsTaskLink{display:block;font-size:14px;text-decoration:underline;text-underline-offset:5px;margin-top:22px}.toolsQuickGuide{background:#eae6db;max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:8%}.toolsQuickGuide h2{font-size:clamp(42px,4.5vw,62px);margin:20px 0}.toolsQuickGuide p{font-size:16px;line-height:1.7}.toolsQuickGuide strong{color:#173f32}.toolsCatalogue{background:#fffdf8;max-width:none}.toolsCatalogueIntro{font-size:16px;line-height:1.6;margin-bottom:42px;color:var(--grey)}.toolCategoryHeading,.toolCardGrid{max-width:none}.toolCategoryHeading{font-size:32px;margin:45px 0 22px}.toolCardGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.toolCard{padding:26px;border-radius:0;background:#f7f4ed}.toolCard h3{font-size:26px;margin:0 0 16px}.toolCard p{font-size:15px;line-height:1.65}.toolCard span{text-transform:none;letter-spacing:0;font-weight:normal;font-size:14px}.toolsAdSlot{max-width:1380px}.toolsMain{min-width:0}img,canvas{max-width:100%}
@media(max-width:1050px){.toolsHeader>.toolsNav,body:not(:has(#toolsSidebar)) .toolsHeader>.toolsNav{display:none}.toolsMobileActions{display:flex;align-items:center;gap:10px;margin-left:auto}.toolsSiteMenu summary,.toolsNavToggle{border:1px solid #aeb4a6;padding:10px 13px;min-height:44px;min-width:55px;font:14px Arial,sans-serif;background:transparent;cursor:pointer;list-style:none;width:auto;height:auto;color:#171a17}.toolsSiteMenu nav{display:flex;flex-direction:column;gap:10px;position:absolute;top:100%;left:0;right:0;z-index:30;background:var(--paper);border-bottom:1px solid #aeb4a6;padding:20px 5%}.toolsSiteMenu nav a{padding:9px 0;text-decoration:none;font-size:16px}.toolsSiteMenu:not([open]) nav{display:none}.toolsHero>div{padding:55px 8%}.toolsHero h1{font-size:65px}.toolsTaskGrid{gap:24px}.toolCardGrid{grid-template-columns:1fr 1fr}.toolsLayout{gap:25px}.toolsSidebar{flex-basis:180px}}
@media(max-width:760px){.toolsHero,.toolsQuickGuide{grid-template-columns:1fr}.toolsHero>div{padding:48px 6%}.toolsHero h1{font-size:64px}.toolsHero figure{min-height:330px}.toolsHubSection{padding:55px 6%}.toolsTaskGrid{grid-template-columns:1fr;gap:35px}.toolsTask h3{margin:17px 0 10px}.toolsTask p{max-width:50ch}.toolsQuickGuide{gap:15px}.toolsAgencyCta{padding:50px 6%}.toolsAgencyCtaActions{min-width:0}.toolsHero figure img{object-position:center 48%}}
@media(max-width:640px){.toolsLayout{padding:0 5%}.toolsSidebar{flex-basis:auto}.toolsLayout .toolsMain{width:100%;padding-top:30px}.toolsNavToggle{display:none}body:has(#toolsSidebar) .toolsNavToggle{display:flex}.toolsLogoType b,.toolsLogoType strong{font-size:25px}.toolsLogoMark{width:30px;flex-basis:30px}.toolsHeader{padding:16px 5%;gap:10px}.toolsLogo{gap:7px}.toolsMobileActions{gap:7px}.toolsLogoType{gap:4px}.toolCardGrid{grid-template-columns:1fr}.toolsIntro h1{overflow-wrap:anywhere}.toolsUseCase{font-size:13px;padding:16px}.toolsHubSection>h2,.toolsQuickGuide h2{font-size:44px}.toolsHero h1{font-size:58px}.toolsNavToggle,.toolsSiteMenu summary{padding:10px}.toolsLayout .toolsMain .toolWrap{padding-left:0;padding-right:0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.toolsHero>.toolsOverview{padding:55px 7%;background:#eae6db;color:#171a17;display:flex;flex-direction:column;justify-content:center;gap:20px}.toolsOverviewLabel{text-transform:uppercase;font-size:10px;letter-spacing:.13em;color:#555d56;margin-bottom:4px}.toolsOverviewCard{display:grid;grid-template-columns:76px minmax(0,1fr) 20px;align-items:center;gap:22px;background:#fffdf8;border:1px solid #d0d3c7;padding:26px;text-decoration:none}.toolsOverviewCard:hover{border-color:#b91321}.toolsOverviewCard h2{font-size:31px;margin:8px 0 10px}.toolsOverviewCard p{font-size:13px;line-height:1.6;color:#555d56;margin:0}.overviewType{text-transform:uppercase;font-size:9px;letter-spacing:.1em;color:#a81521}.overviewArrow{font-size:24px;color:#a81521}.resizeGraphic{width:70px;height:58px;border:2px dashed #7f9384;position:relative}.resizeGraphic span{position:absolute;bottom:5px;left:5px;width:43px;height:33px;background:#dce5d5;border:2px solid #173f32}.formatGraphic{background:#e9ede1;text-align:center;padding:12px 6px;font:12px/1.5 monospace;color:#173f32}.codeGraphic{background:#173f32;color:#fff;text-align:center;padding:20px 6px;font:26px monospace}.toolsOverviewAll{font-size:13px;text-underline-offset:5px;color:#173f32}@media(max-width:1050px){.toolsOverviewCard{grid-template-columns:50px minmax(0,1fr);padding:22px;gap:17px}.overviewArrow{display:none}.resizeGraphic{width:48px;height:45px}.resizeGraphic span{width:30px;height:25px}.toolsOverviewCard h2{font-size:29px}.toolsHero>.toolsOverview{padding:45px 6%}}@media(max-width:760px){.toolsHero h1{font-size:58px}.toolsOverviewCard{grid-template-columns:60px minmax(0,1fr);padding:23px}.toolsHero>.toolsOverview{padding:38px 6%}.toolsOverviewCard h2{font-size:30px}}@media(max-width:350px){.toolsHero h1{font-size:50px}.toolsOverviewCard{grid-template-columns:45px minmax(0,1fr);gap:14px;padding:18px}.toolsOverviewCard h2{font-size:27px}}

/* ---- the guide under each tool (13 Sep 2026): how to use it, and what to know, in real sentences ---- */
.toolGuide { max-width: 860px; margin: 1rem auto 3.5rem; color: #18181b; font-size: 0.97rem; line-height: 1.7; }
.toolGuide h2 { font-family: Impact, 'Arial Narrow', Arial, sans-serif; font-weight: 400; font-size: 1.65rem; letter-spacing: -.01em; line-height: 1.1; margin: 2.2rem 0 0.8rem; }
.toolGuide h2:first-child { margin-top: 1rem; }
.toolGuide p { margin: 0 0 1rem; max-width: 70ch; }
.toolGuide ol, .toolGuide ul { margin: 0 0 1.1rem; padding-left: 1.4rem; max-width: 70ch; }
.toolGuide li { margin-bottom: 0.45rem; }
.toolGuide a { color: inherit; text-underline-offset: 3px; }