/* Self-hosted fonts (SIL Open Font License). Hero faces are subset to the glyphs of the hero phrases only. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-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: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/aref-ruqaa-normal.woff2) format('woff2');
  unicode-range: U+20, U+2e, U+44, U+4c, U+53-54, U+56, U+59, U+61, U+63, U+65, U+69, U+6d-6f, U+72-76, U+78, U+7a, U+103, U+115, U+12d, U+14f, U+16d, U+306, U+422, U+432-433, U+438-439, U+43b, U+43e, U+441, U+62a, U+635, U+643, U+648, U+906, U+915, U+91c, U+92a, U+935, U+93c, U+93e, U+940, U+964, U+3002, U+3042, U+305f, U+306a, U+306e, U+4f60, U+58f0, U+7684, U+97f3;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/bodoni-moda-italic.woff2) format('woff2');
  unicode-range: U+20, U+2e, U+44, U+4c, U+53-54, U+56, U+59, U+61, U+63, U+65, U+69, U+6d-6f, U+72-76, U+78, U+7a, U+103, U+115, U+12d, U+14f, U+16d, U+306, U+422, U+432-433, U+438-439, U+43b, U+43e, U+441, U+62a, U+635, U+643, U+648, U+906, U+915, U+91c, U+92a, U+935, U+93c, U+93e, U+940, U+964, U+3002, U+3042, U+305f, U+306a, U+306e, U+4f60, U+58f0, U+7684, U+97f3;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-normal.woff2) format('woff2');
  unicode-range: U+20, U+2e, U+44, U+4c, U+53-54, U+56, U+59, U+61, U+63, U+65, U+69, U+6d-6f, U+72-76, U+78, U+7a, U+103, U+115, U+12d, U+14f, U+16d, U+306, U+422, U+432-433, U+438-439, U+43b, U+43e, U+441, U+62a, U+635, U+643, U+648, U+906, U+915, U+91c, U+92a, U+935, U+93c, U+93e, U+940, U+964, U+3002, U+3042, U+305f, U+306a, U+306e, U+4f60, U+58f0, U+7684, U+97f3;
}
@font-face {
  font-family: 'Dela Gothic One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dela-gothic-one-normal.woff2) format('woff2');
  unicode-range: U+20, U+2e, U+44, U+4c, U+53-54, U+56, U+59, U+61, U+63, U+65, U+69, U+6d-6f, U+72-76, U+78, U+7a, U+103, U+115, U+12d, U+14f, U+16d, U+306, U+422, U+432-433, U+438-439, U+43b, U+43e, U+441, U+62a, U+635, U+643, U+648, U+906, U+915, U+91c, U+92a, U+935, U+93c, U+93e, U+940, U+964, U+3002, U+3042, U+305f, U+306a, U+306e, U+4f60, U+58f0, U+7684, U+97f3;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/fraunces-italic.woff2) format('woff2');
  unicode-range: U+20, U+2e, U+44, U+4c, U+53-54, U+56, U+59, U+61, U+63, U+65, U+69, U+6d-6f, U+72-76, U+78, U+7a, U+103, U+115, U+12d, U+14f, U+16d, U+306, U+422, U+432-433, U+438-439, U+43b, U+43e, U+441, U+62a, U+635, U+643, U+648, U+906, U+915, U+91c, U+92a, U+935, U+93c, U+93e, U+940, U+964, U+3002, U+3042, U+305f, U+306a, U+306e, U+4f60, U+58f0, U+7684, U+97f3;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-italic.woff2) format('woff2');
  unicode-range: U+20, U+2e, U+44, U+4c, U+53-54, U+56, U+59, U+61, U+63, U+65, U+69, U+6d-6f, U+72-76, U+78, U+7a, U+103, U+115, U+12d, U+14f, U+16d, U+306, U+422, U+432-433, U+438-439, U+43b, U+43e, U+441, U+62a, U+635, U+643, U+648, U+906, U+915, U+91c, U+92a, U+935, U+93c, U+93e, U+940, U+964, U+3002, U+3042, U+305f, U+306a, U+306e, U+4f60, U+58f0, U+7684, U+97f3;
}
@font-face {
  font-family: 'Ma Shan Zheng';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ma-shan-zheng-normal.woff2) format('woff2');
  unicode-range: U+20, U+2e, U+44, U+4c, U+53-54, U+56, U+59, U+61, U+63, U+65, U+69, U+6d-6f, U+72-76, U+78, U+7a, U+103, U+115, U+12d, U+14f, U+16d, U+306, U+422, U+432-433, U+438-439, U+43b, U+43e, U+441, U+62a, U+635, U+643, U+648, U+906, U+915, U+91c, U+92a, U+935, U+93c, U+93e, U+940, U+964, U+3002, U+3042, U+305f, U+306a, U+306e, U+4f60, U+58f0, U+7684, U+97f3;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/playfair-display-italic.woff2) format('woff2');
  unicode-range: U+20, U+2e, U+44, U+4c, U+53-54, U+56, U+59, U+61, U+63, U+65, U+69, U+6d-6f, U+72-76, U+78, U+7a, U+103, U+115, U+12d, U+14f, U+16d, U+306, U+422, U+432-433, U+438-439, U+43b, U+43e, U+441, U+62a, U+635, U+643, U+648, U+906, U+915, U+91c, U+92a, U+935, U+93c, U+93e, U+940, U+964, U+3002, U+3042, U+305f, U+306a, U+306e, U+4f60, U+58f0, U+7684, U+97f3;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-normal.woff2) format('woff2');
  unicode-range: U+20, U+2e, U+44, U+4c, U+53-54, U+56, U+59, U+61, U+63, U+65, U+69, U+6d-6f, U+72-76, U+78, U+7a, U+103, U+115, U+12d, U+14f, U+16d, U+306, U+422, U+432-433, U+438-439, U+43b, U+43e, U+441, U+62a, U+635, U+643, U+648, U+906, U+915, U+91c, U+92a, U+935, U+93c, U+93e, U+940, U+964, U+3002, U+3042, U+305f, U+306a, U+306e, U+4f60, U+58f0, U+7684, U+97f3;
}
@font-face {
  font-family: 'Yatra One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/yatra-one-normal.woff2) format('woff2');
  unicode-range: U+20, U+2e, U+44, U+4c, U+53-54, U+56, U+59, U+61, U+63, U+65, U+69, U+6d-6f, U+72-76, U+78, U+7a, U+103, U+115, U+12d, U+14f, U+16d, U+306, U+422, U+432-433, U+438-439, U+43b, U+43e, U+441, U+62a, U+635, U+643, U+648, U+906, U+915, U+91c, U+92a, U+935, U+93c, U+93e, U+940, U+964, U+3002, U+3042, U+305f, U+306a, U+306e, U+4f60, U+58f0, U+7684, U+97f3;
}
@font-face {
  font-family: 'Yellowtail';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/yellowtail-normal.woff2) format('woff2');
  unicode-range: U+20, U+2e, U+44, U+4c, U+53-54, U+56, U+59, U+61, U+63, U+65, U+69, U+6d-6f, U+72-76, U+78, U+7a, U+103, U+115, U+12d, U+14f, U+16d, U+306, U+422, U+432-433, U+438-439, U+43b, U+43e, U+441, U+62a, U+635, U+643, U+648, U+906, U+915, U+91c, U+92a, U+935, U+93c, U+93e, U+940, U+964, U+3002, U+3042, U+305f, U+306a, U+306e, U+4f60, U+58f0, U+7684, U+97f3;
}

/* Dublayer — site styles
   Palette: getmaple.ca. Green lives in the header and dark bands only;
   the page itself is cream. */

