/* Art direction above the immutable responsive layer: no pricing or grid changes. */
@font-face {
  font-family: Manrope;
  src: url("/assets/fonts/Manrope-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-latin-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-latin-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("/assets/fonts/Inter-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --font-display: Manrope, "Avenir Next", Avenir, sans-serif;
  --font-ui: Inter, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
body,
body.home {
  font-weight: 400;
}
header.site .logo,
.home header.site .logo {
  font-family: var(--font-display);
  font-weight: 780;
  letter-spacing: -1.1px;
}
header.site .logo strong,
.home header.site .logo strong {
  font-weight: 800;
}
.home header.site .brand-cost {
  font-weight: 750;
}
h1,
h2,
h3,
.summary-label {
  font-family: var(--font-display);
}
h1 {
  font-weight: 680;
}
h2,
h3 {
  font-weight: 600;
}
.home .hero-composition h1 {
  font-family: var(--font-display);
  font-weight: 680;
  line-height: 1.09;
  letter-spacing: -1.1px;
}
.home .hero-composition h1 .grad {
  color: #24372f;
  font-weight: 570;
}
.home .hero-eyebrow {
  font-weight: 500;
  letter-spacing: 1.4px;
}
.home section.block h2,
.home .summary-label {
  font-family: var(--font-display);
  font-weight: 620;
}
header.site nav a,
.home header.site nav a {
  font-weight: 450;
  letter-spacing: 0.15px;
  transition: color 180ms ease;
}
header.site nav a:hover,
.home header.site nav a:hover {
  color: var(--accent);
}
.home header.site nav a.active {
  font-weight: 550;
}
header.site nav a.active::after,
.home header.site nav a.active::after {
  height: 1px;
}
.home .header-cta {
  font-weight: 550;
}
.home .sec-label[data-step] {
  font-family: var(--font-ui);
  font-weight: 550;
  letter-spacing: 0.12px;
}
.home .sec-label[data-step]::before {
  content: "0" attr(data-step);
  background: none;
  border: 1px solid #c4dcd1;
  border-radius: 50%;
  color: #52806c;
  font: 400 10px/1 var(--font-data);
}
.home .model,
.home .tier,
body .cwc .cwc-pill {
  border-color: #dfe9e4;
  background: #fafcfb;
  transition:
    background-color 180ms ease,
    border-color 180ms ease;
}
.home .model b,
.home .tier b,
body .cwc .cwc-pill b {
  font-weight: 550;
}
.home .model:not(.active):hover,
.home .tier:not(.active):hover,
body .cwc .cwc-pill:not(.active):not(:disabled):hover {
  background: #f0f7f3;
  border-color: #bed8c9;
}
.home .model.active,
body .cwc [data-zone="models"] .cwc-pill.active {
  background: #093c2e;
  border-color: #287758;
  color: #fff;
}
body .cwc [data-zone="models"] .cwc-pill.active b {
  color: #fff;
}
body .cwc [data-zone="models"] .cwc-pill.active small {
  color: #e0eee7;
}
.home .tier.active,
body .cwc [data-zone="tiers"] .cwc-pill.active {
  background: #e7f3ed;
  border-color: #90bba5;
}
.home .tier.active b,
body .cwc [data-zone="tiers"] .cwc-pill.active b,
body .cwc [data-zone="tiers"] .cwc-pill.active small {
  color: #194b36;
}
.money,
.numeric-cell,
.relative-label,
input[type="number"],
output,
.price-part,
.tibo-digit,
.hero-clock .digits {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
}
.home input[type="number"],
.advanced-fields input,
body .cwc input[type="number"] {
  font-family: var(--font-data);
}
.home .stat.hero-stat .v,
body .cwc .cwc-stat:has([data-out="perMonth"]) .v {
  font-family: var(--font-data);
  font-weight: 600;
  letter-spacing: -1px;
}
.home .stat:not(.hero-stat) .v,
body .cwc .cwc-stat:not(:has([data-out="perMonth"])) .v {
  font-family: var(--font-data);
  font-weight: 500;
}
.home .compact-comparison td,
body .cwc .cwc-summary td {
  font-weight: 400;
}
.home .compact-comparison td.numeric-cell,
.home .compact-comparison .money {
  font-family: var(--font-data);
  font-weight: 500;
}
/* One composition, with an absolute portrait and a measured content safe zone. */
.home .tibo-watch {
  --portrait-reserve: 172px;
  grid-template-columns: minmax(0, 1fr);
  position: relative;
  isolation: isolate;
  gap: 10px;
  background:
    radial-gradient(ellipse at 91% 14%, #a7d9d038, transparent 45%),
    radial-gradient(ellipse at 9% 100%, #d4efe966, transparent 66%),
    linear-gradient(120deg, #effaf6, #edf8fa);
}
.home .tibo-watch::before {
  opacity: 0.09;
}
.home .tibo-watch-heading,
.home .tibo-watch-main {
  width: calc(100% - var(--portrait-reserve));
  max-width: none;
}
.home .tibo-watch-heading {
  grid-column: 1;
  grid-row: 1;
}
.home .tibo-watch-main {
  grid-column: 1;
  grid-row: 2;
}
.home .tibo-profile {
  display: block;
  position: absolute;
  top: -9px;
  right: 0;
  width: 160px !important;
  height: 172px;
  padding: 0;
  border: none;
  background: none;
  z-index: 1;
}
.home .tibo-avatar {
  display: block;
  width: 160px;
  height: 172px;
  object-fit: cover;
  object-position: center 32%;
  border: 0;
  border-radius: 0;
  mask-image:
    linear-gradient(to bottom, #000 0%, #000 55%, #0008 77%, transparent 100%),
    radial-gradient(ellipse 80% 88% at 64% 29%, #000 48%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}
.home .tibo-editorial-caption {
  grid-column: 1;
  grid-row: 3;
  justify-self: end;
  margin-top: 46px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font: 400 9px/1.5 var(--font-ui);
  color: #526b61;
  text-decoration: none;
  z-index: 2;
}
.home .tibo-editorial-caption strong {
  font: 500 11px/1.5 var(--font-ui);
  color: #36564a;
}
.home .tibo-editorial-caption span {
  white-space: nowrap;
}
.home .tibo-editorial-caption:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.home .tibo-watch-details {
  grid-column: 1;
  grid-row: 4;
}
.home .tibo-watch-note {
  grid-column: 1;
  grid-row: 5;
}
.home .tibo-watch-title {
  font-family: var(--font-ui);
  font-weight: 550;
  letter-spacing: 0.25px;
}
.home .tibo-countdown,
.home .tibo-countdown[data-overdue] {
  font-family: var(--font-data);
  font-weight: 600;
  letter-spacing: -1px;
}
.home .tibo-units {
  font-weight: 450;
  letter-spacing: 0.25px;
}
.home .tibo-watch-mark {
  width: 7px;
  height: 7px;
}
@media (max-width: 760px) {
  .home .tibo-watch {
    --portrait-reserve: 88px;
  }
  .home .tibo-profile {
    top: -6px;
    right: 1px;
    width: 78px !important;
    height: 96px;
  }
  .home .tibo-avatar {
    width: 78px;
    height: 96px;
    object-position: center 25%;
  }
  .home .tibo-editorial-caption {
    margin-top: 0;
    font-size: 9px;
  }
  .home .tibo-countdown,
  .home .tibo-countdown[data-overdue] {
    font-size: 22px;
    letter-spacing: -0.7px;
  }
  header.site nav a,
  .home header.site nav a {
    letter-spacing: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  header.site nav a,
  .home .model,
  .home .tier,
  body .cwc .cwc-pill {
    transition: none;
  }
}
/* Clear inherited grid placement before positioning the portrait layer. */
.home .tibo-profile {
  grid-column: auto;
  grid-row: auto;
}
@media (max-width: 360px) {
  .home .tibo-units {
    font-size: 8.5px;
    letter-spacing: 0;
  }
}
.home header.site .logo .brand-slash {
  font-family: var(--font-display);
  font-weight: 780;
}
/* Match Inter's line metrics while the self-hosted font is in flight. */
@font-face {
  font-family: "Inter Metric Fallback";
  src: local("Arial");
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}
:root {
  --font-ui:
    Inter, "Inter Metric Fallback", -apple-system, BlinkMacSystemFont, Arial,
    sans-serif;
}