/* ============================================================
   Watch Guide — "Calibre" design system
   Technical-drawing direction: hairline grid, mono labels,
   annotated product. Loaded after styles.css; every selector is
   prefixed cb- so it never fights the legacy sections.
   ============================================================ */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --cb-paper:   #F7F6F2;
  --cb-ink:     #132D28;
  --cb-ink-2:   rgb(19 45 40 / 0.76);
  --cb-ink-3:   rgb(19 45 40 / 0.66);
  --cb-line:    rgb(19 45 40 / 0.14);
  --cb-grid:    rgb(19 45 40 / 0.055);
  --cb-green:   #132D28;
  --cb-signal:  #D2CCAC;

  --cb-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cb-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --cb-gutter: max(20px, 4vw);
  --cb-nav-h: 64px;
}

/* ------------------------------------------------------------
   Base (the few global rules the page relies on)
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--cb-nav-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font: 400 16px/1.4 var(--cb-sans);
  color: var(--cb-ink);
  background: var(--cb-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font-family: inherit; }
h1, h2, h3, h4 { font: inherit; }


/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.cb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border: 1px solid var(--cb-ink);
  border-radius: 6px;
  background: var(--cb-ink);
  color: var(--cb-paper);
  font: 500 14px/1 var(--cb-sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cb-btn:hover { background: #0B211D; border-color: #0B211D; }

.cb-btn__arrow { transition: transform 0.2s ease; }
.cb-btn:hover .cb-btn__arrow { transform: translateX(3px); }

.cb-btn--ghost {
  background: var(--cb-paper);
  color: var(--cb-ink);
  border-color: rgb(19 45 40 / 0.28);
}

.cb-btn--ghost:hover { background: var(--cb-paper); color: var(--cb-ink); border-color: var(--cb-ink); }

.cb-btn--sm { padding: 10px 14px; font-size: 13px; }

.cb-btn:focus-visible,
.cb-nav a:focus-visible {
  outline: 2px solid var(--cb-ink);
  outline-offset: 3px;
}

/* ------------------------------------------------------------
   Navigation
   ------------------------------------------------------------ */
.cb-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(247 246 242 / 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.cb-nav.is-stuck { border-bottom-color: var(--cb-line); }

.cb-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--cb-nav-h);
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--cb-gutter);
}

.cb-nav__logo { display: block; flex-shrink: 0; }
.cb-nav__logo img { height: 40px; width: auto; }

.cb-nav__links {
  display: flex;
  gap: 32px;
  font: 400 12px/1 var(--cb-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cb-nav__links a { color: var(--cb-ink); text-decoration: none; padding-block: 8px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.25s ease; }
.cb-nav__links a:hover { background-size: 100% 1px; }

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.cb-hero {
  position: relative;
  overflow: hidden;
  background: var(--cb-paper);
  color: var(--cb-ink);
  font-family: var(--cb-sans);
  font-weight: 400;
  border-bottom: 1px solid var(--cb-line);
}

/* The phone sits inside a watch dial: minute track, hour indices, a dotted inner chapter ring.
   It is centred on the stage, so it scales and crops with the phone at every width, and the
   upper part fades out before it can touch the headline or buttons. */
.cb-diag__stage { isolation: isolate; }

.cb-diag__stage::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 122%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url('dial.svg') center / contain no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 8%, #000 42%);
  mask-image: linear-gradient(to bottom, transparent 8%, #000 42%);
  pointer-events: none;
}

.cb-hero__inner {
  position: relative;
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(28px, 4.2vw, 56px) var(--cb-gutter) 0;
  text-align: center;
}

.cb-hero p { max-width: none; }

.cb-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid rgb(19 45 40 / 0.22);
  border-radius: 999px;
  background: var(--cb-paper);
  font: 400 11px/1.2 var(--cb-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
}

.cb-pill::before {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  background: var(--cb-green);
  border-radius: 1px;
}

.cb-hero h1 {
  margin: clamp(20px, 3vw, 32px) auto 0;
  max-width: 14em;
  font: 500 clamp(34px, 5vw, 60px) / 1.04 var(--cb-sans);
  letter-spacing: -0.045em;
  word-spacing: 0;
  color: var(--cb-ink);
  text-wrap: balance;
}

.cb-hero h1 .cb-h1__hl { color: var(--cb-ink-3); }

.cb-hero__sub {
  margin: clamp(20px, 2.6vw, 28px) auto 0;
  max-width: 640px !important;
  font: 400 clamp(16px, 1.5vw, 18px) / 1.55 var(--cb-sans);
  color: var(--cb-ink-2);
  text-wrap: pretty;
}

.cb-hero__cta {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.cb-hero__micro {
  margin-top: 18px;
  font: 400 12px/1.4 var(--cb-mono);
  letter-spacing: 0.02em;
  color: var(--cb-ink-3);
}

/* ------------------------------------------------------------
   Annotated product diagram
   ------------------------------------------------------------ */
.cb-diag {
  position: relative;
  margin-top: clamp(24px, 4vw, 48px);
  text-align: left;
}

.cb-diag__stage {
  position: relative;
  width: min(100%, 560px);
  margin-inline: auto;
}

.cb-diag__stage picture,
.cb-diag__stage img { display: block; width: 100%; height: auto; }

/* Feather the photo into the paper so the studio backdrop never shows a hard edge. */
.cb-diag__stage picture {
  -webkit-mask-image: radial-gradient(ellipse 50% 52% at 50% 52%, #000 38%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 52% at 50% 52%, #000 38%, transparent 100%);
}

.cb-dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cb-paper);
  border: 1px solid var(--cb-ink);
  box-shadow: 0 0 0 4px rgb(247 246 242 / 0.55);
  font: 500 10px/1 var(--cb-mono);
  color: var(--cb-ink);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.cb-callouts {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--cb-line);
}

.cb-callouts li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 4px 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--cb-line);
  font: 400 12px/1.4 var(--cb-mono);
  color: var(--cb-ink-2);
}

.cb-callouts li i {
  grid-row: 1 / 3;
  font: 500 11px/1.6 var(--cb-mono);
  font-style: normal;
  color: var(--cb-ink);
}

.cb-callouts li b {
  font: 500 14px/1.3 var(--cb-sans);
  letter-spacing: -0.01em;
  color: var(--cb-ink);
}

.cb-leaders { display: none; }

/* Narrow: the phone bleeds past the gutters so it stays the hero of the screen. */
@media (max-width: 959px) {
  .cb-diag { margin-top: 0; }

  .cb-diag__stage {
    width: min(138%, 760px);
    margin-top: -9%;
    margin-bottom: -4%;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 640px) {
  .cb-nav__links { display: none; }
  .cb-pill { font-size: 10.5px; }
  .cb-hero__cta .cb-btn { flex: 1 1 100%; justify-content: center; }
}

/* Wide: callouts sit either side of the phone, joined by leader lines. */
@media (min-width: 960px) {
  .cb-diag { aspect-ratio: 1000 / 600; max-width: 1000px; margin-inline: auto; margin-top: -76px; pointer-events: none; }
  .cb-callouts li { pointer-events: auto; }

  .cb-diag__stage {
    position: absolute;
    left: 15%;
    top: 6.67%;
    width: 70%;
  }

  .cb-callouts {
    position: absolute;
    inset: 0;
    margin: 0;
    border: 0;
    display: block;
  }

  .cb-callouts li {
    position: absolute;
    top: var(--y);
    width: 21%;
    padding: 10px 12px;
    border: 1px solid rgb(19 45 40 / 0.16);
    border-radius: 6px;
    background: rgb(247 246 242 / 0.94);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7);
    transform: translateY(-50%);
    grid-template-columns: 26px 1fr;
    font-size: 12px;
  }

  /* Glass labels: the dial blurs behind the text instead of being hidden by it. */
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .cb-callouts li {
      background: rgb(247 246 242 / 0.28);
      -webkit-backdrop-filter: blur(3px) saturate(1.2);
      backdrop-filter: blur(3px) saturate(1.2);
    }
  }

  .cb-callouts li[data-side='l'] { left: 0; }
  .cb-callouts li[data-side='r'] { right: 0; }

  .cb-leaders {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .cb-leaders path { fill: none; vector-effect: non-scaling-stroke; }
  .cb-leaders .halo { stroke: var(--cb-paper); stroke-width: 4px; stroke-opacity: 0.85; }
  .cb-leaders .ink { stroke: var(--cb-ink); stroke-width: 1px; }
}

