/* ==========================================================================
   GIM — landing page
   Implemented 1:1 against the 1920 x 9936 artboard in design/index.png.
   Root font-size is 1rem = 10 design px at a 1920px viewport, so every value
   below is simply "design px / 10". The page is pixel-faithful at 1920 and
   scales proportionally down to ~1230px, then switches to fluid layouts.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts */
/* PT Sans is the artboard's typeface and carries all Latin copy. SolaimanLipi
   follows it in the stack so Bengali still resolves — PT Sans is subset to
   Latin only, so Bengali codepoints fall through to it automatically.
   Each is subset to the range it is actually reached for: PT Sans to Latin,
   SolaimanLipi to the Bengali block. Anything outside both lands on the
   system fallback at the end of the stack rather than on tofu. */
@font-face {
  font-family: "PT Sans";
  src: url("../fonts/PTSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PT Sans";
  src: url("../fonts/PTSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SolaimanLipi";
  src: url("../fonts/SolaimanLipi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SolaimanLipi";
  src: url("../fonts/SolaimanLipi-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- tokens */
:root {
  --navy:      #003250;   /* body copy, logo, nav, badges */
  --navy-band: #053251;   /* "How to Get Started" band     */
  --accent:    #2F7DAC;   /* highlighted words in headings */
  --yellow:    #FFCA0B;   /* primary buttons               */
  --mark:      #FFC800;   /* logo mark, feature icons      */
  --tint:      #F1F5F9;   /* alternating section backdrop  */
  --hairline:  #E3E3E3;   /* header rule                   */
  --muted:     #647A88;   /* footer column headings        */
  --legal:     #9B9B9B;   /* footer fine print             */

  --font: "PT Sans", "SolaimanLipi", "Segoe UI", Helvetica, Arial, sans-serif;

  /* content columns, all centred (design px / 10) */
  --w-main:     168rem;   /* hero, splits, get started : x120..1800 */
  --w-products: 135.4rem; /* product cards             : x283..1637 */
  --w-features: 113.4rem; /* savings grid              : x393..1527 */
  --w-apps:     144rem;   /* app download rows         : x240..1680 */
  --w-clients:  123.6rem; /* client logo sheet         : x342..1578 */
  --w-footer:   148rem;   /* footer columns            : x220..1700 */
}

/* 1rem === 10 design px, capped at the artboard width */
html {
  font-size: clamp(6.4px, calc(100vw / 192), 10px);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* The header is sticky and a constant 8.8rem tall at every viewport, so an
   anchor that scrolled flush to the top would land 88px of itself underneath
   it. Hold every jump target clear of the header, with a little air. */
[id] { scroll-margin-top: 10rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 2.4rem;
  line-height: 1.4;
  color: var(--navy);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }

/* ------------------------------------------------------------ utilities */
.container {
  width: min(var(--w-main), 100% - 8rem);
  margin-inline: auto;
}
.container--products { --w-main: var(--w-products); }
.container--features { --w-main: var(--w-features); }
.container--features4 { --w-main: 145.6rem; }   /* the 4-up product grids */
.container--apps     { --w-main: var(--w-apps); }
.container--clients  { --w-main: var(--w-clients); }
.container--footer   { --w-main: var(--w-footer); }

.section--tint { background: var(--tint); }
.center { text-align: center; }
.accent { color: var(--accent); }

.h2 {
  font-size: 5.25rem;
  line-height: 6.1rem;
  font-weight: 700;
}

/* the product artboards run the section heading larger than the home page */
.page-product .h2 { font-size: 5.6rem; }

/* ------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 23.9rem;
  height: 5.3rem;
  border: 0;
  border-radius: .5rem;
  background: var(--yellow);
  color: var(--navy);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.btn:hover  { background: #ffd63f; }
.btn:active { transform: translateY(1px); }

.btn--sm {                      /* "Click here" in the Get Started band */
  width: 15.3rem;
  height: 4.3rem;
  border-radius: .4rem;
  font-size: 2.15rem;
  gap: .8rem;
}
.btn--sm .ico { width: 1.6rem; height: 1.6rem; flex: none; }

.btn--nav {                     /* header "Log in" */
  width: 10.9rem;
  height: 4.5rem;
  border-radius: .45rem;
  background: var(--navy);
  color: #fff;
  font-size: 1.75rem;
}
.btn--nav:hover { background: #08466b; }

/* -------------------------------------------------------------- top bar */
.topbar {
  background: var(--navy);
  color: #fff;
  font-size: 1.65rem;
}
.topbar__inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2.6rem;
  height: 4.2rem;
}
.topbar a {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
}
.topbar a:hover { text-decoration: underline; }
.topbar .ico { width: 1.9rem; height: 1.9rem; flex: none; }

/* --------------------------------------------------------------- header */
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--hairline);
}
.header__inner {
  display: flex;
  align-items: center;
  height: 8.7rem;          /* + 1px rule = the 88 band */
}
.header__logo { width: 10.9rem; flex: none; }
.header__logo img { width: 100%; height: auto; }

.nav {
  display: flex;
  gap: 4rem;
  margin-inline: auto;
  font-size: 2rem;
  font-weight: 700;
}
.nav a {
  padding-block: .6rem;
  border-bottom: .2rem solid transparent;
}
.nav a:hover { border-bottom-color: var(--yellow); }

.header__actions {
  display: flex;
  align-items: center;
  gap: 2.6rem;
}
.lang { position: relative; }
.lang__btn,
.lang__opt {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: 1.7rem;
  font-weight: 700;
  cursor: pointer;
}
.lang img { width: 1.9rem; height: 1rem; border-radius: .1rem; flex: none; }
.lang .ico { width: 1.34rem; height: .71rem; flex: none; transition: transform .18s ease; }
.lang__btn[aria-expanded="true"] .ico { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: calc(100% + 1.2rem);
  right: 0;
  z-index: 50;
  padding: .6rem 0;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: .5rem;
  box-shadow: 0 1rem 2.4rem rgba(0, 50, 80, .16);
}
.lang__menu[hidden] { display: none; }
.lang__opt {
  width: 100%;
  padding: .9rem 1.6rem;
  white-space: nowrap;
}
.lang__opt:hover  { background: var(--tint); }
.lang__opt[aria-checked="true"] { color: var(--accent); }

.nav-toggle { display: none; }

/* ----------------------------------------------------------------- hero */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 60.5rem;
  display: flex;
  align-items: center;
  isolation: isolate;
}
/* photo: 1258x834 dropped at (791, -74) inside the 1920x605 band */
.hero__media {
  position: absolute;
  z-index: -3;
  left: 41.198%;
  top: -12.231%;
  width: 65.521%;
}
.hero__media img { width: 100%; height: auto; }

/* white wash: opaque up to x791, clear by x1363 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(to right,
              #fff 0, #fff 41.22%, rgba(255, 255, 255, 0) 71%);
}
.hero__phone {
  position: absolute;
  z-index: -1;
  left: 55.417%;
  top: 7.22%;
  width: 34.59%;
  height: auto;
  pointer-events: none;
}
.hero__inner { position: relative; }
.hero h1 {
  font-size: 6.95rem;
  line-height: 7.6rem;
  font-weight: 700;
}
.hero p {
  margin-top: 1.7rem;
  max-width: 75rem;
  font-size: 2.4rem;
  line-height: 3.9rem;
}
.hero .btn { margin-top: 1.8rem; }

/* -------------------------------------------------- product page hero */
/* The artboard stacks a photo, then #07314F at 87%, over a white base;
   0.13 x white is what gives the band its lighter navy at the left edge. */
.phero {
  position: relative;
  overflow: hidden;
  min-height: 82.1rem;
  display: flex;
  align-items: center;
  isolation: isolate;
  background: #fff;
  color: #fff;
}
.phero__photo {                 /* 1645x977 dropped at (275, -21) in the band */
  position: absolute;
  z-index: -2;
  left: 14.323%;
  top: -2.558%;
  width: 85.677%;
  height: 119.001%;
  object-fit: cover;
}
.phero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(7, 49, 79, .87);
}
.phero__art {
  position: absolute;
  z-index: 1;
  left: 58.617%;
  top: 18.156%;
  width: 31.282%;
  height: auto;
  pointer-events: none;
}
/* Control Tower drops a full-bleed photo and a wider artwork than Bidding */
.phero--tower .phero__photo { left: 0; top: -27.893%; width: 100%; height: 155.907%; }
.phero--tower .phero__art   { left: 53.146%; top: 19.315%; width: 39.354%; }
/* Asset Management: full-bleed photo, artwork a touch lower than Tower's */
.phero--asset .phero__photo { left: 0; top: -30.938%; width: 100%; height: 161.876%; }
.phero--asset .phero__art   { left: 53.251%; top: 21.002%; width: 39.206%; }
/* each hero's measure is the one that reproduces its artboard's heading wrap */
.phero--tower .phero__text { max-width: 86rem; }
.phero--asset .phero__text { max-width: 77rem; }
.phero__inner { position: relative; }
/* the measure that gives the artboard's two-line heading and lead */
.phero__text { max-width: 72rem; }
.phero h1 {
  font-size: 8rem;
  line-height: 10.4rem;
  font-weight: 700;
}
.phero p {
  margin-top: 2.4rem;
  font-size: 2.4rem;
  line-height: 3.8rem;
}
.phero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 2.1rem;
  margin-top: 1.8rem;
}
/* both hero buttons size to their label instead of the fixed nav width */
.btn--auto  { width: auto; padding-inline: 2.1rem; }
.btn--ghost { background: #fff; color: var(--navy); }
.btn--ghost:hover { background: #eaf1f6; }
.btn--ghost .ico { width: 1.6rem; height: 1.6rem; flex: none; }

/* ------------------------------------------------------------- products */
.products { padding-block: 6.4rem 6rem; }
.products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5.967rem;
  margin-top: 4.7rem;
}
.card {
  background: #fff;
  border-radius: .5rem;
  box-shadow: -.3rem .9rem 2rem rgba(0, 0, 0, .14);
  display: flex;
  flex-direction: column;
  padding-bottom: 1.73rem;
}
.card__media { position: relative; }
.card__frame {                  /* clips the photo but not the badge */
  position: relative;
  height: 11rem;
  overflow: hidden;
  border-radius: .5rem .5rem 0 0;
}
.card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the control-tower shot sits low and very slightly wide in the artboard */
.card__frame img.is-low {
  position: absolute;
  left: 0;
  top: -66.915%;
  width: 101.46%;
  max-width: none;       /* the artboard runs it 1.46% past the frame */
  height: 205.2%;
  object-fit: fill;
}
.card__badge {
  position: absolute;
  left: 50%;
  bottom: -1.6rem;
  transform: translateX(-50%);
  width: 6.2rem;
  height: 6.2rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: -1.3rem .9rem 1.1rem rgba(0, 0, 0, .07);
  display: grid;
  place-items: center;
}
.card__badge img { width: 2.6rem; height: auto; }

.card h3 {
  margin-top: 3.81rem;
  padding-inline: 1.6rem;
  font-size: 3.07rem;
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
}
/* the title goes to the same page as Learn more; it inherits the heading's
   colour and weight, so hover is the only thing marking it as a link */
.card h3 a:hover,
.card h3 a:focus-visible { text-decoration: underline; }
.card__list {
  margin-top: 2rem;
  margin-bottom: auto;   /* cards share a row height; links stay on the baseline */
  padding-inline: 2rem;
  font-size: 2.34rem;
  line-height: 3.7rem;
  text-align: left;
}
.card__list li {
  position: relative;
  /* the right inset sets the wrap points the artboard uses */
  padding-left: 3.6rem;
  padding-right: 1.5rem;
}
.card__list li::before {
  content: "";
  position: absolute;
  left: 1.4rem;
  top: 1.62rem;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: var(--navy);
}
.card__links {
  display: flex;
  justify-content: space-between;
  gap: 1.6rem;
  margin-top: 1.85rem;
  padding-inline: 2rem;
  font-size: 1.8rem;
  line-height: 2.52rem;
}
.card__links a {
  position: relative;
  line-height: inherit;
}
.card__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .4rem;
  height: .2rem;
  background: #07314F;          /* "Learn more" carries a flat rule */
}
/* the artboard runs a left-to-right gradient through "Watch video" and its rule */
.card__links a:first-child::after {
  background: linear-gradient(to right, #07314F, #1070B5);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .card__links a:first-child {
    background-image: linear-gradient(to right, #07314F, #1070B5);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}
@media (forced-colors: active) {   /* transparent text would disappear */
  .card__links a:first-child { background-image: none; color: CanvasText; }
}
.products > .container > .btn { margin-top: 5rem; }

/* -------------------------------------------------------- proven savings */
.savings { padding-block: 6.3rem 6rem; }
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 9.2rem;
  margin-top: 7.13rem;
  text-align: center;
}
.feature__icon {
  height: 5.3rem;
  display: grid;
  place-items: center;
}
.feature__icon img { max-height: 5.3rem; width: auto; }
.feature h3 {
  margin-top: 3.47rem;
  font-size: 2.6rem;
  line-height: 3.125rem;   /* absolute: the row pitch is the artboard's, not the type's */
  font-weight: 700;
}
.feature p {
  max-width: 30rem;
  margin: .95rem auto 0;
  font-size: 2.4rem;
  line-height: 2.9rem;
}
.features--4 { grid-template-columns: repeat(4, 1fr); }
.savings .btn { margin-top: 6.95rem; }

/* --------------------------------------------------------- split blocks */
/* media 780 + gutter 190 + copy 710 = the 1680 column                     */
.split {
  display: grid;
  grid-template-columns: 46.4286% 42.2619%;
  column-gap: 11.3095%;
  align-items: center;
  padding-block: 6rem;
}
/* flipped: 70 offset + copy 710 + gutter 120 + media 780. The offset and
   gutter are empty tracks so every width stays a share of the 1680 column. */
.split--flip {
  grid-template-columns: 4.1667% 42.2619% 7.1429% 46.4286%;
  column-gap: 0;
}
.split--flip .split__text  { grid-column: 2; }
.split--flip .split__media { grid-column: 4; }
.split__media img { width: 100%; height: auto; }
.split__text { max-width: 65rem; }   /* the copy measure in the artboard */
.split h2 {
  font-size: 5.25rem;
  line-height: 6.1rem;
  font-weight: 700;
}
.checklist { margin-top: 1.33rem; }
.checklist li {
  /* the artboard sets a 58 item pitch as 29 leading + 29 gap, so wrapped
     lines stay tight instead of inheriting the full item spacing */
  margin-bottom: 2.9rem;
  font-size: 2.4rem;
  line-height: 2.9rem;
}
.checklist li:last-child { margin-bottom: 0; }
/* the tick sits inline, so wrapped lines return to the left margin */
.checklist li::before {
  content: "";
  display: inline-block;
  vertical-align: -.4rem;
  width: 2.4rem;
  height: 2.4rem;
  margin-right: .6rem;
  background: url("../icons/check-green.svg") no-repeat center / contain;
}
.split .btn { margin-top: 1.55rem; }

/* ---------------------------------------------------------- get started */
.getstarted {
  position: relative;
  overflow: hidden;
  min-height: 65rem;
  display: flex;
  align-items: center;
  color: #fff;
  isolation: isolate;
}
.getstarted__photo {
  position: absolute;
  z-index: -2;
  left: 44.688%;
  top: -15.44%;
  width: 55.313%;
  height: 142.615%;
  object-fit: cover;
}
.getstarted::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right,
              var(--navy-band) 0, var(--navy-band) 45.94%,
              rgba(102, 102, 102, 0) 82.53%);
}
/* percentage margins resolve against .getstarted__inner, giving the 70 offset */
.getstarted__inner > * { margin-left: 4.1667%; }
.getstarted h2 {
  font-size: 5.25rem;
  line-height: 6.1rem;
  font-weight: 700;
}
.getstarted h2 .hl { color: var(--mark); }

