/* =============================================================================
   "Which one do I need?" (stage 3, 17 Oct 2026). inc/stage3/which-one.php prints it on the
   PriceWise Pro, ConfigKit and Craftor pages and the home page; this file loads only there.
   Scoped to .dtswo so it never touches the page around it, and every rule carries .dtswo twice
   (".dtswo .dtswo-need") so a host page's own "p" or ".entry-content p" rules never reach in.

   ConfigKit/Craftor show two choices, while home/PriceWise keep three. All start at the same
   top edge and size to their content. The page's own product says "You are here".
   No borders, rules or bars anywhere (Hamza: no lines): space and a change of background.
   ============================================================================= */

.dtswo {
  --wo-ink: #0f1317;
  --wo-text: #1d2733;
  --wo-muted: #5d6873;
  --wo-blue: #0066ff;
  --wo-blue-dk: #0052cc;
  --wo-tint: #e2ecff;
  --wo-card: #ffffff;
  --wo-off: #cfdcef;
  --wo-rise: 26px;
  padding: 92px 0 96px;
  background: #f3f6fa;
  color: var(--wo-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  scroll-margin-top: 96px;
}
.dtswo.dtswo--white { background: #ffffff; --wo-card: #f3f6fa; }
.dtswo.dtswo--dark {
  background: linear-gradient(160deg, #001429 0%, #0a1929 60%, #071b34 100%);
  color: #ffffff;
  --wo-ink: #ffffff;
  --wo-text: #ffffff;
  --wo-muted: rgba(255, 255, 255, 0.7);
  --wo-blue: #4da3ff;
  --wo-blue-dk: #9fd0ff;
  --wo-tint: rgba(0, 102, 255, 0.28);
  --wo-card: rgba(255, 255, 255, 0.06);
  --wo-off: rgba(255, 255, 255, 0.18);
}
.dtswo *,
.dtswo *::before,
.dtswo *::after { box-sizing: border-box; }
/* Zero specificity, so every class rule below wins over it. */
.dtswo :where(h2, h3, p, ol, li) { margin: 0; padding: 0; }

.dtswo .dtswo-in { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---- Head ---------------------------------------------------------------- */
.dtswo .dtswo-head { max-width: 660px; margin: 0 auto 50px; text-align: center; }
.dtswo .dtswo-title {
  font-family: inherit;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--wo-ink);
  margin: 0 0 14px;
}
.dtswo .dtswo-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--wo-muted);
  text-wrap: balance;
}

/* ---- The three cards ----------------------------------------------------- */
.dtswo .dtswo-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  /* Room for the first two cards, which sit lower (the staircase). */
  padding-bottom: calc(var(--wo-rise) * 2);
}
.dtswo .dtswo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--wo-card);
  border-radius: 18px;
  padding: 26px 26px 24px;
  box-shadow: 0 1px 2px rgba(15, 35, 70, 0.05), 0 18px 40px -26px rgba(15, 35, 70, 0.34);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
/* The staircase: step 1 lowest, step 3 highest. Equal size, only the height they stand at changes. */
.dtswo .dtswo-card:nth-child(1) { top: calc(var(--wo-rise) * 2); }
.dtswo .dtswo-card:nth-child(2) { top: var(--wo-rise); }
.dtswo .dtswo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(15, 35, 70, 0.05), 0 26px 48px -26px rgba(15, 35, 70, 0.42);
}
.dtswo .dtswo-card.is-here { background: var(--wo-tint); }
.dtswo.dtswo--white .dtswo-card,
.dtswo.dtswo--dark .dtswo-card { box-shadow: none; }
.dtswo.dtswo--white .dtswo-card:hover { box-shadow: 0 18px 40px -26px rgba(15, 35, 70, 0.3); }
.dtswo.dtswo--dark .dtswo-card:hover { box-shadow: none; background: rgba(255, 255, 255, 0.09); }
.dtswo.dtswo--dark .dtswo-card.is-here:hover { background: rgba(0, 102, 255, 0.34); }

/* The need on top, the name and what it is right under it, and the price and the button at the bottom
   of the card. A card with a shorter need keeps its spare room above the price, never inside the text. */
.dtswo .dtswo-a { flex: 0 0 auto; }
.dtswo .dtswo-b { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; }

