/* Tracker pages per agent and per number format: the package tracker's look */
.sk4 {--sk-deep: #0e7490; --sk-mute: #8b8b99; --sk-warn: #f59e0b; max-width: 980px; margin: 0 auto; padding: 22px 16px 8px; min-width: 0; color: var(--bone);}
.sk4 *, .sk4 *::before, .sk4 *::after {box-sizing: border-box;}
.sk4 [hidden] {display: none !important;}
.sk4 a:focus-visible, .sk4 button:focus-visible, .sk4 input:focus-visible {outline: 2px solid var(--hazard); outline-offset: 2px;}
.sk4 .sr {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}

/* back to every tool, and the other tools near the top: plain links, part of the page */
.sk4 .tp-back {display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; margin: 0 0 14px;
  border: 1px solid var(--ink-line); background: var(--ink-raised); color: var(--bone); text-decoration: none;
  font: 700 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;}
.sk4 .tp-back svg {width: 20px; height: 20px; flex: none;}
.sk4 .tp-back:hover {border-color: var(--hazard); color: var(--hazard);}
.sk4 .sk-row {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin: 0 0 18px;}
.sk4 .sk-row a {min-height: 46px; display: flex; align-items: center; justify-content: center; gap: .3rem; padding: .3rem .25rem; text-align: center;
  background: var(--ink-raised); border: 2px solid var(--ink-line); border-radius: 2px; color: var(--text-secondary); text-decoration: none;
  font: 400 .72rem/1.05 var(--font-display); letter-spacing: .03em; text-transform: uppercase; min-width: 0;}
.sk4 .sk-row a:hover {border-color: var(--hazard); color: var(--hazard);}
.sk4 .sk-row .ic {flex: none;}
.sk4 .sk-row .l, .sk4 .sk-row .bt {display: none;}
.sk4 .sk-row .bt {font: 700 .58rem/1.3 var(--font-mono); letter-spacing: .08em; border: 1px solid currentColor; border-radius: 2px; padding: .05rem .3rem; opacity: .85;}
@media (min-width: 901px) {
  .sk4 .sk-row {gap: .5rem;}
  .sk4 .sk-row a {min-height: 52px; padding: .4rem .6rem; font-size: .95rem; gap: .45rem;}
  .sk4 .sk-row .s {display: none;}
  .sk4 .sk-row .l, .sk4 .sk-row .bt {display: inline;}
}

/* the page */
.sk4 main {display: block; min-width: 0;}
.sk4 .tk-crumb {font: 400 .72rem/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--sk-mute); margin: 0 0 10px;}
.sk4 .tk-crumb a {color: var(--sk-mute); text-decoration: none;}
.sk4 .tk-crumb a:hover {color: var(--hazard);}
.sk4 main > .cc-kicker {margin: 0 0 10px;}
.sk4 h1 {font: 400 40px/1.02 var(--font-display); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 18px; color: var(--bone);
  text-wrap: balance; overflow-wrap: anywhere;}
.sk4 h1 span {color: var(--hazard);}
.sk4 .tf h1 {font-size: 34px;}
.sk4 h2 {font: 400 24px/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .01em; margin: 34px 0 12px; padding: 0; border: 0; color: var(--bone);}
.sk4 h3 {font: 700 15px/1.35 var(--font-body); text-transform: none; letter-spacing: 0; margin: 0 0 6px; color: var(--bone);}
.sk4 p {margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--bone-dim); max-width: 68ch;}
.sk4 p b {color: var(--bone);}
.sk4 p a {color: var(--hazard);}
.sk4 .lead {font-size: 15px; line-height: 1.6;}
@media (min-width: 900px) {
  .sk4 {padding: 26px 40px 10px;}
  .sk4 h1 {font-size: 64px;}
  .sk4 .tf h1 {font-size: 52px;}
  .sk4 h2 {font-size: 28px;}
}

