/* =========================================================================
   About Coquet (/about/, /pl/o-nas/) and pole dance app comparison
   (/compare/, /pl/porownanie/). Loads after main.css, community.css and
   partners.css; generated by tools/build_company.py.
   ========================================================================= */

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.link { color: var(--c-link); text-decoration: underline; text-decoration-color: var(--c-link-line); text-underline-offset: 3px; font-weight: 600; }
.link:hover { color: var(--c-link-hover); }
.sec p a:not(.btn):not(.link), .faq__a a, .alt a, .legal a, .kit a { color: var(--c-link); text-decoration: underline; text-decoration-color: var(--c-link-line); text-underline-offset: 3px; }

/* ---------- Facts card ---------- */
.facts { display: grid; gap: 0; margin: 0; padding: 8px 24px; border-radius: var(--r-lg); background: var(--c-solid); border: 1px solid var(--c-card-edge); box-shadow: var(--shadow-card); }
.facts div { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--c-hairline); }
.facts div:last-child { border-bottom: 0; }
.facts dt { font: 600 12px/20px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); }
.facts dd { margin: 0; font-size: 15px; line-height: 22px; color: var(--c-text); }
.facts small { display: block; font-size: 13px; color: var(--c-text-tertiary); }

/* ---------- Feature tiles ---------- */
.feats { display: grid; gap: 12px; margin-top: clamp(28px, 3vw, 40px); padding: 0; list-style: none; }
@media (min-width: 640px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .feats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feats a { display: grid; gap: 6px; height: 100%; padding: 22px; border-radius: var(--r-md); background: var(--c-solid); border: 1px solid var(--c-card-edge); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
.feats a:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.feats b { font: 400 26px/1.1 var(--font-display); color: var(--c-text); }
.feats p { font-size: 15px; line-height: 22px; color: var(--c-text-secondary); }
@media (prefers-reduced-motion: reduce) { .feats a { transition: none; } .feats a:hover { transform: none; } }

.steps--col { grid-template-columns: 1fr !important; }
@media (min-width: 600px) { .steps--col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ---------- Press kit ---------- */
.kit { display: grid; gap: clamp(24px, 3vw, 40px); margin-top: clamp(28px, 3vw, 40px); align-items: start; }
@media (min-width: 900px) { .kit { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); } }
.kit__copy { padding: 24px; border-radius: var(--r-lg); background: var(--c-solid); border: 1px solid var(--c-card-edge); box-shadow: var(--shadow-card); }
.kit__copy h3 { font: 600 12px/16px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); margin: 0 0 8px; }
.kit__copy blockquote { margin: 0 0 22px; padding: 0 0 0 16px; border-left: 3px solid var(--c-accent-tint); font-size: 16px; line-height: 25px; color: var(--c-text); }
.kit__note { font-size: 14px; line-height: 21px; color: var(--c-text-secondary); }
.kit__files { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kit__files a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--r-md); background: var(--c-solid); border: 1px solid var(--c-card-edge); box-shadow: var(--shadow-card); color: var(--c-text); text-decoration: none; }
.kit__files a::after { content: "↓"; color: var(--c-accent); font-weight: 600; }
.kit__files a:hover { border-color: var(--c-accent); }
.kit__files b { font-size: 15px; line-height: 20px; }
.kit__files span { margin-left: auto; font-size: 12px; color: var(--c-text-tertiary); white-space: nowrap; }
.legal { margin-top: 20px; font-size: 13px; line-height: 20px; color: var(--c-text-tertiary); }

