/* =========================================================
   Bird - Homepage
   Built from Figma: Bird Brandbook / Brand / Homepage (169:2180)
   Frame 1440px, content 1280px (80px gutters)
   ========================================================= */

@font-face { font-family: "Inter"; src: url("assets/fonts/Inter-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  /* Primary */
  --blueprint: #0E74F1;
  --foundation: #001D41;
  --skyline: #D8E9FF;
  --charcoal: #161616;
  --graphite: #525252;
  --ash: #898989;
  --silver: #D3D3D3;
  --white: #FFFFFF;
  /* Grays */
  --gray-25: #FAFAFA;
  --gray-50: #F6F6F6;
  --gray-100: #F2F2F2;
  --gray-200: #E6E6E6;
  /* Secondary */
  --clay: #E2721D;
  --terracotta: #893B00;
  --marigold: #FFBB03;
  --ivory: #FFEFC3;
  --alabaster: #FFE7D5;
  /* Tertiary */
  --forest-jade: #38835F;
  --ice-mint: #ECFFF2;
  --mint-foam: #C0E6D1;
  --royal-violet: #593D92;
  --soft-lilac: #F4EBFE;
  --lavender-mist: #E2CFFF;
  --blush-pink: #FFEFEE;
  --dusty-rose: #F9D6D7;
  --ice-blue: #EEFAFF;
  --sky-aqua: #B3D3E5;
  --brick-red: #A72821;
  --deep-teal: #056B87;

  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Inter", system-ui, sans-serif;
  --font-ios: -apple-system, "SF Pro Text", "SF Pro", system-ui, sans-serif;
  --gutter: 80px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
body {
  margin: 0;
  overscroll-behavior: none;
  font-family: var(--font);
  color: var(--charcoal);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin: 0; font-weight: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- Type ---------- */
.kicker {
  font-size: 14px;
  line-height: 1.1;
  font-weight: 600;
  text-transform: uppercase;
}
.kicker--foundation { color: var(--foundation); }
.kicker--clay { color: var(--clay); }
.kicker--jade { color: var(--forest-jade); }
.kicker--marigold { color: var(--marigold); }
.kicker--skyline { color: var(--skyline); }

.h2 { font-size: 48px; line-height: 1.1; font-weight: 300; color: var(--charcoal); }
.h2--light { color: var(--white); }
.h3 { font-size: 32px; line-height: 1.1; font-weight: 300; color: var(--charcoal); }

.body { font-size: 15px; line-height: 1.6; letter-spacing: .02em; color: var(--graphite); }
.body--center { max-width: 480px; margin: 0 auto; }
.body--silver { max-width: 480px; color: var(--silver); }

.heading { display: flex; flex-direction: column; gap: 24px; }
.heading__body { display: flex; flex-direction: column; gap: 16px; }
.heading--center { align-items: center; text-align: center; }
.heading--center .heading__body { width: 100%; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 40px;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.btn__icon {
  position: relative;
  display: block;
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
  overflow: hidden;
  border-radius: 50%;
  background: var(--icon-color);
}
.btn__icon::before,
.btn__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--arrow-color);
  -webkit-mask: url("assets/icons/btn-arrow-glyph.svg") center / 75% no-repeat;
  mask: url("assets/icons/btn-arrow-glyph.svg") center / 75% no-repeat;
  transition: transform .38s cubic-bezier(.22, 1, .36, 1);
}
.btn__icon::after { transform: translateX(-100%); }
.btn:hover .btn__icon::before,
.btn:focus-visible .btn__icon::before { transform: translateX(100%); }
.btn:hover .btn__icon::after,
.btn:focus-visible .btn__icon::after { transform: translateX(0); }

/* M: 40px tall, 32px icon */
.btn--m { --icon-size: 32px; gap: 16px; padding: 4px 4px 4px 16px; font-size: 16px; }
/* S: 32px tall, 24px icon */
.btn--s { --icon-size: 24px; gap: 12px; padding: 4px 4px 4px 12px; font-size: 14px; }
/* Figma strokes sit inside the box: take the border out of the padding */
.btn--white-border,
.btn--blueprint-border { border: 1px solid; padding: 3px 3px 3px 11px; }
.btn--foundation-border { border: 1px solid; padding: 3px 3px 3px 15px; font-size: 14px; }

.btn--charcoal { --icon-color: var(--white); --arrow-color: var(--charcoal); background: var(--charcoal); color: var(--white); }
.btn--charcoal:hover { --arrow-color: #000; background: #000; }
.btn--white-border { --icon-color: var(--white); --arrow-color: var(--blueprint); border-color: var(--white); color: var(--white); }
.btn--white-border:hover { background: rgba(255,255,255,.12); }
.btn--blueprint-border { --icon-color: var(--blueprint); --arrow-color: var(--white); border-color: var(--blueprint); color: var(--blueprint); }
.btn--blueprint-border:hover { background: #F0F6FF; }
.btn--foundation-border { --icon-color: var(--foundation); --arrow-color: var(--white); border-color: var(--foundation); color: var(--foundation); }
.btn--foundation-border:hover { background: #EEF2F7; }
.btn--white { --icon-color: var(--charcoal); --arrow-color: var(--white); background: var(--white); color: var(--charcoal); }
.btn--white:hover { background: var(--gray-100); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  height: 860px;
  background: var(--blueprint);
  color: var(--white);
  overflow: hidden;
}

/* Hero artwork stays at the 1440 frame; the blue background is full-bleed.
   The ticker bleeds left but stops at the image's right edge. */
.hero__inner { position: relative; max-width: 1440px; height: 100%; margin: 0 auto; }

/* Blueprint guide lines */
.hero__guides { position: absolute; inset: 0; pointer-events: none; }
.g { position: absolute; background: var(--skyline); opacity: .25; }
.g--h { height: 1px; left: 0; }
.g--v { width: 1px; }
/* horizontal guides run out to the screen edges beyond the 1440 frame */
.g--top { top: 127px; left: calc(50% - 50vw); width: 100vw; }
.g--h1  { top: 197px; left: calc(50% - 50vw); width: calc(50vw - 13px); }
.g--h2  { top: 732px; left: calc(50% - 50vw); width: calc(50vw - 13px); }
.g--v1  { left: calc(var(--gutter) - 13px); top: 0; height: 860px; }
.g--v2  { left: calc(var(--gutter) + 27px); top: 128px; height: 732px; }
.g--v3  { left: calc(50% - 53px); top: 128px; height: 732px; }
.g--v4  { left: calc(50% - 13px); top: 128px; height: 732px; }
.g--v5  { right: calc(var(--gutter) - 13px); top: 0; height: 127px; }

.xmark { position: absolute; width: 39px; height: 69px; }
.xmark i {
  position: absolute;
  left: 0;
  width: 39px;
  height: 35px;
  display: grid;
  place-items: center;
  background: rgba(216,233,255,.16);
}
.xmark i:first-child { top: 0; }
.xmark i:last-child { top: 34px; }
.xmark img { mix-blend-mode: screen; }
.xmark--tl { left: calc(var(--gutter) - 12px); top: 128px; }
.xmark--bl { left: calc(var(--gutter) - 12px); top: 733px; }
.xmark--tr { left: calc(50% - 52px); top: 128px; }
.xmark--br { left: calc(50% - 52px); top: 733px; }

/* Nav */
.nav {
  position: absolute;
  z-index: 3;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1280px, calc(100% - var(--gutter) * 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__col { width: 220px; display: flex; align-items: center; }
.nav__col--right { justify-content: flex-end; gap: 16px; }
.nav__logo img { width: 114px; height: 24px; transition: opacity .25s ease; }
.nav__logo:hover img, .nav__logo:focus-visible img { opacity: .5; }
.nav__links { display: flex; align-items: center; gap: 48px; }
.nav__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  line-height: normal;
  color: var(--skyline);
  transition: color .2s;
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--white); }
/* active-page chevron sits outside the label so links never shift */
.nav__links a img { position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 69px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 15px;
  line-height: normal;
  color: var(--skyline);
}
.nav__lang span { margin-right: 2px; }
.nav__lang-chev { transform: rotate(90deg); }

/* Hero content */
.hero__content {
  position: absolute;
  z-index: 2;
  left: 120px;
  top: 204px;
  width: 612px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}
.hero__text { display: flex; flex-direction: column; gap: 16px; }
.hero__title { font-size: 56px; line-height: 1.1; font-weight: 300; }
.hero__lead { width: 350px; font-size: 15px; line-height: 1.6; color: var(--skyline); }

.ticker {
  position: absolute;
  left: calc(50% - 50vw);
  right: 0;
  bottom: 0;
  padding: 16px 0;
  overflow: hidden;
  background: var(--skyline);
}
.ticker__track { display: flex; width: max-content; animation: ticker 60s linear infinite; }
.ticker__track p {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--foundation);
  white-space: nowrap;
}
@keyframes ticker { to { transform: translateX(-50%); } }

.hero__media {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 720px;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   PLATFORM
   ========================================================= */
.platform {
  max-width: calc(1280px + var(--gutter) * 2);
  margin: 0 auto;
  padding: 120px var(--gutter);
}

.bento { display: flex; flex-direction: column; gap: 12px; margin-top: 64px; }
.bento__row { display: grid; gap: 12px; }
.bento__row--3 { grid-template-columns: repeat(3, 1fr); }
.bento__row--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  position: relative;
  overflow: hidden;
  border: 1px solid;
  border-radius: 12px;
}
.bento__row--3 .card { aspect-ratio: 300 / 400; }
.bento__row--2 .card { aspect-ratio: 400 / 300; }
.card--gray  { background: var(--gray-50);    border-color: var(--gray-200); }
.card--mint  { background: var(--ice-mint);   border-color: var(--mint-foam); }
.card--lilac { background: var(--soft-lilac); border-color: var(--lavender-mist); }
.card--blush { background: var(--blush-pink); border-color: var(--dusty-rose); }
.card--ice   { background: var(--ice-blue);   border-color: var(--sky-aqua); }

.card__content {
  position: absolute;
  z-index: 1;
  left: 30px;
  top: 30px;
  width: 302px;
  max-width: calc(100% - 60px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card__content--wide { width: 346px; }
.card__title { font-size: 24px; line-height: 1.6; letter-spacing: .02em; color: var(--charcoal); }
.card__text { font-size: 13px; line-height: 1.6; letter-spacing: .02em; color: var(--graphite); }

.card__phone  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.card__walls  { position: absolute; left: 0; top: 135px; width: 100%; height: calc(100% - 135px); object-fit: cover; object-position: left top; }
.card__bricks { position: absolute; left: 0; top: 42.44px; width: 100%; height: calc(100% - 42.44px); object-fit: cover; object-position: left top; }

/* AI insights widget */
.ai {
  position: absolute;
  left: 50%;
  top: 199px;
  width: 320px;
  height: 586.24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 17.067px;
  padding: 17px 17.067px 10.24px;
  background: var(--white);
  border: .853px solid #DADADA;
  border-bottom: 0;
  border-radius: 20.48px;
  box-shadow: 0 128px 77px rgba(0,0,0,.01), 0 57px 57px rgba(0,0,0,.02), 0 14px 31px rgba(0,0,0,.03);
}
.ai__ask { display: flex; justify-content: flex-end; }
.ai__ask p {
  width: 256px;
  padding: 6.827px 10.24px;
  border-radius: 8.533px;
  background: var(--gray-50);
  font-size: 13.653px;
  line-height: 20.48px;
  color: #171717;
}
.ai__answer { display: flex; flex-direction: column; align-items: flex-start; gap: 13.653px; }
.ai__chip {
  display: inline-flex;
  align-items: center;
  gap: 6.827px;
  padding: 4.27px 9.387px;
  border: .853px solid var(--lavender-mist);
  border-radius: 5.12px;
  background: var(--soft-lilac);
  font-size: 11.093px;
  line-height: 17.067px;
  font-weight: 500;
  color: var(--royal-violet);
  white-space: nowrap;
}
.ai__result { display: flex; flex-direction: column; gap: 8.533px; width: 100%; }
.ai__item { display: flex; flex-direction: column; gap: 6.827px; }
.ai__meta { font-size: 10.24px; line-height: 13.653px; color: #737373; }
.ai__desc { display: flex; flex-direction: column; gap: 3.413px; }
.ai__title { font-size: 15.36px; line-height: 23.04px; font-weight: 500; color: #0A0A0A; }
.ai__text { font-size: 13.653px; line-height: 20.48px; color: #737373; }
.ai__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9.39px 12.8px;
  border: .853px solid #D4D4D4;
  border-radius: 6.827px;
  background: var(--white);
  font-size: 11.947px;
  line-height: 17.067px;
  color: #0A0A0A;
}
.ai__link span { display: flex; align-items: center; gap: 6.827px; white-space: nowrap; }

/* Notification over photo */
.card__media {
  position: absolute;
  left: 30px;
  top: 157.44px;
  width: calc(100% - 62px);
  height: 280px;
  border-radius: 10px;
  overflow: hidden;
}
.card__media > img { width: 100%; height: 100%; object-fit: cover; }
.notif {
  position: absolute;
  left: calc(50% - .23px);
  top: 80px;
  width: 461.55px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12.75px;
  padding: 15.3px 17.85px 34.425px;
}
.notif__glass {
  position: absolute;
  border-radius: 30.6px;
  background: rgba(255,255,255,.32);
  box-shadow: 0 13px 65px rgba(0,0,0,.2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.notif__glass--back2 { left: 51px; right: 51px; top: 52.63px; height: 81.6px; opacity: .8; }
.notif__glass--back1 { left: 25.5px; right: 25.5px; top: 25.68px; height: 81.6px; opacity: .9; }
.notif__glass--main  { inset: 0 0 17.85px 0; background: rgba(255,255,255,.64); box-shadow: 0 10.2px 51px rgba(0,0,0,.2); }
.notif__icon { position: relative; flex: none; }
.notif__body {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  font-family: var(--font-ios);
  font-size: 19.125px;
  letter-spacing: -.2932px;
  color: var(--charcoal);
}
.notif__text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.notif__title { font-weight: 590; line-height: 21.675px; }
.notif__msg { line-height: 22.95px; opacity: .64; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif__time { line-height: 21.675px; letter-spacing: 0; white-space: nowrap; }

/* Explore row */
.explore {
  display: flex;
  gap: 16px;
  margin-top: 64px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--foundation);
}
.explore__text { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.explore__action { flex: 1; display: flex; align-items: flex-end; justify-content: flex-end; }

/* =========================================================
   FEATURES
   ========================================================= */
.features {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  padding: 80px var(--gutter);
}
.features__inner {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--gray-200);
}
.heading--features { flex: none; width: 460px; }
.pills { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 16px; }
.pill {
  display: inline-flex;
  align-items: center;
  padding: 15px 39px;
  border: 1px solid var(--terracotta);
  border-radius: 240px;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--charcoal);
  white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.pill:hover { background: var(--clay); border-color: var(--clay); color: var(--white); }

/* =========================================================
   CONNECTED WORKFLOWS
   ========================================================= */
.workflows {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  padding: 80px var(--gutter);
}
.flows {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 960px;
  margin: 64px auto 0;
}
.flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 16px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 1px 1px rgba(0,0,0,.04), 0 2px 3px rgba(0,0,0,.04);
  overflow: hidden;
}
.flow__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding: 32px;
}
.flow__content { display: flex; flex-direction: column; gap: 4px; }

.flow__visual {
  position: relative;
  aspect-ratio: 400 / 300;
  border-radius: 8px;
  overflow: hidden;
}
.flow__visual--panel { background: var(--gray-25); border: 1px solid var(--gray-100); }
.flow__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Fixed-size illustration canvas (459 x 344.25), scaled by script.js on small screens */
.canvas {
  position: absolute;
  left: -1px;
  top: -1px;
  width: 459px;
  height: 344.25px;
  transform-origin: 0 0;
  transform: scale(var(--s, 1));
}

/* Timeline */
.tl-months {
  position: absolute;
  left: 12px;
  top: 291.94px;
  width: 435px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 7px;
  line-height: 7px;
  color: var(--ash);
  opacity: .75;
}
.tl-bar {
  position: absolute;
  height: 29.733px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 5.575px 39.025px;
  border: 5.575px solid var(--white);
  border-radius: 14.867px;
  overflow: hidden;
}
.tl-bar i { width: 1.858px; background: var(--white); }
.tl-bar--ivory     { background: var(--ivory); }
.tl-bar--skyline   { background: var(--skyline); }
.tl-bar--alabaster { background: var(--alabaster); }
.tl-doc { position: absolute; width: 51.311px; height: 56.954px; }
.tl-doc__bg { position: absolute; left: -2px; top: 0; }
.tl-doc__icon { position: absolute; left: 11.15px; top: 11.15px; }
.tl-doc__icon--alt { left: 10.79px; }
.tl-badge {
  position: absolute;
  width: 22.3px;
  height: 22.3px;
  display: grid;
  place-items: center;
  border-radius: 11.15px;
  background: var(--foundation);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13.008px;
  line-height: 13.008px;
  color: var(--white);
}
.tl-avatars { position: absolute; left: 346px; top: 22.94px; width: 90px; height: 48px; }
.tl-avatars img { position: absolute; top: 0; }
.tl-avatars img:nth-child(1) { left: 42px; opacity: .5; }
.tl-avatars img:nth-child(2) { left: 21px; opacity: .5; }
.tl-avatars img:nth-child(3) { left: 0; }

/* Camera */
.flow__visual--camera {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 40px 16px 24px;
}
.camera__frame { position: relative; }
.camera__ui {
  position: relative;
  display: flex;
  align-items: center;
  gap: 53.854px;
  padding: 8px 12px;
  border-radius: 24px;
  background: rgba(255,255,255,.32);
  box-shadow: 0 7.961px 39.805px rgba(0,0,0,.2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.camera__thumb { width: 28.098px; height: 28.098px; border: 1px solid var(--white); border-radius: 8px; object-fit: cover; }
.camera__switch { position: relative; width: 28.098px; height: 28.098px; }
.camera__switch img { position: absolute; left: -39.81px; top: -31.84px; }

/* Activity */
.act-line { position: absolute; left: 166px; top: 58.94px; width: 1px; height: 284px; background: var(--gray-200); }
.act-date {
  position: absolute;
  width: 92px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 7px;
  line-height: 7px;
  white-space: nowrap;
}
/* dot svg carries a 2px shadow margin: 21px drawn in a 17px slot */
.act-date img { align-self: flex-start; margin: 0 -2px 0 0; }
.act-date--jade { color: var(--forest-jade); }
.act-date--brick { color: var(--brick-red); }
.act-date--teal { color: var(--deep-teal); }
.act-pill { position: absolute; height: 34px; display: flex; align-items: center; justify-content: center; }
.act-pill > span { flex: none; position: relative; width: 34px; transform: rotate(90deg); }
.act-pill img { position: absolute; left: -2px; top: 0; }
.act-label {
  position: absolute;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 10px;
  line-height: 10px;
  color: #000;
  white-space: nowrap;
}
.act-sub {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 9px;
  line-height: 9px;
  color: var(--ash);
  white-space: nowrap;
}
.act-file {
  position: absolute;
  left: 223px;
  width: 152.115px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4.995px 6.811px;
  border: .454px solid var(--gray-200);
  border-radius: 3.633px;
  background: var(--white);
  font-size: 6.357px;
  line-height: 9.082px;
  color: var(--graphite);
  white-space: nowrap;
}
.act-file span { display: flex; align-items: center; gap: 3.633px; }
.act-file i { width: 16px; height: 9.082px; display: flex; align-items: center; justify-content: center; }
.act-photos { position: absolute; width: 27px; height: 25.2px; }
.act-photos img {
  position: absolute;
  width: 21.591px;
  height: 21.591px;
  border: .9px solid var(--gray-200);
  border-radius: 4.498px;
  object-fit: cover;
}
.act-photos__back { left: 1.71px; top: 1.9px; transform: rotate(-10deg); }
.act-photos__front { left: 5.41px; top: 0; }
.act-fade {
  position: absolute;
  left: -1px;
  top: 265.94px;
  width: 459px;
  height: 77px;
  background: linear-gradient(rgba(250,250,250,0), rgba(250,250,250,.85) 47.173%, var(--gray-25) 74.484%);
}

/* Contractor */
.contractor__logo {
  position: absolute;
  left: 48.16%;
  top: 18.27%;
  width: 2.4%;
  height: auto;
  transform: rotate(-2.24deg);
}

/* =========================================================
   GET BIRD
   ========================================================= */
.get { background: var(--charcoal); padding: 80px 160px; }
.get--mesh { position: relative; isolation: isolate; overflow: hidden; }
.get__mesh { position: absolute; inset: 0; z-index: -1; pointer-events: none; fill: #B3D3E5; opacity: .12; }
.get__square { animation: get-square-twinkle var(--twinkle-duration) ease-in-out var(--twinkle-delay) infinite; }
@keyframes get-square-twinkle {
  0%, 100% { opacity: .04; }
  45%, 55% { opacity: var(--square-peak, 1); }
}
.get--mesh .get__visual { background: var(--charcoal); }
@media (prefers-reduced-motion: reduce) {
  .get__square { animation: none; opacity: .6; }
}
.get__inner {
  display: flex;
  align-items: center;
  gap: 80px;
  max-width: 1120px;
  margin: 0 auto;
}
.get__content { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.get__visual {
  flex: 1 0 0;
  min-width: 0;
  aspect-ratio: 400 / 300;
  border-radius: 12px;
  overflow: hidden;
  background: var(--clay);
}
.get__visual img { width: 100%; height: 100%; object-fit: cover; }

.stores { display: flex; gap: 16px; }
.store {
  position: relative;
  width: 140px;
  height: 46.667px;
  border: 1.167px solid #A6A6A6;
  border-radius: 6px;
  background: #000;
  color: var(--white);
  overflow: hidden;
  transition: border-color .2s;
}
.store:hover { border-color: var(--white); }
.store__logo { position: absolute; left: 7px; top: 7px; }
.store__apple {
  position: absolute;
  left: 39.66px;
  top: 50%;
  transform: translateY(-50%);
  width: 91px;
  display: flex;
  flex-direction: column;
  font-family: "SF Compact Display", "SF Pro Display", var(--font-ios);
  font-weight: 500;
  font-size: 21px;
  line-height: 1;
  letter-spacing: -.47px;
}
.store__apple small { font-family: "SF Compact Text", var(--font-ios); font-size: 10.5px; line-height: 10.5px; letter-spacing: 0; }
.store__play {
  position: absolute;
  left: 39.66px;
  top: 3.5px;
  display: flex;
  flex-direction: column;
  gap: 3.5px;
}
.store__play small { font-family: "Product Sans", "Google Sans", Roboto, Arial, sans-serif; font-size: 11.67px; line-height: normal; text-transform: uppercase; }
.store__play img { transform: scaleY(-1); }

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.hero__media--about img { object-position: 68% center; }

/* Story: same frame as Platform */
.story {
  max-width: calc(1280px + var(--gutter) * 2);
  margin: 0 auto;
  padding: 120px var(--gutter);
}
.story__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 80px;
  margin-top: 64px;
}
.story__media {
  aspect-ratio: 400 / 300;
  border-radius: 12px;
  overflow: hidden;
}
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story__copy { display: flex; flex-direction: column; gap: 24px; max-width: 480px; }
.story__text { display: flex; flex-direction: column; gap: 16px; }

.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 64px;
}
.value {
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: 30px;
}
.value__idx { font-size: 56px; line-height: 1.1; font-weight: 300; color: var(--value-color); }
.value__content { display: flex; flex-direction: column; gap: 4px; max-width: 320px; }
.value--jade   { --value-color: var(--forest-jade); }
.value--violet { --value-color: var(--royal-violet); }
.value--brick  { --value-color: var(--brick-red); }

/* Offices: gray band like Connected workflows, white cards like .flow */
.offices {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  padding: 80px var(--gutter) 120px;
}
.offices__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 1280px;
  margin: 64px auto 0;
}
.office {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  padding: 32px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 1px 1px rgba(0,0,0,.04), 0 2px 3px rgba(0,0,0,.04);
}
.office__content { display: flex; flex-direction: column; gap: 4px; }
.office__label {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.1;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--forest-jade);
}
.office address { font-style: normal; }
.office__content a { transition: color .2s; }
.office__content a:hover { color: var(--blueprint); }
.office__meta { font-size: 13px; letter-spacing: .02em; color: var(--ash); }
.office--contact { background: var(--ice-mint); box-shadow: inset 0 0 0 1px var(--mint-foam); }

/* =========================================================
   PLATFORM PAGE
   ========================================================= */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Centered page hero: same blueprint grid, framed like the footer */
.hero--page { height: auto; }
.hero--page .hero__inner { height: auto; padding: 200px 0 calc(58px + 69px + 72px); }
.hero--page .ticker { right: calc(50% - 50vw); }
.pg--h  { bottom: calc(58px + 69px); left: calc(50% - 50vw); width: 100vw; }
.pg--v1 { left: calc(var(--gutter) - 13px); top: 0; bottom: 0; }
.pg--v2 { left: calc(var(--gutter) + 27px); top: 128px; bottom: 0; }
.pg--v3 { right: calc(var(--gutter) + 27px); top: 128px; bottom: 0; }
.pg--v4 { right: calc(var(--gutter) - 13px); top: 0; bottom: 0; }
.px--tl { left: calc(var(--gutter) - 12px); top: 128px; }
.px--tr { right: calc(var(--gutter) - 12px); top: 128px; }
.px--bl { left: calc(var(--gutter) - 12px); bottom: 58px; }
.px--br { right: calc(var(--gutter) - 12px); bottom: 58px; }
.hero--no-ticker .hero__inner { padding-bottom: calc(69px + 72px); }
.hero--platform.hero--no-ticker .hero__inner { padding-bottom: calc(69px + 36px); }
.hero--no-ticker .pg--h { bottom: 69px; }
.hero--no-ticker .px--bl,
.hero--no-ticker .px--br { bottom: 0; }

.page-hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 0 var(--gutter);
  text-align: center;
}
.page-hero__text { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.page-hero__lead { max-width: 480px; font-size: 15px; line-height: 1.6; color: var(--skyline); }


/* Flow map: inputs flow into Bird, documents flow out */
.flowmap { margin-bottom: 72px; }
.page-hero--platform .flowmap { width: 100%; margin: 16px 0 0; }
@media (min-width: 1081px) {
  .page-hero--platform { padding-inline: calc(var(--gutter) + 40px); }
}
.flowmap__svg { display: block; width: 100%; height: auto; overflow: visible; }
.flowmap__label { font-family: var(--font); font-size: 14pt; letter-spacing: .01em; fill: var(--charcoal); }
.flowmap__colhead { font-family: var(--font); font-size: 11pt; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; fill: #38835F; }
.flowmap__hub { stroke: var(--blueprint); stroke-width: 1; stroke-dasharray: 10 8; }
.flowmap__icon { filter: drop-shadow(0 4px 5px rgba(0,0,0,.07)) drop-shadow(0 18px 18px rgba(0,0,0,.06)); }
.flowmap__dots { filter: drop-shadow(0 1px 2px rgba(14,116,241,.35)); }
/* Connector tracks: 2px strokes, 7px dashes and 6px gaps. */
.flowmap__track { stroke: var(--blueprint); stroke-width: 2; stroke-dasharray: 7 6; opacity: .5; }
/* Graduated light falloff; each blur is shared by all eight paths. */
.flowmap__beams { pointer-events: none; stroke-linecap: round; }
.flowmap__bloom { stroke-width: 15; opacity: .15; }
.flowmap__diffusion { stroke-width: 8; opacity: .2; }
.flowmap__halo { stroke-width: 5; opacity: .42; }
.flowmap__inner { stroke-width: 3; opacity: .72; }
.flowmap__lit { stroke-width: 2; }
.flowmap__core { stroke-width: 1; opacity: .95; mix-blend-mode: overlay; }
.flowmap__core path { vector-effect: non-scaling-stroke; }
.flowmap__flare, .flowmap__dot-flash { pointer-events: none; }
.flowmap__dot-flash { opacity: .75; }
.flowmap__square {
  opacity: .6;
  animation: flowmap-twinkle var(--twinkle-duration, 7s) ease-in-out var(--twinkle-delay, 0s) infinite;
}
@keyframes flowmap-twinkle {
  0%, 100% { opacity: .06; }
  45%, 55% { opacity: 1; }
}

/* Feature directory */
.directory {
  max-width: calc(1280px + var(--gutter) * 2);
  margin: 0 auto;
  padding: 80px var(--gutter) 120px;
}
.directory__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab {
  padding: 8px 16px;
  border: 1px solid var(--gray-200);
  border-radius: 40px;
  font-size: 14px;
  line-height: normal;
  color: var(--graphite);
  transition: background-color .2s, border-color .2s, color .2s;
}
.tab:hover { border-color: var(--charcoal); color: var(--charcoal); }
.tab[aria-pressed="true"] { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }
.directory__count { flex: none; font-size: 13px; letter-spacing: .02em; color: var(--ash); }

.directory__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.journal .directory__grid { gap: 24px; }
.feature {
  scroll-margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 24px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
}
.feature[hidden] { display: none; }
.feature:target {
  background: var(--white);
  border-color: var(--feature-line);
  box-shadow: 0 14px 31px rgba(0,0,0,.04), 0 2px 3px rgba(0,0,0,.04);
}
.feature--drawings      { --feature-bg: var(--skyline);    --feature-line: #B7D5FB;              --feature-ink: var(--blueprint); }
.feature--ai            { --feature-bg: var(--soft-lilac); --feature-line: var(--lavender-mist); --feature-ink: var(--royal-violet); }
.feature--field         { --feature-bg: var(--alabaster);  --feature-line: #F6C9A6;              --feature-ink: var(--clay); }
.feature--collaboration { --feature-bg: var(--ice-mint);   --feature-line: var(--mint-foam);     --feature-ink: var(--forest-jade); }
.feature--planning      { --feature-bg: var(--ivory);      --feature-line: #FFDD80;              --feature-ink: var(--terracotta); }
.feature--finance       { --feature-bg: var(--ice-blue);   --feature-line: var(--sky-aqua);      --feature-ink: var(--deep-teal); }

.feature__head { display: flex; align-items: center; gap: 14px; }
.feature__icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--feature-bg);
  color: var(--feature-ink);
}
.feature__icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.feature__name { font-size: 18px; line-height: 1.4; letter-spacing: .01em; color: var(--charcoal); }
.feature__meta { font-size: 13px; line-height: 1.4; letter-spacing: .02em; color: var(--ash); }
.feature__text { flex: 1; max-width: 340px; font-size: 15px; line-height: 1.6; letter-spacing: .02em; color: var(--graphite); }
.feature__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blueprint);
}
.feature__link svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.feature__link:hover svg,
.feature__link:focus-visible svg { transform: translateX(3px); }

.directory__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  padding: 80px 24px;
  border: 1px dashed var(--gray-200);
  border-radius: 12px;
  text-align: center;
}
.directory__empty[hidden] { display: none; }
.directory__empty .btn { margin-top: 8px; }

/* Contained CTA card */
.cta { max-width: calc(1280px + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter) 120px; }
.cta__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: 12px;
  overflow: hidden;
  background: var(--blueprint);
}
.cta__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding: 64px;
}
.cta__body { max-width: 420px; color: var(--skyline); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta__actions .btn--white-border { --arrow-color: var(--blueprint); }
.cta__media { min-height: 420px; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact {
  scroll-margin-top: 0;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  padding: 80px var(--gutter) 120px;
}
.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: stretch;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
}
.contact__card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 48px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 1px 1px rgba(0,0,0,.04), 0 2px 3px rgba(0,0,0,.04);
}
/* when the side cards are taller, the message box grows so both columns end together */
.contact__card .form { flex: 1; display: flex; flex-direction: column; }
.contact__card .form__body { flex: 1; }
.contact__card .field--grow { flex: 1; display: flex; flex-direction: column; }
.contact__card .field--grow textarea { flex: 1; }
.contact__aside { display: flex; flex-direction: column; gap: 12px; }
.contact__aside .office { flex: 1; gap: 32px; background: none; border: 1px solid var(--silver); box-shadow: none; }

/* Form */
.form__body { display: flex; flex-direction: column; gap: 24px; }
.form__body[hidden] { display: none; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
/* label sits on the field's top border, breaking the line around the word */
.field { position: relative; display: block; }
.field__label {
  position: absolute;
  z-index: 1;
  left: 12px;
  top: 0;
  padding: 0 4px;
  transform: translateY(-50%);
  background: var(--white);
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--charcoal);
  pointer-events: none;
  transition: color .2s;
}
.field:focus-within .field__label { color: var(--blueprint); }
.input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--charcoal);
  outline: 0;
  transition: border-color .2s, box-shadow .2s;
}
.input::placeholder { color: var(--ash); }
.input:hover { border-color: var(--silver); }
.input:focus { border-color: var(--blueprint); box-shadow: 0 0 0 3px var(--skyline); }
textarea.input { height: auto; min-height: 140px; padding: 12px 16px; line-height: 1.6; resize: vertical; }
select.input {
  appearance: none;
  padding-right: 40px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23898989' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center no-repeat;
  cursor: pointer;
}
select.input:invalid, select.input:has(option[value=""]:checked) { color: var(--ash); }

/* disclaimer hugs the last field (8px), button sits 40px below it */
.form__footer { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; margin-top: -16px; }
.form__note { font-size: 13px; line-height: 1.6; letter-spacing: .02em; color: var(--ash); }
.form__note a { text-decoration: underline; text-underline-offset: 2px; }
.form__note a:hover { color: var(--charcoal); }

.form__success { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; outline: 0; }
.form__success[hidden] { display: none; }
.form__check {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ice-mint);
  color: var(--forest-jade);
}
.form__check svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* FAQ */
.faq { padding: 120px var(--gutter); }
.faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 80px;
  max-width: 1280px;
  margin: 0 auto;
}
.faq__item { border-bottom: 1px solid var(--gray-200); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--charcoal);
  list-style: none;
  cursor: pointer;
  transition: color .2s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--blueprint); }