/* Hover on a callout lights its marker. */
.cb-diag:has(.cb-callouts li:nth-child(1):hover) .cb-dot:nth-of-type(1),
.cb-diag:has(.cb-callouts li:nth-child(2):hover) .cb-dot:nth-of-type(2),
.cb-diag:has(.cb-callouts li:nth-child(3):hover) .cb-dot:nth-of-type(3),
.cb-diag:has(.cb-callouts li:nth-child(4):hover) .cb-dot:nth-of-type(4) {
  background: var(--cb-ink);
  color: var(--cb-paper);
  transform: scale(1.25);
}

/* One orchestrated moment: markers appear, leader lines follow, labels settle. */
@media (prefers-reduced-motion: no-preference) {
  .cb-dot { animation: cb-fade 0.5s ease-out 0.2s backwards; }
  .cb-leaders { animation: cb-fade 0.7s ease-out 0.5s backwards; }
  .cb-callouts li { animation: cb-fade 0.6s ease-out 0.7s backwards; }
}

@keyframes cb-fade { from { opacity: 0; } }

/* ============================================================
   Proof — a spec sheet, not a grid of cards
   ============================================================ */
.cb-proof {
  background: var(--cb-paper);
  color: var(--cb-ink);
  font-family: var(--cb-sans);
  font-weight: 400;
  border-bottom: 1px solid var(--cb-line);
}

.cb-proof p { max-width: none; }

.cb-proof__inner {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(56px, 9vw, 112px) var(--cb-gutter);
}

@media (min-width: 960px) {
  .cb-proof__inner { grid-template-columns: 5fr 7fr; gap: clamp(48px, 6vw, 88px); align-items: start; }
  .cb-proof__intro { position: sticky; top: calc(var(--cb-nav-h) + 32px); }
}

.cb-eyebrow {
  font: 400 12px/1.3 var(--cb-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cb-ink-3);
}

.cb-proof h2 {
  margin: 16px 0 0;
  font: 500 clamp(30px, 4vw, 48px) / 1.04 var(--cb-sans);
  letter-spacing: -0.045em;
  word-spacing: 0;
  color: var(--cb-ink);
  text-wrap: balance;
}

.cb-proof__lede {
  margin-top: 20px;
  max-width: 30em !important;
  font: 400 16px/1.6 var(--cb-sans);
  color: var(--cb-ink-2);
  text-wrap: pretty;
}

.cb-link {
  display: inline-block;
  margin-top: 22px;
  padding-bottom: 3px;
  font: 500 14px/1.2 var(--cb-sans);
  color: var(--cb-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--cb-ink);
}

.cb-link span { display: inline-block; transition: transform 0.2s ease; }
.cb-link:hover span { transform: translateX(3px); }
.cb-link:focus-visible { outline: 2px solid var(--cb-ink); outline-offset: 4px; }

.cb-figure { margin: 36px 0 0; max-width: 460px; }

.cb-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--cb-line);
}

.cb-figure figcaption {
  margin-top: 10px;
  font: 400 11px/1.4 var(--cb-mono);
  letter-spacing: 0.02em;
  color: var(--cb-ink-3);
}

/* Readout rows */
.cb-readout { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cb-ink); }

.cb-row {
  display: grid;
  grid-template-columns: minmax(120px, 44%) 1fr;
  grid-template-areas: 'label label' 'fig body';
  column-gap: clamp(16px, 3vw, 32px);
  row-gap: 10px;
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--cb-line);
  align-items: end;
}

.cb-row__label {
  grid-area: label;
  font: 400 11px/1.2 var(--cb-mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cb-ink-3);
}

.cb-row__fig {
  grid-area: fig;
  font: 500 clamp(40px, 5vw, 60px) / 0.95 var(--cb-sans);
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  color: var(--cb-ink);
}

.cb-row--lead { padding-top: 26px; }
.cb-row--lead .cb-row__fig { font-size: clamp(52px, 6vw, 84px); }

.cb-row__body { grid-area: body; display: grid; gap: 14px; padding-bottom: 4px; }
.cb-row__body p { font: 400 15px/1.45 var(--cb-sans); color: var(--cb-ink-2); max-width: 32em; }

/* Gauge: a ruled track with minute ticks; the fill is the real percentage. */
.cb-gauge {
  position: relative;
  display: block;
  height: 14px;
  background:
    linear-gradient(90deg, rgb(19 45 40 / 0.5) 1px, transparent 1px) 0 calc(100% - 3px) / 10% 10px repeat-x,
    linear-gradient(90deg, rgb(19 45 40 / 0.26) 1px, transparent 1px) 0 calc(100% - 3px) / 2% 5px repeat-x;
  border-bottom: 1px solid var(--cb-line);
}

.cb-gauge i {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: var(--v);
  height: 3px;
  background: var(--cb-ink);
}

.cb-gauge i::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 2px;
  height: 14px;
  background: var(--cb-ink);
}

.cb-gauge--muted i,
.cb-gauge--muted i::after { background: rgb(19 45 40 / 0.38); }

.cb-gauge-pair { display: grid; gap: 6px; }
.cb-gauge-pair .cb-gauge + .cb-gauge-tag { margin-top: 6px; }

.cb-gauge-tag {
  font: 400 11px/1.2 var(--cb-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cb-ink-3);
}

.cb-proof__note {
  margin-top: 18px;
  font: 400 12px/1.5 var(--cb-mono);
  color: var(--cb-ink-3);
  max-width: 52em !important;
}

@media (max-width: 520px) {
  .cb-row { grid-template-columns: 1fr; grid-template-areas: 'label' 'fig' 'body'; }
}

/* Gauges fill as they scroll into view where the browser supports it; otherwise they rest full. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .cb-gauge i {
      animation: cb-fill linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 85%;
    }
  }
}

@keyframes cb-fill { from { clip-path: inset(-20px 100% -20px 0); } to { clip-path: inset(-20px -2px -20px 0); } }

/* ============================================================
   The event-day gap — first dark band, type and one ruled table
   ============================================================ */
.cb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cb-gap {
  position: relative;
  overflow: hidden;
  background: var(--cb-green);
  color: var(--cb-paper);
  font-family: var(--cb-sans);
  font-weight: 400;
  --cb-on-2: rgb(247 246 242 / 0.76);
  --cb-on-3: rgb(247 246 242 / 0.62);
  --cb-on-line: rgb(247 246 242 / 0.2);
}

/* The dial returns, cropped off the corner, as a quiet signature. */
.cb-gap::before {
  content: '';
  position: absolute;
  right: -220px;
  top: -240px;
  width: 860px;
  aspect-ratio: 1;
  background: url('dial.svg') center / contain no-repeat;
  filter: invert(1);
  opacity: 0.4;
  pointer-events: none;
}

.cb-gap p { max-width: none; }

.cb-gap__inner {
  position: relative;
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(64px, 10vw, 128px) var(--cb-gutter);
}

