.tt-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 1.3em;
  inline-size: 1.3em;
  block-size: 1.3em;
  vertical-align: middle;
}

.tt-icon::before, .tt-icon::after, .tt-icon i {
  position: absolute;
  display: block;
  content: "";
}

.tt-icon-watch::before {
  inset: 24% 17%;
  z-index: 1;
  border: .095em solid;
  border-radius: 50%;
}

.tt-icon-watch::after {
  inset: 5% 37%;
  border-block: .095em solid;
  border-radius: .16em;
  background: linear-gradient(90deg, currentColor .085em, transparent .085em calc(100% - .085em), currentColor 0);
  mask: linear-gradient(#000 0 24%, transparent 24% 76%, #000 76%);
}

.tt-icon-watch i {
  inset: 32% auto auto 48%;
  inline-size: .31em;
  block-size: .26em;
  border-inline-start: .085em solid;
  border-block-end: .085em solid;
  transform: rotate(-24deg);
  transform-origin: left bottom;
}

.tt-icon-phone::before {
  inset: 6% 25%;
  border: .095em solid;
  border-radius: .19em;
}

.tt-icon-phone::after {
  inset: 18% 43% auto;
  block-size: .078em;
  border-radius: 3px;
  background: currentColor;
}

.tt-icon-phone i {
  inset: auto 44% 18%;
  block-size: .075em;
  border-radius: 3px;
  background: currentColor;
}

.tt-icon-route::before {
  inset: 18% 20% 20% 22%;
  border-block-start: .092em dashed;
  border-inline-end: .092em dashed;
  border-radius: .08em .38em .12em 0;
  transform: rotate(16deg);
}

.tt-icon-route::after, .tt-icon-route i {
  inset: 10% auto auto 10%;
  inline-size: .28em;
  block-size: .28em;
  border: .09em solid;
  border-radius: 50%;
}

.tt-icon-route i {
  inset: auto 14% 9% auto;
}

.tt-icon-message::before {
  inset: 13% 10% 23%;
  border: .09em solid;
  border-radius: .22em;
}

.tt-icon-message::after {
  inset: auto auto 12% 27%;
  inline-size: .28em;
  block-size: .24em;
  border-inline-start: .09em solid;
  border-block-end: .09em solid;
  transform: skewY(-30deg);
}

.tt-icon-message i {
  inset: 35% 28% auto;
  block-size: .075em;
  background: currentColor;
  box-shadow: 0 .15em currentColor;
}

.tt-icon-measure::before {
  inset: 29% 3%;
  border: .09em solid;
  border-radius: .12em;
  transform: rotate(-35deg);
}

.tt-icon-measure::after {
  inset: 31% 21% auto;
  block-size: .18em;
  background: repeating-linear-gradient(90deg, currentColor 0 .07em, transparent .07em .24em);
  transform: translate(.04em, .015em) rotate(-35deg);
}

.tt-icon-battery::before {
  inset: 24% 15% 24% 5%;
  border: .09em solid;
  border-radius: .12em;
}

.tt-icon-battery::after {
  inset: 39% 5% 39% auto;
  inline-size: .13em;
  border-radius: .05em;
  background: currentColor;
}

.tt-icon-battery i {
  inset: 40% 33% 40% 22%;
  background: currentColor;
}

.tt-icon-check::before {
  inset: 25% 23% 34% 20%;
  border-inline-start: .11em solid;
  border-block-end: .11em solid;
  transform: rotate(-45deg);
}

.feature-icon {
  display: inline-grid;
  inline-size: 41px;
  block-size: 41px;
  flex: 0 0 41px;
  place-items: center;
  border: 1px solid #d9c8ac;
  border-radius: 7px;
  background: #f5ebda;
  color: var(--red-dark);
  font-size: 1.18rem;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  grid-template-areas: "title dial" "outcome dial";
  align-items: center;
  gap: 14px clamp(19px, 3.9vw, 52px);
  padding-block: clamp(24px, 4.5vw, 58px) clamp(24px, 3.9vw, 50px);
}

.hero-copy { grid-area: title; align-self: end; }
.hero-followup { grid-area: outcome; align-self: start; }

.hero-kicker {
  color: var(--petrol);
}

.hero-kicker span {
  inline-size: 25px;
  block-size: 2px;
  background: var(--red);
}

.hero h1 {
  margin: 16px 0 17px;
  font-size: clamp(3.7rem, 6.05vw, 6rem);
  letter-spacing: -.065em;
  line-height: .98;
}

.hero h1 em {
  color: var(--red);
  font-weight: inherit;
}

.hero-intro {
  max-inline-size: 40ch;
  color: #41494c;
  font-size: clamp(1.03rem, 1.45vw, 1.19rem);
}

.hero-readout {
  max-inline-size: 45ch;
  min-block-size: 5.35em;
  padding: 9px 11px;
  border-inline-start: 2px solid var(--red);
  background: linear-gradient(90deg, #e6d9c888, transparent);
}

.hero-readout strong {
  display: block;
  margin-bottom: 3px;
  color: var(--petrol-dark);
  font-weight: 700;
}

.hero-readout p {
  color: #3e484c;
  line-height: 1.39;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.hero-actions .button {
  min-block-size: 44px;
}

.hero-dial {
  grid-area: dial;
  min-inline-size: 0;
}

.use-dial-figure, .gps-map-figure {
  margin: 0;
}

.use-dial-art {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1.75;
  border: 1px solid #4d615c;
  border-radius: 12px 12px 0 0;
  background:
    linear-gradient(0deg, #9caa9218 1px, transparent 1px) 0 0 / 31px 31px,
    linear-gradient(90deg, #9caa9218 1px, transparent 1px) 0 0 / 31px 31px,
    radial-gradient(ellipse at 49% 43%, #3e6766, #173940 69%, #173138 100%);
}

.use-dial-art::before {
  position: absolute;
  inset: 10px;
  border: 1px solid #d0c09d44;
  border-radius: 8px;
  pointer-events: none;
  content: "";
}

.use-wheel {
  position: absolute;
  inset: 48.6% auto auto 50%;
  inline-size: min(48%, 320px);
  aspect-ratio: 1;
  border: 1px solid #f1d2a0;
  border-radius: 50%;
  background: radial-gradient(circle at 43% 41%, #e7d5ad 59%, #c7a877 83%, #9d774d);
  box-shadow: 0 0 0 6px #233e42, 0 0 0 7px #b8a78782, 0 13px 27px #13282dcc;
  transform: translate(-50%, -50%);
}

.use-wheel-ticks {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(#654b2e 0deg .9deg, transparent 1deg 30deg),
    repeating-conic-gradient(#92734c 0deg .45deg, transparent .55deg 6deg);
  mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 0);
}

.use-wheel-needle {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: rotate(var(--dial-angle));
  transition: transform 510ms cubic-bezier(.2,.75,.3,1);
}

.use-wheel-needle i {
  position: absolute;
  inset: 1.1% auto auto 50%;
  inline-size: 8px;
  block-size: 13%;
  background: var(--red);
  box-shadow: 0 0 6px #af3522;
  clip-path: polygon(50% 0, 100% 85%, 72% 100%, 28% 100%, 0 85%);
  transform: translateX(-50%);
}

.use-wheel-window {
  position: absolute;
  inset: 13%;
  overflow: hidden;
  border: 2px solid #263e40;
  border-radius: 50%;
  background: #234747;
  box-shadow: 0 0 0 3px #f5deb2, 0 0 0 4px #8b6d47;
}

.use-wheel-window img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.use-wheel-window img:not([hidden]) {
  animation: scene-reveal 280ms ease-out both;
}

@keyframes scene-reveal {
  from { opacity: .65; transform: scale(1.025); }
  to { opacity: 1; transform: scale(1); }
}

.use-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}

.use-tab {
  display: grid;
  grid-template-columns: minmax(0, 36px) minmax(0, 1fr);
  align-items: center;
  flex: 1 1 max(42%, 8.15em);
  min-inline-size: 0;
  gap: 8px;
  min-block-size: 56px;
  padding: 7px;
  border: 1px solid #8f7957;
  border-radius: 7px;
  background: #fbf2df;
  color: #243236;
  text-align: left;
}

.use-tab img {
  inline-size: 100%;
  block-size: 36px;
  border-radius: 4px;
  object-fit: cover;
}

.use-tab strong, .use-tab small {
  display: block;
  line-height: 1.19;
}

.use-tab strong {
  font-size: 1rem;
  font-weight: 700;
}

.use-tab small {
  margin-top: 3px;
  color: #536064;
  font-size: .875rem;
}

.use-tab:hover {
  border-color: var(--petrol);
  background: #fff8e9;
}

.use-tab:focus-visible {
  outline: 2px solid var(--petrol);
  outline-offset: 3px;
}

.use-tab[aria-selected="true"] {
  border-color: var(--red);
  background: #fff8e9;
  box-shadow: inset 0 -2px var(--red);
}

.use-tab[aria-selected="true"] strong {
  color: var(--red-dark);
}

.use-dial-caption, .gps-map-key {
  padding: .55em .65em;
  border-radius: 0 0 7px 7px;
  background: #173138;
  color: #fff0d7;
  font: 500 .875rem/1.4 var(--mono);
  text-align: center;
}

.use-panels {
  display: grid;
  gap: 12px;
}

.use-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.26fr) minmax(0, .74fr);
  gap: 10px;
  min-block-size: 284px;
  padding: 9px;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background: #fffaf1;
}

.use-panel:focus-visible {
  outline-offset: 3px;
}

.use-copy {
  padding: clamp(14px, 2.65vw, 35px);
}

.use-copy h3 {
  margin-bottom: 11px;
  font-size: clamp(1.72rem, 2.8vw, 2.78rem);
}

.use-copy > p {
  max-inline-size: 64ch;
  color: #41494c;
  font-size: 1.04rem;
}

.use-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 19px;
  margin-block: 14px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.use-checks dt {
  color: var(--petrol-dark);
  font-weight: 700;
}

.use-checks dd {
  margin-top: 2px;
  color: #475257;
  font-size: .94rem;
  line-height: 1.42;
}

.use-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 16px;
}

.use-links .button {
  min-block-size: 44px;
}

.use-fact {
  align-content: center;
  min-inline-size: 0;
  padding: clamp(15px, 2.8vw, 31px);
  border: 1px solid #567374;
  border-radius: 7px;
  background:
    linear-gradient(115deg, #375e5d, transparent 68%),
    #193943;
  color: #f9edda;
}

.use-fact h3 {
  color: #fff2da;
  font-size: clamp(1.42rem, 2.35vw, 2.2rem);
  line-height: 1.08;
}

.use-fact p {
  margin-top: 7px;
  color: #dbe7df;
  font-size: .94rem;
  line-height: 1.42;
}

.use-fact dl {
  display: grid;
  gap: 5px;
  margin: 9px 0 6px;
}

.use-fact dl > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 3px 10px;
  padding: 5px 0;
  border-block-end: 1px solid #c0cfbb57;
}

.use-fact dt {
  color: #f7d09d;
  font: 500 .79rem/1.3 var(--mono);
}

.use-fact dd {
  font-weight: 650;
  font-size: .93rem;
}

[data-use-panel="corrida"] .use-fact dd {
  font: 500 clamp(1.02rem, 2vw, 1.37rem)/1.3 var(--mono);
}

.use-fact-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  color: #f6d0a0;
  font-size: .89rem;
}

.use-fact-source:focus-visible {
  outline-color: #f6d0a0;
}

@media (max-width: 780px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "dial" "outcome"; gap: 13px; }
  .hero h1 { margin: 10px 0 12px; font-size: clamp(3.35rem, 9.8vw, 5.25rem); }
  .hero-readout { min-block-size: 0; }
  .hero-actions { margin-top: 12px; }
  .hero-dial { inline-size: min(100%, 610px); justify-self: center; }
}

@media (max-width: 570px) {
  .hero-actions .button { padding-inline: 10px; gap: 6px; }
  .use-dial-art { aspect-ratio: 1.55; }
  .use-wheel { inline-size: min(54%, 290px); }
  .use-tab { grid-template-columns: minmax(0, 1fr); }
  .use-tab img { display: none; }
  .use-panel { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .use-copy, .use-fact { padding: 13px; }
  .use-checks { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 350px) {
  .hero h1 { font-size: 3.12rem; }
}

@media (prefers-reduced-motion: reduce) {
  .use-wheel-needle { transition: none; }
  .use-wheel-window img:not([hidden]) { animation: none; }
}

.ruler-intro {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: end;
  gap: 15px 32px;
  margin-bottom: 23px;
}

.ruler-intro .eyebrow {
  color: #ebc793;
}

.ruler-intro h2 {
  margin-top: 8px;
  text-wrap: initial;
}

.ruler-intro p {
  max-inline-size: 64ch;
  color: #e7ede6;
  font-size: 1.06rem;
}

.ruler-shortcut {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-block-size: 38px;
  margin-top: 4px;
  color: #f6d29b;
  font-weight: 600;
  font-size: .93rem;
}

.ruler-workbench {
  display: grid;
  grid-template-columns: minmax(0, .97fr) minmax(0, 1.03fr);
  gap: 12px;
}

.ruler-controls-stack {
  display: grid;
  align-content: start;
  gap: 12px;
}

.fit-controls {
  padding: clamp(16px, 3.2vw, 31px);
  border: 1px solid #c3dcda53;
  border-radius: 9px;
  background: #142f39a6;
}

.fit-controls fieldset, .gps-controls fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.fit-controls legend {
  margin-bottom: 10px;
  padding: 0;
  font-weight: 700;
  font-size: 1.04rem;
}

.fit-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.25em), 1fr));
  gap: 10px 8px;
}