.faq__item > .body { max-width: 620px; padding: 0 56px 28px 0; }
.faq__icon {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--gray-200);
  border-radius: 50%;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  margin: -.75px 0 0 -6px;
  border-radius: 1px;
  background: var(--charcoal);
  transition: transform .3s ease;
}
.faq__icon::after { transform: rotate(90deg); }
/* plus spins into a minus: both bars turn half a revolution and meet flat */
.faq__item[open]:not(.is-closing) .faq__icon::before,
.faq__item[open]:not(.is-closing) .faq__icon::after { transform: rotate(180deg); }

/* =========================================================
   JOURNAL PAGE
   ========================================================= */
.post--product { --post-bg: var(--skyline);   --post-ink: var(--blueprint); }
.post--field   { --post-bg: var(--alabaster); --post-ink: var(--terracotta); }
.post--company { --post-bg: var(--ice-mint);  --post-ink: var(--forest-jade); }

.post[hidden] { display: none; }
.post__link { display: flex; flex-direction: column; gap: 20px; height: 100%; }
.post__media {
  aspect-ratio: 400 / 300;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  overflow: hidden;
  background: var(--gray-50);
}
.post__media--mint  { background: var(--ice-mint); }
.post__media--ice   { background: var(--ice-blue); }
.post__media--clay  { background: var(--clay); }
.post__media--blush { background: var(--blush-pink); }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.post__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 4px; font-size: 13px; letter-spacing: .02em; color: var(--ash); }
.post__tag {
  padding: 4px 10px;
  border-radius: 40px;
  background: var(--post-bg);
  font-size: 12px;
  font-weight: 500;
  color: var(--post-ink);
}
.post__title { font-size: 20px; line-height: 1.4; letter-spacing: .01em; color: var(--charcoal); transition: color .2s; }
.post__excerpt { font-size: 15px; line-height: 1.6; letter-spacing: .02em; color: var(--graphite); }
.post a:hover .post__media img,
.post--featured:hover .post__media img { transform: scale(1.03); }
.post a:hover .post__title,
.post--featured:hover .post__title { color: var(--blueprint); }

