/* ---- one new meaning: "this will not pass" ---------------------------- */
:root{
  --decline:#B42318;              /* 6.58:1 on --paper */
}
:root[data-theme="dark"]{
  --decline:#FF9C93;              /* 8.65:1 on --paper (dark) */
}

/* ---- shared measure: the section head, the bar and the cards line up --- */
.tdt-block{ max-width:1040px; margin-inline:auto; }
/* The FAQ head sits on the accordion's own 760px measure, so the heading and
   the list below it share one left edge (the accordion centres itself). */
.tdt-block--narrow{ max-width:760px; }
/* The form follows the rules columns: the section headings carry their own
   --rhythm top gap, this widget has no heading, so it carries its own. */
.elementor-widget-tdt_submit_form.tdt-form-block{ margin-top:var(--rhythm); }

/* ---- jump bar ----------------------------------------------------------
   Stripped back to the site's own control language: a hairline panel, one
   quiet line of type, two outline pills. The tinted fills and the filled
   green/red discs this started with read as a marketing banner — colour now
   sits only in the ✓ / ✕ glyph, where it means something. */
.tdt-jumprail{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px 24px; flex-wrap:wrap;
  margin-top:30px; padding:16px 18px;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r);
}
.tdt-jumprail__copy{ flex:1 1 320px; min-width:0; }
.tdt-jumprail__kicker{
  margin:0 0 5px; font-size:var(--fs-2xs,11px); font-weight:700;
  text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--sub);
}
.tdt-jumprail__line{
  margin:0; font-size:var(--fs-base,15px); line-height:1.55;
  color:var(--ink-2); max-width:60ch;
}
/* flex:0 0 auto keeps the two buttons on the same row as the copy; without it
   the growing copy text squeezes them onto a second line at every width. */
.tdt-jumprail__actions{ flex:0 0 auto; display:flex; gap:8px; flex-wrap:wrap; }
.tdt-jumprail__link{
  display:inline-flex; align-items:center; gap:8px;
  /* Measured across the site's controls on 25 Oct 2026 — .tdt-form-submit,
     .tdt-see-all, the newsletter button and .tdt-search-toggle all sit on
     8px, never a full pill. 999px here made these two the only pill-shaped
     things on the page, so they take --r-sm like every other button. */
  padding:9px 15px; border-radius:var(--r-sm);
  font-size:13px; font-weight:650; line-height:1.2; text-decoration:none;
  border:1px solid var(--control-line); background:var(--paper); color:var(--ink);
  transition:transform .16s var(--ease-spring), border-color .16s, color .16s;
}
/* These are controls, not prose — but the theme's in-content link rule
   (0,2,2) outranks a bare class and was painting both labels accent blue on
   top of the coloured glyph, which put three accents in one bar. Measured on
   the live page 25 Oct 2026: color was rgb(36,84,255) until this guard.
   Same escape hatch .tdt-success__actions and .tdt-see-all already use. */
.tdt-jumprail__link,
.tdt-jumprail__link:link,
.tdt-jumprail__link:visited{ color:var(--ink)!important; text-decoration:none!important; }
.tdt-jumprail__link:hover,
.tdt-jumprail__link:active{ color:var(--accent)!important; }
.tdt-jumprail__link:hover{ transform:translateY(-1px); border-color:var(--accent); }
.tdt-jumprail__link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.tdt-jumprail__mark{ font-size:13px; font-weight:700; line-height:1; flex:none; }
.tdt-jumprail__link--yes .tdt-jumprail__mark{ color:var(--free); }
.tdt-jumprail__link--no .tdt-jumprail__mark{ color:var(--decline); }

/* ---- what passes / what doesn't ----------------------------------------
   Same recipe as the site's own Pros/Cons on every tool page
   (.tdt-pros-cons in snippet 333): flat paper panel, one hairline border,
   an 11px uppercase label carrying the only colour, and a plain disc list.
   No badges, no coloured top bars, no filled chips, no shadow — those were
   the parts that read as a SaaS landing page rather than a reference work. */
.tdt-rules .tdt-rules__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
}
.tdt-rules .tdt-rules__col{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:20px;
  outline:none;
}
.tdt-rules .tdt-rules__col:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
/* Short, quiet flash after a jump-button click so the eye lands on the column
   the anchor chose. Removed by the script after 1.6s. */
.tdt-rules .tdt-rules__col.is-target{
  box-shadow:0 0 0 3px rgba(36,84,255,.20);
  transition:box-shadow .3s var(--ease-spring);
}
/* !important on the four that style the label: the polish layer forces
   Space Grotesk + tight tracking onto every h3 with !important, and at 11px
   uppercase that tracking closes the counters up. Same escape hatch
   .tdt-pros-cons already uses for its own labels. */
.tdt-rules__label{
  display:flex; align-items:center; gap:7px;
  margin:0 0 14px!important;
  font-size:11px!important; font-weight:700!important;
  font-family:var(--font-sans)!important;
  letter-spacing:var(--ls-caps)!important;
  text-transform:uppercase; line-height:1.3;
  color:var(--ink-2);
}
.tdt-rules__col--yes .tdt-rules__label{ color:var(--free); }
.tdt-rules__col--no .tdt-rules__label{ color:var(--decline); }
.tdt-rules__mark{ font-size:12px; line-height:1; }
.tdt-rules .tdt-rules__list{ margin:0; padding-left:18px; list-style:disc; }
.tdt-rules .tdt-rules__list li{
  font-size:14px; line-height:1.6; color:var(--ink-2); margin:0 0 9px;
}
.tdt-rules .tdt-rules__list li:last-child{ margin-bottom:0; }
.tdt-rules .tdt-rules__list strong{ color:var(--ink); font-weight:650; }
.tdt-rules .tdt-rules__foot{
  margin:18px 0 0; font-size:13px; line-height:1.65; color:var(--sub); max-width:74ch;
}

/* ---- FAQ: same accordion as /about/, scoped answers -------------------- */
#tdt-submit-faq{ display:block; max-width:760px; margin:0 auto var(--rhythm); }
#tdt-submit-faq .tdt-faq-item.is-open .tdt-faq-answer{ max-height:760px; }
#tdt-submit-faq .tdt-faq-answer p{ color:var(--ink-2); }
#tdt-submit-faq .tdt-faq-answer p:last-child{ padding-bottom:22px; }

/* ---- anchor landing ------------------------------------------------------
   Deliberately NO scroll-margin here. The site already sets
   html{ scroll-padding-top:104px } (136px under 1400px) for exactly this —
   anchor links clearing the sticky pill header. A second offset STACKS on top
   of scroll-padding and landed these columns 216px below the top of the
   viewport, leaving a dead gap. Keep this block empty unless the site-wide
   rule ever goes away. */

@media (max-width:860px){
  .tdt-rules .tdt-rules__grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .tdt-jumprail{ margin-top:26px; padding:14px 16px; }
  .tdt-jumprail__actions{ width:100%; }
  .tdt-jumprail__link{ flex:1 1 100%; justify-content:center; }
  .tdt-rules .tdt-rules__col{ padding:18px 16px; }
}
@media (prefers-reduced-motion:reduce){
  .tdt-jumprail__link{ transition:none; }
  .tdt-jumprail__link:hover{ transform:none; }
  .tdt-rules .tdt-rules__col.is-target{ transition:none; }
}