/* ---------- Comparison ---------- */
.picks { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.picks li { padding: 14px 18px; border-radius: var(--r-md); background: var(--c-solid); border: 1px solid var(--c-card-edge); font-size: 15px; line-height: 22px; color: var(--c-text-secondary); }
.picks b { color: var(--c-text); }
.disclosure { margin-top: 20px; font-size: 13px; line-height: 20px; color: var(--c-text-tertiary); }

.cmp { position: relative; max-width: 100%; margin-top: clamp(24px, 3vw, 36px); overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); background: var(--c-solid); border: 1px solid var(--c-card-edge); box-shadow: var(--shadow-card); }
.cmp:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.cmp table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.cmp--prices table { min-width: 640px; }
.cmp th, .cmp td { padding: 12px 14px; border-bottom: 1px solid var(--c-hairline); text-align: left; vertical-align: middle; color: var(--c-text-secondary); }
.cmp thead th { position: sticky; top: 0; background: var(--c-solid); font: 600 13px/18px var(--font-body); color: var(--c-text); text-align: center; }
.cmp thead th:first-child, .cmp tbody th { text-align: left; }
.cmp tbody th { font-weight: 500; color: var(--c-text); min-width: 200px; }
.cmp--prices tbody th { min-width: 140px; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td.yes, .cmp td.no, .cmp td.txt { text-align: center; }
.cmp td.yes { color: var(--c-accent); font-size: 18px; font-weight: 700; }
.cmp td.no { color: var(--c-text-muted); font-size: 18px; }
.cmp td.txt { font-size: 12px; font-weight: 600; color: var(--c-text-tertiary); }
.cmp th.is-pick { color: var(--c-on-accent); background: var(--c-accent); }
.cmp td.pick { background: var(--c-accent-tint); }
.cmp td.pick.yes { color: var(--c-accent); }
.cmp tr.is-pick th, .cmp tr.is-pick td { background: var(--c-accent-tint); color: var(--c-text); }
.cmp tr.score th, .cmp tr.score td { text-align: center; font-size: 14px; color: var(--c-text-secondary); border-top: 2px solid var(--c-hairline); }
.cmp tr.score th { text-align: left; font-weight: 600; }
.cmp tr.score b { font: 400 24px/1 var(--font-display); color: var(--c-text); }
.cmp tr.score td.pick b { color: var(--c-accent); }
.cmp__legend { margin-top: 10px; font-size: 13px; line-height: 19px; color: var(--c-text-tertiary); }

.vs { display: grid; gap: 12px; margin-top: 24px; }
@media (min-width: 600px) { .vs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vs__col { padding: 22px; border-radius: var(--r-lg); background: var(--c-solid); border: 1px solid var(--c-card-edge); box-shadow: var(--shadow-card); }
.vs__col h3 { font: 400 30px/1.05 var(--font-display); color: var(--c-text); margin-bottom: 10px; }
.vs__col ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vs__col li { position: relative; padding-left: 22px; font-size: 15px; line-height: 21px; color: var(--c-text-secondary); }
.vs__col li::before { content: "·"; position: absolute; left: 6px; top: -1px; font-weight: 700; color: var(--c-text-muted); }
.vs__col--pick { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent), var(--shadow-card); }
.vs__col--pick li::before { content: "✓"; left: 0; color: var(--c-accent); }

.alts { display: grid; gap: 12px; margin-top: clamp(28px, 3vw, 40px); }
@media (min-width: 700px) { .alts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .alts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.alt { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--r-lg); background: var(--c-solid); border: 1px solid var(--c-card-edge); box-shadow: var(--shadow-card); scroll-margin-top: 96px; }
.alt h3 { font: 400 26px/1.1 var(--font-display); color: var(--c-text); }
.alt p { font-size: 15px; line-height: 22px; color: var(--c-text-secondary); }
.alt__pick { padding: 12px 14px; border-radius: var(--r-md); background: var(--c-accent-tint); color: var(--c-text) !important; }
.alt__src { margin-top: auto; font-size: 13px !important; color: var(--c-text-tertiary) !important; }

/* keep grid children inside the viewport on phones (tables scroll inside .cmp) */
.mission, .chero__grid, .kit { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .mission { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } .kit { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); } }
@media (min-width: 960px) { .chero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.mission > *, .chero__grid > *, .kit > * { min-width: 0; }

/* keep the feature names in view while the table scrolls sideways */
.cmp thead th:first-child, .cmp tbody th { position: sticky; left: 0; z-index: 1; background: var(--c-solid); }
.cmp thead th:first-child { z-index: 2; }
.cmp tr.is-pick th { background: var(--c-accent-tint); }
@media (max-width: 599px) { .cmp tbody th { min-width: 150px; max-width: 170px; } .cmp th, .cmp td { padding: 10px 12px; } }