/* the tracking number field: Paste and an explicit Track button, a message under it */
.sk4 .tk-form {display: grid; gap: 12px; margin: 0 0 10px; padding: 12px 0 0; border-top: 1px solid var(--ink-line); min-width: 0;}
.sk4 .tk-form .th {display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 40px;}
.sk4 .tk-form .tk {font: 700 11px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone);}
.sk4 .tk-form .wl {min-height: 44px; display: inline-flex; align-items: center; color: var(--bone-dim); font: 400 12px/1.3 var(--font-mono);
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;}
.sk4 .tk-form .wl:hover {color: var(--hazard);}
.sk4 .tk-form .lk {display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0;}
/* the field and its Paste button are one box: focus rings the box (a ring around the field alone ran under Paste; brand.css rings every input with !important) */
.sk4 .tk-form .lk:focus-within {outline: 2px solid var(--hazard); outline-offset: 2px;}
.sk4 .tk-form .lk .in:focus-visible {outline: 0 !important;}
.sk4 .tk-form .lk .pst:focus-visible {outline: 2px solid var(--hazard); outline-offset: -6px;}
.sk4 .tk-form .in {width: 100%; min-width: 0; height: 52px; padding: 0 14px; border: 2px solid var(--ink-line); border-right: 0; border-radius: 0;
  background: var(--ink); color: var(--bone); font: 16px var(--font-mono); outline: 0; box-shadow: none;}
.sk4 .tk-form .in::placeholder {font-family: var(--font-body); color: var(--sk-mute);}
.sk4 .tk-form .in:focus {border-color: var(--hazard);}
.sk4 .tk-form .in.bad {border-color: var(--sk-warn);}
.sk4 .tk-form .pst {min-height: 52px; padding: 0 14px; border: 2px solid var(--ink-line); border-radius: 0; background: var(--ink-raised); color: var(--hazard);
  font: 700 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;}
.sk4 .tk-form .pst:hover {border-color: var(--hazard);}
.sk4 .btn {min-height: 52px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 0; cursor: pointer;
  font: 800 14px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; text-decoration: none;}
.sk4 .btn.cy {background: var(--hazard); color: var(--on-hazard); box-shadow: 4px 4px 0 var(--sk-deep);}
.sk4 .btn.cy:hover {filter: brightness(1.08);}
.sk4 .btn.ghost {background: transparent; color: var(--bone); border: 2px solid var(--bone); box-shadow: 4px 4px 0 var(--hazard);}
.sk4 .btn.ghost:hover {border-color: var(--hazard); color: var(--hazard);}
.sk4 .btn.full {width: 100%;}
.sk4 .tk-msg {margin: 0; font: 600 14px/1.45 var(--font-body); color: var(--sk-warn); max-width: none;}
.sk4 .tk-hint {font: 400 12px/1.5 var(--font-mono); color: var(--sk-mute); margin: 0 0 22px;}
@media (min-width: 900px) {
  .sk4 .tk-form {grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 14px; padding-top: 16px;}
  .sk4 .tk-form .th, .sk4 .tk-form .tk-msg {grid-column: 1 / -1;}
  .sk4 .tk-form .btn.full {width: auto; min-width: 180px;}
}

/* where the number is, and what the tracker does */
.sk4 .where {border: 0; border-left: 3px solid var(--hazard); box-shadow: none; background: var(--ink-raised); padding: 14px 16px; margin: 0 0 20px;}
.sk4 .where .k, .sk4 .feat .k, .sk4 .fact .k, .sk4 .answer .k {font: 700 11px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hazard); margin: 0 0 6px;}
.sk4 .where p {margin: 0; color: var(--bone); line-height: 1.6;}
.sk4 .feats, .sk4 .facts {display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 8px;}
.sk4 .feat, .sk4 .fact {border: 1px solid var(--ink-line); background: var(--ink-raised); padding: 14px; min-width: 0;}
.sk4 .feat .t, .sk4 .fact .v {font: 400 19px/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; color: var(--bone); margin: 0 0 6px;}
.sk4 .feat .d, .sk4 .fact .d {font-size: 13px; line-height: 1.45; color: var(--bone-dim);}
@media (min-width: 640px) {.sk4 .feats, .sk4 .facts {grid-template-columns: repeat(3, minmax(0, 1fr));}}

/* the answer on a number-format page */
.sk4 .answer {display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; border: 0; border-top: 2px solid var(--hazard); box-shadow: none; background: none;
  padding: 14px 0 0; margin: 0 0 18px;}
