/* ==========================================================================
   Team Today: Home Page
   Design tokens taken from Figma "Team Today New Website"
   Fonts: soleil (headings) + proxima-nova (body), served by the same Adobe
   Fonts kit as www.team-today.com (use.typekit.net/imp5ksl.css, linked in
   each page head). Self-hosted Poppins / Mulish remain as fallbacks.
   ========================================================================== */

/* ==========================================================================
   Self-hosted fonts (/assets/fonts). Mulish is a variable font, one file
   covers weights 400–700. Poppins is one file per weight. Latin +
   latin-ext subsets only; unicode-range keeps unused subsets undownloaded.
   ========================================================================== */

@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/mulish-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/mulish-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/poppins-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/poppins-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --blue:        #0057FF;
  --blue-dark:   #1C2684;
  --blue-hover:  #0048d6;
  --indigo:      #515BB0;   /* "Beautifully Simple" + promo card */
  --black:       #081E22;
  --grey:        #647478;
  --grey-body:   #3A4A50;
  --mid-grey:    #BCC6C7;
  --light-grey:  #EDEDED;
  --vlight-grey: #FAFAFA;

  --font-head: soleil, 'Poppins', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: proxima-nova, 'Mulish', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --maxw: 1400px;
  --pad: 48px;
  --shadow-lg: 0 18px 40px rgba(28, 38, 132, 0.18);
  --card-shadow: 0 20px 45px rgba(8, 20, 40, 0.08);
}

* { box-sizing: border-box; }

/* Prevent large images from forcing grid/flex tracks wider than the viewport
   (grid & flex items default to min-width:auto, which can cause horizontal overflow) */
.hero-content, .hero-visual,
.feature-text, .feature-visual,
.promo-text, .promo-visual,
.tool-card, .int-card, .review-card { min-width: 0; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; animation: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--black);
  background: #fff;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-head); }
main { display: block; }
img { max-width: 100%; }
a { color: inherit; }

.text-blue { color: var(--blue); }

/* ---------- Buttons ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .15s ease, color .15s ease, transform .15s ease;
  white-space: nowrap;
  line-height: 1;
}
.btn-sm { padding: 10px 20px; font-size: 15px; }
.btn-lg { padding: 15px 26px; font-size: 16px; }
.btn-xl { padding: 14px 39px; font-size: 16px; font-family: soleil, sans-serif; }

/* Button with a small caption underneath (e.g. "No credit card required") */
.btn-stack { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.btn-note { font-size: 13px; color: rgba(255,255,255,.85); }

.btn-blue          { background: var(--blue); color: #fff; }
.btn-blue:hover    { background: var(--blue-hover); }
.btn-outline-blue  { background: #fff; border-color: var(--blue); color: var(--blue); }
.btn-outline-blue:hover { background: var(--blue); color: #fff; }
.btn-white         { background: #fff; color: var(--blue); }
.btn-white:hover   { transform: translateY(-1px); }
.btn-outline-white { background: transparent; border-color: rgba(255,255,255,.85); color: #fff; }
.btn-outline-white:hover { background: rgba(255,255,255,.12); }
.btn-shadow        { box-shadow: 0 12px 28px rgba(8,20,40,.28); }

/* ---------- Header -------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  min-height: 72px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  /* Figma Main Menu: 100px inset on the 1600px frame; the max() keeps the
     content centred at 1600px on wider screens */
  padding: 0 max(clamp(20px, 6.5vw, 100px), calc((100vw - var(--maxw)) / 2));
}
.logo img { height: clamp(27px, 2.2vw, 35px); display: block; }

.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 2vw, 32px); font-family: var(--font-head); }
.nav-item {
  color: var(--black);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  padding: 11px 2px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.nav-item:hover { color: var(--blue); }
.chevron { width: 13px; height: 13px; flex-shrink: 0; }
/* margin-left:auto keeps the buttons pinned right if the nav ever wraps */
.nav-buttons { display: flex; align-items: center; gap: 16px; margin-left: auto; }

/* Features dropdown */
.nav-group { position: relative; }
.nav-drop-toggle {
  background: none;
  border: none;
  padding: 11px 2px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.nav-group .chevron { transition: transform .15s ease; }
.nav-group.open .chevron { transform: rotate(180deg); }
.nav-group.open > .nav-item { color: var(--blue); }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  min-width: 220px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(8, 20, 40, .16);
  padding: 10px;
  display: none;
  flex-direction: column;
  z-index: 200;
}
/* invisible bridge so the pointer can travel from the toggle to the panel */
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-group.open .nav-dropdown { display: flex; }
@media (hover: hover) {
  .nav-group:hover .nav-dropdown { display: flex; }
  .nav-group:hover > .nav-item { color: var(--blue); }
}
.nav-dropdown a {
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--black);
  text-decoration: none;
  white-space: nowrap;
}
.nav-dropdown a:hover,
.nav-dropdown a[aria-current="page"] { color: var(--blue); }
.nav-dropdown a:hover { background: rgba(0, 87, 255, .06); }

/* Platform dropdown: compact three-column panel anchored under the trigger */
.platform-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  margin-left: -420px; /* centred fallback; JS clamps to keep a 16px viewport margin */
  width: 840px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(14, 23, 38, .28);
  display: grid;
  grid-template-columns: 250px 1fr 190px;
  overflow: hidden;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  /* closing: 150ms grace delay so the pointer can travel into the panel, then a 150ms fade */
  transition: opacity .15s ease-out .15s, transform .15s ease-out .15s, visibility 0s linear .3s;
}
.nav-group.open .platform-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
@media (hover: hover) {
  .nav-group-platform:hover .platform-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .nav-group-platform:hover .chevron { transform: rotate(180deg); }
}

.pm-eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9aa4b5;
}

/* Column 1: intro */
.pm-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 24px;
  border-right: 1px solid #f0f2f7;
}
.pm-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 12px;
}
.pm-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pm-logo img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1); /* white mark on the blue tile */
}
.pm-brand-name {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 800;
  color: #0e1726;
}
.pm-blurb {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: #4a5568;
}
.pm-tour-link {
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}
.pm-tour-link:hover { text-decoration: underline; }

/* Column 2: products */
.pm-products { padding: 28px; }
.pm-product {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
}
.pm-product:hover,
.pm-product:focus-visible,
.pm-product[aria-current="page"] { background: #f4f7ff; }
.pm-product[aria-current="page"] strong { color: var(--blue); }
.pm-tile {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #eaf1ff;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pm-tile svg { width: 22px; height: 22px; display: block; }
.pm-product-copy { display: flex; flex-direction: column; min-width: 0; }
.pm-product-copy strong {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: #0e1726;
}
.pm-product-copy small {
  font-size: 13.5px;
  color: #677183;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Column 3: "More" rail */
.pm-rail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 28px 22px;
  background: #f7f9fc;
}
.pm-rail .pm-eyebrow { margin-bottom: 0; }
.pm-rail a {
  font-size: 14.5px;
  font-weight: 600;
  color: #1a2433;
  text-decoration: none;
}
.pm-rail a:hover { color: var(--blue); }

/* Mobile hamburger (hidden on desktop) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2.5px;
  width: 100%;
  border-radius: 2px;
  background: var(--black);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Keyboard focus visibility */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 3px solid rgba(0,87,255,.55);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Hero ---------------------------------------------------------- */
.hero {
  /* Matches the Figma hero background exactly: flat #242E8A for the top 80px,
     then a vertical fade to #6069BC at the 781px frame height */
  background: linear-gradient(180deg, #242E8A 0px, #242E8A 80px, #6069BC 781px);
  color: #fff;
  overflow: hidden;
}
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 560px) 1fr;
  gap: 32px;
  align-items: center;
  /* visual bleeds to the right edge up to --maxw, then the content column centres */
  padding: 32px max(0px, calc((100vw - var(--maxw)) / 2)) 0
           max(clamp(48px, 6.5vw, 104px), calc((100vw - var(--maxw)) / 2));
}
.hero-content { max-width: 560px; padding-bottom: 70px; }
.hero h1 {
  font-size: 54px;
  line-height: 1.08;
  letter-spacing: -1.5px;
  font-weight: 700;
  margin: 0 0 22px;
}
.hero-sub {
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255,255,255,.85);
  margin: 0 0 34px;
  max-width: 490px;
}
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
/* Keyword badge tucked after the CTAs; the hero's existing bottom padding
   absorbs it, so it adds no height above the heading */