.getstarted__cta {
  display: flex;
  align-items: center;
  margin-top: 2.62rem;
}
.getstarted__cta span {
  font-size: 2rem;
  line-height: 2.8rem;
}
.getstarted__cta .btn { margin-left: 2.2rem; }

.getstarted__then {
  margin-top: 2.61rem;
  padding-left: 1.4rem;
  font-size: 2.25rem;
  line-height: 3rem;
  font-weight: 700;
}
.steps { margin-top: 1.84rem; }
.steps li {
  margin-bottom: 1rem;
  font-size: 2rem;
  line-height: 2.8rem;
}
.steps li:last-child { margin-bottom: 0; }

.tick {                         /* white circled check, 20x20 */
  position: relative;
  padding-left: 3.1rem;
}
.tick::before {
  content: "";
  position: absolute;
  left: 0;
  top: .4rem;
  width: 2rem;
  height: 2rem;
  background: currentColor;
  -webkit-mask: url("../icons/ico-check-circle.svg") no-repeat center / contain;
          mask: url("../icons/ico-check-circle.svg") no-repeat center / contain;
}

/* ----------------------------------------------------------------- apps */
.apps { padding-block: 10.38rem 10rem; }
.apps__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5rem;
  margin-top: 4.72rem;
}
.app-link {
  display: flex;
  align-items: center;
  height: 8.2rem;
  padding-inline: 1.6rem 1.8rem;
  background: #fff;
  border-radius: .4rem;
  transition: box-shadow .18s ease, transform .18s ease;
}
.app-link:hover {
  box-shadow: 0 .6rem 2rem rgba(0, 50, 80, .14);
  transform: translateY(-.2rem);
}
.app-link__mark {
  width: 5.956rem;
  height: 5.956rem;
  flex: none;
  border-radius: .4rem;
}
.app-link span {
  margin-left: 1.54rem;
  font-size: 2rem;
  font-weight: 700;
}
.app-link .ico {
  width: 1.6rem;
  height: 1.6rem;
  margin-left: auto;
  flex: none;
}

