/* ================================================================ tool pages (Family B)
   The tool reviews (/en/tools/…): their own design — Geist text, Hanuman headings. One template for all
   eight; each page sets its colours on <body> from the theme in its YAML (--accent, --btn, --band …).
   Measured on the live tool pages, 4 Oct 2026. Nav, contact form and footer come from home.css. */
.tool-page{--accent:#037737;--btn:rgb(10,122,59);--band:var(--accent);--band-ink:#fff;--talk:var(--btn)}
html,.tool-page,.tool-page #main{background:#fff}
.t-sec{width:100%;display:flex;flex-direction:column;align-items:center;padding:70px;background:#fff}
.t-in{width:100%;max-width:1200px;display:flex;flex-direction:column;align-items:stretch;gap:40px}
.t-in>*{align-self:stretch}
.t-sec p{white-space:pre-wrap}
.t-sec strong{font-weight:700}
.tc-glass strong,.tc-glass-w strong{font-weight:600}
.t-sec .hl{color:var(--accent)}
br.d{display:none}
@media (min-width:1200px){br.d{display:inline}}

/* intro */
.t-intro{padding:150px 70px 70px}
.t-intro .t-in{gap:50px}
.t-intro-head{display:flex;flex-direction:column;gap:40px}
.t-intro-head>.t-paras{margin-top:calc(var(--cgap,40px) - 40px)}
.t-eyebrow{display:flex;flex-direction:column;gap:6px}
.t-eyebrow>p:first-child{max-width:800px;font:700 18px/21.6px "Geist",sans-serif;color:var(--accent)}
.t-disclosure{max-width:800px;font:400 14px/1.45 "Geist",sans-serif;color:#444}
.t-disclosure strong{font-weight:600;color:#222}   /* T1 (12 Oct): labelled, 14px, 9.7:1 */
.t-rnote{margin:-6px 0 0;font:500 12px/1.4 "Geist",sans-serif;color:#555;text-align:center}   /* F2: ratings date + sources */
.t-title{display:flex;flex-direction:column;gap:28px}
.t-title h1{max-width:800px;margin:0;font:500 var(--d-title-fs,38px)/var(--d-title-lh,45.6px) "Hanuman",serif;color:var(--title,#171717)}
.t-callout{width:fit-content;max-width:800px;display:flex;align-items:center;gap:10px;padding:15px;background:#F2F2F2;border-radius:7px}
.t-badge{width:20px;height:20px;flex:0 0 auto;display:block}
.t-callout p{flex:1 1 0;font:400 var(--d-callout-fs,15px)/var(--d-callout-lh,18px) "Geist",sans-serif;color:#000}
.t-paras{max-width:800px;display:flex;flex-direction:column;gap:var(--para-gap,18px)}
.t-paras.just p,.t-lead.just p{text-align:justify}
.t-paras.unjust p{text-align:left}
/* Hungarian: longer words open wide gaps in justified text — let the browser hyphenate those paragraphs */
html[lang="hu"] .t-paras.just p,html[lang="hu"] .t-lead.just p,html[lang="hu"] .t-intro .t-paras p{-webkit-hyphens:auto;hyphens:auto}
.t-paras p{font:400 var(--pfs,15px)/var(--plh,18px) "Geist",sans-serif;color:#000}
.t-intro .t-paras p{text-align:justify;font-size:var(--d-paras-fs,15px);line-height:var(--d-paras-lh,18px)}
.t-ratings{display:flex;justify-content:center;align-items:center;gap:10px}
.t-rating{flex:0 1 293px;min-width:0;height:133px;display:flex;justify-content:center;align-items:center;gap:17px;padding:17px;background:#F2F2F2;border-radius:10px}
.t-score{width:140px;display:flex;flex-direction:column;align-items:center;gap:10px}
.t-score .n{font:500 36px/28.8px "Geist",sans-serif;color:#000}
.t-score .l{font:400 16px/19.2px "Geist",sans-serif;color:#000}
.t-logo{width:102px;height:99px;flex:0 0 auto;display:flex;justify-content:center;align-items:center;background:#fff;border-radius:10px}
.t-cta{display:flex;flex-direction:column;align-items:flex-start}
.t-btn{width:max-content;min-width:150px;height:46.8px;display:flex;justify-content:center;align-items:center;padding:15px 20px;background:var(--btn);border-radius:5px}
.t-intro .t-btn{background:var(--btn-intro,var(--btn))}
.t-btn p{font:500 14px/16.8px "Inter",sans-serif;color:#fff;white-space:pre}
/* HOVER H2 (Adam, 13 Oct): on hover/keyboard focus the label slides 9px left and a → fades in on the right, inside the
   button's own padding, so the button never changes size (no overflow, nothing around it moves) */
.t-btn{position:relative}
/* BR-BAND / BR-TALK (Adam, 13 Oct): a page can give the button on its coloured band, and the "Talk to our team" bar on its
   help section, their own colours (theme band_btn / band_btn_ink, help_talk / help_talk_ink); Brevo: white with green text */
.t-band .t-btn{background:var(--band-btn,var(--btn))}
.t-band .t-btn p,.t-band .t-btn::after{color:var(--band-btn-ink,#fff)}
.t-help .t-talk{background:var(--help-talk,var(--talk))}
.t-help .t-talk p,.t-help .t-talk strong{color:var(--help-talk-ink,#fff)}
.t-help .t-talk .ic-headset{background:var(--help-talk-ink,#fff)}
.t-btn p{transition:transform .2s ease}
.t-btn::after{content:"\2192";position:absolute;right:9px;top:50%;font:500 14px/1 "Inter",sans-serif;color:#fff;opacity:0;transform:translate(-6px,-50%);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.t-btn:focus-visible p{transform:translateX(-9px)}
.t-btn:focus-visible::after{opacity:1;transform:translate(0,-50%)}
@media (hover:hover){.t-btn:hover p{transform:translateX(-9px)}.t-btn:hover::after{opacity:1;transform:translate(0,-50%)}}
@media (prefers-reduced-motion:reduce){.t-btn p,.t-btn::after{transition:none}}

/* headings */
.t-head{display:flex;flex-direction:column;gap:28px}
.t-head h2{max-width:800px;margin:0;overflow-wrap:break-word;font:400 30px/36px "Hanuman",serif;color:#000}
.t-lead{max-width:800px;display:flex;flex-direction:column;gap:18px}
.t-lead p{font:400 var(--pfs,15px)/var(--plh,18px) "Geist",sans-serif;color:#000}

/* green bands */
.t-band{background:var(--band)}
.t-help{background:var(--help,var(--band));padding:70px 70px 75px}
.t-band .t-head h2,.t-band .t-lead p,.t-band .t-paras p,.t-help .t-head h2,.t-help .t-paras p{color:var(--band-ink)}
.t-help .t-head h2{font-weight:500}

/* cards */
.t-cards{display:flex;flex-direction:column;gap:10px}
.t-cards-row{display:flex;justify-content:center;align-items:flex-start;gap:10px}
.t-card{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:15px;padding:30px;border-radius:10px}
.t-card-in{display:flex;flex-direction:column;gap:30px}
.t-card-title{font:600 14px/16.8px "Geist",sans-serif;color:#000}
.t-list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.t-list li,.t-row{display:flex;align-items:center;gap:16px}
.t-row.top{align-items:flex-start}
.t-list p,.t-row p{flex:1 1 0;min-width:0;font:400 14px/16.8px "Geist",sans-serif;color:#000}
.t-pair{display:flex;flex-direction:column;gap:5px;padding-bottom:15px}
.t-pair:last-child{padding-bottom:0}
.tc-glass{background:rgba(242,242,242,.7)}
.tc-glass-w{background:rgba(255,255,255,.7)}
.tc-frost{background:rgba(255,255,255,.72)}
.tc-grey{background:#F2F2F2}
.tc-caution{background:#FAFAFA}
.tc-blue{background:rgb(217,228,252)}
.tc-green{background:rgb(234,250,225)}
.tc-caution .t-card-title{color:#C42E00}   /* N8 (Adam, 13 Oct): was rgb(221,52,1), 4.4:1 → 5.4:1 */
.tc-caution .t-list li{align-items:flex-start}
.t-features .tc-grey .t-list{gap:5px}
.t-features .t-cards-row{align-items:stretch}
.t-compare .t-card-title,.t-compare2 .t-card-title,.t-tips .t-card-title{font-size:16px;line-height:19.2px}
.t-compare .t-card,.t-compare2 .t-card,.t-tips .t-card{gap:30px}

/* icons: Framer's material icons, as masks so they take the card's colour */
.ic{flex:0 0 auto;width:21px;height:21px;display:block;background:rgb(0,71,222);-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.ic-chevron{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(8.295 6)' d='M 1.41 0 L 0 1.41 L 4.58 6 L 0 10.59 L 1.41 12 L 7.41 6 Z'/%3E%3C/svg%3E")}
.ic-check{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(3.205 5.295)' d='M 5.59 10.58 L 1.42 6.41 L 0 7.82 L 5.59 13.41 L 17.59 1.41 L 16.18 0 Z'/%3E%3C/svg%3E")}
.ic-cross{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(5 5)' d='M 14 1.41 L 12.59 0 L 7 5.59 L 1.41 0 L 0 1.41 L 5.59 7 L 0 12.59 L 1.41 14 L 7 8.41 L 12.59 14 L 14 12.59 L 8.41 7 Z'/%3E%3C/svg%3E");background:rgb(221,52,1)!important}
.ic-xcircle{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(2 2)' d='M 10 0 C 4.47 0 0 4.47 0 10 C 0 15.53 4.47 20 10 20 C 15.53 20 20 15.53 20 10 C 20 4.47 15.53 0 10 0 Z M 10 18 C 5.59 18 2 14.41 2 10 C 2 5.59 5.59 2 10 2 C 14.41 2 18 5.59 18 10 C 18 14.41 14.41 18 10 18 Z M 13.59 5 L 10 8.59 L 6.41 5 L 5 6.41 L 8.59 10 L 5 13.59 L 6.41 15 L 10 11.41 L 13.59 15 L 15 13.59 L 11.41 10 L 15 6.41 Z'/%3E%3C/svg%3E");background:rgba(255,0,0,.7)}
.ic-ccircle,.ic-circle-check{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(2 2)' d='M 10 0 C 4.48 0 0 4.48 0 10 C 0 15.52 4.48 20 10 20 C 15.52 20 20 15.52 20 10 C 20 4.48 15.52 0 10 0 Z M 10 18 C 5.59 18 2 14.41 2 10 C 2 5.59 5.59 2 10 2 C 14.41 2 18 5.59 18 10 C 18 14.41 14.41 18 10 18 Z M 14.59 5.58 L 8 12.17 L 5.41 9.59 L 4 11 L 8 15 L 16 7 Z'/%3E%3C/svg%3E")}
.ic-ccircle{background:rgb(0,204,61)}
.ic-rocket{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(2 2)' d='M 4 12.999 C 3.17 12.999 2.42 13.339 1.88 13.879 C 0.7 15.059 0 19.999 0 19.999 C 0 19.999 4.94 19.299 6.12 18.119 C 6.66 17.579 7 16.829 7 15.999 C 7 14.339 5.66 12.999 4 12.999 Z M 4.71 16.709 C 4.43 16.989 2.54 17.469 2.54 17.469 C 2.54 17.469 3.01 15.589 3.3 15.299 C 3.47 15.109 3.72 14.999 4 14.999 C 4.55 14.999 5 15.449 5 15.999 C 5 16.279 4.89 16.529 4.71 16.709 Z M 15.42 11.649 C 21.78 5.289 19.66 0.339 19.66 0.339 C 19.66 0.339 14.71 -1.781 8.35 4.579 L 5.86 4.079 C 5.21 3.949 4.53 4.159 4.05 4.629 L 0 8.689 L 5 10.829 L 9.17 14.999 L 11.31 19.999 L 15.36 15.949 C 15.83 15.479 16.04 14.799 15.91 14.139 Z M 5.41 8.829 L 3.5 8.009 L 5.47 6.039 L 6.91 6.329 C 6.34 7.159 5.83 8.029 5.41 8.829 Z M 11.99 16.499 L 11.17 14.589 C 11.97 14.169 12.84 13.659 13.66 13.089 L 13.95 14.529 Z M 14 10.239 C 12.68 11.559 10.62 12.639 9.96 12.969 L 7.03 10.039 C 7.35 9.389 8.43 7.329 9.76 5.999 C 14.44 1.319 17.99 2.009 17.99 2.009 C 17.99 2.009 18.68 5.559 14 10.239 Z M 13 8.999 C 14.1 8.999 15 8.099 15 6.999 C 15 5.899 14.1 4.999 13 4.999 C 11.9 4.999 11 5.899 11 6.999 C 11 8.099 11.9 8.999 13 8.999 Z'/%3E%3C/svg%3E")}
.ic-headset{width:24px;height:24px;background:#fff;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(3 3)' d='M 9 0 C 4.03 0 0 4.03 0 9 L 0 16 C 0 17.1 0.9 18 2 18 L 6 18 L 6 10 L 2 10 L 2 9 C 2 5.13 5.13 2 9 2 C 12.87 2 16 5.13 16 9 L 16 10 L 12 10 L 12 18 L 16 18 C 17.1 18 18 17.1 18 16 L 18 9 C 18 4.03 13.97 0 9 0 Z M 4 12 L 4 16 L 2 16 L 2 12 Z M 16 16 L 14 16 L 14 12 L 16 12 Z'/%3E%3C/svg%3E")}
.tc-green .ic{background:rgb(57,138,10)}

/* screenshot tickers — move right at 30 px/s, edges fade (as on live) */
.t-ticker{height:288px;display:flex;align-items:center;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 12.5%,#000 87.5%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,#000 12.5%,#000 87.5%,transparent 100%)}
.t-track{display:flex;align-items:center;gap:var(--tgap,30px);width:max-content;animation:t-tick var(--dur) linear infinite}
.t-set{display:contents}
@keyframes t-tick{from{transform:translateX(calc(-1 * var(--setw)))}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.t-track{animation:none}}
/* N9 (Adam, 13 Oct): screenshot strips stop under the mouse, on keyboard focus, and with the pause button (WCAG 2.2.2) */
.t-tick-wrap{position:relative}
.t-tick-wrap:hover .t-track,.t-tick-wrap:focus-within .t-track,.t-tick-wrap.is-paused .t-track{animation-play-state:paused}
.t-pause{position:absolute;right:12px;bottom:12px;z-index:2;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.55);cursor:pointer;display:grid;place-items:center}
.t-pause span{width:10px;height:12px;border-left:3px solid #fff;border-right:3px solid #fff;box-sizing:border-box}
.t-pause[aria-pressed="true"] span{width:0;height:0;border:0;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.t-pause:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px rgba(0,0,0,.55)}
@media (prefers-reduced-motion:reduce){.t-pause{display:none}}
.t-shot{flex:0 0 auto;padding:10px;border-radius:20px}
.t-ticker-light .t-shot{background:rgba(255,255,255,.1)}
.t-ticker-grey .t-shot{background:rgba(171,171,171,.1)}
.t-ticker-pale .t-shot{background:rgba(235,235,235,.15)}
.t-ticker-bare .t-shot{padding:0}
.t-shot img{display:block;border-radius:10px;object-fit:cover}
.t-rtick{padding:10px 0}
.t-rtick .t-score{width:105px}

/* carousels (QuickBooks, Gong): one screenshot at a time, previous / next, dots */
.t-carousel{position:relative;overflow:hidden}
.t-car-track{display:flex;gap:10px;height:100%;margin:0;padding:0;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.t-car-track::-webkit-scrollbar{display:none}
.t-car-track li{flex:0 0 100%;height:100%;scroll-snap-align:center}
.t-car-img{width:100%!important;height:100%!important;display:block;object-fit:cover;border-radius:10px}
.t-car-btn{position:absolute;top:50%;width:40px;height:40px;margin-top:-20px;padding:0;border:0;border-radius:40px;background:rgba(0,0,0,.2);cursor:pointer;transition:opacity .2s}
.t-car-btn svg{width:40px;height:40px;display:block}
.t-car-btn.prev{left:20px}.t-car-btn.next{right:20px}
.t-car-btn.off{opacity:0;pointer-events:none}
.t-car-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center}
.t-car-dots button{width:24px;height:30px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.t-car-dots span{width:10px;height:10px;border-radius:50%;background:#fff;opacity:.5}
.t-car-dots button.on span{opacity:1}

/* sections */
.t-features{padding:70px 70px 20px}
.t-features .t-head+.t-cards{margin-top:0}
.t-gallery{padding:0 70px 40px}
.t-gallery .t-in{gap:var(--sgap,30px)}
.t-compare{padding:20px 70px 40px}
.t-compare2{padding:30px 70px 40px}
.t-tips{padding:30px 70px 70px}
.t-talk{width:fit-content;max-width:800px;display:flex;align-items:center;gap:10px;padding:15px;background:var(--talk);border-radius:7px}
.t-talk p{font:400 var(--d-talk-fs,15px)/var(--d-talk-lh,18px) "Geist",sans-serif;color:#fff}
.tool-page #contact{padding:0}

/* desktop: cards keep the live heights (one height for the whole features grid) */
@media (min-width:1200px){
  /* panels (Clay): the coloured band and help sections are rounded 1200 px panels on white */
  .t-panels .t-band,.t-panels .t-help{max-width:1200px;margin:0 auto;border-radius:10px}
  .t-panels .t-band .t-in,.t-panels .t-help .t-in{max-width:1060px}
  .t-card[style*="--h:"]{height:var(--h)}
  .t-cards-row[style*="--rh"]{min-height:var(--rh)}
  .t-talk p{white-space:pre}
  html[lang="hu"] .t-talk p{white-space:normal}   /* Hungarian lines run longer: wrap inside the 800 px pill */
  /* features grid: every card the same height (as on live), sized by the fullest card, never below live's 194 px */
  .t-features .t-cards:not(:has(.tc-note)){display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(194px,1fr);gap:10px}
  .t-features .t-cards:not(:has(.tc-note)) .t-cards-row{display:contents}
  .t-features .t-card[style*="--h:"]{height:auto}
}

/* tablet (810–1199): one column of text, cards two-up (the first green band's cards stacked) */
@media (max-width:1199.98px){
  .t-intro{padding:160px 70px 70px}
  .t-intro .t-in{gap:40px}
  .t-title h1{font-size:var(--t-title-fs,37px);line-height:var(--t-title-lh,44.4px)}
  .t-callout p{font-size:var(--t-callout-fs,15px);line-height:var(--t-callout-lh,18px)}
  .t-intro .t-paras p{font-size:var(--t-paras-fs,15px);line-height:var(--t-paras-lh,18px)}
  .t-talk p{font-size:var(--t-talk-fs,15px);line-height:var(--t-talk-lh,18px)}
  .t-ratings{flex-wrap:wrap}
  .t-rating{flex:0 0 auto}
  .t-score{width:auto}
  .t-cta{align-items:center}
  .t-band .t-cards-row{flex-direction:column}
  .t-band .t-card{flex:0 0 auto;width:100%}
  .t-features{padding:70px 70px 30px}
  .t-features .t-cards-row{align-items:stretch}
  .t-features:has(+.t-help){padding-bottom:70px}
  .t-gallery{padding:0 70px 20px}
  .t-compare{padding:30px 70px 40px}
  .t-talk{width:var(--talk-w-t,100%);max-width:100%}
  .t-callout{width:100%}
  .tool-page #contact{padding:0 0 10px}
  .tc-caution .t-list p{font-size:13px;line-height:15.6px}
  .t-card{min-height:var(--ht,0)}
}
/* phone (≤809): everything one column */
@media (max-width:809.98px){
  .t-sec{padding:50px 20px}
  .t-intro{padding:120px 20px 50px}
  .t-intro .t-in{gap:50px}
  .t-eyebrow>p:first-child{font-size:16px;line-height:19.2px}
  .t-title h1{font-size:var(--p-title-fs,26px);line-height:var(--p-title-lh,33.8px)}
  .t-callout{gap:22px;padding:20px}
  .t-callout p{font-size:var(--p-callout-fs,13px);line-height:var(--p-callout-lh,16.9px)}
  .t-intro .t-paras p{text-align:left;font-size:var(--p-paras-fs,15px);line-height:var(--p-paras-lh,19.5px)}
  .t-head h2,.t-help .t-head h2{font-size:23px;line-height:27.6px;font-weight:600}
  .t-ratings{flex-direction:column;flex-wrap:nowrap}
  .t-ratings .t-rating{width:100%;gap:36px}
  .t-cta{align-items:stretch}
  .t-btn{width:100%}
  .t-cards-row{flex-direction:column}
  .t-card{flex:0 0 auto;width:100%}
  .t-features .t-in,.t-tips .t-in{gap:40px}
  .t-gallery{padding:0 20px 10px}
  .t-gallery .t-in{gap:0}
  .t-gallery .t-cta{padding-top:43px}
  .t-compare{padding:50px 20px}
  .t-compare2{padding:0 20px}
  .t-tips{padding:50px 20px}
  .t-features:has(+.t-help){padding-bottom:50px}
  .t-help{padding:50px 20px}
  .t-talk{width:auto}
  .t-talk p{max-width:none;font-size:var(--p-talk-fs,14px);line-height:var(--p-talk-lh,16.8px)}
  .tool-page #contact{padding:0}
  .tc-caution .t-list p{font-size:14px;line-height:16.8px}
  .t-card{min-height:var(--hp,0)}
}

/* Gong: compact callout and pill, a checklist card with line icons, a grouped feature list */
.t-callout.compact{padding:5px 15px}
.t-pill{width:fit-content;display:flex;align-items:center;gap:10px;padding:5px 15px;background:rgb(74,74,74);border-radius:7px}
.t-pill p{font:400 15px/18px "Geist",sans-serif;color:#fff}
.t-pill .ic{width:24px;height:24px;background:#fff}
.ic-sparkle{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(1 3)' d='M 13.06 7.94 L 11 7 L 13.06 6.06 L 14 4 L 14.94 6.06 L 17 7 L 14.94 7.94 L 14 10 Z M 3 12 L 3.94 9.94 L 6 9 L 3.94 8.06 L 3 6 L 2.06 8.06 L 0 9 L 2.06 9.94 Z M 7.5 7 L 8.59 4.59 L 11 3.5 L 8.59 2.41 L 7.5 0 L 6.41 2.41 L 4 3.5 L 6.41 4.59 Z M 3.5 18.5 L 9.5 12.49 L 13.5 16.49 L 22 6.93 L 20.59 5.52 L 13.5 13.49 L 9.5 9.49 L 2 17 Z'/%3E%3C/svg%3E")}
.tc-note{max-width:800px;background:#FAFAFA}
.t-cards-row:has(.tc-note){justify-content:flex-start}
.t-paras+.t-cards:has(.tc-note){margin-top:-12px}
.tc-note .t-card-in{gap:0}
.tc-note .t-list p{font-weight:500}
.tc-note .ic{width:24px;height:24px;background:#000}
.ic-video{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(4.75 6.75)' d='M 10.5 3.4 L 14.5 1 L 14.5 9.5 L 10.5 7.1 M 0 2 C 0 0.895 0.895 0 2 0 L 8.5 0 C 9.605 0 10.5 0.895 10.5 2 L 10.5 8.5 C 10.5 9.605 9.605 10.5 8.5 10.5 L 2 10.5 C 0.895 10.5 0 9.605 0 8.5 Z'/%3E%3C/svg%3E")}
.ic-user-check{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(8.75 4.75)' stroke-width='1.5' d='M 0 3.25 C 0 1.455 1.455 0 3.25 0 C 5.045 0 6.5 1.455 6.5 3.25 C 6.5 5.045 5.045 6.5 3.25 6.5 C 1.455 6.5 0 5.045 0 3.25 Z'/%3E%3Cpath transform='translate(5.297 14)' stroke-width='1.5' d='M 6.953 5.25 L 1.653 5.25 C 0.473 5.25 -0.407 4.21 0.194 3.195 C 1.066 1.723 2.943 0 6.953 0'/%3E%3Cpath transform='translate(14.75 14.75)' stroke-width='1.5' d='M 0 3 L 1.25 4.5 L 4.5 0'/%3E%3C/svg%3E")}
.ic-message{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(4.75 4.75)' stroke-width='1.5' d='M 0 2 C 0 0.895 0.895 0 2 0 L 12.5 0 C 13.605 0 14.5 0.895 14.5 2 L 14.5 9.5 C 14.5 10.605 13.605 11.5 12.5 11.5 L 9.875 11.5 L 7.25 14.5 L 4.625 11.5 L 2 11.5 C 0.895 11.5 0 10.605 0 9.5 Z'/%3E%3Cpath transform='translate(8.5 10.5)' stroke-width='1' d='M 1 0.5 C 1 0.776 0.776 1 0.5 1 C 0.224 1 0 0.776 0 0.5 C 0 0.224 0.224 0 0.5 0 C 0.776 0 1 0.224 1 0.5 Z'/%3E%3Cpath transform='translate(11.5 10.5)' stroke-width='1' d='M 1 0.5 C 1 0.776 0.776 1 0.5 1 C 0.224 1 0 0.776 0 0.5 C 0 0.224 0.224 0 0.5 0 C 0.776 0 1 0.224 1 0.5 Z'/%3E%3Cpath transform='translate(14.5 10.5)' stroke-width='1' d='M 1 0.5 C 1 0.776 0.776 1 0.5 1 C 0.224 1 0 0.776 0 0.5 C 0 0.224 0.224 0 0.5 0 C 0.776 0 1 0.224 1 0.5 Z'/%3E%3C/svg%3E")}
.ic-medal{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(5.75 4.75)' stroke-width='1.5' d='M 8.5 4 L 12.5 0 L 0 0 L 4 4'/%3E%3Cpath transform='translate(6.75 8.75)' stroke-width='1.5' d='M 0 5.25 C 0 2.351 2.351 0 5.25 0 C 8.149 0 10.5 2.351 10.5 5.25 C 10.5 8.149 8.149 10.5 5.25 10.5 C 2.351 10.5 0 8.149 0 5.25 Z'/%3E%3C/svg%3E")}
.t-groups{display:grid;grid-template-columns:1fr 1fr;gap:55px 0;padding:30px}
.t-group{display:flex;flex-direction:column;gap:30px}
.t-groups .t-list{gap:5px}
.t-groups .t-card-title{font-weight:500}
.t-problems .t-head{gap:28px}
.t-problems .t-in{gap:40px}
@media (min-width:1200px){.t-sec[style*="--pad"]{padding:var(--pad)}}
@media (max-width:809.98px){.t-groups{grid-template-columns:1fr}}

/* a card whose list spacing differs on live (set from the YAML) */
.t-card[style*="--lgap"] .t-list{gap:var(--lgap)}