:root {
  /* Greens */
  --green-dark: #002900;       /* header (maple neutral-dark) */
  --green-outline: #005200;    /* maple neutral-outline */
  --green-base: #133611;       /* maple neutral-base */

  /* Lights */
  --white: #ffffff;
  --bright: #faf7f5;           /* text on dark (maple neutral-bright) */
  --tint: #f5f5e5;             /* page background, headings on dark (maple neutral-tint) */
  --light-green: #e5f1e4;      /* maple neutral-light */

  /* Accents */
  --mint: #6fe7d9;             /* maple secondary-base */
  --mint-tint: #cbf6ef;        /* maple secondary-tint */
  --coral: #e76750;            /* maple primary-brand */
  --orange: #ff925c;           /* maple primary-aa */
  --peach: #ffdac7;            /* maple primary-light */

  --line-on-dark: rgba(250, 247, 245, .2);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --header-h: 88px;
  --container: 1360px;
  --pad: clamp(16px, 3vw, 40px);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--tint);
  color: var(--green-dark);
  font-family: var(--font);
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
abbr { text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--pad);
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--white);
  color: var(--green-dark);
}
.skip:focus { top: 12px; }

/* ---------- Pills (buttons) ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.pill--white {
  background: var(--white);
  color: var(--green-dark);
}
.pill--white:hover { background: var(--tint); }

.pill--outline {
  border-color: rgba(250, 247, 245, .6);
  color: var(--bright);
}
.pill--outline:hover { border-color: var(--bright); background: rgba(250, 247, 245, .08); }

.pill--lg {
  height: 54px;
  padding: 0 28px;
  font-size: 17px;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--green-dark);
  color: var(--bright);
}

.site-header__inner {
  display: flex;
  align-items: center;
  height: var(--header-h);
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.brand {
  flex: none;
  display: inline-flex;
  padding: 6px 0;
  margin-right: 48px;
}
.brand img { height: 26px; width: auto; }

.nav {
  display: flex;
  align-items: center;
  min-width: 0;
}

.nav-sep {
  flex: none;
  width: 1px;
  height: 40px;
  margin: 0 24px;
  background: var(--line-on-dark);
}

/* Dropdown menus */
.menus {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dd { position: relative; }

.dd__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
}
.dd__chev {
  width: 12px;
  height: 12px;
  transition: transform .2s ease;
}

.dd__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 240px;
  padding: 8px;
  border-radius: 14px;
  background: var(--bright);
  color: var(--green-dark);
  box-shadow: 0 1px 2px rgba(19, 27, 24, .15), 0 12px 32px rgba(19, 27, 24, .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.dd__panel::before {           /* hover bridge across the gap */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}
.dd__panel a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 450;
  white-space: nowrap;
}
.dd__panel a:hover { background: var(--light-green); }

.dd.is-open .dd__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.dd.is-open .dd__chev { transform: rotate(180deg); }

@media (hover: hover) {
  .dd:hover .dd__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
  }
  .dd:hover .dd__chev { transform: rotate(180deg); }
  .dd__trigger:hover { background: rgba(250, 247, 245, .06); }
}

/* Right-hand utilities */
.utils {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.nav-sep--utils { margin: 0 14px 0 0; }

/* Two bars — echoes the logo mark */
.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bright);
  cursor: pointer;
}
.menu-toggle__bar {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform .25s ease;
}
.menu-toggle__bar:first-child { top: 17px; }
.menu-toggle__bar:last-child  { top: 25px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:last-child  { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Mobile menu ---------- */

.mobile-menu {
  max-height: calc(100svh - var(--header-h));
  overflow-y: auto;
  padding: 8px var(--pad) 28px;
  border-top: 1px solid var(--line-on-dark);
  background: var(--green-dark);
}
.mobile-menu[hidden] { display: none; }

.mobile-menu__groups {
  display: grid;
  gap: 24px;
  margin-top: 20px;
}
.mobile-menu__label {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(250, 247, 245, .6);
}
.mobile-menu__groups a {
  display: block;
  padding: 8px 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.mobile-menu__actions {
  margin-top: 28px;
  text-align: center;
}
.mobile-menu__actions .pill { width: 100%; height: 48px; }
.mobile-menu__actions .b2b-note { margin-top: 12px; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: calc(100svh - var(--header-h));
  min-height: 560px;
  overflow: hidden;
  background: var(--green-dark);
  color: var(--tint);
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0, 20, 0, .45) 0%, rgba(0, 20, 0, 0) 100%),
    rgba(0, 41, 0, .28);
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 980px;
  padding: 0 var(--pad);
  text-align: center;
}

/* Cycling headline: language and typeface change together */
.hero__title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1.35em;
  margin: 0;
  font-size: clamp(64px, 11vw, 168px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--tint);
}
.phrase {
  display: inline-block;
  white-space: nowrap;
  font-family: "Instrument Serif", serif;
  font-style: italic;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .25);
}

.hero__lead {
  max-width: 760px;
  margin: 8px 0 32px;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--bright);
  text-shadow: 0 1px 16px rgba(0, 0, 0, .3);
}

/* B2B qualifier under every demo call to action */
.b2b-note {
  margin: 14px 0 0;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: rgba(250, 247, 245, .75);
}

