/* ============================================================
   test-design.css
   Scoped stylesheet for /test-design.php ONLY.
   Every rule is namespaced under .td, so nothing here can leak
   into styles.css or affect any other page on the site.
   Loaded after /styles.css, which still supplies the top bar,
   nav, footer and the media/reviews/credentials widgets.

   Note on selectors: styles.css sets bare-element rules (p, ul,
   ol, h1-h4, li). The resets below are written as `.td p` etc.
   so they beat those, which means component rules that target
   the same elements are also written with a `.td ` prefix so
   they win on source order rather than losing on specificity.
   ============================================================ */

.td {
  /* palette: ledger ink + the firm's maroon + brass */
  --td-ink:        #101720;
  --td-ink-2:      #16202b;
  --td-maroon:     #800000;
  --td-maroon-dk:  #5c0000;
  --td-maroon-lt:  #9a2b2b;
  --td-brass:      #b08a3c;
  --td-paper:      #fbfaf7;
  --td-paper-2:    #f5f2ec;
  --td-card:       #ffffff;
  --td-rule:       #e3ddd4;
  --td-rule-2:     #d3cabd;
  --td-text:       #22262c;
  --td-muted:      #545c69;
  --td-inverse:    #eef1f4;

  --td-serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype",
              "Book Antiqua", "Times New Roman", serif;
  --td-maxw: 1220px;
  --td-r: 3px;

  display: block;
  background: var(--td-paper);
  color: var(--td-text);
  font-size: 17px;
  line-height: 1.65;
}

.td-wrap { max-width: var(--td-maxw); margin: 0 auto; padding: 0 24px; }

/* ---- resets against the global element styling -------------- */
.td p  { margin: 0 0 1.15em; text-align: left; }
.td h1, .td h2, .td h3, .td h4 {
  font-family: var(--td-serif);
  color: var(--td-ink);
  text-align: left;
  padding: 0;
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.td ul, .td ol { margin: 0; padding: 0; }
.td li { margin: 0; }
.td a  { color: var(--td-maroon-dk); }
.td :focus-visible {
  outline: 2px solid var(--td-maroon);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- skip link ---------------------------------------------- */
.td .td-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--td-maroon); color: #fff;
  padding: 10px 16px; z-index: 3000; text-decoration: none;
}
.td .td-skip:focus { left: 8px; top: 8px; }

/* ---- shared bits -------------------------------------------- */
.td .td-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 26px;
  border-radius: var(--td-r);
  border: 1px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.td .td-btn-primary { background: var(--td-maroon); color: #fff; border-color: var(--td-maroon); }
.td .td-btn-primary:hover { background: var(--td-maroon-dk); border-color: var(--td-maroon-dk); }
.td .td-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.td .td-btn-ghost:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.8); }
.td .td-btn-outline { background: #fff; color: var(--td-maroon-dk); border-color: var(--td-rule-2); }
.td .td-btn-outline:hover { border-color: var(--td-maroon); }

/* ============================ HERO ============================ */
.td-hero {
  position: relative;
  background: linear-gradient(180deg, var(--td-paper-2) 0%, var(--td-paper) 100%);
  color: var(--td-text);
  border-bottom: 1px solid var(--td-rule);
  overflow: hidden;
}

.td-hero-inner {
  max-width: var(--td-maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(0,.6fr);
  gap: 56px;
  align-items: center;
  padding: 64px 24px 68px;
}
.td-hero h1 {
  color: var(--td-ink);
  font-size: clamp(2.05rem, 4vw, 3.15rem);
  line-height: 1.08;
  margin: 0 0 18px;
}
.td .td-hero-lede {
  font-size: 1.14rem;
  color: var(--td-text);
  max-width: 36em;
  margin: 0 0 26px;
}
.td-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.td .td-hero-note {
  font-size: .95rem;
  color: var(--td-muted);
  max-width: 40em;
  margin: 0;
}
.td-hero-note a { color: var(--td-maroon-dk); }
.td .td-hero-portal { margin: 16px 0 0; font-size: .92rem; color: var(--td-muted); }
.td-hero-portal a { color: var(--td-maroon-dk); text-decoration: underline; text-underline-offset: 3px; }

.td-portrait {
  margin: 0;
  background: var(--td-card);
  border: 1px solid var(--td-rule);
  padding: 12px;
  border-radius: var(--td-r);
  box-shadow: 0 10px 28px rgba(16,23,32,.10);
}
.td-portrait img { display: block; width: 100%; height: auto; border-radius: 2px; }
.td-portrait figcaption {
  padding: 14px 6px 2px;
  border-top: 1px solid var(--td-rule);
  margin-top: 12px;
}
.td-portrait .td-pname {
  font-family: var(--td-serif);
  font-size: 1.1rem;
  color: var(--td-ink);
  font-weight: 600;
}
.td-portrait .td-prole {
  font: 600 11.5px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--td-muted);
}

/* ========================== LAYOUT ============================ */
.td-layout { padding-top: 56px; padding-bottom: 64px; }
/* prose column: capped for a comfortable measure, centred in the wrap.
   The full-bleed bands above and below carry the page's full width. */
.td-body { max-width: 880px; margin: 0 auto; }
.td-section { margin-bottom: 52px; }
.td-section:last-child { margin-bottom: 0; }
.td .td-section > h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  line-height: 1.2;
  margin-bottom: 28px;
}
.td .td-section-sub { color: var(--td-muted); margin: 0 0 26px; max-width: 40em; }
.td-lead-in { margin-bottom: 44px; max-width: 40em; }
.td-lead-in p { font-size: 1.06rem; }

