/* IPTV Family theme styles. Tokens mirror theme.json; layout follows docs/design-reference. */
:root {
	--fam-royal: #1769E0;
	--fam-navy: #10243A;
	--fam-deep: #104EAD;
	--fam-ice: #F4F8FD;
	--fam-white: #FFFFFF;
	--fam-amber: #FFB547;
	--fam-muted: #5B6B7F;
	--fam-line: #DCE6F2;
	--fam-blue-50: #EAF2FE;
	--fam-amber-50: #FFF1D6;
	--fam-sand: #FFF4E0;
	--fam-night: #0B1A2C;
	--fam-night-2: #0F2238;
	--fam-night-3: #16304D;
	--fam-slate: #8FA2B8;
	--fam-mist: #B9C7D8;
	--fam-red: #E5484D;
	--fam-input: #C9D7E8;
	--fam-head: var(--wp--preset--font-family--manrope, Manrope, system-ui, sans-serif);
	--fam-body: var(--wp--preset--font-family--inter, Inter, system-ui, sans-serif);
	--fam-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231769E0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--fam-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231769E0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
	--fam-plus-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
body { margin: 0; background: var(--fam-white); color: var(--fam-navy); font-family: var(--fam-body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--fam-royal); text-decoration: none; }
a:hover { color: var(--fam-deep); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--fam-amber); outline-offset: 2px; }
.wp-site-blocks > *, .family-content > *, .family-main > * { margin-block-start: 0; margin-block-end: 0; }
.wp-site-blocks { padding: 0; }
.family-prose { padding: 48px 24px 72px; }
.family-prose > * + * { margin-block-start: 1em; }