/* -------------------------------------------------------------- clients */
.clients { padding-block: 10.38rem 10rem; }
.clients p.sub {
  margin-top: 1.33rem;
  font-size: 2.4rem;
  line-height: 3rem;
}
.clients__logos { margin-top: 5.19rem; }
.clients__logos img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
}

/* --------------------------------------------------------------- footer */
.footer {
  background: var(--navy);
  color: #fff;
  padding-block: 6.05rem 4.97rem;
}
.footer__grid {                 /* columns start at x220 / 886 / 1235 / 1554 */
  display: grid;
  grid-template-columns: 66.6rem 34.9rem 31.9rem auto;
}
.footer__logo { width: 10.9rem; }
.footer h3 {
  margin: 0 0 1.8rem;
  font-size: 2.08rem;
  line-height: 2.6rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
}
.footer li {
  margin-bottom: 1.8rem;
  font-size: 2rem;
  line-height: 2.6rem;
}
.footer li:last-child { margin-bottom: 0; }
.footer li a {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
}
.footer li a:hover { color: var(--yellow); }
.footer .ico { width: 1.9rem; height: 1.9rem; flex: none; }

.socials {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  margin-top: .5rem;
}
.socials a { display: block; }
.socials svg { height: 2.9rem; width: auto; }
.socials a:hover { color: var(--yellow); }