.hero-badge {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  line-height: normal;
  padding: 8px 16px;
  border-radius: 20px;
  margin-top: 30px;
}
.hero-visual { position: relative; align-self: center; }
.hero-visual img {
  width: 100%;
  max-width: 955px;
  margin-left: auto;
  display: block;
  /* soften the crop's left/top edges into the section gradient */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 50px),
                      linear-gradient(to bottom, transparent 0, #000 50px);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 50px),
              linear-gradient(to bottom, transparent 0, #000 50px);
  mask-composite: intersect;
}

/* ---------- Home header + hero (Figma breakpoint redesign) ----------------- */
/* The home page pilots the new header and hero from the "Home Page - Claude"
   Figma frames (1600 / 1024 / 600 / 375). Rules are scoped to .header-home and
   .home-hero because every other page still uses the legacy header/hero markup
   styled by the blocks above; when the header rolls out site-wide, fold these
   into the base rules and delete the legacy ones. */

.site-header.header-home {
  display: block;
  padding: 0;
  min-height: 0;
  z-index: 400;
  transition: box-shadow .2s ease;
}
.site-header.header-home.scrolled { box-shadow: 0 8px 24px rgba(8, 20, 40, .10); }
.header-home .header-inner {
  max-width: 1600px;
  margin: 0 auto;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 100px;
}
.header-home .logo img { height: clamp(27px, 2.2vw, 35px); }
.header-home .main-nav { gap: clamp(18px, 2vw, 32px); flex-wrap: nowrap; }
.header-home .nav-item {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  padding: 11px 2px;
}
.header-home .nav-drop-toggle {
  font-family: var(--font-head);
  font-size: 16px;
  line-height: 18px;
  gap: 8px;
}
.header-home .chevron { width: 13px; height: 13px; }
.nav-signup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 11px 16px;
  border-radius: 6px;
  background: var(--blue);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.nav-signup:hover { background: var(--blue-hover); }

/* Between 768px and 1023px the bar is too narrow for every link, so About us
   and Support fold into the Resources dropdown instead of the whole nav
   collapsing. Each link exists twice in the markup; only one is ever shown. */
.nav-dropdown .nav-folded { display: none; }

/* Compact header (burger), shown under 768px */
.header-compact { display: none; align-items: center; gap: 24px; }
.burger {
  position: relative;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.burger span {
  position: absolute;
  left: 1px;
  width: 22px;
  height: 1px;
  background: var(--black);
}
.burger span:nth-child(1) { top: 5px; }
.burger span:nth-child(2) { top: 11px; }
.burger span:nth-child(3) { top: 17px; }
.mobile-panel {
  display: none;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  padding: 8px 20px 24px;
  box-shadow: 0 16px 28px rgba(8, 20, 40, .12);
  border-bottom: 1px solid rgba(8, 30, 34, .06);
  max-height: calc(100vh - 72px);
  overflow-y: auto;
}
.mobile-panel.open { display: flex; }
.mobile-panel a {
  padding: 12px 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  color: var(--black);
  text-decoration: none;
}
.mobile-panel a:hover { color: var(--blue); }
.mobile-panel-divider { height: 1px; background: var(--light-grey); margin: 10px 0; flex-shrink: 0; }

@media (max-width: 1399px) {
  .header-home .header-inner { padding-inline: 32px; }
}
@media (max-width: 1023px) {
  .header-home .header-inner { padding-inline: 20px; gap: 16px; }
  /* Tighten the bar so the remaining links still fit on one line */
  .header-home .main-nav { gap: 16px; }
  .header-home .nav-item { font-size: 16px; }
  .header-home .nav-drop-toggle { font-size: 15px; gap: 6px; }
  .header-home .nav-buttons { gap: 16px; }
  .header-home .nav-foldable { display: none; }
  .header-home .nav-dropdown .nav-folded { display: block; }
}
@media (max-width: 767px) {
  .site-header.header-home .main-nav { display: none; }
  .header-home .header-compact { display: flex; }
}
@media (min-width: 768px) {
  .mobile-panel { display: none !important; }
}
@media (max-width: 419px) {
  .header-home .header-compact .nav-signup { display: none; }
}

/* Hero section */
.home-hero {
  background: linear-gradient(0deg, rgb(96,105,188) 0.74%, rgb(36,46,138) 89.22%);
  color: #fff;
  overflow: hidden;
}
/* Feature pages that run the hero straight into the indigo band: land the
   gradient's foot on --indigo so the two don't meet in a visible step. The
   home page and the other feature pages are followed by the light .customers
   strip, where the foot colour doesn't matter. */
.home-hero:has(+ .tools) {
  background: linear-gradient(0deg, var(--indigo) 0.74%, rgb(36,46,138) 89.22%);
}
.home-hero-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.2vw, 36px);
  padding: clamp(28px, 3.2vw, 52px) clamp(20px, 2.6vw, 32px) 0 clamp(20px, 6.2vw, 98px);
}
.home-hero-text {
  flex: 0 1 500px;
  /* Holds the measure at 500px in the stacked layout too, where the flex
     basis gives way to `flex: 1 1 auto` */
  max-width: 500px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: clamp(40px, 4vw, 64px);
  animation: riseIn .6s ease-out both;
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
/* At the top of the micro-copy clamp the pricing line reaches 16px, where it
   needs 529px. Widen the text column there so it stays on one line. */
@media (min-width: 1500px) {
  .home-hero-text { flex-basis: 540px; max-width: 540px; }
}
/* Per-page opt-in for longer titles (whereabouts): keeps the h1 on 3 lines at 64px. */
@media (min-width: 1500px) {
  .home-hero-text--wide { flex-basis: 610px; max-width: 610px; }
}
.home-hero-badge {
  border-radius: 70px;
  background: var(--blue);
  padding: 10px 14px;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
}
.home-hero-stack { display: flex; flex-direction: column; gap: 32px; align-self: stretch; }
.home-hero-heading { display: flex; flex-direction: column; gap: 16px; }
.home-hero h1 {
  margin: 0;
  font-weight: 700;
  font-size: clamp(38px, 4.1vw, 64px);
  line-height: 1.06;
  letter-spacing: -1px;
  color: #fff;
  text-wrap: pretty;
}
.home-hero-sub {
  margin: 0;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.45;
  color: #fff;
  max-width: 560px;
  text-wrap: pretty;
}
.home-hero-ctas { display: flex; gap: 24px; align-items: stretch; max-width: 462px; align-self: stretch; }
.hero-cta {
  flex: 1 1 0;
  display: flex;
  height: 50px;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  padding: 16px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
}
.hero-cta-solid {
  background: #fff;
  color: var(--blue);
  box-shadow: 0px 18px 42px 0px rgb(39,48,140);
}
.hero-cta-solid:hover { transform: translateY(-1px); }
.hero-cta-ghost { box-shadow: inset 0 0 0 1px rgb(255,255,255); color: #fff; }
.hero-cta-ghost:hover { background: rgba(255,255,255,.12); }
.home-hero-micro { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.home-hero-micro p {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 18px;
  color: #fff;
}
.home-hero-micro p a { color: #fff; text-decoration: underline; white-space: nowrap; }
/* The pricing strapline is small print, not body copy, so it is allowed to run
   past the text column's 500px measure rather than wrap. The breakpoint clears
   the longest variant: meeting-rooms' "unlimited room booking from..." needs
   552px, plus 2x20px of hero padding. Below that the viewport is too narrow for
   it at any size, so it wraps as before. Lengthen that string much further and
   this number needs revisiting. */
@media (min-width: 620px) {
  .home-hero-micro { width: max-content; flex-shrink: 0; }
  .home-hero-micro p { white-space: nowrap; }
}
/* Rating row: star graphic + wording. Shared by the new home hero and the
   legacy feature-page heroes, so it lives outside the .home-hero scope. */
.hero-rating { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px; line-height: 18px; }
.hero-stars { display: flex; gap: 3px; align-items: center; flex-shrink: 0; }
.hero-stars img { width: 18px; height: 18px; filter: brightness(0) invert(1); display: block; }
/* Fifth star is half filled: a 50% left-to-right white fill clipped over the
   faded base star */
.star-partial { position: relative; width: 18px; height: 18px; display: block; }
.star-partial > img { position: absolute; inset: 0; opacity: .38; }
.star-clip { position: absolute; left: 0; top: 0; width: 50%; height: 100%; overflow: hidden; display: block; }
/* Beat the global img{max-width:100%}, which would shrink the star to the
   clip's width instead of letting the clip crop a full-size star */
.star-clip img { max-width: none; width: 18px; height: 18px; }

/* Hero visual: a 795x707 layered composition scaled to its column width.
   Child coordinates are in the unscaled 795x707 space; most sit inside
   .stage-layer, offset -4/39 as drawn in Figma. */
.home-hero-visual { flex: 1 1 0; min-width: 0; position: relative; align-self: center; }
/* Feature-page variant: one flat image instead of the home page's layered
   795x707 composition, so it needs no stage or coordinate scaling */
.hero-visual-img {
  width: 100%;
  max-width: 620px;
  height: auto;
  margin: 0 auto;
  display: block;
}
.hero-visual-stage {
  position: relative;
  width: 100%;
  /* Sized so the planner card inside lands at 500px wide */
  max-width: 580px;
  margin: 0 auto;
  /* The box is cropped to the artwork's own bounds inside Figma's 795x707
     frame, so the composition scales as a whole to fill the column -- every
     element keeps its proportions instead of the card stretching. */
  --stage-w: 549;
  --stage-x: -245px;
  aspect-ratio: 549 / 585;
  container-type: inline-size;
  /* Length/length division needs mixed-type calc support; the inline JS
     ResizeObserver sets the same number for browsers without it. */
  --stage-scale: calc(100cqw / (var(--stage-w) * 1px));
}
.hero-visual-stage .stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 795px;
  height: 707px;
  transform-origin: 0 0;
  /* Scale first so the translate is in scaled units and tracks the
     composition at every width. */
  transform: scale(var(--stage-scale)) translate(var(--stage-x), -39px);
}
.stage-layer { position: absolute; left: -4px; top: 24px; width: 798px; height: 734px; }

/* Visual Planner glass card */
/* Figma's geometry, unchanged. The card is made bigger by scaling the whole
   composition (see .hero-visual-stage), not by stretching this box, so every
   proportion inside it is preserved. */
.vp-card {
  position: absolute;
  left: 314px;
  top: 102px;
  width: 472.887px;
  height: 368.674px;
  border-radius: 24px;
  background: rgba(255,255,255,0.7);
  -webkit-backdrop-filter: blur(34px);
  backdrop-filter: blur(34px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 24px 16px;
}
.vp-title { align-self: stretch; font-weight: 600; font-size: 14px; line-height: 18px; text-align: center; color: var(--blue-dark); }
.vp-panel { position: relative; width: 440.887px; height: 300.674px; overflow: hidden; }
.vp-shadow {
  position: absolute;
  left: 128px;
  top: 46px;
  width: 293px;
  height: 252px;
  background: rgb(217,217,217);
  box-shadow: -21.470px 74.330px 65.800px 0px rgba(60,69,158,0.6);
}
.vp-sheet {
  position: absolute;
  inset: 0;
  border-radius: 16.702px;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 10px 41.755px 16.702px 33.404px;
}
.vp-days { display: flex; align-items: flex-end; justify-content: flex-end; gap: 20.877px; height: 27.793px; flex-shrink: 0; }
.vp-days-spacer { width: 68.224px; flex-shrink: 0; }
.vp-day-cells { display: flex; gap: 20.877px; width: 276.627px; flex-shrink: 0; }
.vp-day {
  width: 38.623px;
  flex-shrink: 0;
  border-radius: 1.566px;
  padding: 3.9px 0;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 7.05px;
  color: rgb(188,198,199);
}
.vp-day span { display: block; line-height: 1; }
.vp-day span + span { margin-top: 3px; }
.vp-day.is-today { background: var(--blue); box-shadow: 0px 0px 6.655px 0.783px rgba(0,87,255,0.15); color: #fff; }
.vp-team { padding: 10.439px 0; font-weight: 600; font-size: 8.5px; line-height: 1; color: var(--grey); }
.vp-row { display: flex; align-items: center; gap: 20.877px; border-top: 0.522px solid var(--light-grey); padding: 6.5px 0; }
.vp-person { width: 68.224px; flex-shrink: 0; display: flex; align-items: center; gap: 4.7px; }
.vp-avatar {
  width: 13.3px;
  height: 13.3px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 5.6px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vp-name { font-weight: 400; font-size: 7.5px; line-height: 11px; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-tiles { display: flex; gap: 20.877px; width: 276.627px; flex-shrink: 0; }
.vp-tile { position: relative; width: 38.623px; height: 29.228px; border-radius: 2.088px; flex-shrink: 0; overflow: hidden; }
.vp-office { background: rgb(227,255,171); }
.vp-home { background: rgb(189,250,200); }
.vp-holiday { background: var(--light-grey); }
.vp-empty { background: rgb(247,247,247); }
.vp-chip {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 1px 2px;
  border-radius: 0 1.6px 0 0;
  background: var(--blue);
  font-weight: 600;
  font-size: 5.2px;
  line-height: 1;
  color: #fff;
}
/* Status pictograms inside the tiles; geometry from the Figma tile nodes */
.vp-ico { position: absolute; display: block; left: 50%; transform: translateX(-50%); }
.vp-home .vp-ico,
.vp-holiday .vp-ico { top: 1.43px; width: 27.141px; height: 27.141px; }
.vp-office .vp-ico { top: 2.474px; width: 25.053px; height: 25.053px; }

/* Floor plan variant of the card (features/desk-booking): same glass card and
   shadow, but the sheet holds one inline SVG drawn in the sheet's own 441x301
   units, so it scales with the composition like the planner does */
.fp-sheet { position: absolute; inset: 0; border-radius: 16.702px; background: #fff; overflow: hidden; }
.fp-map { display: block; width: 100%; height: 100%; }

/* Floating pills and app badges, hidden under 1024px */
.hero-pill {
  position: absolute;
  border-radius: 120px;
  background: rgba(255,255,255,0.89);
  -webkit-backdrop-filter: blur(11px);
  backdrop-filter: blur(11px);
  display: flex;
  gap: 10px;
  padding: 4px 24px 4px 4px;
  justify-content: center;
  align-items: center;
}
.hero-pill-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0px 17.991px 26.987px 1.499px rgba(0,87,255,0.15);
  flex-shrink: 0;
  display: block;
}
.hero-pill-avatar img { width: 64px; height: 64px; object-fit: cover; display: block; }
.hero-pill-label { font-weight: 600; font-size: 14px; line-height: 18px; white-space: nowrap; color: var(--grey); }
.hero-pill-claire { left: 249px; top: 0; width: 278px; height: 72px; animation: floatA 7s ease-in-out infinite; }
.hero-pill-adrian { left: 452px; top: 513px; width: 288px; height: 72px; animation: floatB 8.5s ease-in-out infinite; }
.hero-app { position: absolute; background: #fff; display: flex; justify-content: center; align-items: center; }
.hero-app img { display: block; }
.hero-app-teams { left: 707px; top: 48px; width: 91px; height: 91px; border-radius: 45.5px; padding: 4.266px; animation: floatC 9s ease-in-out infinite; }
.hero-app-teams img { width: 45.5px; height: 45.5px; }
.hero-app-outlook { left: 643px; top: 27px; width: 64px; height: 64px; border-radius: 32px; animation: floatB 7.5s ease-in-out infinite; }
.hero-app-outlook img { width: 32px; height: 32px; }
.hero-app-google { left: 382px; top: 481px; width: 59px; height: 59px; border-radius: 29.5px; padding: 2.766px; animation: floatA 8s ease-in-out infinite; }
.hero-app-google img { width: 29.5px; height: 29.5px; }
@keyframes floatA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes floatB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@keyframes floatC { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Play button: coordinates in the outer 795x707 space */
.hero-play {
  position: absolute;
  left: 399px;
  top: 336px;
  width: 64px;
  height: 64px;
  border-radius: 60px;
  border: none;
  background: rgba(30,225,255,0.9);
  box-shadow: 0px 14px 17px 0px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  cursor: pointer;
}
.hero-play:hover { background: rgb(30,225,255); }
.hero-play svg { width: 32px; height: 32px; display: block; }

@media (max-width: 1023px) {
  /* Single column, text first (deliberate: Figma stacks visual-first) */
  /* Symmetric inline padding: the two-column layout's deep left inset would
     otherwise push the centred content off the viewport's true centre */
  .home-hero-inner { flex-direction: column; align-items: stretch; padding-inline: clamp(20px, 2.6vw, 32px); }
  /* Centred to match the visual below it, which is already margin: 0 auto.
     Left-aligned, the 500px-capped column hugged the padding edge and left a
     wide gap on the right. */
  .home-hero-text {
    flex: 1 1 auto;
    margin-inline: auto;
    align-items: center;
    text-align: center;
  }
  .home-hero-stack { align-items: center; }
  .home-hero-sub { margin-inline: auto; }
  .home-hero-ctas { align-self: center; justify-content: center; }
  .home-hero-micro { align-items: center; }
  .hero-rating { justify-content: center; }
  /* Lifts the artwork off the bottom edge of the gradient band */
  .home-hero-visual { flex: 1 1 auto; align-self: stretch; padding-bottom: clamp(32px, 5vw, 56px); }
  .hero-floats { display: none; }
  /* With the floats hidden the artwork is just the planner card and play
     button (x=310-783, y=141-510), so the box crops tighter still */
  .hero-visual-stage {
    --stage-w: 473;
    --stage-x: -310px;
    aspect-ratio: 473 / 369;
    max-width: 500px;
  }
  .hero-visual-stage .stage { transform: scale(var(--stage-scale)) translate(var(--stage-x), -141px); }
}
@media (max-width: 419px) {
  .home-hero-ctas { flex-direction: column; }
}

/* Video lightbox */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(8, 20, 40, .78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 64px);
}
.video-lightbox[hidden] { display: none; }
.video-lightbox-box {
  position: relative;
  width: 100%;
  max-width: 1040px;
  aspect-ratio: 16 / 9;
  background: #0b1220;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The player is injected on open and torn out again on close, so the video
   stops rather than carrying on behind the overlay */
.video-lightbox-box iframe,
.video-lightbox-box video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}
.video-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.video-close:hover { background: rgba(255, 255, 255, .26); }

/* Play badge sitting over a flat hero image (feature pages). The home page
   keeps its own .hero-play, which is positioned in the layered stage's
   coordinate space and so cannot share these rules. */
.hero-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 60px;
  background: rgba(30, 225, 255, .9);
  box-shadow: 0 14px 17px rgba(0, 0, 0, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.hero-video-play:hover { background: rgb(30, 225, 255); transform: translate(-50%, -50%) scale(1.06); }
.hero-video-play svg { width: 32px; height: 32px; display: block; }

/* Inline 16:9 embed for guide-style pages, which have no hero artwork to
   hang a play badge on */
.guide-video {
  margin: 24px 0 8px;
  border-radius: 14px;
  overflow: hidden;
  background: #0b1220;
  box-shadow: 0 10px 30px rgba(8, 20, 40, .10);
}
.guide-video iframe,
.guide-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}
.guide-video-caption {
  font-size: 14px;
  color: var(--grey-body);
  margin: 10px 0 0;
}

/* ---------- Video card grid (quick start videos) -------------------------- */
.video-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.video-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(8, 30, 34, .07);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(8, 20, 40, .05);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(8, 20, 40, .10);
  border-color: rgba(0, 87, 255, .28);
}
.video-card-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: #0b1220;
  cursor: pointer;
  aspect-ratio: 16 / 9;
}
.video-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-card-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(30, 225, 255, .92);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .28);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .16s ease, transform .16s ease;
}
.video-card-thumb:hover .video-card-play { background: rgb(30, 225, 255); transform: translate(-50%, -50%) scale(1.08); }
.video-card-play svg { width: 24px; height: 24px; display: block; }
/* Cards whose video has not been shot yet: a flat panel in place of the thumb */
.video-card-soon {
  aspect-ratio: 16 / 9;
  background: var(--vlight-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 13px var(--font-head);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--grey-body);
}
.video-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 26px 22px;
}
.video-card-body h3 {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.3px;
  line-height: 1.25;
  margin: 0 0 8px;
}
.video-card-body p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--grey-body);
  margin: 0 0 20px;
}
.video-card-body .support-more {
  text-decoration: none;
  align-self: flex-start;
}
.video-card-body .support-more:hover .arw { transform: translateX(5px); }

/* ---------- Customers ----------------------------------------------------- */
.customers {
  background: var(--vlight-grey);
  text-align: center;
  padding: 20px var(--pad);
}
.customers-tagline {
  color: var(--blue-dark);
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 26px;
}
.customers-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 38px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.customers-logos img { display: block; }

/* ---------- Section heading (shared) ------------------------------------- */
.section-heading {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -1px;
  margin: 0;
}

/* ---------- Beautifully Simple Tools ------------------------------------- */
.tools {
  background: var(--indigo);
  color: #fff;
  padding: 84px var(--pad);
}
.tools .section-heading {
  max-width: 820px;
  margin: 0 auto 54px;
  text-align: center;          /* centred heading, matching team-today.com */
  box-sizing: border-box;
}
.tools-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
/* Bare wrapper matching team-today.com's .n-image: the card visuals carry
   their own baked-in panel + shadow, so no container background is needed */
.tool-card-visual {
  margin-bottom: 16px;
}
.tool-card-visual img { width: 100%; height: auto; display: block; }
.tool-card h3 {                    /* matches team-today.com .n-display-small */
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  margin: 0 0 14px;
}
.tool-card p {                     /* matches team-today.com .n-body-large */
  font-size: 22px;
  line-height: 32px;
  color: #fff;
  margin: 0;
}

/* "It's easy to get started" variant (Deskbooking landing): the step-card
   crops already include their white panels, so the frosted box is removed */
.steps .tool-card-visual {
  background: none;
  padding: 0;
  height: auto;
  margin-bottom: 18px;
}
.steps .tool-card-visual img { width: 100%; height: auto; }
.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #20CC6F;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 18px;
}