/* ---------- Layout helpers ---------- */
.family-inner { box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
.family-inner--narrow { max-width: 880px; }
.family-inner--mid { max-width: 900px; }
.family-sec { padding-block: 88px; background: var(--fam-white); }
.family-sec--ice { background: var(--fam-ice); border-top: 1px solid var(--fam-line); border-bottom: 1px solid var(--fam-line); }
.family-sec--royal { background: var(--fam-royal); position: relative; overflow: hidden; }
.family-sec--sand { background: var(--fam-sand); padding-block: 80px; }
.family-sec--navy { background: var(--fam-navy); padding-block: 72px; }
.family-sec--line { border-top: 1px solid var(--fam-line); border-bottom: 0; }
.family-stack { display: flex; flex-direction: column; gap: 30px; }
.family-stack--sm { gap: 16px; }
.family-stack--lg { gap: 34px; }
.family-stack--xl { gap: 44px; }
.family-head { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.family-center { align-self: center; }
.family-center-text { text-align: center; }
.family-split { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.family-split__main { flex: 999 1 440px; min-width: 0; }

/* ---------- Type ---------- */
.family-h1, .family-h2, .family-h3, .family-hero__title { font-family: var(--fam-head); color: var(--fam-navy); margin: 0; }
.family-h1 { font-weight: 800; font-size: clamp(30px, 2.6vw + 14px, 44px); line-height: 1.12; letter-spacing: -0.01em; max-width: 820px; }
.family-h2 { font-weight: 800; font-size: clamp(28px, 1.6vw + 18px, 40px); line-height: 1.15; letter-spacing: -0.01em; }
.family-h2--md { font-size: clamp(28px, 1.4vw + 18px, 38px); }
.family-h2--sm { font-weight: 700; font-size: clamp(24px, 0.8vw + 18px, 30px); letter-spacing: 0; }
.family-h2--light { color: var(--fam-white); }
.family-h3 { font-weight: 700; font-size: 22px; line-height: 1.25; }
.family-h3--lg { font-weight: 800; font-size: clamp(22px, 0.8vw + 16px, 28px); }
.family-lead { margin: 0; font-size: 18px; line-height: 1.6; color: var(--fam-muted); max-width: 680px; }
.family-head .family-lead { max-width: 700px; }
.family-lead--ink { color: var(--fam-navy); max-width: 540px; }
.family-lead--sm { font-size: 17px; }
.family-small { margin: 0; font-size: 13px; color: var(--fam-muted); }

/* ---------- Buttons, pills, checks ---------- */
.family-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 20px; border: 2px solid transparent; border-radius: 12px; font: 700 15px/1.2 var(--fam-body); text-align: center; text-decoration: none; cursor: pointer; }
.family-btn--lg { padding: 15px 28px; border-radius: 14px; font-size: 17px; }
.family-btn--block { width: 100%; }
.family-btn--amber { background: var(--fam-amber); color: var(--fam-navy); border-color: var(--fam-amber); }
.family-btn--amber:hover { background: #FFA726; border-color: #FFA726; color: var(--fam-navy); }
.family-btn--glow { box-shadow: 0 8px 20px rgba(255, 181, 71, 0.35); }
.family-btn--outline { background: transparent; color: var(--fam-royal); border-color: var(--fam-royal); }
.family-btn--outline:hover { background: var(--fam-blue-50); color: var(--fam-deep); border-color: var(--fam-deep); }
.family-btn--royal { background: var(--fam-royal); color: var(--fam-white); border-color: var(--fam-royal); padding: 13px 26px; border-radius: 14px; font-size: 16px; }
.family-btn--royal:hover { background: var(--fam-deep); border-color: var(--fam-deep); color: var(--fam-white); }
.family-btn--navy { background: var(--fam-navy); color: var(--fam-white); border-color: var(--fam-navy); padding: 13px 20px; border-radius: 14px; font-size: 16px; }
.family-btn--navy:hover { background: #1B3755; color: var(--fam-white); }
.family-btn--outline-navy { background: transparent; color: var(--fam-navy); border-color: var(--fam-navy); padding: 13px 22px; border-radius: 14px; font-size: 16px; }
.family-btn--outline-navy:hover { background: var(--fam-navy); color: var(--fam-white); }
.family-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.family-pill { display: inline-block; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.family-pill--blue { background: var(--fam-blue-50); color: var(--fam-deep); }
.family-pill--amber { background: var(--fam-amber-50); color: var(--fam-navy); }
.family-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 15px; color: var(--fam-navy); }
.family-checks li { display: flex; align-items: center; gap: 8px; }
.family-checks li::before { content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: var(--fam-check) center / contain no-repeat; }
.family-checks--inline { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
.family-checks--center { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px 28px; font-size: 14px; }
.family-checks--lg li { gap: 10px; }
.family-checks--lg li::before { flex-basis: 18px; width: 18px; height: 18px; }

/* ---------- Header and Interac bar ---------- */
.family-header { background: var(--fam-white); border-bottom: 1px solid var(--fam-line); }
.family-header__inner { box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.family-header__logo { display: flex; align-items: center; min-height: 44px; }
.family-header__logo img { display: block; width: 200px; height: auto; aspect-ratio: 808 / 213; }
.family-header__toggle { display: none; margin-left: auto; min-width: 44px; min-height: 44px; padding: 8px; border: 0; background: none; color: var(--fam-navy); cursor: pointer; align-items: center; justify-content: center; }
.family-header__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-left: auto; font-size: 15px; font-weight: 600; }
.family-header__nav a:not(.family-btn) { display: inline-flex; align-items: center; min-height: 44px; color: var(--fam-navy); }
.family-header__nav a:not(.family-btn):hover { color: var(--fam-royal); }
.family-interac { background: var(--fam-royal); color: var(--fam-white); }
.family-interac__inner { box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 10px 24px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; font-size: 15px; }
.family-interac__main { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.family-interac__main img { display: block; width: 28px; height: 28px; }
.family-interac__crypto { opacity: 0.9; }
.family-interac__crypto-short { display: none; }

/* ---------- Hero ---------- */
.family-hero { padding-block: 64px 48px; }
.family-hero__grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); grid-template-rows: 1fr repeat(5, auto) 1fr; grid-template-areas: ". visual" "badges visual" "title visual" "lead visual" "ctas visual" "checks visual" ". visual"; column-gap: 48px; row-gap: 20px; }
.family-hero__badges { grid-area: badges; display: flex; flex-wrap: wrap; gap: 8px; }
.family-hero__title { grid-area: title; font-weight: 800; font-size: clamp(30px, 3.4vw + 16px, 56px); line-height: 1.08; letter-spacing: -0.02em; }
.family-hero__lead { grid-area: lead; margin: 0; font-size: 19px; line-height: 1.6; color: var(--fam-muted); max-width: 560px; }
.family-hero__ctas { grid-area: ctas; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.family-hero__checks { grid-area: checks; font-size: 14px; color: var(--fam-muted); align-self: start; }
.family-hero__visual { grid-area: visual; position: relative; margin: 0; align-self: center; aspect-ratio: 1400 / 1045; }
.family-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; box-shadow: 0 30px 60px rgba(16, 36, 58, 0.25); }
.family-hero__chip { position: absolute; box-shadow: 0 14px 30px rgba(16, 36, 58, 0.14); }
.family-hero__chip--login { left: -14px; top: -16px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--fam-white); border: 1px solid var(--fam-line); border-radius: 14px; }
.family-hero__chip-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fam-blue-50); }
.family-hero__chip-text { display: flex; flex-direction: column; }
.family-hero__chip-text strong { font-size: 13px; color: var(--fam-navy); }
.family-hero__chip-text span { font-size: 11px; color: var(--fam-muted); }
.family-hero__chip--support { right: 14px; top: 50%; padding: 8px 14px; border-radius: 999px; background: var(--fam-amber); color: var(--fam-navy); font-size: 12px; font-weight: 700; box-shadow: 0 10px 24px rgba(16, 36, 58, 0.18); }
.family-hero__mobile { display: none; }

/* ---------- Trust strip ---------- */
.family-trust { padding-block: 14px; background: var(--fam-ice); border-top: 1px solid var(--fam-line); border-bottom: 1px solid var(--fam-line); }
.family-trust__list { justify-content: center; gap: 8px 28px; font-size: 14px; font-weight: 600; }
.family-trust__list li { gap: 7px; }
.family-trust__list li::before { flex-basis: 15px; width: 15px; height: 15px; }

/* ---------- Plans (selector, cards) ---------- */
.family-pricing { padding-block: 80px 72px; }
.family-plans { display: flex; flex-direction: column; gap: 30px; }
.family-selector { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.family-selector__q { margin: 0; font-size: 15px; font-weight: 700; color: var(--fam-navy); }
.family-selector__group { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 6px; background: var(--fam-ice); border: 1px solid var(--fam-line); border-radius: 16px; }
.family-selector__btn { min-height: 48px; padding: 12px 20px; border: 2px solid var(--fam-line); border-radius: 12px; background: var(--fam-white); color: var(--fam-navy); font: 700 15px/1.2 var(--fam-body); cursor: pointer; }
.family-selector__btn:hover { border-color: var(--fam-royal); }
.family-selector__btn[aria-pressed="true"] { background: var(--fam-royal); color: var(--fam-white); border-color: var(--fam-royal); box-shadow: 0 6px 16px rgba(23, 105, 224, 0.3); }
.family-selector__hint { margin: 0; font-size: 14px; color: var(--fam-muted); }
.family-plans__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.family-plan { box-sizing: border-box; min-width: 0; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "price" "per" "save" "cta" "alt"; grid-template-rows: auto auto auto 1fr auto auto; align-content: start; row-gap: 8px; margin-block: 16px; padding: 30px 24px 18px; background: var(--fam-white); border: 1px solid var(--fam-line); border-radius: 22px; }
.family-plan.is-featured { margin-block: 0; padding-top: 34px; border: 2px solid var(--fam-royal); box-shadow: 0 24px 48px rgba(16, 36, 58, 0.16); }
.family-plan__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: var(--fam-royal); color: var(--fam-white); font-size: 12px; font-weight: 700; white-space: nowrap; }
.family-plan__name { grid-area: name; font-size: 17px; font-weight: 700; color: var(--fam-navy); }
.family-plan__price { grid-area: price; display: flex; align-items: baseline; gap: 6px; }
.family-plan__total { font-family: var(--fam-head); font-weight: 800; font-size: 48px; line-height: 1.05; letter-spacing: -0.02em; color: var(--fam-navy); }
.family-plan__cur { font-size: 18px; font-weight: 700; color: var(--fam-muted); }
.family-plan__per { grid-area: per; font-size: 15px; color: var(--fam-muted); }
.family-plan__save { grid-area: save; justify-self: start; align-self: start; margin-top: 4px; padding: 6px 12px; border-radius: 999px; background: var(--fam-blue-50); color: var(--fam-deep); font-size: 14px; font-weight: 700; }
.family-plan__save--amber { background: var(--fam-amber); color: var(--fam-navy); }
.family-plan__cta { grid-area: cta; box-sizing: border-box; margin-top: 12px; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 0; border: 2px solid var(--fam-royal); border-radius: 12px; color: var(--fam-royal); font-size: 15px; font-weight: 700; text-align: center; }
.family-plan__cta:hover { background: var(--fam-blue-50); }
.family-plan__cta--amber { border-color: var(--fam-amber); background: var(--fam-amber); color: var(--fam-navy); font-size: 16px; }
.family-plan__cta--amber:hover { background: #FFA726; border-color: #FFA726; color: var(--fam-navy); }
.family-plan__alt { grid-area: alt; display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 13px; font-weight: 600; text-align: center; }

/* ---------- Price table ---------- */
.family-compare-plans { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.family-table-wrap { overflow-x: auto; border: 1px solid var(--fam-line); border-radius: 16px; background: var(--fam-white); -webkit-overflow-scrolling: touch; }
.family-table-wrap--lg { border-radius: 20px; }
.family-price-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; background: var(--fam-white); }
.family-price-table th, .family-price-table td { padding: 12px 16px; border-bottom: 1px solid var(--fam-line); text-align: right; }
.family-price-table thead th { padding-block: 14px; font-size: 14px; font-weight: 700; color: var(--fam-muted); background: var(--fam-white); }
.family-price-table thead th.family-price-table__corner { text-align: left; font-weight: 600; }
.family-price-table thead th.is-active { background: var(--fam-royal); color: var(--fam-white); }
.family-price-table tbody th { text-align: left; font-weight: 700; color: var(--fam-navy); }
.family-price-table tbody td.is-active { background: var(--fam-blue-50); }
.family-price-table tbody tr:last-child > * { border-bottom: 0; }
.family-price-table__price { display: block; font-weight: 700; color: var(--fam-navy); }
.family-price-table__per { display: block; font-size: 12px; color: var(--fam-muted); }
.family-notes { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 4px; font-size: 14px; color: var(--fam-muted); }
.family-notes strong { color: var(--fam-navy); }

/* ---------- Savings calculator ---------- */
.family-savings-sec { padding-block: 80px; }
.family-savings-sec__art { position: absolute; right: -80px; top: -60px; opacity: 0.12; pointer-events: none; }
.family-savings-sec .family-inner { position: relative; }
.family-savings { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.family-savings__text { flex: 999 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.family-savings__text .family-h2 { line-height: 1.12; }
.family-savings__lead { margin: 0; max-width: 520px; font-size: 18px; line-height: 1.6; color: #E3EDFC; }
.family-savings__controls { box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; max-width: 520px; padding: 22px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 18px; }
.family-savings__label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--fam-white); font-size: 15px; font-weight: 600; }
.family-savings__bill { font-family: var(--fam-head); font-weight: 800; font-size: 28px; }
.family-savings__range { width: 100%; min-height: 44px; margin: 0; accent-color: var(--fam-amber); }
.family-savings__presets { display: flex; flex-wrap: wrap; gap: 8px; }
.family-savings__preset { min-height: 44px; padding: 9px 14px; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 999px; background: transparent; color: var(--fam-white); font: 700 14px/1.2 var(--fam-body); cursor: pointer; }
.family-savings__preset[aria-pressed="true"] { background: var(--fam-white); border-color: var(--fam-white); color: var(--fam-royal); }
.family-savings__side { flex: 1 1 400px; min-width: 0; }
.family-savings__card { box-sizing: border-box; max-width: 460px; display: flex; flex-direction: column; gap: 16px; padding: 34px; background: var(--fam-white); border-radius: 26px; box-shadow: 0 30px 60px rgba(11, 26, 44, 0.25); }
.family-savings__row { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; color: var(--fam-muted); }
.family-savings__strike { font-weight: 700; color: var(--fam-navy); text-decoration: line-through; text-decoration-color: var(--fam-red); }
.family-savings__fam { font-weight: 700; color: var(--fam-navy); white-space: nowrap; }
.family-savings__result { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding: 22px 24px; background: var(--fam-amber); border-radius: 20px; color: var(--fam-navy); }
.family-savings__kicker { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }
.family-savings__saved { font-family: var(--fam-head); font-weight: 800; font-size: clamp(44px, 3vw + 24px, 60px); line-height: 1; letter-spacing: -0.02em; }
.family-savings__monthly { font-size: 15px; }
.family-savings__note { margin: 0; font-size: 12px; color: var(--fam-muted); }

/* ---------- Comparison ---------- */
.family-compare-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; }
.family-compare-table thead > tr > * { padding: 18px 20px; background: var(--fam-ice); color: var(--fam-navy); font-weight: 700; }
.family-compare-table thead td { width: 28%; }
.family-compare-table thead th.is-us { width: 28%; background: var(--fam-royal); color: var(--fam-white); font-family: var(--fam-head); font-weight: 800; font-size: 17px; }
.family-compare-table tbody th { padding: 15px 20px; border-top: 1px solid var(--fam-line); text-align: left; font-weight: 700; color: var(--fam-navy); }
.family-compare-table tbody td { padding: 15px 20px; border-top: 1px solid var(--fam-line); text-align: center; color: var(--fam-muted); }
.family-compare-table tbody td.is-us { background: var(--fam-blue-50); color: var(--fam-navy); font-weight: 600; text-align: left; }
.family-compare-table__us { display: flex; align-items: center; gap: 8px; }
.family-compare-table__us svg { flex: 0 0 18px; }
.family-cards { display: flex; flex-wrap: wrap; gap: 18px; }
.family-card { box-sizing: border-box; flex: 1 1 300px; min-width: 0; display: flex; gap: 16px; align-items: flex-start; padding: 26px; background: var(--fam-white); border: 1px solid var(--fam-line); border-radius: 20px; }
.family-card__icon { flex: 0 0 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--fam-blue-50); color: var(--fam-royal); }
.family-card__icon.is-amber { background: var(--fam-amber); color: var(--fam-navy); }
.family-card__body { display: flex; flex-direction: column; gap: 6px; }
.family-card__title { margin: 0; font-family: var(--fam-head); font-weight: 700; font-size: 18px; color: var(--fam-navy); }
.family-card__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fam-muted); }

/* ---------- Category tabs ---------- */
.family-tabs__head { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; }
.family-tabs__intro { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.family-stats { display: flex; flex-wrap: wrap; gap: 28px; }
.family-stats div { display: flex; flex-direction: column; }
.family-stats strong { font-family: var(--fam-head); font-weight: 800; font-size: 32px; color: var(--fam-royal); }
.family-stats span { font-size: 13px; color: var(--fam-muted); }
.family-tabs__bar { display: flex; flex-wrap: wrap; gap: 8px; }
html:not(.js) .family-tabs__bar { display: none; }
.family-tabs__tab { min-height: 46px; padding: 12px 20px; border: 2px solid var(--fam-line); border-radius: 999px; background: var(--fam-white); color: var(--fam-navy); font: 700 15px/1.2 var(--fam-body); cursor: pointer; }
.family-tabs__tab:hover { border-color: var(--fam-navy); }
.family-tabs__tab[aria-selected="true"] { background: var(--fam-navy); border-color: var(--fam-navy); color: var(--fam-white); }
.family-tabs__panel { box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 32px; align-items: center; padding: 28px; background: var(--fam-white); border: 1px solid var(--fam-line); border-radius: 26px; }
html.js .family-tabs__panel:not(.is-active) { display: none; }
.family-tabs__screen { flex: 1 1 460px; min-width: 0; padding: 10px; background: var(--fam-night); border-radius: 18px; }
.family-tabs__frame { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--fam-night-2); border-radius: 12px; }
.family-tabs__screen-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--fam-slate); }
.family-tabs__screen-head span:first-child { font-size: 14px; font-weight: 700; color: var(--fam-white); }
.family-tabs__tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.family-tile { box-sizing: border-box; flex: 1 1 30%; min-width: 110px; height: 92px; display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; }
.family-tile--1 { background: var(--fam-royal); color: var(--fam-white); }
.family-tile--2 { background: var(--fam-night-3); color: var(--fam-white); }
.family-tile--3 { background: var(--fam-amber); color: var(--fam-navy); }
.family-tile--4 { background: var(--fam-deep); color: var(--fam-white); }
.family-tile--5 { background: var(--fam-blue-50); color: var(--fam-navy); }
.family-tile--6 { background: #2A4A70; color: var(--fam-white); }
.family-tile__badge { align-self: flex-start; padding: 3px 7px; border-radius: 5px; background: var(--fam-red); color: var(--fam-white); font-size: 10px; font-weight: 700; }
.family-tile__label { margin-top: auto; font-size: 14px; font-weight: 700; }
.family-tabs__copy { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.family-tabs__text { margin: 0; font-size: 16px; line-height: 1.7; color: var(--fam-muted); }
.family-tabs__copy .family-btn { align-self: flex-start; margin-top: 6px; padding: 12px 24px; }

/* ---------- Setup steps ---------- */
.family-steps__track { position: relative; }
.family-steps__line { position: absolute; left: 16%; right: 16%; top: 27px; border-top: 3px dashed #9DC0F2; }
.family-steps__list { position: relative; display: flex; flex-wrap: wrap; gap: 28px; margin: 0; padding: 0; list-style: none; }
.family-step { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.family-step__num { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--fam-royal); color: var(--fam-white); font-family: var(--fam-head); font-weight: 800; font-size: 22px; box-shadow: 0 0 0 8px var(--fam-white); }
.family-step__num--amber { background: var(--fam-amber); color: var(--fam-navy); }
.family-step__art { box-sizing: border-box; width: 100%; height: 210px; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--fam-ice); border: 1px solid var(--fam-line); border-radius: 22px; }
.family-step__title { margin: 0; font-family: var(--fam-head); font-weight: 800; font-size: 20px; color: var(--fam-navy); }
.family-step__text { margin: 0; max-width: 320px; font-size: 15px; line-height: 1.6; color: var(--fam-muted); }
.family-mock-phone { width: 120px; padding: 6px; background: var(--fam-night); border-radius: 18px; }
.family-mock-phone__screen { box-sizing: border-box; height: 170px; display: flex; flex-direction: column; gap: 7px; padding: 12px 10px; background: var(--fam-white); border-radius: 13px; text-align: left; }
.family-mock-phone__title { font-size: 9px; font-weight: 700; color: var(--fam-navy); }
.family-mock-field { box-sizing: border-box; height: 16px; padding: 3px 5px; border: 1px solid var(--fam-line); border-radius: 5px; font-size: 7px; color: var(--fam-muted); }
.family-mock-phone__btn { margin-top: auto; padding: 5px; border-radius: 5px; background: var(--fam-amber); color: var(--fam-navy); font-size: 8px; font-weight: 700; text-align: center; }
.family-mock-tv { width: 230px; }
.family-mock-tv__screen { box-sizing: border-box; height: 132px; display: flex; flex-direction: column; gap: 9px; padding: 12px; border: 6px solid var(--fam-night); border-radius: 12px; text-align: left; }
.family-mock-tv__screen--dark { background: var(--fam-night-2); }
.family-mock-tv__screen--live { position: relative; align-items: center; justify-content: center; background: var(--fam-royal); }
.family-mock-tv__title { font-size: 9px; font-weight: 700; color: var(--fam-white); }
.family-mock-tv__apps { display: flex; gap: 7px; }
.family-mock-tv__apps i { width: 34px; height: 34px; border-radius: 8px; background: var(--fam-royal); }
.family-mock-tv__apps i:nth-child(2) { background: var(--fam-amber); }
.family-mock-tv__apps i:nth-child(3) { background: var(--fam-deep); }
.family-mock-tv__apps i:nth-child(4) { background: var(--fam-night-3); }
.family-mock-tv__bar { margin-top: auto; height: 6px; border-radius: 3px; background: var(--fam-night-3); }
.family-mock-tv__bar i { display: block; width: 72%; height: 6px; border-radius: 3px; background: var(--fam-amber); }
.family-mock-tv__caption { font-size: 8px; color: var(--fam-mist); }
.family-mock-tv__live { position: absolute; left: 8px; top: 8px; padding: 2px 6px; border-radius: 4px; background: var(--fam-red); color: var(--fam-white); font-size: 8px; font-weight: 700; }
.family-mock-tv__play { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--fam-white); }
.family-mock-tv__stand { display: block; width: 70px; height: 8px; margin: 0 auto; background: var(--fam-night); border-radius: 0 0 6px 6px; }

/* ---------- Devices ---------- */
.family-devices__legal { max-width: 640px; }
.family-devices__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.family-devices__grid--page { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.family-device { box-sizing: border-box; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 16px 18px; background: var(--fam-white); border: 1px solid var(--fam-line); border-radius: 20px; color: var(--fam-navy); text-align: center; }
.family-device__logos { display: flex; align-items: center; justify-content: center; gap: 14px; height: 40px; max-width: 100%; color: var(--fam-navy); transition: color 0.15s; }
.family-device:hover .family-device__logos { color: var(--fam-royal); }
.family-logo { display: block; flex: 0 1 auto; height: 28px; width: auto; max-width: 100%; }
.family-logo--samsung { height: auto; width: 112px; }
.family-logo--macos { height: auto; width: 76px; }
.family-logo--amazonfiretv { height: 30px; }
.family-logo--mask { width: 116px; height: 17px; background-color: currentColor; -webkit-mask: var(--family-logo) center / contain no-repeat; mask: var(--family-logo) center / contain no-repeat; }
.family-logo--text { height: auto; font-family: var(--fam-head); font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: -0.01em; }
.family-device__name { margin: 0; font-family: var(--fam-head); font-weight: 700; font-size: 17px; line-height: 1.3; }
.family-device__apps { margin: 0; font-size: 13px; color: var(--fam-muted); }
.family-device__more { margin: auto 0 0; padding-top: 4px; font-size: 14px; font-weight: 700; color: var(--fam-muted); }
a.family-device__more { display: inline-flex; align-items: center; min-height: 44px; padding-top: 0; color: var(--fam-royal); }

/* ---------- Support ---------- */
.family-support .family-h2 { line-height: 1.12; }
.family-chat { flex: 1 1 380px; min-width: 0; max-width: 440px; display: flex; flex-direction: column; gap: 12px; }
.family-chat__msg { margin: 0; padding: 14px 16px; font-size: 15px; line-height: 1.5; }
.family-chat__msg--me { align-self: flex-end; max-width: 300px; background: var(--fam-white); color: var(--fam-navy); border-radius: 18px 18px 4px 18px; box-shadow: 0 10px 24px rgba(16, 36, 58, 0.1); }
.family-chat__msg--us { align-self: flex-start; max-width: 320px; background: var(--fam-royal); color: var(--fam-white); border-radius: 18px 18px 18px 4px; box-shadow: 0 10px 24px rgba(16, 36, 58, 0.15); }

/* ---------- FAQ ---------- */
.family-faq .family-stack { gap: 26px; }
.family-faq__list { display: flex; flex-direction: column; gap: 12px; }
.family-faq__list > * { margin: 0 !important; }
.family-faq__item { background: var(--fam-white); border: 1px solid var(--fam-line); border-radius: 16px; overflow: hidden; }
.family-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; list-style: none; cursor: pointer; font: 700 17px/1.4 var(--fam-body); color: var(--fam-navy); }
.family-faq__item summary::-webkit-details-marker { display: none; }
.family-faq__item summary::after { content: ""; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--fam-blue-50) var(--fam-plus) center / 18px no-repeat; transition: transform 0.2s; }
.family-faq__item[open] summary::after { background-color: var(--fam-royal); background-image: var(--fam-plus-white); transform: rotate(45deg); }
.family-faq__item > p { margin: 0 !important; padding: 0 24px 22px; font-size: 16px; line-height: 1.7; color: var(--fam-muted); }