.footer__legal {
  margin-top: 4.68rem;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: var(--legal);
}

/* ------------------------------------------------------------ about page */
/* This artboard sets its headings, card titles and names in the regular
   weight, where the home and product pages set them bold. Measured against
   design/about_us.png four ways — heading, card title, name, and a
   side-by-side of the letterforms — so the lighter treatment is deliberate,
   not a rendering artefact. Only the hero headline is bold. */
.page-about .h2 {
  font-size: 5.45rem;
  line-height: 6.1rem;
  font-weight: 400;
}
.page-about .feature h3 { font-size: 2.8rem; font-weight: 400; }
.page-about .feature p  { margin-top: 1.25rem; font-size: 2.6rem; line-height: 2.8rem; max-width: 42rem; }
.page-about .feature__icon { height: 5rem; }
.page-about .feature__icon img { max-height: 5rem; }

/* hero: the same photo-plus-navy treatment as the product heroes, at the
   lighter .63 the artboard uses rather than their .87 */
.ahero {
  position: relative;
  overflow: hidden;
  min-height: 82.2rem;
  display: flex;
  align-items: center;
  color: #fff;
  isolation: isolate;
}
.ahero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ahero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(7, 49, 79, .63);
}
.ahero__inner { padding-block: 12.2rem 12.2rem; }
.ahero h1 {
  /* the measure that reproduces the artboard's two-line break */
  max-width: 100rem;
  font-size: 7.9rem;
  line-height: 10.5rem;
  font-weight: 700;
}
.ahero p {
  max-width: 93rem;
  margin-top: 1.5rem;
  font-size: 2.4rem;
  line-height: 3.8rem;
}
.ahero .btn { margin-top: 2.7rem; }

