/* Responsive presentation system. Pricing and prediction remain owned by their existing engines. */
:root {
  --font-ui: Inter, Arial, Helvetica, sans-serif;
  --font-data: Inter, Arial, Helvetica, sans-serif;
  --section-gap-desktop: 36px;
  --section-gap-mobile: 26px;
  --heading-margin: 14px;
  --lead-margin: 18px;
  --card-padding: 22px;
  --table-margin: 20px;
}
body,
body.home,
header.site .logo,
header.site nav a,
button,
input,
select,
.cwc .cwc-label,
.cwc .cwc-field {
  font-family: var(--font-ui);
}
.money,
.numeric-cell,
.relative-label,
.tibo-digit,
.digits,
input[type="number"],
output,
.date,
.updated {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
}
.money,
.numeric-cell,
.relative-label {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all;
}
.model-name {
  display: inline-block;
  white-space: nowrap;
  overflow-wrap: normal;
}
.model-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}
.model-title .newbadge {
  display: inline-block;
  flex: none;
  margin: 0 !important;
}
.price-part {
  display: inline-block;
  white-space: nowrap;
}

/* Three deliberate header states; the full navigation remains available. */
header.site .wrap {
  gap: 18px;
  align-items: center;
}
header.site .logo {
  flex: none;
  white-space: nowrap;
}
header.site nav {
  gap: 18px;
  flex-wrap: nowrap;
}
header.site nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
}
.home header.site {
  height: auto;
  min-height: 60px;
  padding: 8px 0;
}
.home header.site .wrap {
  height: auto;
  gap: 16px;
}
.home header.site .logo {
  font-size: 29px;
}
.home header.site nav {
  gap: 14px;
}
.home header.site nav a {
  font-size: 11px;
  padding: 6px 0;
}
.home header.site nav a.active::after {
  bottom: 0;
}
.home .brand-descriptor {
  display: block;
  font-size: 9px;
}
.home .header-cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
@media (min-width: 1180px) and (max-width: 1379px) {
  .home .header-verified,
  .home .header-search {
    display: none;
  }
}
@media (min-width: 900px) and (max-width: 1179px) {
  .home .brand-descriptor,
  .home .header-verified,
  .home .header-search {
    display: none;
  }
  .home header.site nav {
    gap: 13px;
  }
  .home header.site .wrap {
    gap: 16px;
  }
}
@media (max-width: 899px) {
  header.site,
  .home header.site {
    position: relative;
    padding: 10px 0 6px;
    height: auto;
  }
  header.site .wrap,
  .home header.site .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
    gap: 6px 12px;
  }
  header.site .logo,
  .home header.site .logo {
    font-size: 25px;
  }
  .home .brand-descriptor,
  .home .header-verified,
  .home .header-search {
    display: none;
  }
  header.site nav,
  .home header.site nav {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 5px;
    overflow: visible;
  }
  header.site nav a,
  .home header.site nav a {
    font: 500 11px/1.4 var(--font-ui);
    min-height: 44px;
    padding: 0;
    white-space: nowrap;
    flex: none;
  }
  .header-cta {
    grid-column: 2;
    grid-row: 1;
  }
  header.site nav a::after {
    bottom: 3px;
  }
}