.cb-gap .cb-eyebrow { color: var(--cb-signal); }

.cb-gap__top { display: grid; gap: 32px; align-items: end; }

@media (min-width: 960px) {
  .cb-gap__top { grid-template-columns: 7fr 4fr; gap: clamp(48px, 7vw, 112px); }
}

.cb-gap h2 {
  margin: 18px 0 0;
  font: 500 clamp(32px, 4.8vw, 60px) / 1.02 var(--cb-sans);
  letter-spacing: -0.05em;
  word-spacing: 0;
  color: var(--cb-paper);
  text-wrap: balance;
}

.cb-gap h2 span { display: block; }
.cb-gap h2 .cb-quiet { color: var(--cb-on-3); }

.cb-gap__aside p {
  font: 400 16px/1.6 var(--cb-sans);
  color: var(--cb-on-2);
  text-wrap: pretty;
}

.cb-link--light { color: var(--cb-paper); border-bottom-color: var(--cb-signal); }
.cb-link--light:focus-visible { outline-color: var(--cb-paper); }

/* The table */
.cb-gaptable {
  width: 100%;
  margin-top: clamp(48px, 7vw, 88px);
  border-collapse: collapse;
  text-align: left;
  border-top: 1px solid var(--cb-paper);
}

.cb-gaptable thead th {
  padding: 14px 0;
  font: 400 11px/1.2 var(--cb-mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cb-on-3);
  border-bottom: 1px solid var(--cb-on-line);
}

.cb-gaptable thead th:last-child { color: var(--cb-signal); }

.cb-gaptable tbody th,
.cb-gaptable tbody td {
  padding: 26px 0 28px;
  vertical-align: top;
  border-bottom: 1px solid var(--cb-on-line);
}

.cb-gaptable tbody th {
  width: 18%;
  font: 500 clamp(20px, 2vw, 26px) / 1.1 var(--cb-sans);
  letter-spacing: -0.03em;
  color: var(--cb-paper);
}

.cb-gaptable tbody td {
  width: 41%;
  padding-right: clamp(20px, 4vw, 56px);
  font: 400 15px/1.55 var(--cb-sans);
  color: var(--cb-on-3);
  text-wrap: pretty;
}

.cb-gaptable tbody td:last-child {
  padding-right: 0;
  color: var(--cb-paper);
  position: relative;
}

@media (max-width: 759px) {
  .cb-gaptable thead { display: none; }
  .cb-gaptable,
  .cb-gaptable tbody,
  .cb-gaptable tr,
  .cb-gaptable th,
  .cb-gaptable td { display: block; width: 100% !important; }

  .cb-gaptable tbody tr { padding: 24px 0 28px; border-bottom: 1px solid var(--cb-on-line); }
  .cb-gaptable tbody th,
  .cb-gaptable tbody td { padding: 0; border: 0; }
  .cb-gaptable tbody th { margin-bottom: 14px; }
  .cb-gaptable td { padding-right: 0; }
  .cb-gaptable td + td { margin-top: 14px; }

  .cb-gaptable td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font: 400 11px/1.2 var(--cb-mono);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--cb-on-3);
  }

  .cb-gaptable td:last-child::before { color: var(--cb-signal); }
}

/* ============================================================
   A day at the show — chapters on the left, one sticky photo on
   the right that cross-fades as each chapter takes over.
   ============================================================ */
.cb-walk {
  background: var(--cb-paper);
  color: var(--cb-ink);
  font-family: var(--cb-sans);
  font-weight: 400;
  border-bottom: 1px solid var(--cb-line);
}

.cb-walk p { max-width: none; }

.cb-walk__inner {
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(64px, 10vw, 128px) var(--cb-gutter) clamp(48px, 7vw, 96px);
}

.cb-walk__head { max-width: 760px; }

.cb-walk h2 {
  margin: 16px 0 0;
  font: 500 clamp(34px, 5vw, 64px) / 1 var(--cb-sans);
  letter-spacing: -0.05em;
  word-spacing: 0;
  color: var(--cb-ink);
  text-wrap: balance;
}

.cb-walk__sub {
  margin-top: 20px;
  max-width: 34em !important;
  font: 400 17px/1.55 var(--cb-sans);
  color: var(--cb-ink-2);
  text-wrap: pretty;
}

.cb-walk__grid { margin-top: clamp(40px, 6vw, 80px); }

/* Chapter */
.cb-ch { padding-block: clamp(36px, 6vw, 56px); border-top: 1px solid var(--cb-line); }
.cb-ch:first-child { border-top: 1px solid var(--cb-ink); }

.cb-ch__fig { margin: 0 0 24px; }

.cb-ch__fig img,
.cb-stage__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 4px;
}

.cb-ch__fig figcaption,
.cb-stage__item figcaption {
  margin-top: 10px;
  font: 400 11px/1.4 var(--cb-mono);
  letter-spacing: 0.02em;
  color: var(--cb-ink-3);
}

.cb-ch__eyebrow {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font: 400 12px/1.2 var(--cb-mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cb-ink);
}

.cb-ch__eyebrow span { color: var(--cb-ink-3); }

.cb-ch h3 {
  margin: 14px 0 0;
  font: 500 clamp(26px, 3vw, 38px) / 1.05 var(--cb-sans);
  letter-spacing: -0.04em;
  word-spacing: 0;
  color: var(--cb-ink);
  text-wrap: balance;
}

.cb-ch__lede {
  margin-top: 16px;
  max-width: 32em !important;
  font: 400 16px/1.6 var(--cb-sans);
  color: var(--cb-ink-2);
  text-wrap: pretty;
}

.cb-ch__rows { margin: 24px 0 0; max-width: 34em; }

.cb-ch__rows > div {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--cb-line);
}

.cb-ch__rows > div:last-child { border-bottom: 1px solid var(--cb-line); }

.cb-ch__rows dt {
  font: 400 11px/1.6 var(--cb-mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cb-ink-3);
}

.cb-ch__rows dd { margin: 0; font: 400 14px/1.5 var(--cb-sans); color: var(--cb-ink); }

.cb-ch__mods {
  margin-top: 16px;
  font: 400 12px/1.5 var(--cb-mono);
  color: var(--cb-ink-3);
}

.cb-ch__mods span {
  margin-right: 8px;
  padding: 2px 6px;
  border: 1px solid var(--cb-line);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  color: var(--cb-ink-2);
}

/* The sticky stage only exists on wide screens, and only when JS can drive it. */
.cb-walk__stage { display: none; }