.post--featured {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: 64px;
  margin-bottom: 80px;
}
.post--featured .post__media { aspect-ratio: 16 / 10; }
.post--featured .post__body { gap: 16px; }
.post--featured .post__title { font-size: 40px; line-height: 1.1; font-weight: 300; }
.post--featured .post__excerpt { max-width: 440px; }
.post--featured .feature__link { margin-top: 16px; }
.post--featured:hover .feature__link svg { transform: translateX(3px); }

/* Light hero (article page): same grid and nav, inverted onto white */
.hero--light { background: var(--white); color: var(--charcoal); border-bottom: 1px solid var(--gray-200); }
.hero--light .g { background: var(--charcoal); opacity: .1; }
.hero--light .xmark i { background: rgba(22,22,22,.03); }
.hero--light .xmark img { mix-blend-mode: normal; filter: brightness(0); opacity: .35; }
.hero--light .hero__title { color: var(--charcoal); }
.hero--light .page-hero__lead,
.hero--light .hero__lead { color: var(--graphite); }
.hero--light .nav__logo img { filter: brightness(0) invert(.086); }
.hero--light .nav__links a { color: var(--graphite); }
.hero--light .nav__links a:hover,
.hero--light .nav__links a[aria-current="page"] { color: var(--charcoal); }
.hero--light .nav__links img,
.hero--light .nav__lang img { filter: brightness(0); opacity: .7; }
.hero--light .nav__lang { color: var(--graphite); }
.hero--light .nav .btn--white-border { --icon-color: var(--charcoal); --arrow-color: var(--white); border-color: var(--charcoal); color: var(--charcoal); }
.hero--light .nav .btn--white-border:hover { background: var(--gray-100); }
.hero--light .burger { border-color: var(--charcoal); }
.hero--light .burger span { background: var(--charcoal); }