.hero__video-toggle {
  position: absolute;
  right: var(--pad);
  bottom: 24px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(250, 247, 245, .5);
  border-radius: 50%;
  background: rgba(0, 20, 0, .25);
  color: var(--bright);
  cursor: pointer;
  transition: border-color .2s ease;
}
.hero__video-toggle:hover { border-color: var(--bright); }
.hero__video-toggle svg { width: 12px; height: 12px; }
.hero__video-toggle .icon-play { display: none; }
.hero__video-toggle[aria-pressed="true"] .icon-play { display: block; }
.hero__video-toggle[aria-pressed="true"] .icon-pause { display: none; }

/* ---------- Section basics ---------- */

.section-eyebrow {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--green-outline);
}

.section-title {
  margin: 0;
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--green-dark);
  text-wrap: balance;
}

.section-lead {
  max-width: 620px;
  margin: 18px auto 0;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: rgba(0, 41, 0, .72);
}

.pill--sm {
  height: 38px;
  padding: 0 16px;
  font-size: 14px;
}

/* ---------- Who it's for: card carousel ---------- */

.audience {
  padding: clamp(80px, 10vw, 140px) 0 clamp(72px, 9vw, 120px);
  overflow: hidden;
}

.audience__head {
  max-width: var(--container);
  margin: 0 auto clamp(36px, 4vw, 56px);
  padding-inline: var(--pad);
  text-align: center;
}

.carousel {
  --card-w: min(1120px, 80vw);
  --card-h: clamp(440px, 42vw, 600px);
  --gap: 28px;
  --ease: cubic-bezier(.65, 0, .35, 1);
}

.carousel__viewport {
  overflow: hidden;
  padding: 4px 0;
  touch-action: pan-y;
}

.carousel__track {
  display: flex;
  gap: var(--gap);
  will-change: transform;
  /* Before the script runs, centre the first card so nothing jumps on load */
  transform: translate3d(calc((100vw - var(--card-w)) / 2), 0, 0);
  transition: transform .8s var(--ease);
}
.carousel:not(.is-ready) .carousel__track,
.carousel:not(.is-ready) .acard { transition: none; }

.acard {
  position: relative;
  flex: 0 0 var(--card-w);
  height: var(--card-h);
  overflow: hidden;
  border-radius: 22px;
  background: var(--green-base);
  color: var(--white);
  transform: scale(.9);
  transition: transform .8s var(--ease);
  cursor: pointer;
  user-select: none;
}
.acard.is-active { transform: none; cursor: default; }

.carousel__track.no-anim,
.carousel__track.no-anim .acard { transition: none; }

.acard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.acard__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 20, 0, .82) 0%, rgba(0, 20, 0, .38) 40%, rgba(0, 20, 0, 0) 66%);
}

.acard__foot {
  position: absolute;
  left: clamp(20px, 3.2vw, 44px);
  right: clamp(20px, 3.2vw, 44px);
  bottom: clamp(20px, 3.2vw, 40px);
}

.acard__copy { max-width: 580px; }

.acard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.acard__tag {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, .85);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.status--live {
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--white);
}
.status--live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
}
.status--soon {
  background: var(--tint);
  color: var(--green-dark);
}

.acard__title {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.acard__desc {
  max-width: 34em;
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: rgba(255, 255, 255, .86);
}
.acard__copy .pill { margin-top: 18px; }

/* Arrows + dots */
.carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}
.cbtn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(0, 41, 0, .25);
  border-radius: 50%;
  background: transparent;
  color: var(--green-dark);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cbtn:hover { background: var(--green-dark); border-color: var(--green-dark); color: var(--tint); }
.cbtn svg { width: 16px; height: 16px; }

.cdots { display: flex; gap: 8px; }
.cdot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 41, 0, .2);
  cursor: pointer;
  transition: width .3s ease, background-color .3s ease;
}
.cdot.is-active { width: 28px; background: var(--green-dark); }

/* ---------- What it can do: feature bento ---------- */

.features {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--pad) clamp(80px, 10vw, 140px);
}

.features__head {
  margin-bottom: clamp(36px, 4vw, 56px);
  text-align: center;
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.feat {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 500px;
  padding: clamp(24px, 2.6vw, 36px);
  overflow: hidden;
  border: 1px solid rgba(0, 41, 0, .08);
  border-radius: 22px;
  background: var(--white);
  color: var(--green-dark);
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.feat__title {
  margin: 0;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.feat__desc {
  max-width: 30em;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: rgba(0, 41, 0, .7);
}

.feat__art {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 28px 0;
}

/* The wide card is the only dark one; the rest stay light and quiet */
.feat--wide {
  border-color: transparent;
  background: linear-gradient(135deg, #1d4a1a 0%, var(--green-dark) 100%);
  color: var(--white);
}
.feat--wide .feat__desc { color: rgba(255, 255, 255, .85); }

/* Tiles used inside the illustrations */
.glass {
  background: var(--tint);
  border: 1px solid rgba(0, 41, 0, .08);
}
.glass.is-on {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--tint);
}
.feat--wide .glass {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .2);
}
.feat--wide .glass.is-on,
.feat--wide .fan__src {
  background: var(--white);
  border-color: var(--white);
  color: var(--green-dark);
}
.feat .w { width: 100%; height: 16px; color: var(--green-outline); opacity: .6; }
.feat--wide .w { color: currentColor; opacity: .85; }
.glass.is-on .w { color: currentColor; opacity: .9; }

/* Wide card: copy on the left, language fan on the right */
.feat--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: 40px;
  min-height: 520px;
}
.feat--wide .feat__text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 min(440px, 40%);
}
.feat--wide .feat__title { font-size: clamp(26px, 2.6vw, 36px); }
.feat--wide .feat__art { padding: 0; }

.fan {
  position: relative;
  grid-template-columns: auto 90px auto;
  align-items: center;
  justify-content: center;
}
.fan__ghosts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fan__ghosts li {
  position: absolute;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  opacity: .35;
}
.fan__ghosts li:nth-child(1) { top: 4%;  left: 6%; }
.fan__ghosts li:nth-child(2) { top: 0;   left: 46%; }
.fan__ghosts li:nth-child(3) { top: 10%; right: 4%; }
.fan__ghosts li:nth-child(4) { bottom: 6%; left: 2%; }
.fan__ghosts li:nth-child(5) { bottom: 0;  left: 38%; }
.fan__ghosts li:nth-child(6) { bottom: 10%; right: 6%; }
.fan__ghosts li:nth-child(7) { top: 46%; right: 0; }