/* ----------------------------------------------- disrupting the deadlocks */
.deadlocks { padding-block: 10.3rem 10.1rem; }
.deadlocks__art {
  width: 120rem;
  height: auto;
  margin: 5.5rem auto 0;
}
.deadlocks p {
  max-width: 145rem;
  margin: 4.9rem auto 0;
  font-size: 2.4rem;
  line-height: 3.8rem;
}

/* --------------------------------------------------------------- growth */
.growth { padding-block: 6.2rem 6rem; }
.growth .features { margin-top: 8.1rem; row-gap: 0; }
.growth .btn { margin-top: 7.1rem; }

/* ----------------------------------------------------------------- team */
/* photo 44.6667 + gutter 5 + ... = the 144 column, same as the app rows */
.container--team { --w-main: 144rem; }
.team { padding-block: 10.4rem 10.1rem; }
/* Six columns rather than three, so the second row's two cards can sit half a
   card off and land centred without narrowing them: 6*19.833 + 5*5 = the 144
   column, and a card spanning two of them is 44.667 wide, as the artboard has
   it. Offsetting with a margin instead would shrink the cards it moves. */
.team__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5.2rem 5rem;
  margin-top: 5.5rem;
  text-align: left;
}
.member { grid-column: span 2; }
.member:nth-child(4) { grid-column: 2 / span 2; }
.member:nth-child(5) { grid-column: 4 / span 2; }
.member__photo {
  width: 100%;
  aspect-ratio: 446.667 / 529.324;
  height: auto;
  object-fit: cover;
  border-radius: .2rem;
}
.member h3 {
  margin-top: 3rem;
  font-size: 2.6rem;
  line-height: 3rem;
  font-weight: 400;
}
.member__role {
  margin-top: .9rem;
  font-size: 2.7rem;
  line-height: 3rem;
}
.member ul {
  margin-top: 1rem;
  list-style: disc;
  /* the artboard indents the text 32 and sets the marker at 13 */
  padding-left: 3.2rem;
  font-size: 2.2rem;
  line-height: 2.5rem;
  color: #696969;
}
.member li { padding-left: 0; }