@media (min-width: 960px) {
  html.js .cb-ch__fig { display: none; }

  html.js .cb-walk__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(48px, 7vw, 104px);
    align-items: start;
  }

  html.js .cb-walk__stage {
    display: block;
    position: sticky;
    top: calc(var(--cb-nav-h) + clamp(24px, 6vh, 56px));
    margin-top: 0;
  }

  html.js .cb-ch { min-height: 62vh; transition: border-color 0.35s ease; }
  html.js .cb-ch.is-active { border-top-color: var(--cb-ink); }
  html.js .cb-ch:not(.is-active) .cb-ch__eyebrow span { color: var(--cb-ink-3); }
  html.js .cb-ch.is-active .cb-ch__eyebrow span { color: var(--cb-ink); }
  html.js .cb-ch:last-child { min-height: 0; }

  .cb-stage__frame { position: relative; aspect-ratio: 5 / 4; }

  .cb-stage__item {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 0.45s ease;
  }

  .cb-stage__item img { height: 100%; aspect-ratio: auto; border: 1px solid var(--cb-line); }
  .cb-stage__item figcaption { position: absolute; left: 0; top: 100%; }

  .cb-walk__stage[data-active='1'] .cb-stage__item[data-i='1'],
  .cb-walk__stage[data-active='2'] .cb-stage__item[data-i='2'],
  .cb-walk__stage[data-active='3'] .cb-stage__item[data-i='3'],
  .cb-walk__stage[data-active='4'] .cb-stage__item[data-i='4'],
  .cb-walk__stage[data-active='5'] .cb-stage__item[data-i='5'] { opacity: 1; }

  /* A minute-scale under the photo: one tick per chapter, the current one drawn long. */
  .cb-stage__scale {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 22px;
    margin-top: 44px;
    border-bottom: 1px solid var(--cb-line);
  }

  .cb-stage__scale i {
    display: block;
    width: 1px;
    height: 8px;
    background: var(--cb-ink-3);
    transition: height 0.3s ease, background-color 0.3s ease;
  }

  .cb-walk__stage[data-active='1'] .cb-stage__scale i:nth-child(1),
  .cb-walk__stage[data-active='2'] .cb-stage__scale i:nth-child(2),
  .cb-walk__stage[data-active='3'] .cb-stage__scale i:nth-child(3),
  .cb-walk__stage[data-active='4'] .cb-stage__scale i:nth-child(4),
  .cb-walk__stage[data-active='5'] .cb-stage__scale i:nth-child(5) { height: 22px; width: 2px; background: var(--cb-ink); }
}

@media (max-width: 520px) {
  .cb-ch__rows > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ============================================================
   Sponsors — second dark band, the 2.3× as the figure
   ============================================================ */
.cb-sponsor {
  background: var(--cb-green);
  color: var(--cb-paper);
  font-family: var(--cb-sans);
  font-weight: 400;
  --cb-on-2: rgb(247 246 242 / 0.76);
  --cb-on-3: rgb(247 246 242 / 0.62);
  --cb-on-line: rgb(247 246 242 / 0.2);
}

.cb-sponsor p { max-width: none; }

.cb-sponsor__inner {
  display: grid;
  gap: clamp(32px, 6vw, 72px);
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(64px, 10vw, 128px) var(--cb-gutter);
  align-items: center;
}

@media (min-width: 960px) {
  .cb-sponsor__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(56px, 8vw, 112px); }
}

.cb-sponsor__fig { margin: 0; }

.cb-sponsor__fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 4px;
}

.cb-sponsor__fig figcaption {
  margin-top: 10px;
  font: 400 11px/1.4 var(--cb-mono);
  letter-spacing: 0.02em;
  color: var(--cb-on-3);
}

.cb-sponsor .cb-eyebrow { color: var(--cb-signal); }

.cb-sponsor h2 {
  margin: 16px 0 0;
  font: 500 clamp(32px, 4.4vw, 54px) / 1.02 var(--cb-sans);
  letter-spacing: -0.05em;
  word-spacing: 0;
  color: var(--cb-paper);
  text-wrap: balance;
}

.cb-sponsor__lede {
  margin-top: 18px;
  max-width: 32em !important;
  font: 400 16px/1.6 var(--cb-sans);
  color: var(--cb-on-2);
  text-wrap: pretty;
}

.cb-lift {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px clamp(20px, 3vw, 36px);
  align-items: end;
  margin-top: 32px;
  padding-block: 24px;
  border-top: 1px solid var(--cb-paper);
  border-bottom: 1px solid var(--cb-on-line);
}

.cb-lift__fig {
  font: 500 clamp(72px, 10vw, 128px) / 0.85 var(--cb-sans);
  letter-spacing: -0.07em;
  font-variant-numeric: tabular-nums;
  color: var(--cb-signal);
}

.cb-lift__body { display: grid; gap: 14px; padding-bottom: 4px; }
.cb-lift__body > p { font: 400 15px/1.45 var(--cb-sans); color: var(--cb-on-2); max-width: 24em; }

.cb-sponsor .cb-gauge {
  background:
    linear-gradient(90deg, rgb(247 246 242 / 0.5) 1px, transparent 1px) 0 calc(100% - 3px) / 10% 10px repeat-x,
    linear-gradient(90deg, rgb(247 246 242 / 0.26) 1px, transparent 1px) 0 calc(100% - 3px) / 2% 5px repeat-x;
  border-bottom-color: var(--cb-on-line);
}

.cb-sponsor .cb-gauge i,
.cb-sponsor .cb-gauge i::after { background: var(--cb-signal); }
.cb-sponsor .cb-gauge--muted i,
.cb-sponsor .cb-gauge--muted i::after { background: rgb(247 246 242 / 0.4); }
.cb-sponsor .cb-gauge-tag { color: var(--cb-on-3); }

.cb-sponsor__rows { margin-top: 24px; max-width: 36em; }
.cb-sponsor__rows > div { border-top-color: var(--cb-on-line); }
.cb-sponsor__rows > div:last-child { border-bottom-color: var(--cb-on-line); }
.cb-sponsor__rows dt { color: var(--cb-on-3); }
.cb-sponsor__rows dd { color: var(--cb-paper); }
.cb-sponsor .cb-link { margin-top: 28px; }

@media (max-width: 520px) {
  .cb-lift { grid-template-columns: 1fr; }
}

/* ============================================================
   What you receive — the annotated report
   ============================================================ */
.cb-report {
  background: var(--cb-paper);
  color: var(--cb-ink);
  font-family: var(--cb-sans);
  font-weight: 400;
  border-bottom: 1px solid var(--cb-line);
}

.cb-report p { max-width: none; }

.cb-report__inner {
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(64px, 10vw, 128px) var(--cb-gutter);
}

.cb-report__head { max-width: 720px; }

.cb-report h2 {
  margin: 16px 0 0;
  font: 500 clamp(32px, 4.6vw, 56px) / 1.02 var(--cb-sans);
  letter-spacing: -0.05em;
  word-spacing: 0;
  color: var(--cb-ink);
  text-wrap: balance;
}

.cb-report__sub {
  margin-top: 18px;
  max-width: 34em !important;
  font: 400 16px/1.6 var(--cb-sans);
  color: var(--cb-ink-2);
  text-wrap: pretty;
}

.cb-diag--report { margin-top: clamp(32px, 5vw, 56px); }

.cb-diag--report .cb-diag__stage { width: 100%; transform: none; margin: 0; left: auto; }
.cb-diag--report .cb-diag__stage::before { display: none; }
.cb-diag--report .cb-diag__stage picture { -webkit-mask-image: none; mask-image: none; }

.cb-diag--report .cb-diag__stage img {
  aspect-ratio: 7 / 5;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--cb-line);
}

@media (min-width: 960px) {
  .cb-diag--report {
    aspect-ratio: 1000 / 500;
    margin-top: 40px;
    pointer-events: auto;
  }

  .cb-diag--report .cb-diag__stage {
    position: absolute;
    left: 15%;
    top: 7.2%;
    width: 70%;
  }
}

.cb-report__caption {
  margin-top: 20px;
  font: 400 11px/1.5 var(--cb-mono);
  letter-spacing: 0.02em;
  color: var(--cb-ink-3);
}

@media (min-width: 960px) {
  .cb-report__caption { text-align: center; }
}

.cb-covers {
  list-style: none;
  margin: 36px 0 0;
  padding: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  border-top: 1px solid var(--cb-ink);
  font: 400 12px/1.3 var(--cb-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cb-ink-2);
}

/* ============================================================
   How it works — a four-stop track, labelled by who does the work
   ============================================================ */
.cb-btn--light { background: var(--cb-paper); color: var(--cb-ink); border-color: var(--cb-paper); }
.cb-btn--light:hover { background: var(--cb-signal); border-color: var(--cb-signal); color: var(--cb-ink); }
.cb-btn--light:focus-visible { outline-color: var(--cb-paper); }