.fan__src,
.fan__out li {
  display: grid;
  grid-template-columns: 76px 120px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 500;
}
.fan__src { position: relative; background: var(--white); color: var(--green-dark); }
.fan__lines {
  position: relative;
  width: 90px;
  height: 240px;
  fill: none;
  stroke: rgba(255, 255, 255, .45);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.fan__lines path { vector-effect: non-scaling-stroke; }
.fan__out {
  position: relative;
  display: grid;
  gap: 12px;
}

/* Lip sync: mouth shapes */
.mouths {
  display: flex;
  gap: clamp(6px, 1vw, 10px);
}
.mouths li {
  display: grid;
  place-items: center;
  width: clamp(44px, 4.4vw, 62px);
  aspect-ratio: 1;
  border-radius: 50%;
}
.mouths svg { width: 64%; height: 64%; }

/* Emotion pills */
.pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 300px;
}
.pills li {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
}

/* Stems */
.layers {
  display: grid;
  gap: 12px;
  width: min(100%, 300px);
}
.layers li,
.checks li {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 500;
}

/* Speaker lanes */
.lanes {
  display: grid;
  gap: 14px;
  width: min(100%, 300px);
}
.lanes li {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 12px;
}
.lanes__who {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 600;
}
.lanes__track {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: rgba(0, 41, 0, .07);
}
.lanes__track i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--green-dark);
}

/* Quality checks */
.checks {
  display: grid;
  gap: 12px;
  width: min(100%, 260px);
}
.checks li { grid-template-columns: 22px 1fr; }
.checks svg {
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 50%;
  background: var(--green-dark);
  color: var(--white);
}

/* Studio tools */
.tools {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-radius: 999px;
}
.tools svg {
  width: 56px;
  height: 56px;
  padding: 16px;
  border-radius: 50%;
  background: rgba(0, 41, 0, .06);
}
.tools svg:nth-child(2) { background: var(--green-dark); color: var(--white); }

/* ---------- Feature illustrations: motion ----------
   Only when site.js adds .is-animated (never with reduced motion). Cards that are off screen
   are paused. Lists that take turns get --i (position) from site.js; the "on" look comes from
   the --on-* / --off-* variables so the same keyframes work on light and dark cards. */

.features.is-animated .feat:not(.in-view) .feat__art * { animation-play-state: paused !important; }

.features.is-animated {
  --on-bg: var(--green-dark); --on-bd: var(--green-dark); --on-fg: var(--tint);
  --off-bg: var(--tint); --off-bd: rgba(0, 41, 0, .08); --off-fg: var(--green-dark);
}
.features.is-animated .fan__out {
  --on-bg: var(--white); --on-bd: var(--white); --on-fg: var(--green-dark);
  --off-bg: rgba(255, 255, 255, .1); --off-bd: rgba(255, 255, 255, .2); --off-fg: var(--white);
}
.features.is-animated .tools { --off-bg: rgba(0, 41, 0, .06); --off-bd: transparent; }

/* Taking turns: N items, each "on" for 1/N of the cycle */
@keyframes turn3 {
  0%, 30% { background: var(--on-bg); border-color: var(--on-bd); color: var(--on-fg); }
  36%, 96% { background: var(--off-bg); border-color: var(--off-bd); color: var(--off-fg); }
  100% { background: var(--on-bg); border-color: var(--on-bd); color: var(--on-fg); }
}
@keyframes turn4 {
  0%, 22% { background: var(--on-bg); border-color: var(--on-bd); color: var(--on-fg); }
  28%, 96% { background: var(--off-bg); border-color: var(--off-bd); color: var(--off-fg); }
  100% { background: var(--on-bg); border-color: var(--on-bd); color: var(--on-fg); }
}
@keyframes turn5 {
  0%, 17% { background: var(--on-bg); border-color: var(--on-bd); color: var(--on-fg); }
  22%, 97% { background: var(--off-bg); border-color: var(--off-bd); color: var(--off-fg); }
  100% { background: var(--on-bg); border-color: var(--on-bd); color: var(--on-fg); }
}
@keyframes turn7 {
  0%, 12% { background: var(--on-bg); border-color: var(--on-bd); color: var(--on-fg); }
  16%, 97% { background: var(--off-bg); border-color: var(--off-bd); color: var(--off-fg); }
  100% { background: var(--on-bg); border-color: var(--on-bd); color: var(--on-fg); }
}
.features.is-animated .mouths li { --d: 3s; animation: turn5 var(--d) ease-in-out calc((var(--i) / 5 - 1) * var(--d)) infinite; }
.features.is-animated .pills li  { --d: 8.4s; animation: turn7 var(--d) ease-in-out calc((var(--i) / 7 - 1) * var(--d)) infinite; }
.features.is-animated .fan__out li { --d: 4.8s; animation: turn4 var(--d) ease-in-out calc((var(--i) / 4 - 1) * var(--d)) infinite; }
.features.is-animated .tools svg { --d: 4.8s; animation: turn3 var(--d) ease-in-out calc((var(--i) / 3 - 1) * var(--d)) infinite; }

/* Lip sync: the mouth whose turn it is opens and closes */
@keyframes talk {
  0% { transform: scaleY(1); }
  5% { transform: scaleY(1.5); }
  10% { transform: scaleY(.6); }
  15%, 100% { transform: scaleY(1); }
}
.features.is-animated .mouths ellipse {
  transform-box: fill-box;
  transform-origin: center;
  animation: talk 3s ease-in-out calc((var(--i) / 5 - 1) * 3s) infinite; /* --i inherited from the li */
}

/* Emotion: the active pill gives a small nudge as it lights up */
@keyframes nudge { 0%, 100% { transform: none; } 3% { transform: scale(1.06); } 7% { transform: none; } }
.features.is-animated .pills li { animation-name: turn7, nudge; animation-duration: var(--d), var(--d); }

/* Waveforms move like live audio */
@keyframes level {
  0% { transform: scaleY(.55); }
  50% { transform: scaleY(1.1); }
  100% { transform: scaleY(.8); }
}
.features.is-animated .w { transform-origin: center; animation: level .9s ease-in-out infinite alternate; }
.features.is-animated li:nth-child(2) .w { animation-duration: 1.15s; animation-delay: -.4s; }
.features.is-animated li:nth-child(3) .w { animation-duration: .8s; animation-delay: -.7s; }
.features.is-animated li:nth-child(4) .w { animation-duration: 1.05s; animation-delay: -.2s; }
.features.is-animated .layers li:not(.is-on) .w { animation-duration: 1.6s; }