/* ---------------------------------------------------------------- press */
.press { padding-block: 6.2rem 8.8rem; }
.press__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 9.3rem;
}
.press__row img { width: auto; height: auto; }
.press__row img:nth-child(1) { width: 29.1rem; }
.press__row img:nth-child(2) { width: 53.5rem; }
.press__row img:nth-child(3) { width: 19.4rem; }

/* the About page's own narrow-viewport rules; the shared ones cover the rest */
@media (max-width: 900px) {
  .ahero { min-height: 0; }
  .ahero__inner { padding-block: 7rem; }
  .ahero h1 { max-width: none; font-size: 5.6rem; line-height: 1.18; }
  .ahero p { max-width: none; margin-top: 2rem; }
  .deadlocks { padding-block: 6rem 7rem; }
  .deadlocks__art { width: 100%; margin-top: 3.5rem; }
  .deadlocks p { margin-top: 4rem; }
  .growth .features { margin-top: 5.5rem; row-gap: 6rem; }
  .team { padding-block: 6rem 7rem; }
  /* two across, and the odd one out no longer needs centring */
  .team__grid { grid-template-columns: repeat(2, 1fr); gap: 6rem 5rem; }
  .member,
  .member:nth-child(4),
  .member:nth-child(5) { grid-column: auto; }
  .press { padding-block: 5rem 6rem; }
  .press__row { margin-top: 6rem; }
  /* proportional rather than fixed, so the row keeps fitting as it narrows;
     the 13% left over becomes the two gaps */
  .press__row img:nth-child(1) { width: 25%; }
  .press__row img:nth-child(2) { width: 46%; }
  .press__row img:nth-child(3) { width: 16%; }
}
@media (max-width: 620px) {
  .ahero h1 { font-size: 4.4rem; }
  .team__grid { grid-template-columns: 1fr; gap: 6rem; max-width: 44.7rem; margin-inline: auto; }
  /* the logos are far too wide to sit in a row on a phone */
  .press__row { flex-direction: column; align-items: center; gap: 5rem; }
  .press__row img:nth-child(1) { width: 26rem; }
  .press__row img:nth-child(2) { width: 40rem; }
  .press__row img:nth-child(3) { width: 17rem; }
}

/* ----------------------------------------------------------- legal pages */
/* Privacy Policy and Terms of Use have no artboard — they are long-form
   documents rather than marketing pages, so they get a reading measure and a
   plain hierarchy instead of the display scale used everywhere else. */
.legal { padding-block: 8rem 10rem; }
.legal__inner { --w-main: 104rem; }
.legal h1 {
  font-size: 5.6rem;
  line-height: 6.6rem;
  letter-spacing: -.02em;
}

.legal__section { margin-top: 6.4rem; }
.legal__section h2 {
  font-size: 3.2rem;
  line-height: 4.2rem;
  margin-bottom: 2.4rem;
}
.legal__section p {
  font-size: 2.2rem;
  line-height: 3.6rem;
  margin-top: 1.8rem;
}
/* The clause number and its text are two cells of a grid rather than a hanging
   indent. Wrapped lines then align exactly — a text-indent hack puts the first
   line 5px off, because the space after the number is a rendered character —
   and a copied clause keeps the number apart from the sentence instead of
   running them together as "1.1These". */
