h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* =====================================================================
   Member dashboard — "John 1" concept (ported from the design bake-off)
   A care command-center: gradient-tinted header stats, a "start here"
   resume panel, a service list that borrows GLM1's row hover mechanic
   (accent bar slides in, row nudges right, tint, launch button ignites),
   and a member rail. Global (not scoped) so it also styles the inline-SVG
   icons injected via MarkupString. Token aliases map the concept's short
   names onto brand.css. All rules are namespaced under .j1-root.
   ===================================================================== */
.dash-wrap { padding-top: 2.25rem; padding-bottom: 4rem; }

.j1-root {
    /* Primary palette sampled from the marketing hero — dark purple behind the logo
       and the blue behind the "h" in "health". */
    --blue: #095fd6;
    --blue-dark: #084ab5;
    --purple: #33379a;
    --green: var(--brand-green);
    --grad: linear-gradient(90deg, #33379a 0%, #095fd6 100%);
    --surface: var(--brand-surface);
    --soft: var(--brand-bg-soft);
    --ink: var(--brand-ink);
    --body: var(--brand-body);
    --muted: var(--brand-muted);
    --line: var(--brand-line);
    --line-strong: #d3dcea;
    --shadow: var(--brand-shadow);
    --shadow-lg: var(--brand-shadow-lg);
    --r: var(--brand-radius);
    --r-sm: var(--brand-radius-sm);
    --r-lg: 22px;
    --disp: var(--brand-display);
    --font: var(--brand-font);
}

/* Reset the brand's default heading/paragraph margins inside the dashboard. */
.j1-root h2, .j1-root h3, .j1-root h4 {
    font-family: var(--disp); color: var(--ink); letter-spacing: -.01em;
    line-height: 1.2; margin: 0; font-weight: 700;
}
.j1-root p { margin: 0; }
.j1-root button { font-family: inherit; }
.j1-root .ico {
    width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.7;
    fill: none; stroke-linecap: round; stroke-linejoin: round; display: block;
}

/* ---- Header: greeting + at-a-glance stats ---- */
.j1-root .j1-top {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 18px 28px; padding: 22px 24px; margin-bottom: 24px; border-radius: var(--r-lg);
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--purple) 11%, var(--surface)),
        color-mix(in srgb, var(--blue) 12%, var(--surface)));
    border: 1px solid color-mix(in srgb, var(--purple) 16%, var(--line));
}
.j1-root .j1-greet { min-width: 0; }
.j1-root .j1-kicker {
    font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    background: var(--grad); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.j1-root .j1-greet h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: .3rem; }
.j1-root .j1-headstats { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; }
.j1-root .j1-hs { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.j1-root .j1-hs dt {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
    font-weight: 700; color: var(--muted); margin: 0;
}
.j1-root .j1-hs dd {
    font-family: var(--disp); font-weight: 700; font-size: 1rem; color: var(--ink);
    margin: 0; font-variant-numeric: tabular-nums;
}

/* ---- Two-column body: main + member rail ---- */
.j1-root .j1-grid { display: grid; grid-template-columns: 1fr 280px; gap: 26px; align-items: start; }
@media (max-width: 880px) { .j1-root .j1-grid { grid-template-columns: 1fr; } }
.j1-root .j1-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* ---- "Start here" resume panel ---- */
.j1-root .j1-resume {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 18px; padding: 22px 24px; border-radius: var(--r); border: 1px solid var(--line);
    background: var(--surface); box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.j1-root .j1-resume::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad); }
.j1-root .j1-resume-body { display: flex; align-items: center; gap: 18px; min-width: 0; flex: 1; }
.j1-root .j1-resume-ic {
    width: 58px; height: 58px; border-radius: 16px; flex: none; display: grid; place-items: center;
    color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, transparent);
}
.j1-root .j1-resume-ic .ico { width: 30px; height: 30px; }
.j1-root .j1-resume-tx { min-width: 0; }
.j1-root .j1-resume-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--blue); }
.j1-root .j1-resume-tx h3 { font-size: 1.25rem; margin-top: 3px; }
.j1-root .j1-resume-tx p { font-size: .88rem; color: var(--muted); margin-top: 5px; max-width: 50ch; }
.j1-root .j1-resume-go {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    border: 0; background: var(--grad); color: #fff; font-weight: 600; font-size: .92rem;
    border-radius: 999px; padding: 12px 22px; cursor: pointer; box-shadow: var(--shadow); transition: transform .15s ease;
}
.j1-root .j1-resume-go:hover { transform: translateY(-1px); }
.j1-root .j1-resume-go .ico { width: 16px; height: 16px; transition: transform .15s ease; }
.j1-root .j1-resume-go:hover .ico { transform: translateX(3px); }

