.informational-sketch { --draft-bar-height: 53px; }
[hidden] { display: none !important; }
.draft-review-bar { position: sticky; z-index: 80; top: 0; padding: 10px 24px; border-bottom: 1px solid #695b32; background: #282216; color: #ffe6a2; }
.draft-review-bar > div { max-width: 1240px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.draft-review-bar span { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px; }
.draft-review-bar b { font-size: 10px; letter-spacing: .14em; }
.draft-review-bar small { font-size: 11px; color: #d7c9a9; }
.draft-review-bar a { padding: 5px 10px; border: 1px solid #695b32; border-radius: 7px; font-size: 11px; white-space: nowrap; }
.informational-sketch .site-header { top: var(--draft-bar-height); }
.draft-page { padding-bottom: 64px; }
.draft-page [id] { scroll-margin-top: calc(var(--draft-bar-height) + 100px); }
.draft-hero { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 470px; margin-top: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: rgba(13,14,26,.7); }
.draft-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 48px; min-width: 0; }
.draft-hero .display-title { font-size: clamp(2.4rem,4vw,3.6rem); line-height: .99; margin: 22px 0 24px; letter-spacing: -.065em; }
.draft-hero .lead { font-size: 1rem; max-width: 470px; }
.draft-hero .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 28px; }
.draft-hero .button { min-height: 46px; font-size: .85rem; }
.draft-secondary-link { color: #b7bbcd; font-size: .8rem; }
.draft-secondary-link:hover { color: #fff; }
.draft-hero-facts { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 34px; color: var(--muted); font-size: .7rem; }
.draft-hero-facts b { margin-right: 5px; color: #ececf6; font-size: .85rem; }
.draft-visual { min-height: 470px; }
.draft-visual .visual-card--back { top: 85px; }
.draft-visual .visual-card--front { top: 195px; }
.draft-section { padding-top: 88px; }
.draft-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.draft-section-heading .section-title { font-size: clamp(2rem,3.5vw,3.2rem); }
.draft-section-heading > p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.draft-data-note { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; margin-bottom: 22px; border: 1px solid #4c432f; border-radius: 10px; background: #211d1590; color: #cabe9d; font-size: .8rem; }
.draft-data-note p { margin: 0; }
.draft-data-note strong { color: #e5d6b0; font-weight: 600; }
.draft-note-dot { width: 6px; height: 6px; border-radius: 50%; background: #ebce80; flex: 0 0 auto; }
.draft-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.draft-bank-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.draft-bank-filter { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: #151724; font-size: .76rem; font-weight: 650; cursor: pointer; }
.draft-bank-filter > span { width: 6px; height: 6px; border-radius: 50%; background: var(--bank-color); }
.draft-bank-filter b { color: var(--cyan); font-weight: 500; font-size: .8rem; }
.draft-bank-filter[aria-pressed="false"] { color: #8c8ea1; border-color: var(--line); background: transparent; }
.draft-bank-filter[aria-pressed="false"] b { visibility: hidden; }
.draft-view-switch { display: flex; padding: 4px; gap: 3px; border: 1px solid var(--line); border-radius: 9px; background: #0c0e19; }
.draft-view-switch button { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: .76rem; cursor: pointer; }
.draft-view-switch button[aria-pressed="true"] { background: #282b3c; color: #fff; box-shadow: 0 2px 5px #0003; }
.draft-table-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--line-strong); border-radius: 16px; background: #0e101d; scrollbar-color: #454961 #121421; scrollbar-width: thin; }
.draft-table { width: 100%; min-width: 900px; border-collapse: separate; border-spacing: 0; text-align: left; }
.draft-table th, .draft-table td { padding: 20px 24px; border-bottom: 1px solid var(--line); }
.draft-table th:not(:last-child), .draft-table td:not(:last-child) { border-right: 1px solid rgba(255,255,255,.045); }
.draft-table thead { background: #171a2a; }
.draft-table thead th { width: 19%; padding-block: 25px; }
.draft-table thead th:first-child { width: 24%; color: var(--muted); font-size: .75rem; font-weight: 600; vertical-align: bottom; }
.draft-table thead strong { display: block; margin-top: 14px; font-size: 1rem; }
.draft-bank-mark { display: inline-flex; align-items: center; justify-content: center; width: 37px; height: 37px; border: 1px solid color-mix(in srgb,var(--bank-color) 30%,transparent); border-radius: 10px; background: color-mix(in srgb,var(--bank-color) 10%,transparent); color: var(--bank-color); font-size: .75rem; font-weight: 850; }
.draft-table tbody th { position: sticky; left: 0; z-index: 1; background: #111320; width: 24%; color: #c8cada; font-size: .82rem; font-weight: 500; }
.draft-table tbody td { font-size: .9rem; color: #8e93b2; }
.draft-table tbody tr:hover th { background: #171a2a; }
.draft-table tbody tr:hover td { background: #151827; }
.draft-table tbody tr:last-child th, .draft-table tbody tr:last-child td { border-bottom: 0; }
.draft-empty { font-size: 1rem; color: #737991; }
.draft-source-row span { font-size: .69rem; color: #8287a2; line-height: 1.5; }
.draft-source-row th { color: #8d92ad !important; }
.draft-scroll-hint { display: none; margin: 0 0 10px; color: var(--muted); font-size: .72rem; }
.draft-scroll-hint span { color: var(--cyan); }
.draft-comparison-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; margin-top: 16px; color: #9297b0; font-size: .72rem; }
.draft-comparison-bottom p { margin: 0; }
.draft-selection-count { color: #d5d8e7; }
.draft-cards-view { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.draft-detail-card { min-width: 0; padding: 26px; border: 1px solid var(--line); border-top: 2px solid var(--bank-color); border-radius: 16px; background: linear-gradient(135deg,#171a2a,#10121f); }
.draft-detail-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.draft-detail-top > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.draft-detail-top h3 { margin: 0; font-size: 1.1rem; }
.draft-detail-top > span { font-size: .6rem; letter-spacing: .13em; color: #8e94af; }
.draft-detail-card dl { margin: 0; }
.draft-detail-card dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); }
.draft-detail-card dt { color: #bec3d6; font-size: .8rem; }
.draft-detail-card dd { margin: 0; color: #838ba7; }
.draft-card-source { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: #8e95af; font-size: .7rem; }
.draft-card-source span { margin-right: 5px; color: var(--cyan); }
.draft-empty-state { padding: 50px 20px; border: 1px dashed var(--line-strong); border-radius: 16px; color: var(--muted); text-align: center; font-size: .9rem; }
.draft-reading-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; border-top: 1px solid var(--line); }
.draft-reading-grid article { padding-top: 24px; }
.draft-reading-grid article > span { color: var(--cyan); font-size: .66rem; font-weight: 700; letter-spacing: .1em; }
.draft-reading-grid h3 { margin: 18px 0 10px; color: #eceef9; font-size: 1rem; }
.draft-reading-grid p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.75; }
.draft-faq-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; }
.draft-faq-heading .section-title { font-size: clamp(2.4rem,4vw,3.7rem); line-height: 1; }
.draft-faq-heading em { color: transparent; -webkit-text-stroke: 1px var(--cyan); font-style: normal; }
.draft-faq-heading > p:last-child { max-width: 300px; margin: 22px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.75; }
.draft-questions { border-top: 1px solid var(--line-strong); }
.draft-question { border-bottom: 1px solid var(--line-strong); }
.draft-question summary { display: flex; align-items: baseline; gap: 15px; padding: 23px 0; cursor: pointer; list-style: none; font-size: .92rem; font-weight: 600; line-height: 1.6; }
.draft-question summary::-webkit-details-marker { display: none; }
.draft-question summary > span:nth-child(2) { flex: 1; }
.draft-question-number { color: #858da8; font-size: .65rem; font-weight: 500; }
.draft-question summary b { color: var(--cyan); font-size: 1.2rem; font-weight: 400; line-height: 1; }
.draft-question[open] summary b { transform: rotate(45deg); }
.draft-answer { padding: 0 26px 23px 32px; }
.draft-answer p { margin: 0; font-size: .85rem; line-height: 1.85; color: #b1b8cf; }
.draft-provenance { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; margin-top: 88px; padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: #11142190; }
.draft-provenance h2 { max-width: 260px; margin: 13px 0 0; font-size: 1.15rem; line-height: 1.4; }
.draft-provenance dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 0; }
.draft-provenance dt { color: #949bb7; font-size: .7rem; }
.draft-provenance dd { margin: 10px 0 7px; color: #d9deef; font-size: .8rem; line-height: 1.6; }
.draft-provenance small { color: #7f87a2; font-size: .64rem; line-height: 1.6; display: block; }
.draft-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0,0,0,0); overflow: hidden; white-space: nowrap; border: 0; }
@media(max-width:1100px) {
 .draft-hero-copy { padding: 32px; }
 .draft-hero .display-title { font-size: clamp(2.1rem,4.2vw,3.4rem); }
 .draft-hero-facts { gap: 14px; }
 .draft-visual .visual-card { transform: scale(.85) rotate(-11deg); transform-origin: left center; }
 .draft-visual .visual-card--front { transform: scale(.85) rotate(7deg); }
 .draft-faq-section { gap: 40px; }
 .draft-provenance { grid-template-columns: 1fr; }
 .draft-scroll-hint { display: block; }
}
@media(max-width:760px) {
 .draft-review-bar { padding: 9px 16px; }
 .draft-review-bar > div { flex-wrap: wrap; gap: 8px; }
 .draft-review-bar span { width: 100%; gap: 5px 12px; }
 .draft-hero { grid-template-columns: 1fr; margin-top: 18px; border-radius: 18px; }
 .draft-hero-copy { padding: 30px 22px; }
 .draft-hero .display-title { font-size: clamp(1.85rem,8.5vw,3rem); }
 .draft-hero .lead { font-size: .91rem; }
 .draft-hero .hero-actions { align-items: flex-start; gap: 16px; margin-top: 22px; }
 .draft-hero .button { font-size: .8rem; }
 .draft-hero-facts { gap: 10px 18px; margin-top: 26px; font-size: .65rem; }
 .draft-hero-facts b { font-size: .75rem; }
 .draft-visual { min-height: 340px; border-left: 0; border-top: 1px solid var(--line); }
 .draft-visual .visual-card--back { top: 40px; }
 .draft-visual .visual-card--front { top: 120px; }
 .draft-section { padding-top: 58px; }
 .draft-section-heading { display: block; margin-bottom: 22px; }
 .draft-section-heading > p { margin-top: 18px; font-size: .8rem; }
 .draft-section-heading .section-title { font-size: clamp(1.8rem,7.8vw,2.7rem); }
 .draft-data-note { padding: 12px; font-size: .73rem; }
 .draft-toolbar { align-items: stretch; }
 .draft-bank-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
 .draft-bank-filter { justify-content: space-between; }
 .draft-bank-filter > span { margin-right: auto; }
 .draft-view-switch { width: 100%; }
 .draft-view-switch button { justify-content: center; flex: 1; }
 .draft-table th,.draft-table td { padding: 16px; }
 .draft-table { min-width: 800px; }
 .draft-table tbody th { min-width: 150px; font-size: .76rem; }
 .draft-cards-view { grid-template-columns: 1fr; gap: 14px; }
 .draft-detail-card { padding: 20px; }
 .draft-detail-top > span { font-size: .55rem; white-space: nowrap; }
 .draft-reading-grid { grid-template-columns: 1fr; gap: 22px; }
 .draft-reading-grid article { padding-top: 16px; }
 .draft-reading-grid article:not(:first-child) { border-top: 1px solid var(--line); }
 .draft-reading-grid h3 { margin-top: 12px; }
 .draft-faq-section { grid-template-columns: 1fr; gap: 28px; }
 .draft-faq-heading .section-title { font-size: 2.5rem; }
 .draft-question summary { padding: 20px 0; gap: 10px; font-size: .85rem; }
 .draft-answer { padding-left: 25px; padding-right: 12px; }
 .draft-provenance { gap: 25px; margin-top: 58px; padding: 22px; }
 .draft-provenance dl { grid-template-columns: 1fr; gap: 20px; }
 .draft-provenance dl > div:not(:first-child) { padding-top: 18px; border-top: 1px solid var(--line); }
 .draft-provenance dd { margin-top: 6px; }
 .draft-page { padding-bottom: 40px; }
}

/* Preserve the previous upper page; new material starts below product cards. */
.restored-sketch #compare { padding-top: 20px; }
.restored-sketch .draft-page [id] { scroll-margin-top: 96px; }
.restored-sketch .review-tabs { flex-wrap: wrap; }

/* Filled public tariff summaries, separate from the preserved product cards. */
.rate-primary { display: block; color: #e3e7f6; font-size: .83rem; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.rate-detail { display: block; color: #9fa8c3; font-size: .72rem; line-height: 1.65; margin-top: 6px; overflow-wrap: anywhere; }
.rate-product { display: block; margin-top: 6px; color: #a1aac5; font-size: .68rem; font-weight: 400; line-height: 1.5; }
.draft-table tbody td { vertical-align: top; }
.draft-table tbody th { vertical-align: top; padding-top: 24px; }
.rate-card-product { margin: -10px 0 20px; color: #9ea8c5; font-size: .75rem; line-height: 1.5; }
.draft-detail-card dt { max-width: 39%; }
.draft-detail-card dd { flex: 1; max-width: 59%; text-align: right; }
.rate-source-link { color: var(--cyan); font-size: .72rem; line-height: 1.65; display: inline-block; }
.rate-source-link:hover, .rate-source-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.rate-source-list { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.rate-source-list a { color: var(--cyan); font-size: .73rem; line-height: 1.65; }
.rate-source-notes { grid-column: 1 / -1; font-size: .76rem; color: #a5afca; }
.rate-source-notes summary { cursor: pointer; color: #c3cce4; }
.rate-source-notes ol { margin: 14px 0 0; padding-left: 20px; line-height: 1.8; }
.rate-source-notes li + li { margin-top: 10px; }
@media(max-width:760px) {
 .rate-primary { font-size: .78rem; }
 .rate-detail { font-size: .69rem; }
 .draft-table { min-width: 1050px; }
 .draft-detail-card dt { font-size: .72rem; }
 .rate-source-list { display: grid; gap: 10px; }
}

/* Typography selected in the owner-reviewed sketch. */
.restored-sketch .room-hero .display-title { font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.02; letter-spacing: -.055em; }
@media(max-width:760px) {
 .restored-sketch .room-hero .display-title { font-size: clamp(1.65rem, 7.5vw, 2.8rem); }
}
/* Bank accents are stylesheet rules to preserve the existing strict CSP. */
[data-compare-bank="sber"] { --bank-color: #25c88a; }
[data-compare-bank="tbank"] { --bank-color: #ffda3f; }
[data-compare-bank="alfa"] { --bank-color: #fa5470; }
[data-compare-bank="vtb"] { --bank-color: #479cff; }