/* =========================================================
   ARTICLE PAGE
   ========================================================= */
.article {
  max-width: calc(1280px + var(--gutter) * 2);
  margin: 0 auto;
  padding: 80px var(--gutter) 0;
}
.article__frame {
  padding: 24px 24px 80px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
}
.article__cover {
  aspect-ratio: 1232 / 560;
  border-radius: 8px;
  overflow: hidden;
}
.article__cover img { width: 100%; height: 100%; object-fit: cover; }

.article__meta,
.article__body,
.author { max-width: 640px; margin-left: auto; margin-right: auto; }

.article__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
}
.article__meta .post__meta { margin: 0; }
.article__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--graphite);
  transition: color .2s;
}
.article__back svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.article__back:hover { color: var(--charcoal); }
.article__back:hover svg { transform: translateX(-3px); }

.article__body { margin-top: 56px; }
.article__body h2 { margin: 48px 0 16px; font-size: 24px; line-height: 1.3; letter-spacing: .01em; color: var(--charcoal); }
.article__body h2:first-child { margin-top: 0; }
.article__body p { margin: 0 0 16px; font-size: 16px; line-height: 1.7; letter-spacing: .01em; color: var(--graphite); }
.article__body ul { display: flex; flex-direction: column; gap: 10px; margin: 24px 0; }
/* square bullets echo the pixel arrow */
.article__body li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.6; letter-spacing: .01em; color: var(--graphite); }
.article__body li::before { content: ""; position: absolute; left: 2px; top: .65em; width: 6px; height: 6px; background: var(--blueprint); }

.article__figure { margin: 40px 0; }
.article__figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.article__figure figcaption { margin-top: 12px; font-size: 13px; line-height: 1.5; letter-spacing: .02em; color: var(--ash); }

.article__quote {
  margin: 40px 0;
  padding-left: 24px;
  border-left: 2px solid var(--blueprint);
  font-size: 28px;
  line-height: 1.3;
  font-weight: 300;
  color: var(--charcoal);
}

.author {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 56px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
}
.author__avatar {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blueprint);
}
.author__avatar img { width: 22px; height: auto; }
.author__content { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.author__bio { font-size: 14px; line-height: 1.6; letter-spacing: .02em; color: var(--graphite); }
.author__name p:first-child { font-size: 15px; font-weight: 500; color: var(--charcoal); }
.author__name p:last-child { font-size: 13px; letter-spacing: .02em; color: var(--ash); }

/* Related articles panel */
.related {
  max-width: calc(1280px + var(--gutter) * 2);
  margin: 0 auto;
  padding: 24px var(--gutter) 120px;
}
.related__frame {
  padding: 64px 48px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  text-align: center;
}
.related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
  text-align: left;
}

/* Newsletter (charcoal band like Get Bird) */
.newsletter { background: var(--charcoal); padding: 80px var(--gutter); }
.newsletter__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 80px;
  max-width: 1120px;
  margin: 0 auto;
}
.newsletter__form { flex: 0 1 460px; }
.newsletter .form__body { gap: 12px; }
.subscribe {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 20px;
  border-radius: 40px;
  background: var(--white);
  transition: box-shadow .2s;
}
.subscribe:focus-within { box-shadow: 0 0 0 3px rgba(216,233,255,.4); }
.subscribe input {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--charcoal);
}
.subscribe input::placeholder { color: var(--ash); }
.form__note--dark { padding-left: 20px; color: var(--ash); }
.form__success--dark { flex-direction: row; align-items: center; }