.dtswo .dtswo-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
  min-height: 32px;
  margin: 0 0 18px;
}
.dtswo .dtswo-step {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.dtswo .dtswo-step-t { display: flex; flex-direction: column; gap: 3px; }
.dtswo .dtswo-step-t b {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wo-blue-dk);
}
.dtswo .dtswo-step-t span {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--wo-muted);
}
.dtswo .dtswo-stairs { display: block; flex: 0 0 auto; width: 22px; height: 22px; }
.dtswo .dtswo-stairs .on { fill: var(--wo-blue); }
.dtswo .dtswo-stairs .off { fill: var(--wo-off); }
.dtswo .dtswo-here {
  display: inline-block;
  background: #0066ff;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.dtswo.dtswo--dark .dtswo-here { background: #ffffff; color: #0052cc; }

.dtswo .dtswo-need {
  font-size: 18.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--wo-text);
  margin: 0 0 26px;
  text-wrap: pretty;
}

/* The name, and on Craftor "ConfigKit inside" beside it (never on it). */
.dtswo .dtswo-namerow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 6px;
}
.dtswo .dtswo-name {
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--wo-ink);
  margin: 0;
}
.dtswo .dtswo-what {
  font-size: 15px;
  line-height: 1.55;
  color: var(--wo-muted);
  margin: 0 0 16px;
  text-wrap: balance;
}
.dtswo .dtswo-tag {
  display: inline-block;
  background: var(--wo-tint);
  color: var(--wo-blue-dk);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  padding: 7px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.dtswo .dtswo-card.is-here .dtswo-tag { background: #ffffff; color: #0052cc; }
.dtswo.dtswo--dark .dtswo-tag { background: rgba(159, 208, 255, 0.14); color: #cfe6ff; }

.dtswo .dtswo-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  margin-top: auto;
}
.dtswo .dtswo-price {
  font-size: 14px;
  line-height: 1.3;
  color: var(--wo-muted);
  white-space: nowrap;
}
.dtswo .dtswo-price b {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--wo-ink);
  font-variant-numeric: tabular-nums;
  margin: 0 2px;
}
.dtswo .dtswo-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--wo-tint);
  color: #0052cc;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