/* ---------- Trial form ---------- */
.family-trial__box { box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 44px; padding: 44px; background: var(--fam-white); border: 1px solid var(--fam-line); border-radius: 28px; box-shadow: 0 24px 50px rgba(16, 36, 58, 0.08); }
.family-trial__copy { flex: 999 1 400px; min-width: 0; }
.family-trial .family-h2 { line-height: 1.15; }
.family-form { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.family-form label { font-size: 14px; font-weight: 600; color: var(--fam-navy); }
.family-form input, .family-form select { box-sizing: border-box; width: 100%; margin-top: -8px; padding: 14px 16px; border: 1px solid var(--fam-input); border-radius: 12px; background: var(--fam-white); color: var(--fam-navy); font: 400 16px/1.3 var(--fam-body); }
.family-form button { margin-top: 6px; }
.family-form__note { margin: 0; font-size: 12px; color: var(--fam-muted); text-align: center; }

/* ---------- Pricing page ---------- */
.family-pricing-intro { padding-block: 60px 56px; }
.family-pricing-intro .family-plans { gap: 24px; }
.family-paysteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.family-paystep { display: flex; flex-direction: column; gap: 10px; padding: 28px; border: 1px solid var(--fam-line); border-radius: 20px; }
.family-paystep__num { font-family: var(--fam-head); font-weight: 800; font-size: 26px; color: var(--fam-royal); }
.family-paystep__title { margin: 0; font-size: 17px; font-weight: 700; color: var(--fam-navy); }
.family-paystep p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--fam-muted); }
.family-payment { padding-block: 80px; }
.family-callouts { display: flex; flex-wrap: wrap; gap: 16px; }
.family-callout { box-sizing: border-box; flex: 1 1 320px; min-width: 0; margin: 0; padding: 22px 26px; background: var(--fam-ice); border: 1px solid var(--fam-line); border-radius: 16px; font-size: 15px; line-height: 1.6; color: var(--fam-navy); }
.family-callout span { color: var(--fam-muted); }
.family-before .family-stack { gap: 24px; }
.family-before .family-h2 { font-size: 28px; }
.family-before__list { display: flex; flex-direction: column; gap: 12px; }
.family-before__item { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; background: var(--fam-night-3); border-radius: 14px; }
.family-before__item h3 { margin: 0; font: 700 16px/1.4 var(--fam-body); color: var(--fam-white); }
.family-before__item p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--fam-mist); }
.family-before .family-btn { align-self: flex-start; }