/* =========================================================
   FOOTER (Foundation navy, same blueprint grid as the hero)
   Content sits inside the 120px frame used by the hero
   ========================================================= */
.footer { background: var(--foundation); color: var(--skyline); overflow: hidden; }
.footer .btn--white-border { --arrow-color: var(--foundation); }
.footer__inner { position: relative; max-width: 1440px; margin: 0 auto; padding: 0 120px; }

.footer__guides { position: absolute; inset: 0; pointer-events: none; }
.footer .g { opacity: .18; }
.fg--v1 { left: 67px; top: 0; bottom: 0; height: auto; }
.fg--v2 { left: 107px; top: 0; bottom: 0; height: auto; }
.fg--v3 { right: 107px; top: 0; bottom: 0; height: auto; }
.fg--v4 { right: 67px; top: 0; bottom: 0; height: auto; }
/* lines bounding the wordmark band, full-bleed like the hero guides */
.fg--h1 { top: var(--band-top); left: calc(50% - 50vw); width: 100vw; }
.fg--h2 { top: var(--band-bottom); left: calc(50% - 50vw); width: 100vw; }
.footer .xmark i { background: rgba(216,233,255,.08); }
.fx--tl { left: 68px; top: calc(var(--band-top) + 1px); }
.fx--tr { right: 68px; top: calc(var(--band-top) + 1px); }
.fx--bl { left: 68px; top: calc(var(--band-bottom) - 69px); }
.fx--br { right: 68px; top: calc(var(--band-bottom) - 69px); }

.footer__inner { --band-top: 456px; --band-bottom: 776px; }

.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 80px;
  height: var(--band-top);
  padding-top: 120px;
}
.footer__brand { width: 360px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.footer__logo img { width: 114px; height: 24px; transition: opacity .25s ease; }
.footer__logo:hover img, .footer__logo:focus-visible img { opacity: .5; }
.footer__tagline { font-size: 15px; line-height: 1.6; letter-spacing: .02em; color: var(--skyline); opacity: .8; }

.footer__nav { display: flex; gap: 80px; }
.footer__col { min-width: 140px; display: flex; flex-direction: column; gap: 24px; }
.footer__head { font-size: 14px; line-height: 1.1; font-weight: 600; text-transform: uppercase; color: var(--white); }
.footer__col ul { display: flex; flex-direction: column; gap: 14px; }
.footer__col a,
.footer__legal a {
  font-size: 15px;
  line-height: normal;
  color: var(--skyline);
  opacity: .8;
  transition: opacity .2s, color .2s;
}
.footer__col a:hover,
.footer__legal a:hover { opacity: 1; color: var(--white); }

.footer__mark {
  height: calc(var(--band-bottom) - var(--band-top));
  display: flex;
  align-items: center;
}
.footer__mark img { width: 100%; height: auto; opacity: .08; transition: opacity .25s ease; }

.footer__bottom {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 28px 0 32px;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--skyline);
}
.footer__bottom > p { opacity: .6; }
.footer__legal { display: flex; gap: 32px; margin-right: auto; }
.footer__legal a { font-size: 13px; }
.footer__lang { width: auto; }

/* =========================================================
   RESPONSIVE (below the 1440 design)
   ========================================================= */
@media (max-width: 1360px) {
  :root { --gutter: 48px; }
  .nav__links { gap: 36px; }
  .get { padding: 80px var(--gutter); }
  .heading--features { width: 400px; }
  .features__inner { gap: 48px; }
}

@media (max-width: 1080px) {
  .nav__links { display: none; }

  .hero { height: auto; display: flex; flex-direction: column; }
  .hero__inner { display: contents; }
  .hero__guides { display: none; }
  .nav { position: relative; top: 0; left: 0; transform: none; width: 100%; padding: 24px var(--gutter); }
  .nav__col { width: auto; }
  .hero__content { position: static; width: auto; padding: 64px var(--gutter) 72px; }
  .hero__media { position: static; width: 100%; height: 520px; order: 3; }
  .ticker { position: static; order: 4; }

  .bento__row--3, .bento__row--2 { grid-template-columns: repeat(2, 1fr); }
  .bento__row--3 .card:last-child { grid-column: span 2; aspect-ratio: auto; height: 560px; }
  .bento__row--2 .card { aspect-ratio: 300 / 400; }
  .card__bricks { object-position: right bottom; }
  .card__title { font-size: 20px; }
  .card__phone { top: 40px; height: calc(100% - 40px); }

  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow > .flow__visual:first-child { order: 2; }
  .flow__copy { padding: 24px 16px 32px; }
  .card__media { height: auto; bottom: 30px; }
  .notif { transform: translateX(-50%) scale(.8); transform-origin: top center; }

  .features__inner { flex-direction: column; }
  .heading--features { width: 100%; max-width: 520px; }

  .get__inner { flex-direction: column; align-items: stretch; }
  .get--mesh .get__visual { flex: none; width: 100%; }

  .story__split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .story__copy { max-width: 560px; }
  .values { grid-template-columns: minmax(0, 1fr); }
  .value { min-height: 0; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 32px; }
  .value__idx { width: 72px; flex: none; font-size: 48px; }
  .offices__grid { grid-template-columns: repeat(2, 1fr); }
  .office--contact { grid-column: span 2; }

  .page-hero { order: 2; padding: 64px var(--gutter) 80px; }
  .directory__grid { grid-template-columns: repeat(2, 1fr); }
  .cta__card { grid-template-columns: minmax(0, 1fr); }
  .cta__media { min-height: 0; aspect-ratio: 16 / 9; }

  .contact__inner { grid-template-columns: minmax(0, 1fr); }
  .contact__aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact__inner { align-items: start; }
  .contact__aside .office--contact { grid-column: span 2; }
  .faq__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .post--featured { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .newsletter__inner { flex-direction: column; align-items: stretch; gap: 40px; }
  .related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related__grid .post:last-child { display: none; }
  .newsletter__form { flex: none; max-width: 520px; }

  .footer__inner { padding: 0 var(--gutter); }
  .footer__guides { display: none; }
  .footer__top { height: auto; flex-direction: column; gap: 56px; padding: 80px 0 64px; }
  .footer__brand { width: 100%; max-width: 420px; }
  .footer__nav { gap: 48px; flex-wrap: wrap; }
  .footer__mark { height: auto; padding: 32px 0; border-top: 1px solid rgba(216,233,255,.18); border-bottom: 1px solid rgba(216,233,255,.18); }
}

@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .nav__lang { display: none; }

  .hero__content { padding: 40px var(--gutter) 56px; }
  .hero__title { font-size: 40px; }
  .hero__lead { width: auto; }
  .hero__media { height: 360px; }

  .platform { padding: 80px var(--gutter); }
  .h2 { font-size: 34px; }
  .h2 br { display: none; }

  .bento__row--3, .bento__row--2 { grid-template-columns: 1fr; gap: 12px; }
  .bento { gap: 12px; margin-top: 48px; }
  .bento__row--3 .card, .bento__row--2 .card { aspect-ratio: 300 / 400; }
  .bento__row--3 .card:last-child { grid-column: auto; height: auto; }
  .card__content { left: 23px; top: 23px; max-width: calc(100% - 46px); }
  .card__media { left: 16px; width: calc(100% - 32px); top: 170px; bottom: 16px; }
  .notif { transform: translateX(-50%) scale(.62); }

  .explore { flex-direction: column; }
  .explore__action { justify-content: flex-start; }

  .pill { padding: 11px 23px; font-size: 16px; }
  .pills { gap: 10px; }

  .flows { gap: 16px; margin-top: 48px; }
  .flow__copy { padding: 16px 8px 24px; }

  .get { padding: 64px var(--gutter); }
  .stores { flex-wrap: wrap; }

  .story { padding: 80px var(--gutter); }
  .story__split, .values, .offices__grid { margin-top: 48px; }
  .values, .offices__grid { gap: 12px; }
  .value { flex-direction: column; gap: 32px; padding: 23px; }
  .value__idx { width: auto; font-size: 40px; }
  .offices { padding: 64px var(--gutter) 80px; }
  .offices__grid { grid-template-columns: minmax(0, 1fr); }
  .office--contact { grid-column: auto; }
  .office { padding: 24px; gap: 32px; }

  .page-hero { padding: 40px var(--gutter) 56px; gap: 32px; }
  .page-hero__text { align-items: flex-start; text-align: left; }
  .page-hero { align-items: stretch; }
  .page-hero .hero__title br { display: none; }
  .directory { padding: 48px var(--gutter) 80px; }
  .flowmap { margin: 0 calc(var(--gutter) * -1) 48px; overflow: hidden; }
  .flowmap__svg { width: 630px; margin-left: 50%; transform: translateX(-50%); }
  .directory__bar { flex-direction: column; align-items: flex-start; gap: 16px; }
  .tabs { flex-wrap: nowrap; width: calc(100% + var(--gutter) * 2); margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; }
  .directory__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; }
  .journal .directory__grid { gap: 16px; }
  .feature__text { max-width: none; }
  .cta { padding-bottom: 80px; }
  .cta__content { padding: 40px 24px; gap: 32px; }

  .contact { padding: 48px var(--gutter) 80px; }
  .contact__card { padding: 24px; gap: 32px; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .contact__aside { display: flex; }
  .faq { padding: 80px var(--gutter); }
  .faq__item summary { font-size: 17px; padding: 20px 0; }
  .faq__item > .body { padding-right: 0; }
  .post--featured { margin-bottom: 56px; }
  .post--featured .post__title { font-size: 30px; }
  .newsletter { padding: 64px var(--gutter); }
  .article { padding-top: 40px; }
  .article__frame { padding: 12px 12px 48px; }
  .article__cover { aspect-ratio: 4 / 3; }
  .article__meta, .article__body, .author { padding: 0 8px; }
  .article__meta { flex-direction: column; align-items: flex-start; margin-top: 32px; }
  .article__body { margin-top: 40px; }
  .article__quote { font-size: 22px; padding-left: 16px; }
  .author { padding: 20px; margin-left: 8px; margin-right: 8px; }
  .related { padding-bottom: 80px; }
  .related__frame { padding: 40px 16px; }
  .related__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 32px; }
  .related__grid .post:last-child { display: block; }
  .subscribe .btn { padding-left: 12px; gap: 10px; }

  .footer__top { padding: 64px 0 48px; gap: 40px; }
  .footer__nav { gap: 40px 32px; }
  .footer__col { min-width: 0; flex: 1 1 140px; }
  .footer__bottom { flex-wrap: wrap; gap: 16px 24px; padding: 24px 0 32px; }
  .footer__bottom > p { width: 100%; }
  .footer__legal { gap: 20px; }
}