/* ---- practice cards ------------------------------------------ */
.td .td-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* an odd number of cards would leave a half-empty row, so the last one
   takes the full width instead */
.td .td-cards > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.td-card {
  background: var(--td-card);
  border: 1px solid var(--td-rule);
  border-radius: var(--td-r);
  padding: 20px 22px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.td-card:hover {
  border-color: var(--td-rule-2);
  box-shadow: 0 6px 18px rgba(16,23,32,.08);
  transform: translateY(-1px);
}
.td-card h3 { font-size: 1.13rem; line-height: 1.3; margin: 0 0 8px; }
.td-card h3 a { color: var(--td-ink); text-decoration: none; }
.td-card:hover h3 a { color: var(--td-maroon-dk); }
.td-card p { font-size: .97rem; color: var(--td-muted); margin: 0; }
.td-card p a { color: var(--td-maroon-dk); }
/* consecutive paragraphs inside a box had margin 0, so they ran together as
   one block of text. The `.td .td-list` prefix is needed on the list rule
   because that selector is (0,2,0) and would otherwise win. */
.td-card p + p, .td-tile p + p, .td-step p + p,
.td-reason p + p, .td-flow p + p, .td-plain p + p { margin-top: .85em; }
.td .td-card p + .td-list, .td .td-tile p + .td-list,
.td .td-step p + .td-list, .td .td-reason p + .td-list { margin-top: .85em; }

.td .td-after-cards { margin: 20px 0 0; font-size: .97rem; color: var(--td-muted); max-width: 44em; }

/* ---- whole-box click ------------------------------------------------
   Matches the .practice-area-card behaviour on albertgoodwin.com: the
   entire box is the link, not just its heading. Done with a stretched
   pseudo-element rather than by wrapping the card in an <a>, because the
   descriptions contain their own inline links and nesting anchors is
   invalid. Those inline links are lifted above the overlay so they still
   work. */
.td-card, .td-tile { position: relative; }
.td-card > h3 > a::after,
.td-tile > h3 > a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
/* every link inside the box must sit above the stretched overlay, not
   just the ones in paragraphs: several cards carry lists of links and
   those were being swallowed by the card's own click target. */
.td-card p a, .td-card li a, .td-tile p a, .td-tile li a { position: relative; z-index: 1; }

/* ---- process timeline ------------------------------------------
   Runs top to bottom at every width: five short steps read as a
   sequence far better in one column than wrapped across rows. */
.td .td-steps {
  list-style: none;
  margin: 6px 0 34px;
  padding: 0;
}
.td-step {
  position: relative;
  margin: 0;
  padding: 0 0 28px 54px;
}
.td-step:last-child { padding-bottom: 0; }
.td-step::before {
  content: "";
  position: absolute;
  left: 17px; top: 36px; bottom: 0;
  width: 1px;
  background: var(--td-rule-2);
}
.td-step:last-child::before { display: none; }
.td-step-n {
  position: absolute; top: 0; left: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--td-maroon);
  color: #fff;
  display: grid; place-items: center;
  font: 700 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.td-step h3 {
  font: 600 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--td-ink);
  margin: 6px 0 4px;
}
.td-step h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--td-rule-2); }
.td-step h3 a:hover { color: var(--td-maroon-dk); border-bottom-color: var(--td-maroon); }
.td-step p { font-size: .96rem; color: var(--td-muted); margin: 0; max-width: 40em; }

