.tl21-detail {
  --tl21-line: #e4e9f1;
  --tl21-ink: #1c2c45;
  --tl21-muted: #56647a;
  --tl21-blue: #3478f6;
  color: var(--tl21-ink);
}

.tl21-detail h1, .tl21-detail h2, .tl21-detail h3, .tl21-detail p { margin: 0; }
.tl21-detail-wrap { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.tl21-detail-hero { position: relative; isolation: isolate; min-height: 365px; background: #e8effa; }
.tl21-detail-hero--product { min-height: 430px; background: #f0f1f3; }
.tl21-detail-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.tl21-detail-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tl21-detail-hero-copy { padding-block: 143px 46px; }
.tl21-detail-hero--product .tl21-detail-hero-copy { padding-top: 115px; }
.tl21-detail-hero h1 { margin: 6px 0 12px; font-size: 40px; font-weight: 650; line-height: 1.25; letter-spacing: .035em; }
.tl21-detail-hero-copy > p:not(.tl21-detail-event) { max-width: 560px; font-size: 16px; line-height: 1.85; }
.tl21-detail .tl21-detail-event { display: inline-flex; border: 1px solid #c8d8fd; padding: 5px 12px; background: #f2f6ff; color: #235fbf; font-weight: 600; }
.tl21-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 22px; }
.tl21-detail .tl21-detail-btn { display: inline-flex; justify-content: center; align-items: center; min-height: 43px; padding: 0 20px; border: 1px solid #b9c9e5; background: #fff; color: #254167; white-space: nowrap; }
.tl21-detail .tl21-detail-btn--primary { border-color: var(--tl21-blue); background: var(--tl21-blue); color: #fff; }
.tl21-detail .tl21-detail-btn:hover { border-color: #1760e8; color: #1760e8; }
.tl21-detail .tl21-detail-btn--primary:hover { background: #1760e8; color: #fff; }
.tl21-detail .tl21-detail-plain, .tl21-detail .tl21-detail-note { color: #275da7; }
.tl21-detail-note { display: inline-block; margin-top: 13px; }

.tl21-detail-shortcuts { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: -14px; border: 1px solid var(--tl21-line); background: #fff; box-shadow: 0 9px 26px rgb(26 60 110 / 7%); }
.tl21-detail-shortcuts a { display: flex; min-width: 0; flex-direction: column; padding: 21px 23px 18px; border-inline-end: 1px solid var(--tl21-line); }
.tl21-detail-shortcuts a:last-child { border-inline-end: 0; }
.tl21-detail-shortcuts a:hover { background: #f6f9ff; }
.tl21-detail-shortcuts strong { font-size: 17px; line-height: 1.4; }
.tl21-detail-shortcuts a > span { margin: 6px 0 12px; color: var(--tl21-muted); }
.tl21-detail-shortcuts b { margin-top: auto; color: var(--tl21-blue); font-weight: 500; }

.tl21-detail-columns { display: grid; grid-template-columns: 188px minmax(0,1fr); align-items: start; gap: 44px; padding-block: 54px 64px; }
.tl21-detail-sidebar { position: sticky; top: 78px; display: grid; padding-bottom: 5px; border: 1px solid var(--tl21-line); background: #fff; }
.tl21-detail-sidebar strong { padding: 13px 16px; border-bottom: 1px solid var(--tl21-line); background: #f5f8fe; font-size: 16px; }
.tl21-detail-sidebar a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 16px; color: var(--tl21-muted); }
.tl21-detail-sidebar a:hover { background: #f3f7ff; color: var(--tl21-blue); }
.tl21-detail-sidebar a span { color: #7b8ba6; }
.tl21-detail-main { min-width: 0; }
.tl21-detail-section { padding-bottom: 37px; scroll-margin-top: 16px; }
.tl21-detail-section + .tl21-detail-section { padding-top: 35px; border-top: 1px solid var(--tl21-line); }
.tl21-detail-section:last-child { padding-bottom: 0; }
.tl21-detail-section h2, .tl21-detail-policy-card h2 { margin-bottom: 13px; font-size: 27px; font-weight: 650; line-height: 1.35; }
.tl21-detail-lead { color: var(--tl21-muted); }
.tl21-detail-cardgrid, .tl21-detail-featuregrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; margin-top: 20px; }
.tl21-detail-card { padding: 21px 23px; border: 1px solid var(--tl21-line); background: #fff; box-shadow: 0 4px 15px rgb(42 68 114 / 5%); }
.tl21-detail-card:target { border-color: var(--tl21-blue); }
.tl21-detail-card small, .tl21-detail-profile-copy small { color: #2869c4; font-weight: 650; }
.tl21-detail-card h3, .tl21-detail-featuregrid h3 { margin: 5px 0 6px; font-size: 17px; }
.tl21-detail-card p, .tl21-detail-featuregrid p { color: var(--tl21-muted); }
.tl21-detail-card a, .tl21-detail-profile-points a { display: inline-block; margin-top: 11px; }
.tl21-detail-card a, .tl21-detail-faq a, .tl21-detail-policy-card a, .tl21-detail-profile-points a { color: #2563c5; }
.tl21-detail-card a:hover, .tl21-detail-faq a:hover, .tl21-detail-policy-card a:hover, .tl21-detail-profile-points a:hover { text-decoration: underline; }
.tl21-detail-featuregrid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.tl21-detail-featuregrid--four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.tl21-detail-featuregrid article { padding: 18px 19px; border: 1px solid var(--tl21-line); background: linear-gradient(#f8fbff,#fff 58%); }
.tl21-detail-featuregrid article > span { display: inline-grid; place-items: center; width: 36px; height: 36px; background: #eaf2ff; color: #2869c4; font-weight: 700; }
.tl21-detail-faq { margin-top: 20px; border: 1px solid var(--tl21-line); }
.tl21-detail-faq details + details { border-top: 1px solid var(--tl21-line); }
.tl21-detail-faq summary { padding: 13px 17px; color: var(--tl21-ink); font-size: 15px; font-weight: 600; cursor: pointer; }
.tl21-detail-faq p { padding: 0 17px 14px; color: var(--tl21-muted); }

.tl21-detail-about-nav { position: sticky; top: 62px; z-index: 2; display: flex; justify-content: center; border-bottom: 1px solid var(--tl21-line); background: rgb(255 255 255 / 94%); backdrop-filter: blur(6px); }
.tl21-detail-about-nav a { display: block; padding: 16px 26px; white-space: nowrap; }
.tl21-detail-about-nav a:hover { color: var(--tl21-blue); }
.tl21-detail-about { padding-block: 44px 60px; }
.tl21-detail-about .tl21-detail-section { scroll-margin-top: 58px; }
.tl21-detail-profile { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: 18px; }
.tl21-detail-profile-copy { padding: 26px 30px; border: 1px solid var(--tl21-line); border-radius: 8px; background: linear-gradient(120deg,#f6faff,#fff 65%); }
.tl21-detail-profile-copy h3 { margin: 8px 0 10px; font-size: 23px; }
.tl21-detail-profile-copy p { margin: 10px 0; color: var(--tl21-muted); }
.tl21-detail-profile-points { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.tl21-detail-profile-points article { padding: 16px; border: 1px solid var(--tl21-line); border-radius: 7px; }
.tl21-detail-profile-points p { margin-top: 6px; color: var(--tl21-muted); }
.tl21-detail-callout { padding: 13px 15px; border-left: 3px solid #699cf5; background: #f0f6ff; }
.tl21-detail-profile-copy .tl21-detail-callout p { margin: 2px 0 0; }
.tl21-detail-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 21px 0 0; padding: 0; list-style: none; }
.tl21-detail-steps li { display: grid; gap: 7px; padding-top: 12px; border-top: 2px solid #c7dbfc; }
.tl21-detail-steps b { color: #2b6bd2; font-size: 20px; }
.tl21-detail-steps strong { font-size: 16px; }
.tl21-detail-steps span { color: var(--tl21-muted); }

.tl21-detail-policy { padding: 52px 0 64px; background: #f5f7fb; }
.tl21-detail-policy-card { max-width: 1020px; margin-inline: auto; padding: 36px 40px; border: 1px solid var(--tl21-line); border-radius: 10px; background: #fff; box-shadow: 0 8px 23px rgb(32 63 110 / 7%); }
.tl21-detail-policy-card h2 small { color: #66758b; font-size: 16px; font-weight: 500; }
.tl21-detail-policy-meta { margin: 21px 0 24px; padding: 15px 18px; border: 1px solid #dce7f9; border-radius: 6px; background: #f3f7fe; }
.tl21-detail-policy-meta p + p { margin-top: 4px; }
.tl21-detail-policy-meta strong { display: inline-block; min-width: 68px; }
.tl21-detail-policy-card section { margin: 17px 0; }
.tl21-detail-policy-card h3 { margin-bottom: 5px; font-size: 17px; }
.tl21-detail-policy-card section p, .tl21-detail-policy-card li { color: var(--tl21-muted); }
.tl21-detail-policy-card ol { margin: 6px 0; padding-inline-start: 20px; }
.tl21-detail-policy-card li + li { margin-top: 4px; }
.tl21-detail-policy-card > .tl21-detail-callout { margin-top: 25px; }

@media (max-width: 900px) {
  .tl21-detail-columns { grid-template-columns: 155px minmax(0,1fr); gap: 22px; }
  .tl21-detail-shortcuts a { padding-inline: 15px; }
  .tl21-detail-hero-copy > p:not(.tl21-detail-event) { max-width: min(58%, 560px); }
  .tl21-detail-profile { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .tl21-detail-wrap { width: calc(100% - 30px); }
  .tl21-detail-hero, .tl21-detail-hero--product { min-height: auto; }
  .tl21-detail-hero-copy, .tl21-detail-hero--product .tl21-detail-hero-copy { padding-block: 43px 35px; }
  .tl21-detail-hero h1 { font-size: 29px; }
  .tl21-detail-hero-copy > p:not(.tl21-detail-event) { max-width: 100%; font-size: 14px; }
  .tl21-detail-media img { object-position: 59% center; }
  .tl21-detail-media::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(246 249 253 / 97%) 12%, rgb(246 249 253 / 74%) 82%); content: ""; }
  .tl21-detail-actions { gap: 8px; margin-top: 16px; }
  .tl21-detail .tl21-detail-btn { min-height: 39px; padding-inline: 12px; }
  .tl21-detail-shortcuts { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 13px; }
  .tl21-detail-shortcuts a { padding: 12px; }
  .tl21-detail-shortcuts strong { font-size: 15px; }
  .tl21-detail-shortcuts a:nth-child(2n) { border-inline-end: 0; }
  .tl21-detail-shortcuts a:nth-child(-n+2) { border-bottom: 1px solid var(--tl21-line); }
  .tl21-detail-columns { display: block; padding-block: 22px 35px; }
  .tl21-detail-sidebar { position: static; display: flex; overflow: auto; margin-bottom: 21px; padding: 0; }
  .tl21-detail-sidebar strong, .tl21-detail-sidebar span { display: none; }
  .tl21-detail-sidebar a { flex: 1 0 auto; justify-content: center; padding: 8px; white-space: nowrap; }
  .tl21-detail-section { padding-bottom: 23px; }
  .tl21-detail-section + .tl21-detail-section { padding-top: 23px; }
  .tl21-detail-section h2, .tl21-detail-policy-card h2 { font-size: 22px; }
  .tl21-detail-cardgrid, .tl21-detail-featuregrid { gap: 10px; margin-top: 14px; }
  .tl21-detail-cardgrid { grid-template-columns: 1fr; }
  .tl21-detail-featuregrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tl21-detail-card, .tl21-detail-featuregrid article { padding: 14px; }
  .tl21-detail-about-nav { position: static; justify-content: stretch; }
  .tl21-detail-about-nav a { flex: 1 0 auto; padding: 11px 5px; text-align: center; }
  .tl21-detail-about { padding-block: 24px 36px; }
  .tl21-detail-about .tl21-detail-section { scroll-margin-top: 14px; }
  .tl21-detail-profile-copy { padding: 17px; }
  .tl21-detail-profile-copy h3 { font-size: 19px; }
  .tl21-detail-profile-points { gap: 10px; }
  .tl21-detail-profile-points article { padding: 12px; }
  .tl21-detail-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tl21-detail-policy { padding-block: 21px 35px; }
  .tl21-detail-policy-card { padding: 17px 15px; }
}

@media (max-width: 360px) {
  .tl21-detail-featuregrid, .tl21-detail-profile-points { grid-template-columns: 1fr; }
}