.cb-how {
  background: var(--cb-paper);
  color: var(--cb-ink);
  font-family: var(--cb-sans);
  font-weight: 400;
  border-bottom: 1px solid var(--cb-line);
}

.cb-how p { max-width: none; }

.cb-how__inner {
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(64px, 10vw, 128px) var(--cb-gutter);
}

.cb-how__head { max-width: 760px; }

.cb-how h2 {
  margin: 16px 0 0;
  font: 500 clamp(32px, 4.8vw, 60px) / 1.02 var(--cb-sans);
  letter-spacing: -0.05em;
  word-spacing: 0;
  color: var(--cb-ink);
  text-wrap: balance;
}

.cb-how__sub {
  margin-top: 18px;
  max-width: 32em !important;
  font: 400 17px/1.55 var(--cb-sans);
  color: var(--cb-ink-2);
}

.cb-steps {
  list-style: none;
  margin: clamp(40px, 6vw, 72px) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.cb-steps li { position: relative; padding: 0 0 36px 52px; }

.cb-step__n {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--cb-ink);
  border-radius: 50%;
  background: var(--cb-paper);
  font: 500 11px/1 var(--cb-mono);
}

/* Narrow: a vertical track down the left. */
.cb-steps li::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 28px;
  bottom: 4px;
  width: 1px;
  background: var(--cb-line);
}

.cb-steps li:last-child::before { display: none; }

.cb-step__who {
  font: 400 11px/1.2 var(--cb-mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cb-ink-3);
  padding-top: 6px;
}

.cb-steps h3 {
  margin: 10px 0 0;
  font: 500 clamp(20px, 2vw, 24px) / 1.12 var(--cb-sans);
  letter-spacing: -0.035em;
  word-spacing: 0;
  color: var(--cb-ink);
  text-wrap: balance;
}

.cb-steps li > p:last-child {
  margin-top: 12px;
  font: 400 15px/1.55 var(--cb-sans);
  color: var(--cb-ink-2);
  max-width: 26em;
  text-wrap: pretty;
}

/* Wide: a horizontal track with minute ticks above the baseline. */
@media (min-width: 960px) {
  .cb-steps { grid-template-columns: repeat(4, 1fr); }
  .cb-steps li { padding: 52px 36px 0 0; }

  .cb-steps li::before {
    left: 0;
    right: 0;
    top: 6px;
    bottom: auto;
    width: auto;
    height: 6px;
    background: linear-gradient(90deg, rgb(19 45 40 / 0.32) 1px, transparent 1px) 0 0 / 12px 5px repeat-x;
    border-bottom: 1px solid var(--cb-ink);
  }

  .cb-steps li:last-child::before { display: block; right: 36px; }
  .cb-step__who { padding-top: 0; }
}

/* ============================================================
   Founding pilot — third dark band, the price as the figure
   ============================================================ */
.cb-pilot {
  background: var(--cb-green);
  color: var(--cb-paper);
  font-family: var(--cb-sans);
  font-weight: 400;
  --cb-on-2: rgb(247 246 242 / 0.76);
  --cb-on-3: rgb(247 246 242 / 0.62);
  --cb-on-line: rgb(247 246 242 / 0.2);
}

.cb-pilot p { max-width: none; }

.cb-pilot__inner {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(64px, 10vw, 128px) var(--cb-gutter);
}

@media (min-width: 960px) {
  .cb-pilot__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(56px, 8vw, 120px); align-items: start; }
}

.cb-pilot .cb-eyebrow { color: var(--cb-signal); }

.cb-pilot h2 {
  margin: 16px 0 0;
  font: 500 clamp(32px, 4.6vw, 58px) / 1.02 var(--cb-sans);
  letter-spacing: -0.05em;
  word-spacing: 0;
  color: var(--cb-paper);
  text-wrap: balance;
}

.cb-pilot__body {
  margin-top: 18px;
  max-width: 34em !important;
  font: 400 16px/1.6 var(--cb-sans);
  color: var(--cb-on-2);
  text-wrap: pretty;
}

.cb-pilot__body + .cb-pilot__body { margin-top: 12px; }

.cb-price {
  margin: 36px 0 32px;
  padding-block: 24px;
  border-top: 1px solid var(--cb-paper);
  border-bottom: 1px solid var(--cb-on-line);
}

.cb-price__fig {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font: 500 clamp(56px, 8vw, 104px) / 0.9 var(--cb-sans);
  letter-spacing: -0.065em;
  font-variant-numeric: tabular-nums;
  color: var(--cb-signal);
}

.cb-price__fig span {
  font: 400 12px/1 var(--cb-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cb-on-3);
}

.cb-price__note {
  margin-top: 16px;
  max-width: 32em !important;
  font: 400 14px/1.55 var(--cb-sans);
  color: var(--cb-on-2);
}

.cb-pilot__panel {
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--cb-on-line);
  border-radius: 6px;
  background: rgb(247 246 242 / 0.04);
}

.cb-pilot__label {
  font: 400 11px/1.2 var(--cb-mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cb-signal);
}

.cb-includes { list-style: none; margin: 16px 0 0; padding: 0; }

.cb-includes li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--cb-on-line);
  font: 400 15px/1.35 var(--cb-sans);
  color: var(--cb-paper);
}

.cb-includes li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  background: var(--cb-signal);
  border-radius: 1px;
  transform: translateY(-1px);
}

/* ============================================================
   Two reports — organiser, then one for every brand
   ============================================================ */
.cb-rep__tag {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 12px/1.2 var(--cb-mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cb-ink);
}

.cb-rep__tag span {
  padding: 3px 7px;
  border: 1px solid var(--cb-ink);
  border-radius: 3px;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.cb-rep h3 {
  margin: 14px 0 0;
  font: 500 clamp(24px, 3vw, 36px) / 1.05 var(--cb-sans);
  letter-spacing: -0.04em;
  word-spacing: 0;
  color: var(--cb-ink);
  text-wrap: balance;
}

.cb-rep p:not(.cb-rep__tag):not(.cb-rep__inside-label) {
  margin-top: 14px;
  max-width: 34em !important;
  font: 400 16px/1.6 var(--cb-sans);
  color: var(--cb-ink-2);
  text-wrap: pretty;
}

.cb-rep--org {
  margin-top: clamp(48px, 7vw, 80px);
  padding-top: 20px;
  border-top: 1px solid var(--cb-ink);
}

.cb-rep--org .cb-rep__text { margin-top: 4px; }

@media (min-width: 960px) {
  .cb-rep--org { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
  .cb-rep--org .cb-rep__text { margin-top: 0; }
  .cb-rep--org .cb-rep__text h3 { margin-top: -2px; }
}

.cb-rep--brand {
  display: grid;
  gap: 40px;
  margin-top: clamp(64px, 9vw, 112px);
  padding-top: 20px;
  border-top: 1px solid var(--cb-ink);
}

@media (min-width: 960px) {
  .cb-rep--brand { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 7vw, 104px); align-items: start; }
}

.cb-flow {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  max-width: 30em;
  border-top: 1px solid var(--cb-line);
}

.cb-flow li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--cb-line);
  font: 400 14px/1.4 var(--cb-sans);
  color: var(--cb-ink);
}

.cb-flow li span {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--cb-ink);
  border-radius: 50%;
  font: 500 10px/1 var(--cb-mono);
}

.cb-rep__inside { padding-top: 4px; }

.cb-rep__inside-label {
  font: 400 11px/1.2 var(--cb-mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cb-ink-3);
}

.cb-inside { margin: 14px 0 0; border-top: 1px solid var(--cb-ink); }

.cb-inside > div {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--cb-line);
}