/* bridge from the timeline into the enforcement cards */
.td .td-bridge {
  margin: 0 0 26px;
  max-width: 40em;
  font-size: 1.02rem;
  color: var(--td-text);
}

/* ---- asset tiles ------------------------------------------------- */
.td .td-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.td-tile {
  background: var(--td-card);
  border: 1px solid var(--td-rule);
  border-radius: var(--td-r);
  padding: 16px 18px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.td-tile:hover { border-color: var(--td-rule-2); box-shadow: 0 6px 18px rgba(16,23,32,.08); }
.td-tile h3 { font-size: 1rem; line-height: 1.3; margin: 0 0 6px; }
.td-tile h3 a { color: var(--td-ink); text-decoration: none; }
.td-tile:hover h3 a { color: var(--td-maroon-dk); }
.td-tile p { font-size: .91rem; color: var(--td-muted); margin: 0; }

/* An image that was inline in the source page, kept in the flow. */
/* Wide tables scroll inside their own box rather than pushing the page. */
.td .td-tablewrap { overflow-x: auto; margin: 0 0 26px; }
.td .td-tablewrap table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.td .td-tablewrap th, .td .td-tablewrap td {
  border: 1px solid var(--td-rule); padding: 9px 12px; text-align: left; vertical-align: top; }
.td .td-tablewrap th { background: var(--td-paper-2); font-weight: 600; }

/* A map or video carried over from the source page. */
.td .td-embed { margin: 0 0 26px; }
.td .td-embed iframe, .td .td-embed video { width: 100%; max-width: 100%; border: 0; border-radius: 3px; }

.td .td-figure { margin: 0 0 26px; }
.td .td-figure img { height: auto; border-radius: 3px; }

.td .td-list { list-style: disc; margin: 0 0 20px; padding-left: 1.35em; max-width: 44em; }
.td .td-list li { margin: 0 0 8px; color: var(--td-muted); }
.td .td-list li:last-child { margin-bottom: 0; }

/* ---- numbered flow --------------------------------------------------
   For a source list whose heading says it is a sequence (a process, the
   first 30 days, how a case is built). Same visual language as the
   collection timeline, built from one sentence per step. */
.td .td-flow { list-style: none; margin: 8px 0 26px; padding: 0; }
.td-flow > li { position: relative; margin: 0; padding: 5px 0 24px 54px; }
.td-flow > li:last-child { padding-bottom: 0; }
.td-flow > li::before {
  content: ""; position: absolute;
  left: 17px; top: 36px; bottom: 0;
  width: 1px; background: var(--td-rule-2);
}
.td-flow > li:last-child::before { display: none; }
.td-flow .td-n {
  position: absolute; top: 0; left: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--td-maroon); color: #fff;
  display: grid; place-items: center;
  font: 700 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.td-flow > li, .td-flow p { font-size: .97rem; color: var(--td-text); max-width: 44em; }
.td-flow p { margin: 0; }

/* ---- linked cards --------------------------------------------------
   Some sites group their practice areas under a subheading and present
   each one as a small clickable card (their .practice-areas-grid). That
   pattern is better than a long list, so it is carried over here in this
   design's own palette: whole card is the link, title over one line of
   description, grouped under the subheading it came from. */
/* .td prefix required: this lands on an <h3>, and the `.td h1..h4` reset
   is (0,1,1). A bare `.td-group` is (0,1,0) and silently loses, taking the
   margin with it. */
.td .td-group {
  font-family: var(--td-serif);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--td-ink);
  /* more space below than above, so the heading reads as belonging to the
     cards under it rather than floating between two groups */
  margin: 42px 0 26px;
}
.td .td-group:first-of-type { margin-top: 20px; }
.td .td-linkcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}
.td .td-linkcards > li { margin: 0; }
.td-linkcards a {
  display: block;
  height: 100%;
  background: var(--td-card);
  border: 1px solid var(--td-rule);
  border-radius: var(--td-r);
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.td-linkcards a:hover {
  border-color: var(--td-rule-2);
  box-shadow: 0 6px 18px rgba(16,23,32,.09);
  transform: translateY(-2px);
}
/* prefixed: in expanded sections this is an <h3>, and the `.td h1..h4`
   reset is (0,1,1), so a bare .td-lc-t would silently lose. */
.td .td-lc-t {
  display: block;
  font-family: var(--td-serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--td-ink);
  margin-bottom: 6px;
}
.td-linkcards a:hover .td-lc-t { color: var(--td-maroon-dk); }
.td .td-lc-t { font-weight: 600; }
.td .td-lc-d { display: block; font-size: .92rem; color: var(--td-muted); line-height: 1.5; }

/* ---- service-area chips -------------------------------------------
   Built from the areaServed array already in each site's JSON-LD, which
   until now was structured data no visitor ever saw. */
.td .td-areas { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.td-areas li { margin: 0; }
.td-areas span {
  display: inline-block;
  padding: 9px 17px;
  border: 1px solid var(--td-rule-2);
  border-radius: 999px;
  background: var(--td-card);
  font-size: .93rem;
  color: var(--td-text);
}

/* ---- checked grid ---------------------------------------------------
   For a capability or reason list: two columns with a drawn tick, so a
   long bullet list reads as a set of claims rather than a wall. */
.td .td-checks {
  list-style: none; margin: 8px 0 26px; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px 34px;
}
.td-checks > li {
  position: relative; margin: 0; padding-left: 30px;
  font-size: .97rem; color: var(--td-text);
}
.td-checks > li::before {
  content: ""; position: absolute;
  left: 2px; top: .28em;
  width: 11px; height: 6px;
  border: 2px solid var(--td-maroon);
  border-top: 0; border-right: 0;
  transform: rotate(-45deg);
}

/* ---- plain prose flow ---------------------------------------------
   for sections that are neither services nor why-us: process notes,
   FAQs, service areas, fee explanations. */
.td .td-plain { list-style: none; margin: 0; padding: 0; }
.td .td-plain > li { margin: 0 0 24px; max-width: 44em; }
.td .td-plain > li:last-child { margin-bottom: 0; }
.td-plain h3 { font-size: 1.06rem; line-height: 1.3; margin: 0 0 7px; }
.td-plain p { font-size: .97rem; color: var(--td-muted); margin: 0 0 9px; }
.td-plain p:last-child { margin-bottom: 0; }

/* ---- reasons -------------------------------------------------- */
.td .td-reasons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.td-reason { padding: 22px 0; border-top: 1px solid var(--td-rule); }
.td-reason h3 {
  font-size: 1.08rem;
  margin: 0 0 7px;
  display: flex; gap: 10px; align-items: baseline;
}
.td-reason h3::before {
  content: "";
  width: 7px; height: 7px; flex: none;
  background: var(--td-brass);
  transform: rotate(45deg) translateY(-2px);
}
.td-reason p { font-size: .97rem; color: var(--td-muted); margin: 0; }

/* ---- creditor portal band -------------------------------------- */
.td-portal {
  background: var(--td-card);
  border-top: 1px solid var(--td-rule);
  border-bottom: 1px solid var(--td-rule);
}
.td-portal { padding: 56px 0 60px; }
.td-portal-inner {
  display: grid;
  grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr);
  gap: 48px;
  align-items: start;
  margin-bottom: 40px;
}
.td-portal-copy h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  line-height: 1.2;
  margin: 0 0 18px;
}
.td .td-portal-lede { color: var(--td-muted); max-width: 44em; margin: 0 0 22px; }
.td .td-portal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.td .td-portal-list li {
  position: relative;
  margin: 0;
  padding-left: 26px;
  font-size: .97rem;
  color: var(--td-muted);
}
.td .td-portal-list li::before {
  content: "";
  position: absolute; left: 0; top: .58em;
  width: 8px; height: 8px;
  background: var(--td-brass);
  transform: rotate(45deg);
}
.td-portal-list strong { color: var(--td-ink); font-weight: 600; }
.td .td-portal-note { font-size: .88rem; color: var(--td-muted); margin: 16px 0 0; }