.legal__clause {
  display: grid;
  grid-template-columns: 7rem 1fr;
}
.legal__clause.legal__sub {
  grid-template-columns: 9rem 1fr;
  margin-left: 7rem;
}
.legal__num { font-weight: 700; }
.legal__section a { color: var(--accent); text-decoration: underline; }

.legal__copyright {
  margin-top: 8rem;
  padding-top: 3.2rem;
  border-top: 1px solid var(--hairline);
  font-size: 1.8rem;
  line-height: 2.6rem;
  color: var(--legal);
}

/* the rem floor makes 2.2rem only ~14px on a phone, which is too small for a
   document this long, so the reading sizes go up as the viewport narrows */
@media (max-width: 900px) {
  .legal { padding-block: 5.5rem 7rem; }
  .legal h1 { font-size: 4.4rem; line-height: 5.4rem; }
  .legal__section h2 { font-size: 3.6rem; line-height: 4.6rem; }
  .legal__section p { font-size: 2.6rem; line-height: 4.2rem; }
  .legal__copyright { font-size: 2.2rem; line-height: 3.2rem; }
}
@media (max-width: 620px) {
  /* the extra indent on sub-clauses costs more than it gives once the measure
     is this narrow, so only the number column is kept */
  .legal__clause.legal__sub { margin-left: 0; }
}

/* ==========================================================================
   বাংলা deltas. SolaimanLipi sits smaller per em than PT Sans, and the Bangla
   artboard compensates in a few places rather than globally. These are the
   only rules that measured differently against design/index-bn.svg; every
   other size matched the shared scale.
   ========================================================================== */
/* Bangla needs more room above the matra line, so the artboard gives its
   section headings a taller line box */
:lang(bn) .h2,
:lang(bn) .split h2,
:lang(bn) .getstarted h2 { line-height: 6.8rem; }
:lang(bn) .card h3    { font-size: 3.24rem; }
:lang(bn) .card__list { font-size: 2.47rem; }
/* the English right inset squeezes Bangla into an extra wrap per item */
:lang(bn) .card__list li { padding-right: 0; }
:lang(bn) .feature p  { margin-top: 1.3rem; line-height: 3.1rem; }
:lang(bn) .footer li  { line-height: 2.9rem; }
:lang(bn) .legal h1   { line-height: 7.6rem; }

/* ==========================================================================
   Responsive — below the artboard the rem scale bottoms out, so the layout
   reflows instead of shrinking further.
   ========================================================================== */
/* Narrower than the artboard: every content column goes fluid, and the split
   gutters tighten. The rem scale is already at its 6.4px floor here, so the
   root size is deliberately left alone — bumping it would grow the type as
   the window shrinks. */
@media (max-width: 1180px) {
  :root {
    --w-products: 100%;
    --w-features: 100%;
    --w-apps:     100%;
    --w-clients:  100%;
    --w-footer:   100%;
  }
  .products__grid { gap: 4rem; }
  .features { column-gap: 3rem; }

  /* tracks still sum to 100%; :not() keeps this off the four-track flip */
  .split:not(.split--flip) {
    grid-template-columns: 48% 44%;
    column-gap: 8%;
  }
  .split--flip { grid-template-columns: 4% 44% 4% 48%; }
  .split__text { max-width: none; }

  /* the artboard gives column 1 a 666px empty gutter that no longer fits */
  .footer__grid {
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    gap: 4rem;
  }
}