/* ---------- Feature rows -------------------------------------------------- */
.features {
  background: linear-gradient(180deg, #EDEEF7 0%, #CDD1EA 100%);
  padding: 74px var(--pad) 90px;
}
.features .section-heading {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 56px;
  color: var(--black);
}
.feature-row {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 64px 0;
}
.feature-row-reverse .feature-visual { order: -1; }
.feature-text h3 {
  font-family: var(--font-head);
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -1px;
  font-weight: 700;
  margin: 0 0 20px;
  max-width: 460px;
}
.feature-text p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--grey-body);
  margin: 0 0 30px;
  max-width: 470px;
}
.feature-visual img { width: 100%; display: block; }
.feature-divider {
  max-width: 1140px;
  margin: 0 auto;
  border: none;
  border-top: 1px solid rgba(28,38,132,.12);
}

/* Framed variant: for rows whose visuals were exported flattened onto the
   indigo band. On the light band that backing would read as a raw rectangle, so
   it is rounded and shadowed into a deliberate panel instead. Re-export the
   artwork with a transparent background and this can go. */
.features-framed .feature-visual img {
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(28, 38, 132, .18);
}

/* Dark variant: feature rows on the indigo band (Whereabouts landing).
   Follows the .tools section with the same background, so they read as one band. */
.features-dark {
  background: var(--indigo);
  padding: 10px var(--pad) 100px;
}
.features-dark .feature-row { max-width: var(--maxw); gap: 48px; }
/* Figma uses Heading/x-lg (56px) + Body/x-lg (22px) here; scaled down slightly
   because Poppins/Mulish run wider than Soleil/Proxima Nova */
.features-dark .feature-text h3 {
  color: #fff;
  max-width: 640px;
  font-size: 48px;
  line-height: 1.12;
}
.features-dark .feature-text p {
  color: rgba(255,255,255,.88);
  max-width: 660px;
  font-size: 19px;
  line-height: 1.6;
}

/* ---------- About Us ------------------------------------------------------ */
/* Merged story hero: eyebrow + headline + narrative + stat strip, visual with
   overlapping est-2021 badge on the right */
.au-hero { background: #fff; padding: 72px var(--pad) 0; }
.au-hero-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.au-hero-copy, .au-hero-visual { min-width: 0; }
.au-eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0057FF;
}
.au-hero-copy h1 {
  margin: 0 0 22px;
  font-family: var(--font-head);
  font-size: 48px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1px;
  color: #0e1726;
}
.au-hero-copy h1 span { color: #0057FF; }
.au-hero-para {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.65;
  color: #4a5568;
}
.au-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid #eef1f6;
}
.au-stat-value {
  display: block;
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  color: #0e1726;
}
.au-stat-label { display: block; font-size: 14px; color: #677183; }
.au-hero-visual { position: relative; }
.au-hero-img { width: 100%; display: block; }
.au-hero-badge {
  position: absolute;
  bottom: -24px;
  right: -8px;
  width: 150px;
  filter: drop-shadow(0 12px 24px rgba(14, 23, 38, .18));
}

/* Our journey: single vertical timeline directly after the hero */
.tl-journey {
  max-width: 1280px;
  margin: 88px auto 0;
  padding: 0 var(--pad) 96px;
}
.tl-head { margin: 0 0 40px; }
.tl-head h2 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.5px;
  color: #0e1726;
}
.tl-track { position: relative; padding-left: 44px; }
.tl-track::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 11px;
  width: 2px;
  background: #e3e9f2;
}
.tl-item { position: relative; padding-bottom: 36px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute;
  top: 2px;
  left: -40px;
  box-sizing: content-box;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #b9c6da;
}
.tl-year {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: #9aa4b5;
}
.tl-item h3 {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.3px;
  line-height: 1.3;
  color: #0e1726;
}
.tl-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #4a5568;
  max-width: 600px;
}
/* 2021 launch milestone: bigger blue dot, EST. 2021 pill, card-wrapped copy */
.tl-item-2021 .tl-dot {
  top: 0;
  left: -42px;
  width: 14px;
  height: 14px;
  background: #0057FF;
  border-color: #cfdfff;
}
.tl-est {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #0057FF;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  vertical-align: middle;
}
.tl-card {
  background: #f2f6ff;
  border: 1px solid #dbe6ff;
  border-radius: 14px;
  padding: 22px 26px;
  max-width: 640px;
}

