/* Fitrox's existing Switzer, ink / ivory, and blue visual system. */
:root {
  --site-blue: #2563eb;
  --site-ink: #0a0a0c;
  --site-ivory: #f4f1ea;
  --table-line: #dededb;
  --table-highlight: #eff4ff;
}

html { scroll-padding-top: 6rem; }
:focus-visible { outline: 3px solid #6e96ff; outline-offset: 4px; }
.site-header.nav-top, .site-header.nav-scrolled {
  background: rgba(10, 10, 12, .96);
  border-bottom: 1px solid rgba(244, 241, 234, .12);
}
.site-header nav { gap: 1.25rem; }
.site-header nav > a { flex-shrink: 0; }
.site-header nav > ul { gap: clamp(1rem, 2.3vw, 2rem); }
.site-header a, .site-header summary { min-height: 44px; display: inline-flex; align-items: center; }
.site-header a[aria-current="page"] { color: var(--site-ivory); text-decoration: underline; text-underline-offset: .45rem; }
.site-menu { display: none; }
.site-menu > summary {
  padding: .5rem .75rem;
  border: 1px solid rgba(244, 241, 234, .25);
  border-radius: .65rem;
  color: var(--site-ivory);
  font-size: .875rem;
  font-weight: 600;
  gap: .65rem;
}
.site-menu > summary::after { content: '+'; font-size: 1.25rem; line-height: 1; }
.site-menu[open] > summary::after { content: '−'; }
.site-menu-links {
  position: absolute;
  inset: 100% 0 auto;
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
  padding: .75rem 1.25rem 1.25rem;
  background: var(--site-ink);
  border-bottom: 1px solid rgba(244, 241, 234, .2);
}
.site-menu-links a { display: flex; padding: .65rem .5rem; color: var(--site-ivory); }
.site-menu-links a:hover { background: rgba(244, 241, 234, .08); }

/* Reading and comparing should never wait for an entrance animation. */
.reveal, .reveal.in, .mask > span, .msg, .msg.show {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}
.card-l, .card-d { transition: border-color .15s ease; }
.card-l:hover, .card-d:hover { transform: none; box-shadow: none; }
.eyebrow, .eyebrow-c { font-size: .8125rem; letter-spacing: .04em; text-transform: none; }
.eyebrow::before { display: none; }
.grid-faint, .glow, .grain::after, .scroll-cue, #progressBar { display: none; }
.hero { background: var(--site-ink); }
.btn-shine::after { display: none; }
.float-a, .float-b { animation: none; }

/* Home: lead with the training product, then explain the upgrade. */
.home-hero { min-height: auto; padding-top: 9rem; padding-bottom: 5rem; }
.home-hero h1 { font-size: clamp(3.25rem, 6.7vw, 5.75rem); line-height: 1.01; }
.hero-label { margin-bottom: 1.5rem; color: #b0b9cd; }
.hero-description { margin-top: 1.75rem; max-width: 32rem; }
.hero-detail { color: #b0b0b4; max-width: 30rem; }
.hero-actions { margin-top: 1.75rem; }
.hero-trust { margin-top: 2rem; color: #b0b0b4; gap: 1rem 1.5rem; }
#heroPhones { height: 520px; }
#heroPhones .hp-slot { width: clamp(196px, 18vw, 250px); }
#heroPhones .hp-mid, #heroPhones:hover .hp-mid { transform: translate(-50%, -50%) translate(-66%, 3%) rotate(-5deg) scale(.8); }
#heroPhones .hp-back, #heroPhones:hover .hp-back { transform: translate(-50%, -50%) translate(66%, 3%) rotate(5deg) scale(.8); }
.hero-gallery { scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #6e96ff #101013; }
.hero-gallery .phone { width: min(66vw, 240px); }
.hero-gallery figure { flex-shrink: 0; scroll-snap-align: center; }
.hero-gallery figcaption { color: #b0b0b4; text-align: center; padding-top: 1rem; font-size: .875rem; }
#features article { border-radius: 0; border: 0; border-top: 1px solid #c9c6bf; background: transparent; padding: 1.5rem 0; min-height: 0; }
#features article > div { padding-top: 0; margin-top: 0; }
#features .num-tag { display: none; }
.home-page .ring-fill { stroke-dashoffset: 0; }
.home-page .vbar { transform: scaleY(1); }
.home-page .text-ivory\/45, .home-page .text-ivory\/40, .home-page .text-ivory\/35 { color: #a6a6aa; }

/* Comparison pages share one table treatment, independent of Tailwind builds. */
.comparison-page .hero { padding-top: 9rem; padding-bottom: 3.5rem; }
.comparison-page .hero > .relative { max-width: 76rem; text-align: left; }
.comparison-page .hero p { margin-left: 0; max-width: 44rem; }
.comparison-page .hero h1 { font-size: clamp(2.5rem, 5.5vw, 4.75rem); line-height: 1.06; }
.comparison-page .hero h1 .text-accent-soft { color: inherit; }
.comparison-page main > section:nth-child(2) { padding-top: 3rem; }
.comparison-page main > section:nth-child(2) > div { max-width: 76rem; }
.comparison-page main > section:nth-child(2) > div > p:first-child { max-width: 52rem; }
.comparison-jump { display: inline-flex; align-items: center; min-height: 44px; margin-top: 1.5rem; color: #9cb9ff; font-weight: 600; text-decoration: underline; text-underline-offset: .3em; }
.comparison-heading { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; letter-spacing: -.02em; }
.comparison-hint { margin: .5rem 0 1.25rem; color: #5c5a54; font-size: .875rem; line-height: 1.6; }
.table-scroll {
  position: relative;
  overflow: auto;
  max-height: min(70svh, 42rem);
  background: #fff;
  border: 1px solid var(--table-line);
  border-radius: .875rem;
  isolation: isolate;
  scrollbar-width: auto;
  scrollbar-color: #7d8493 #edf0f4;
}
.table-scroll:focus-visible { outline-color: var(--site-blue); }
.comparison-table {
  width: 100%;
  min-width: 40rem;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: .9375rem;
  line-height: 1.5;
  text-align: left;
}
.comparison-table.comparison-table-wide { min-width: 65rem; }
.comparison-table th, .comparison-table td {
  padding: 1.05rem 1.25rem;
  border-bottom: 1px solid var(--table-line);
  vertical-align: top;
  color: #45454b;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.comparison-table th { color: var(--site-ink); }
.comparison-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #eae6dc;
  vertical-align: middle;
  font-weight: 600;
  border-bottom: 1px solid #b6b7bb;
}
.comparison-table tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 29%;
  background: #faf9f6;
  border-right: 1px solid var(--table-line);
}
.comparison-table-wide tr > :first-child { width: 23%; }
.comparison-table thead tr > :first-child { z-index: 3; background: #eae6dc; }
.comparison-table tr > :nth-child(2) { background: var(--table-highlight); }
.comparison-table thead tr > :nth-child(2) { background: #dfe9ff; color: #1748b0; box-shadow: inset 0 3px var(--site-blue); }
.comparison-table tbody tr:hover > * { background: #f3f5f8; }
.comparison-table tbody tr:hover > :nth-child(2) { background: #e5edff; }
.comparison-table tbody tr:last-child > * { border-bottom: 0; }
.comparison-table .yes { color: #176445; font-weight: 600; }
.comparison-table .no { color: #68686e; }

@media (max-width: 1023px) {
  .site-header nav > ul { display: none; }
  .site-header nav > .site-download { margin-left: auto; }
  .site-menu { display: block; }
  .home-hero { padding-top: 7.5rem; padding-bottom: 3rem; }
  .home-hero > .relative { gap: 2.5rem; }
  #heroPhones { height: 490px; }
  #heroPhones .hp-slot { width: 230px; }
}
@media (max-width: 639px) {
  .site-header nav { gap: .75rem; }
  .site-header .site-download { padding: .5rem .875rem; font-size: .8125rem; }
  .site-header nav > a:first-child img { max-width: 96px; }
  .home-hero .hero-actions { gap: .5rem; }
  .home-hero .hero-actions > a { padding: .875rem 1.125rem; font-size: .875rem; }
  .home-hero .hero-actions > a > span { display: none; }
  .home-hero h1 { max-width: 20rem; }
  .home-hero .hero-description { font-size: 1.125rem; }
  .hero-gallery { margin-top: 0; padding-bottom: 1rem; }
  .comparison-page .hero { padding-top: 7.5rem; padding-bottom: 2.5rem; }
  .comparison-page main > section:nth-child(2) { padding-top: 2rem; }
  .comparison-table { min-width: 34rem; font-size: .875rem; }
  .comparison-table.comparison-table-wide { min-width: 60rem; }
  .comparison-table th, .comparison-table td { padding: .875rem; }
  .comparison-table tr > :first-child { width: 8rem; }
  .table-scroll { max-height: 65svh; border-radius: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (max-width: 359px) {
  .site-header nav { gap: .5rem; }
  .site-header nav > a:first-child img { max-width: 76px; }
  .site-header .site-download { padding-inline: .75rem; }
  .site-menu > summary { padding-inline: .625rem; gap: .4rem; }
}