/* Stems: light sweeps over the dialogue layer, the one being replaced */
.features.is-animated .layers li { position: relative; overflow: hidden; }
.features.is-animated .layers li.is-on::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .22) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: sweep 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* Speakers: a playhead runs along the tracks; segments light up as it passes */
.features.is-animated .lanes__track::after {
  content: "";
  position: absolute;
  top: -7px;
  bottom: -7px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--coral);
  animation: playhead 6s linear infinite;
}
@keyframes playhead { from { left: 0; } to { left: 100%; } }
.features.is-animated .lanes__track i {
  transform-origin: center;
  animation: segment 6s ease-out calc((var(--s, 0) - 1) * 6s) infinite;
}
@keyframes segment {
  0% { opacity: 1; transform: scaleY(1.45); }
  10% { opacity: 1; transform: none; }
  22%, 100% { opacity: .3; transform: none; }
}

/* Quality: each check is ticked in turn, then the round starts again */
.features.is-animated .checks svg {
  animation: tick 4.5s ease-out calc(var(--i) * .45s) infinite backwards;
}
@keyframes tick {
  0%, 4% { transform: scale(0); }
  10% { transform: scale(1.25); }
  14%, 82% { transform: scale(1); }
  90%, 100% { transform: scale(0); }
}

/* Language fan: signal flows from the source to the outputs; idle languages drift */
.features.is-animated .fan__lines path { stroke-dasharray: 4 8; animation: flow 1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -12; } }
.features.is-animated .fan__ghosts li { animation: drift 6s ease-in-out calc(var(--i) * -.9s) infinite alternate; }
@keyframes drift {
  from { transform: translateY(-6px); opacity: .25; }
  to { transform: translateY(6px); opacity: .45; }
}

/* Private server card: three server units and a lock */
.vault { display: grid; justify-items: center; gap: 8px; width: min(100%, 220px); }
.vault__unit { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 14px; border-radius: 10px; }
.vault__unit i { width: 22px; height: 3px; border-radius: 2px; background: rgba(0, 41, 0, .25); }
.vault__unit b { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--green-outline); }
.vault__tag { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.vault__lock { width: 14px; height: 14px; }
.feat__desc a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.features.is-animated .vault__unit b { animation: blink 2.4s ease-in-out calc(var(--i) * .5s) infinite; }
.features.is-animated .vault__lock { transform-origin: 50% 70%; animation: lock 4.8s ease-in-out infinite; }
@keyframes blink { 0%, 100% { background: var(--green-outline); } 50% { background: var(--mint); box-shadow: 0 0 0 4px rgba(111, 231, 217, .25); } }
@keyframes lock { 0%, 86%, 100% { transform: none; } 90% { transform: rotate(-12deg); } 94% { transform: rotate(8deg); } }

/* ---------- Demo video ---------- */

.demo {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--pad) clamp(80px, 10vw, 140px);
  scroll-margin-top: var(--header-h);
}

.demo__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 6vw, 120px);
  align-items: start;
}

.demo__title {
  max-width: 13em;
  margin: 0;
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--green-dark);
  text-wrap: balance;
}

.demo__intro {
  max-width: 34em;
  margin: 6px 0 0;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--green-dark);
}

.demo__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 6vw, 120px);
  align-items: end;
  margin: clamp(40px, 6vw, 88px) 0 clamp(24px, 2.4vw, 32px);
}

.demo__facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 6vw, 88px);
  margin: 0;
}
.demo__facts div {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
}
.demo__facts dd {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--green-dark);
}
.demo__facts dt {
  font-size: 15px;
  color: rgba(0, 41, 0, .72);
}

/* Language switch: same pill track used across the site */
.demo__langs {
  justify-self: start;
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(0, 41, 0, .06);
}
.demo__langs button {
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: var(--green-dark);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.demo__langs button:hover { background: rgba(0, 41, 0, .06); }
.demo__langs button[aria-pressed="true"] {
  background: var(--green-dark);
  color: var(--tint);
}

.demo__player {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: var(--green-dark);
  aspect-ratio: 16 / 9;
}
/* AI-generated content label (EU AI Act Art. 50 transparency) */
.demo__ai {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0, 20, 0, .6);
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  pointer-events: none;
}
.demo__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.demo__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  background: rgba(0, 20, 0, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 17px;
  font-weight: 500;
  color: var(--white);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: background-color .2s ease;
}
.demo__play:hover { background: rgba(0, 20, 0, .72); }
.demo__play svg { width: 16px; height: 16px; }
.demo__player.is-playing .demo__play { display: none; }

/* ---------- Studio dubbing vs Dublayer ---------- */

.compare {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--pad) clamp(80px, 10vw, 140px);
}

.compare__head {
  margin-bottom: clamp(36px, 4vw, 56px);
  text-align: center;
}

.cmp {
  width: 100%;
  border-collapse: separate;
  border-spacing: 14px 0;
  margin: 0 -14px;
  width: calc(100% + 28px);
  table-layout: fixed;
}

.cmp th,
.cmp td {
  padding: 22px 28px;
  text-align: left;
  vertical-align: middle;
  font-size: 17px;
  font-weight: 450;
  line-height: 1.4;
  letter-spacing: -0.012em;
}

/* Row labels */
.cmp tbody th {
  width: 26%;
  padding-left: 0;
  font-weight: 500;
  color: rgba(0, 41, 0, .72);
  border-top: 1px solid rgba(0, 41, 0, .1);
}
.cmp tbody tr:first-child th { border-top: 0; }

/* Two columns: a quiet white one and the dark green Dublayer one */
.cmp__studio {
  background: var(--white);
  color: var(--green-dark);
  box-shadow: inset 0 1px 0 rgba(0, 41, 0, .08);
}
.cmp__us {
  background: var(--green-dark);
  color: var(--tint);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.cmp thead th {
  padding-top: 28px;
  padding-bottom: 20px;
  box-shadow: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}
.cmp thead .cmp__studio { border-radius: 20px 20px 0 0; color: rgba(0, 41, 0, .72); }
.cmp thead .cmp__us { border-radius: 20px 20px 0 0; }
.cmp thead .cmp__us img { height: 20px; width: auto; }

.cmp tbody tr:last-child td { padding-bottom: 30px; }
.cmp tbody tr:last-child .cmp__studio,
.cmp tbody tr:last-child .cmp__us { border-radius: 0 0 20px 20px; }

/* The headline row: the numbers people remember */
.cmp__lead td {
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.cmp__lead .cmp__us { color: var(--white); }

.compare__note {
  max-width: 720px;
  margin: 24px auto 0;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: rgba(0, 41, 0, .72);
}

/* ---------- How it works: dark band with five steps ---------- */

.how {
  background: var(--green-dark);
  color: var(--tint);
  scroll-margin-top: var(--header-h);
}

.how__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(80px, 10vw, 140px) var(--pad);
}

.how__head {
  margin-bottom: clamp(48px, 6vw, 80px);
  text-align: center;
}
.how .section-eyebrow { color: var(--mint); }
.how .section-title { color: var(--tint); }
.how .section-lead { color: rgba(250, 247, 245, .72); }

.steps {
  --gap: clamp(20px, 2.4vw, 36px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.step { position: relative; }

/* The thread: each step draws the piece that leads to the next one */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  left: 56px;
  right: calc(-1 * var(--gap));
  height: 1px;
  background: rgba(250, 247, 245, .2);
}

.step__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 28px;
  border: 1px solid rgba(250, 247, 245, .24);
  border-radius: 50%;
  background: var(--green-dark);
  color: var(--tint);
}
.step__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.step:first-child .step__icon {
  border-color: var(--tint);
  background: var(--tint);
  color: var(--green-dark);
}

.step__num {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgba(250, 247, 245, .55);
}
.step__opt {
  padding: 2px 9px;
  border: 1px solid rgba(250, 247, 245, .3);
  border-radius: 999px;
  font-size: 12px;
  color: rgba(250, 247, 245, .8);
}

.step__title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--white);
}

.step__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.006em;
  color: rgba(250, 247, 245, .72);
}

/* ---------- Pricing + quote form ---------- */

.pricing {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(80px, 10vw, 140px) var(--pad);
  scroll-margin-top: var(--header-h);
}

.pricing__head {
  margin-bottom: clamp(40px, 5vw, 64px);
  text-align: center;
}
.pricing__head .section-title { max-width: 18em; margin-inline: auto; }

.pricing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 20px;
  align-items: start;
}

.pricing__info {
  display: grid;
  gap: 20px;
}

/* Dedicated server card */
.server {
  padding: clamp(28px, 3vw, 40px);
  border-radius: 22px;
  background: var(--green-dark);
  color: var(--tint);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.server__art {
  display: grid;
  gap: 6px;
  width: 132px;
  margin-bottom: 28px;
}
.server__unit {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(250, 247, 245, .22);
  border-radius: 7px;
  background: rgba(250, 247, 245, .06);
}
.server__unit i {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: rgba(250, 247, 245, .35);
}
.server__unit b {
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--mint);
}
.server__title {
  margin: 0 0 10px;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--white);
}
.server__desc {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(250, 247, 245, .75);
}

/* Tick lists */
.ticks {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ticks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 16px;
  line-height: 1.4;
}
.ticks svg {
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 50%;
  background: var(--green-dark);
  color: var(--white);
}
.ticks--dark svg { background: var(--tint); color: var(--green-dark); }

.included {
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid rgba(0, 41, 0, .08);
  border-radius: 22px;
  background: var(--white);
}
.included__title {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.included__note {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 41, 0, .08);
  font-size: 15px;
  color: rgba(0, 41, 0, .72);
}

/* How buying works */
.buy {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.buy li {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(0, 41, 0, .05);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}
.buy span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--white);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Quote form */
.quote {
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid rgba(0, 41, 0, .08);
  border-radius: 22px;
  background: var(--white);
}
.quote__title {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.03em;
}
.quote__sub {
  margin: 6px 0 28px;
  font-size: 15px;
  color: rgba(0, 41, 0, .72);
}
.quote__form { display: grid; gap: 16px; }
.quote__form .quote__sub { margin: -10px 0 8px; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.field > span {
  font-size: 14px;
  font-weight: 500;
}
.field em {
  font-style: normal;
  font-weight: 400;
  color: rgba(0, 41, 0, .72);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid rgba(0, 41, 0, .18);
  border-radius: 10px;
  background: var(--white);
  font: inherit;
  font-size: 15px;
  color: var(--green-dark);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 92px; }
.field select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23002900' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(0, 41, 0, .38); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green-outline);
  box-shadow: 0 0 0 3px rgba(0, 82, 0, .12);
}
.quote__form.was-submitted :invalid { border-color: #ad1f00; }

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.quote__privacy {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(0, 41, 0, .72);
}
.quote__privacy a { text-decoration: underline; text-underline-offset: 2px; }

.pill--dark {
  background: var(--green-dark);
  color: var(--tint);
}
.pill--dark:hover { background: var(--green-base); }
.pill--dark:disabled { opacity: .6; cursor: progress; }
.quote__submit { width: 100%; margin-top: 4px; border: 0; cursor: pointer; }

.quote__status {
  min-height: 1.4em;
  margin: 0;
  font-size: 14px;
  text-align: center;
  color: #ad1f00;
}

.quote__done { padding: 40px 0; text-align: center; }
.quote__done-icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--green-dark);
  color: var(--white);
}
.quote__done-icon svg { width: 28px; height: 28px; }
.quote__done .quote__sub { margin-bottom: 0; }

/* ---------- FAQ ---------- */

.faq {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--pad) clamp(80px, 10vw, 140px);
  scroll-margin-top: var(--header-h);
}

.faq__intro {
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 32px);
}
.faq__lead {
  max-width: 24em;
  margin: 16px 0 28px;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(0, 41, 0, .7);
}

.faq__list { border-top: 1px solid rgba(0, 41, 0, .12); }

.faq__item {
  border-bottom: 1px solid rgba(0, 41, 0, .12);
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  letter-spacing: -0.015em;
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover span { opacity: .75; }

/* Plus that turns into a minus */
.faq__item summary i {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(0, 41, 0, .2);
  border-radius: 50%;
  transition: background-color .2s ease, border-color .2s ease;
}
.faq__item summary i::before,
.faq__item summary i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .25s ease;
}
.faq__item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] summary i {
  border-color: var(--green-dark);
  background: var(--green-dark);
  color: var(--tint);
}
.faq__item[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq__item p a { text-decoration: underline; text-underline-offset: 2px; }
.faq__item p {
  max-width: 38em;
  margin: -6px 0 0;
  padding: 0 56px 26px 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(0, 41, 0, .72);
}

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--green-dark);
  color: var(--tint);
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 112px) var(--pad) 0;
}