.cb-inside dt {
  font: 500 clamp(17px, 1.6vw, 20px) / 1.2 var(--cb-sans);
  letter-spacing: -0.025em;
  color: var(--cb-ink);
}

.cb-inside dd { margin: 0; font: 400 15px/1.5 var(--cb-sans); color: var(--cb-ink-2); }

@media (max-width: 520px) {
  .cb-inside > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   Founder — the organiser behind it
   ============================================================ */
.cb-founder {
  background: var(--cb-paper);
  color: var(--cb-ink);
  font-family: var(--cb-sans);
  font-weight: 400;
  border-bottom: 1px solid var(--cb-line);
}

.cb-founder p { max-width: none; }

.cb-founder__inner {
  display: grid;
  gap: clamp(32px, 6vw, 72px);
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(64px, 10vw, 128px) var(--cb-gutter);
}

@media (min-width: 960px) {
  .cb-founder__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(56px, 8vw, 112px); align-items: start; }
  .cb-founder__fig { position: sticky; top: calc(var(--cb-nav-h) + 32px); }
}

.cb-founder__fig { margin: 0; }

.cb-founder__fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--cb-line);
}

.cb-founder__fig figcaption,
.cb-quotes__fig figcaption {
  margin-top: 10px;
  font: 400 11px/1.4 var(--cb-mono);
  letter-spacing: 0.02em;
  color: var(--cb-ink-3);
}

.cb-founder h2 {
  margin: 16px 0 28px;
  font: 500 clamp(32px, 4.4vw, 54px) / 1.02 var(--cb-sans);
  letter-spacing: -0.05em;
  word-spacing: 0;
  color: var(--cb-ink);
  text-wrap: balance;
}

.cb-founder__copy > p:not(.cb-eyebrow) {
  max-width: 34em !important;
  margin-top: 14px;
  font: 400 16px/1.65 var(--cb-sans);
  color: var(--cb-ink-2);
  text-wrap: pretty;
}

.cb-founder a,
.cb-quotes a {
  color: var(--cb-ink);
  text-decoration: underline;
  text-decoration-color: rgb(19 45 40 / 0.4);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.2s ease;
}

.cb-founder a:hover,
.cb-quotes a:hover { text-decoration-color: var(--cb-ink); }
.cb-founder a:focus-visible { outline: 2px solid var(--cb-ink); outline-offset: 3px; }

.cb-creds { margin: 32px 0 0; max-width: 40em; border-top: 1px solid var(--cb-ink); }

.cb-creds > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--cb-line);
}

.cb-creds dt {
  font: 400 11px/1.7 var(--cb-mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cb-ink-3);
}

.cb-creds dd { margin: 0; font: 400 15px/1.5 var(--cb-sans); color: var(--cb-ink); }

.cb-founderquote { margin: 40px 0 0; max-width: 40em; padding-left: 20px; border-left: 2px solid var(--cb-ink); }

.cb-founderquote blockquote p {
  font: 500 clamp(19px, 2vw, 24px) / 1.3 var(--cb-sans);
  letter-spacing: -0.025em;
  color: var(--cb-ink);
  text-wrap: pretty;
}

.cb-founderquote figcaption {
  margin-top: 14px;
  font: 400 12px/1.5 var(--cb-mono);
  color: var(--cb-ink-3);
}

@media (max-width: 520px) {
  .cb-creds > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ============================================================
   Quotes — real words, set large, on a warm tint
   ============================================================ */
.cb-quotes {
  background: #ECEAD9;
  background: color-mix(in srgb, var(--cb-signal) 30%, var(--cb-paper));
  color: var(--cb-ink);
  font-family: var(--cb-sans);
  font-weight: 400;
  border-bottom: 1px solid var(--cb-line);
}

.cb-quotes p { max-width: none; }

.cb-quotes__inner {
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(64px, 10vw, 128px) var(--cb-gutter);
}

.cb-quotes__head { max-width: 720px; }

.cb-quotes h2 {
  margin: 16px 0 0;
  font: 500 clamp(32px, 4.6vw, 56px) / 1.02 var(--cb-sans);
  letter-spacing: -0.05em;
  word-spacing: 0;
  color: var(--cb-ink);
  text-wrap: balance;
}

.cb-quotes__sub {
  margin-top: 18px;
  max-width: 34em !important;
  font: 400 16px/1.6 var(--cb-sans);
  color: var(--cb-ink-2);
  text-wrap: pretty;
}

.cb-quotes__feature {
  display: grid;
  gap: 32px;
  margin-top: clamp(40px, 6vw, 72px);
  align-items: center;
}

@media (min-width: 960px) {
  .cb-quotes__feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 7vw, 96px); }
}

.cb-quotes__fig { margin: 0; }

.cb-quotes__fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 25 / 14;
  object-fit: cover;
  border-radius: 4px;
}

.cb-bigq { margin: 0; }

.cb-bigq blockquote p {
  font: 500 clamp(24px, 2.8vw, 36px) / 1.14 var(--cb-sans);
  letter-spacing: -0.04em;
  color: var(--cb-ink);
  text-wrap: balance;
}

.cb-bigq figcaption,
.cb-q figcaption {
  margin-top: 14px;
  font: 400 11px/1.4 var(--cb-mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cb-ink-3);
}

.cb-quotes__cols { display: grid; gap: 40px; margin-top: clamp(48px, 7vw, 88px); }

@media (min-width: 760px) {
  .cb-quotes__cols { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
}

.cb-quotes__label {
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cb-ink);
  font: 400 12px/1.2 var(--cb-mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cb-ink);
  word-spacing: 0;
}

.cb-q { margin: 0; padding: 22px 0 22px; border-bottom: 1px solid rgb(19 45 40 / 0.16); }

.cb-q blockquote p {
  font: 400 18px/1.45 var(--cb-sans);
  letter-spacing: -0.012em;
  color: var(--cb-ink);
  text-wrap: pretty;
}

/* ============================================================
   FAQ — a ruled list, the heading pinned beside it
   ============================================================ */
.cb-faq {
  background: var(--cb-paper);
  color: var(--cb-ink);
  font-family: var(--cb-sans);
  font-weight: 400;
  border-bottom: 1px solid var(--cb-line);
}

.cb-faq p { max-width: none; }

.cb-faq__inner {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(64px, 10vw, 128px) var(--cb-gutter);
}

@media (min-width: 960px) {
  .cb-faq__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(56px, 8vw, 120px); align-items: start; }
  .cb-faq__head { position: sticky; top: calc(var(--cb-nav-h) + 32px); }
}

.cb-faq h2 {
  margin: 16px 0 0;
  font: 500 clamp(30px, 3.8vw, 46px) / 1.04 var(--cb-sans);
  letter-spacing: -0.045em;
  word-spacing: 0;
  color: var(--cb-ink);
  text-wrap: balance;
}

.cb-faq__more {
  margin-top: 18px;
  max-width: 24em !important;
  font: 400 15px/1.55 var(--cb-sans);
  color: var(--cb-ink-2);
}

.cb-faq__more a {
  color: var(--cb-ink);
  text-decoration: underline;
  text-decoration-color: rgb(19 45 40 / 0.4);
  text-underline-offset: 0.2em;
}

.cb-faq__more a:hover { text-decoration-color: var(--cb-ink); }

.cb-faq__list { border-top: 1px solid var(--cb-ink); }

.cb-faq__item { border-bottom: 1px solid var(--cb-line); }

.cb-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font: 500 clamp(17px, 1.6vw, 20px) / 1.3 var(--cb-sans);
  letter-spacing: -0.025em;
  color: var(--cb-ink);
}

.cb-faq__item summary::-webkit-details-marker { display: none; }