/* Hero text has its own flow; the auxiliary handnote never shares text coordinates. */
.home .hero-composition {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
  gap: 30px;
}
.home .hero-composition .hero {
  min-height: 0;
}
.home .hero-composition h1 {
  white-space: normal;
  line-height: 1.12;
  font-size: clamp(32px, 3.1vw, 46px);
}
.hero-handnote {
  position: static;
  float: none;
  width: max-content;
  margin: 16px 0 0 auto;
  font-size: 16px;
}
.home .hero-composition .trustline {
  margin-top: 14px;
}
@media (max-width: 1179px) {
  .home .hero-composition {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .home .hero-composition .hero {
    padding-top: 8px;
  }
  .home .hero-composition h1 {
    font-size: clamp(28px, 4vw, 42px);
  }
  .hero-handnote {
    display: none;
  }
  .home .tibo-watch {
    width: 100%;
    max-width: 620px;
  }
}

/* Independent text and avatar slots. Clock digits and unit labels share one grid. */
.home .tibo-watch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  gap: 12px 18px;
  height: auto;
  min-height: 208px;
  padding: 18px 20px;
}
.home .tibo-watch-heading {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding: 0;
  min-height: 18px;
}
.home .tibo-watch-main {
  grid-column: 1;
  grid-row: 2;
  padding: 0;
  min-width: 0;
}
.home .tibo-profile {
  grid-column: 2;
  grid-row: 1 / 3;
  position: static;
  width: auto !important;
  height: auto;
  padding: 0;
  border: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.home .tibo-avatar {
  position: static;
  width: 104px;
  height: 108px;
  object-fit: contain;
  mask-image: none;
}
.home .tibo-avatar-caption {
  position: static;
  transform: none;
  width: auto;
  text-align: center;
  display: block !important;
}
.home .tibo-avatar-caption strong {
  display: block;
  font: 600 12px/1.4 var(--font-ui);
}
.home .tibo-avatar-caption > span {
  display: block;
  font: 10px/1.4 var(--font-ui);
}
.home .tibo-avatar-caption small {
  display: block !important;
  font: 9px/1.4 var(--font-ui);
}
.home .tibo-watch-caption {
  font: 11px/1.5 var(--font-ui);
  margin: 0 0 7px;
}
.home .tibo-countdown,
.home .tibo-countdown[data-overdue] {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  min-height: 36px;
  font: 700 clamp(21px, 2.1vw, 29px)/1.25 var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.7px;
}
.home .tibo-digit {
  position: relative;
  grid-row: 1;
  text-align: center;
  min-width: 3ch;
}
.home .tibo-digit:not(:last-child)::after {
  content: ":";
  position: absolute;
  right: -3px;
  font-size: 0.75em;
  font-weight: 400;
}
.home .tibo-separator {
  display: none;
}
.home .tibo-units {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  font: 600 9px/1.4 var(--font-ui);
  margin: 2px 0 0;
}
.home .tibo-overdue {
  position: static;
  grid-column: 1 / -1;
  grid-row: 1;
  font: 600 11px/1.4 var(--font-ui);
  margin-bottom: 5px;
}
.home .tibo-countdown:has(.tibo-overdue) .tibo-digit {
  grid-row: 2;
}
.home .tibo-watch-details {
  grid-column: 1 / -1;
  width: auto;
  margin: 0;
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font: 11px/1.5 var(--font-ui);
}
.home .tibo-watch-link {
  margin: 0;
  font-size: 11px;
}
.home .tibo-watch-note {
  grid-column: 1 / -1;
  position: static;
  width: auto;
  text-align: left;
  margin: 0;
  font: 10px/1.5 var(--font-ui);
}
@media (max-width: 760px) {
  .home .tibo-watch {
    padding: 16px 14px;
    gap: 10px 12px;
    grid-template-columns: minmax(0, 1fr) 72px;
  }
  .home .tibo-avatar {
    width: 72px;
    height: 80px;
  }
  .home .tibo-avatar-caption strong {
    font-size: 11px;
  }
  .home .tibo-avatar-caption > span {
    font-size: 9px;
  }
  .home .tibo-countdown,
  .home .tibo-countdown[data-overdue] {
    font-size: 23px;
  }
  .home .tibo-units {
    font-size: 9px;
  }
}
@media (max-width: 360px) {
  .home .tibo-watch {
    grid-template-columns: minmax(0, 1fr);
  }
  .home .tibo-profile {
    grid-column: 1;
    grid-row: 4;
    flex-direction: row;
    gap: 12px;
    justify-content: start;
  }
  .home .tibo-avatar {
    width: 48px;
    height: 52px;
  }
  .home .tibo-avatar-caption {
    text-align: left;
  }
  .home .tibo-countdown,
  .home .tibo-countdown[data-overdue] {
    font-size: 29px;
  }
  .home .tibo-units {
    font-size: 9px;
  }
}

/* Adaptive model cards and balanced processing modes, without truncating price copy. */
.home .models,
body .cwc [data-zone="models"] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
}
.home .model,
body .cwc .cwc-pill {
  height: auto;
  min-height: 76px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.home .model b,
body .cwc .cwc-pill b {
  font: 650 12px/1.4 var(--font-ui);
}
.home .model small,
body .cwc .cwc-pill small {
  font: 400 11px/1.5 var(--font-ui);
  margin-top: 5px;
}
.home .models {
  margin-bottom: 24px;
}
.home .tiers,
body .cwc [data-zone="tiers"] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.home .tier,
body .cwc [data-zone="tiers"] .cwc-pill {
  height: auto;
  min-height: 76px;
  text-align: center;
  padding: 12px 8px;
  align-items: center;
}
.home .tier b,
body .cwc [data-zone="tiers"] b {
  font: 650 12px/1.4 var(--font-ui);
}
.home .tier small,
body .cwc [data-zone="tiers"] small {
  font: 400 11px/1.5 var(--font-ui);
  margin-top: 5px;
}
.home .advanced-pricing {
  margin-left: 0;
}
.advanced-fields input,
.advanced-fields select,
.home input[type="number"] {
  height: 44px;
  font: 400 13px/1.4 var(--font-ui);
}
.home label.field,
body .cwc .cwc-field {
  font: 500 12px/1.4 var(--font-ui);
  min-height: 2.8em;
  display: flex;
  align-items: end;
}
.advanced-fields label {
  font-size: 12px;
}
.home .grid {
  gap: 14px 18px;
}
.home .preset {
  min-height: 44px;
}
.home .preset b {
  font: 500 11px/1.4 var(--font-ui);
}
@media (max-width: 1179px) {
  .home .calculator-layout,
  body .cwc {
    grid-template-columns: minmax(0, 1fr);
  }
  .home .calculator-inputs,
  .home .calculator-presets {
    grid-column: 1;
  }
  .home .cost-summary {
    grid-column: 1;
    grid-row: 3;
  }
  .home .tiers,
  body .cwc [data-zone="tiers"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .home .models,
  body .cwc [data-zone="models"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home .model:last-child:nth-child(odd),
  body .cwc [data-zone="models"] .cwc-pill:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .home .model {
    text-align: left;
  }
  .home .model-title {
    justify-content: start;
  }
  .home .calculator-inputs,
  .home .calculator-presets {
    padding-left: 42px;
    padding-right: 16px;
  }
  .home .step-description {
    font-size: 11px;
  }
}
@media (max-width: 360px) {
  .home .models,
  body .cwc [data-zone="models"] {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Money gets readable atomic text, a length-aware display size, and its own scroll fallback. */
.cost-summary,
.cwc-summary {
  container-type: inline-size;
}
.summary-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.period-toggle {
  flex: 0 0 auto;
  min-width: 152px;
  max-width: none;
}
.period-toggle button {
  min-height: 40px;
  font: 500 11px/1.4 var(--font-ui);
}
.home .summary-label {
  font: 700 20px/1.3 var(--font-ui);
}
.home .stat.hero-stat .v,
body .cwc .cwc-stat:has([data-out="perMonth"]) .v {
  font: 700 clamp(24px, calc(100cqw / var(--money-units, 5.5)), 58px)/1.25
    var(--font-data);
  letter-spacing: -1px;
  max-width: 100%;
  overflow-x: auto;
}
.home .stat .v,
body .cwc .cwc-stat .v {
  font-variant-numeric: tabular-nums lining-nums;
}
.home .stat:not(.hero-stat) .v,
body .cwc .cwc-stat:not(:has([data-out="perMonth"])) .v {
  font-size: 14px;
  line-height: 1.4;
}
.home .results,
body .cwc .cwc-results {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.results.has-large-values,
.cwc-results.has-large-values {
  grid-template-columns: minmax(0, 1fr) !important;
}
.has-large-values .stat:not(.hero-stat),
.has-large-values .cwc-stat:not(:has([data-out="perMonth"])) {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}
.has-large-values .stat .k,
.has-large-values .cwc-stat .k {
  flex: none;
}
@container (max-width: 270px) {
  .results,
  .cwc-results {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .stat:not(.hero-stat),
  .cwc-stat:not(:has([data-out="perMonth"])) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    gap: 12px;
  }
  .stat:not(.hero-stat) .k,
  .cwc-stat:not(:has([data-out="perMonth"])) .k {
    flex: none;
  }
}

/* Shared table shell: descriptions can wrap; only data/name atoms are nonbreaking. */
.table-shell,
.tbl-wrap.table-shell,
.table-wrap.table-shell {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 4px;
  border-radius: 6px;
  scroll-padding: 8px;
}
.table-shell:focus-visible {
  outline: 2px solid var(--accent, #146b4e);
  outline-offset: 3px;
}
.table-shell > table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}
.table-shell th,
.table-shell td {
  font-size: 12px;
  line-height: 1.5;
}
.table-shell td:not(.numeric-cell):not(.relative-label) {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
.table-shell th {
  white-space: normal;
  overflow-wrap: normal;
}
.table-shell .model-name {
  font-size: inherit;
}
.table-hint {
  color: var(--muted, #52665e);
  font: 500 11px/1.5 var(--font-ui);
  margin: 6px 0;
}
.table-hint[hidden] {
  display: none;
}
.table-hint.is-scrolled {
  opacity: 0.65;
}
.home .compact-comparison {
  overflow: visible;
}
.home .compact-comparison .table-shell {
  padding: 0;
}
.home .compact-comparison table,
.cwc .cwc-summary table[data-out="compare"] {
  display: table;
  width: 100%;
  min-width: 480px;
  table-layout: fixed;
}
.cwc [data-out="compare"] thead {
  display: table-header-group;
}
.cwc [data-out="compare"] tbody {
  display: table-row-group;
}
.home .compact-comparison th,
.home .compact-comparison td,
.cwc .cwc-summary [data-out="compare"] th,
.cwc .cwc-summary [data-out="compare"] td {
  padding: 10px 9px;
  font-size: 12px;
}
.compact-comparison th:first-child,
.compact-comparison td:first-child,
.cwc [data-out="compare"] th:first-child,
.cwc [data-out="compare"] td:first-child {
  width: 38%;
  text-align: left;
}
.compact-comparison th:nth-child(2),
.compact-comparison td:nth-child(2),
.cwc [data-out="compare"] th:nth-child(2),
.cwc [data-out="compare"] td:nth-child(2) {
  width: 32%;
  text-align: right;
}
.compact-comparison th:last-child,
.compact-comparison td:last-child,
.cwc [data-out="compare"] th:last-child,
.cwc [data-out="compare"] td:last-child {
  width: 30%;
  text-align: right;
}
.home .compare-wrap table {
  min-width: 520px;
  table-layout: auto;
}
.home .compare-wrap th,
.home .compare-wrap td {
  font-size: 12px;
  padding: 10px;
}

/* Readable prose in the existing mint theme. */
.legal-page main p,
.legal-page main li {
  color: var(--muted, #52665e);
}
.legal-page main strong {
  color: var(--ink, #172c25);
}
article td,
article th {
  color: var(--ink, #172c25);
  background: #fff;
  border-color: var(--border, #dce6e0);
}
article th {
  background: #f1f6f3;
}
article .chart svg text {
  fill: var(--ink, #172c25);
}
.chart-scroll {
  max-width: 100%;
  overflow-x: auto;
}
.chart-scroll svg {
  min-width: 640px;
  width: 100%;
  max-width: none;
}
.chart-note {
  font: 400 12px/1.6 var(--font-ui);
  margin: 12px 0 0;
  color: var(--muted, #52665e);
}
.post-card {
  display: flex;
  flex-direction: column;
}
.post-card .thumb {
  height: auto;
  max-height: 280px;
  aspect-ratio: 1200 / 630;
  object-fit: contain;
  background: #071017;
}
.post-card .read {
  margin-top: auto;
  padding-top: 16px;
  align-self: start;
}
.post-card p {
  margin-bottom: 16px;
}
.prose h2,
article h2 {
  margin-top: var(--section-gap-desktop);
  margin-bottom: var(--heading-margin);
}
.prose h3,
article h3 {
  margin-top: 24px;
  margin-bottom: 10px;
}
.prose p,
article p {
  margin-bottom: 16px;
}
.prose .table-shell,
article .table-shell {
  margin-top: var(--table-margin);
  margin-bottom: var(--table-margin);
}
.prose .table-shell table,
article .table-shell table {
  margin: 0;
}
.prose .table-hint,
article .table-hint {
  margin-bottom: 6px;
}
#compare > details > p {
  font-size: 13px;
  line-height: 1.65;
  margin: 12px 0;
}
.section-disclosure > summary,
details.faq > summary,
.advanced-pricing > summary,
.cost-breakdown > summary {
  min-height: 44px;
}
.section-disclosure > summary {
  align-items: center;
}
.disclosure-body,
.faq .a {
  padding: 16px;
}
.home .faq .a {
  padding: 8px 0 16px;
}
.prose a:link,
.prose a:visited,
article p a:link,
article p a:visited,
article li a:link,
article li a:visited,
.legal-page main a:link,
.legal-page main a:visited,
#compare > details a:link,
#compare > details a:visited {
  color: var(--accent, #146b4e);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 760px) {
  .prose h2,
  article h2 {
    margin-top: var(--section-gap-mobile);
  }
  .prose h3,
  article h3 {
    margin-top: 22px;
  }
  .home .calculator-layout {
    min-height: 0;
  }
  .home .share-btn {
    min-height: 44px;
    font-size: 11px;
  }
  .home .tier-help > summary,
  .home .preset-help > summary {
    font-size: 11px;
    min-height: 40px;
  }
}
@media (max-width: 430px) {
  header.site nav,
  .home header.site nav {
    gap: 0;
  }
}
.home .model b.model-title,
body .cwc .cwc-pill b.model-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}
.price-part {
  font-variant-numeric: tabular-nums lining-nums;
}
.home .compact-comparison table {
  min-width: var(--comparison-min-width, 340px);
}
.home .compact-comparison th:first-child,
.home .compact-comparison td:first-child {
  width: 28%;
}
.home .compact-comparison th:nth-child(2),
.home .compact-comparison td:nth-child(2) {
  width: 39%;
}
.home .compact-comparison th:last-child,
.home .compact-comparison td:last-child {
  width: 33%;
}
.cwc .cwc-summary table[data-out="compare"] {
  min-width: var(--comparison-min-width, 380px);
}
body .cwc .cwc-field {
  display: block;
  min-height: 0;
}
body .cwc .cwc-grid .cwc-field {
  display: flex;
  min-height: 2.8em;
  align-items: end;
}
/* Inline name atoms must not turn prose headings into anonymous flex columns. */
article h2 {
  display: block;
}

/* The shared widget primary total occupies the complete summary width. */
body .cwc .cwc-stat:has([data-out="perMonth"]) {
  grid-column: 1 / -1;
  grid-row: 1;
  padding: 8px 0 16px;
}

/* Intentional link color also covers tracker links without component styling. */
a:where(:link, :visited) {
  color: var(--accent, #146b4e);
}
@container (max-width: 270px) {
  .home .results .stat:not(.hero-stat) {
    border-left: 0 !important;
    padding-left: 0;
  }
}
.home .has-large-values .stat:not(.hero-stat) {
  border-left: 0 !important;
  padding-left: 0;
}

/* Tracker clock reserves three digits without changing its timing renderer. */
.hero-clock .clock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hero-clock .clock > .colon {
  display: none;
}
.hero-clock .digit-group {
  position: relative;
}
.hero-clock .digit-group:not(:last-child)::after {
  content: ":";
  position: absolute;
  right: -10px;
  top: 0;
  font: 400 clamp(24px, 8vw, 88px)/1 var(--font-data);
  color: var(--muted);
}
.hero-clock .digits {
  min-width: 3ch;
  font-size: clamp(24px, 10vw, 110px);
}
.hero-clock .dlabel {
  font-variant-numeric: tabular-nums lining-nums;
}
/* Reserve mobile readout space while the existing remote reset data loads. */
@media (max-width: 640px) {
  .hero-clock .readouts .ro:first-child {
    min-height: 222px;
  }
  .hero-clock .readouts .ro:nth-child(2) {
    min-height: 136px;
  }
}
@media (max-width: 360px) {
  .hero-clock .readouts .ro:first-child {
    min-height: 254px;
  }
}

.hero-clock .digits,
.hero-clock .mini-stats b,
.price-part,
input[type="range"] + output {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
}