@media (prefers-reduced-motion: no-preference) {
  .tl-item { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
  .tl-item.in { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .au-hero { padding-top: 52px; }
  .au-hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .au-hero-copy h1 { font-size: 38px; }
  .au-hero-visual { max-width: 560px; }
  .tl-journey { margin-top: 64px; padding-bottom: 72px; }
  .tl-head h2 { font-size: 28px; }
}

@media (max-width: 560px) {
  .au-hero { padding-left: 20px; padding-right: 20px; }
  .au-hero-copy h1 { font-size: 32px; }
  .au-hero-stats { gap: 24px; }
  .tl-journey { padding-left: 20px; padding-right: 20px; }
}

/* Founders + story rows share one continuous gradient band (from Figma) */
.about-story {
  background: linear-gradient(180deg, #EDEEF7 0%, #AEB3DA 100%);
  padding: 64px var(--pad) 90px;
}
.about-story .section-heading { max-width: var(--maxw); margin: 0 auto 32px; }
.founders-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.founder-card {
  background: #fff;
  border-radius: 24px;
  padding: 32px 48px 48px;
  min-width: 0;
}
.founder-photo-wrap {
  width: 232px;
  height: 232px;
  border-radius: 50%;
  margin-bottom: 32px;
  padding: 6px;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(0,87,255,.16), rgba(81,91,176,.10) 55%, rgba(81,91,176,0) 100%);
  box-shadow: 0 18px 40px rgba(28,38,132,.18), inset 0 0 0 1px rgba(28,38,132,.06);
  display: grid;
  place-items: center;
}
.founder-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
  background: #EDEFF7;
  box-shadow: 0 0 0 5px #fff, 0 8px 20px rgba(8,20,40,.16);
  image-rendering: -webkit-optimize-contrast;
}
.founder-card h3 {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.4px;
  margin: 0 0 4px;
}
.founder-role { font-size: 19px; color: var(--grey-body); margin: 0 0 18px; }
.founder-bio { font-size: 18px; line-height: 1.6; color: var(--grey-body); margin: 0 0 22px; max-width: 470px; }
.founder-li img { width: 32px; height: 32px; filter: invert(1); display: block; }

/* Story rows reuse .feature-row inside the gradient band */
.about-story .feature-row { padding: 72px 0; }
.about-story .feature-visual img {
  max-width: 676px;
  margin: 0 auto;
  /* fade all four edges so the crops' baked gradient blends into the band */
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent),
    linear-gradient(to bottom, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent),
    linear-gradient(to bottom, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-composite: intersect;
}
.story-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 30px;
  margin-top: 34px;
  max-width: 560px;
}
.story-logos img { display: block; }
/* ---------- Integrations -------------------------------------------------- */
.integrations {
  background: #fff;
  padding: 82px var(--pad);
}
.integrations-heading { text-align: center; margin-bottom: 40px; }
.integrations-heading h2 {
  font-family: var(--font-head);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 24px;
}
.integration-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
}
.integration-logos img { height: 38px; width: auto; }

.promo-card {
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--indigo);
  border-radius: 24px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 48px;
  padding: 52px;
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.promo-visual img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 24px 50px rgba(8,20,40,.35);
  display: block;
}
.promo-text h3 {
  font-family: var(--font-head);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.06;
  margin: 0 0 20px;
}
.promo-text p {
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255,255,255,.86);
  margin: 0 0 30px;
}

.carousel-controls {
  max-width: var(--maxw);
  margin: 26px auto 0;
  display: flex;
  align-items: center;
  gap: 16px;
}
.carousel-arrows { display: flex; gap: 12px; }
.carousel-arrow {
  width: 54px;
  height: 46px;
  background: #0B1533;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity .15s;
}
.carousel-arrow:hover { opacity: .85; }
.carousel-arrow img { width: 16px; height: 16px; }
.carousel-arrow-next img { transform: rotate(180deg); }
.carousel-dots { flex: 1; display: flex; justify-content: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #C7C9E0; border: 0; padding: 0; cursor: pointer; }
.dot.active { background: #6067B4; }

/* Feature grid cards */
.int-cards-row {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 48px;
  padding-top: 66px;
}
.int-card-visual {
  height: 176px;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 22px;
}
.int-card h3 {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.2;
  margin: 0 0 14px;
}
.int-card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--grey-body);
  margin: 0;
}

/* UK card */
.uk-circle-bg {
  position: absolute;
  left: 8px; bottom: 4px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,87,255,.10) 0%, rgba(0,87,255,0) 70%);
}
.uk-flag { width: 150px; height: auto; border-radius: 10px; box-shadow: 0 10px 24px rgba(8,20,40,.14); }
.frosted-circle {
  position: absolute;
  bottom: 26px; left: 35px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px rgba(8,20,40,.12);
  display: flex; align-items: center; justify-content: center;
}
.frosted-circle img { width: 44px; height: 44px; }

/* GDPR card */
.gdpr-visual { }
.gdpr-stars { width: 150px; height: auto; }
.gdpr-padlock {
  position: absolute;
  bottom: 26px; left: 35px;
  width: 80px; height: 80px;
  padding: 18px;
  box-sizing: border-box;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px rgba(8,20,40,.12);
}

/* Languages card */
.int-card-tight .int-card-visual { justify-content: flex-start; }
.lang-panel { display: flex; align-items: center; gap: 20px; margin-top: 40px; }
.lang-panel img { width: 82px; height: 56px; object-fit: cover; border-radius: 8px; box-shadow: 0 8px 18px rgba(8,20,40,.12); }
.lang-photo-circle {
  position: absolute;
  top: calc(50% - 72px); left: 97px;
  width: 92px; height: 92px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 10px 24px rgba(8,20,40,.18);
}
.lang-photo-circle img { width: 100%; height: 100%; object-fit: cover; }

/* Reporting card */
.reporting-visual { justify-content: flex-start; }
.reporting-donut { width: 150px; height: auto; }
.reporting-stat {
  position: absolute;
  left: 0; top: 0;
  width: 150px; height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
}
.reporting-stat img { width: 26px; height: 24px; margin-bottom: 3px; }
.stat-number {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 30px;
  color: var(--black);
  margin: 0;
  line-height: 1;
}
.stat-number span { font-size: 16px; }
.stat-label { font-size: 11px; color: var(--grey); margin: 2px 0 0; }
.stat-bar { display: none; }

/* Interactive maps card */
.maps-visual { align-items: center; }
.desk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 300px;
}
.desk {
  background: #EEF1F6;
  border: 1.5px solid #E1E6EE;
  border-radius: 8px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.desk-selected { border-color: var(--blue); border-width: 2px; }
.desk-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #8A93A5;
  color: #fff;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.desk-avatar-blue { background: var(--blue); }
.desk-label { font-size: 11px; color: #97A0AD; }
/* Desk hover tooltip (Figma "Desk Hover"): sits just above the cursor, whose
   tip rests on the selected RG desk in the first column of the second row. */
.maps-tooltip {
  position: absolute;
  left: -40px;
  bottom: calc(100% - 104px);
  background: #1C2684;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 10px 7px rgba(0,0,0,.25);
  z-index: 3;
}
.maps-tooltip p { margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 18px; color: #FAFAFA; white-space: nowrap; }
.tt-strong { font-weight: 600; }
/* The asset is an upright arrow; rotating it 45deg anticlockwise gives the
   classic pointer, tip at the element's top-left corner. */
.maps-cursor {
  position: absolute;
  /* tip lands at (60px, 115px): the rotated tip sits 9px right of and 9px
     above the element's top-left corner */
  left: 51px; top: 124px;
  width: 26px; height: 44px;
  transform: rotate(-45deg);
  transform-origin: top left;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 4px 6px rgba(0,0,0,.3));
  z-index: 4;
}

/* Scale card */
.scale-visual { flex-direction: column; align-items: center; justify-content: center; }
.scale-visual .scale-number {
  font-family: var(--font-head);
  font-size: 64px;
  font-weight: 800;
  color: #C4C8E6;
  margin: 0 0 -6px;
  line-height: 1;
}
.scale-building { width: 150px; height: 118px; object-fit: contain; }

/* ---------- Reviews ------------------------------------------------------- */
.reviews {
  background: var(--vlight-grey);
  padding: 72px var(--pad) 96px;
}
.reviews-heading { text-align: center; margin-bottom: 50px; }
.reviews-ms-logo { width: 34px; height: 34px; margin: 0 auto 20px; display: block; }
.reviews-heading h2 {
  font-family: var(--font-head);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.5px;
  margin: 0 0 12px;
}
.reviews-sub { font-size: 22px; font-weight: 700; color: var(--black); margin: 0 0 6px; }
.reviews-link { font-size: 14px; color: var(--grey); margin: 0; font-weight: 600; }
.reviews-link a { color: var(--blue); }

.reviews-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: start;
}
.review-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 32px;
}
.review-card:nth-child(2) { transform: translateY(-18px); }
.stars { display: flex; gap: 4px; margin-bottom: 18px; }
.stars img { width: 22px; height: 22px; }
.review-card h3 {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 18px;
}
.reviewer { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-weight: 600; font-size: 15px; }
.review-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--blue-dark);
  color: #fff;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.review-body { font-size: 14px; line-height: 1.65; color: var(--grey-body); margin: 0 0 24px; }
.review-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #8A93A5; }
.review-meta img { width: 17px; height: 17px; }

/* ---------- Footer -------------------------------------------------------- */
.site-footer {
  background: var(--blue-dark);
  color: #fff;
  padding: 66px var(--pad) 40px;
}
.footer-columns {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 130px 1.7fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-logo img { width: 42px; height: 38px; object-fit: contain; object-position: left top; }
.footer-col h2 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 22px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 15px; }
.footer-col a { color: #AEB4E0; text-decoration: none; font-size: 15px; }
.footer-col a:hover { color: #fff; }
.footer-sub-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.footer-heading-gap { margin-top: 32px; }

.footer-bottom {
  max-width: var(--maxw);
  margin: 54px auto 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
.footer-bottom img { width: 34px; height: 34px; }
.footer-bottom p { color: #AEB4E0; font-size: 14px; margin: 0; }

/* ---------- Platform tour ------------------------------------------------- */
.tour-hero {
  background: linear-gradient(180deg, #242E8A 0px, #242E8A 80px, #6069BC 520px);
  color: #fff;
  text-align: center;
  padding: 72px var(--pad) 56px;
}
.tour-hero h1 {
  font-family: var(--font-head);
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -1.2px;
  margin: 0 0 16px;
}
.tour-hero p {
  font-size: 20px;
  color: rgba(255,255,255,.85);
  max-width: 620px;
  margin: 0 auto;
}

.tour {
  background: var(--indigo);
  padding: 56px var(--pad) 96px;
  color: #fff;
}
.tour-shell {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 56px;
  align-items: start;
}

/* Step rail */
.tour-rail { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 6px; }
.tour-rail button {
  display: flex;
  align-items: center;
  gap: 14px;
  background: none;
  border: none;
  color: rgba(255,255,255,.72);
  font: 600 16px/1.2 var(--font-head);
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s;
}
.tour-rail button:hover { background: rgba(255,255,255,.08); color: #fff; }
.tour-rail button.active { background: rgba(255,255,255,.14); color: #fff; }
.tour-rail .n {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.tour-rail button.active .n { background: var(--blue); border-color: var(--blue); }
.tour-rail button.done .n { background: #20CC6F; border-color: #20CC6F; }

/* Stage */
.tour-step { display: none; }
.tour-step.active { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.tour-step-copy .kicker {
  color: #9fd0ff;
  font: 700 14px/1 var(--font-head);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0 0 14px;
}
.tour-step-copy h2 {
  font-family: var(--font-head);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -.8px;
  line-height: 1.12;
  margin: 0 0 16px;
}
.tour-step-copy p { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.88); margin: 0 0 22px; }
.tour-bullets { list-style: none; margin: 0 0 28px; padding: 0; }
.tour-bullets li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  font-size: 17px;
}
.tour-bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #20CC6F url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.5 8.5l3 3 6-6.5" stroke="white" stroke-width="2.2" fill="none" stroke-linecap="round"/></svg>') center/13px no-repeat;
}
.tour-step-visual img { width: 100%; display: block; }
.tour-more { font-weight: 700; color: #9fd0ff; text-decoration: none; font-size: 16px; }
.tour-more:hover { color: #fff; }

/* Controls */
.tour-controls {
  max-width: var(--maxw);
  margin: 44px auto 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}
.tour-progress { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
.tour-progress span { display: block; height: 100%; background: #20CC6F; width: 0; transition: width .25s ease; border-radius: 3px; }
.tour-btn {
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.4);
  color: #fff;
  font: 600 16px var(--font-head);
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
}
.tour-btn:hover:not(:disabled) { background: rgba(255,255,255,.22); }
.tour-btn:disabled { opacity: .4; cursor: default; }
.tour-btn.primary { background: var(--blue); border-color: var(--blue); }
.tour-btn.primary:hover { background: var(--blue-hover); }

/* Closing CTA */
.tour-cta { background: #fff; text-align: center; padding: 84px var(--pad); }
.tour-cta h2 {
  font-family: var(--font-head);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.8px;
  margin: 0 0 14px;
}
.tour-cta p { font-size: 19px; color: var(--grey-body); margin: 0 0 32px; }
.tour-cta .hero-buttons { justify-content: center; }

@media (max-width: 1080px) {
  .tour-shell { grid-template-columns: 1fr; gap: 32px; }
  .tour-rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .tour-rail button { padding: 9px 12px; }
  .tour-rail button .lbl { font-size: 13px; }
}
@media (max-width: 900px) {
  .tour-step.active { grid-template-columns: 1fr; gap: 28px; }
  .tour-hero h1 { font-size: 38px; }
}

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --pad: 32px; }
  .hero h1 { font-size: 48px; }
  .section-heading, .integrations-heading h2 { font-size: 36px; }
  .feature-text h3, .promo-text h3 { font-size: 32px; }
  .nav-item { font-size: 15px; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 32px; padding: 32px 32px 0; }
  .hero-content { max-width: 640px; }
  .hero-sub { max-width: 560px; }
  .int-cards-row,
  .reviews-grid { grid-template-columns: 1fr; gap: 40px; }
  .founders-grid { grid-template-columns: 1fr; gap: 28px; }
  .promo-card { grid-template-columns: 1fr; }
  .promo-visual { order: -1; }
  .review-card:nth-child(2) { transform: none; }
  .footer-columns { grid-template-columns: 1fr 1fr; }
  .footer-logo { grid-column: 1 / -1; }
  .tools .section-heading { padding-right: 0; }

  /* Collapse nav into a toggleable dropdown */
  .nav-toggle { display: flex; }
  .main-nav {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: #fff;
    padding: 16px var(--pad) 24px;
    box-shadow: 0 16px 28px rgba(8,20,40,.12);
    border-bottom: 1px solid rgba(8,30,34,.06);
  }
  .main-nav.open { display: flex; }
  .nav-item { padding: 10px 0; font-size: 17px; }
  .nav-buttons { margin: 12px 0 0; width: 100%; }
  .nav-buttons .btn { flex: 1; }

  /* Features dropdown becomes an inline accordion inside the mobile menu */
  .nav-group { width: 100%; }
  .nav-dropdown {
    position: static;
    min-width: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 6px 16px;
  }
  .nav-dropdown::before { display: none; }
  .nav-dropdown a { padding: 8px 0; }

  /* Platform menu collapses to a plain product list on mobile */
  .platform-menu {
    position: static;
    display: none;
    width: auto;
    margin: 0;
    padding: 0 0 6px 16px;
    box-shadow: none;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav-group.open .platform-menu { display: block; }
  .pm-intro,
  .pm-rail,
  .pm-products .pm-eyebrow { display: none; }
  .pm-products { padding: 0; }
  .pm-product { padding: 8px 0; gap: 10px; border-radius: 0; }
  .pm-product:hover,
  .pm-product:focus-visible,
  .pm-product[aria-current="page"] { background: none; }
  .pm-tile { width: 30px; height: 30px; }
  .pm-tile svg { width: 18px; height: 18px; }
  .pm-product-copy small { display: none; }
}

/* The block above collapses .main-nav into the legacy mobile dropdown from
   900px, which is the right behaviour for every page still on the old header.
   The home header keeps its horizontal bar down to 768px instead, so undo that
   collapse for .header-home across the 768-1023 band. Placed after the legacy
   rules so source order backs up the specificity. */
@media (min-width: 768px) and (max-width: 1023px) {
  .header-home .nav-toggle { display: none; }
  .header-home .main-nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    background: none;
    padding: 0;
    box-shadow: none;
    border-bottom: none;
  }
  .header-home .nav-item { padding: 11px 2px; font-size: 16px; }
  .header-home .nav-group { width: auto; }
  .header-home .nav-buttons { margin: 0 0 0 auto; width: auto; gap: 16px; }
  .header-home .nav-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: -18px;
    min-width: 220px;
    box-shadow: 0 18px 40px rgba(8, 20, 40, .16);
    border-radius: 12px;
    padding: 10px;
  }
  .header-home .nav-dropdown::before { display: block; }
  .header-home .nav-dropdown a { padding: 10px 12px; }
  /* No room to centre the 840px panel under its trigger down here, so pin it
     to the header's own inset instead. Fixed rather than absolute so left/right
     resolve against the viewport and not the nav group; the header is sticky,
     so the panel tracks it either way. JS leaves the inline left/margin-left
     cleared below 1024px. */
  .header-home .platform-menu {
    position: fixed;
    top: 72px;
    left: 20px;
    right: 20px;
    display: grid;
    /* minmax(0,1fr): the bare 1fr floors at min-content, which pushes the
       "More" rail out of the panel once the viewport drops under ~800px */
    grid-template-columns: 210px minmax(0, 1fr) 170px;
    width: auto;
    max-width: 840px;
    margin-left: 0;
    padding: 0;
    box-shadow: 0 24px 64px rgba(14, 23, 38, .28);
    border-radius: 14px;
    /* The legacy block force-shows the panel because its accordion relies on
       display alone. Restore the hidden-by-default state or it hangs open. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .15s ease-out .15s, transform .15s ease-out .15s, visibility 0s linear .3s;
  }
  /* display lives here rather than on .platform-menu above because the legacy
     `.nav-group.open .platform-menu { display: block }` outranks a two-class
     selector and would otherwise stack the columns */
  .header-home .nav-group.open .platform-menu {
    display: grid;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .header-home .pm-product:hover,
  .header-home .pm-product:focus-visible,
  .header-home .pm-product[aria-current="page"] { background: #f4f7ff; }
  .header-home .pm-intro,
  .header-home .pm-rail { display: flex; }
  .header-home .pm-products { padding: 28px; }
  .header-home .pm-products .pm-eyebrow { display: block; }
  .header-home .pm-product { padding: 10px 12px; gap: 14px; border-radius: 10px; }
  .header-home .pm-tile { width: 38px; height: 38px; }
  .header-home .pm-tile svg { width: 22px; height: 22px; }
  .header-home .pm-product-copy small { display: block; }
}
/* Hover-to-open in the same band. Split out because the hover condition has to
   be combined into the query, not nested inside it. */
@media (min-width: 768px) and (max-width: 1023px) and (hover: hover) {
  .header-home .nav-group-platform:hover .platform-menu {
    display: grid;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
}

/* .tools-grid and .feature-row hold their multi-column layout down to 768px
   instead of collapsing at 900px with the rest of that block. The columns get
   narrow in the 768-900 band, so the type and gaps tighten to suit. */
@media (min-width: 768px) and (max-width: 900px) {
  .tools-grid { gap: 24px; }
  .tool-card h3 { font-size: 19px; line-height: 26px; margin-bottom: 10px; }
  .tool-card p { font-size: 16px; line-height: 24px; }
  .feature-row { gap: 36px; padding: 44px 0; }
  .feature-text h3 { font-size: 28px; letter-spacing: -.5px; margin-bottom: 14px; }
  .feature-text p { font-size: 16px; margin-bottom: 22px; }
}
@media (max-width: 767px) {
  .tools-grid { grid-template-columns: 1fr; gap: 40px; }
  .feature-row,
  .feature-row-reverse { grid-template-columns: 1fr; gap: 28px; }
  .feature-row-reverse .feature-visual { order: 0; }
}

@media (max-width: 560px) {
  :root { --pad: 20px; }
  .hero { padding-left: 20px; padding-right: 20px; }
  .hero h1 { font-size: 38px; }
  .section-heading, .integrations-heading h2, .reviews-heading h2 { font-size: 30px; }
  .feature-text h3, .promo-text h3 { font-size: 28px; }
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .btn-stack .btn { align-self: stretch; }
  .footer-columns { grid-template-columns: 1fr; }
  .footer-sub-cols { grid-template-columns: 1fr; }
  .integration-logos { flex-wrap: wrap; }
  .founder-card { padding: 28px 24px 40px; }
}

/* ---------- Support ------------------------------------------------------- */
/* Compact centred hero: reuses the .tour-hero gradient token */
.support-hero { padding-bottom: 52px; }

.support {
  background: var(--vlight-grey);
  padding: 66px var(--pad) 40px;
}
.support-intro {
  max-width: var(--maxw);
  margin: 0 auto 38px;
}
.support-intro h2 {
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.5px;
  margin: 0 0 12px;
}
.support-intro p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--grey-body);
  margin: 0;
  max-width: 640px;
}

.support-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.support-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(8, 30, 34, .07);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(8, 20, 40, .05);
  padding: 30px 30px 26px;
  text-decoration: none;
  color: inherit;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.support-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(8, 20, 40, .10);
  border-color: rgba(0, 87, 255, .28);
}
.support-card h3 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.3px;
  line-height: 1.25;
  margin: 0 0 10px;
  transition: color .16s ease;
}
.support-card:hover h3 { color: var(--blue); }
.support-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--grey-body);
  margin: 0 0 22px;
}
.support-more {
  margin-top: auto;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--blue);
}
.support-more .arw {
  display: inline-block;
  transition: transform .16s ease;
}
.support-card:hover .support-more .arw { transform: translateX(5px); }

/* Contact strip */
.support-contact {
  max-width: var(--maxw);
  margin: 48px auto 0;
  background: var(--indigo);
  border-radius: 20px;
  padding: 42px 48px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-lg);
}
.support-contact-text h3 {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.4px;
  margin: 0 0 8px;
}
.support-contact-text p {
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .86);
  margin: 0;
  max-width: 520px;
}

/* Category (menu) pages */
.support-back {
  display: inline-block;
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--blue);
  text-decoration: none;
}
.support-back:hover { text-decoration: underline; }
.support-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(0, 87, 255, .09);
  color: var(--blue);
  font: 700 15px var(--font-head);
  margin-bottom: 16px;
}
.support-viewall {
  max-width: var(--maxw);
  margin: 30px auto 0;
  text-align: center;
}
.support-viewall a {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--blue);
  text-decoration: none;
}
.support-viewall a:hover { text-decoration: underline; }