.cb-faq__item summary::after {
  content: '+';
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgb(19 45 40 / 0.3);
  border-radius: 50%;
  font: 400 15px/1 var(--cb-mono);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cb-faq__item summary:hover::after { border-color: var(--cb-ink); }

.cb-faq__item[open] summary::after {
  content: '−';
  background: var(--cb-ink);
  border-color: var(--cb-ink);
  color: var(--cb-paper);
}

.cb-faq__item summary:focus-visible { outline: 2px solid var(--cb-ink); outline-offset: 4px; border-radius: 2px; }

.cb-faq__item p {
  padding: 0 52px 24px 0;
  max-width: 40em !important;
  font: 400 15px/1.65 var(--cb-sans);
  color: var(--cb-ink-2);
  text-wrap: pretty;
}

/* ============================================================
   Enquiry — the closing dark band, with the form as the one action
   ============================================================ */
.cb-contact {
  position: relative;
  overflow: hidden;
  background: var(--cb-green);
  color: var(--cb-paper);
  font-family: var(--cb-sans);
  font-weight: 400;
  --cb-on-2: rgb(247 246 242 / 0.76);
  --cb-on-3: rgb(247 246 242 / 0.62);
  --cb-on-line: rgb(247 246 242 / 0.2);
}

.cb-contact::before {
  content: '';
  position: absolute;
  left: -300px;
  bottom: -400px;
  width: 860px;
  aspect-ratio: 1;
  background: url('dial.svg') center / contain no-repeat;
  filter: invert(1);
  opacity: 0.32;
  pointer-events: none;
}

.cb-contact p { max-width: none; }

.cb-contact__inner {
  position: relative;
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(64px, 10vw, 128px) var(--cb-gutter);
  align-items: start;
}

@media (min-width: 960px) {
  .cb-contact__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(56px, 8vw, 120px); align-items: center; }
}

.cb-contact .cb-eyebrow { color: var(--cb-signal); }

.cb-contact h2 {
  margin: 16px 0 0;
  font: 500 clamp(34px, 5vw, 66px) / 1 var(--cb-sans);
  letter-spacing: -0.052em;
  word-spacing: 0;
  color: var(--cb-paper);
  text-wrap: balance;
}

.cb-contact__body {
  margin-top: 22px;
  max-width: 32em !important;
  font: 400 17px/1.55 var(--cb-sans);
  color: var(--cb-on-2);
  text-wrap: pretty;
}

.cb-contact__facts {
  list-style: none;
  margin: 28px 0 0;
  padding: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  max-width: 34em;
  border-top: 1px solid var(--cb-on-line);
  font: 400 12px/1.3 var(--cb-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cb-signal);
}

.cb-contact__micro {
  margin-top: 16px;
  font: 400 12px/1.5 var(--cb-mono);
  color: var(--cb-on-3);
}

.cb-contact__panel {
  padding: clamp(22px, 3.2vw, 36px);
  border: 1px solid var(--cb-on-line);
  border-radius: 8px;
  background: rgb(247 246 242 / 0.05);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.cb-contact h3 {
  margin: 0;
  font: 500 clamp(21px, 2vw, 26px) / 1.15 var(--cb-sans);
  letter-spacing: -0.035em;
  word-spacing: 0;
  color: var(--cb-paper);
}

.cb-contact__lead { margin-top: 10px; font: 400 14px/1.55 var(--cb-sans); color: var(--cb-on-2); }

.cb-form { display: grid; gap: 16px; margin-top: 24px; }

.cb-form__field { display: grid; gap: 7px; }

.cb-form__field label {
  font: 400 11px/1.2 var(--cb-mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cb-on-3);
}

.cb-form__field input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--cb-on-line);
  border-radius: 6px;
  background: rgb(247 246 242 / 0.06);
  color: var(--cb-paper);
  font: 400 16px/1 var(--cb-sans);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cb-form__field input::placeholder { color: rgb(247 246 242 / 0.5); }
.cb-form__field input:hover { border-color: rgb(247 246 242 / 0.4); }

.cb-form__field input:focus-visible {
  outline: 2px solid var(--cb-signal);
  outline-offset: 2px;
  border-color: var(--cb-signal);
  background: rgb(247 246 242 / 0.1);
}

.cb-form__field input:-webkit-autofill {
  -webkit-text-fill-color: var(--cb-paper);
  box-shadow: 0 0 0 100px #21433c inset;
  caret-color: var(--cb-paper);
}

.cb-form__submit { justify-content: center; height: 50px; margin-top: 4px; font-size: 15px; cursor: pointer; }

.cb-form__result { min-height: 1.5em; font: 400 13px/1.5 var(--cb-sans); color: var(--cb-on-2); }
.cb-form__result--success { color: var(--cb-signal); }
.cb-form__result--error { color: #F4C2B4; }

/* ============================================================
   Footer
   ============================================================ */
.cb-footer {
  background: var(--cb-green);
  color: var(--cb-paper);
  font-family: var(--cb-sans);
  border-top: 1px solid rgb(247 246 242 / 0.14);
}

.cb-footer p { max-width: none; }

.cb-footer__inner {
  display: grid;
  gap: 24px 48px;
  align-items: center;
  max-width: 1240px;
  margin-inline: auto;
  padding: 32px var(--cb-gutter) 40px;
}

@media (min-width: 960px) {
  .cb-footer__inner { grid-template-columns: auto 1fr; }
  .cb-footer__links { justify-content: flex-end; }
  .cb-footer__copy { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid rgb(247 246 242 / 0.1); }
}

.cb-footer__logo { display: block; }
.cb-footer__logo img { height: 40px; width: auto; filter: brightness(0) invert(1); }

.cb-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font: 400 12px/1 var(--cb-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cb-footer__links a { color: rgb(247 246 242 / 0.8); text-decoration: none; padding-block: 6px; transition: color 0.2s ease; }
.cb-footer__links a:hover { color: var(--cb-paper); }
.cb-footer a:focus-visible { outline: 2px solid var(--cb-signal); outline-offset: 3px; }

.cb-footer__copy { font: 400 12px/1.5 var(--cb-mono); color: rgb(247 246 242 / 0.62); }

.cb-nobr { white-space: nowrap; }

/* Skip link: hidden until focused by keyboard */
.cb-skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: 6px;
  background: var(--cb-ink);
  color: var(--cb-paper);
  font: 500 14px/1 var(--cb-sans);
  transition: top 0.15s ease;
}

.cb-skip:focus { top: 12px; outline: 2px solid var(--cb-signal); outline-offset: 2px; }

@media (max-width: 1100px) {
  .cb-covers { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; }
}

@media (max-width: 640px) {
  .cb-covers { grid-template-columns: repeat(2, auto); }
}

[tabindex="-1"]:focus { outline: none; }

/* ============================================================
   Real screens: a plain phone frame around a genuine app capture
   ============================================================ */
.cb-phone {
  position: relative;
  padding: 8px;
  background: #132D28;
  border-radius: 46px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), 0 0 0 1px rgb(19 45 40 / 0.5), 0 24px 40px -28px rgb(19 45 40 / 0.5);
}

.cb-phone picture,
.cb-phone img { display: block; width: 100%; height: auto; border-radius: 38px; }

/* Hero: an upright phone, centred, with the dial scaled to sit around it. */
.cb-diag--phone .cb-diag__stage picture { -webkit-mask-image: none; mask-image: none; }
.cb-diag--phone .cb-diag__stage::before { width: 340%; }

@media (min-width: 960px) {
  .cb-diag--phone { margin-top: 28px; pointer-events: auto; }
  .cb-diag--phone .cb-diag__stage { left: 36.7%; top: 3.58%; width: 26.6%; }
}

