.brand-mark {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: #172b46;
  color: #f4f6f8;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.suite-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  align-items: center;
  gap: clamp(42px, 7vw, 92px);
  padding-block: clamp(62px, 7vw, 88px);
}

.suite-hero h1 {
  max-width: 690px;
  font-size: clamp(2.9rem, 4.6vw, 4.65rem);
  font-weight: 740;
}

.suite-lede {
  max-width: 650px;
  margin: 25px 0 0;
  color: var(--muted);
  font-size: clamp(1.12rem, 2vw, 1.28rem);
  line-height: 1.55;
}

.suite-hero .button { margin-top: 30px; }
.suite-hero .button span { margin-left: 14px; font-size: 1.2rem; }

.suite-index { border-top: 2px solid var(--accent); }
.suite-index-title {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 14px 0 17px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.suite-index-title span { font-variant-numeric: tabular-nums; }
.suite-index > a {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 24px;
  align-items: start;
  gap: 14px;
  padding: 22px 4px;
  border-top: 1px solid #cdd6df;
  color: var(--ink);
  text-decoration: none;
}
.suite-index > a:hover strong,
.suite-index > a:focus-visible strong { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.suite-index-number { padding-top: 4px; color: #67788c; font-size: 0.81rem; font-variant-numeric: tabular-nums; }
.suite-index strong { display: block; font-size: 1.18rem; line-height: 1.25; }
.suite-index small { display: block; margin-top: 5px; color: var(--muted); font-size: 0.92rem; line-height: 1.35; }
.suite-index-arrow { font-size: 1.2rem; line-height: 1; }
.suite-index-note { margin: 0; padding: 17px 4px; border-top: 1px solid #cdd6df; color: var(--muted); font-size: 0.85rem; }

.suite-tools { border-top: 1px solid var(--line); background: #fff; }
.suite-section-heading { padding-top: clamp(62px, 7vw, 88px); padding-bottom: 22px; }
.suite-section-heading h2 { margin: 0; font-size: clamp(2.2rem, 4vw, 3.4rem); }
.suite-tool-row {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(38px, 7vw, 96px);
  padding-block: clamp(44px, 5vw, 68px);
  border-top: 1px solid #d5dde5;
}
.suite-tool-figure { display: block; min-width: 0; color: var(--muted); text-decoration: none; }
.suite-tool-figure > img,
.suite-phone-frame { display: block; width: 100%; height: 285px; overflow: hidden; border: 1px solid #d4dde6; border-radius: 8px; background: #e9eef3; }
.suite-tool-figure > img { object-fit: cover; }
.anatomy-figure > img { object-position: center 44%; background: #0d1920; }
.movement-figure > img { object-position: center; }
.figure-caption { display: block; margin-top: 10px; color: #65758a; font-size: 0.83rem; }
.suite-phone-frame { display: grid; place-items: center; }
.suite-phone-frame img { display: block; width: 124px; height: 269px; border: 4px solid #13263e; border-radius: 15px; object-fit: cover; box-shadow: 0 9px 21px rgba(23, 43, 70, 0.16); }
.suite-tool-type { margin: 0 0 12px; color: var(--accent); font-size: 0.79rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.suite-tool-copy h3 { margin: 0; font-size: clamp(2rem, 3.4vw, 3rem); }
.suite-tool-copy p:not(.suite-tool-type) { max-width: 560px; margin: 16px 0 20px; color: var(--muted); font-size: 1.06rem; line-height: 1.62; }
.suite-text-link { color: var(--accent); font-weight: 750; text-decoration: underline; text-decoration-color: #8a9aad; text-underline-offset: 5px; }
.suite-text-link span { display: inline-block; margin-left: 6px; }
.suite-text-link:hover { text-decoration-color: var(--accent); }

.suite-about-strip { border-top: 1px solid var(--line); background: #e9eef3; }
.suite-about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 9vw, 120px); padding-block: clamp(58px, 7vw, 88px); }
.suite-about-inner h2 { max-width: 430px; margin: 0; font-size: clamp(2rem, 3.8vw, 3rem); }
.suite-about-inner p:not(.eyebrow) { max-width: 590px; margin: 0 0 18px; color: var(--muted); font-size: 1.08rem; }

.suite-document { max-width: 850px; padding-block: clamp(70px, 8vw, 104px); }
.suite-document h1 { margin-bottom: 26px; font-size: clamp(3rem, 6vw, 5rem); }
.suite-document .suite-lede { margin: 0; }
.suite-document section { margin-top: 58px; padding-top: 26px; border-top: 1px solid #cdd6df; }
.suite-document section h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.suite-document section p { max-width: 730px; color: var(--muted); }

@media (max-width: 820px) {
  .suite-hero { grid-template-columns: 1fr; gap: 56px; }
  .suite-index { max-width: 640px; }
  .suite-tool-row { grid-template-columns: 1fr; gap: 26px; }
  .suite-tool-figure { max-width: 650px; }
  .suite-about-inner { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .nav { flex-wrap: wrap; padding-block: 13px; gap: 10px; }
  .nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 2px; }
  .nav-links a { padding: 7px 9px; font-size: 0.83rem; text-align: center; }
  .suite-hero { padding-block: 58px 72px; }
  .suite-hero h1 { font-size: clamp(2.7rem, 10vw, 4rem); }
  .suite-tool-figure > img,
  .suite-phone-frame { height: 235px; }
  .suite-phone-frame img { width: 99px; height: 215px; }
  .footer-content nav { flex-wrap: wrap; }
}

/* The suite leads directly to its working tools. */
.suite-hero{display:block;padding-block:36px 33px}
.suite-hero h1{max-width:1080px;font-size:clamp(2.35rem,3.8vw,3.2rem)}
.suite-hero .suite-lede{max-width:900px;margin-top:13px;font-size:1.06rem}
.suite-hero .creator{margin-bottom:0}
.suite-tools{background:transparent}
.suite-tool-row{padding-block:40px;gap:clamp(30px,6vw,74px)}
.suite-tool-row:first-of-type{border-top:0}
.suite-tool-copy h3{font-size:clamp(1.9rem,3vw,2.6rem)}
.movement-launch{min-height:285px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:16px;background:#0c192b url('hand-tracking-preview.svg') no-repeat right 13px center;background-size:auto 88%;border-radius:12px;text-align:left;text-decoration:none;padding:28px;color:#bdcada;font-size:.9rem}
.movement-launch-action{display:flex;align-items:center;justify-content:center;gap:10px;background:#f4f6f8;color:#172b46;border-radius:8px;padding:13px 18px;font-weight:700;font-size:.96rem}
.movement-launch:hover .movement-launch-action{background:#dae5ef}
.movement-launch:focus-visible{outline:3px solid #6c8cb0;outline-offset:5px}
.gene-preview{display:block;min-width:0;min-height:285px;padding:20px 22px 16px;border:1px solid #d4dde6;border-radius:10px;background:#fff;color:var(--ink);text-decoration:none}
.gene-preview:focus-visible{outline:3px solid #6c8cb0;outline-offset:5px}
.gene-preview-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding-bottom:15px;border-bottom:1px solid #dce4ea}
.gene-preview-top strong{font-size:.92rem}
.gene-preview-top small{color:#526174;font-size:.75rem}
.gene-preview-grid{display:grid;grid-template-columns:86px repeat(7,minmax(0,1fr));align-items:center;column-gap:3px;row-gap:6px;margin-top:12px}
.gene-preview-grid>span{min-width:0;text-align:center;font-size:.7rem;font-weight:690}
.gene-preview-grid .gene-preview-name{text-align:left;font-size:.8rem;font-weight:750}
.gene-preview-grid .gene-preview-day{color:#526174;font-size:.69rem}
.gene-preview-cell{display:block;height:25px;border-radius:2px;background:var(--preview-bg,#f4f6f8)}
.gene-preview-note{display:block;margin-top:13px;color:#526174;font-size:.75rem}
.gene-preview:hover{border-color:#8fa4b6}
.suite-about-inner{padding-block:46px}
.suite-about-inner h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:650px){.suite-hero{padding-block:30px 29px}.suite-hero h1{font-size:2.05rem}.suite-tool-row{padding-block:32px}.movement-launch{min-height:235px}.movement-launch>span:last-child{max-width:130px}.gene-preview{min-height:0;padding:17px 15px}.gene-preview-grid{grid-template-columns:70px repeat(7,minmax(0,1fr));column-gap:2px}.gene-preview-top small{font-size:.7rem}}