/* ---------- Support guide article ---------------------------------------- */
.guide {
  background: var(--vlight-grey);
  padding: 40px var(--pad) 76px;
}
.guide-shell {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 288px 1fr;
  gap: 44px;
  align-items: start;
}
.guide-rail {
  position: sticky;
  top: 96px;
  background: #fff;
  border: 1px solid rgba(8, 30, 34, .08);
  border-radius: 16px;
  padding: 14px;
}
.guide-rail-title {
  font: 700 12px var(--font-head);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--grey);
  margin: 8px 12px 12px;
}
.guide-rail a {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--grey-body);
  font: 600 14.5px/1.35 var(--font-head);
}
.guide-rail a .gnum { color: var(--mid-grey); font-weight: 700; min-width: 15px; }
.guide-rail a:hover { background: rgba(0, 87, 255, .05); color: var(--blue); }
.guide-rail a[aria-current="page"] { background: rgba(0, 87, 255, .08); color: var(--blue); }
.guide-rail a[aria-current="page"] .gnum { color: var(--blue); }

.guide-main {
  background: #fff;
  border: 1px solid rgba(8, 30, 34, .08);
  border-radius: 16px;
  padding: 42px 48px 46px;
  min-width: 0;
}
.guide-breadcrumb { font: 600 14px var(--font-head); margin: 0 0 24px; }
.guide-breadcrumb a { color: var(--blue); text-decoration: none; }
.guide-breadcrumb a:hover { text-decoration: underline; }
.guide-breadcrumb span { color: var(--mid-grey); margin: 0 8px; }
.guide-breadcrumb .cur { color: var(--grey); }
.guide-main h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 33px;
  letter-spacing: -.6px;
  line-height: 1.14;
  margin: 0 0 22px;
  color: var(--black);
}
.guide-body h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.3px;
  margin: 34px 0 12px;
  color: var(--black);
}
.guide-body p { font-size: 16.5px; line-height: 1.62; color: var(--grey-body); margin: 0 0 16px; }
.guide-body ul, .guide-body ol { margin: 0 0 18px; padding-left: 22px; }
.guide-body li { font-size: 16.5px; line-height: 1.6; color: var(--grey-body); margin-bottom: 9px; }
.guide-body strong { color: var(--black); font-weight: 700; }
.guide-note {
  background: rgba(0, 87, 255, .05);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--grey-body);
  margin: 22px 0;
}
.guide-note strong { color: var(--blue-dark); }
.guide-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 42px;
  padding-top: 24px;
  border-top: 1px solid var(--light-grey);
}
.guide-nav a {
  font: 700 15px var(--font-head);
  color: var(--blue);
  text-decoration: none;
  max-width: 47%;
}
.guide-nav a:hover { text-decoration: underline; }
.guide-nav a.next { text-align: right; margin-left: auto; }
.guide-nav .lbl {
  display: block;
  font: 600 11px var(--font-head);
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 4px;
}

@media (max-width: 900px) {
  .support-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr; }
  .support-contact { flex-direction: column; align-items: flex-start; }
  .guide-shell { grid-template-columns: 1fr; gap: 24px; }
  .guide-rail { position: static; }
  .guide-main { padding: 30px 24px 34px; }
}

/* ---------- Pricing ------------------------------------------------------- */
.pricing { background: var(--vlight-grey); padding: 66px var(--pad) 76px; }
.cur-wrap { text-align: center; }
.cur-toggle {
  display: inline-flex;
  gap: 4px;
  background: #fff;
  border: 1px solid rgba(8, 30, 34, .10);
  border-radius: 12px;
  padding: 5px;
  margin: 0 auto 36px;
}
.cur-toggle button {
  border: none;
  background: none;
  font: 600 14px var(--font-head);
  color: var(--grey-body);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.cur-toggle button.on { background: var(--blue); color: #fff; }
.pricing-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}
.price-card {
  background: #fff;
  border: 1px solid rgba(8, 30, 34, .08);
  border-radius: 18px;
  padding: 34px 30px;
  box-shadow: 0 10px 30px rgba(8, 20, 40, .05);
  display: flex;
  flex-direction: column;
}
.price-card.featured {
  border: 2px solid var(--blue);
  box-shadow: 0 22px 46px rgba(28, 38, 132, .16);
  position: relative;
}
.price-badge {
  position: absolute;
  top: -13px; left: 30px;
  background: var(--blue);
  color: #fff;
  font: 700 12px var(--font-head);
  padding: 6px 13px;
  border-radius: 20px;
}
.price-name { font: 700 22px var(--font-head); letter-spacing: -.3px; margin: 0 0 6px; }
.price-desc { font-size: 14.5px; line-height: 1.4; color: var(--grey-body); margin: 0 0 20px; min-height: 40px; }
.price-amount { font-family: var(--font-head); font-weight: 800; font-size: 44px; letter-spacing: -1px; color: var(--black); line-height: 1; margin: 0 0 4px; }
.price-amount span { font-size: 16px; font-weight: 600; color: var(--grey); letter-spacing: 0; }
.price-period { font-size: 13px; color: var(--grey); margin: 0 0 22px; }
.price-features { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 11px; }
.price-features li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.45; color: var(--grey-body); }
.price-features li::before {
  content: "";
  position: absolute; left: 0; top: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #20CC6F url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.5 8.5l3 3 6-6.5" stroke="white" stroke-width="2.2" fill="none" stroke-linecap="round"/></svg>') center/12px no-repeat;
}
.price-card .btn { margin-top: auto; width: 100%; }
.pricing-note { max-width: var(--maxw); margin: 28px auto 0; text-align: center; color: var(--grey); font-size: 14px; }

/* ---------- Contact / demo forms ----------------------------------------- */
.contact { background: #fff; padding: 60px var(--pad) 80px; }
.contact-shell {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 54px;
  align-items: start;
}
.req { color: var(--blue); margin-left: 1px; }
.newsletter-card {
  max-width: 1080px;
  margin: 46px auto 0;
  background: var(--vlight-grey);
  border: 1px solid rgba(8,30,34,.08);
  border-radius: 18px;
  padding: 32px 36px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
}
.newsletter-text h3 { font: 700 22px var(--font-head); letter-spacing: -.4px; margin: 0 0 6px; }
.newsletter-text p { font-size: 15.5px; line-height: 1.55; color: var(--grey-body); margin: 0; max-width: 520px; }
.newsletter-form { display: flex; gap: 12px; }
.newsletter-form input {
  font: 500 16px var(--font-body);
  padding: 13px 16px;
  border: 1.5px solid #D8DCE6;
  border-radius: 8px;
  min-width: 260px;
  background: #fff;
}
.newsletter-form input:focus { outline: none; border-color: var(--blue); }
@media (max-width: 760px) {
  .newsletter-card { grid-template-columns: 1fr; gap: 20px; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form input { min-width: 0; }
}
.contact-info h2 { font: 700 26px var(--font-head); letter-spacing: -.4px; margin: 0 0 16px; }
.contact-info p { font-size: 16px; line-height: 1.6; color: var(--grey-body); margin: 0 0 26px; max-width: 400px; }
.contact-method { margin-bottom: 18px; }
.contact-method .lbl { font: 700 12px var(--font-head); text-transform: uppercase; letter-spacing: .06em; color: var(--grey); margin: 0 0 4px; }
.contact-method a { font: 600 17px var(--font-head); color: var(--blue); text-decoration: none; }
.contact-method a:hover { text-decoration: underline; }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.5; color: var(--grey-body); margin-bottom: 12px; }
.contact-list li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #20CC6F url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.5 8.5l3 3 6-6.5" stroke="white" stroke-width="2.2" fill="none" stroke-linecap="round"/></svg>') center/11px no-repeat;
}
.form-card {
  background: var(--vlight-grey);
  border: 1px solid rgba(8, 30, 34, .08);
  border-radius: 18px;
  padding: 32px;
}
.form-row { margin-bottom: 16px; }
.form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { font: 600 13.5px var(--font-head); color: var(--black); margin-bottom: 6px; display: block; }
.field input, .field select, .field textarea {
  width: 100%;
  font: 400 15px var(--font-body);
  padding: 11px 13px;
  border: 1.5px solid #D8DEE9;
  border-radius: 9px;
  background: #fff;
  color: var(--black);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); }
.form-card .btn { width: 100%; margin-top: 6px; }

/* ---------- FAQ ----------------------------------------------------------- */
.faq { background: var(--vlight-grey); padding: 56px var(--pad) 80px; }
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
  background: #fff;
  border: 1px solid rgba(8, 30, 34, .08);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font: 700 17px var(--font-head);
  color: var(--black);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font: 600 22px var(--font-head); color: var(--blue); flex-shrink: 0; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item .faq-a { padding: 0 24px 22px; font-size: 15.5px; line-height: 1.62; color: var(--grey-body); }
.faq-item .faq-a a { color: var(--blue); }

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; }
  .contact-shell { grid-template-columns: 1fr; gap: 32px; }
  .form-row.two { grid-template-columns: 1fr; }
}

/* ---------- Case studies -------------------------------------------------- */
/* Resources dropdown sits near the right edge, so align it right */
.nav-group:last-of-type .nav-dropdown { left: auto; right: -18px; }

