.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: 238px;
  height: auto;
}

.footer-logo {
  width: 210px;
}

.mobile-estimate {
  display: none;
}

.result-panel {
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.pay-basis {
  margin: 14px 0 0;
  color: #d3e6ee;
  font-size: .84rem;
  line-height: 1.5;
}

.selected-skill-details {
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 9px;
  padding: 10px 12px;
  color: #d3e6ee;
  font-size: .84rem;
}

.selected-skill-details summary { cursor: pointer; font-weight: 700; }
.selected-skill-details summary:focus-visible { outline: 2px solid #68d8d1; outline-offset: 4px; }
.selected-skill-details ul { margin: 10px 0 0; padding-left: 20px; columns: 2; }
.selected-skill-details li { break-inside: avoid; margin-bottom: 4px; }
@media (max-width: 640px) { .selected-skill-details ul { columns: 1; } }

.amount {
  display: grid;
  justify-items: start;
  min-width: 0;
  margin-top: 30px;
  color: #fff;
  font: 800 clamp(2.1rem, 3.3vw, 3rem)/1.02 var(--cp-font-body);
  letter-spacing: -.045em;
  white-space: normal;
}

.range-value {
  display: block;
  max-width: 100%;
  white-space: nowrap;
}

.range-separator {
  display: block;
  margin: .18rem 0 .12rem;
  color: #68d8d1;
  font-size: .34em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .calculator {
    overflow: clip;
  }

  .mobile-estimate {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    align-items: center;
    padding: 18px 24px;
    background: #eef9f8;
    border-bottom: 1px solid #cce9e7;
    color: #0b3c5d;
    text-decoration: none;
  }

  .mobile-estimate > span {
    color: #087d7d;
    font: 800 .7rem/1.2 var(--cp-font-body);
    letter-spacing: .12em;
  }

  .mobile-estimate > strong {
    grid-row: 2;
    min-width: 0;
    overflow-wrap: anywhere;
    font: 800 1.15rem/1.25 var(--cp-font-body);
    letter-spacing: -.025em;
  }

  .mobile-estimate > i {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: #0b3c5d;
    font-size: .75rem;
    font-style: normal;
    font-weight: 700;
    text-align: right;
  }

  .mobile-estimate > i b {
    color: #00a8a8;
  }

  .amount {
    font-size: clamp(2.35rem, 8vw, 3.4rem);
  }
}

@media (max-width: 640px) {
  html {
    scroll-padding-top: 12px;
  }

  body {
    background: #f6f9fa;
  }

  .topbar {
    height: 64px;
    padding: 0 16px;
  }

  .brand-logo {
    width: 158px;
  }

  .footer-logo {
    width: 178px;
  }

  .method-link {
    border: 0;
    padding: 7px 0;
    font-size: .75rem;
  }

  .intro {
    padding: 34px 18px 26px;
  }

  .eyebrow {
    font-size: .67rem;
    letter-spacing: .13em;
  }

  .eyebrow span {
    width: 18px;
  }

  .intro h1 {
    max-width: 410px;
    margin: 13px auto;
    font-size: clamp(2rem, 10.5vw, 2.55rem);
    line-height: 1.06;
    letter-spacing: -.045em;
  }

  .intro > p {
    max-width: 390px;
    font-size: .95rem;
    line-height: 1.55;
  }

  .freshness {
    margin-top: 16px;
    padding: 6px 10px;
    font-size: .74rem;
  }

  .calculator {
    margin: 0 8px 58px;
    border-radius: 15px;
    box-shadow: 0 16px 42px rgba(11,60,93,.1);
  }

  .mobile-estimate {
    padding: 15px 16px;
  }

  .mobile-estimate > strong {
    font-size: clamp(.96rem, 4.4vw, 1.12rem);
  }

  .mobile-estimate > i {
    max-width: 92px;
    font-size: .69rem;
    line-height: 1.3;
  }

  .form-panel {
    min-width: 0;
    padding: 0 16px 14px;
  }

  .step {
    padding: 26px 0 30px;
  }

  .step-head {
    gap: 12px;
    margin-bottom: 18px;
  }

  .step-head > span {
    flex-basis: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: .78rem;
  }

  .step-head h2 {
    font-size: 1.08rem;
    line-height: 1.3;
  }

  .step-head p {
    font-size: .82rem;
    line-height: 1.4;
  }

  .country-grid,
  .level-grid {
    gap: 8px;
  }

  .country-card {
    min-width: 0;
    min-height: 68px;
    gap: 8px;
    padding: 11px 9px;
  }

  .country-card > strong {
    font-size: 1.15rem;
  }

  .country-card span,
  .level-grid span {
    min-width: 0;
    font-size: .8rem;
    line-height: 1.25;
  }

  .country-card small,
  .level-grid small {
    margin-top: 3px;
    font-size: .66rem;
  }

  .country-card i {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 16px;
    height: 16px;
    font-size: .63rem;
    line-height: 16px;
  }

  .level-grid label {
    min-height: 58px;
    padding: 10px 8px;
  }

  .field-label {
    margin-top: 16px;
  }

  select,
  .search-wrap {
    height: 48px;
    font-size: 1rem;
  }

  .skill-tools {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  .skill-tools .search-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .skill-tools > span {
    grid-row: 1;
    grid-column: 2;
    align-self: end;
  }

  .skill-tabs {
    scrollbar-width: none;
  }

  .skill-tabs::-webkit-scrollbar {
    display: none;
  }

  .skills {
    gap: 7px;
  }

  .skill span {
    padding: 9px 10px;
    font-size: .78rem;
  }

  .result-panel {
    scroll-margin-top: 12px;
    padding: 27px 20px 24px;
  }

  .result-top {
    align-items: flex-start;
    font-size: .63rem;
    letter-spacing: .09em;
  }

  .confidence {
    flex: 0 0 auto;
    font-size: .65rem;
  }

  .amount {
    margin-top: 24px;
    font-size: clamp(2rem, 10vw, 2.75rem);
  }

  .range-value {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .midpoint,
  .breakdown div {
    gap: 18px;
  }

  .breakdown div span {
    min-width: 0;
  }

  .breakdown div strong {
    flex: 0 0 auto;
  }

  .methodology,
  .sources {
    padding: 54px 18px;
  }

  .methodology h2,
  .sources h2 {
    margin: 10px 0 28px;
    font-size: 2rem;
  }

  .method-grid {
    gap: 24px;
  }

  .formula {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    justify-items: start;
    padding: 18px;
  }

  .formula i {
    display: none;
  }

  .formula b {
    position: relative;
    padding-left: 15px;
  }

  .formula b::before {
    content: "×";
    position: absolute;
    left: 0;
    color: #007579;
  }

  .caveat {
    padding: 18px;
  }

  .source-list a {
    min-width: 0;
    grid-template-columns: 38px minmax(0,1fr) 16px;
    gap: 11px;
    padding: 16px 0;
  }

  .source-list strong,
  .source-list small {
    overflow-wrap: anywhere;
  }

  footer {
    margin-top: 0;
    padding: 30px 18px;
  }
}

@media (max-width: 360px) {
  .method-link span {
    display: none;
  }

  .brand-logo {
    width: 145px;
  }

  .country-grid {
    grid-template-columns: 1fr;
  }

  .country-card {
    min-height: 58px;
  }

  .mobile-estimate {
    grid-template-columns: 1fr;
  }

  .mobile-estimate > i {
    grid-column: 1;
    grid-row: 3;
    max-width: none;
    text-align: left;
  }
}
/* Keep every skill group visible, including on narrow screens. */
.skill-tabs { flex-wrap: wrap; overflow: visible; margin-right: 0; padding-right: 0; }
.skill-tabs button { font-size: .84rem; }
.skill-match { margin: 8px 0 10px; color: var(--muted); font-size: .85rem; }
.skills { overflow: visible; }
@media (max-width: 640px) {
  .skill-tabs { flex-wrap: wrap; overflow: visible; margin-right: 0; padding-right: 0; }
  .skills { max-height: none; overflow: visible; }
}

/* Calculator header navigation */
.topbar { height: auto; min-height: 84px; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.calculator-nav { display: flex; align-items: center; justify-content: flex-end; gap: 20px; flex-wrap: wrap; }
.calculator-nav a { font-size: .875rem; }
.community-link { color: var(--navy); font-weight: 700; text-decoration: none; background: #e6f7f5; border: 1px solid #b9e3df; border-radius: 8px; padding: 10px 14px; }
.calculator-nav a:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.community-link:hover { background: #d2eeeb; }
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; min-height: 64px; gap: 8px; }
  .calculator-nav { width: 100%; justify-content: space-between; gap: 8px; }
  .calculator-nav a { font-size: .875rem; }
  .community-link { padding: 8px 10px; }
}

/* Keep the selectable skills within the reference height. */
.skills {
  max-height: min(360px, 50svh);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #8ca7b7 #eef3f6;
  align-content: flex-start;
  padding: 3px 6px 3px 3px;
}
.skills::-webkit-scrollbar { width: 8px; }
.skills::-webkit-scrollbar-track { background: #eef3f6; border-radius: 8px; }
.skills::-webkit-scrollbar-thumb { background: #8ca7b7; border-radius: 8px; }
.skills:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }