/* Who it is for, and who it is not, behind one switch. A segmented pill at the top chooses
   the answer; the answer is copy on the left and a panel kept for a graphic on the right.
   Both answers live in the same grid cell, so switching changes nothing about the section's
   height and the page below never moves. Without scripts the switch is hidden and both
   answers read one under the other, which is still the whole message. */
.fit{position:relative;background:#fff;padding:var(--section-pad) 0}
.fit__inner{max-width:var(--container-max);margin:0 auto;padding-inline:var(--gutter)}

/* ---- the switch ------------------------------------------------------------- */
.fit__switch{display:flex;justify-content:center}
.fit__tabs{
  position:relative;display:inline-flex;gap:.25rem;padding:.25rem;
  border-radius:999px;background:var(--panel-bg);
}
.fit__tab{
  position:relative;z-index:1;appearance:none;border:0;background:none;cursor:pointer;
  padding:.625rem 1.25rem;border-radius:999px;font-family:inherit;
  font-weight:var(--w-ui);font-size:var(--ui-size);line-height:var(--ui-lh);letter-spacing:var(--ui-track);
  color:var(--muted-3);white-space:nowrap;transition:color var(--dur) var(--ease);
}
.fit__tab:hover{color:var(--ink-heading)}
.fit__tab.is-on{color:var(--ink-heading)}
.fit__tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* The white pill slides under whichever tab is on; view.js writes its place. Until it has,
   or without scripts, the tab paints its own ground so nothing looks unselected. */
.fit__ind{
  position:absolute;top:.25rem;bottom:.25rem;left:0;width:0;border-radius:999px;background:#fff;
  box-shadow:0 1px 2px rgba(20,20,20,.08),0 0 0 1px rgba(0,0,0,.03);
  transform:translateX(var(--x,0px));width:var(--w,0px);
  transition:transform .45s var(--b2-ease),width .45s var(--b2-ease);
}
.fit__tabs:not(.is-ready) .fit__ind{display:none}
.fit__tabs:not(.is-ready) .fit__tab.is-on{background:#fff;box-shadow:0 1px 2px rgba(20,20,20,.08)}
html:not(.js) .fit__switch{display:none}

/* ---- the answers ------------------------------------------------------------ */
.fit__panels{display:grid;margin-top:clamp(2.5rem,5vw,3.5rem)}
.fit__panel{
  grid-area:1/1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(2.5rem,6vw,6rem);row-gap:2rem;align-items:center;
}
/* Off: kept in the cell for height, but invisible and out of reach (inert does the rest).
   On: fades and lifts in, a beat after the old one has gone. */
.js .fit__panel{opacity:0;visibility:hidden;transform:translateY(.75rem);transition:opacity .3s ease,transform .3s var(--ease),visibility 0s .3s}
.js .fit__panel.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .15s,transform .55s var(--b2-ease) .15s,visibility 0s .15s}
/* Without scripts nothing switches, so both answers stack with room between them. */
html:not(.js) .fit__panel{grid-area:auto}
html:not(.js) .fit__panel + .fit__panel{margin-top:clamp(3rem,6vw,4.5rem)}

.fit__copy .eyebrow{margin-bottom:1.25rem}
.fit__title{max-width:34rem}

.fit__list{list-style:none;margin:clamp(1.75rem,3.5vw,2.5rem) 0 0;padding:0;max-width:34rem}
.fit__item{
  display:grid;grid-template-columns:1.5rem minmax(0,1fr);column-gap:1rem;align-items:start;
  padding:.875rem 0;border-top:1px solid var(--hairline);
}
.fit__item:last-child{border-bottom:1px solid var(--hairline)}
/* The points count in one after another each time their panel comes on. */
.js .fit__panel .fit__item{opacity:0;transform:translateY(.5rem)}
.js .fit__panel.is-on .fit__item{
  opacity:1;transform:none;
  transition:opacity .4s ease calc(.25s + var(--i,0) * 70ms),transform .5s var(--b2-ease) calc(.25s + var(--i,0) * 70ms);
}
.fit__tick{
  display:grid;place-items:center;width:1.5rem;height:1.5rem;margin-top:.0625rem;
  border-radius:50%;background:var(--tint-1);color:var(--blue);
}
.fit__text{font-size:var(--lead-size);line-height:var(--lead-lh);letter-spacing:var(--lead-track);color:var(--ink-q)}
.fit__body{
  margin:clamp(1.25rem,2.5vw,1.75rem) 0 0;max-width:30rem;
  font-size:var(--lead-size);line-height:var(--lead-lh);letter-spacing:var(--lead-track);color:var(--muted);
}

/* The graphic's place. A soft panel the height of the copy beside it, tinted so the space
   reads as intended rather than missing; an image fills it edge to edge when there is one. */
.fit__visual{
  margin:0;position:relative;overflow:hidden;min-height:20rem;align-self:stretch;
  border-radius:1.25rem;background:
    radial-gradient(60% 70% at 70% 30%,var(--tint-2),transparent 70%),
    var(--wash,#f7f8fa);
}
.fit__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---- two big buttons ------------------------------------------------------------ */
/* The first tab's caption and heading centred, then one large pill per tab. Not the site's
   call-to-action button: these are a choice, so they are quiet grey pills at rest with no
   arrow tile, and the chosen one turns to a white pill with a brand-blue ring. At rest none is
   chosen and nothing is shown beneath; choosing one unfolds its text — the points as small pills
   of their own, wrapped and centred — and choosing the other swaps it. */
.fit--buttons .fit__head{display:flex;flex-direction:column;align-items:center;text-align:center}
.fit--buttons .fit__head .eyebrow{margin-bottom:1.25rem;text-align:center}
.fit--buttons .fit__head .fit__title{max-width:34rem;text-align:center}
.fit__choice{
  display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1rem,2.5vw,2.25rem);
  margin-top:clamp(2.5rem,5vw,4rem);
}
.fit__big{
  appearance:none;cursor:pointer;font-family:inherit;
  min-width:clamp(14rem,24vw,24rem);padding:clamp(1.5rem,3vw,2.75rem) clamp(2rem,3.5vw,3.5rem);
  border-radius:999px;border:1px solid transparent;background:var(--panel-bg);
  font-weight:var(--w-ui);font-size:var(--h4-size);line-height:1.2;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-heading);
  transition:background .3s ease,border-color .3s ease,color .3s ease,transform .45s var(--b2-ease),box-shadow .45s ease;
}
.fit__big:hover{background:var(--band-end);transform:translateY(-.125rem)}
.fit__big:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.fit__big.is-on{background:#fff;border-color:var(--blue);color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}
.fit__big.is-on:hover{transform:none}

/* One cell for every answer, so the section holds still when they swap. The row itself is
   closed at rest — the hidden answers would otherwise keep their height and leave a hole
   under the buttons — and opens to the chosen answer's height with the choice. */
.fit__reveals{display:grid;margin-top:0}
.fit--buttons .fit__reveals{grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .55s var(--b2-ease),margin-top .55s var(--b2-ease)}
.fit--buttons .fit__reveals.is-open{grid-template-rows:1fr}
.fit--buttons .fit__panel{min-height:0}
.fit--buttons .fit__panel{
  grid-area:1/1;display:block;width:100%;text-align:center;   /* not the other look's two columns */
  opacity:0;visibility:hidden;transform:translateY(.75rem);
  transition:opacity .3s ease,transform .3s var(--ease),visibility 0s .3s;
}
.fit--buttons .fit__panel.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .1s,transform .55s var(--b2-ease) .1s,visibility 0s .1s}
/* The reveals only take room once something is chosen. */
.fit--buttons .fit__reveals.is-open{margin-top:clamp(2.5rem,5vw,4rem)}
.fit--buttons .fit__copy{display:flex;flex-direction:column;align-items:center;width:100%}
/* The answer's own label — "Built for teams who", "Less suited if" — set as the section's
   eyebrow is, so the two halves of the argument carry the same voice. */