.case-hero {
  background: linear-gradient(180deg, #EDEEF7 0%, #DADEEF 100%);
  padding: 62px var(--pad) 52px;
  text-align: center;
}
.case-hero .eyebrow {
  font: 700 13px var(--font-head);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--blue);
  margin: 0 0 14px;
}
.case-hero h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -1px;
  line-height: 1.1;
  max-width: 860px;
  margin: 0 auto;
  color: var(--black);
}
.case-hero .case-sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--grey-body);
  max-width: 620px;
  margin: 18px auto 0;
}
.case-figure {
  height: 300px;
  border: 1px solid rgba(8, 30, 34, .10);
  border-radius: 16px;
  background:
    repeating-linear-gradient(45deg, #eef0f7, #eef0f7 12px, #e5e8f4 12px, #e5e8f4 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c85ad;
  font: 600 13px 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .02em;
  margin: 0 0 30px;
}
.case-cta { margin-top: 34px; }

@media (max-width: 620px) {
  .case-hero h1 { font-size: 30px; }
  .case-hero .case-sub { font-size: 17px; }
  .case-figure { height: 200px; }
}

/* Case-study cards (index) */
.cs-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.cs-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(8, 30, 34, .08);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(8, 20, 40, .05);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.cs-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(8, 20, 40, .10);
  border-color: rgba(0, 87, 255, .28);
}
.cs-media {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #EEF0F7 0%, #DFE3F1 100%);
  border-bottom: 1px solid rgba(8, 30, 34, .06);
}
.cs-media img { max-height: 44px; max-width: 62%; display: block; }
.cs-media .cs-mono { font: 800 26px var(--font-head); color: var(--indigo); letter-spacing: -.5px; }
.cs-body { padding: 22px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.cs-meta { font: 700 12px var(--font-head); text-transform: uppercase; letter-spacing: .06em; color: var(--grey); margin: 0 0 12px; }
.cs-card h3 { font-family: var(--font-head); font-size: 19px; font-weight: 700; letter-spacing: -.3px; line-height: 1.25; margin: 0 0 10px; transition: color .16s ease; }
.cs-card:hover h3 { color: var(--blue); }
.cs-card p { font-size: 14.5px; line-height: 1.55; color: var(--grey-body); margin: 0 0 20px; }
.cs-more { margin-top: auto; font: 600 14px var(--font-head); color: var(--blue); }
.cs-more .arw { display: inline-block; transition: transform .16s ease; }
.cs-card:hover .cs-more .arw { transform: translateX(5px); }

@media (max-width: 900px) {
  .cs-grid { grid-template-columns: 1fr; max-width: 460px; }
}

/* ---------- Plan comparison table ---------------------------------------- */
.compare { background: #fff; padding: 26px var(--pad) 84px; }
.compare-head { text-align: center; max-width: 720px; margin: 0 auto 38px; }
.compare-head h2 { font-family: var(--font-head); font-weight: 700; font-size: 34px; letter-spacing: -.8px; margin: 0 0 10px; color: var(--black); }
.compare-head p { font-size: 17px; line-height: 1.55; color: var(--grey-body); margin: 0; }
.compare-scroll { max-width: var(--maxw); margin: 0 auto; overflow-x: auto; }
.compare-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 13px 16px; text-align: center; border-bottom: 1px solid var(--light-grey); font-size: 15px; color: var(--grey-body); }
.compare-table thead th { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--black); vertical-align: bottom; border-bottom: 2px solid rgba(8, 30, 34, .12); }
.compare-table thead th small { display: block; font: 600 12.5px var(--font-body); color: var(--grey); margin-top: 3px; }
.compare-table .feat { text-align: left; font-weight: 600; color: var(--black); }
.compare-table tr.sect td { background: var(--vlight-grey); text-align: left; font: 700 12px var(--font-head); text-transform: uppercase; letter-spacing: .07em; color: var(--grey); border-bottom: none; }
.compare-table .hl { background: rgba(0, 87, 255, .045); }
.compare-table thead th.hl { border-bottom-color: var(--blue); color: var(--blue); }
.compare-table .tick { color: #1F9254; font-weight: 700; font-size: 17px; }
.compare-table .dash { color: var(--mid-grey); }
.compare-cta { text-align: center; margin: 36px 0 0; }
.integration-logos a { display: inline-flex; align-items: center; transition: opacity .15s ease; }
.integration-logos a:hover { opacity: .55; }


/* ---------- Blog ---------------------------------------------------------- */
.blog-hero { padding-bottom: 44px; }
.blog { background: var(--vlight-grey); padding: 44px var(--pad) 90px; }
.blog-toolbar {
  max-width: var(--maxw);
  margin: 0 auto 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.blog-tab {
  font: 600 15px var(--font-head);
  white-space: nowrap;
  color: var(--grey-body);
  background: #fff;
  border: 1.5px solid rgba(8,30,34,.10);
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.blog-tab:hover { border-color: var(--blue); color: var(--blue); }
.blog-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.blog-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.blog-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 26px 52px rgba(8,20,40,.14); }
.blog-thumb {
  position: relative;
  height: 150px;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, #fff) 0 12px, color-mix(in srgb, var(--c) 6%, #fff) 12px 24px);
  border-bottom: 1px solid rgba(8,30,34,.06);
}
.blog-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-cat {
  position: absolute;
  left: 16px; bottom: 16px;
  color: #fff;
  font: 700 12px var(--font-head);
  letter-spacing: .01em;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(8,20,40,.18);
}
.blog-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.blog-read { font: 700 11px var(--font-head); text-transform: uppercase; letter-spacing: .08em; color: var(--grey); margin: 0 0 10px; }
.blog-card h3 { font: 700 20px/1.25 var(--font-head); letter-spacing: -.3px; margin: 0 0 10px; }
.blog-blurb { font-size: 15px; line-height: 1.55; color: var(--grey-body); margin: 0 0 20px; }
.blog-author { margin-top: auto; display: flex; align-items: center; gap: 10px; font: 600 14px var(--font-body); color: var(--grey-body); }
.blog-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--blue-dark); color: #fff;
  font: 700 11px var(--font-head);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.blog-foot-note { text-align: center; color: var(--grey); font-size: 14px; margin: 46px 0 0; }
@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }


/* ---------- Legal / prose pages ------------------------------------------ */
.legal { background: #fff; padding: 56px var(--pad) 88px; }
.legal-inner { max-width: 820px; margin: 0 auto; }
.legal .support-back { display: inline-block; margin-bottom: 20px; }
.legal-meta { font-size: 15px; color: var(--grey); margin: 0 0 32px; }
.legal .guide-body h2 { margin-top: 36px; }
.legal .guide-body h2:first-child { margin-top: 0; }
.legal .guide-note { margin-top: 34px; }

/* ---------- Blog article pages ------------------------------------------- */
.article-hero .article-eyebrow {
  display: inline-block;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 20px;
  margin-bottom: 20px;
}
.article-hero h1 { max-width: 860px; margin-left: auto; margin-right: auto; }
.article-byline { font-size: 16px; color: rgba(255,255,255,.85); margin-top: 16px; }
.article-lead {
  font-size: 19px;
  line-height: 1.62;
  color: var(--black);
  font-weight: 600;
  margin: 0 0 8px;
}
.article-related {
  margin-top: 46px;
  border-top: 1px solid var(--light-grey);
  padding-top: 28px;
}
.article-related h2 { font-family: var(--font-head); font-size: 20px; font-weight: 700; margin: 0 0 16px; }
.article-related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.article-related a { color: var(--blue); font-weight: 600; font-size: 16px; text-decoration: none; }
.article-related a:hover { text-decoration: underline; }

/* Rich text extras */
.guide-body h3 { font-family: var(--font-head); font-weight: 700; font-size: 21px; color: var(--black); margin: 28px 0 12px; }
.guide-body h4 { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--black); margin: 22px 0 10px; }
.guide-body figure { margin: 26px 0; }
.guide-body figure img { border-radius: 12px; width: 100%; height: auto; display: block; }
.guide-body blockquote { border-left: 3px solid var(--blue); margin: 22px 0; padding: 4px 0 4px 18px; color: var(--grey-body); font-style: italic; }
.guide-body a { color: var(--blue); }
.guide-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; background: #f1f4f9; border-radius: 6px; padding: 2px 6px; color: var(--black); }
.guide-body pre { background: #0f172a; color: #e2e8f0; border-radius: 12px; padding: 18px 20px; margin: 0 0 18px; overflow-x: auto; font-size: 14.5px; line-height: 1.55; }
.guide-body pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
/* Collapsible sections inside a guide (e.g. setup details). Same look as
   .faq-item; a page script opens one when its #id is navigated to. */
.guide-body [id] { scroll-margin-top: 96px; }
.guide-details { border: 1px solid rgba(8, 30, 34, .08); border-radius: 12px; margin: 0 0 14px; background: #fff; }
.guide-details > summary { list-style: none; cursor: pointer; padding: 18px 22px; font: 700 18px var(--font-head); color: var(--black); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.guide-details > summary::-webkit-details-marker { display: none; }
.guide-details > summary::after { content: "+"; font: 600 22px var(--font-head); color: var(--blue); flex-shrink: 0; }
.guide-details[open] > summary::after { content: "\2212"; }
.guide-details > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 12px; }
.guide-details-body { padding: 0 22px 6px; }
.guide-details-body > h4:first-child { margin-top: 2px; }
/* Sub-heading with a star rating on the opposite side. Hovering (or tapping)
   the stars shows a breakdown; stars are /assets/star.svg used as a mask. */
.guide-rated { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 22px 0 10px; }
.guide-rated > h4 { margin: 0; }
.guide-body .stars { display: inline-flex; gap: 2px; }
.guide-body .star { width: 16px; height: 16px; background: var(--blue); -webkit-mask: url(/assets/star.svg) center / contain no-repeat; mask: url(/assets/star.svg) center / contain no-repeat; }
.guide-body .star.off { background: #D5DCE6; }
.rating { position: relative; flex-shrink: 0; }
.rating-toggle { display: inline-flex; padding: 4px; margin: -4px; border: 0; background: none; cursor: pointer; border-radius: 6px; }
.rating-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.rating-pop { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; background: #fff; border: 1px solid rgba(8, 30, 34, .08); border-radius: 12px; box-shadow: var(--card-shadow); padding: 12px 16px; }
/* Bridge the gap so the pointer can move from the stars into the panel */
.rating-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.rating.open .rating-pop { display: block; }
@media (hover: hover) { .rating:hover .rating-pop { display: block; } }
.rating-pop dl { display: grid; grid-template-columns: auto auto; gap: 8px 18px; align-items: center; margin: 0; }
.rating-pop dt { font: 600 13.5px/1 var(--font-head); color: var(--grey-body); white-space: nowrap; }
.rating-pop dd { margin: 0; }
.rating-pop .star { width: 14px; height: 14px; }

/* Support search */
.support-search { max-width: var(--maxw); margin: 0 auto 30px; }
.support-search input {
  width: 100%; max-width: 560px; box-sizing: border-box;
  font: 500 16px var(--font-body); color: var(--black);
  padding: 14px 18px; border: 1.5px solid var(--mid-grey); border-radius: 10px;
  outline: none; background: #fff;
}
.support-search input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,87,255,.12); }
.support-results { max-width: var(--maxw); margin: -14px auto 30px; list-style: none; padding: 0; display: none; }
.support-results li { margin: 0; }
.support-results a {
  display: flex; align-items: baseline; gap: 10px; padding: 10px 4px;
  text-decoration: none; border-bottom: 1px solid var(--light-grey);
}
.support-results a:hover .rt { color: var(--blue); }
.support-results .rt { font: 600 16px var(--font-head); color: var(--black); }
.support-results .rs { font-size: 13px; color: var(--grey); }
.support-results .none { padding: 10px 4px; color: var(--grey-body); font-size: 15px; }
.support-count { display: block; font: 600 13px var(--font-head); color: var(--grey); margin: -14px 0 16px; }
.support-contact-alt { margin: 14px 0 0; font-size: 15px; color: rgba(255,255,255,.85); }
.support-contact-alt a { color: #fff; font-weight: 700; }
.support-intro .intro-feature-link { margin-top: 10px; font-size: 15px; }
.support-intro .intro-feature-link a { color: var(--blue); font-weight: 600; }

/* Tour extras */
.tour-key-hint { color: rgba(255,255,255,.55); font: 600 12.5px var(--font-head); white-space: nowrap; }
.tour-mid-cta { max-width: var(--maxw); margin: 16px auto 0; text-align: right; font-size: 14.5px; color: rgba(255,255,255,.8); padding: 0 2px; }
.tour-mid-cta a { color: #fff; font-weight: 700; }
@media (max-width: 700px) { .tour-key-hint { display: none; } }

/* ---------- What's new ---------------------------------------------------- */
.whatsnew {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px var(--pad) 24px;
}
.wn-intro {
  margin: 0 0 44px;
  font-size: 17px;
  color: var(--grey-body);
}
.wn-entry {
  position: relative;
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 28px;
  padding-bottom: 52px;
}
/* timeline rail + dot sit in the gap between the date and the entry body */
.wn-entry::before {
  content: "";
  position: absolute;
  left: 184px;
  top: 8px;
  bottom: -8px;
  width: 2px;
  background: #e6eaf3;
}
.wn-entry:last-of-type::before { bottom: 12px; }
.wn-entry::after {
  content: "";
  position: absolute;
  left: 179px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px #eaf1ff;
}
.wn-date {
  font: 700 14px/1.6 var(--font-head);
  color: var(--grey);
  text-align: right;
  padding-right: 12px;
}
.wn-tag {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 11px;
  border-radius: 999px;
  font: 700 12px/1.4 var(--font-head);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--blue);
}
.wn-tag-improvement { background: #14A85B; }
.wn-tag-beta { background: var(--indigo); }
.wn-body h2 {
  font-size: 22px;
  margin: 0 0 10px;
  color: var(--black);
}
.wn-body p {
  margin: 0 0 12px;
  color: var(--grey-body);
  line-height: 1.6;
}
.wn-more {
  font: 700 15px var(--font-head);
  color: var(--blue);
  text-decoration: none;
}
.wn-more:hover { text-decoration: underline; }

.wn-cta {
  text-align: center;
  padding: 8px var(--pad) 80px;
}
.wn-cta h2 { font-size: 28px; margin: 0 0 10px; }
.wn-cta p { color: var(--grey-body); margin: 0 0 24px; }
.wn-cta .wn-cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 700px) {
  .wn-entry { grid-template-columns: 1fr; gap: 8px; padding-left: 26px; }
  .wn-entry::before { left: 5px; top: 6px; }
  .wn-entry::after { left: 0; top: 4px; }
  .wn-date { text-align: left; padding: 0; }
}

/* What's new: year dividers between changelog groups */
.wn-year {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 36px;
  font: 700 13px/1 var(--font-head);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-dark);
}
.wn-year::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(28, 38, 132, .18);
}
/* end each group's rail cleanly before a divider */
.wn-entry:has(+ .wn-year)::before { bottom: 12px; }

/* ---------- Solutions landing --------------------------------------------- */
.sol-hero {
  background: linear-gradient(180deg, #EDEEF7 0%, #DADEEF 100%);
  padding: 78px var(--pad) 66px;
  text-align: center;
}
.sol-hero h1 {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--black);
}
/* Rotating word: fades up in, width locked to the widest word by JS */
.sol-rotate {
  display: inline-block;
  color: var(--blue);
  white-space: nowrap;
  text-align: left;
  transition: opacity .35s ease, transform .35s ease;
}
.sol-hero p {
  max-width: 640px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.6;
  color: var(--grey-body);
}

.sol-depth {
  max-width: calc(var(--maxw) - 200px);
  margin: 0 auto;
  padding: 76px var(--pad) 70px;
}
.sol-depth-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
}
.sol-depth-intro h2 { font-size: 34px; margin: 0 0 12px; }
.sol-depth-intro p { color: var(--grey-body); margin: 0; }
.sol-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.sol-article {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid rgba(8, 30, 34, .07);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(8, 20, 40, .05);
  padding: 28px;
  text-decoration: none;
  color: inherit;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.sol-article:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(8, 20, 40, .10);
  border-color: rgba(0, 87, 255, .28);
}
.sol-article:hover h3 { color: var(--blue); }
.sol-tile {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #eaf1ff;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sol-tile svg { width: 24px; height: 24px; display: block; }
.sol-article h3 {
  font-size: 19px;
  margin: 0 0 8px;
  color: var(--black);
  transition: color .16s ease;
}
.sol-article p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--grey-body);
  margin: 0 0 12px;
}
.sol-more {
  font: 700 15px var(--font-head);
  color: var(--blue);
}
.sol-more .arw { display: inline-block; transition: transform .16s ease; }
.sol-article:hover .sol-more .arw { transform: translateX(5px); }

