/* /rieltor/ - catalog tiles. Colours, fonts and the tag/button classes come from site3.css and chrome.css. */
.rl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.rl-grid:empty{display:none}
.rl-tile{
  display:grid;gap:12px;align-content:start;padding:clamp(20px,2.6vw,30px);
  background:var(--sheet);border:1px solid var(--line-paper);border-radius:6px;color:var(--on-paper);
}
.rl-title{font-size:24px;line-height:1.2}
.rl-note{color:var(--on-paper-2);font-size:16px}
.rl-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
.rl-price{font-family:var(--mono);font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}
.rl-btn{min-height:48px;font-size:16px;white-space:nowrap}

/* the subscription: first, on the whole row, dark like the VIP tariff; the tall copy sits left, the price column right */
.rl-tile--subscription{
  grid-column:1 / -1;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px clamp(24px,5vw,64px);align-items:center;
  padding:clamp(24px,4vw,44px);background:var(--ink);color:var(--on-ink);border-color:rgba(217,169,97,.55);color-scheme:dark;
}
.rl-sub-main{grid-column:1;display:grid;gap:12px}
.rl-tile--subscription .rl-title{font-size:clamp(28px,3.4vw,40px);line-height:1.1}
.rl-tile--subscription .rl-note{color:var(--on-ink-2)}
.rl-sub-list{margin:0;padding-left:22px;display:grid;gap:6px;color:var(--on-ink-2);font-size:16px;line-height:1.45}
.rl-side{grid-column:2;display:grid;gap:12px;justify-items:start;align-content:center}
.rl-price-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:0}
.rl-unit{color:var(--on-ink-2);font-size:15px}
.rl-tile--subscription .rl-price{font-size:clamp(30px,3.6vw,42px);line-height:1}

/* the site checkout: opens inside the tile; the bot link stays as the second way */
.rl-btn-pay{min-width:min(100%,260px)}
.rl-pay{display:grid;gap:10px;padding-top:4px}
.rl-pay-l{display:grid;gap:6px;font-size:15px;color:var(--on-paper-2)}
.rl-pay-t{line-height:1.4}
.rl-pay-email{min-height:44px;padding:8px 12px;font:inherit;border:1px solid var(--line-paper);border-radius:6px;background:var(--paper);color:var(--on-paper)}
.rl-pay-consent{grid-template-columns:auto 1fr;align-items:start;gap:10px}
.rl-pay-check{width:20px;height:20px;margin-top:2px;accent-color:var(--brass-deep)}
.rl-pay-consent a{color:inherit;text-underline-offset:3px}
.rl-pay-err{color:#8c2f1d;font-size:14px;line-height:1.4}
.rl-alt{font-size:15px}
.rl-alt a{color:inherit;text-underline-offset:3px}
.rl-disclaimer{font-style:italic}

/* "soon": no price, no button, quieter than the available tiles */
.rl-tile--soon{background:transparent;border-style:dashed}
.rl-tile--soon .rl-title{color:var(--on-paper-2)}
.rl-tile--backlog .rl-title{font-size:21px}

/* without scripts: the generated list of the page */
.uslugi-fallback{display:grid;gap:12px}
.uslugi-tile{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:16px 18px;
  background:var(--sheet);border:1px solid var(--line-paper);border-radius:6px;
}
.uslugi-tile--subscription{border-color:var(--brass-deep)}
.uslugi-title{flex:1 1 280px;font-family:var(--display);font-size:20px;line-height:1.3}
.uslugi-price{font-family:var(--mono);font-size:20px;font-weight:500}
.uslugi-soon{font-family:var(--mono);font-size:14px;color:var(--on-paper-2)}
.uslugi-btn{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--brass-deep)}

/* D-2: one-off service vs subscription (static page copy, not from the catalog) */
.rl-compare-h{margin:38px 0 14px;font-family:var(--display);font-size:24px;line-height:1.25}
.rl-compare{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rl-compare table{width:100%;min-width:640px;border-collapse:collapse;font-size:16px}
.rl-compare th,.rl-compare td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line-paper)}
.rl-compare thead th{font-family:var(--display);font-size:17px;white-space:nowrap;border-bottom:2px solid var(--brass-deep)}
.rl-compare tbody th{font-weight:500;color:var(--on-paper-2);white-space:nowrap}
.rl-compare tbody tr:last-child th,.rl-compare tbody tr:last-child td{border-bottom:0}
.rl-compare-hint{margin:12px 0 0;color:var(--on-paper-2);font-size:15px}

@media (max-width:767px){
  .rl-grid{grid-template-columns:1fr}
  .rl-tile--subscription{grid-template-columns:1fr}
  .rl-sub-main,.rl-side{grid-column:1;grid-row:auto}
  .rl-side{align-content:start}
  .rl-row{flex-direction:column;align-items:stretch}
  .rl-btn{width:100%}
}