/* =========================================================
   MOBILE MENU (burger + full-viewport white overlay, <= 1080px)
   ========================================================= */
.burger, .menu { display: none; }

@media (max-width: 1080px) {
  .burger {
    position: relative;
    display: block;
    flex: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--white);
    border-radius: 50%;
    transition: border-color .3s ease;
  }
  .burger span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 1.5px;
    margin: -.75px 0 0 -8px;
    border-radius: 1px;
    background: var(--white);
    transition: transform .4s cubic-bezier(.6, 0, .2, 1), background-color .3s ease;
  }
  .burger span:first-child { transform: translateY(-3.5px); }
  .burger span:last-child  { transform: translateY(3.5px); }

  .menu {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--white);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility 0s linear .4s;
  }
  .menu__inner {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: calc(var(--nav-h, 88px) + 24px) var(--gutter) 32px;
  }
  .menu__kicker { margin-bottom: 16px; }
  .menu__list { border-top: 1px solid var(--gray-200); }
  .menu__list li {
    border-bottom: 1px solid var(--gray-200);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .3s ease, transform .3s ease;
  }
  .menu__list a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    color: var(--charcoal);
  }
  .menu__idx { width: 24px; font-size: 13px; letter-spacing: .02em; color: var(--ash); }
  .menu__label { flex: 1; font-size: 48px; line-height: 1.1; font-weight: 300; }
  .menu__chev { color: var(--ash); transition: transform .25s ease, color .25s ease; }
  .menu__list a:hover .menu__chev,
  .menu__list a:focus-visible .menu__chev { color: var(--blueprint); transform: translateX(4px); }
  .menu__footer {
    margin-top: auto;
    padding-top: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    opacity: 0;
    transition: opacity .3s ease;
  }
  .menu__mail { font-size: 15px; letter-spacing: .02em; color: var(--graphite); }

  /* open state */
  .menu-open .menu { opacity: 1; visibility: visible; transition: opacity .4s ease, visibility 0s; }
  .menu-open .menu__list li {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(.1s + var(--i) * .05s);
  }
  .menu-open .menu__footer { opacity: 1; transition: opacity .5s ease .35s; }

  /* while the menu is up the nav floats above it, turning dark on white */
  .menu-active { overflow: hidden; }
  .menu-active .hero { padding-top: var(--nav-h, 88px); }
  .menu-active .nav { position: fixed; z-index: 101; top: 0; left: 0; right: 0; }
  .nav__logo img,
  .nav .btn--white-border,
  .nav__lang { transition: filter .3s ease, opacity .3s ease; }
  .menu-open .nav__logo img { filter: brightness(0) invert(.086); }
  .menu-open .nav .btn--white-border,
  .menu-open .nav__lang { opacity: 0; pointer-events: none; }
  .menu-open .burger { border-color: var(--charcoal); }
  .menu-open .burger span { background: var(--charcoal); }
  .menu-open .burger span:first-child { transform: rotate(45deg); }
  .menu-open .burger span:last-child  { transform: rotate(-45deg); }
}