.fit--buttons .fit__copy .eyebrow{margin-bottom:clamp(1rem,2vw,1.5rem);text-align:center}
.fit__sub{
  margin:0 0 clamp(1.5rem,3vw,2.25rem);max-width:30rem;
  font-family:var(--font-display);font-weight:var(--w-display);
  font-size:var(--h3-size);line-height:var(--h3-lh);letter-spacing:var(--h3-track);color:var(--ink-heading);text-wrap:balance;
}
.fit__sub strong,.fit__sub b{font-weight:var(--w-display);color:var(--blue)}
/* Points as pills, wrapped and centred, arriving one after another. */
.fit--buttons .fit__list{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.875rem;
  margin:0;max-width:64rem;
}
.fit--buttons .fit__item{
  display:block;padding:.75rem 1.375rem;border:1px solid var(--hairline);border-radius:999px;border-top:1px solid var(--hairline);
  opacity:0;transform:translateY(.5rem);
}
.fit--buttons .fit__item:last-child{border-bottom:1px solid var(--hairline)}
.fit--buttons .fit__panel.is-on .fit__item{
  opacity:1;transform:none;
  transition:opacity .4s ease calc(.2s + var(--i,0) * 70ms),transform .5s var(--b2-ease) calc(.2s + var(--i,0) * 70ms);
}
.fit--buttons .fit__tick{display:none}
.fit--buttons .fit__text{font-size:var(--body-size);line-height:1.5;letter-spacing:var(--body-track);color:var(--ink-q)}
.fit--buttons .fit__body{margin:0;max-width:34rem;text-align:center}
.fit--buttons .fit__foot{margin-inline:auto;text-align:center}
.fit--buttons .fit__note{text-align:center}
html:not(.js) .fit--buttons .fit__panel{position:static;opacity:1;visibility:visible;transform:none;margin-top:2rem}
html:not(.js) .fit__choice{display:none}