.footer-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--line-on-dark);
}
.footer-cta__title {
  max-width: 14em;
  margin: 0;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--white);
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 48px;
  padding: clamp(48px, 6vw, 72px) 0;
}
.footer-brand img { height: 26px; width: auto; }
.footer-brand p {
  max-width: 22em;
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(250, 247, 245, .65);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.footer-cols h3 {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(250, 247, 245, .55);
}
.footer-cols ul { display: grid; gap: 12px; }
.footer-cols a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--bright);
  transition: opacity .2s ease;
}
.footer-cols a:hover { opacity: .7; }
.soon {
  padding: 1px 7px;
  border: 1px solid rgba(250, 247, 245, .3);
  border-radius: 999px;
  font-size: 11px;
  color: rgba(250, 247, 245, .75);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 24px 0 clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--line-on-dark);
  font-size: 14px;
  color: rgba(250, 247, 245, .55);
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom a:hover { color: var(--bright); }

/* Oversized wordmark fading into the bottom edge */
.footer-mark {
  display: block;
  width: calc(100% - 2 * var(--pad));
  max-width: var(--container);
  height: auto;
  margin: 0 auto -1.5%;
  opacity: .06;
  pointer-events: none;
  user-select: none;
}

/* ---------- Breakpoints ---------- */

@media (max-width: 960px) {
  .nav,
  .nav-sep--utils { display: none; }
  .menu-toggle { display: block; }
}

@media (min-width: 961px) {
  .mobile-menu { display: none !important; }
}

@media (max-width: 640px) {
  :root { --header-h: 68px; }
  .brand img { height: 22px; }
  .utils .pill--white { height: 38px; padding: 0 14px; font-size: 14px; }
  .hero { min-height: 520px; }
  .hero__lead { margin-bottom: 28px; }
  .pill--lg { height: 50px; padding: 0 24px; font-size: 16px; }
}

@media (max-width: 768px) {
  .carousel {
    --card-w: 86vw;
    --card-h: 540px;
    --gap: 12px;
  }
  .acard { transform: scale(.94); border-radius: 18px; }
  .acard__desc { font-size: 15px; }
}

@media (max-width: 1100px) {
  .features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat--wide { flex-direction: column; }
  .feat--wide .feat__text { flex: none; gap: 16px; }
  .feat--wide .feat__art { min-height: 340px; }
}

@media (max-width: 640px) {
  .features__grid { grid-template-columns: minmax(0, 1fr); }
  .feat { min-height: 440px; }
  .fan { grid-template-columns: auto 40px auto; transform: scale(.82); }
  .fan__lines { width: 40px; }
  .fan__src, .fan__out li { grid-template-columns: 64px 70px; gap: 8px; padding: 10px 12px; font-size: 14px; }
  .fan__ghosts { display: none; }
}

@media (max-width: 860px) {
  .demo__top,
  .demo__meta { grid-template-columns: minmax(0, 1fr); }
  .demo__meta { align-items: start; }
}

/* Phones: each row becomes its own pair of cards */
@media (max-width: 760px) {
  .cmp,
  .cmp tbody,
  .cmp tr { display: block; }
  .cmp { margin: 0; width: 100%; }
  .cmp thead { display: none; }
  .cmp tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
  }
  .cmp tbody th {
    grid-column: 1 / -1;
    width: auto;
    padding: 0;
    border: 0;
    font-size: 15px;
  }
  .cmp td,
  .cmp tbody tr:last-child td {
    padding: 14px 16px 16px;
    border-radius: 14px;
    box-shadow: none;
    font-size: 15px;
  }
  .cmp tbody tr:last-child .cmp__studio,
  .cmp tbody tr:last-child .cmp__us { border-radius: 14px; }
  .cmp td::before {
    content: attr(data-col);
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .6;
  }
  .cmp__lead td { font-size: 20px; }
}

/* Narrower screens: the steps run down the page along a vertical thread */
@media (max-width: 1000px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 560px;
    margin: 0 auto;
  }
  .step:not(:last-child)::after {
    top: 56px;
    bottom: 0;
    left: 28px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .step {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 20px;
    padding-bottom: 36px;
  }
  .step:last-child { padding-bottom: 0; }
  .step__icon { grid-row: 1 / span 3; margin-bottom: 0; }
  .step__num { margin-top: 4px; }
}