/* The whole card is the link (a big target on a phone); the button is what it says. */
.dtswo .dtswo-go::after { content: ''; position: absolute; inset: 0; border-radius: 18px; }
.dtswo .dtswo-go:focus { outline: none; }
.dtswo .dtswo-go:focus-visible::after { outline: 3px solid #0066ff; outline-offset: 3px; }
.dtswo .dtswo-ar { transition: transform 0.2s ease; }
.dtswo .dtswo-card:hover .dtswo-go { background: #0066ff; color: #ffffff; }
.dtswo .dtswo-card:hover .dtswo-ar { transform: translateX(3px); }
.dtswo .dtswo-card.is-here .dtswo-go { background: #ffffff; }
.dtswo .dtswo-card.is-here:hover .dtswo-go { background: #0066ff; color: #ffffff; }
.dtswo.dtswo--white .dtswo-go { background: #e3edfd; }
.dtswo.dtswo--dark .dtswo-go { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.dtswo.dtswo--dark .dtswo-card.is-here .dtswo-go { background: #0066ff; }

/* ---- The honest note ------------------------------------------------------ */
.dtswo .dtswo-note {
  max-width: 62ch;
  margin: 34px auto 0;
  text-align: center;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--wo-muted);
  text-wrap: pretty;
}
.dtswo .dtswo-note a { color: #0052cc; font-weight: 700; text-decoration: none; }
.dtswo .dtswo-note a:hover { color: #0066ff; }
.dtswo.dtswo--dark .dtswo-note a { color: #9fd0ff; }
.dtswo.dtswo--dark .dtswo-note a:hover { color: #ffffff; }
.dtswo .dtswo-note a:focus-visible { outline: 3px solid #0066ff; outline-offset: 2px; border-radius: 3px; }

/* ---- A tablet or a small laptop: one card per row. The need on the left, the name and what it is
   on the right, both about as tall, and the price and the button in one row under both. Below 1200px
   three cards side by side get too narrow for the needs, so the staircase starts at 1200px. ------ */
@media (max-width: 1199px) {
  .dtswo { padding: 76px 0 80px; }
  .dtswo .dtswo-head { margin-bottom: 36px; }
  .dtswo .dtswo-list { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: 0; }
  .dtswo .dtswo-card:nth-child(1),
  .dtswo .dtswo-card:nth-child(2) { top: 0; }
  .dtswo .dtswo-card {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 36px;
    padding: 26px 28px;
  }
  .dtswo .dtswo-a { grid-column: 1; grid-row: 1 / span 2; }
  .dtswo .dtswo-b { display: contents; }
  .dtswo .dtswo-namerow { grid-column: 2; grid-row: 1; align-self: start; min-height: 32px; }
  .dtswo .dtswo-what { grid-column: 2; grid-row: 2; margin: 0; }
  .dtswo .dtswo-need { margin: 0; }
  .dtswo .dtswo-foot {
    grid-column: 1 / -1;
    grid-row: 3;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 22px;
  }
  .dtswo .dtswo-go { min-width: 220px; }
}
/* On a small laptop the one-per-row cards stay tablet-sized, so the two halves of a card stay close. */
@media (min-width: 900px) and (max-width: 1199px) {
  .dtswo .dtswo-list { max-width: 920px; margin: 0 auto; }
}

/* ---- A phone: one card per row, top to bottom ----------------------------- */
@media (max-width: 599px) {
  .dtswo { padding: 60px 0 64px; }
  .dtswo .dtswo-in { padding: 0 16px; }
  .dtswo .dtswo-head { margin-bottom: 28px; }
  .dtswo .dtswo-lede { font-size: 16px; }
  .dtswo .dtswo-list { gap: 14px; }
  .dtswo .dtswo-card { display: flex; padding: 22px 20px 20px; border-radius: 16px; }
  .dtswo .dtswo-b { display: flex; }
  .dtswo .dtswo-namerow { min-height: 0; }
  .dtswo .dtswo-go::after { border-radius: 16px; }
  .dtswo .dtswo-top { margin-bottom: 14px; }
  .dtswo .dtswo-need { font-size: 17.5px; margin: 0 0 20px; }
  .dtswo .dtswo-name { font-size: 21px; }
  .dtswo .dtswo-what { margin: 0 0 16px; }
  .dtswo .dtswo-foot { flex-direction: column; align-items: stretch; gap: 14px; margin-top: auto; }
  .dtswo .dtswo-go { min-width: 0; }
  .dtswo .dtswo-note { margin-top: 26px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .dtswo .dtswo-card,
  .dtswo .dtswo-go,
  .dtswo .dtswo-ar { transition: none; }
  .dtswo .dtswo-card:hover { transform: none; }
  .dtswo .dtswo-card:hover .dtswo-ar { transform: none; }
}

/* 22 Oct: choose by the job, without a staircase or implied purchase sequence. */
.dtswo .dtswo-list { align-items: start; padding-bottom: 0; }
.dtswo .dtswo-card:nth-child(1), .dtswo .dtswo-card:nth-child(2) { top: 0; }
.dtswo.dtswo--pair .dtswo-in { max-width: 1080px; }
.dtswo.dtswo--pair .dtswo-head { max-width: 740px; margin-bottom: 24px; }
.dtswo.dtswo--pair .dtswo-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; max-width: none; }
.dtswo.dtswo--pair .dtswo-card { display: flex; padding: 28px; }
.dtswo.dtswo--pair .dtswo-a { flex: none; }
.dtswo.dtswo--pair .dtswo-b { display: flex; flex: none; }
.dtswo.dtswo--pair .dtswo-need { margin: 0 0 24px; }
.dtswo.dtswo--pair .dtswo-namerow { min-height: 0; }
.dtswo.dtswo--pair .dtswo-foot { flex-direction: column; align-items: stretch; margin: 8px 0 0; }
.dtswo .dtswo-bundle { max-width: 740px; margin: 0 auto 28px; text-align: center; font-size: 17px; line-height: 1.6; color: var(--wo-text); }
.dtswo .dtswo-boundary { color: var(--wo-muted); font-size: 15px; line-height: 1.6; margin: 0 0 14px; }
.dtswo .dtswo-requirements { max-width: 76ch; margin: 28px auto 0; text-align: center; color: var(--wo-muted); font-size: 15px; line-height: 1.65; }
.dtswo .dtswo-existing { text-align: center; margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--wo-muted); }
.dtswo .dtswo-existing a { color: #0052cc; font-weight: 600; text-underline-offset: 3px; }
.dtswo.dtswo--pair .dtswo-note { margin-top: 16px; }
@media(max-width:760px) {
  .dtswo.dtswo--pair .dtswo-list { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .dtswo.dtswo--pair .dtswo-card { padding: 24px; }
  .dtswo.dtswo--pair .dtswo-go { min-width: 0; }
  .dtswo .dtswo-bundle { font-size: 16px; }
}