/* === DREAMY — popisky Technogel® (prémiová gelová řada)  ·  v1 · 2026-10-09 ===
 * Nadstavba nad popisky.css: popisek začíná <div class="dpd dpd--tg">.
 * Záhlaví (za popisky.css): <link rel="stylesheet" href="/user/documents/upload/styles/popisky-technogel.css?v=1">
 * Vše je pod .dpd--tg → Dorelan, kolekci Dreamy ani zbytek webu neovlivní.
 * Barvy: noční modrá Technogel + gelová modř; růžová Dreamy jen v hlavní výzvě. Nadpisy patkovým písmem (systémové, nic se nestahuje).
 */
.dpd.dpd--tg { --tg-navy: #0f1c2e; --tg-navy-2: #1a2d47; --tg-gel: #1f9ed1; --tg-gel-2: #137cab; --tg-ice: #bfe6f4; --tg-mist: #f2f6f9; --tg-line: #e0e7ee;
  --pink: #137cab; --pink-2: #0d5f85; --blush: #eef4f8; --blush-2: #dbe7ef; --line: #e0e7ee; --ink: #0f1c2e; --body: #3a4656; --muted: #6f7b8a;
  --tg-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif; }
.dpd.dpd--tg h2 { font-family: var(--tg-serif) !important; font-weight: 400 !important; font-size: 38px !important; line-height: 1.14 !important; letter-spacing: -.005em; }
.dpd.dpd--tg h2 em { font-style: italic; color: var(--tg-gel-2); }
.dpd--tg .dpd-eyebrow { color: var(--tg-gel-2); letter-spacing: .24em; }
.dpd--tg .dpd-sec { padding: 64px 0; }
.dpd--tg .dpd-sec:first-child { padding-top: 16px; }

