:root { font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { margin:0; background: var(--site-surface); color:var(--text); line-height:1.55; min-height:100vh; }
button,a { font:inherit; }
a { color:var(--blue); }
button { cursor:pointer; }
:focus-visible { outline:3px solid var(--site-accent); outline-offset:3px; }
.site-header { height:70px; display:flex; justify-content:space-between; align-items:center; padding:0 max(22px,calc((100vw - 1080px)/2)); border-bottom:1px solid var(--site-border); background:var(--site-surface); position:sticky; top:0; z-index:5; backdrop-filter:blur(16px); }
.brand { display:inline-flex; gap:10px; align-items:center; text-decoration:none; color:var(--text); font-weight:800; letter-spacing:-.02em; }
.ui-icon { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.brand-mark { display:inline-grid; place-items:center; color:var(--site-accent); }
.brand-mark .ui-icon { width:26px; height:26px; }
.icon-back { width:16px; height:16px; transform:rotate(180deg); }
html[dir="rtl"] svg:has(> use[href="#i-arrow"]) { scale:-1 1; }
.language-trigger { display:flex; gap:8px; align-items:center; color:var(--text); background:var(--site-surface); border:1px solid var(--line); border-radius:11px; padding:8px 13px; font-weight:700; }
.page-wrap { max-width:1080px; padding:34px 22px 80px; margin:auto; }
.back-link { display:inline-flex; align-items:center; gap:7px; color:var(--site-text); text-decoration:none; font-size:14px; margin-bottom:30px; }
.back-link:hover,.bottom-links a:hover { text-decoration:underline; }
.eyebrow { color:var(--green); font-size:12px; font-weight:800; letter-spacing:.11em; margin:0 0 10px; }
h1 { font-size:clamp(32px,5vw,56px); letter-spacing:-.045em; line-height:1.08; margin:0 0 18px; }
.lead { font-size:17px; color:var(--muted); max-width:620px; margin:0 0 20px; }
.intro-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(270px,.8fr); gap:40px; align-items:start; }
.facts { display:flex; flex-wrap:wrap; gap:9px; }
#plan-name, .step summary, #plan-faq summary span { text-wrap:balance; }
.fact { padding:7px 11px; border:1px solid var(--site-border); border-radius:999px; background:var(--site-surface); color:var(--site-text); font-size:13px; font-weight:700; }
.summary-card { background: var(--site-surface); border:1px solid var(--site-border); border-radius: var(--radius-card); padding:25px; box-shadow: var(--site-shadow); display:grid; gap:15px; }
.summary-card img { width:72px; height:72px; flex:0 0 72px; object-fit:contain; border-radius:14px; border:1px solid color-mix(in srgb, var(--product-accent) 35%, transparent); background:color-mix(in srgb, var(--product-accent) 14%, transparent); }
#plan-image[src$="/shared.svg"] { --product-accent:var(--category-shared); }
#plan-image[src$="/daily.svg"] { --product-accent:var(--category-daily); }
#plan-image[src$="/private.svg"] { --product-accent:var(--category-private); }
#plan-image[src$="/family.svg"] { --product-accent:var(--category-family); }
#plan-image[src$="/personal.svg"] { --product-accent:var(--category-personal); }
#plan-image[src$="/refill.svg"] { --product-accent:var(--category-refill); }
#plan-image[src$="/refill-family.svg"] { --product-accent:var(--category-refill); }

.summary-card .label,.reference-price { display:block; color:var(--muted); font-size:13px; }
.price { display:block; font-size:32px; letter-spacing:-.04em; margin:3px 0; }
.summary-card p { margin:0; color:var(--site-text); font-size:13px; border-top:1px solid var(--site-border); padding-top:14px; }
.time-banner { display:flex; gap:17px; align-items:start; margin:34px 0 48px; border:1px solid var(--site-border); border-radius: var(--radius-card); background: var(--site-surface); padding:20px 23px; }
.time-icon { display:inline-flex; color:var(--green); }
.time-icon .ui-icon { width:28px; height:28px; }
.time-banner strong { display:block; font-size:18px; color:var(--site-success); }
.time-banner p { margin:2px 0 0; color:var(--site-text); font-size:14px; }
.journey-heading h2,.plan-faq h2 { font-size:clamp(24px,3.5vw,32px); letter-spacing:-.03em; margin:0 0 6px; }
.journey-heading p { color:var(--muted); margin:0 0 18px; }
.progress-heading { display:flex; justify-content:flex-end; margin:0 0 9px; color:var(--site-accent); font-size:13px; }
.progress { height:8px; background:var(--site-surface); border-radius: var(--radius-card); overflow:hidden; margin-bottom:24px; }
.progress-bar { display:block; height:100%; width:0; background: var(--site-accent); transition:width .25s ease; }
.steps { display:grid; gap:13px; }
.step { background:var(--panel); border:1px solid var(--line); border-radius: var(--radius-card); overflow:hidden; }
.step[open] { border-color:var(--site-border); background:var(--site-surface); box-shadow: var(--site-shadow); }
.step summary { list-style:none; display:flex; align-items:center; gap:15px; cursor:pointer; padding:18px 21px; font-size:18px; font-weight:750; }
.step summary::-webkit-details-marker { display:none; }
.step-number { display:inline-grid; place-items:center; width:37px; height:37px; flex:none; border-radius:11px; color:var(--site-accent); background:var(--site-surface); font-size:14px; }
.step[open] .step-number { color:var(--site-bg); background:var(--site-accent); }
.step-icon { display:inline-grid; place-items:center; width:35px; height:35px; flex:none; border:1px solid var(--site-border); border-radius:10px; background:var(--site-surface); color:var(--site-accent); }
.step-done { display:none; color:var(--site-success); }
.step-done .ui-icon { width:22px; height:22px; stroke-width:2.4; }
.step.is-complete { border-color:var(--site-border); }
.step.is-complete .step-number { color:var(--site-bg); background:var(--site-success); }
.step.is-complete .step-done { display:inline-flex; }
.step-chevron { display:inline-flex; margin-inline-start:auto; color:var(--site-accent); transition:transform .2s; }
.step[open] .step-chevron { transform:rotate(180deg); }
.step-body { padding:0 24px 23px; padding-inline-start:115px; color:var(--site-text); }
.step-body p:first-child { margin-top:0; }
.step-body ol,.step-body ul { padding-inline-start:22px; }
.step-body li { margin:10px 0; }
.readiness-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; margin:20px 0; }
.readiness-grid article { min-width:0; background:var(--site-surface); border:1px solid var(--site-border); border-radius:12px; padding:15px; }
.readiness-grid h3,.guide-visual-card h3,.policy-case h3 { margin:0 0 7px; color:var(--site-text); font-size:16px; }
.readiness-grid p,.guide-visual-card p,.policy-case p { margin:0; color:var(--site-secondary); font-size:14px; }
.guide-video { margin:18px 0; border-inline-start:3px solid var(--site-border); border-radius: 11px; border-start-start-radius: 0; border-end-start-radius: 0; background:var(--site-surface); padding:16px 18px; }
.guide-video strong { color:var(--site-success); }
.guide-video p { margin:6px 0 0; }
.guide-visual-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; margin:20px 0; }
.guide-visual-card { min-width:0; display:flex; flex-direction:column; gap:12px; border:1px solid var(--site-border); border-radius:14px; background:var(--site-surface); padding:18px; }
.guide-visual-card .role-check { border-radius:10px; background:var(--site-surface); padding:12px 14px; }
.guide-visual-card .role-check strong { color:var(--site-accent); }
.guide-visual-card .role-check p { margin-top:5px; }
.guide-visual-card figure { margin:auto 0 0; }
.guide-visual-card img { display:block; width:100%; height:auto; border:1px solid var(--site-border); border-radius:9px; background: var(--site-paper); }
.guide-visual-card figcaption { margin-top:9px; color:var(--site-secondary); font-size:12px; }
.payment-caution { border:1px solid var(--site-border); border-radius:10px; background:var(--site-surface); padding:13px 15px; color:var(--site-text); font-size:13px; }
/* Ruled facts grid: the 1px gaps show the border colour behind the cells as cell lines. */
.detail-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin:20px 0; border:1px solid var(--border-card); border-radius:10px; overflow:hidden; background:var(--border-card); }
.detail-list div { background:var(--site-surface); padding:12px 15px; }
.detail-list div:last-child:nth-child(odd) { grid-column:1 / -1; }
.detail-list dt { color:var(--muted); font-size:12px; }
.detail-list dd { margin:3px 0 0; font-weight:750; }
.note { color:var(--site-secondary); font-size:14px; }
.contact-alt a { color:var(--blue); }
.policy-card { border-inline-start:3px solid var(--green); background:var(--site-surface); padding:15px 18px; border-radius: 11px; border-start-start-radius: 0; border-end-start-radius: 0; }
.policy-card strong { color:var(--site-success); }
.policy-card p { margin:6px 0 0; }
.policy-detail { margin:20px 0 24px; }
.policy-detail h3 { margin:0 0 8px; font-size:18px; }
.policy-detail > p { color:var(--site-secondary); }
.policy-detail-cases { display:grid; gap:10px; margin:15px 0; }
.policy-case { border:1px solid var(--site-border); border-radius:11px; background:var(--site-surface); padding:14px 16px; }
.support-link { display:block; margin:18px 0; }
.next-button,.telegram-button { display:inline-flex; align-items:center; gap:8px; border:0; border-radius:11px; padding:12px 19px; text-decoration:none; font-weight:800; }
.next-button { color:var(--site-bg); background:var(--site-surface); }
.telegram-button { color:var(--site-text); background: var(--site-surface); margin:14px 0 8px; }
.next-button:hover,.telegram-button:hover { filter:brightness(1.12); }
.order-summary { border:1px solid var(--line); background:var(--site-surface); border-radius:11px; padding:14px 17px; font-weight:700; }
.time-banner-small { margin:20px 0; }
.plan-faq { margin-top:54px; }
.plan-faq h2 { margin-bottom:17px; }
.plan-faq details { background:var(--panel); border:1px solid var(--line); border-radius:12px; margin:9px 0; padding:0 18px; }
.plan-faq details[open] { border-color:var(--site-border); }
.plan-faq summary { cursor:pointer; font-weight:750; padding:16px 0; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.plan-faq summary::-webkit-details-marker { display:none; }
.plan-faq summary .ui-icon { color:var(--site-accent); transition:transform .2s; }
.plan-faq details[open] summary .ui-icon { transform:rotate(180deg); }
.plan-faq p { color:var(--muted); margin:0 0 18px; }
.bottom-links a { display:inline-flex; align-items:center; gap:8px; }
.related-links { margin-top:48px; }
.tag-explainer { display:flex; gap:9px; align-items:flex-start; max-width:620px; margin:14px 0 0; color:var(--site-text); font-size:14px; }
.tag-explainer .ui-icon { width:18px; height:18px; margin-top:2px; color:var(--blue); }
.step-required { white-space:nowrap; flex-shrink:0; margin-inline-start:4px; padding:3px 9px; border-radius:999px; background:var(--site-surface); color:var(--site-warm); font-size:12px; font-weight:800; letter-spacing:.02em; }
.account-warning { display:flex; gap:13px; align-items:flex-start; margin:4px 0 18px; padding:15px 17px; border:1px solid var(--site-border); border-inline-start-width:4px; border-radius:12px; background:var(--site-surface); }
.account-warning .ui-icon { width:26px; height:26px; color:var(--site-warm); }
.account-warning strong { display:block; color:var(--site-warm); margin-bottom:4px; }
.account-warning p { margin:0; color:var(--site-warm); }
.join-guide { margin:16px 0; padding:15px 17px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); }
.join-guide h3 { display:flex; align-items:center; gap:9px; margin:0 0 12px; font-size:17px; }
.join-guide h3 .ui-icon { color:var(--blue); }
.join-cases { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.join-cases > div { padding:12px 14px; border-radius:10px; background:var(--site-surface); }
.join-cases strong { display:block; margin-bottom:4px; }
.join-cases p { margin:0; color:var(--muted); }
.join-cases .join-note { display:flex; gap:8px; align-items:flex-start; margin-top:10px; color:var(--site-warm); }
.join-note .ui-icon { width:18px; height:18px; margin-top:3px; color:var(--site-warm); }
.account-note { display:flex; gap:10px; align-items:flex-start; margin:16px 0; padding:12px 14px; border-radius:11px; background:var(--site-surface); color:var(--site-text); font-size:15px; }
.account-note .ui-icon { width:20px; height:20px; color:var(--blue); }
.check-link { display:inline-flex; align-items:center; gap:6px; margin:4px 0 12px; font-weight:700; }
.check-link .ui-icon { width:15px; height:15px; }
.related-links h2 { font-size:20px; letter-spacing:-.02em; margin:0 0 14px; }
.related-links div { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.related-links a { display:flex; align-items:center; gap:10px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--text); font-weight:700; text-decoration:none; }
.related-links a .ui-icon { color:var(--blue); }
.related-links a:hover { border-color:var(--site-border); background:var(--panel2); }
.bottom-links { display:flex; justify-content:space-between; gap:20px; margin-top:60px; border-top:1px solid var(--line); padding-top:24px; }
.language-dialog { width:min(450px,calc(100% - 28px)); max-height:calc(100vh - 28px); overflow:auto; border:1px solid var(--site-border); border-radius: var(--radius-card); padding:26px; color:var(--text); background:var(--site-surface); box-shadow: var(--site-shadow); }
.language-dialog::backdrop { background:var(--site-surface); backdrop-filter:blur(7px); }
.dialog-heading { display:flex; justify-content:space-between; gap:15px; align-items:start; }
.dialog-heading h2 { margin:0; font-size:23px; }
.dialog-heading button { width:37px; height:37px; flex:none; border:1px solid var(--line); border-radius:9px; color:var(--text); background:var(--site-surface); font-size:25px; line-height:1; }
.language-dialog p { color:var(--muted); margin:13px 0 18px; }
.language-options { display:grid; gap:9px; }
.language-options button { text-align: start; background:var(--site-surface); border:1px solid var(--site-border); border-radius:11px; padding:11px 15px; color:var(--text); font-weight:700; }
.language-options button[aria-pressed="true"] { background: var(--site-surface); border-color:var(--site-border); }
.language-options button:hover { border-color:var(--site-border); }
@media (max-width:720px) { .intro-grid { grid-template-columns:1fr; gap:24px; } .summary-card { display:flex; align-items:center; flex-wrap:wrap; } .summary-card p { flex-basis:100%; } .time-banner { margin:28px 0 38px; } .step-body { padding:0 18px 21px; } .step summary { padding:15px 17px; gap:9px; font-size:16px; } .step-icon { width:31px; height:31px; } .step-icon .ui-icon { width:17px; height:17px; } .readiness-grid,.guide-visual-grid,.detail-list { grid-template-columns:1fr; } .bottom-links { flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .progress-bar,.step-chevron { transition:none; } }

/* ===== Google Family explainer (one diagram per plan role) ===== */
.family-explainer { margin:0 0 44px; padding:24px; border:1px solid var(--line); border-radius: var(--radius-card); background: var(--site-surface); }
.family-explainer .eyebrow { margin-bottom:6px; }
.family-explainer h2 { font-size:clamp(22px,3vw,28px); letter-spacing:-.03em; margin:0 0 8px; }
.family-explainer-lead { color:var(--muted); margin:0 0 22px; max-width:760px; font-size:15px; }
.family-explainer-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start; }
.family-role { display:grid; gap:14px; min-width:0; }
.family-role h3 { margin:0; font-size:19px; letter-spacing:-.02em; }
.family-explainer-text { display:grid; gap:16px; }
.family-steps { margin:0; padding-inline-start:20px; display:grid; gap:9px; color:var(--muted); font-size:14px; }
.family-steps li::marker { color:var(--blue); font-weight:800; }
.family-pool-caption { margin:-4px 0 0; text-align:center; font-size:13px; color:var(--muted); }
.family-note { margin:0; color:var(--muted); font-size:13px; border-top:1px solid var(--site-border); padding-top:14px; }
.family-note a { white-space:nowrap; }
@media (max-width:720px) { .family-explainer { padding:18px; } .family-explainer-grid { grid-template-columns:1fr; gap:20px; } }

.family-role .family-diagram-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Base icon styling for 24x24 stroke symbols */
.family-role .family-diagram-svg use {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Links from manager to seats */
.family-role .fd-link {
  fill: none;
  stroke: var(--site-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.family-role[data-role="member"] .fd-link--you {
  stroke: var(--site-success);
}

.family-role[data-role="owner"] .fd-link--provider {
  stroke: var(--site-accent);
}

.family-role[data-role="owner"] .fd-link--yours {
  stroke: var(--site-accent);
}

/* Flow pulse along links */
.family-role .fd-flow {
  fill: none;
  stroke: var(--accent-cyan, var(--site-secondary));
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 0.14 1;
  stroke-dashoffset: 1.14;
  opacity: 0;
  pointer-events: none;
  filter: none;
}

.family-role[data-role="owner"] .fd-flow {
  stroke: var(--accent-purple, var(--site-accent));
  filter: none;
}

/* Node circles (r=18, 1.5px stroke, translucent fill) */
.family-role .fd-node-circle {
  stroke-width: 1.5;
  fill: var(--site-accent-soft);
  stroke: var(--accent-blue, var(--site-accent));
}

/* Manager node */
.family-role .fd-manager {
  color: var(--accent-blue, var(--site-accent));
}

.family-role[data-role="member"] .fd-manager .fd-node-circle {
  fill: var(--site-accent-soft);
  stroke: var(--accent-blue, var(--site-accent));
}

.family-role[data-role="owner"] .fd-manager {
  color: var(--accent-green, var(--site-success));
}

.family-role[data-role="owner"] .fd-manager .fd-node-circle {
  fill: var(--site-accent-soft);
  stroke: var(--accent-green, var(--site-success));
}

/* Seat nodes */
.family-role .fd-seat--you {
  color: var(--accent-green, var(--site-success));
}

.family-role .fd-seat--you .fd-node-circle {
  fill: var(--site-accent-soft);
  stroke: var(--accent-green, var(--site-success));
}

.family-role .fd-seat-check-bg {
  fill: var(--site-bg);
  stroke: var(--accent-green, var(--site-success));
  stroke-width: 1.4;
}

.family-role .fd-seat--other {
  color: var(--text-secondary, var(--site-secondary));
}

.family-role .fd-seat--other .fd-node-circle {
  fill: var(--site-accent-soft);
  stroke: var(--text-secondary, var(--site-secondary));
}

.family-role .fd-seat--provider {
  color: var(--accent-purple, var(--site-accent));
}

.family-role .fd-seat--provider .fd-node-circle {
  fill: var(--site-accent-soft);
  stroke: var(--accent-purple, var(--site-accent));
}

.family-role .fd-seat--yours {
  color: var(--accent-blue, var(--site-accent));
}

.family-role .fd-seat--yours .fd-node-circle {
  fill: var(--site-accent-soft);
  stroke: var(--accent-blue, var(--site-accent));
}

/* Ultra sparkle badge */
.family-role .fd-badge {
  color: var(--accent-purple, var(--site-accent));
  transform-box: fill-box;
  transform-origin: center;
}

.family-role[data-role="member"] .fd-badge {
  color: var(--accent-cyan, var(--site-secondary));
}

.family-role .fd-badge-bg {
  fill: var(--site-bg);
  stroke: currentColor;
  stroke-width: 1.4;
}

/* Shared pool bar */
.family-role .fd-pool-bg {
  fill: var(--site-bg);
  stroke: var(--border-card, var(--site-accent));
  stroke-width: 1.2;
}

.family-role .fd-pool-divider {
  stroke: var(--border-card, var(--site-accent));
  stroke-width: 1;
}

.family-role .fd-pool-tick {
  stroke: var(--border-card, var(--site-accent));
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.family-role .fd-pool-seg--sparkles {
  color: var(--accent-purple, var(--site-accent));
}

.family-role .fd-pool-seg--cloud {
  color: var(--accent-cyan, var(--site-secondary));
}

.family-role .fd-pool-seg--coins {
  color: var(--accent-green, var(--site-success));
}

.family-role .fd-pool-bar-track {
  fill: var(--site-border);
}

.family-role .fd-pool-bar-fill {
  fill: currentColor;
  opacity: 0.75;
}

/* HTML Legend */
.family-role .family-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--text-secondary, var(--site-secondary));
}

.family-role .family-legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.family-role .family-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  box-sizing: border-box;
}

.family-role .family-legend-dot--manager {
  background: var(--site-surface);
  border: 1.5px solid var(--accent-blue, var(--site-border));
}

.family-role .family-legend-dot--you {
  background: var(--site-surface);
  border: 1.5px solid var(--accent-green, var(--site-border));
}

.family-role .family-legend-dot--others {
  background: var(--site-surface);
  border: 1.5px solid var(--text-secondary, var(--site-border));
  opacity: 0.45;
}

.family-role .family-legend-dot--provider {
  background: var(--site-surface);
  border: 1.5px solid var(--accent-purple, var(--site-border));
}

.family-role .family-legend-dot--yours {
  background: var(--site-surface);
  border: 1.5px solid var(--accent-blue, var(--site-border));
}

/* Keyframes (exact names required by spec) */








/* Entrance once, then a gentle endless pulse along the links and on the Ultra badge. */

.family-explainer.visible .fd-manager { animation: none; }
.family-explainer.visible .fd-link { animation: none; }
.family-explainer.visible .fd-seat { animation: none; }
.family-explainer.visible .fd-seats .fd-seat:nth-child(2) { animation-delay: 1s; }
.family-explainer.visible .fd-seats .fd-seat:nth-child(3) { animation-delay: 1.1s; }
.family-explainer.visible .fd-seats .fd-seat:nth-child(4) { animation-delay: 1.2s; }
.family-explainer.visible .fd-seats .fd-seat:nth-child(5) { animation-delay: 1.3s; }
.family-explainer.visible .fd-badge { animation: none; }
.family-explainer.visible .fd-pool { animation: none; }
.family-explainer.visible .fd-flow { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .family-explainer [class^="fd-"], .family-explainer [class*=" fd-"] { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
  .family-explainer .fd-seat--other .fd-node-circle, .family-explainer .fd-seat--other use { opacity: 1; }
  .family-explainer .fd-pool-bar-fill { opacity: .75; }
  .family-explainer .fd-flow { display: none; }
}

/* Static diagrams keep strokes legible; movement is reserved for user interaction. */
.family-role .fd-badge-bg, .family-role .fd-pool-bg { fill: var(--site-surface); }

@media (max-width:479px) { .summary-card img { width:60px; height:60px; flex-basis:60px; border-radius:12px; } }