@media (max-width: 959px) {
  .cb-diag--phone { margin-top: clamp(28px, 6vw, 44px); }
  /* Scale the dial to the screen so the whole ring shows around the phone, not just a sliver of it. */
  .cb-diag--phone .cb-diag__stage::before { width: clamp(420px, 108vw, 780px); }
  .cb-diag--phone .cb-diag__stage {
    width: min(100%, 270px);
    left: auto;
    margin: 0 auto;
    transform: none;
  }
}

/* Sponsors: the real Explore screen, with the dial behind it */
.cb-sponsor__fig {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding-block: 24px;
}

.cb-sponsor__fig::before {
  content: '';
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(130%, 640px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url('dial.svg') center / contain no-repeat;
  filter: invert(1);
  opacity: 0.32;
  pointer-events: none;
}

.cb-sponsor__fig .cb-phone { position: relative; width: min(100%, 300px); }
.cb-sponsor__fig .cb-phone img { aspect-ratio: auto; border-radius: 38px; }
.cb-sponsor__fig figcaption { position: relative; text-align: center; }

/* Report: a light browser frame around the real admin screen */
.cb-browser {
  overflow: hidden;
  border: 1px solid var(--cb-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 40px -30px rgb(19 45 40 / 0.45);
}

.cb-browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding-inline: 12px;
  border-bottom: 1px solid var(--cb-line);
  background: #EFEDE6;
}

.cb-browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgb(19 45 40 / 0.22); }

.cb-browser__bar span {
  margin-left: 10px;
  font: 400 10px/1 var(--cb-mono);
  letter-spacing: 0.04em;
  color: var(--cb-ink-3);
}

.cb-diag--report .cb-browser img { aspect-ratio: auto; border: 0; border-radius: 0; }

/* Report 2: the real email and the real report it links to, overlapping */
.cb-rep__visual {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  row-gap: 14px;
}

.cb-shot { margin: 0; }

.cb-shot picture,
.cb-shot img { display: block; width: 100%; height: auto; }

.cb-shot img {
  border: 1px solid var(--cb-line);
  border-radius: 8px;
  box-shadow: 0 24px 40px -30px rgb(19 45 40 / 0.5);
}

.cb-shot--report { grid-column: 4 / -1; grid-row: 1; }
.cb-shot--email { grid-column: 1 / 8; grid-row: 1; margin-top: 16%; position: relative; z-index: 1; }
.cb-shot--email img { box-shadow: 0 24px 40px -22px rgb(19 45 40 / 0.6); }

.cb-rep__visual-cap {
  grid-column: 1 / -1;
  grid-row: 2;
  font: 400 11px/1.5 var(--cb-mono);
  letter-spacing: 0.02em;
  color: var(--cb-ink-3);
}

@media (min-width: 960px) {
  .cb-rep--brand .cb-rep__inside { grid-column: 1 / -1; }

  .cb-rep--brand .cb-inside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(40px, 6vw, 88px);
  }

  .cb-rep--brand .cb-inside > div:nth-child(odd):last-child { grid-column: 1; }
}

@media (max-width: 700px) {
  .cb-rep__visual { display: block; }
  .cb-shot--email { margin: 20px 0 0; max-width: 340px; }
  .cb-shot--report { max-width: 480px; }
  .cb-rep__visual-cap { margin-top: 12px; }
}

/* How it works: one product, two brands */
.cb-brandsplit {
  display: grid;
  gap: 40px;
  margin-top: clamp(56px, 8vw, 104px);
  padding-top: 24px;
  border-top: 1px solid var(--cb-ink);
}

.cb-brandsplit h3 {
  margin: 14px 0 0;
  font: 500 clamp(26px, 3vw, 38px) / 1.05 var(--cb-sans);
  letter-spacing: -0.04em;
  word-spacing: 0;
  color: var(--cb-ink);
  text-wrap: balance;
}

.cb-brandsplit__copy p:not(.cb-eyebrow) {
  margin-top: 16px;
  max-width: 30em;
  font: 400 16px/1.6 var(--cb-sans);
  color: var(--cb-ink-2);
  text-wrap: pretty;
}

.cb-brandsplit__phones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 250px));
  gap: clamp(20px, 4vw, 48px);
  justify-content: center;
  align-items: start;
}

.cb-brandsplit__phones figure { margin: 0; display: grid; gap: 12px; }
.cb-brandsplit__phones figure:nth-child(2) { margin-top: 56px; }

.cb-brandsplit figcaption {
  font: 400 11px/1.4 var(--cb-mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cb-ink-3);
  text-align: center;
}

@media (min-width: 960px) {
  .cb-brandsplit { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 7vw, 104px); align-items: center; }
  .cb-brandsplit__phones { justify-content: end; }
}

@media (max-width: 520px) {
  .cb-brandsplit__phones figure:nth-child(2) { margin-top: 32px; }
}

/* The dial behind the sponsor phone is wider than the column on small screens; clip it to the band. */
.cb-sponsor { overflow: hidden; }

/* Narrow screens: the callout legend sits on paper so the dial never runs through its text. */
@media (max-width: 959px) {
  .cb-diag--phone .cb-callouts { position: relative; background: var(--cb-paper); margin-top: 20px; }
}

/* Walkthrough chapter 1: the real directory screen, rising from the bottom of a tinted panel */
.cb-panel {
  position: relative;
  display: grid;
  justify-items: center;
  align-items: start;
  aspect-ratio: 5 / 4;
  padding-top: 7%;
  overflow: hidden;
  border: 1px solid var(--cb-line);
  border-radius: 4px;
  background: #ECEAD9;
  background: color-mix(in srgb, var(--cb-signal) 30%, var(--cb-paper));
}

.cb-panel::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url('dial.svg') center / contain no-repeat;
  opacity: 0.6;
  pointer-events: none;
}

.cb-panel .cb-phone { position: relative; width: min(56%, 300px); }

.cb-panel .cb-phone img,
.cb-stage__item .cb-panel .cb-phone img,
.cb-ch__fig .cb-panel .cb-phone img { height: auto; aspect-ratio: auto; border: 0; border-radius: 38px; object-fit: fill; }

/* The frame is a clean crop, so the panel itself carries no extra border on the stage. */
.cb-stage__item .cb-panel { height: 100%; aspect-ratio: auto; }

/* Screens that start at the top of the phone: the device bleeds off the top edge and ends with clear space below it. */
.cb-panel--bottom { padding-top: 0; }
.cb-panel--bottom .cb-phone { width: min(64%, 340px); padding-top: 0; border-radius: 0 0 46px 46px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), 0 24px 40px -28px rgb(19 45 40 / 0.5); }
.cb-panel--bottom .cb-phone img,
.cb-stage__item .cb-panel--bottom .cb-phone img,
.cb-ch__fig .cb-panel--bottom .cb-phone img { border-top-left-radius: 0; border-top-right-radius: 0; }

/* Small screens: the phones are drawn smaller, so their corners are tightened to match. */
@media (max-width: 600px) {
  .cb-phone { padding: 6px; border-radius: 30px; }
  .cb-phone picture,
  .cb-phone img,
  .cb-sponsor__fig .cb-phone img,
  .cb-panel .cb-phone img,
  .cb-stage__item .cb-panel .cb-phone img,
  .cb-ch__fig .cb-panel .cb-phone img { border-radius: 24px; }
  .cb-panel--bottom .cb-phone { border-radius: 0 0 30px 30px; }
  .cb-panel--bottom .cb-phone img,
  .cb-stage__item .cb-panel--bottom .cb-phone img,
  .cb-ch__fig .cb-panel--bottom .cb-phone img { border-top-left-radius: 0; border-top-right-radius: 0; }
}