@media (max-width: 960px) {
  .pricing__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .buy { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1100px) {
  .footer-main { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq__intro { position: static; }
  .footer-main { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .faq__item p a { text-decoration: underline; text-underline-offset: 2px; }
.faq__item p { padding-right: 0; }
}

@media (max-width: 359px) {
  .utils .pill--white { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Placeholder that must be filled in before launch (grep for class="todo") */
.todo {
  outline: 1.5px dashed var(--coral);
  outline-offset: 2px;
  border-radius: 3px;
  background: rgba(231, 103, 80, .12);
}

/* ---------- Legal and info pages (privacy, terms, security, …) ---------- */

.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) var(--pad) clamp(80px, 10vw, 140px);
}
.legal__eyebrow { margin: 0 0 14px; font-size: 15px; font-weight: 500; color: var(--green-outline); }
.legal h1 {
  margin: 0;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.legal__meta { margin: 18px 0 0; font-size: 14px; color: rgba(0, 41, 0, .72); }
.legal__summary {
  margin: 36px 0 0;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid rgba(0, 41, 0, .08);
  border-radius: 22px;
  background: var(--white);
}
.legal__summary h2 { margin-top: 0; font-size: 18px; }
.legal__summary ul { margin-bottom: 0; }
.legal__toc { margin: 36px 0 0; padding: 0 0 0 20px; list-style: decimal; columns: 2 16em; column-gap: 32px; font-size: 15px; }
.legal__toc li { margin: 0 0 6px; break-inside: avoid; }
.legal__toc a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(0, 41, 0, .3); }
.legal h2 {
  margin: 48px 0 12px;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.025em;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.legal h3 { margin: 28px 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: rgba(0, 41, 0, .82); }
.legal p { margin: 0 0 14px; }
.legal ul, .legal ol:not(.legal__toc) { margin: 0 0 14px; padding-left: 22px; }
.legal ul { list-style: disc; }
.legal li { margin: 0 0 6px; }
.legal a:not(.pill) { text-decoration: underline; text-underline-offset: 2px; }
.legal strong { color: var(--green-dark); font-weight: 600; }
.legal__table-wrap { margin: 0 0 18px; overflow-x: auto; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--white); border-radius: 14px; overflow: hidden; }
.legal th, .legal td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(0, 41, 0, .08); line-height: 1.5; }
.legal th { font-size: 13px; font-weight: 600; color: rgba(0, 41, 0, .72); background: #fbfbf4; }
.legal dl { display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr); gap: 10px 24px; margin: 0 0 18px; }
.legal dt { font-weight: 600; }
.legal dd { margin: 0; color: rgba(0, 41, 0, .82); }
@media (max-width: 560px) { .legal dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .legal dd { margin-bottom: 10px; } }
.legal__note { margin: 40px 0 0; padding-top: 18px; border-top: 1px solid rgba(0, 41, 0, .12); font-size: 14px; color: rgba(0, 41, 0, .72); }

.site-footer--slim .site-footer__inner { padding-top: 0; }
.site-footer--slim .footer-bottom { border-top: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-legal a { text-decoration: none !important; }

.notfound { min-height: 60vh; display: grid; place-content: center; text-align: center; gap: 18px; padding: 80px var(--pad); }
.notfound h1 { margin: 0; font-size: clamp(36px, 5vw, 56px); font-weight: 500; letter-spacing: -0.035em; }
.notfound p { margin: 0; color: rgba(0, 41, 0, .7); }
/* Legal tables become stacked cards on phones */
@media (max-width: 640px) {
  .legal table, .legal tbody, .legal tr, .legal td { display: block; width: 100%; }
  .legal thead { display: none; }
  .legal tr { border-bottom: 1px solid rgba(0, 41, 0, .12); padding: 6px 0; }
  .legal td { border: 0; padding: 6px 14px; }
  .legal td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: rgba(0, 41, 0, .72); }
}

/* Language switch (EN / TR) in the header */
.lang-switch {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(250, 247, 245, .8);
  transition: color .2s ease, background-color .2s ease;
}
.lang-switch:hover { color: var(--white); background: rgba(250, 247, 245, .08); }
.hero__video-toggle[hidden] { display: none; }
@media (max-width: 520px) {
  .brand { margin-right: 8px; }
  .utils { gap: 4px; }
  .lang-switch { padding: 0 8px; }
  .utils .pill--white { padding: 0 14px; font-size: 14px; }
}
/* On narrow phones the home page's language switch moves into the mobile menu */
@media (max-width: 374px) {
  .utils:has(.menu-toggle) .lang-switch { display: none; }
}
.mobile-menu__lang { display: inline-block; margin-top: 14px; font-size: 15px; color: rgba(250, 247, 245, .8); text-decoration: underline; text-underline-offset: 3px; }

/* Carousel dots: 8px to look at, 24px to tap (transparent border; the dots sit 16px apart) */
.cdots { gap: 0; }
.cdot { box-sizing: content-box; border: 8px solid transparent; background-clip: padding-box; }

/* On phones the quote form comes before the plan details, so "Request a quote" lands on it */
@media (max-width: 960px) {
  .pricing__grid > .quote { order: -1; }
}
.quote__sub a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Hero: two calls to action ---------- */
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- About: who we are and what we do (top), how we do it (five steps) ---------- */
.about {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) var(--pad) clamp(24px, 4vw, 40px);
  scroll-margin-top: var(--header-h);
}
.about__card {
  padding: clamp(32px, 5vw, 64px);
  border-radius: 28px;
  background: linear-gradient(135deg, #1d4a1a 0%, var(--green-dark) 100%);
  color: var(--tint);
}
.about__top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.about .section-eyebrow { color: var(--mint); }
.about__title {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--white);
  text-wrap: balance;
}
.about__text { margin: 20px 0 0; font-size: 17px; line-height: 1.6; color: rgba(250, 247, 245, .8); }
.about__what {
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--line-on-dark);
  border-radius: 20px;
  background: rgba(250, 247, 245, .05);
}
.about__what h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mint); }
.about__what p { margin: 0 0 22px; font-size: 18px; line-height: 1.5; color: var(--white); }




/* ---------- Header link (Articles) ---------- */
.nav__link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav__link:hover { background: rgba(250, 247, 245, .08); }
.footer-bottom p a { margin-left: 2px; }

/* ---------- Articles ---------- */
.breadcrumbs { margin: 0 0 18px; font-size: 14px; color: rgba(0, 41, 0, .72); }
.breadcrumbs a { color: inherit; }
.article .article__dek { margin: 28px 0 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--green-dark); }
.article__keypoints {
  margin: 28px 0 8px;
  padding: clamp(20px, 3vw, 28px);
  border-radius: 18px;
  background: var(--light-green);
}
.article .article__keypoints h2 { margin-top: 0; font-size: 17px; letter-spacing: -0.01em; }
.article__keypoints ul { margin-bottom: 0; }
.article__faq { margin-top: 48px; }
.article__faq .faq__item p { padding-right: 0; }
.article__faq h2 { margin-bottom: 4px; }
.article__cta {
  margin-top: 56px;
  padding: clamp(28px, 4vw, 40px);
  border-radius: 22px;
  background: var(--green-dark);
  color: var(--tint);
}
.article .article__cta h2 { margin: 0 0 8px; color: var(--white); }
.article .article__cta p { color: rgba(250, 247, 245, .8); margin-bottom: 22px; }
.article .article__cta a.pill { text-decoration: none; }

.articles__lead { max-width: 40em; margin: 16px 0 36px; font-size: 18px; line-height: 1.55; color: rgba(0, 41, 0, .75); }
.article-list { display: grid; gap: 16px; padding: 0; list-style: none; }
.article-card a {
  display: block;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(0, 41, 0, .08);
  border-radius: 22px;
  background: var(--white);
  text-decoration: none !important;
  transition: border-color .2s ease;
}
.article-card a:hover { border-color: var(--green-dark); }
.article-card__date { font-size: 13px; color: rgba(0, 41, 0, .72); }
.legal .article-card h2 { margin: 6px 0 8px; font-size: clamp(20px, 2vw, 24px); }
.article-card p { margin: 0 0 12px; }
.article-card__more { font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.legal .article-list { list-style: none; padding-left: 0; }
.legal .article-list li { margin: 0; }
.legal .article-card h2 { line-height: 1.25; }

/* About: one column on tablets and phones (after the base rule so it wins) */
@media (max-width: 860px) { .about__top { grid-template-columns: minmax(0, 1fr); } }
.about__foot { margin: clamp(28px, 4vw, 40px) 0 0; padding-top: 18px; border-top: 1px solid var(--line-on-dark); font-size: 15px; color: rgba(250, 247, 245, .75); }