@media (max-width: 900px) {
  .sol-hero h1 { font-size: 34px; }
  .sol-grid { grid-template-columns: 1fr; }
}

/* ---------- Hybrid working solution page ----------------------------------- */
.hw-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
.hw-intro {
  margin: 56px auto 40px;
  font-size: 17px;
  font-weight: 600;
  color: #44506b;
  text-align: center;
}
.hw-col {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.hw-col h3 {
  font-size: 22px;
  font-weight: 700;
  color: #10182b;
  margin: 0 0 10px;
}
.hw-col p {
  font-size: 16px;
  line-height: 1.7;
  color: #44506b;
  margin: 0;
}
.hw-col p + p { margin-top: 12px; }

.hw-result {
  background: #0b1e4b;
  border-radius: 16px;
  padding: 48px 56px;
  text-align: center;
  margin: 56px 0 72px;
}
.hw-kicker {
  margin: 0 0 14px;
  font: 700 13px var(--font-head);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8fb0ff;
}
.hw-result-body {
  max-width: 62ch;
  margin: 0 auto 26px;
  font-size: 19px;
  line-height: 1.7;
  color: #e6edff;
}
.hw-btn {
  display: inline-block;
  background: #0057FF;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 9px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease;
}
.hw-btn:hover { background: var(--blue-hover); }

@media (max-width: 640px) {
  .hw-result { padding: 36px 24px; }
}

/* ===== Integrations & features area (option 1D) ===== */
/* Integrations and features teams love: Figma "Integrations" (1600 frame,
   100px inset, 64px top / 128px bottom) */
.int-area { background: #fff; padding: 64px 100px 128px; }
.int-area-inner { max-width: 1400px; margin: 0 auto; }
.int-area-heading {
  font-family: var(--font-head);
  font-size: clamp(36px, 3.5vw, 56px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.01em;
  color: var(--black);
  text-align: center;
  text-wrap: balance;
  margin: 0 0 33px;
}
/* Logo strip under the heading: five 48px marks, 33px apart */
.int-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 33px;
  margin: 0 0 32px;
}
.int-logos img { width: 48px; height: 48px; display: block; object-fit: contain; }
/* Hero card: indigo, 32px radius, mockup left / copy right */
.int-hero {
  display: grid;
  grid-template-columns: minmax(0, 577fr) minmax(0, 664fr);
  gap: 48px;
  align-items: center;
  background: #515bb0;
  border-radius: 32px;
  padding: 32px 48px;
  margin: 0 32px 48px;
  box-shadow: -21px 74px 66px rgba(60, 69, 158, .6);
  overflow: visible;
}
.int-hero-text h3 {
  font-family: var(--font-head);
  font-size: clamp(30px, 3.5vw, 56px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 16px;
  text-wrap: balance;
}
.int-hero-text p {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.45;
  color: #fff;
  margin: 0 0 32px;
  text-wrap: pretty;
}
.int-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 219px;
  background: #fff;
  color: var(--blue);
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  padding: 16px;
  border-radius: 6px;
  transition: background .15s;
}
.int-hero-cta:hover { background: #eef3ff; }
/* teams-mockup.png already carries its own card, shadow and app icon */
.int-hero-visual img { width: 100%; display: block; }
/* Feature grid: three 434px columns, 48px gaps, no hairlines */
.spec-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}
.spec-item { padding: 0; }
/* Centre each illustration as a unit: the compositions are positioned from
   their box's left edge, so give the box the composition's width. */
.spec-item .int-card-visual { width: 150px; height: 220px; margin: 0 auto 24px; }
.spec-item .int-card-visual:has(.lang-panel) { width: 286px; }
.spec-item .maps-visual { width: 300px; }
.spec-item .scale-visual { width: 180px; }
/* zoom scales the whole donut composition; height/margin are pre-zoom values */
.spec-item .reporting-visual { zoom: 1.35; height: 163px; margin-bottom: 18px; }
.spec-item > h3 {
  font-family: var(--font-head);
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 700;
  line-height: 1.125;
  letter-spacing: -0.01em;
  color: var(--black);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.spec-item > p {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.45;
  color: var(--black);
  margin: 0;
  text-wrap: pretty;
}
.spec-item > p strong { font-weight: 700; color: var(--black); }
@media (max-width: 1100px) {
  .int-area { padding: 64px 48px 96px; }
  .int-hero { margin-inline: 0; }
  .spec-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .int-area { padding: 56px 32px 80px; }
  .int-hero { grid-template-columns: 1fr; padding: 32px; box-shadow: 0 32px 56px rgba(60, 69, 158, .4); }
  .int-logos { gap: 20px; }
  .int-logos img { width: 40px; height: 40px; }
}
@media (max-width: 720px) {
  .int-area { padding: 48px 20px 64px; }
  .spec-list { grid-template-columns: 1fr; }
}

/* ---------- Cookie consent banner (js/consent.js) ------------------------- */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #fff;
  color: var(--blue-dark);
  border: 1px solid rgba(28, 38, 132, .12);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(8, 20, 40, .18);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; flex: 1 1 320px; }
.cookie-banner a { color: var(--blue); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 8px; }
.cookie-banner .btn { padding: 8px 16px; font-size: 14px; }
@media (max-width: 480px) {
  .cookie-banner { left: 8px; right: 8px; bottom: 8px; }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner .btn { flex: 1; }
}

/* ---------- Ported feature-page layout ------------------------------------
   The whereabouts, holidays and work-planner pages were ported from Webflow
   with their two- and three-column grids written inline, which cannot carry
   media queries. These classes replace those inline grids and collapse to a
   single column on the same 767px breakpoint as .feature-row. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.split--intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.split--visual-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.split--visual-wide-left { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.card-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.card-trio--tight { gap: 20px; }
/* Two-card variant of .tools-grid (Schengen calculators) */
.tools-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Bento tile grid (styleguide): the first tile spans two columns on desktop */
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.bento-span2 { grid-column: span 2; }
.cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.cta-row-actions { display: flex; flex-wrap: wrap; gap: 14px; flex-shrink: 0; }

@media (min-width: 768px) and (max-width: 900px) {
  .split, .split--intro, .split--visual-wide, .split--visual-wide-left { gap: 36px; }
  .card-trio { gap: 24px; }
}
@media (max-width: 767px) {
  .split, .split--intro, .split--visual-wide, .split--visual-wide-left { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* Text first, artwork second, whichever order the desktop layout uses */
  .split > .split-visual { order: 1; }
  .card-trio, .card-trio--tight { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 480px; }
  .tools-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento-span2 { grid-column: auto; }
  .cta-row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .cta-row-actions { flex-shrink: 1; }
}
/* The desk-hover tooltip hangs 40px left of the maps card; on narrow phones
   that puts its first 20px off-screen. */
@media (max-width: 420px) {
  .maps-tooltip { left: -16px; }
}
/* Support guides quote long unbreakable identifiers (SCIM URNs, URLs) that
   otherwise widen the page on phones. */
.guide-body { overflow-wrap: break-word; }