/* 1) Úvod — tmavý panel + produkt na světlém podstavci */
.tg-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); border-radius: 28px; overflow: hidden; background: var(--tg-navy); }
.tg-hero-txt { position: relative; padding: 58px 52px 44px; display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(115deg, rgba(15,28,46,.97) 0%, rgba(15,28,46,.9) 55%, rgba(19,52,82,.82) 100%), url(/user/documents/upload/Fotky_web_update/technogel-gel-detail.jpg) center / cover; }
.dpd p.tg-kicker { display: flex; align-items: center; gap: 12px; font-size: 12px !important; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; color: var(--tg-ice) !important; margin-bottom: 18px !important; }
.tg-kicker::before { content: ""; width: 34px; height: 1px; background: var(--tg-ice); opacity: .7; }
.dpd.dpd--tg .tg-hero h2 { color: #fff !important; font-size: 46px !important; line-height: 1.08 !important; }
.dpd.dpd--tg .tg-hero h2 em { color: #7fd3f0; }
.dpd p.tg-hero-lead { color: rgba(226,236,245,.86) !important; font-size: 17px !important; line-height: 1.65 !important; max-width: 46ch; margin-top: 6px !important; }
.tg-stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; column-gap: 18px; margin-top: 34px !important; border-top: 1px solid rgba(255,255,255,.14); }
.tg-stats li { padding: 18px 0 0; max-width: 17ch; }
.tg-stats b { display: block; font-family: var(--tg-serif); font-weight: 400; font-size: 30px; line-height: 1; color: #fff; white-space: nowrap; }
.tg-stats b small { font-family: Rubik, sans-serif; font-size: 14px; color: var(--tg-ice); margin-left: 3px; }
.tg-stats span { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: rgba(191,230,244,.8); }
.tg-hero-img { position: relative; display: flex; align-items: center; justify-content: center; padding: 40px 28px 64px; min-height: 380px;
  background: radial-gradient(ellipse at 50% 42%, #ffffff 0%, #f1f5f8 46%, #d9e3eb 100%); }
.dpd .tg-hero-img img { width: 100%; max-width: 560px; height: auto !important; mix-blend-mode: multiply; }
.dpd p.tg-plate { position: absolute; left: 24px; right: 24px; bottom: 20px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 11.5px !important; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--tg-navy-2) !important; }
.tg-plate span + span { color: var(--tg-gel-2); }

/* 2) Gel vs. pěna — tři vzorky */
.tg-vs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px !important; }
.tg-vs > li { display: flex; flex-direction: column; border-radius: 22px; border: 1px solid var(--tg-line); background: #fff; overflow: hidden; }
.tg-sw { height: 128px; font-size: 0; line-height: 0; }
.tg-sw--foam { background: radial-gradient(circle, rgba(0,0,0,.07) 1.6px, transparent 2px) 0 0 / 11px 11px, radial-gradient(circle, rgba(0,0,0,.05) 1.2px, transparent 1.6px) 5px 6px / 13px 13px, #f3efe8; }
.tg-sw--mix { background: radial-gradient(circle, #5bbfe6 2.6px, transparent 3.2px) 3px 4px / 23px 19px, radial-gradient(circle, #8fd3ee 2px, transparent 2.6px) 13px 12px / 29px 25px, radial-gradient(circle, rgba(0,0,0,.07) 1.6px, transparent 2px) 0 0 / 11px 11px, #f3efe8; }
.tg-sw--gel { background: linear-gradient(90deg, rgba(255,255,255,.55) 0 2px, transparent 2px) 0 0 / 22px 22px, linear-gradient(0deg, rgba(255,255,255,.55) 0 2px, transparent 2px) 0 0 / 22px 22px, radial-gradient(ellipse at 30% 20%, #8fdcf5 0%, #2aa8db 45%, #137cab 100%); }
.tg-vs-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.dpd p.tg-vs-tag { font-size: 11px !important; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--muted) !important; margin-bottom: 6px !important; }
.tg-vs-body h3 { font-family: var(--tg-serif) !important; font-weight: 400 !important; font-size: 23px !important; }
.tg-vs-body p { font-size: 15px; line-height: 1.55; margin-top: 8px !important; }
.tg-vs-body ul { margin-top: 16px !important; border-top: 1px solid var(--tg-line); }
.tg-vs-body ul li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--tg-line); font-size: 14px; }
.tg-vs-body ul li span:first-child { color: var(--muted); }
.tg-vs-body ul li span:last-child { color: var(--ink); font-weight: 600; text-align: right; }
.tg-vs > li.is-gel { background: var(--tg-navy); border-color: var(--tg-navy); }
.dpd .tg-vs > li.is-gel h3 { color: #fff !important; }
.tg-vs > li.is-gel p, .tg-vs > li.is-gel ul li span:first-child { color: rgba(226,236,245,.8) !important; }
.tg-vs > li.is-gel ul, .tg-vs > li.is-gel ul li { border-color: rgba(255,255,255,.12); }
.tg-vs > li.is-gel ul li span:last-child { color: #7fd3f0; }
.dpd .tg-vs > li.is-gel p.tg-vs-tag { color: #7fd3f0 !important; }

/* 3) 3D přizpůsobení — animovaná ukázka (buňky = <i>&nbsp;</i>) */
.tg-demos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 30px !important; }
.tg-demo { padding: 26px 24px 22px; border-radius: 22px; background: var(--tg-mist); }
.tg-demo.is-gel { background: var(--tg-navy); }
.tg-stage { position: relative; height: 150px; margin-bottom: 18px; }
.tg-head { position: absolute; left: 50%; top: 0; width: 74px; height: 74px; margin-left: -37px; border-radius: 50%; font-size: 0; font-style: normal;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #e8dcd2 60%, #cdbcae 100%); box-shadow: 0 10px 22px -12px rgba(0,0,0,.45); }
.tg-row { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; gap: 4px; align-items: flex-end; }
.tg-row i { flex: 1; height: 100%; border-radius: 6px 6px 3px 3px; font-size: 0; font-style: normal; transform-origin: 50% 100%; }
.tg-demo:not(.is-gel) .tg-row i { background: radial-gradient(circle, rgba(0,0,0,.08) 1.4px, transparent 1.8px) 0 0 / 8px 8px, #e7dfd4; }
.tg-demo.is-gel .tg-row i { background: linear-gradient(180deg, #8fdcf5 0%, #2aa8db 55%, #137cab 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.dpd .tg-demo h3 { font-size: 18px !important; }
.dpd .tg-demo.is-gel h3 { color: #fff !important; }
.tg-demo p { font-size: 15px; line-height: 1.55; }
.tg-demo.is-gel p { color: rgba(226,236,245,.82); }
.dpd.dpd-js .is-in .tg-head { animation: tgPress 4.2s cubic-bezier(.45,0,.2,1) infinite; }
.dpd.dpd-js .is-in .tg-demo:not(.is-gel) .tg-row i:nth-child(n+4):nth-child(-n+6) { animation: tgFoam 4.2s cubic-bezier(.45,0,.2,1) infinite; }
.dpd.dpd-js .is-in .tg-demo.is-gel .tg-row i:nth-child(5) { animation: tgG0 4.2s cubic-bezier(.45,0,.2,1) infinite; }
.dpd.dpd-js .is-in .tg-demo.is-gel .tg-row i:nth-child(4) { --x: -4px; animation: tgG1 4.2s cubic-bezier(.45,0,.2,1) infinite; }
.dpd.dpd-js .is-in .tg-demo.is-gel .tg-row i:nth-child(6) { --x: 4px; animation: tgG1 4.2s cubic-bezier(.45,0,.2,1) infinite; }
.dpd.dpd-js .is-in .tg-demo.is-gel .tg-row i:nth-child(3) { --x: -3px; animation: tgG2 4.2s cubic-bezier(.45,0,.2,1) infinite; }
.dpd.dpd-js .is-in .tg-demo.is-gel .tg-row i:nth-child(7) { --x: 3px; animation: tgG2 4.2s cubic-bezier(.45,0,.2,1) infinite; }
.dpd.dpd-js .is-in .tg-demo.is-gel .tg-row i:nth-child(2) { --x: -2px; animation: tgG3 4.2s cubic-bezier(.45,0,.2,1) infinite; }
.dpd.dpd-js .is-in .tg-demo.is-gel .tg-row i:nth-child(8) { --x: 2px; animation: tgG3 4.2s cubic-bezier(.45,0,.2,1) infinite; }
@keyframes tgPress { 0%, 12% { transform: translateY(0); } 42%, 72% { transform: translateY(42px); } 100% { transform: translateY(0); } }
@keyframes tgFoam { 0%, 12% { transform: none; } 42%, 72% { transform: scaleY(.56); } 100% { transform: none; } }
@keyframes tgG0 { 0%, 12% { transform: none; } 42%, 72% { transform: scaleY(.56); } 100% { transform: none; } }
@keyframes tgG1 { 0%, 12% { transform: none; } 42%, 72% { transform: translateX(var(--x)) scaleY(.7); } 100% { transform: none; } }
@keyframes tgG2 { 0%, 12% { transform: none; } 42%, 72% { transform: translateX(var(--x)) scaleY(.9); } 100% { transform: none; } }
@keyframes tgG3 { 0%, 12% { transform: none; } 42%, 72% { transform: translateX(var(--x)) scaleY(1.05); } 100% { transform: none; } }
/* 4) Tmavý panel (chlad, výroba) */
.tg-dark { border-radius: 28px; background: var(--tg-navy); padding: 52px 50px; color: rgba(226,236,245,.86); }
.dpd .tg-dark h2, .dpd .tg-dark h3 { color: #fff !important; }
.dpd.dpd--tg .tg-dark h2 em { color: #7fd3f0; }
.dpd--tg .tg-dark .dpd-eyebrow { color: #7fd3f0; }
.dpd .tg-dark p.dpd-lead { color: rgba(226,236,245,.86) !important; }
.tg-dark .dpd-media { background: #fff; }
.tg-points { display: grid; gap: 16px; margin-top: 24px !important; counter-reset: tg; }
.tg-points li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.tg-points li > i { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(127,211,240,.5); display: flex; align-items: center; justify-content: center; font: 400 18px var(--tg-serif); font-style: italic; color: #7fd3f0; }
.tg-points b { display: block; color: #fff; font-weight: 600; font-size: 16px; margin-bottom: 2px; }
.tg-points p { font-size: 15px; line-height: 1.55; color: rgba(226,236,245,.8); }
.dpd p.tg-honest { margin-top: 22px !important; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.06); font-size: 13.5px !important; line-height: 1.55 !important; color: rgba(226,236,245,.82) !important; border-left: 3px solid #7fd3f0; }
.tg-honest b { color: #fff; font-weight: 600; }

/* 5) Příběh — časová osa */
.tg-time { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 30px !important; position: relative; }
.tg-time li { position: relative; padding: 26px 20px 0 0; border-top: 1px solid var(--tg-line); }
.tg-time li::after { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--tg-gel); box-shadow: 0 0 0 4px #fff; }
.tg-time b { display: block; font-family: var(--tg-serif); font-weight: 400; font-size: 36px; line-height: 1; color: var(--tg-navy); margin-bottom: 10px; }
.tg-time p { font-size: 15px; line-height: 1.55; }
.tg-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.tg-story figure { position: relative; }
.dpd p.tg-caption { margin-top: 10px !important; font-size: 13px !important; color: var(--muted) !important; font-style: italic; }

/* 6) Výška — sloupce v poměru výšek, každý je odkaz na danou výšku */
.tg-hs { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 10px; margin-top: 26px !important; align-items: end; }
.tg-h { position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: center; padding: 14px 10px 14px; border-radius: 16px; border: 1px solid var(--tg-line); background: #fff; transition: transform .25s, box-shadow .25s, border-color .25s; }
.tg-h:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -20px rgba(15,28,46,.6); border-color: #c9d8e4; }
.tg-bar { height: calc(var(--h) * 6px); margin: 0 auto 12px; width: 70%; border-radius: 10px 10px 6px 6px; font-size: 0; line-height: 0;
  background: linear-gradient(180deg, #7fd3f0 0 18%, #f1f5f8 18% 100%); border: 1px solid #d3e0ea; }
.tg-h b { display: block; font-family: var(--tg-serif); font-weight: 400; font-size: 24px; line-height: 1; color: var(--ink); }
.tg-h span { display: block; margin-top: 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tg-h.is-current { background: var(--tg-navy); border-color: var(--tg-navy); }
.tg-h.is-current .tg-bar { background: linear-gradient(180deg, #7fd3f0 0 18%, #2aa8db 18% 100%); border-color: #2aa8db; }
.tg-h.is-current b { color: #fff; }
.tg-h.is-current span { color: #7fd3f0; }
.dpd .tg-h a { position: static; font-size: 0; line-height: 0; }
.dpd .tg-h a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tg-hnote { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-top: 16px !important; padding: 22px 24px; border-radius: 18px; background: var(--tg-mist); }
.tg-hnote h3 { font-family: var(--tg-serif) !important; font-weight: 400 !important; font-size: 22px !important; }
.tg-hnote p { font-size: 15px; line-height: 1.6; }
.dpd p.tg-hnote-pos { white-space: nowrap; font-size: 13px !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tg-gel-2) !important; }

/* Nastavitelná výška — vrstvy */
.tg-adj { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 26px !important; }
.tg-adj-col { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 18px; background: var(--tg-mist); }
.tg-adj-col i { display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 8px; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--muted); background: #fff; border: 1px dashed #c6d4df; }
.tg-adj-col i.is-gel { color: #fff; border: 0; background: linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, transparent 2px) 0 0 / 16px 16px, linear-gradient(180deg, #5cc4ea, #137cab); }
.tg-adj-col i.is-base { color: var(--ink); border-style: solid; }

/* 7) Certifikace */
.tg-certs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px !important; }
.tg-certs li { padding: 24px 22px; border-radius: 20px; border: 1px solid var(--tg-line); background: #fff; }
.tg-certs b { display: block; font-family: var(--tg-serif); font-weight: 400; font-size: 21px; color: var(--ink); margin-bottom: 6px; }
.tg-certs p { font-size: 14.5px; line-height: 1.55; }

/* 2b) Přednosti tvaru (Anatomic profil, CPAP polohy) */
.tg-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px !important; }
.tg-feat--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tg-feat li { padding: 24px 22px 22px; border-radius: 20px; background: var(--tg-mist); }
.tg-feat li > i { display: block; font: italic 400 20px var(--tg-serif); color: var(--tg-gel-2); margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--tg-line); }
.tg-feat b { display: block; font-weight: 600; font-size: 17px; color: var(--ink); margin-bottom: 6px; }
.tg-feat p { font-size: 15px; line-height: 1.55; }
.tg-prof { margin-top: 26px !important; padding: 34px 40px 20px; border-radius: 22px; background: var(--tg-navy); }
.tg-prof-shape { height: 110px; font-size: 0; line-height: 0;
  clip-path: polygon(0 4%, 6% 3%, 12% 6%, 18% 12%, 25% 21%, 32% 30%, 39% 37%, 45% 41%, 50% 42%, 55% 41%, 61% 37%, 68% 30%, 75% 21%, 82% 12%, 88% 6%, 94% 3%, 100% 4%, 100% 100%, 0 100%);
  background: linear-gradient(90deg, rgba(255,255,255,.28) 0 2px, transparent 2px) 0 0 / 22px 100%, linear-gradient(180deg, #8fdcf5 0%, #2aa8db 38%, #137cab 58%, #e9eef3 58.5%, #f6f8fa 100%); border-radius: 0 0 14px 14px; }
.dpd p.tg-prof-lbl { display: flex; justify-content: space-between; margin-top: 14px !important; font-size: 12px !important; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: #7fd3f0 !important; }
.tg-prof-lbl span:nth-child(2) { color: #fff; }

/* Převzaté komponenty v barvách Technogelu */
.dpd--tg .dpd-layer.is-open { border-color: #c9dbe8; box-shadow: 0 12px 24px -18px rgba(15,28,46,.55); }
.dpd--tg .dpd-cmp.is-current { border-color: var(--tg-navy); background: linear-gradient(180deg, #fff 0%, var(--tg-mist) 100%); }
.dpd--tg .dpd-cmp.is-current .dpd-cmp-tag { background: var(--tg-navy); color: #fff; }
.dpd--tg .dpd-cmp-tag { background: #e3f1f8; color: var(--tg-gel-2); border-radius: 8px; }
.dpd--tg a.dpd-cmp:hover, .dpd--tg .dpd-cmp--link:hover { box-shadow: 0 16px 30px -20px rgba(15,28,46,.5); border-color: #c9d8e4; }
.dpd--tg .dpd-cmp h3 { font-family: var(--tg-serif) !important; font-weight: 400 !important; font-size: 22px !important; }
.dpd--tg .dpd-dots span { background: #cfdde8; }
.dpd--tg .dpd-cta { background: radial-gradient(ellipse at 85% 0%, rgba(42,168,219,.35) 0%, transparent 55%), linear-gradient(120deg, #0f1c2e 0%, #1a2d47 100%); padding: 44px 46px; border-radius: 28px; }
.dpd--tg .dpd-cta p { color: rgba(226,236,245,.85); }
.dpd.dpd--tg .dpd-cta h2 em { color: #7fd3f0; }
.dpd--tg .dpd-btn { background: #d90074; color: #fff !important; }
.dpd--tg .dpd-btn:hover { background: #b8005f; }
.dpd--tg .dpd-btn--ghost { background: transparent; color: #fff !important; }
.dpd--tg .dpd-btn--ghost:hover { background: rgba(255,255,255,.1); }
.dpd--tg .dpd-facts li { background: var(--tg-mist); border-radius: 10px; }

@media (max-width: 991px) {
  .tg-hero { grid-template-columns: 1fr; }
  .tg-hero-img { order: -1; min-height: 0; padding: 28px 20px 56px; }
  .tg-vs { grid-template-columns: 1fr; }
  .tg-vs > li { display: grid; grid-template-columns: 120px minmax(0, 1fr); }
  .tg-sw { height: auto; min-height: 100%; }
  .tg-story { grid-template-columns: 1fr; gap: 28px; }
  .tg-time { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .tg-feat--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .dpd--tg .dpd-sec { padding: 40px 0; }
  .dpd.dpd--tg h2 { font-size: 28px !important; }
  .tg-hero { border-radius: 22px; }
  .tg-hero-txt { padding: 30px 22px 28px; }
  .dpd.dpd--tg .tg-hero h2 { font-size: 32px !important; }
  .dpd p.tg-hero-lead { font-size: 15.5px !important; }
  .tg-stats { grid-template-columns: 1fr 1fr; margin-top: 24px !important; }
  .tg-stats li { padding-top: 14px; }
  .tg-stats b { font-size: 26px; }
  .dpd p.tg-plate { font-size: 10px !important; letter-spacing: .12em; bottom: 14px; left: 16px; right: 16px; }
  .tg-vs > li { grid-template-columns: 84px minmax(0, 1fr); border-radius: 18px; }
  .tg-vs-body { padding: 16px 16px 18px; }
  .tg-vs-body h3 { font-size: 20px !important; }
  .tg-demos { grid-template-columns: 1fr; }
  .tg-demo { padding: 20px 18px 18px; border-radius: 18px; }
  .tg-stage { height: 128px; }
  .tg-head { width: 60px; height: 60px; margin-left: -30px; }
  .tg-row { height: 54px; gap: 3px; }
  .tg-dark { padding: 30px 20px; border-radius: 22px; }
  .tg-time { grid-template-columns: 1fr; row-gap: 0; }
  .tg-time li { padding: 0 0 22px 26px; border-top: 0; border-left: 1px solid var(--tg-line); }
  .tg-time li::after { top: 6px; left: -5px; }
  .tg-time b { font-size: 28px; margin-bottom: 6px; }
  .tg-hs { gap: 6px; }
  .tg-h { padding: 10px 4px; border-radius: 12px; }
  .tg-bar { height: calc(var(--h) * 4.4px); width: 80%; }
  .tg-h b { font-size: 19px; }
  .tg-h span { font-size: 9.5px; letter-spacing: .02em; }
  .tg-hnote { grid-template-columns: 1fr; gap: 8px; padding: 18px; }
  .tg-adj { grid-template-columns: 1fr; gap: 20px; }
  .tg-certs { grid-template-columns: 1fr; }
  .tg-feat, .tg-feat--4 { grid-template-columns: 1fr; gap: 10px; }
  .tg-feat li { display: grid; grid-template-columns: 30px 1fr; gap: 2px 12px; padding: 18px 16px; }
  .tg-feat--4 li { grid-template-columns: 82px 1fr; }
  .tg-feat li > i { grid-row: span 2; margin: 0; padding: 0; border: 0; font-size: 17px; }
  .tg-prof { padding: 22px 16px 14px; }
  .tg-prof-shape { height: 70px; }
  .dpd p.tg-prof-lbl { font-size: 9.5px !important; letter-spacing: .06em; }
  .dpd--tg .dpd-cta { padding: 28px 20px; border-radius: 22px; }
}