/* ---------- Footer ---------- */
.family-footer { background: var(--fam-navy); }
.family-footer__inner { box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 56px 24px 40px; display: flex; flex-wrap: wrap; gap: 40px; }
.family-footer__brand { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.family-footer__brand img { display: block; width: 180px; height: auto; }
.family-footer__brand p { margin: 0; max-width: 300px; font-size: 14px; line-height: 1.6; color: var(--fam-mist); }
.family-footer__col { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 0; font-size: 14px; color: var(--fam-mist); }
.family-footer__col > a, .family-footer__col > span { display: flex; align-items: center; min-height: 44px; }
.family-footer__col a { color: var(--fam-mist); }
.family-footer__col a:hover { color: var(--fam-white); }
.family-footer__title { margin: 0 0 4px; font-weight: 700; color: var(--fam-white); }
.family-footer__bar { border-top: 1px solid #1E3650; }
.family-footer__bar-inner { box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 18px 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--fam-mist); }
.family-float-wa { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--fam-royal); box-shadow: 0 14px 30px rgba(23, 105, 224, 0.4); }
.family-float-wa:hover { background: var(--fam-deep); }
.family-mobile-bar { display: none; }

/* ---------- Phone and small tablet ---------- */
@media (max-width: 820px) {
	.family-inner, .family-header__inner, .family-footer__inner, .family-footer__bar-inner { padding-inline: 16px; }
	.family-sec { padding-block: 56px; }
	.family-pricing, .family-savings-sec, .family-sec--sand, .family-sec--navy, .family-payment { padding-block: 56px; }
	.family-savings-sec__art, .family-steps__line { display: none; }

	.family-header__inner { padding-block: 12px; gap: 12px; }
	.family-header__logo img { width: 146px; }
	.family-header__nav { width: 100%; margin-left: 0; gap: 4px 16px; font-size: 14px; }
	html.js .family-header__toggle { display: inline-flex; }
	html.js .family-header__nav { display: none; }
	html.js .family-header.is-open .family-header__nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 8px; font-size: 16px; }
	html.js .family-header.is-open .family-header__nav a:not(.family-btn) { min-height: 48px; padding: 0; border-bottom: 1px solid var(--fam-line); }
	html.js .family-header.is-open .family-header__cta { margin-top: 12px; }

	.family-interac__inner { padding: 8px 16px; gap: 6px; font-size: 12px; }
	.family-interac__main { gap: 8px; }
	.family-interac__main img { width: 22px; height: 22px; }
	.family-interac__crypto { display: none; }
	.family-interac__crypto-short { display: inline; font-weight: 700; }

	.family-hero { padding-block: 26px 32px; }
	.family-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "badges" "title" "lead" "visual" "mobile"; row-gap: 14px; }
	.family-hero__badges { gap: 6px; }
	.family-hero__badges .family-pill { padding: 5px 10px; font-size: 11px; }
	.family-hero__lead { font-size: 15px; }
	.family-hero__ctas, .family-hero__checks { display: none; }
	.family-hero__img { border-radius: 14px; box-shadow: 0 16px 32px rgba(16, 36, 58, 0.2); }
	.family-hero__chip--login { left: 8px; top: 8px; padding: 7px 10px; gap: 8px; border-radius: 12px; }
	.family-hero__chip-icon { width: 24px; height: 24px; }
	.family-hero__chip--support { right: 8px; top: auto; bottom: 8px; padding: 6px 12px; font-size: 11px; }
	.family-hero__mobile { grid-area: mobile; display: flex; flex-direction: column; gap: 10px; }
	.family-hero__plans { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
	.family-hero__from { margin: 0; font: 700 19px/1.3 var(--fam-head); color: var(--fam-navy); }
	.family-hero__range { margin: 0; font-size: 14px; color: var(--fam-navy); }
	.family-hero__all { margin-top: 8px; }
	.family-hero__mini { list-style: none; margin: 4px 0 0; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; background: var(--fam-ice); border: 1px solid var(--fam-line); border-radius: 12px; font-size: 12px; font-weight: 600; color: var(--fam-navy); }
	.family-hero__mini li::before { content: "✓ "; color: var(--fam-royal); }

	.family-trust__list { gap: 8px 18px; font-size: 13px; }
	.family-lead { font-size: 16px; }
	.family-savings { gap: 28px; }
	.family-savings__card { padding: 24px; }
	.family-tabs__panel { padding: 16px; gap: 20px; }
	.family-tabs__screen { flex-basis: 100%; }
	.family-tile { min-width: 90px; height: 76px; }
	.family-trial__box { padding: 24px; gap: 28px; border-radius: 22px; }
	.family-paysteps { grid-template-columns: minmax(0, 1fr); }
	.family-faq__item summary { padding: 16px 18px; font-size: 16px; }
	.family-faq__item > p { padding: 0 18px 18px; font-size: 15px; }
	.family-chat { max-width: none; }

	.family-float-wa { display: none; }
	.family-mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 8px)); background: var(--fam-white); border-top: 1px solid var(--fam-line); }
	.family-mobile-bar__trial { flex: 1; border-radius: 12px; }
	.family-mobile-bar__wa { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 2px solid var(--fam-royal); border-radius: 12px; color: var(--fam-royal); font-weight: 700; font-size: 15px; box-sizing: border-box; }
	body { padding-bottom: 84px; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 16px; }