/* Dashboard mock. Deliberately rendered in the portal's own palette
   (navy #16325c, blue #1f4e9c, grey chrome) rather than the site's
   maroon: it is a picture of a different product, and the tonal shift
   is what makes it read as one. Markup and CSS only, no screenshot,
   so it stays sharp at any zoom and costs no extra request.
   The whole block is role="img" with a written summary, so assistive
   tech gets the description instead of a table of invented rows. */
.td-app {
  border: 1px solid #d7dce2;
  border-radius: 8px;
  overflow: hidden;
  background: #f4f6f8;
  box-shadow: 0 14px 38px rgba(16,23,32,.13);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1c2126;
  line-height: 1.5;
}
.td-app-bar {
  background: #16325c;
  color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 20px;
}
.td-app-brand { font-size: 15px; font-weight: 700; letter-spacing: .2px; }
.td-app-user { font-size: 12.5px; color: #cfe0f7; }
.td-app-body { padding: 20px; }
.td-app-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.td .td-app-h1 { font-size: 20px; font-weight: 700; letter-spacing: -.2px; margin: 0; color: #1c2126; }
.td .td-app-sub { font-size: 13px; color: #6b7480; margin: 2px 0 0; }
.td-app-btns { display: flex; gap: 8px; flex: none; flex-wrap: wrap; }
.td-app-btn {
  flex: none;
  background: #1f4e9c; color: #fff;
  font-size: 13px; font-weight: 600;
  border-radius: 6px; padding: 9px 14px;
}
.td-app-btn-2 { background: #fff; color: #1f4e9c; border: 1px solid #cbd5e1; }
.td-app-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.td-app-stat {
  flex: 1 1 140px;
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  padding: 12px 16px;
}
.td-app-n { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.td-app-l { display: block; font-size: 11px; color: #6b7480; text-transform: uppercase; letter-spacing: .5px; }
.td-app-card {
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  overflow: hidden;
}
.td-app-scroll { overflow-x: auto; }
.td-app-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.td-app-table th, .td-app-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #eceef1;
  vertical-align: middle;
  white-space: nowrap;
}
.td-app-table tbody tr:last-child td { border-bottom: 0; }
.td-app-table th {
  background: #f8f9fa;
  font-weight: 600; font-size: 11px;
  color: #5c6570; text-transform: uppercase; letter-spacing: .4px;
}
.td-app-num { text-align: right; font-variant-numeric: tabular-nums; }
.td-app-link { display: block; color: #1f4e9c; font-weight: 600; }
.td-app-mut { display: block; font-size: 12px; color: #6b7480; }
.td-app-date { color: #6b7480; }
.td-app-pill {
  display: inline-block;
  padding: 3px 10px; border-radius: 11px;
  font-size: 11.5px; font-weight: 600;
}
.td-app-pill-active { background: #e3edfb; color: #1c4a8a; }
.td-app-pill-new    { background: #fff3cd; color: #7a5b00; }
.td-app-badge {
  display: inline-block; min-width: 20px;
  padding: 1px 7px; border-radius: 10px;
  background: #eceef1; color: #5c6570;
  font-size: 11.5px; font-weight: 600; text-align: center;
}
.td .td-app-caption {
  margin: 12px 0 0;
  font-size: .84rem;
  color: var(--td-muted);
  text-align: center;
}

/* the media strip now sits inside .td, whose element resets are (0,1,1) and
   outrank the widget's own single-class rules. Restore what it had outside. */
.td .media-text { text-align: center; margin: 0 0 1.5em; }
.td .media-link { color: inherit; }

/* ---- closing band --------------------------------------------- */
.td-closing {
  background: linear-gradient(178deg, var(--td-ink-2) 0%, var(--td-ink) 100%);
  color: var(--td-inverse);
}
.td-closing-inner { max-width: var(--td-maxw); margin: 0 auto; padding: 52px 24px 56px; }
.td-closing :focus-visible { outline-color: #fff; }
.td-closing h2 { color: #fff; font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin: 0 0 18px; }
.td-closing p { color: #cdd6df; max-width: 46em; }
.td-closing a { color: #fff; }
.td-closing .td-cta-row { margin: 26px 0 0; }

/* ========================= RESPONSIVE ========================== */
@media (max-width: 1040px) {
  .td-hero-inner { grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: 40px; }
}

@media (max-width: 900px) {
  .td-portal { padding: 44px 0 48px; }
  .td-portal-inner { grid-template-columns: minmax(0,1fr); gap: 32px; margin-bottom: 32px; }
  .td-layout { padding-top: 44px; }
}

@media (max-width: 775px) {
  .td-wrap { padding: 0 18px; }
  .td-hero-inner { grid-template-columns: 1fr; gap: 32px; padding: 40px 18px 44px; }
  /* the portrait is supporting material; on a phone it pushes the
     headline and the call button below the fold */
  .td-portrait { display: none; }
  .td-cta-row .td-btn { flex: 1 1 auto; }
  .td .td-reasons { grid-template-columns: 1fr; gap: 0; }
  .td-closing-inner { padding: 40px 18px 44px; }
}

@media (max-width: 900px) {
  .td .td-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .td .td-checks { grid-template-columns: 1fr; }
  .td .td-cards { grid-template-columns: 1fr; }
  .td .td-tiles { grid-template-columns: 1fr; }
  .td .td-cards > li:last-child:nth-child(odd) { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .td * { transition: none !important; }
  .td-card:hover { transform: none; }
}