/* ---- Featured-care carousel (replaces the single "Start here" panel) ---- */
.j1-root .j1-hero {
    position: relative; border-radius: var(--r); border: 1px solid var(--line);
    overflow: hidden; box-shadow: var(--shadow); background: var(--surface);
}
.j1-root .j1-hero-track { position: relative; min-height: 268px; }
.j1-root .j1-slide {
    position: absolute; inset: 0; display: flex; align-items: stretch;
    opacity: 0; visibility: hidden; transition: opacity .6s ease;
}
.j1-root .j1-slide.is-active { opacity: 1; visibility: visible; }
.j1-root .j1-slide-media { position: absolute; inset: 0; }
.j1-root .j1-slide-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.j1-root .j1-slide-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(12,20,38,.94) 0%, rgba(12,20,38,.78) 40%, rgba(12,20,38,.20) 100%);
}
.j1-root .j1-slide-body {
    position: relative; z-index: 2; display: flex; align-items: center; gap: 20px;
    padding: 32px 36px 32px 76px; max-width: 690px; color: #fff;
}
.j1-root .j1-slide-ic {
    width: 56px; height: 56px; border-radius: 16px; flex: none; display: grid; place-items: center;
    color: #fff; background: color-mix(in srgb, var(--c) 60%, transparent);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.j1-root .j1-slide-ic .ico { width: 28px; height: 28px; }
.j1-root .j1-slide-tx { min-width: 0; }
.j1-root .j1-slide-kicker { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; opacity: .88; }
.j1-root .j1-slide-tx h3 { font-size: 1.4rem; line-height: 1.15; margin-top: 4px; color: #fff; }
.j1-root .j1-slide-tx p { font-size: .9rem; line-height: 1.45; margin-top: 7px; color: rgba(255,255,255,.86); max-width: 46ch; }
.j1-root .j1-slide-go {
    margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    border: 0; background: #fff; color: #0c1426; font-weight: 700; font-size: .9rem;
    border-radius: 999px; padding: 11px 20px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.j1-root .j1-slide-go:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.j1-root .j1-slide-go .ico { width: 15px; height: 15px; transition: transform .15s ease; }
.j1-root .j1-slide-go:hover .ico { transform: translateX(3px); }
.j1-root .j1-hero-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.4); background: rgba(12,20,38,.35); color: #fff;
    cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .15s ease;
}
.j1-root .j1-hero-nav:hover { background: rgba(12,20,38,.62); }
.j1-root .j1-hero-nav.prev { left: 14px; }
.j1-root .j1-hero-nav.next { right: 14px; }
.j1-root .j1-hero-nav .ico { width: 18px; height: 18px; }
.j1-root .j1-hero-dots { position: absolute; left: 76px; bottom: 16px; z-index: 3; display: flex; gap: 8px; }
.j1-root .j1-dot {
    width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
    background: rgba(255,255,255,.45); transition: width .2s ease, background .2s ease;
}
.j1-root .j1-dot.is-active { width: 22px; background: #fff; }

/* ---- Service list ---- */
.j1-root .j1-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.j1-root .j1-list-head h3 { font-size: 1.05rem; }
.j1-root .j1-list-note { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--muted); font-weight: 600; }
.j1-root .j1-list-note .ico { width: 15px; height: 15px; color: var(--green); }

.j1-root .j1-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.j1-root .j1-row {
    display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 16px;
    padding: 15px 18px; border-top: 1px solid var(--line); cursor: pointer; position: relative;
    transition: background .16s ease, padding-left .16s ease;
}
.j1-root .j1-row:first-child { border-top: 0; }
/* GLM1 hover mechanic: accent bar slides in, row nudges right, tint, button ignites. */
.j1-root .j1-row::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--c); transform: scaleY(0); transform-origin: center; transition: transform .2s ease;
}
.j1-root .j1-row:hover { background: color-mix(in srgb, var(--c) 6%, var(--surface)); padding-left: 26px; }
.j1-root .j1-row:hover::before { transform: scaleY(1); }
.j1-root .j1-ic {
    width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center;
    color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); transition: transform .16s ease;
}
.j1-root .j1-row:hover .j1-ic { transform: scale(1.06); }
.j1-root .j1-ic .ico { width: 22px; height: 22px; }
.j1-root .j1-tx { min-width: 0; }
.j1-root .j1-tx h4 { font-size: 1rem; line-height: 1.2; margin: 0; }
.j1-root .j1-tag { display: block; font-size: .8rem; font-weight: 600; color: var(--c); margin-top: 2px; }
.j1-root .j1-act { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: none; }
.j1-root .j1-go {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
    font-weight: 600; font-size: .85rem; border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: .16s ease;
}
.j1-root .j1-go .ico { width: 15px; height: 15px; transition: transform .15s ease; }
.j1-root .j1-row:hover .j1-go { background: var(--c); color: #fff; border-color: var(--c); }
.j1-root .j1-row:hover .j1-go .ico { transform: translateX(3px); }
.j1-root .j1-stat { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 6px; font-size: .74rem; color: var(--muted); white-space: nowrap; }
.j1-root .j1-stat .d { width: 7px; height: 7px; border-radius: 50%; background: #22a35f; flex: none; }

/* ---- No active services (ineligible member) empty state ---- */
.j1-root .j1-empty {
    border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
    box-shadow: var(--shadow); padding: 48px 36px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 268px; justify-content: center;
}
.j1-root .j1-empty-ic {
    width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 4px;
    color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent);
}
.j1-root .j1-empty-ic .ico { width: 28px; height: 28px; }
.j1-root .j1-empty h3 { font-size: 1.15rem; margin: 0; }
.j1-root .j1-empty p { font-size: .9rem; color: var(--muted); margin: 0; max-width: 46ch; }
.j1-root .j1-empty .j1-empty-help { font-weight: 600; color: var(--ink); }

/* ---- Member rail (sticky, clears the 76px sticky header) ---- */
.j1-root .j1-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 96px; }
@media (max-width: 880px) { .j1-root .j1-side { position: static; } }
.j1-root .j1-side .m-card { border: 1px solid var(--line); border-radius: var(--r); padding: 20px; background: var(--soft); }
.j1-root .j1-side .m-top { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.j1-root .j1-side .m-top .av {
    width: 46px; height: 46px; border-radius: 50%; background: var(--grad); color: #fff;
    display: grid; place-items: center; font-family: var(--disp); font-weight: 700;
}
.j1-root .j1-side .m-top .nm { font-family: var(--disp); font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.j1-root .j1-side .m-top .pl { font-size: .8rem; color: var(--muted); }
.j1-root .j1-side .m-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.j1-root .j1-side .m-row .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.j1-root .j1-side .m-row .v { font-size: .9rem; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; word-break: break-word; }
.j1-root .j1-side .pill {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 600;
    color: #5b21b6; background: #f0eafe; border: 1px solid #d9caf9; padding: 5px 12px; border-radius: 999px;
}
.j1-root .j1-side .pill .d { width: 8px; height: 8px; border-radius: 50%; background: var(--purple); }
/* Ineligible variant of the member badge — muted amber, clearly not the "active" purple. */
.j1-root .j1-side .pill.pill-inelig { color: #92600b; background: #fbf1dc; border-color: #f0dcae; }
.j1-root .j1-side .pill.pill-inelig .d { background: #b5810f; }
.j1-root .j1-side .support { border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.j1-root .j1-side .support h4 { font-size: .95rem; margin-bottom: 6px; }
.j1-root .j1-side .support p { font-size: .83rem; color: var(--muted); }
.j1-root .j1-side .support a { color: var(--blue-dark); font-weight: 600; font-size: .86rem; text-decoration: none; display: inline-block; margin-top: 8px; }

/* Eligible dependents card — sits under the member card, same shell as .m-card. */
.j1-root .j1-side .dep-card { border: 1px solid var(--line); border-radius: var(--r); padding: 20px; background: var(--soft); }
.j1-root .j1-side .dep-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.j1-root .j1-side .dep-list { list-style: none; margin: 0; padding: 0; }
.j1-root .j1-side .dep-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); }
.j1-root .j1-side .dep-nm { font-size: .9rem; color: var(--ink); font-weight: 600; flex: 1 1 auto; }
.j1-root .j1-side .dep-rel { font-size: .78rem; color: var(--muted); text-align: right; white-space: nowrap; }
.j1-root .j1-side .dep-age { font-size: .78rem; color: var(--muted); text-align: right; white-space: nowrap; min-width: 3.4em; }
.j1-root .j1-side .dep-of { margin: 0; font-size: .9rem; color: var(--muted); }
.j1-root .j1-side .dep-of strong { display: block; margin-top: 2px; font-size: 1rem; color: var(--ink); font-weight: 700; }

@media (max-width: 560px) {
    .j1-root .j1-row { grid-template-columns: 40px 1fr auto; gap: 12px; padding: 13px 14px; }
    .j1-root .j1-row:hover { padding-left: 18px; }
    .j1-root .j1-resume { padding: 18px; }
    .j1-root .j1-resume-go { width: 100%; justify-content: center; }
    .j1-root .j1-hero-track { min-height: 240px; } /* 75% of the prior 320px — shorter banner on mobile */
    .j1-root .j1-slide-body { padding: 22px; gap: 14px; }
    .j1-root .j1-slide-ic { width: 46px; height: 46px; }
    .j1-root .j1-slide-ic .ico { width: 23px; height: 23px; }
    .j1-root .j1-slide-tx h3 { font-size: 1.2rem; }
    .j1-root .j1-slide-media::after { background: linear-gradient(180deg, rgba(12,20,38,.5) 0%, rgba(12,20,38,.86) 62%, rgba(12,20,38,.94) 100%); }
    .j1-root .j1-hero-nav { display: none; }
    .j1-root .j1-hero-dots { left: 22px; }
}

/* Service interstitial popup — ONE shared shell for every service tile's "Launch" button.
   Rides the .svc-modal shell (backdrop / X / Escape come from brand.css + site.js); only the
   two-column body below is dashboard-specific. This block + the single @foreach template in
   Dashboard.razor are the ONLY places to change layout/styling for every service's popup.
   The accent (kicker, checkmarks, media tint, CTA) is per-service via --c, set on the modal
   element from the service's Color — so one template themes itself for each service. */
.svc-info-modal .svc-modal-card { width: min(760px, 100%); max-width: 760px; padding: 0; overflow: hidden; }
.svc-info-modal .svc-modal-x { top: .75rem; right: .75rem; }
.svc-info-body { display: grid; grid-template-columns: .9fr 1.1fr; }
.svc-info-media { position: relative; background: #eef4ff; background: color-mix(in srgb, var(--c, #1875f8) 12%, #fff); min-height: 100%; }
.svc-info-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-info-tx { padding: 2rem 2.1rem 2.1rem; display: flex; flex-direction: column; }
.svc-info-kicker { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c, #1875f8); }
.svc-info-tx h3 { margin: .35rem 0 .65rem; font-size: 1.5rem; line-height: 1.15; color: var(--ink); }
.svc-info-tx p { margin: 0 0 1.1rem; color: var(--muted); font-size: .93rem; line-height: 1.55; }
.svc-info-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: .55rem; }
.svc-info-list li { display: flex; align-items: center; gap: .6rem; font-size: .88rem; color: var(--ink); }
.svc-info-list i { color: var(--c, #16b981); font-size: .95rem; flex: none; }
.svc-info-go {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; white-space: nowrap;
    background: var(--c, #1875f8); color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem;
    border: none; border-radius: 999px; padding: 11px 22px; cursor: pointer; transition: .16s ease;
}
.svc-info-go:hover { filter: brightness(.93); }
.svc-info-go .ico { width: 16px; height: 16px; }
/* The CTA is a POST form (antiforgery + new tab); the form itself is layout-neutral and the actions row
   inside it lays out the recipient picker + button. */
.svc-info-go-form { margin: 0; }
/* Care-recipient picker sits to the LEFT of the launch button, both aligned along the bottom so the
   button lines up with the select (not its label). Wraps to a column on narrow widths. */
.svc-info-actions { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.svc-info-recipient { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.svc-info-recipient label { font-size: .74rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.svc-info-recipient-select {
    font: inherit; font-size: .9rem; color: var(--ink); background: #fff;
    border: 1px solid var(--line, #d9dee7); border-radius: 10px; padding: 10px 12px;
    max-width: 260px; cursor: pointer;
}
.svc-info-recipient-select:focus-visible { outline: 2px solid var(--c, #1875f8); outline-offset: 1px; }
.svc-info-partner { margin-top: 1rem; font-size: .76rem; color: var(--muted); }

@media (max-width: 640px) {
    .svc-info-body { grid-template-columns: 1fr; }
    .svc-info-media { min-height: 180px; height: 180px; }
    .svc-info-media img { position: static; height: 180px; }
    .svc-info-tx { padding: 1.5rem 1.5rem 1.75rem; }
}