/* ===================== F3 ===================== */
.family-icon { display: block; flex: 0 0 auto; }
.family-header__toggle .family-header__icon-close { display: none; }
.family-header.is-open .family-header__toggle .family-header__icon-open { display: none; }
.family-header.is-open .family-header__toggle .family-header__icon-close { display: block; }
.family-hero__chip-icon { color: var(--fam-royal); }
.family-compare-table__us .family-icon { color: var(--fam-royal); }
.family-mock-tv__play { color: var(--fam-royal); }
.family-savings-sec__art { color: var(--fam-white); }
.family-float-wa { color: var(--fam-white); }
.family-float-wa:hover { color: var(--fam-white); }

/* Mobile price list (shown under 640px instead of the 5-column table) */
.family-price-list { display: none; }
.family-price-list__rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--fam-line); border-radius: 16px; background: var(--fam-white); overflow: hidden; }
.family-price-list__rows li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name total" "name per"; align-items: center; column-gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--fam-line); }
.family-price-list__rows li:last-child { border-bottom: 0; }
.family-price-list__name { grid-area: name; font-weight: 700; color: var(--fam-navy); }
.family-price-list__total { grid-area: total; text-align: right; font-weight: 700; color: var(--fam-navy); }
.family-price-list__per { grid-area: per; text-align: right; font-size: 12px; color: var(--fam-muted); }
.family-price-list__note { margin: 10px 0 0; font-size: 13px; color: var(--fam-muted); }