.sk4 .answer .k {color: var(--bone-dim);}
.sk4 .answer .mono {font: 700 22px/1.2 var(--font-mono); color: var(--hazard); letter-spacing: .04em; word-break: break-all;}
.sk4 .answer .car {font: 400 32px/1 var(--font-display); text-transform: uppercase; color: var(--bone); overflow-wrap: anywhere;}
@media (min-width: 640px) {.sk4 .answer {grid-template-columns: auto minmax(0, 1fr); gap: 10px 32px; align-items: end;}}
@media (min-width: 900px) {.sk4 .answer .mono {font-size: 28px;} .sk4 .answer .car {font-size: 44px;}}

/* chips: countries, agents, formats */
.sk4 .chips {display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px;}
.sk4 .chip {min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ink-line); background: var(--ink);
  color: var(--bone); text-decoration: none; font: 700 12.5px/1.2 var(--font-body); letter-spacing: 0; text-transform: none;}
.sk4 .chip:hover {border-color: var(--hazard); color: var(--hazard);}
.sk4 .chip.on {background: var(--bone); color: var(--ink); border-color: var(--bone);}
.sk4 .tf .chip {font-family: var(--font-mono); font-weight: 700;}

/* questions people ask: every answer visible */
.sk4 .faq {border: 0; border-top: 1px solid var(--ink-line); background: none; padding: 14px 0 2px; margin: 0;}
.sk4 .faq:last-of-type {border-bottom: 1px solid var(--ink-line); padding-bottom: 12px;}
.sk4 .faq p {margin: 0 0 10px; font-size: 14px;}

/* the format table */
.sk4 .tw {overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; border-top: 2px solid var(--hazard);}
.sk4 table.fmts {width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px;}
.sk4 .fmts th {font: 700 11px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--bone-dim); text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--ink-line);}
.sk4 .fmts td {padding: 10px 8px; border-bottom: 1px solid var(--ink-line); vertical-align: top; color: var(--bone-dim);}
.sk4 .fmts td.m {font-family: var(--font-mono); white-space: nowrap;}
.sk4 .fmts a {color: var(--bone); text-decoration: none; font-weight: 700;}
.sk4 .fmts a:hover {color: var(--hazard);}

.sk4 .cta {display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 8px;}
.sk4 .src {font: 400 11.5px/1.6 var(--font-mono); color: var(--sk-mute); margin: 24px 0 8px;}

/* more free tools, after the page */
.sk4 .mt {display: grid; gap: 12px; min-width: 0; margin: 36px 0 8px;}
.sk4 .mt-h {display: flex; justify-content: space-between; align-items: baseline; gap: 12px;}
.sk4 .mt-h h2 {font: 400 19px/1.02 var(--font-display); margin: 0;}
.sk4 .mt-h a {font: 700 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hazard); padding: 12px 0; margin: -12px 0; text-decoration: none;}
.sk4 .mt-tools {display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr);}
.sk4 .mt-tool {display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "ic nm go" "ic ln go" "ic st go"; column-gap: 12px; row-gap: 2px;
  align-items: center; padding: 14px; border: 1px solid var(--ink-line); background: var(--ink-raised); color: var(--bone); text-decoration: none; min-width: 0;}
.sk4 .mt-tool:hover {border-color: var(--hazard);}
.sk4 .mt-ic {grid-area: ic; font-size: 28px; line-height: 1;}
.sk4 .mt-nm {grid-area: nm; font: 400 20px/1.05 var(--font-display); text-transform: uppercase;}
.sk4 .mt-ln {grid-area: ln; color: var(--bone-dim); font-size: 13px; line-height: 1.35;}
.sk4 .mt-st {grid-area: st; font: 700 11px/1.3 var(--font-mono); color: var(--hazard); letter-spacing: .06em; text-transform: uppercase;}
.sk4 .mt-go {grid-area: go; font: 700 18px/1 var(--font-mono); color: var(--hazard);}
@media (min-width: 640px) {.sk4 .mt-tools {grid-template-columns: repeat(2, minmax(0, 1fr));}}