/* Opt-in presentation for six calculators. The approved benefit page is excluded. */
.family-page {
 --family-panel:radial-gradient(ellipse at 5% 0%,#2c477a44,transparent 75%),linear-gradient(135deg,#172a46,#17243a);
 --family-border:#344e74; --family-ink:#f1f4ff; --family-label:#bdcde9; --family-muted:#aebfdd;
 --family-subtle:linear-gradient(135deg,#20324f,#1b2b43); --family-input:#0e1b2d; --family-table-head:#203652;
 --family-stripe:#21335046; --family-total:#2e4163; --family-total-ink:#c8dcff;
}
.tool-studio.vc-workspace main.family-page { padding-top:26px; }
.tool-studio.vc-workspace .family-page > .family-hero,.tool-studio.studio-rollout .family-page > .family-layout { width:100%; max-width:1240px; margin-inline:auto; }
.tool-studio.vc-workspace .family-hero { display:flex; align-items:center; gap:18px; padding-bottom:20px; }
.family-hero-icon { flex:0 0 68px; display:grid; place-items:center; width:68px; height:68px; border:1px solid #2287c1; border-radius:15px; color:#31c8ff; background:linear-gradient(145deg,#143c62,#151d39); box-shadow:0 0 22px #0a91ff17; }
.family-hero-icon svg { width:32px; height:32px; }
.family-hero-copy { min-width:0; flex:1; }
.tool-studio.vc-workspace .family-hero h1 { font-size:clamp(2rem,3vw,2.8rem); }
.tool-studio.vc-workspace .family-hero .lead { margin-top:5px; font-size:14px; line-height:1.5; }
.tool-studio.vc-workspace .family-hero .muted { margin:0 0 5px; font-size:10px; }
.tool-studio.vc-workspace .family-hero-tip { display:flex; align-items:center; gap:12px; width:252px; flex:0 0 252px; margin:0; padding:13px 15px; border:1px solid #364468; border-radius:12px; color:#bfcee8; background:linear-gradient(125deg,#18283e,#1b203d); font-size:13px; line-height:1.45; }
.family-hero-tip > span { color:#ffd25b; font-size:21px; text-shadow:0 0 12px #ffd25b; }
.tool-studio.studio-rollout .family-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:18px; align-items:start; }
.tool-studio.studio-rollout .studio-calculator.family-layout > .form-card { display:grid; align-content:start; gap:10px; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
.family-right { display:grid; align-content:start; gap:10px; min-width:0; container:family-results / inline-size; }
.tool-studio.studio-rollout .family-layout .form-error:empty { display:none; }
.family-layout .form-error:not(:empty) { margin:0; padding:10px 12px; border:1px solid #a96f93; border-radius:8px; }
.tool-studio.studio-rollout .family-layout .family-block,.tool-studio.studio-rollout .family-layout .family-right > .results { margin:0; padding:16px; min-width:0; border:1px solid var(--family-border); border-radius:14px; background:var(--family-panel); box-shadow:inset 0 1px 0 #c4d6ff13,0 10px 24px #02081733; }
.tool-studio.studio-rollout .family-block > legend { display:flex; align-items:center; gap:13px; float:left; width:100%; margin:0 0 14px; padding:0; }
.family-block > legend::before { content:none; }
.family-block > legend > span:last-child,.family-quick h2 > span:last-child { display:grid; gap:2px; min-width:0; }
.family-block > legend strong,.tool-studio.vc-workspace .family-quick h2 strong { color:#8ddaff; font-size:15px; line-height:1.25; }
.family-block > legend small,.family-quick h2 small { color:var(--family-muted); font-size:13px; font-weight:400; line-height:1.4; }
.family-step { flex:0 0 37px; display:grid; place-items:center; width:37px; height:37px; border-radius:50%; color:#fff; background:linear-gradient(135deg,#5aa0ff,#424dd8); font-size:18px; font-weight:750; box-shadow:0 0 15px #5878ff55; }
.family-block > :not(legend) { clear:both; }
.tool-studio.studio-rollout .family-layout .fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 16px; align-items:stretch; }
.tool-studio.studio-rollout .family-layout .fields > .field:not(.checkbox-field) { display:grid; grid-template-rows:subgrid; grid-row:span 3; gap:6px; }
.tool-studio.studio-rollout .family-layout .vat-rate-block .fields { grid-template-columns:minmax(0,1fr); }
.tool-studio.studio-rollout .family-layout .vat-rate-block .fields > .field { display:grid; grid-template-rows:none; grid-row:auto; gap:6px; }
.tool-studio.studio-rollout .family-layout .vat-rate-block { padding-block:12px; }
.tool-studio.studio-rollout .family-layout .vat-rate-block > legend { margin-bottom:8px; }
.tool-studio.studio-rollout .family-layout .field { min-width:0; align-content:start; gap:6px; }
.tool-studio.studio-rollout .family-layout .field.wide { grid-column:1/-1; }
.tool-studio.studio-rollout .family-layout .field label,.family-layout .field-question { color:var(--family-label); font-size:14px; font-weight:600; line-height:1.35; }
.family-layout .field-label-help { display:block; width:auto; line-height:1.35; }
.tool-studio.studio-rollout .family-layout .field-label-help > label { display:inline; }
.tool-studio.studio-rollout .family-layout .field :is(input,select):not([type=checkbox]):not([type=radio]) { box-sizing:border-box; width:100%; max-width:100%; min-width:0; min-height:39px; margin:0; padding:7px 10px; border:1px solid #456180; border-radius:9px; background-color:var(--family-input); color:var(--family-ink); font-size:15px; }
.tool-studio.studio-rollout .family-layout .field select { appearance:none; padding-right:34px!important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%2378a9d4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:12px 8px!important; background-repeat:no-repeat!important; background-position:right 12px center!important; }
.family-layout .field input[type=number] { appearance:textfield; -moz-appearance:textfield; }
.family-layout .field input[type=number]::-webkit-inner-spin-button,.family-layout .field input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.tool-studio.studio-rollout .family-layout .field small,.tool-studio.studio-rollout .family-layout .form-note { margin:0; color:var(--family-muted); font-size:13px; line-height:1.45; }
.family-layout .checkbox-field { display:flex; align-items:center; gap:8px; grid-column:1/-1; }
.family-layout .checkbox-field input { flex:none; }
.family-layout .family-advanced { margin-top:12px; border:1px solid var(--family-border); border-radius:9px; padding:10px; background:var(--family-subtle); }
.family-advanced > summary { color:var(--family-label); font-size:14px; font-weight:650; }
.family-advanced[open] > summary { margin-bottom:12px; }
.tool-studio.studio-rollout .family-block .choice-group { margin-top:12px; }
.tool-studio.studio-rollout .family-block .choice-group legend { margin-bottom:8px; color:var(--family-label); font-size:14px; }
.family-block > h3 { margin:14px 0 10px; color:var(--family-label); font-size:14px; }
.family-layout #quick-contribution > .fields { margin-top:6px; }
.tool-studio.studio-rollout .family-layout #quick-contribution { display:block; grid-column:1/-1; grid-row:auto; }
.family-layout .field :is(input,select) { align-self:start; }
.family-layout .results > :is(.severance-detail,.unemployment-detail,.unemployment-limit,.unemployment-timeline) { margin:0; }
.family-layout .results > #detail-result { margin:0; }
.family-block[data-mode=compare] .fields > .field:last-child { grid-column:1/-1; }
.tool-studio.studio-rollout .family-layout .family-right > .results { position:static; display:grid; gap:14px; align-content:start; }
.family-results-head { display:flex; align-items:center; gap:11px; }
.family-results-head > span { flex:none; color:#33caff; }
.family-results-head .benefit-recalculate { flex:none; margin-left:auto; }
.tool-studio.vc-workspace .family-results-head .benefit-recalculate { min-height:34px; padding:6px 10px; border-color:#6798f4; color:#c4dcff; background:linear-gradient(#244678,#263575); font-size:12px; }
.family-results-head .benefit-recalculate svg { width:15px; height:15px; flex:none; }
.family-results-head svg { width:25px; height:25px; }
.tool-studio.vc-workspace .family-results-head h2 { margin:0; color:var(--family-ink); font-size:16px; line-height:1.3; }
.family-results-head p { margin:2px 0 0; color:var(--family-muted); font-size:13px; line-height:1.4; }
.family-major-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 10px; }
.tool-studio.studio-rollout .family-layout .family-metric { display:grid; grid-template-rows:subgrid; grid-row:span 3; min-width:0; padding:12px 9px; gap:7px; border:1px solid var(--metric-border); border-radius:10px; background:var(--metric-bg); text-align:center; box-shadow:none; }
.family-page [data-tone=profit] { --metric-border:#1bbbaa; --metric-bg:linear-gradient(145deg,#10565d88,#10334688); --metric-title:#69ffdc; --concept-bg:#136d69; }
.family-page [data-tone=ratio] { --metric-border:#3188ec; --metric-bg:linear-gradient(145deg,#174a8188,#182a5288); --metric-title:#8bd9ff; --concept-bg:#2367a6; }
.family-page [data-tone=threshold] { --metric-border:#a345ed; --metric-bg:linear-gradient(145deg,#57338c88,#2c235888); --metric-title:#e6a4ff; --concept-bg:#79359e; }
.tool-studio.vc-workspace main.family-page .family-metric h3,.tool-studio.vc-workspace main.family-page .family-quick-card h3 { color:var(--metric-title); }
.tool-studio.vc-workspace main.family-page .family-secondary h3 { color:var(--family-label); }
.tool-studio.vc-workspace .family-metric h3 { display:flex; align-items:center; justify-content:center; gap:5px; margin:0; min-width:0; color:var(--metric-title); font-size:13px; line-height:1.3; }
.family-metric-icon { flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--concept-bg); }
.family-metric-icon svg { width:18px; height:18px; }
.tool-studio.studio-rollout .family-layout .family-metric strong { display:block; margin:0; color:var(--family-ink); font-size:clamp(1.25rem,2vw,1.7rem); line-height:1.25; letter-spacing:-.025em; overflow-wrap:anywhere; white-space:normal; font-variant-numeric:tabular-nums; }
.tool-studio.studio-rollout .family-layout .family-metric p { margin:0; color:var(--family-label); font-size:13px; line-height:1.4; }
.family-metric p:empty { display:none; }
.tool-studio.studio-rollout .family-layout .family-metric.negative { border-color:#d66d91; background:#4b263b; }
.tool-studio.studio-rollout .family-layout .family-metric.negative :is(strong,h3) { color:#ffc4d7; }
.family-secondary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.family-secondary { min-width:0; padding:10px 11px; border:1px solid var(--family-border); border-radius:10px; background:var(--family-subtle); }
.family-secondary-grid > :last-child:nth-child(odd) { grid-column:1/-1; }
.tool-studio.vc-workspace .family-secondary h3 { margin:0 0 4px; color:var(--family-label); font-size:13px; font-weight:500; line-height:1.4; }
.family-secondary strong { color:var(--family-ink); font-size:15px; line-height:1.3; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.family-breakdown { min-width:0; border:1px solid var(--family-border); border-radius:10px; overflow:hidden; }
.tool-studio.vc-workspace .family-breakdown table { width:100%; margin:0; border-collapse:collapse; font-size:13px; }
.tool-studio.vc-workspace .family-breakdown caption { padding:10px 12px; color:var(--family-ink); background:var(--family-table-head); font-size:14px; font-weight:700; text-align:left; }
.tool-studio.vc-workspace .family-breakdown :is(th,td) { padding:6px 12px; border-bottom:1px solid var(--family-border); color:var(--family-label); font-size:13px; line-height:1.35; }
.family-breakdown th { font-weight:450; text-align:left; }
.family-breakdown td { text-align:right; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; }
.family-breakdown tbody tr:nth-child(even) { background:var(--family-stripe); }
.family-breakdown tfoot { background:var(--family-total); }
.tool-studio.vc-workspace .family-breakdown tfoot :is(th,td) { border:0; font-weight:750; color:var(--family-total-ink); }
.tool-studio.vc-workspace .family-quick h2 { display:flex; align-items:center; gap:13px; margin:0 0 11px; }
.family-quick-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.family-quick-card { display:flex; align-items:center; gap:10px; min-width:0; padding:10px; border:1px solid var(--family-border); border-radius:10px; background:var(--family-subtle); }
.family-concept-icon { flex:0 0 34px; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:var(--metric-title); background:var(--concept-bg); }
.family-quick-card svg { width:20px; height:20px; }
.tool-studio.vc-workspace .family-quick-card h3 { margin:0 0 2px; color:var(--metric-title); font-size:13px; }
.family-quick-card p { margin:0; color:var(--family-label); font-size:13px; line-height:1.4; }
.family-layout .results-note { margin:0; color:var(--family-muted); font-size:13px; line-height:1.5; }
.family-right > .tool-help-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin:0; }
.family-right > .tool-help-grid > .tool-help-item { min-width:0; margin:0; padding:0; border:1px solid var(--family-border); border-radius:12px; background:var(--family-panel); box-shadow:inset 0 1px 0 #c4d6ff13,0 8px 18px #02081724; }
.family-right .tool-help-item > summary { min-height:58px; }
.family-right .tool-help-content { padding:0 16px 16px; font-size:13px; line-height:1.55; }
:root[data-theme=light] .family-page { --family-panel:linear-gradient(135deg,#fff,#edf4ff); --family-border:#b9cde6; --family-ink:#203957; --family-label:#274a71; --family-muted:#536e8b; --family-subtle:#f2f7ff; --family-input:#fff; --family-table-head:#e4eefb; --family-stripe:#f0f5fc; --family-total:#dceafb; --family-total-ink:#1c4e81; }
:root[data-theme=light] .family-page [data-tone=profit] { --metric-bg:linear-gradient(145deg,#e0f7f3,#f0fbf8); --metric-title:#067c70; --concept-bg:#c2eee5; }
:root[data-theme=light] .family-page [data-tone=ratio] { --metric-bg:linear-gradient(145deg,#e2efff,#f1f7ff); --metric-title:#155da2; --concept-bg:#c6e3fb; }
:root[data-theme=light] .family-page [data-tone=threshold] { --metric-bg:linear-gradient(145deg,#efe3fc,#f7f1ff); --metric-title:#7833ac; --concept-bg:#e2cef4; }
:root[data-theme=light] .tool-studio.vc-workspace .family-block legend strong,:root[data-theme=light] .tool-studio.vc-workspace .family-quick h2 strong { color:#155d96; }
:root[data-theme=light] .tool-studio.vc-workspace .family-layout .field :is(input,select):not([type=checkbox]):not([type=radio]) { background-color:#fff; border-color:#a4bad2; color:#203957; }
:root[data-theme=light] .tool-studio.vc-workspace .family-layout .family-metric { background:var(--metric-bg); border-color:var(--metric-border); }
:root[data-theme=light] .tool-studio.vc-workspace .family-layout .family-metric.negative { background:#fff0f4; border-color:#ce6f90; }
:root[data-theme=light] .tool-studio.vc-workspace .family-layout .family-metric.negative :is(strong,h3) { color:#a22b50; }
:root[data-theme=light] .tool-studio.vc-workspace .family-layout .family-block,:root[data-theme=light] .tool-studio.vc-workspace .family-layout .family-right > .results { background:var(--family-panel); border-color:var(--family-border); box-shadow:0 8px 22px #34547e15; }
:root[data-theme=light] .tool-studio.vc-workspace .family-hero-tip { color:#365472; background:#f3f7ff; border-color:#c4d4e9; }
@container family-results (max-width:430px) { .family-major-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.family-major-grid > :last-child:nth-child(odd) { grid-column:1/-1; } }
@media(max-width:1100px) { .tool-studio.studio-rollout .family-layout { grid-template-columns:minmax(0,1fr); } }
@media(max-width:1100px) { .tool-studio.vc-workspace .family-hero-tip { display:none; } }
@media(max-width:600px) { .tool-studio.vc-workspace .family-hero { align-items:flex-start; gap:10px; }.family-hero-icon { flex-basis:45px; width:45px; height:45px; }.family-hero-icon svg { width:24px; height:24px; }.family-major-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.family-major-grid > :last-child:nth-child(odd) { grid-column:1/-1; }.tool-studio.studio-rollout .family-layout .family-block,.tool-studio.studio-rollout .family-layout .family-right > .results { padding:14px; } }
@media(max-width:480px) { .family-results-head { flex-wrap:wrap; }.family-results-head > div:nth-child(2) { flex:1 1 calc(100% - 36px); min-width:0; }.family-results-head .benefit-recalculate { margin-left:auto; } }
@media(max-width:380px) { .tool-studio.studio-rollout .family-layout .fields,.family-major-grid,.family-secondary-grid,.family-quick-grid { grid-template-columns:minmax(0,1fr); }.family-major-grid > :last-child:nth-child(odd) { grid-column:auto; }.tool-studio.vc-workspace .family-breakdown :is(th,td) { padding-inline:8px; } }