@media (max-width: 760px) {
  .menu__label { font-size: 40px; }
  .menu__list a { padding: 18px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .btn__icon::before, .btn__icon::after { transition-duration: .01s; }
  .nav__logo img, .footer__logo img, .footer__mark img { transition-duration: .01s; }
  .faq__icon::before, .faq__icon::after { transition-duration: .01s; }
  .flowmap__beams, .flowmap__flare, .flowmap__dot-flash { display: none; }
  .flowmap__square { animation: none; opacity: .6; }
  .menu, .menu__list li, .menu__footer, .burger span { transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* Soft page crossfade: no sliding or zooming between routes. */
::view-transition-group(root) { animation-duration: 360ms; }
::view-transition-old(root) { animation: bird-page-out 360ms cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(root) { animation: bird-page-in 360ms cubic-bezier(.4, 0, .2, 1) both; }
@keyframes bird-page-out { to { opacity: 0; } }
@keyframes bird-page-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Pricing: plan overview followed by a comparison with pinned plan headers. */
.hero--pricing { height: 128px; }
.hero--pricing.hero--no-ticker .hero__inner { height: 100%; padding: 0; }
.pricing-page { color: var(--charcoal); }
.pricing-overview, .pricing-comparison { max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter); }
.pricing-overview { padding-top: 64px; padding-bottom: 96px; }
.pricing-intro { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.pricing-intro .body { color: var(--graphite); }
.pricing-billing { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 32px 0; }
.billing-switch { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--gray-200); border-radius: 40px; background: var(--white); }
.billing-switch button { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 32px; color: var(--graphite); font-size: 14px; transition: background .2s, color .2s; }
.billing-switch button[aria-pressed="true"] { background: var(--charcoal); color: var(--white); }
.billing-switch button span { color: var(--forest-jade); background: var(--ice-mint); border-radius: 16px; padding: 3px 7px; font-size: 11px; font-weight: 500; }
.pricing-billing__note { font-size: 12px; color: var(--ash); }
.pricing-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan-card { display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding: 28px; border: 1px solid var(--gray-200); border-radius: 12px; background: var(--gray-25); }
.plan-card--team { background: #F3F8FF; border-color: #A4C9FB; }
.plan-card--enterprise { background: var(--white); }
.plan-card__top { display: flex; justify-content: space-between; align-items: center; min-height: 28px; }
.plan-card__symbol { display: grid; grid-template-columns: repeat(2, 7px); gap: 3px; color: var(--foundation); }
.plan-card__symbol i { width: 7px; height: 7px; background: currentColor; }
.plan-card--starter .plan-card__symbol i:nth-child(2), .plan-card--starter .plan-card__symbol i:nth-child(4) { opacity: .18; }
.plan-card--team .plan-card__symbol { color: var(--blueprint); }
.plan-card--team .plan-card__symbol i:last-child { opacity: .25; }
.plan-card__badge, .plan-card__eyebrow { font-size: 11px; letter-spacing: .03em; }
.plan-card__eyebrow { color: var(--ash); }
.plan-card__badge { color: var(--blueprint); background: #E0EDFF; padding: 6px 10px; border-radius: 20px; }
.plan-card h2 { font-size: 28px; font-weight: 400; line-height: 1.2; margin-bottom: 8px; }
.plan-card__description { font-size: 14px; line-height: 1.5; color: var(--graphite); }
.plan-card__amount { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-height: 53px; }
.price-value { font-size: 48px; line-height: 1.1; font-weight: 300; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.price-value--custom { font-size: 42px; }
.price-unit { color: var(--graphite); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.plan-card__billing { margin-top: 8px; font-size: 12px; color: var(--ash); min-height: 18px; }
.plan-card__cta { justify-content: space-between; width: 100%; }
.plan-card__features { border-top: 1px solid var(--gray-200); padding-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.plan-card__features li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; }
.price-check { flex: none; margin-top: 2px; color: var(--blueprint); }
.plan-card__compare { display: flex; justify-content: space-between; margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--graphite); }
.plan-card__compare:hover { color: var(--blueprint); }
.pricing-overview__footnote { margin-top: 24px; text-align: center; font-size: 13px; color: var(--ash); }
.pricing-overview__footnote a { color: var(--charcoal); margin-left: 8px; }
.pricing-overview__footnote a:hover { color: var(--blueprint); }
.pricing-comparison { padding-bottom: 72px; scroll-margin-top: 32px; }
.comparison-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.comparison-intro .kicker { margin-bottom: 16px; }
.comparison-intro .body { color: var(--graphite); }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px; line-height: 1.5; }
.compare-label-col { width: 34%; }
.compare-table th, .compare-table td { padding: 18px 24px; border-bottom: 1px solid var(--gray-200); vertical-align: middle; }
.compare-table tbody th { text-align: left; font-weight: 400; color: var(--graphite); }
.compare-table td { text-align: center; }
.compare-table td .price-check { display: inline-block; vertical-align: middle; }
.compare-table [data-plan="team"] { background-color: #F3F8FF; }
.compare-table thead th { position: sticky; top: 0; z-index: 5; background: var(--white); padding-top: 24px; padding-bottom: 24px; border-top: 1px solid var(--gray-200); box-shadow: 0 1px 0 var(--gray-200); font-weight: 400; }
.compare-table thead th[data-plan="team"] { background: #F3F8FF; }
.compare-plan-name { display: block; font-size: 20px; margin-bottom: 8px; }
.compare-plan-price { min-height: 44px; margin-bottom: 12px; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px; color: var(--graphite); }
.compare-plan-price .price-value { font-size: 22px; font-weight: 400; letter-spacing: -.02em; color: var(--charcoal); }
.compare-plan-price .price-unit { font-size: 11px; }
.compare-label-head { text-align: left; }
.compare-label-head > span { display: block; font-size: 16px; margin-bottom: 14px; }
.billing-switch--small button { font-size: 12px; padding: 7px 12px; }
.compare-group th { background: var(--gray-50); color: var(--foundation) !important; font-size: 13px; font-weight: 500 !important; padding-top: 22px; padding-bottom: 22px; }
.price-unavailable { color: #ACACAC; }
.compare-mobile { display: none; }
.pricing-help { max-width: 1280px; margin: 0 auto; padding: 40px; display: flex; justify-content: space-between; align-items: center; gap: 32px; border: 1px solid var(--sky-aqua); border-radius: 12px; background: var(--ice-blue); }
.pricing-help .kicker { margin-bottom: 12px; }
.pricing-help .body { margin-top: 12px; color: var(--graphite); }
@media (max-width: 1360px) { .pricing-help { margin-inline: var(--gutter); } }
@media (max-width: 1080px) {
  .hero--pricing { height: auto; }
  .plan-card { padding: 24px 20px; }
  .plan-card__description { min-height: 42px; }
  .plan-card__amount { flex-direction: column; gap: 4px; min-height: 74px; }
  .plan-card__billing { min-height: 36px; }
  .compare-table th, .compare-table td { padding-inline: 16px; }
  .compare-label-col { width: 31%; }
  .compare-table thead .btn { font-size: 12px; }
}
@media (max-width: 760px) {
  .pricing-overview { padding-top: 40px; padding-bottom: 64px; }
  .pricing-intro { align-items: flex-start; text-align: left; gap: 16px; }
  .pricing-intro .body br { display: none; }
  .pricing-billing { align-items: flex-start; margin-top: 28px; }
  .pricing-plans { grid-template-columns: 1fr; }
  .plan-card { padding: 24px; }
  .plan-card__description, .plan-card__billing { min-height: 0; }
  .plan-card__amount { flex-direction: row; align-items: baseline; min-height: 53px; gap: 8px; }
  .pricing-overview__footnote { text-align: left; line-height: 1.6; }
  .pricing-overview__footnote a { display: block; margin: 4px 0 0; }
  .comparison-intro { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
  .comparison-intro .body br { display: none; }
  .compare-mobile { display: flex; position: sticky; top: 0; z-index: 6; height: 56px; padding: 8px 0; gap: 6px; background: var(--white); border-top: 1px solid var(--gray-200); }
  .compare-mobile button { flex: 1; padding: 8px; font-size: 13px; border-radius: 24px; color: var(--graphite); }
  .compare-mobile button[aria-pressed="true"] { background: var(--charcoal); color: var(--white); }
  .pricing-comparison[data-compare-plan="starter"] [data-plan]:not([data-plan="starter"]),
  .pricing-comparison[data-compare-plan="team"] [data-plan]:not([data-plan="team"]),
  .pricing-comparison[data-compare-plan="enterprise"] [data-plan]:not([data-plan="enterprise"]) { display: none; }
  .compare-table { font-size: 12px; }
  .compare-label-col { width: 47%; }
  .compare-table thead th { top: 56px; padding: 16px 8px; }
  .compare-table tbody th, .compare-table tbody td { padding: 16px 10px; }
  .compare-plan-name { font-size: 18px; }
  .compare-plan-price { min-height: 38px; }
  .compare-label-head > span { font-size: 14px; }
  .billing-switch--small { padding: 3px; gap: 0; }
  .billing-switch--small button { padding: 7px 8px; font-size: 11px; }
  .pricing-help { padding: 28px 24px; flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* Language disclosure: Danish first, English second, on the current route. */
.language { position: relative; flex: none; }
.language__menu { position: absolute; z-index: 110; top: calc(100% + 12px); right: 0; width: 188px; padding: 6px; background: var(--white); color: var(--charcoal); border: 1px solid var(--gray-200); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,29,65,.12); }
.language__menu[hidden] { display: none; }
.language__menu a { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-radius: 6px; font-size: 14px; color: var(--charcoal); opacity: 1; }
.language__menu a:hover, .language__menu a:focus-visible { background: var(--gray-50); }
.language__menu a[aria-current="true"] { background: var(--gray-50); color: var(--charcoal); }
.language__code { font-size: 11px; color: var(--ash); }
.language.is-open .nav__lang-chev { transform: rotate(-90deg); }
.language--footer .language__menu { top: auto; bottom: calc(100% + 12px); }
.hero:has(.language.is-open) { overflow: visible; z-index: 105; }
.contact__card#form { scroll-margin-top: 24px; }
/* Match Pipedrive's 480px form width so its internal auto margins stay left aligned. */
.contact__embed { min-width: 0; width: 100%; max-width: 480px; align-self: flex-start; }
.contact__embed .pipedriveWebForms { min-height: 560px; }
.contact__embed iframe { display: block; width: 100%; border: 0; }
.form-embed-fallback { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--graphite); }
.form-embed-fallback a { color: var(--blueprint); text-decoration: underline; }
@media (max-width: 760px) {
  .language .nav__lang { display: inline-flex; }
  .nav .language .nav__lang { width: 42px; padding: 4px 0; }
  .nav .language__menu { width: 160px; }
  .nav .language .nav__lang > img:first-child { display: none; }
  .nav__col--right { gap: 10px; }
  .nav .btn--white-border { font-size: 12px; }
  .contact__embed .pipedriveWebForms { min-height: 620px; }
  .contact__card:has(.contact__embed) { padding-inline: 12px; }
}
@media (max-width: 380px) {
  .nav .btn--white-border { display: none; }
}