.fit-inputs > div {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-items: end;
  row-gap: 5px;
}

.fit-inputs label {
  color: #e0ebe2;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
}

.fit-inputs input {
  min-inline-size: 0;
  inline-size: 100%;
  min-block-size: 44px;
  padding: 5px 7px;
  border: 1px solid #8ca9a5;
  border-radius: 5px;
  background: #102d37;
  color: #fbf2df;
  font: 500 1rem/1.2 var(--mono);
}

.fit-field-error {
  align-self: start;
  color: #ffd0bc;
  font-size: .9375rem;
  line-height: 1.35;
}

.fit-inputs input[aria-invalid="true"] {
  border-color: #ff9d86;
  box-shadow: 0 0 0 1px #ff9d86;
}

.fit-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block: 10px 8px;
}

.fit-presets button {
  min-block-size: 44px;
  padding: 6px 10px;
  border: 1px solid #b6c4ae99;
  border-radius: 5px;
  background: transparent;
  color: #eee9d9;
  font: 500 .875rem/1.25 var(--mono);
}

.fit-presets button:hover, .fit-presets button[aria-pressed="true"] {
  border-color: #f3c991;
  background: #f3c991;
  color: #192d33;
}

.fit-controls > p:not(.sr-only) {
  color: #dde7df;
  font-size: .9rem;
}