/* Trial form (family-trial plugin) */
.family-form__hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.family-form__hint { margin: -8px 0 0; font-size: 13px; color: var(--fam-muted); }
.family-form__choices { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; }
.family-form__choices legend { margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 600; color: var(--fam-navy); }
.family-form .family-form__choice { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 1px solid var(--fam-input); border-radius: 12px; background: var(--fam-white); font-size: 15px; font-weight: 600; cursor: pointer; }
.family-form .family-form__choice input { width: 20px; height: 20px; margin: 0; padding: 0; accent-color: var(--fam-royal); }
.family-form__choice:has(input:checked) { border-color: var(--fam-royal); background: var(--fam-blue-50); }
.family-form__error { margin: 0; padding: 12px 16px; border-radius: 12px; background: #FDECEC; color: #8A1C1C; font-size: 15px; font-weight: 600; }
.family-form__note a { display: inline-block; padding: 13px 0; color: var(--fam-royal); text-decoration: underline; }
.family-trial-done { justify-content: center; gap: 12px; padding: 28px; background: var(--fam-ice); border: 1px solid var(--fam-line); border-radius: 22px; }
.family-trial-done__kicker { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: var(--fam-royal); }
.family-trial-done__title { margin: 0; font-family: var(--fam-head); font-weight: 800; font-size: 26px; line-height: 1.2; color: var(--fam-navy); }
.family-trial-done__text { margin: 0 0 8px; font-size: 16px; line-height: 1.6; color: var(--fam-muted); }

/* Page building blocks for the launch pages */
.family-page-hero { padding-block: 64px 40px; }
.family-page-hero .family-head { align-items: flex-start; text-align: left; }
.family-page-hero .family-h1 { max-width: 880px; }
.family-page-hero .family-lead { max-width: 760px; }
.family-sec--tight { padding-block: 48px; }
.family-sec--top0 { padding-top: 0; }
.family-copy { max-width: 760px; font-size: 17px; line-height: 1.7; color: var(--fam-navy); }
.family-copy > * { margin: 0; }
.family-copy > * + * { margin-top: 16px; }
.family-copy h2 { margin-top: 40px; font-family: var(--fam-head); font-weight: 800; font-size: clamp(24px, 1vw + 18px, 30px); line-height: 1.2; }
.family-copy h3 { margin-top: 28px; font-family: var(--fam-head); font-weight: 700; font-size: 20px; }
.family-copy ul, .family-copy ol { padding-left: 22px; }
.family-copy li + li { margin-top: 8px; }
.family-copy a { color: var(--fam-royal); text-decoration: underline; }
.family-copy .family-updated { font-size: 14px; color: var(--fam-muted); }
.family-checks--prose { gap: 12px; font-size: 17px; }
.family-checks--prose li { align-items: flex-start; }
.family-checks--prose li::before { margin-top: 5px; }
.family-numbered { list-style: none; counter-reset: fam-step; margin: 0; padding: 0; display: grid; gap: 14px; }
.family-numbered li { counter-increment: fam-step; position: relative; padding: 20px 22px 20px 72px; border: 1px solid var(--fam-line); border-radius: 18px; background: var(--fam-white); font-size: 16px; line-height: 1.6; color: var(--fam-muted); }
.family-numbered li::before { content: counter(fam-step); position: absolute; left: 20px; top: 18px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--fam-royal); color: var(--fam-white); font-family: var(--fam-head); font-weight: 800; font-size: 17px; }
.family-numbered strong { color: var(--fam-navy); }
.family-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.family-contact-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; border: 1px solid var(--fam-line); border-radius: 22px; background: var(--fam-white); }
.family-contact-card__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--fam-blue-50); color: var(--fam-royal); }
.family-contact-card.is-primary .family-contact-card__icon { background: var(--fam-amber); color: var(--fam-navy); }
.family-contact-card h2 { margin: 0; font-family: var(--fam-head); font-weight: 800; font-size: 24px; color: var(--fam-navy); }
.family-contact-card p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--fam-muted); }
.family-contact-card .family-btn { margin-top: auto; }
.family-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.family-links a { display: flex; align-items: center; min-height: 52px; padding: 0 20px; border: 1px solid var(--fam-line); border-radius: 14px; background: var(--fam-white); font-weight: 700; color: var(--fam-navy); }
.family-links a:hover { border-color: var(--fam-royal); color: var(--fam-royal); }
.family-cta-band { padding-block: 64px; background: var(--fam-navy); }
.family-cta-band .family-inner { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.family-cta-band .family-h2 { color: var(--fam-white); }
.family-simple-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.family-simple-table th, .family-simple-table td { padding: 14px 18px; border-bottom: 1px solid var(--fam-line); text-align: left; vertical-align: top; }
.family-simple-table thead th { background: var(--fam-ice); font-size: 14px; color: var(--fam-muted); }
.family-simple-table tbody tr:last-child > * { border-bottom: 0; }
.family-simple-table tbody th { font-weight: 700; color: var(--fam-navy); }
.family-simple-table td { color: var(--fam-muted); }
.family-faq-group + .family-faq-group { margin-top: 40px; }
.family-faq-group .family-h2 { margin-bottom: 18px; text-align: left; font-size: clamp(22px, 1vw + 16px, 28px); }

@media (max-width: 1080px) {
	.family-devices__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.family-plans__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
	.family-two-col, .family-links { grid-template-columns: minmax(0, 1fr); }
	.family-page-hero { padding-block: 32px 24px; }
	.family-cta-band { padding-block: 44px; }
}
@media (max-width: 639px) {
	.family-selector { align-items: stretch; }
	.family-selector__group { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.family-selector__group::-webkit-scrollbar { display: none; }
	.family-selector__btn { flex: 0 0 auto; min-height: 44px; padding: 10px 14px; font-size: 14px; white-space: nowrap; }
	.family-plans__cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.family-plan { margin-block: 0; padding: 18px 16px 10px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "save per" "cta cta" "alt alt"; grid-template-rows: auto auto auto auto; column-gap: 12px; row-gap: 6px; align-items: center; }
	.family-plan.is-featured { padding-top: 26px; margin-top: 12px; }
	.family-plan[data-months="12"] { order: 1; }
	.family-plan[data-months="6"] { order: 2; }
	.family-plan[data-months="3"] { order: 3; }
	.family-plan[data-months="1"] { order: 4; }
	.family-plan__badge { left: 16px; transform: none; }
	.family-plan__price { justify-self: end; }
	.family-plan__total { font-size: 40px; }
	.family-plan__per { justify-self: end; text-align: right; font-size: 15px; }
	.family-plan__save { margin-top: 0; padding: 5px 10px; font-size: 12px; white-space: nowrap; }
	.family-plan__cta { margin-top: 8px; }
	.family-table-wrap:has(.family-price-table) { display: none; }
	.family-price-list { display: block; }
	.family-devices__grid, .family-devices__grid--page { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.family-device { padding: 18px 10px 12px; }
	.family-logo { height: 24px; }
	.family-logo--samsung { width: 92px; }
	.family-logo--macos { width: 60px; }
	.family-logo--mask { width: 96px; height: 14px; }
	.family-logo--text { font-size: 16px; }
	.family-device__logos { gap: 8px; }
	.family-device__name { font-size: 15px; }
	.family-numbered li { padding: 16px 16px 16px 62px; }
	.family-numbered li::before { left: 14px; }
}

/* F3.1: customer reviews. The section is only printed when 3 or more approved reviews with consent exist. */
.family-reviews__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.family-review { box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 26px; background: var(--fam-ice); border: 1px solid var(--fam-line); border-radius: 20px; }
.family-review__stars { display: inline-flex; gap: 2px; color: var(--fam-muted); }
.family-review__star { display: inline-flex; }
.family-review__star.is-on { color: var(--fam-royal); }
.family-review__star.is-on svg { fill: currentColor; }
.family-review__text { margin: 0; font-size: 17px; line-height: 1.6; color: var(--fam-navy); overflow-wrap: anywhere; }
.family-review__text p { margin: 0; }
.family-review__who { margin: auto 0 0; font-weight: 700; color: var(--fam-navy); }
.family-review__meta { margin: -8px 0 0; font-size: 14px; color: var(--fam-muted); }
@media (max-width: 900px) {
	.family-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
	.family-reviews__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.family-review { padding: 20px; }
}

/* F3.2: /pricing/ checks under the plan cards, one item per line on phones, left-aligned. */
@media (max-width: 639px) {
	.family-checks--center { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: 10px; }
	.family-checks--center li { align-items: flex-start; text-align: left; }
	.family-checks--center li::before { margin-top: 2px; }
}