@media (max-width: 900px) {
  html { font-size: 7px; }
  .container { width: min(var(--w-main), 100% - 5rem); }

  /* header collapses to a disclosure menu */
  .header__inner { position: relative; }
  .nav {
    display: none;
    position: absolute;
    inset: 8.8rem 0 auto;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 1rem 0 2rem;
    background: #fff;
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 1rem 2.4rem rgba(0, 50, 80, .08);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 1.2rem 0; border-bottom: 0; }
  .nav-toggle {
    display: grid;
    place-content: center;
    gap: .5rem;
    width: 4.4rem;
    height: 4.4rem;
    margin-left: auto;
    margin-right: 2rem;
    padding: 0;
    border: 0;
    border-radius: .4rem;
    background: transparent;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    width: 2.4rem;
    height: .25rem;
    background: var(--navy);
  }
  .header__actions { gap: 1.6rem; }

  /* hero stacks: copy first, artwork underneath */
  .hero { min-height: 0; display: flex; flex-direction: column; }
  .hero__inner { order: 1; padding-block: 5rem 0; }
  .hero__media { order: 2; }
  .hero h1 { font-size: 5.2rem; line-height: 1.15; }
  .hero p  { font-size: 2.4rem; line-height: 1.6; max-width: none; }
  .hero__media {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-top: 4rem;
  }
  .hero__phone { display: none; }
  .hero::before { display: none; }   /* no wash once the photo sits on its own */

  .products__grid { grid-template-columns: 1fr; max-width: 46rem; margin-inline: auto; }
  .features { grid-template-columns: repeat(2, 1fr); row-gap: 6rem; }

  /* :not() matches the 1180 rule's specificity, so it has to be repeated here */
  .split:not(.split--flip),
  .split--flip {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 4rem;
    padding-block: 5.5rem;
  }
  .split__media,
  .split--flip .split__media { order: 1; grid-column: 1; }
  .split__text,
  .split--flip .split__text  { order: 2; grid-column: 1; }
  .split__media img { max-width: 52rem; margin-inline: auto; }
  .split h2 { font-size: 4rem; line-height: 1.22; }

  .getstarted { min-height: 0; display: block; }
  .getstarted__inner { padding: 5.5rem 0; }
  .getstarted__inner > * { margin-left: 0; }
  .getstarted__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    left: auto;
    top: auto;
    opacity: .5;
  }
  .getstarted::before {
    background: linear-gradient(to right,
                var(--navy-band) 0, var(--navy-band) 45%,
                rgba(5, 50, 81, .72) 100%);
  }
  .getstarted h2 { font-size: 4rem; line-height: 1.22; }

  .apps__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .split__text { max-width: none; }

  /* product hero stacks: copy first, artwork underneath */
  .phero { min-height: 0; display: flex; flex-direction: column; }
  .phero__inner { order: 1; padding-block: 5.5rem 0; }
  .phero__text { max-width: none; }
  .phero h1 { font-size: 5.6rem; line-height: 1.18; }
  .phero__art {
    order: 2;
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 52rem;
    margin: 4rem auto 0;
  }
  .phero__photo { position: absolute; inset: 0; left: auto; top: auto; width: 100%; height: 100%; }
  /* Tower and Asset place their hero art and photo with their own rules, which
     out-specify the two above and so survived into the stacked layout — the
     artwork stayed absolutely positioned and ran off the right edge. Undo the
     placement here at matching specificity; the sizing above still applies. */
  .phero--tower .phero__art,
  .phero--asset .phero__art { left: auto; top: auto; width: 100%; }
  .phero--tower .phero__photo,
  .phero--asset .phero__photo { left: auto; top: auto; width: 100%; height: 100%; }
}

@media (max-width: 620px) {
  html { font-size: 6.4px; }
  .topbar__inner {
    flex-wrap: wrap;
    justify-content: center;
    height: auto;
    padding-block: .9rem;
    gap: .4rem 2.4rem;
  }
  .hero h1 { font-size: 4.4rem; }
  .h2, .split h2, .getstarted h2 { font-size: 3.6rem; line-height: 1.2; }
  .features { grid-template-columns: 1fr; }
  .feature p { max-width: 34rem; }
  .footer__grid { grid-template-columns: 1fr; }
  /* stay content-width when stacked, so each rule hugs its own label */
  .card__links { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .btn { width: 100%; max-width: 28rem; }
  .getstarted__cta { flex-wrap: wrap; gap: 1.4rem; }
  .getstarted__cta .btn { margin-left: 0; width: 15.3rem; }

  .phero h1 { font-size: 4.4rem; }
  .phero p  { line-height: 1.6; }
  .phero__cta { gap: 1.4rem; }
}

/* --------------------------------------------------------------------------
   Touch devices. The artboard specifies desktop only, and scaling its sizes
   down proportionally shrinks hit areas exactly where they need to be biggest
   — a 53px CTA lands at 34px on a phone. These are absolute px on purpose:
   touch targets must not track the rem scale.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .btn        { height: auto; min-height: 48px; padding-block: .8rem; }
  .btn--nav   { height: auto; min-height: 40px; }
  .btn--sm    { height: auto; min-height: 44px; }
  .lang__btn  { min-height: 44px; }
  .lang__opt  { min-height: 44px; }
  .nav-toggle { width: 44px; height: 44px; }
  .nav a      { padding-block: 1.6rem; }

  /* widen the hit area without shifting the text or the underline */
  .topbar a,
  .card__links a,
  .footer li a { position: relative; }
  .topbar a::before,
  .card__links a::before,
  .footer li a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  .socials a {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
  }
}