@media (max-width:48em){
  .fit__big{width:100%;min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .fit__big,.fit--buttons .fit__panel,.fit--buttons .fit__panel.is-on,.fit--buttons .fit__item,.fit--buttons .fit__reveals{transition:none;transform:none}
}

/* ---- underneath -------------------------------------------------------------- */
.fit__foot{max-width:46rem;margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:clamp(1.5rem,3vw,2rem);border-top:1px solid var(--hairline)}
.fit__note{margin:0;font-size:var(--body-size);line-height:var(--body-lh);letter-spacing:var(--body-track);color:var(--ink-q)}
.fit__note a{color:var(--blue);text-decoration:underline;text-underline-offset:.15em}
.fit__disclaimer{margin:.875rem 0 0;font-size:var(--cap-size);line-height:var(--cap-lh);letter-spacing:var(--cap-track);color:var(--muted-2)}

@media (max-width:64em){
  .fit__panel{grid-template-columns:1fr}
  /* Stacked, the panel takes the column's width and its height from the ratio alone: a
     min-height on an aspect-ratio box becomes a min-WIDTH, and at phone widths that pushed
     it out past the container. */
  .fit__visual{min-height:0;width:100%;max-width:34rem;aspect-ratio:16/9;align-self:start}
}
@media (max-width:36em){
  .fit__tabs{width:100%}
  .fit__tab{flex:1 1 0;padding-inline:.75rem;white-space:normal;text-align:center;font-size:var(--cap-size)}
}
@media (prefers-reduced-motion:reduce){
  .fit__ind,.fit__tab{transition:none}
  .js .fit__panel,.js .fit__panel.is-on{transition:visibility 0s;transform:none}
  .js .fit__panel .fit__item,.js .fit__panel.is-on .fit__item{transition:none;opacity:1;transform:none}
}

/* ---------- Two cards side by side ----------
   Both answers visible at rest: what the service fits, and what it does not. The second card is
   warm rather than red, because "less suited" is a mismatch, not a failure. */
.fit--cards .fit__eyebrow{margin:0 0 clamp(1.75rem,3.5vw,2.75rem)}
.fit--cards .fit__grid{display:grid;grid-template-columns:1fr;gap:clamp(1rem,2vw,1.5rem)}
@media (min-width:56em){.fit--cards .fit__grid{grid-template-columns:1fr 1fr}}
.fit--cards .fit__card{
  border-radius:1.25rem;padding:clamp(1.5rem,3vw,2.5rem);
  border:1px solid var(--hairline);
}
.fit--cards .fit__card--yes{background:#fff}
.fit--cards .fit__card--no{background:#f7f5ec;border-color:rgba(154,139,79,.2)}
.fit--cards .fit__cardlabel{margin:0 0 clamp(.75rem,1.6vw,1.1rem);text-align:left}
.fit--cards .fit__card--yes .fit__cardlabel{color:var(--blue)}
.fit--cards .fit__card--no .fit__cardlabel{color:#9a8b4f}
.fit--cards .fit__title{
  margin:0;max-width:22ch;text-align:left;text-wrap:pretty;
  font-size:clamp(1.25rem,.95rem + .95vw,1.75rem);line-height:1.2;
}
.fit--cards .fit__list{margin-top:clamp(1.25rem,2.5vw,1.75rem);max-width:none}
/* No rules between the points here: the card edge already does the separating. */
.fit--cards .fit__item{border:0;padding-block:clamp(.5rem,1.1vw,.7rem)}
.fit--cards .fit__item:last-child{border-bottom:0}
.fit--cards .fit__item--tick .fit__tick{color:var(--blue)}
.fit--cards .fit__item--dash .fit__tick{color:#9a8b4f}
.fit--cards .fit__foot{margin-top:clamp(1.5rem,3vw,2.25rem)}
/* Both card headings are a single colour in the mock-up; the accent belongs to section
   headings, not to these. */
.fit--cards .fit__title strong,.fit--cards .fit__title b{color:inherit}