.fit-jump {
  display: none;
}

.fit-figure {
  min-inline-size: 0;
  margin: 0;
  padding: clamp(15px, 2.6vw, 29px);
  border: 1px solid #c9b99c;
  border-radius: 9px;
  background: #f4ebd8 url("./paper.webp");
  color: var(--ink);
}

.fit-figure-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px 12px;
}

.fit-figure-head h3 {
  font-size: clamp(1.5rem, 2.65vw, 2.1rem);
}

.fit-figure-head span {
  color: var(--brass-ink);
  font: 500 .71rem/1.2 var(--mono);
}

.fit-schematic {
  --case-percent: 55.556%;
  --tip-percent: 63.889%;
  --flat-percent: 0%;
  position: relative;
  isolation: isolate;
  inline-size: min(100%, clamp(224px, 24vw, 315px));
  aspect-ratio: 1;
  margin: 5px auto;
  overflow: hidden;
  background-image:
    linear-gradient(0deg, #a78d6045 1px, transparent 1px),
    linear-gradient(90deg, #a78d6045 1px, transparent 1px);
  background-size: 16px 16px;
  mask: radial-gradient(ellipse at 50% 50%, #000 65%, #0007 88%, transparent 99%);
}

.fit-wrist-plane, .fit-band, .fit-lugs, .fit-face, .fit-diameter, .fit-length {
  position: absolute;
  inset: 50% auto auto 50%;
  display: block;
  transform: translate(-50%, -50%);
  transition: inline-size 240ms ease, block-size 240ms ease, opacity 150ms ease;
}

.fit-wrist-plane {
  inline-size: 98%;
  block-size: var(--flat-percent);
  border-block: 1px dashed #235668;
  background: #5897a43a;
  opacity: 0;
}

.fit-schematic[data-has-wrist] .fit-wrist-plane {
  opacity: 1;
}

.fit-band {
  inline-size: calc(var(--case-percent) * .41);
  block-size: 95%;
  border: 1px solid #59727b77;
  border-radius: 5px;
  background: repeating-linear-gradient(0deg, #82999d2e 0 3px, #bacac847 3px 7px);
}

.fit-lugs {
  inline-size: calc(var(--case-percent) * .57);
  block-size: var(--tip-percent);
  border: 2px solid #315664;
  border-radius: 7px;
  background: #8ba1a2;
}

.fit-face {
  inline-size: var(--case-percent);
  block-size: var(--case-percent);
  border: 2px solid #294d5a;
  border-radius: 50%;
  background: #e5e5d6;
  box-shadow: inset 0 0 0 5px #a4b7b6;
}

.fit-face::before, .fit-face::after, .fit-face i {
  position: absolute;
  content: "";
}

.fit-face::before {
  inset: 9%;
  border-radius: 50%;
  background: repeating-conic-gradient(#315562 0deg 1.7deg, transparent 2deg 30deg);
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
}

.fit-face::after, .fit-face i {
  inset: 22% auto 50% calc(50% - 1px);
  inline-size: 2px;
  background: #315562;
  transform: rotate(53deg);
  transform-origin: bottom;
}

.fit-face i {
  inset-block-start: 32%;
  transform: rotate(-45deg);
}

.fit-diameter {
  inline-size: var(--case-percent);
  block-size: 1.5px;
  background: var(--red);
}

.fit-length {
  inset-inline-start: 88.5%;
  inline-size: 1.5px;
  block-size: var(--tip-percent);
  background: var(--petrol);
}

.fit-diameter::before, .fit-diameter::after, .fit-length::before, .fit-length::after {
  position: absolute;
  background: inherit;
  content: "";
}

.fit-diameter::before, .fit-diameter::after {
  inset: -5px auto auto 0;
  inline-size: 1.5px;
  block-size: 11px;
}

.fit-diameter::after {
  inset-inline: auto 0;
}

.fit-length::before, .fit-length::after {
  inset: 0 auto auto -5px;
  inline-size: 11px;
  block-size: 1.5px;
}

.fit-length::after {
  inset-block: auto 0;
}

.fit-schematic:not([data-valid-watch]) > :not(.fit-wrist-plane) {
  opacity: 0;
}

.fit-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding-block: 10px;
  border-block: 1px solid #d5c6ac;
}

.fit-legend div {
  padding-left: 7px;
  border-inline-start: 2px solid var(--petrol);
}

.fit-legend div:first-child {
  border-color: var(--red);
}

.fit-legend div:last-child {
  border-inline-start-style: dashed;
}

.fit-legend dt {
  color: #4d5c61;
  font-size: .82rem;
}

.fit-legend dd {
  color: var(--ink);
  font: 500 clamp(.73rem, 1.25vw, .95rem)/1.3 var(--mono);
}

.fit-feedback {
  min-block-size: 2.65em;
  margin-top: 9px;
  color: #374a52;
  font-size: .94rem;
  line-height: 1.36;
}

.ruler-note {
  max-inline-size: 86ch;
  margin-top: 13px;
  color: #e6ede5;
  font-size: .94rem;
}

.ruler-note a {
  color: #f6d29b;
}

.ruler-section + .categories {
  margin-top: clamp(36px, 6vw, 65px);
}

.guide-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.guide-menu a {
  display: inline-flex;
  min-block-size: 40px;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  border: 1px solid var(--line-dark);
  border-radius: 5px;
  background: #fffaf0b3;
  color: var(--petrol);
  font-weight: 650;
  font-size: .88rem;
  text-decoration: none;
}

.guide-menu a:hover {
  border-color: var(--brass);
  color: var(--red-dark);
}

.gps-hero {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  align-items: center;
  gap: clamp(19px, 4.2vw, 54px);
  margin-bottom: clamp(28px, 4vw, 49px);
  padding-block: 8px 0;
}

.gps-hero-copy h1 {
  font-size: clamp(3rem, 6vw, 5.3rem);
}

.gps-hero-copy h1 em {
  display: block;
  color: var(--red);
  font-weight: inherit;
}

.gps-mode-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 17px;
}

.gps-mode-summary div {
  padding: 9px 10px;
  border: 1px solid var(--line-dark);
  border-radius: 5px;
  background: #fbf5e8;
}

.gps-mode-summary dt {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--petrol-dark);
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.28;
}

.gps-mode-summary .tt-icon {
  color: var(--red-dark);
}

.gps-mode-summary dd {
  margin-top: 3px;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.3;
}

.gps-deck {
  min-inline-size: 0;
  padding: clamp(13px, 2.4vw, 27px);
  border: 1px solid #325767;
  border-radius: 11px;
  background:
    radial-gradient(ellipse at 85% 4%, #2f606d, transparent 60%),
    #173a46;
  box-shadow: 0 13px 30px #163b4730;
  color: var(--paper);
}

.gps-deck :focus-visible {
  outline-color: #ffd39b;
}

.gps-deck h2 {
  color: #fff3df;
  font-size: clamp(1.58rem, 3vw, 2.35rem);
  text-wrap: initial;
}

.gps-deck-head p {
  margin-top: 5px;
  color: #d5e5df;
  font-size: .96rem;
}

.gps-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 6px 14px;
  margin-block: 11px;
}

.gps-controls legend {
  margin-bottom: 3px;
  padding: 0;
  color: #d2e5de;
  font-size: .9375rem;
}

.gps-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.gps-modes label {
  position: relative;
}

.gps-modes input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.gps-modes span, .gps-phone-toggle {
  display: inline-flex;
  min-block-size: 44px;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid #9eb4ad;
  border-radius: 5px;
  color: #f7eddb;
  font-weight: 650;
  font-size: .9rem;
  cursor: pointer;
}

.gps-modes input:checked + span {
  border-color: #f1c193;
  background: #f1c193;
  color: #172d35;
}

.gps-modes input:focus-visible + span {
  outline: 2px solid #ffd39b;
  outline-offset: 2px;
}

.gps-phone-toggle {
  border-color: transparent;
  padding-inline: 2px 5px;
}

.gps-phone-toggle:has(input:focus-visible) {
  outline: 2px solid #ffd39b;
  outline-offset: 2px;
}

.gps-phone-toggle input:focus-visible {
  outline: none;
}

.gps-phone-toggle input {
  flex: 0 0 16px;
  inline-size: 16px;
  block-size: 16px;
  margin: 0;
  accent-color: #f1c193;
}

.gps-map {
  position: relative;
  min-block-size: clamp(188px, 19vw, 236px);
  overflow: hidden;
  border: 1px solid #a9c1b459;
  border-radius: 7px 7px 0 0;
  background:
    linear-gradient(0deg, #d7e1d114 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, #d7e1d114 1px, transparent 1px) 0 0 / 22px 22px,
    radial-gradient(ellipse at 72% 38%, #2d5c62, #14343c 83%);
}

.gps-map canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.gps-device {
  position: absolute;
  inset: 27% auto auto 15%;
  display: grid;
  place-items: center;
  gap: 1px;
  inline-size: min(max(27%, 2.8em), 105px);
  min-block-size: 59px;
  padding: 4px 2px;
  border: 1px solid #cbd9cb78;
  border-radius: 7px;
  background: #183944f2;
  color: #e4e8d7;
  transform: translate(-50%, -50%);
}

.gps-device .tt-icon {
  font-size: 1.42rem;
}

.gps-device strong {
  font-size: .75rem;
  font-weight: 650;
  line-height: 1.1;
}

.gps-device-phone {
  inset-block-start: 70%;
}

.gps-map[data-phone="absent"] .gps-device-phone {
  border-style: dashed;
  color: #a8bfb6;
  background: #19373d;
}

.gps-map[data-source="watch"] .gps-device-watch,
.gps-map[data-source="phone"] .gps-device-phone {
  border-color: #ff9f86;
  box-shadow: 0 0 0 3px #ff9f8627, 0 0 20px #ff836b37;
  color: #ffd5b9;
}

.gps-result {
  min-block-size: 77px;
  margin-top: 12px;
  padding: 1px 0 0 10px;
  border-inline-start: 2px solid #ff9f86;
}

.gps-result strong {
  display: block;
  color: #ffe3c3;
  font-weight: 700;
}

.gps-result p, .gps-noscript {
  margin-top: 2px;
  color: #e2eae2;
  font-size: .94rem;
  line-height: 1.42;
}

.wrist-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.wrist-method {
  margin: 0;
  overflow: hidden;
  border: 1px solid #b6c4b072;
  border-radius: 8px;
  background: #142f39a6;
}

.wrist-method img {
  inline-size: 100%;
  aspect-ratio: 2.16;
  object-fit: cover;
}

.wrist-method figcaption {
  padding: 13px clamp(12px, 2vw, 24px) 16px;
}

.wrist-method h3 {
  margin-bottom: 5px;
  color: #fff1d6;
  font-size: clamp(1.35rem, 2.3vw, 1.88rem);
}

.wrist-method p {
  max-inline-size: 52ch;
  color: #e1ebe4;
  font-size: .94rem;
}

.fit-line-label {
  position: absolute;
  display: block;
  padding: 2px 3px;
  border-radius: 2px;
  background: #f4ebd8;
  font: 600 .67rem/1.1 var(--mono);
}

.fit-label-case {
  inset: calc(50% + 5px) auto auto 8%;
  color: var(--red-dark);
}

.fit-label-span {
  inset: 50% 2.7% auto auto;
  color: var(--petrol-dark);
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
}

.fit-scale-note {
  margin-top: 7px;
  color: #50616a;
  font-size: .9375rem;
}

.tt-icon-sync::before {
  inset: 17%;
  border: .095em solid;
  border-block-color: transparent;
  border-radius: 50%;
  transform: rotate(37deg);
}

.tt-icon-sync::after, .tt-icon-sync i {
  inset: 18% 26% auto auto;
  inline-size: .28em;
  block-size: .28em;
  border-block-start: .09em solid;
  border-inline-end: .09em solid;
  transform: rotate(85deg);
}

.tt-icon-sync i {
  inset: auto auto 18% 26%;
  transform: rotate(265deg);
}

.tt-icon-map::before {
  inset: 19% 11%;
  border: .09em solid;
  border-radius: .08em;
  background:
    linear-gradient(90deg, transparent 31%, currentColor 31% 38%, transparent 38% 64%, currentColor 64% 71%, transparent 71%);
  transform: skewY(-10deg);
}

.tt-icon-map i {
  inset: 30% 30% 33% 31%;
  border-inline-end: .08em dotted;
  border-block-end: .08em dotted;
  transform: rotate(-16deg);
}

.tt-icon-navigation::before {
  inset: 10%;
  background: currentColor;
  clip-path: polygon(94% 6%, 65% 92%, 47% 57%, 9% 43%);
}

.tt-icon-export::before {
  inset: 19% 18% 14%;
  border: .09em solid;
  border-block-start-color: transparent;
  border-radius: .05em;
}

.tt-icon-export::after {
  inset: 11% auto 46% 48%;
  inline-size: .09em;
  background: currentColor;
}

.tt-icon-export i {
  inset: 12% auto auto 35%;
  inline-size: .37em;
  block-size: .37em;
  border-inline-start: .09em solid;
  border-block-start: .09em solid;
  transform: rotate(45deg);
}

.gps-flow {
  margin-bottom: clamp(29px, 4.5vw, 55px);
}

.gps-flow-head {
  gap: 7px 16px;
}

.gps-flow-head p {
  max-inline-size: 65ch;
  margin-top: 6px;
  color: var(--muted);
}

.gps-flow-head .text-link {
  align-self: center;
}

.route-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 27px;
}

.route-step {
  position: relative;
  display: flex;
  align-items: start;
  gap: 11px;
  padding: clamp(13px, 2vw, 23px);
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: #fffaee;
}

.route-step + .route-step::before, .route-step + .route-step::after {
  position: absolute;
  inset: 50% auto auto -22px;
  inline-size: 16px;
  block-size: 1.5px;
  background: var(--red);
  content: "";
}

.route-step + .route-step::after {
  inset-inline-start: -14px;
  inline-size: 8px;
  block-size: 8px;
  border: solid var(--red);
  border-width: 1.5px 1.5px 0 0;
  background: transparent;
  transform: translateY(-40%) rotate(45deg);
}

.route-step-icon {
  display: inline-grid;
  flex: 0 0 48px;
  inline-size: 48px;
  block-size: 48px;
  place-items: center;
  border: 1px solid #d7bf9a;
  border-radius: 7px;
  background: radial-gradient(circle at 44% 36%, #faead0, #f0e2c7);
  color: var(--red-dark);
  font-size: 1.55rem;
}

.route-step h3, .route-export h3, .navigation-flow h3 {
  margin-bottom: 4px;
  font-size: clamp(1.28rem, 2vw, 1.63rem);
}

.route-step p, .route-export p {
  color: #4b5458;
  font-size: .94rem;
  line-height: 1.39;
}

[data-recorded="false"] .route-step-map {
  border-style: dashed;
  background: #eee7d9;
}

[data-recorded="false"] .route-step-map::before {
  background: repeating-linear-gradient(90deg, #6f6560 0 3px, transparent 3px 5px);
}

[data-recorded="false"] .route-step-map::after {
  border-color: #6f6560;
}

.route-export {
  display: flex;
  align-items: start;
  gap: 10px;
  inline-size: calc((100% - 54px) / 3);
  margin: 7px 0 12px auto;
  padding: 8px 13px;
  border-inline-start: 2px dashed var(--brass);
}

.route-export > .tt-icon {
  color: var(--petrol);
  font-size: 1.2rem;
}

.route-export h3 {
  font-size: 1.17rem;
}

.navigation-flow {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 15px;
  padding: clamp(13px, 2.5vw, 28px);
  border: 1px solid #526d6b;
  border-radius: 8px;
  background: radial-gradient(ellipse at 38% 0%, #30565d, #193941 80%);
  color: #f9edda;
}

.navigation-flow-intro {
  display: flex;
  align-items: start;
  gap: 11px;
}

.navigation-flow-intro .route-step-icon {
  border-color: #bea577;
  background: #ebd6ad;
  color: #8d2d25;
}

.navigation-flow p {
  color: #e1ebe3;
  font-size: .94rem;
  line-height: 1.4;
}

.navigation-flow ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.navigation-flow li {
  padding-inline-start: 10px;
  border-inline-start: 1px dashed #dac39baa;
}

.navigation-flow li strong {
  display: block;
  margin-bottom: 3px;
  color: #f8d29b;
  font: 500 .76rem/1.3 var(--mono);
}

@media (max-width: 720px) {
  .route-flow { grid-template-columns: 1fr; gap: 18px; }
  .route-step + .route-step::before, .route-step + .route-step::after {
    inset: -16px auto auto 34px;
  }
  .route-step + .route-step::before {
    inline-size: 1.5px;
    block-size: 12px;
  }
  .route-step + .route-step::after {
    inset: -11px auto auto 30px;
    transform: rotate(135deg);
  }
  [data-recorded="false"] .route-step-map::before {
    background: repeating-linear-gradient(0deg, #6f6560 0 3px, transparent 3px 5px);
  }
  .route-export { inline-size: 100%; }
  .navigation-flow { grid-template-columns: 1fr; }
}

@media (max-width: 530px) {
  .wrist-methods { grid-template-columns: 1fr; gap: 7px; }
  .wrist-method figcaption { padding-block: 9px 11px; }
  .fit-label-case { inset-inline-start: 5%; }
  .fit-label-span { inset-inline-end: 1.9%; }
}

.gps-catalog .products-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gps-catalog .catalog-heading p {
  max-inline-size: 74ch;
}

.gps-catalog .product-photo-pending {
  display: flex;
  min-block-size: 51px;
  block-size: auto;
  justify-content: start;
  gap: 9px;
  padding: 9px 15px;
  background: #f7f0e3;
}

.gps-catalog .product-photo-pending .mini-dial {
  scale: .8;
}

.gps-catalog .product-content {
  padding: clamp(13px, 2.4vw, 25px);
}

.gps-catalog .product-content h3 {
  font-size: clamp(1.44rem, 2.8vw, 2.1rem);
}

.gps-evidence {
  inline-size: 100%;
  margin-top: 4px;
}

.evidence-row {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: 5px 9px;
  padding-block: 10px;
  border-top: 1px solid var(--line);
}

.evidence-row dt {
  display: flex;
  align-items: start;
  gap: 6px;
  color: var(--petrol-dark);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.35;
}

.evidence-row dd {
  color: #414c52;
  font-size: .91rem;
  line-height: 1.43;
}

.evidence-tag {
  display: inline-block;
  margin-bottom: 3px;
  padding: 3px 5px;
  border: 1px solid #e0c7a2;
  border-radius: 4px;
  background: #f7ecdc;
  color: #614626;
  font: 500 .7rem/1.2 var(--mono);
}

.evidence-documented {
  border-color: #a8c5bc;
  background: #e8f0e9;
  color: #265247;
}

.evidence-pending {
  border-color: #e1cdc3;
  background: #f8eee9;
  color: #683e34;
}

.gps-product-sources {
  padding-bottom: 7px;
  color: var(--brass-ink);
  font-size: .9rem;
}

.gps-product-sources a {
  display: inline-block;
}

.gps-examples {
  margin-top: 40px;
}

.gps-example-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.gps-example {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: clamp(14px, 2.3vw, 24px);
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: #fff9ee;
}

.gps-example h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.96rem);
}

.gps-example p {
  color: #424c50;
  font-size: .95rem;
}

.gps-example .gps-example-check {
  margin-top: 2px;
  color: var(--petrol-dark);
  font-weight: 650;
}

.gps-example a {
  min-block-size: 42px;
  margin-top: auto;
}

.criteria-illustrated > div {
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  background: #fffaf1a3;
}

.criteria-illustrated dt {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--petrol-dark);
  line-height: 1.28;
}

.criteria-illustrated dd {
  margin-top: 8px;
}

.editorial-sources {
  margin-top: 10px;
  color: var(--muted);
  font-size: .9rem;
}

.decision-panel {
  display: grid;
  grid-template-columns: minmax(115px, .31fr) minmax(0, 1fr);
  margin-top: 28px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 9px;
  background: #fffbf2;
}

.decision-visual {
  position: relative;
  isolation: isolate;
  display: grid;
  min-block-size: 160px;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 57% 35%, #335c62, #173b44 86%);
  color: #efd3a5;
  font-size: clamp(2.6rem, 6vw, 5rem);
}

.decision-visual::before, .decision-visual::after {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: -1;
  inline-size: 1.9em;
  aspect-ratio: 1;
  border: 1px solid #e9dcbf60;
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.decision-visual::after {
  inline-size: 2.2em;
  border-style: dashed;
  border-color: #e9dcbf43;
}

.decision-copy {
  padding: clamp(15px, 2.9vw, 33px);
}

.decision-label {
  margin-bottom: 5px;
  color: var(--red-dark);
  font: 500 .73rem/1.15 var(--mono);
}

.decision-copy h2 {
  max-inline-size: 40ch;
  font-size: clamp(1.55rem, 2.85vw, 2.55rem);
  text-wrap: initial;
}

.decision-copy > p:not(.decision-label) {
  max-inline-size: 68ch;
  margin-top: 7px;
  color: #41494d;
}

.decision-copy .decision-action {
  color: var(--petrol-dark);
  font-weight: 650;
}

.decision-copy a {
  margin-top: 3px;
}

.related-grid li a {
  min-block-size: 100%;
  align-items: flex-start;
}

.related-grid p {
  margin-top: 4px;
  color: #465359;
  font-size: .91rem;
  font-weight: 400;
  line-height: 1.35;
}

@media (max-width: 870px) {
  .gps-hero { column-gap: 16px; }
  .gps-mode-summary { gap: 4px; }
  .gps-mode-summary div { padding-inline: 6px; }
}

@media (max-width: 720px) {
  .ruler-intro, .ruler-workbench { grid-template-columns: 1fr; }
  .ruler-intro { gap: 8px; margin-bottom: 14px; }
  .ruler-intro p { font-size: .99rem; }
  .fit-jump { display: inline-flex; min-block-size: 40px; align-items: center; gap: 7px; margin-top: 4px; color: #f6d29b; font-size: .91rem; }
  .gps-hero { grid-template-columns: 1fr; row-gap: 10px; padding-top: 2px; }
  .gps-hero-copy { padding-bottom: 5px; }
  .gps-hero-copy h1 { font-size: clamp(2.45rem, 9.25vw, 3.6rem); }
  .gps-hero-copy h1 em { display: inline; }
  .gps-map { min-block-size: 189px; }
  .gps-result { min-block-size: auto; padding-bottom: 3px; }
  .gps-example-grid { grid-template-columns: 1fr; }
  .gps-examples { margin-top: 25px; }
}

@media (max-width: 500px) {
  .fit-schematic { inline-size: min(100%, 207px); }
  .gps-controls { column-gap: 7px; }
  .gps-modes span { padding-inline: 8px; }
  .gps-phone-toggle { gap: 6px; padding-inline: 0; }
  .gps-catalog .products-grid { grid-template-columns: 1fr; }
  .evidence-row { grid-template-columns: 1fr; }
  .decision-panel { grid-template-columns: 1fr; }
  .decision-visual { min-block-size: 84px; }
  .guide-menu a { min-block-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .fit-wrist-plane, .fit-band, .fit-lugs, .fit-face, .fit-diameter, .fit-length { transition: none; }
}

@media (max-width: 780px) {
  .use-fact-source { padding-block: 11px; margin-block: -3px -11px; }
}

/* Marcas, A ou B, decodificador */
.footer-note { margin-block-start: 8px; font-size: .84rem; opacity: .85; }
.fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-block-start: 14px; }
.fact-grid > div { padding: 12px 14px; border: 1px solid var(--line, #d9d0c0); border-radius: 10px; background: var(--paper, #fbf8f2); overflow-wrap: anywhere; }
.fact-grid dt { font-weight: 700; margin-block-end: 4px; }
.fact-grid dd { margin: 0; }
.fact-source { font-size: .84rem; }
.sources ul, .decoder-care { padding-inline-start: 1.1em; }
.sources li, .decoder-care li, .decoder-brands li { margin-block: 6px; overflow-wrap: anywhere; }
.choose-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-block-start: 12px; }
.choose-cards > div { padding: 14px 16px; border: 1px solid var(--line, #d9d0c0); border-radius: 10px; }
.choose-cards h3 { margin: 0 0 6px; }
.ab-picks { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 10px 0 0; list-style: none; }
.decoder-field { display: block; margin-block: 12px; }
.decoder-field span { display: block; font-weight: 700; margin-block-end: 6px; }
.decoder-field select { inline-size: 100%; max-inline-size: 100%; min-block-size: 44px; padding: 8px 10px; font: inherit; }
.decoder-row { padding: 14px 16px; margin-block: 10px; border: 1px solid var(--line, #d9d0c0); border-radius: 10px; }
.decoder-row h3 { margin: 0 0 6px; }
.decoder-brands { padding-inline-start: 1.1em; }
.hub-note { margin-block-start: 18px; }
@media (max-width: 720px) { .fact-grid, .choose-cards { grid-template-columns: 1fr; } }

.compat-choice { display: flex; gap: 16px; border: 0; padding: 0; margin: 12px 0; }
.compat-choice label { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; font-weight: 700; }
.compat-row { padding: 14px 16px; margin-block: 10px; border: 1px solid var(--line, #d9d0c0); border-radius: 10px; }
.compat-row h3 { margin: 0 0 4px; }
.compat-app { margin: 0 0 8px; color: var(--muted); }