:root {
  color-scheme: light;
  --ink: #253e30;
  --muted: #5e7264;
  --brand: #315b43;
  --brand-2: #58836b;
  --brand-soft: #e8f0e6;
  --blue-soft: #edf2ec;
  --yellow: #e8a13b;
  --paper: #ffffff;
  --line: #d8e2d6;
  --bg: #f3f6f0;
  --danger: #9a4b3d;
  --shadow: 0 18px 50px rgba(22, 67, 63, .09);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-size: 16px; line-height: 1.7; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; left: 1rem; top: -4rem; background: var(--ink); color: white; padding: .6rem 1rem; z-index: 20; border-radius: .5rem; }
.skip-link:focus { top: 1rem; }

.site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: .75rem max(1rem, calc((100vw - 1160px) / 2)); background: rgba(255,255,255,.97); border-bottom: 1px solid #dbe7eb; backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 3rem; height: 2.65rem; overflow: hidden; }
.brand-mark img { width: 3.25rem; height: auto; display: block; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1.18rem; line-height: 1.2; letter-spacing: .02em; }
.brand small { color: var(--muted); font-size: .76rem; margin-top: .1rem; }
.top-nav { display: flex; align-items: center; gap: 1.8rem; }
.top-nav a { text-decoration: none; color: var(--muted); font-size: .92rem; font-weight: 650; }
.top-nav a:hover, .top-nav a:focus-visible { color: var(--brand); }
.top-nav a:first-child { color: var(--brand); position: relative; }
.top-nav a:first-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.9rem; height: 2px; background: var(--brand); }
.top-nav .nav-action { margin-left: .45rem; padding: .45rem .9rem; border: 1px solid var(--brand); border-radius: .4rem; color: var(--brand); background: white; }
.top-nav .nav-action::after { display: none; }

#main { min-height: calc(100vh - 180px); }
.page { width: min(1160px, calc(100% - 2rem)); margin: 0 auto; padding: 1.4rem 0 3.2rem; }
.hero { display: grid; grid-template-columns: 1.12fr .88fr; gap: 0; min-height: 228px; align-items: stretch; background: white; border-bottom: 1px solid #e3ecef; }
.hero-copy { padding: 1.35rem 1.2rem .8rem 1.2rem; border-radius: 0; background: white; color: var(--ink); box-shadow: none; }
.eyebrow { display: inline-flex; gap: .4rem; align-items: center; font-size: .82rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: .32rem; height: 1rem; border-radius: .2rem; background: var(--brand-2); }
.hero h1 { margin: .2rem 0 .15rem; max-width: none; font-size: clamp(2rem, 4.1vw, 3.25rem); line-height: 1.1; letter-spacing: -.045em; }
.hero p { max-width: 34rem; margin: 0; color: var(--muted); font-size: 1.05rem; letter-spacing: .08em; }
.hero-visual { position: relative; min-height: 228px; overflow: hidden; background: white url('./hero-family-shanghai.png') center 54% / cover no-repeat; }
.hero-note-line { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .45rem; color: var(--muted); font-size: .78rem; letter-spacing: .05em; }
.hero-note-line span + span::before { content: "·"; margin-right: 1rem; color: #a9b8c0; }
.hero-note { display: flex; flex-direction: column; justify-content: space-between; padding: 1.6rem; border-radius: 1.6rem; background: var(--blue-soft); border: 1px solid #d8ebf2; }
.hero-note .big-number { color: var(--brand); font-size: clamp(3.8rem, 9vw, 7rem); font-weight: 820; line-height: .9; }
.hero-note strong { font-size: 1.2rem; }
.hero-note p { color: var(--muted); font-size: .9rem; }

.search-wrap { position: relative; display: grid; grid-template-columns: 1fr auto; margin: .9rem 0 .35rem; }
.search-wrap > i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #7a919e; font-size: 1.15rem; z-index: 1; }
.search-input { width: 100%; padding: .82rem 1rem .82rem 3rem; border: 1px solid #a9c1cc; border-right: 0; border-radius: .55rem 0 0 .55rem; background: var(--paper); color: var(--ink); box-shadow: 0 6px 20px rgba(22,67,63,.04); }
.search-button { min-width: 90px; border: 0; border-radius: 0 .55rem .55rem 0; background: var(--brand); color: white; font-weight: 750; cursor: pointer; }
.search-input:focus { outline: 3px solid rgba(39,117,109,.18); border-color: var(--brand-2); }

.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 1.15rem 0 .7rem; }
.section-head h2 { margin: 0; font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -.025em; }
.section-head p { margin: 0; color: var(--muted); font-size: .9rem; }
.portal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; }
.portal-card { min-height: 145px; display: flex; flex-direction: column; justify-content: space-between; padding: 1rem 1.1rem; border: 1px solid #e0ebee; border-radius: .55rem; background: var(--paper); text-decoration: none; transition: .2s ease; }
.portal-card:nth-child(1) { background: var(--blue-soft); }
.portal-card:nth-child(2) { background: #fff8eb; }
.portal-card:nth-child(3) { background: var(--brand-soft); }
.portal-card:nth-child(4) { background: #edf7fc; }
.portal-card:nth-child(5) { background: #f3f5fb; }
.portal-card:hover { transform: translateY(-4px); border-color: #b7d2cd; box-shadow: var(--shadow); }
.icon-box { display: grid; place-items: center; width: 2.65rem; height: 2.65rem; border-radius: .65rem; color: #2e8db1; background: rgba(255,255,255,.78); font-size: 2.15rem; }
.portal-card:nth-child(2) .icon-box { color: #d78d2f; }
.portal-card:nth-child(3) .icon-box { color: #38a099; }
.portal-card:nth-child(4) .icon-box { color: #4e9dcc; }
.portal-card:nth-child(5) .icon-box { color: #6d73aa; }
.portal-card h3 { margin: .6rem 0 .05rem; font-size: 1.12rem; }
.portal-card p { margin: 0; color: var(--muted); font-size: .88rem; }
.portal-meta { display: flex; justify-content: flex-end; align-items: center; margin-top: .4rem; color: var(--brand); font-size: .82rem; font-weight: 750; }
.portal-meta span:first-child { display: none; }
.portal-meta span:last-child { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: rgba(255,255,255,.72); font-size: 0; }
.portal-meta span:last-child::after { content: "›"; font-size: 1.2rem; }

.content-grid { display: grid; grid-template-columns: 1.45fr .85fr; gap: .75rem; }
.article-list { display: grid; gap: .5rem; }
.article-card { display: grid; grid-template-columns: 2.55rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .56rem .75rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--paper); text-decoration: none; }
.article-card:hover { border-color: #abcac4; }
.tag { display: inline-flex; align-items: center; padding: .18rem .55rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: .76rem; font-weight: 750; }
.article-icon { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: .45rem; color: #2d8db0; background: #edf7fc; font-size: 1.35rem; }
.article-copy { min-width: 0; }
.article-card h3 { margin: 0 0 .05rem; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.article-card p { margin: 0; color: var(--muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.article-tags { display: flex; gap: .4rem; }
.article-tags .tag { font-size: .68rem; font-weight: 650; }
.tool-panel { align-self: stretch; position: static; padding: 1rem; border: 1px solid #d5ecee; border-radius: .55rem; background: #eaf7f8; color: var(--ink); }
.tool-panel h3 { margin: 0 0 .2rem; font-size: 1.1rem; }
.tool-panel p { color: var(--muted); font-size: .82rem; }
.tool-links { display: grid; gap: .55rem; margin-top: 1rem; }
.tool-links a { display: flex; align-items: center; justify-content: space-between; padding: .7rem .8rem; border-radius: .5rem; color: var(--ink); background: white; text-decoration: none; font-weight: 700; font-size: .88rem; box-shadow: 0 4px 12px rgba(22,67,63,.04); }
.tool-links a::after { content: "›"; color: var(--muted); }

.crumbs { display: flex; flex-wrap: wrap; gap: .45rem; color: var(--muted); font-size: .85rem; margin-bottom: 1rem; }
.crumbs a { color: var(--brand); text-decoration: none; }
.article-shell { display: grid; grid-template-columns: minmax(0, 760px) 1fr; gap: 2rem; }
.article { padding: clamp(1.3rem, 4vw, 2.6rem); border: 1px solid var(--line); border-radius: 1.25rem; background: var(--paper); box-shadow: 0 15px 45px rgba(22,67,63,.05); }
.article h1 { margin: .65rem 0 .7rem; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.18; letter-spacing: -.035em; }
.article .lead { color: var(--muted); font-size: 1.06rem; }
.article h2 { margin: 2rem 0 .6rem; font-size: 1.28rem; }
.article ul, .article ol { padding-left: 1.35rem; }
.article li + li { margin-top: .35rem; }
.article table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
.article th, .article td { padding: .7rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.article th { background: var(--brand-soft); }
.notice { margin: 1.2rem 0; padding: 1rem; border-left: 4px solid var(--yellow); background: #fffaf0; border-radius: .3rem .8rem .8rem .3rem; }
.article-aside { align-self: start; position: sticky; top: 5.8rem; padding: 1.15rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--paper); }
.article-aside strong { display: block; margin-bottom: .45rem; }
.article-aside p { color: var(--muted); font-size: .86rem; }
.article-aside a { color: var(--brand); font-weight: 700; text-decoration: none; }

.tools-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.2rem; }
.tool-directory { padding: 1.2rem; border: 1px solid #d6e9e6; border-radius: 1.2rem; background: linear-gradient(135deg, #f2fbfa 0%, #f8fbfd 100%); }
.tool-directory-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.tool-directory-head h2 { margin: .45rem 0 .05rem; font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -.025em; }
.tool-directory-head p, .tool-group-title p { margin: 0; color: var(--muted); font-size: .84rem; }
.tool-directory-head > button { flex: 0 0 auto; padding: .65rem .85rem; border: 1px solid #b8d7d3; border-radius: .65rem; background: white; color: var(--brand); font-weight: 750; cursor: pointer; }
.tool-directory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.tool-group { min-width: 0; padding: .9rem; border: 1px solid #dfeceb; border-radius: .8rem; background: rgba(255,255,255,.92); }
.tool-group-title { display: flex; align-items: center; gap: .65rem; padding-bottom: .7rem; border-bottom: 1px solid #e7efef; }
.tool-group-title > i { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border-radius: .6rem; background: var(--blue-soft); color: #2e8db1; font-size: 1.25rem; }
.tool-group:nth-child(2) .tool-group-title > i { background: #fff5e5; color: #d78d2f; }
.tool-group:nth-child(3) .tool-group-title > i { background: var(--brand-soft); color: #2c8f88; }
.tool-group:nth-child(4) .tool-group-title > i { background: #f1f2fb; color: #6d73aa; }
.tool-group h3 { margin: 0; font-size: 1rem; }
.tool-group-links { display: grid; margin-top: .45rem; }
.tool-group-links a, .tool-group-links button { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; padding: .5rem .1rem; border: 0; border-bottom: 1px dashed #e1ebea; background: transparent; color: var(--ink); text-align: left; text-decoration: none; font-size: .8rem; cursor: pointer; }
.tool-group-links a:last-child, .tool-group-links button:last-child { border-bottom: 0; }
.tool-group-links span { color: var(--brand-2); font-size: 1.05rem; }
.tools-section-head { margin-top: 1.5rem; }
.panel { padding: 1.35rem; border: 1px solid var(--line); border-radius: 1.2rem; background: var(--paper); }
.panel h2, .panel h3 { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem; }
.field { display: grid; gap: .3rem; }
.field label { color: var(--muted); font-size: .82rem; font-weight: 700; }
.field input, .field select, .field textarea { min-width: 0; width: 100%; padding: .72rem .75rem; border: 1px solid var(--line); border-radius: .65rem; background: white; color: var(--ink); }
.field textarea { resize: vertical; line-height: 1.65; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid rgba(39,117,109,.15); border-color: var(--brand-2); }
.wide { grid-column: 1 / -1; }
.result { margin-top: 1rem; padding: 1.15rem; border-radius: 1rem; background: var(--brand); color: white; }
.result-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.result-total strong { font-size: 2rem; }
.breakdown { display: grid; gap: .4rem; margin-top: .8rem; color: #e1f1ef; font-size: .85rem; }
.breakdown div { display: flex; justify-content: space-between; gap: 1rem; }
.month-setting-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin: 1rem 0; }
.month-days-field { padding: .85rem; border-radius: .75rem; background: var(--bg); }
.month-days-field input { max-width: 10rem; }
.month-days-field small { color: var(--muted); font-size: .76rem; line-height: 1.5; }
.calculator-subhead { margin: 1.2rem 0 .75rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 1rem; }
.living-cost-grid { margin-bottom: .7rem; }
.preset-note { padding: .7rem .8rem; border-radius: .65rem; background: #f6fafb; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.calculator-sources { margin: .7rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.55; }
.calculator-sources a { color: var(--brand); }
.monthly-rehab-controls { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(6rem, .55fr) minmax(0, 1fr); gap: .7rem; align-items: end; }
.monthly-rehab-controls > button { grid-column: 1 / -1; min-height: 2.75rem; padding: .7rem 1rem; border: 1px solid var(--brand); border-radius: .65rem; background: var(--brand); color: white; font-weight: 750; cursor: pointer; }
.checklist { display: grid; gap: .55rem; }
.check-row { display: grid; grid-template-columns: 1.2rem 1fr; gap: .65rem; align-items: start; padding: .65rem; border-radius: .65rem; background: var(--bg); }
.check-row input { width: 1rem; height: 1rem; margin-top: .28rem; accent-color: var(--brand); }
.check-row:has(input:checked) span { color: var(--muted); text-decoration: line-through; }
.call-meta { margin: .75rem 0 1.25rem; }
.call-checklist { display: grid; gap: .6rem; }
.call-checklist .check-row { background: #f6fafb; border: 1px solid #e4eeee; }
.call-checklist .check-row span { line-height: 1.65; }
.therapist-questions { display: grid; gap: .7rem; }
.therapist-question { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: .7rem; align-items: start; padding: .85rem; border: 1px solid #deebea; border-radius: .75rem; background: #f8fbfb; }
.therapist-question > input { width: 1rem; height: 1rem; margin-top: .3rem; accent-color: var(--brand); }
.therapist-question strong, .therapist-question small { display: block; }
.therapist-question small { margin: .15rem 0 .55rem; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.therapist-question textarea { width: 100%; padding: .65rem .7rem; border: 1px solid #c8ddda; border-radius: .6rem; background: white; color: var(--ink); resize: vertical; }
.therapist-question:has(> input:checked) { background: var(--brand-soft); border-color: #bddbd6; }
.call-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .75rem; font-size: .82rem; }
.call-actions button { padding: .55rem .8rem; border: 1px solid var(--line); border-radius: .6rem; background: white; color: var(--brand); font-weight: 700; cursor: pointer; }
.compact-notice { margin-bottom: 0; }
.ability-list { display: grid; gap: .65rem; }
.ability-row { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: 1rem; align-items: center; padding: .85rem .9rem; border: 1px solid #e0eceb; border-radius: .7rem; background: #f7fbfb; }
.ability-row span, .ability-row strong, .ability-row small { display: block; }
.ability-row strong { color: var(--ink); }
.ability-row small { margin-top: .15rem; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.ability-row select { width: 100%; padding: .55rem .6rem; border: 1px solid #bdd4d1; border-radius: .55rem; background: white; color: var(--brand); font-weight: 700; }
.ability-summary { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: .85rem; }
.ability-summary span { padding: .45rem .75rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: .86rem; }
.transfer-meta { margin-bottom: 1rem; }
.transfer-timeline { display: grid; gap: .55rem; }
.transfer-step { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) 6.2rem 7.5rem; gap: .65rem; align-items: center; padding: .75rem; border: 1px solid #e0eceb; border-radius: .7rem; background: #f7fbfb; }
.transfer-step > input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--brand); }
.transfer-step div strong, .transfer-step div small { display: block; }
.transfer-step div small { color: var(--muted); font-size: .82rem; line-height: 1.5; }
.transfer-step > input:not([type="checkbox"]) { width: 100%; min-width: 0; padding: .5rem .55rem; border: 1px solid #c9dcda; border-radius: .5rem; background: white; color: var(--ink); }
.transfer-step:has(input[type="checkbox"]:checked) { background: var(--brand-soft); }
.transfer-step:has(input[type="checkbox"]:checked) div { opacity: .65; }
.timeline-progress { display: flex; align-items: center; gap: .8rem; margin-top: .85rem; color: var(--brand); font-size: .86rem; }
.timeline-progress > div { flex: 1; height: .55rem; overflow: hidden; border-radius: 999px; background: #e5efef; }
.timeline-progress > div span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--brand-2); transition: width .2s ease; }
.timeline-progress strong { white-space: nowrap; }
.vehicle-questions { display: grid; gap: .75rem; }
.vehicle-questions fieldset { margin: 0; padding: .9rem 1rem; border: 1px solid #dcebea; border-radius: .75rem; background: #f8fbfb; }
.vehicle-questions legend { padding: 0 .25rem; color: var(--ink); font-weight: 750; }
.vehicle-questions fieldset p { margin: .15rem 0 .55rem; color: var(--muted); font-size: .84rem; }
.vehicle-questions label { display: inline-flex; align-items: center; gap: .35rem; margin: .3rem .9rem .15rem 0; color: var(--ink); font-size: .9rem; }
.vehicle-questions input { accent-color: var(--brand); }
.vehicle-result { margin-top: 1rem; padding: 1.1rem 1.2rem; border-radius: .9rem; background: var(--brand); color: white; }
.vehicle-result span { color: #cce9e6; font-size: .78rem; font-weight: 750; letter-spacing: .06em; }
.vehicle-result h3 { margin: .2rem 0 .25rem; font-size: 1.25rem; }
.vehicle-result p { margin: 0; color: #e3f2f0; font-size: .9rem; }
.vehicle-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.vehicle-options > div { padding: .9rem; border: 1px solid #dcebea; border-radius: .75rem; background: #f8fbfb; }
.vehicle-options p { margin: .35rem 0 0; color: var(--muted); font-size: .86rem; line-height: 1.6; }
.privacy-note { display: flex; gap: .8rem; align-items: flex-start; padding: .95rem 1rem; border: 1px solid #cfe7e3; border-radius: .8rem; background: var(--brand-soft); }
.privacy-note > i { color: var(--brand-2); font-size: 1.5rem; line-height: 1.2; }
.privacy-note p { margin: .15rem 0 0; color: var(--muted); font-size: .86rem; }
.handoff-form { margin-top: .65rem; }
.handoff-form .field label { color: var(--ink); font-size: .86rem; }
.handoff-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.1rem; }
.handoff-actions button { padding: .7rem 1rem; border: 1px solid var(--brand); border-radius: .65rem; background: var(--brand); color: white; font-weight: 750; cursor: pointer; }
.handoff-actions button.secondary { background: white; color: var(--brand); }
.planb-stage { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; }
.planb-stage > label { position: relative; display: flex; gap: .65rem; align-items: flex-start; padding: .85rem; border: 1px solid #dcebea; border-radius: .75rem; background: #f8fbfb; cursor: pointer; }
.planb-stage input { margin-top: .3rem; accent-color: var(--brand); }
.planb-stage strong, .planb-stage small { display: block; }
.planb-stage small { color: var(--muted); font-size: .82rem; }
.planb-stage label:has(input:checked) { border-color: var(--brand-2); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-2); }
.planb-result { margin-top: .85rem; padding: 1rem 1.1rem; border-radius: .8rem; background: var(--brand); color: white; }
.planb-result > span { color: #cce9e6; font-size: .78rem; font-weight: 750; }
.planb-result h3 { margin: .2rem 0; font-size: 1.15rem; }
.planb-result p { margin: 0; color: #e3f2f0; font-size: .88rem; }
.planb-guidance { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; }
.planb-guidance > div { padding: .85rem; border: 1px solid #dcebea; border-radius: .75rem; background: #f8fbfb; }
.planb-guidance p { margin: .25rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.55; }
.contact-order { display: grid; gap: .55rem; list-style-position: inside; padding: 0 !important; }
.contact-order li { padding: .7rem .8rem; border-left: 3px solid var(--brand-2); background: #f7fbfb; }
.contact-order strong, .contact-order span { display: block; }
.contact-order span { margin-left: 1.35rem; color: var(--muted); font-size: .85rem; }
.planb-form { margin-bottom: .8rem; }
.planb-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; }
.bill-two-lines { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.bill-two-lines > div { padding: .9rem; border: 1px solid #dcebea; border-radius: .75rem; background: #f8fbfb; }
.bill-two-lines span, .bill-two-lines strong { display: block; }
.bill-two-lines span { color: var(--brand-2); font-size: .76rem; font-weight: 800; letter-spacing: .06em; }
.bill-two-lines strong { margin-top: .2rem; }
.bill-two-lines p { margin: .35rem 0 0; color: var(--muted); font-size: .84rem; }
.bill-checker { padding: 1rem; border: 1px solid #cfe4e1; border-radius: .9rem; background: #f7fbfb; }
.bill-result { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin-top: 1rem; }
.bill-result > div { padding: .9rem; border-radius: .75rem; background: var(--brand); color: white; }
.bill-result span, .bill-result strong, .bill-result small { display: block; }
.bill-result span { color: #cce9e6; font-size: .78rem; }
.bill-result strong { margin: .15rem 0; font-size: 1.4rem; }
.bill-result small { color: #e3f2f0; font-size: .75rem; }
.bill-compare { margin-top: .65rem; padding: .75rem .85rem; border-radius: .65rem; background: #fff8eb; color: var(--muted); font-size: .84rem; line-height: 1.6; }
.bill-compare strong { color: var(--ink); }
.rehab-estimator { padding: 1rem; border: 1px solid #cfe4e1; border-radius: .9rem; background: #f7fbfb; }
.rehab-estimator-controls { display: grid; grid-template-columns: minmax(0, 1fr) 7rem auto; gap: .65rem; align-items: end; }
.rehab-estimator-controls > button { height: 2.7rem; padding: 0 1rem; border: 1px solid var(--brand); border-radius: .65rem; background: var(--brand); color: white; font-weight: 750; cursor: pointer; }
.rehab-cost-lines { display: grid; gap: .45rem; margin-top: .8rem; }
.rehab-cost-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .65rem; align-items: center; padding: .65rem .75rem; border-radius: .65rem; background: white; border: 1px solid #dfeceb; }
.rehab-cost-line strong, .rehab-cost-line small { display: block; }
.rehab-cost-line small { margin-top: .1rem; color: var(--muted); font-size: .76rem; }
.rehab-cost-line > span { font-weight: 750; }
.rehab-cost-line > button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.rehab-cost-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .7rem; padding: .9rem 1rem; border-radius: .75rem; background: var(--brand); color: white; }
.rehab-cost-total strong { font-size: 1.5rem; }
.compact-empty { padding: .75rem; font-size: .86rem; }
.muted { color: var(--muted); }
.empty { padding: 2rem; text-align: center; border: 1px dashed #b9cdca; border-radius: 1rem; background: var(--paper); color: var(--muted); }
.family-empty i { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin: 0 auto .7rem; border-radius: 50%; background: #f1f2fb; color: #6d73aa; font-size: 1.65rem; }
.family-empty h2 { margin: 0 0 .3rem; color: var(--ink); font-size: 1.25rem; }
.family-empty p { max-width: 36rem; margin: 0 auto; }
.back-link { display: inline-flex; margin-top: 1rem; color: var(--brand); font-weight: 750; text-decoration: none; }

.site-footer { padding: 1.5rem max(1rem, calc((100vw - 1160px) / 2)); border-top: 1px solid var(--line); background: white; color: var(--muted); font-size: .78rem; }
.site-footer p { margin: .15rem 0; }

@media (max-width: 900px) {
  .top-nav { display: none; }
  .hero, .content-grid, .article-shell, .tools-layout { grid-template-columns: 1fr; }
  .tool-directory-grid { grid-template-columns: repeat(2, 1fr); }
  .portal-grid { grid-template-columns: repeat(2, 1fr); }
  .tool-panel, .article-aside { position: static; }
  .article-aside { display: none; }
}

@media (max-width: 560px) {
  .page { width: min(100% - 1.2rem, 1160px); padding-top: 1rem; }
  .site-header { padding: .7rem; }
  .brand small { display: none; }
  .hero { gap: .7rem; }
  .hero-copy { border-radius: .8rem; }
  .hero h1 { font-size: 2.45rem; }
  .hero-visual { min-height: 210px; border-radius: .8rem; }
  .search-wrap { grid-template-columns: 1fr 76px; }
  .portal-grid, .form-grid, .month-setting-grid { grid-template-columns: 1fr; }
  .tool-directory { padding: .9rem; }
  .tool-directory-head { align-items: start; flex-direction: column; }
  .tool-directory-grid { grid-template-columns: 1fr; }
  .monthly-rehab-controls { grid-template-columns: 1fr; }
  .portal-card { min-height: 155px; }
  .wide { grid-column: auto; }
  .article { padding: 1.15rem; border-radius: 1rem; }
  .article table { display: block; overflow-x: auto; }
  .ability-row { grid-template-columns: 1fr; gap: .55rem; }
  .ability-row select { width: 8rem; }
  .transfer-step { grid-template-columns: 1.2rem minmax(0, 1fr); }
  .transfer-step > input:not([type="checkbox"]) { grid-column: 2; }
  .vehicle-options { grid-template-columns: 1fr; }
  .planb-stage, .planb-guidance, .planb-checks, .bill-two-lines, .bill-result { grid-template-columns: 1fr; }
  .rehab-estimator-controls { grid-template-columns: 1fr 6.5rem; }
  .rehab-estimator-controls > button { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}


/* Earlier forest theme tokens retained as the base layer for component compatibility. */
:root { --forest: #2e4034; --forest-deep: #25372b; --forest-card: #385145; --cream: #f1f5eb; --accent: #dcf487; --on-forest: #bccfbd; }
body { background: var(--forest); color: var(--cream); }
::selection { background: var(--accent); color: var(--forest-deep); }
a, button { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.site-header { min-height: 96px; gap: 2rem; padding: 1rem max(1.5rem, calc((100vw - 1200px) / 2)); background: rgba(46,64,52,.96); border-color: #506453; }
.brand { flex-shrink: 0; gap: 1.1rem; }
.brand-mark { width: 7.5rem; height: 3rem; overflow: visible; }
.brand-mark img { width: 100%; height: 100%; }
.brand-name { border-left: 1px solid #687e69; padding-left: 1rem; }
.brand strong { color: var(--cream); font-size: 1.25rem; letter-spacing: .13em; font-weight: 650; }
.brand small { color: var(--on-forest); font-size: .875rem; margin-top: .3rem; letter-spacing: .01em; }
.top-nav { gap: 1.25rem; flex-wrap: wrap; justify-content: flex-end; }
.top-nav a { color: #d0ddcd; font-size: .875rem; font-weight: 500; }
.top-nav a:first-child { color: inherit; }
.top-nav a:first-child::after { display: none; }
.top-nav a:hover, .top-nav a:focus-visible, .top-nav a[aria-current="page"] { color: var(--accent); }
.top-nav .nav-action { border: 0; border-radius: 999px; background: var(--accent); color: var(--forest-deep); padding: .6rem 1rem; }
.top-nav .nav-action:hover { background: var(--cream); color: var(--forest-deep); }
.page { width: min(1200px, calc(100% - 3rem)); padding-top: 2rem; }
.hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.6rem; align-items: center; min-height: 330px; padding: .5rem 0 2.4rem; border: 0; background: transparent; }
.hero-copy { padding: 0; background: transparent; color: var(--cream); }
.eyebrow { font-size: .875rem; letter-spacing: .12em; font-weight: 500; color: var(--on-forest); }
.eyebrow::before { width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent); }
.hero h1 { margin: 1.05rem 0 .85rem; font-size: clamp(2.5rem, 4.6vw, 3.65rem); line-height: 1.23; letter-spacing: -.04em; font-weight: 650; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero p { color: #d1decc; font-size: 1rem; letter-spacing: .06em; }
.hero-note-line { color: var(--on-forest); font-size: .875rem; gap: .7rem; margin-top: .8rem; }
.hero-note-line span + span::before { margin-right: .7rem; color: #92ae92; }
.hero-identity { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding: 1.6rem 1.8rem; background: var(--forest-card); border: 1px solid #54715b; border-radius: 7rem 1.5rem 1.5rem 1.5rem; }
.identity-caption { align-self: flex-end; color: #d8e5d1; font-size: .875rem; letter-spacing: .25em; }
.hero-identity > img { width: 100%; height: auto; max-height: 190px; margin: 1.5rem 0; }
.identity-foot { display: flex; justify-content: space-between; align-items: center; color: #d2e0cd; font-size: .875rem; border-top: 1px solid #69836c; padding-top: 1rem; }
.identity-foot > span { font-size: 1.6rem; color: var(--accent); }
.search-wrap { margin-top: 1.3rem; max-width: 42rem; grid-template-columns: 1fr 5.5rem; border-radius: 999px; padding: .3rem; background: var(--cream); }
.search-wrap > i { left: 1.2rem; color: var(--brand); }
.search-input { padding: .72rem .7rem .72rem 2.6rem; background: transparent; border: 0; border-radius: 999px; box-shadow: none; min-width: 0; font-size: 1rem; }
.search-input::placeholder { color: #647561; opacity: 1; }
.search-input:focus { outline: 2px solid #688660; outline-offset: 0; }
.search-button { min-width: 0; background: var(--forest); border-radius: 999px; color: var(--cream); }
.search-button:hover { background: #416348; }
.portal-grid { gap: .8rem; padding-top: 1.4rem; border-top: 1px solid #637762; }
.portal-card:nth-child(n) { background: var(--forest-card); border: 1px solid #5c755e; border-radius: 1.1rem; color: var(--cream); min-height: 192px; padding: 1.25rem; }
.portal-card:nth-child(1) { background: var(--accent); color: var(--forest-deep); border-color: var(--accent); }
.portal-card:hover { transform: translateY(-3px); background: #42604c; border-color: var(--accent); box-shadow: none; }
.portal-card:nth-child(1):hover { background: #daefbe; }
.portal-card:nth-child(n) .icon-box { background: none; color: var(--accent); width: auto; height: 2rem; place-items: start; border-radius: 0; font-size: 1.75rem; }
.portal-card:nth-child(1) .icon-box { color: var(--forest-deep); }
.portal-card h3 { font-size: 1.0625rem; font-weight: 600; margin-top: .9rem; line-height: 1.5; }
.portal-card p { font-size: .875rem; color: #d2dfcf; margin-top: .35rem; }
.portal-card:nth-child(1) p { color: #435b3a; }
.portal-meta { justify-content: space-between; margin-top: 1rem; color: var(--on-forest); font-size: .875rem; font-weight: 400; }
.portal-meta span:first-child { display: inline; }
.portal-meta span:last-child { background: transparent; color: var(--accent); width: 1.6rem; height: 1.6rem; }
.portal-meta span:last-child::after { content: "↗"; font-size: 1.45rem; }
.portal-card:nth-child(1) .portal-meta, .portal-card:nth-child(1) .portal-meta span:last-child { color: #435b3a; }
.section-head { margin: 2.25rem 0 1rem; }
.section-head h2 { font-size: clamp(1.4rem, 2.7vw, 1.8rem); font-weight: 550; letter-spacing: -.02em; }
.section-head p { color: var(--on-forest); font-size: .875rem; }
.section-kicker { display: block; color: var(--accent); font-size: .75rem; letter-spacing: .2em; margin-bottom: .3rem; }
.content-grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, .85fr); gap: 1.5rem; }
.article-list { gap: 0; border-top: 1px solid #607760; }
.article-card { border: 0; border-bottom: 1px solid #607760; border-radius: 0; padding: 1.15rem .15rem; background: transparent; gap: .9rem; }
.article-card:hover { background: #38503e; border-color: var(--accent); }
.article-icon { background: #45624a; color: var(--accent); border-radius: 50%; width: 2.5rem; height: 2.5rem; }
.article-card h3 { color: var(--cream); font-size: 1rem; font-weight: 550; white-space: normal; line-height: 1.6; }
.article-card p { color: var(--on-forest); font-size: .875rem; margin-top: .2rem; }
.article-tags { flex-direction: column; align-items: flex-end; gap: .35rem; }
.article-tags .tag { font-size: .75rem; background: #415d47; color: #e0ecd8; font-weight: 400; white-space: nowrap; }
.tool-panel { padding: 1.75rem; border: 0; border-radius: 1.1rem; background: #e6eddd; color: var(--ink); }
.tool-panel h3 { font-size: 1.5rem; line-height: 1.4; font-weight: 550; max-width: 9em; }
.tool-panel p { font-size: 1rem; color: #576e55; }
.tool-links { gap: .75rem; margin-top: 1.8rem; }
.tool-links a { background: transparent; padding: .9rem 0; border-radius: 0; border-bottom: 1px solid #a9bda1; font-size: .9375rem; box-shadow: none; }
.tool-links a:hover { color: #1c552f; }
.tool-links a::after { content: "↗"; color: var(--brand); font-size: 1.3rem; }
.crumbs { color: var(--on-forest); font-size: .875rem; }
.crumbs a, .page > .back-link { color: var(--accent); }
.article, .article-aside, .panel, .tool-directory, .empty { color: var(--ink); }
.article, .panel { background: #f8faf4; }
.article { box-shadow: none; border-radius: 1.1rem; }
.article h1 { line-height: 1.4; font-weight: 650; }
.article h2 { padding-top: .5rem; line-height: 1.55; }
.article section { scroll-margin-top: 8rem; }
.article-aside { border-radius: 1.1rem; background: #e6eddd; }
.article-aside a { line-height: 1.7; }
.article a:focus-visible, .panel :focus-visible, .tool-directory :focus-visible { outline-color: #315b43; }
.tool-directory { background: #edf2e7; }
.field label, .tool-group-links a, .tool-group-links button, .tool-group-title p, .tool-directory-head p, .call-actions, .article-aside p { font-size: .875rem; }
.field input, .field select, .field textarea { font-size: 1rem; }
.article-tags .tag[style] { background: #e4e8df !important; color: #50634d !important; }
.site-footer { background: var(--forest-deep); border-color: #506453; color: var(--on-forest); padding: 2rem max(1.5rem, calc((100vw - 1200px) / 2)); font-size: .875rem; }
.footer-brand { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.2rem; color: var(--cream); flex-wrap: wrap; }
.footer-dot { color: var(--accent); margin: 0 .5rem; }
@media (max-width: 1100px) { .site-header { flex-wrap: wrap; gap: .8rem; } .top-nav { justify-content: flex-start; } .portal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hero { gap: 2rem; } }
@media (max-width: 900px) { .top-nav { display: flex; width: 100%; gap: 1.3rem; overflow-x: auto; flex-wrap: nowrap; padding: .3rem 0; } .top-nav a { flex-shrink: 0; } .hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: 1.5rem; } .hero-identity { padding: 1.3rem; border-top-left-radius: 4rem; } .identity-foot { font-size: .8rem; } .identity-caption { font-size: .8rem; } .content-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .site-header { position: relative; padding: .8rem 1.25rem; gap: .65rem; } .brand-mark { width: 6.5rem; height: 2.6rem; } .brand { gap: .8rem; } .brand-name { padding-left: .8rem; } .brand small { display: block; font-size: .75rem; } .brand strong { font-size: 1.1rem; } .top-nav { gap: 1.15rem; } .top-nav .nav-action { margin-left: 0; } .page { width: calc(100% - 2.5rem); padding-top: 1.6rem; } .hero { grid-template-columns: 1fr; gap: 0; min-height: 0; padding-bottom: 1.5rem; } .hero-identity { display: none; } .hero h1 { font-size: clamp(2.5rem, 10vw, 3.4rem); } .hero-copy { border-radius: 0; } .hero-note-line { font-size: .8125rem; gap: .5rem; } .hero-note-line span + span::before { margin-right: .5rem; } .hero-note-line span:last-child { display: none; } .search-wrap { grid-template-columns: minmax(0, 1fr) 4.3rem; } .search-input { padding-left: 2.1rem; } .portal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; } .portal-card:nth-child(n) { min-height: 178px; padding: 1rem; } .portal-card h3 { font-size: 1rem; } .portal-card:last-child { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: 1fr auto; gap: 1rem; } .portal-card:last-child .icon-box { display: none; } .portal-card:last-child h3 { margin-top: 0; } .portal-card:last-child .portal-meta { gap: .7rem; align-self: center; margin: 0; } .section-head { margin-top: 1.75rem; } .article-card { grid-template-columns: 2.5rem minmax(0, 1fr); padding: 1rem 0; } .article-tags { grid-column: 2; flex-direction: row; align-items: flex-start; } .article-card p { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .article { padding: 1.2rem; } .tool-panel { padding: 1.4rem; } .footer-brand { gap: .6rem; } .footer-brand > span { font-size: .8125rem; } }


/* Shanghai Jiren Home: bold editorial art and complete, visible navigation. */
.brand strong { font-size: 1.2rem; letter-spacing: .055em; }
.brand small { color: #d2dfcd; }
.top-nav { gap: .85rem; }
.top-nav a { color: #edf4e5; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.top-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .55rem; text-decoration-thickness: 2px; }
.top-nav .nav-action { gap: .65rem; background: #e4fa89; color: #25372b; font-weight: 750; box-shadow: 0 0 0 4px rgba(228,250,137,.09); }
.top-nav .nav-action span { font-size: 1.25rem; }
.top-nav .nav-action[aria-current="page"] { color: #25372b; background: #efffab; text-decoration: none; }
.hero-art { position: relative; margin: 0; align-self: center; min-width: 0; overflow: hidden; background: #f1f5eb; border-radius: 1.1rem 5rem 1.1rem 1.1rem; transform: rotate(1deg); }
.hero-art img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-art figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.25rem; background: #dcf487; color: #25372b; font-size: .875rem; font-weight: 650; }
.hero-art figcaption span:last-child { font-size: .75rem; letter-spacing: .14em; }
.search-button { background: #dcf487; color: #25372b; }
.search-button:hover { background: #e8ffa3; }
.portal-card:nth-child(4) { background: #e6eddd; border-color: #e6eddd; color: #25372b; }
.portal-card:nth-child(4) p, .portal-card:nth-child(4) .icon-box, .portal-card:nth-child(4) .portal-meta, .portal-card:nth-child(4) .portal-meta span:last-child { color: #38533b; }
.portal-card:nth-child(4):hover { background: #f1f7e9; }
.tool-panel { background: #dcf487; }
.tool-panel-kicker { display: block; font-size: .75rem; letter-spacing: .12em; color: #455934; margin-bottom: 1rem; }
.tool-panel h3 { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.25; letter-spacing: -.04em; font-weight: 650; }
.tool-panel p { color: #3f5637; }
.tool-panel .tool-panel-note { font-size: .875rem; margin-top: 1.3rem; }
.tool-links a { border-color: #9bb965; }
@media (max-width: 1180px) { .site-header { flex-wrap: wrap; gap: .5rem; } .top-nav { flex: 1 0 100%; justify-content: flex-start; gap: 1.5rem; } }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 1.5rem; } .hero-art { border-top-right-radius: 3rem; } .hero-art figcaption { padding: .7rem .9rem; font-size: .8125rem; } .hero-art figcaption span:last-child { display: none; } }
@media (max-width: 700px) { .hero { grid-template-columns: 1fr; gap: 1.5rem; } .hero-art { width: 100%; transform: none; border-radius: 1rem 3rem 1rem 1rem; } .hero-art img { aspect-ratio: 3 / 2; object-fit: cover; object-position: center 53%; } .hero-art figcaption span:last-child { display: inline; } }
@media (max-width: 600px) { .brand-mark { width: 5.5rem; } .brand strong { font-size: 1.0625rem; } .brand small { font-size: .75rem; } .top-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem .5rem; overflow: visible; width: 100%; } .top-nav a { font-size: .875rem; padding: .25rem 0; min-height: 42px; white-space: nowrap; } .top-nav .nav-action { grid-column: span 2; border-radius: .7rem; padding: .3rem .6rem; } .hero h1 { margin-top: .8rem; } .hero-art figcaption { font-size: .875rem; } }

/* Lighter editorial direction: scattered abstract sketches instead of one hero image. */
:root { --forest: #5b7162; --forest-deep: #4d6254; --forest-card: #687f6e; --cream: #f6f5ec; --accent: #e2f29b; --on-forest: #e1e7dc; }
body { background: var(--forest); }
.site-header { background: rgba(77,98,84,.96); border-color: #829687; }
.site-footer { background: var(--forest-deep); border-color: #829687; }
.hero { position: relative; display: block; min-height: 340px; padding: 2rem 34% 3rem 0; overflow: hidden; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(2.8rem, 5.7vw, 4.6rem); line-height: 1.08; }
.hero-sketches { position: absolute; inset: 0 0 0 60%; pointer-events: none; }
.sketch { display: block; background-image: url('./jiren-sketch-atlas.png'); background-repeat: no-repeat; background-size: 500% 100%; filter: contrast(.9) saturate(.7); mix-blend-mode: multiply; opacity: .82; }
.sketch-talk { position: absolute; width: 21rem; height: 12rem; top: 1.5rem; right: .5rem; background-position: 50% center; transform: rotate(-4deg); }
.sketch-city { position: absolute; width: 12rem; height: 10rem; right: 0; bottom: -.5rem; background-position: 100% center; opacity: .6; }
.sketch-caption { position: absolute; right: .5rem; top: 1rem; color: var(--accent); font-size: .75rem; letter-spacing: .18em; writing-mode: vertical-rl; }
.portal-stage { position: relative; padding-top: 3.5rem; }
.portal-stage > .sketch-hands { position: absolute; width: 15rem; height: 7rem; top: -2.8rem; right: 1.5rem; background-position: 0 center; transform: rotate(3deg); opacity: .7; pointer-events: none; }
.portal-grid { position: relative; z-index: 1; padding-top: 0; }
.portal-card:nth-child(n) { background: rgba(246,245,236,.11); border-color: rgba(246,245,236,.3); }
.portal-card:nth-child(1) { background: var(--accent); border-color: var(--accent); }
.portal-card:nth-child(4) { background: #eef1e7; border-color: #eef1e7; }
.article-card:hover { background: rgba(43,63,49,.22); }
.article-icon { background: rgba(54,84,61,.5); }
.tool-panel { position: relative; overflow: hidden; background: #f0f1e6; padding-top: 7rem; }
.tool-panel > *:not(.sketch) { position: relative; z-index: 1; }
.tool-panel .sketch-sprout { position: absolute; width: 15rem; height: 9rem; top: -.8rem; right: -1.5rem; background-position: 75% center; opacity: .65; transform: rotate(-5deg); }
.tool-panel h3 { color: #304a38; }
.tool-panel p { color: #536c58; }
.tool-panel-kicker { color: #647953; }
@media (max-width: 900px) { .hero { display: block; padding-right: 30%; } .hero-sketches { left: 64%; } .sketch-talk { width: 17rem; height: 10rem; } }
@media (max-width: 700px) { .hero { padding: 1rem 0 7rem; min-height: 0; overflow: visible; } .hero-sketches { inset: auto 0 0 0; height: 8rem; } .sketch-talk { width: 12rem; height: 7rem; left: 0; top: .5rem; } .sketch-city { width: 8rem; height: 6.5rem; right: 0; bottom: 0; } .sketch-caption { top: auto; bottom: 1rem; right: 7.5rem; writing-mode: horizontal-tb; font-size: .6875rem; } .portal-stage { padding-top: 2.5rem; } .portal-stage > .sketch-hands { width: 10rem; height: 5rem; top: -2.4rem; right: .25rem; } }
@media (max-width: 600px) { .hero h1 { font-size: clamp(2.6rem, 13vw, 3.8rem); } .tool-panel { padding-top: 6rem; } }

/* Temporary clean state while the user's 同一个病房 reference style is being matched. */
.hero { min-height: 0; padding: 2.25rem 0 2.75rem; }
.hero-copy { max-width: 52rem; }
.portal-grid { padding-top: 1.5rem; }
.tool-panel { padding-top: 1.75rem; }
@media (max-width: 700px) { .hero { padding: 1.25rem 0 2rem; } }
@media (max-width: 600px) { .tool-panel { padding-top: 1.4rem; } }

/* 小红书《同一个病房》：奶油纸张、粉蓝色块与克制的包豪斯人物。 */
:root { --ink: #5b3b2a; --muted: #786b61; --brand: #477b78; --brand-2: #6d9995; --brand-soft: #e5efec; --blue-soft: #e4eff1; --paper: #fffdf8; --line: #ded5ca; --bg: #f6f1e7; --forest: #f6f1e7; --forest-deep: #477b78; --forest-card: #efe7dc; --cream: #5b3b2a; --accent: #b96652; --on-forest: #786b61; }
body { color: var(--ink); background: #f6f1e7; background-image: linear-gradient(rgba(91,59,42,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(91,59,42,.025) 1px, transparent 1px); background-size: 36px 36px; }
::selection { background: #d7e7e6; color: #4f3525; }
.site-header { background: rgba(255,253,248,.94); border-color: #ded5ca; box-shadow: 0 6px 24px rgba(91,59,42,.04); }
.brand-name { border-color: #d9cabe; }
.brand strong { color: #5b3b2a; }
.brand small { color: #83756a; }
.top-nav a { color: #5b3b2a; }
.top-nav a:hover, .top-nav a:focus-visible, .top-nav a[aria-current="page"] { color: #477b78; }
.top-nav .nav-action, .top-nav .nav-action[aria-current="page"] { background: #477b78; color: #fffdf8; box-shadow: none; }
.top-nav .nav-action:hover { background: #b96652; color: #fffdf8; }
.hero { position: relative; min-height: 350px; padding: 3rem 27rem 3rem 0; overflow: hidden; border-bottom: 1px solid #d9cfc4; }
.hero-copy { max-width: 48rem; }
.eyebrow { color: #477b78; }
.eyebrow::before { background: #b96652; }
.hero h1 { color: #5b3b2a; font-family: Georgia, 'Songti SC', 'STSong', serif; font-size: clamp(3rem, 6vw, 5rem); font-weight: 650; line-height: 1.12; letter-spacing: -.055em; }
.hero h1 em { color: #b96652; }
.hero p { color: #786b61; }
.hero-note-line { color: #786b61; }
.hero-note-line span + span::before { color: #b9aaa0; }
.search-wrap { background: #fffdf8; border: 1px solid #d8cec3; box-shadow: 0 10px 32px rgba(91,59,42,.06); }
.search-button { background: #477b78; color: #fffdf8; }
.search-button:hover { background: #b96652; }
.xhs-spot { display: block; background-image: url('./jiren-xhs-bauhaus-atlas.png'); background-repeat: no-repeat; background-size: 400% 100%; }
.xhs-mobility { position: absolute; z-index: 1; width: 24rem; height: 15rem; right: .5rem; top: 3rem; background-position: 0 center; }
.portal-stage { position: relative; padding-top: 3.2rem; }
.xhs-checklist { position: absolute; width: 12rem; height: 7rem; right: 1rem; top: -2.1rem; background-position: 33.333% center; opacity: .72; }
.portal-grid { padding-top: 0; }
.portal-card:nth-child(n) { color: #5b3b2a; border-color: #d8cec3; box-shadow: 0 10px 24px rgba(91,59,42,.035); }
.portal-card:nth-child(1) { background: #dbeaed; border-color: #dbeaed; }
.portal-card:nth-child(2) { background: #f0dfd9; border-color: #f0dfd9; }
.portal-card:nth-child(3) { background: #e8e8d8; border-color: #e8e8d8; }
.portal-card:nth-child(4) { background: #f2e7d2; border-color: #f2e7d2; }
.portal-card:nth-child(5) { background: #dce9e5; border-color: #dce9e5; }
.portal-card:hover, .portal-card:nth-child(1):hover, .portal-card:nth-child(4):hover { transform: translateY(-3px) rotate(-.3deg); border-color: #bdaea2; background: #fffaf2; }
.portal-card:nth-child(n) p { color: #786b61; }
.portal-card:nth-child(n) .icon-box, .portal-card:nth-child(n) .portal-meta, .portal-card:nth-child(n) .portal-meta span:last-child { color: #477b78; }
.section-head h2 { color: #5b3b2a; font-family: Georgia, 'Songti SC', 'STSong', serif; }
.section-head p { color: #786b61; }
.section-kicker { color: #b96652; }
.editorial-head { position: relative; min-height: 6.5rem; overflow: visible; }
.xhs-rehab { position: absolute; width: 13rem; height: 7.5rem; right: 2rem; top: -.5rem; background-position: 66.666% center; opacity: .78; }
.article-list { border-color: #d7cdc2; }
.article-card { border-color: #d7cdc2; }
.article-card:hover { background: rgba(255,253,248,.75); }
.article-card h3 { color: #5b3b2a; }
.article-card p { color: #786b61; }
.article-icon { color: #477b78; background: #dce9e5; }
.article-tags .tag { color: #477b78; background: #e4efec; }
.tool-panel { position: relative; padding: 8.2rem 1.75rem 1.75rem; overflow: hidden; color: #5b3b2a; background: #ead9d3; }
.xhs-talk { position: absolute; width: 16rem; height: 8.5rem; top: -.25rem; right: -1rem; background-position: 100% center; opacity: .82; }
.tool-panel h3 { color: #5b3b2a; }
.tool-panel p, .tool-panel-kicker { color: #725e51; }
.tool-links a { color: #5b3b2a; border-color: #cdbab1; }
.tool-links a::after { color: #477b78; }
.crumbs { color: #786b61; }
.crumbs a, .page > .back-link { color: #477b78; }
.article, .article-aside, .panel, .tool-directory, .empty { color: #5b3b2a; }
.article, .panel { background: #fffdf8; }
.article-aside { background: #e4efec; }
.site-footer { color: #e7efea; background: #477b78; border-color: #477b78; }
.footer-brand { color: #fffdf8; }
.site-footer .footer-brand img { filter: brightness(0) invert(1); opacity: .9; }
@media (max-width: 900px) { .hero { padding-right: 20rem; } .xhs-mobility { width: 20rem; height: 13rem; right: -2rem; } }
@media (max-width: 700px) { .hero { padding: 1.5rem 0 12rem; } .xhs-mobility { width: 18rem; height: 11rem; top: auto; right: 50%; bottom: .3rem; transform: translateX(50%); } .portal-stage { padding-top: 2.8rem; } .xhs-checklist { width: 10rem; height: 6rem; top: -2rem; right: 0; } .editorial-head { min-height: 7rem; } .xhs-rehab { width: 10rem; height: 6rem; right: -.5rem; top: .5rem; } }
@media (max-width: 600px) { .hero h1 { font-size: clamp(2.8rem, 14vw, 4rem); } .tool-panel { padding-top: 7.5rem; } }

/* Four equal atlas panels: each is 543 by 724 pixels. */
.hero { padding-right: 21rem; }
.xhs-spot { width: var(--spot-size); height: auto; aspect-ratio: 3 / 4; background-size: 400% 100%; background-position-y: center; }
.xhs-mobility { --spot-size: clamp(15rem, 20vw, 18rem); top: 1.8rem; right: 1.5rem; }
.xhs-checklist { --spot-size: clamp(7rem, 10vw, 9rem); top: -2.5rem; right: 1.2rem; }
.xhs-rehab { --spot-size: clamp(7.5rem, 11vw, 9.5rem); top: -1.2rem; right: 2rem; }
.xhs-talk { --spot-size: clamp(9rem, 14vw, 12rem); top: -1.8rem; right: -.5rem; }

/* Small geometric punctuation borrowed from the reference's carousel details. */
.hero::before { content: ""; position: absolute; width: 2.2rem; height: .34rem; right: 18.7rem; top: 3.4rem; border-radius: 999px; background: #b96652; box-shadow: 2.75rem 0 #477b78, 5.5rem 0 #9ebfc5; }
.hero::after { content: ""; position: absolute; width: 4.5rem; height: 4.5rem; right: .2rem; bottom: 1rem; border: 1px solid rgba(91,59,42,.16); border-radius: 50%; }
.portal-card { position: relative; overflow: hidden; }
.portal-card::before { content: ""; position: absolute; width: 1.05rem; height: 1.05rem; right: 1rem; top: 1rem; border: 1px solid currentColor; border-radius: 50%; opacity: .24; }
.portal-card::after { content: ""; position: absolute; width: 2.6rem; height: .18rem; left: 1.1rem; bottom: .95rem; border-radius: 999px; background: currentColor; opacity: .12; transform: rotate(-8deg); }
.editorial-head::before { content: ""; position: absolute; width: .42rem; height: .42rem; left: 9.6rem; top: 1.4rem; border-radius: 50%; background: #b96652; box-shadow: 1rem 0 #9ebfc5, 2rem 0 #b8c4a4; }
.tool-panel::after { content: ""; position: absolute; width: 4.8rem; height: 4.8rem; left: -2.4rem; top: 6.7rem; border: 1px solid rgba(91,59,42,.18); border-radius: 50%; }
@media (max-width: 900px) { .hero { padding-right: 17rem; } .xhs-mobility { --spot-size: 15rem; right: 0; } .hero::before { right: 13.5rem; } }
@media (max-width: 700px) { .hero { padding: 1.5rem 0 11rem; } .xhs-mobility { --spot-size: 14rem; top: auto; right: 50%; bottom: -1.5rem; transform: translateX(50%); } .hero::before { left: 0; right: auto; top: auto; bottom: 9rem; } .hero::after { width: 3.5rem; height: 3.5rem; bottom: .5rem; } .xhs-checklist { --spot-size: 7.5rem; } .xhs-rehab { --spot-size: 8rem; } }
@media (max-width: 600px) { .xhs-talk { --spot-size: 10rem; } .editorial-head::before { left: 8.6rem; top: 1.2rem; } }

/* CareLink lockup uses a compact CL symbol beside the bilingual wordmark. */
.brand-mark { width: 3.4rem; height: 3.4rem; }
.brand-mark img { width: 100%; height: 100%; }
.brand strong { letter-spacing: .015em; font-size: 1.22rem; }
@media (max-width: 600px) { .brand-mark { width: 3rem; height: 3rem; } .brand strong { font-size: 1.05rem; } }

/* Reserve space for the original illustration proportions at every width. */
.xhs-spot { pointer-events: none; }
.xhs-mobility { --spot-size: clamp(10rem, 15vw, 13rem); right: 2rem; }
.portal-stage { padding-top: 0; }
.xhs-checklist { position: relative; --spot-size: 5.5rem; top: auto; right: auto; margin: -1rem 1.5rem .75rem auto; }
.editorial-head { min-height: 10rem; padding-right: 9rem; }
.xhs-rehab { --spot-size: 6.5rem; top: 0; right: 1rem; }
.tool-panel { padding-top: 11rem; }
.xhs-talk { --spot-size: 8rem; top: -.5rem; right: 1rem; }
.article-tags .article-updated { background: transparent; color: #786b61; }
@media (max-width: 900px) {
  .hero { padding-right: 13rem; }
  .xhs-mobility { --spot-size: 10rem; right: .5rem; }
}
@media (max-width: 700px) {
  .hero { padding: 1.5rem 0 13rem; }
  .xhs-mobility { --spot-size: 9rem; top: auto; bottom: 0; right: 1rem; transform: none; }
  .hero::before { bottom: 5rem; }
  .hero::after { bottom: 2rem; left: 1rem; right: auto; }
  .xhs-checklist { --spot-size: 4.5rem; margin-top: 0; }
  .editorial-head { min-height: 8rem; padding-right: 6rem; }
  .xhs-rehab { --spot-size: 5rem; right: 0; }
  .editorial-head h2 { font-size: 1.5rem; }
  .tool-panel { padding-top: 10rem; }
  .xhs-talk { --spot-size: 7rem; }
}

/* Soft color blocks for the homepage reading recommendations. */
@media screen {
  .featured-articles { gap: .85rem; border: 0; }
  .featured-articles .article-card { padding: 1.15rem 1.2rem; border: 1px solid transparent; border-radius: .85rem; box-shadow: none; }
  .featured-articles .article-card:nth-child(3n + 1) { background: #dbeaed; }
  .featured-articles .article-card:nth-child(3n + 2) { background: #f0dfd9; }
  .featured-articles .article-card:nth-child(3n) { background: #e8e8d8; }
  .featured-articles .article-card:hover { border-color: #a99b8b; }
  .featured-articles .article-icon { background: rgba(255,253,248,.65); }
  .featured-articles .article-tags .tag { background: rgba(255,253,248,.55); color: #4c6258; }
  .featured-articles .article-card p { white-space: normal; }
  .featured-articles .article-card:focus-visible { outline: 2px solid #477b78; outline-offset: 3px; }
}
@media screen and (max-width: 600px) {
  .featured-articles .article-card { padding: 1rem; }
}

/* Compact category rows and a content-sized tools panel. */
@media screen {
  .portal-grid { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
  .portal-grid .portal-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-height: 0; padding: 1rem 1.4rem; }
  .portal-card > div:first-child { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); column-gap: 1rem; align-items: center; }
  .portal-grid .portal-card .icon-box { display: grid; grid-row: 1 / 3; }
  .portal-grid .portal-card h3 { margin: 0; }
  .portal-card p { grid-column: 2; }
  .portal-grid .portal-meta { margin: 0; gap: 1rem; }
  .portal-card::before, .portal-card::after { content: none; }
  .tool-panel { align-self: start; height: auto; min-height: 0; padding: 1.5rem; }
  .tool-panel > .xhs-talk { position: absolute; --spot-size: 5.5rem; top: .75rem; right: 1rem; }
  .tool-panel-kicker, .tool-panel h3 { padding-right: 6.5rem; }
  .tool-panel h3 { max-width: none; font-size: 1.9rem; }
  .tool-panel-kicker { font-size: .875rem; letter-spacing: .04em; }
  .tool-panel::after { content: none; }
}
@media screen and (max-width: 600px) {
  .portal-grid .portal-card { padding: .9rem 1rem; gap: .5rem; }
  .portal-card > div:first-child { column-gap: .65rem; grid-template-columns: 2.3rem minmax(0, 1fr); }
  .portal-grid .portal-meta { flex-direction: column; gap: .25rem; font-size: .8125rem; }
  .portal-card .icon-box { width: 2.2rem; font-size: 1.7rem; }
  .tool-panel { padding: 1.25rem; }
  .tool-panel > .xhs-talk { --spot-size: 4.5rem; right: .75rem; }
  .tool-panel-kicker, .tool-panel h3 { padding-right: 5rem; }
}

@media print {
  @page { size: A4 landscape; margin: 8mm; }
  body { color: #111; background: white; font-size: 9pt; line-height: 1.35; }
  .site-header, .site-footer, .crumbs, .article-aside, .article > .tag, .article > .lead, .article > .notice, .no-print { display: none !important; }
  .page { width: 100%; padding: 0; }
  .article-shell { display: block; }
  .article { display: grid; grid-template-columns: 1fr 1fr; gap: 2mm 5mm; padding: 0; border: 0; box-shadow: none; }
  .article h1 { grid-column: 1 / -1; margin: 0 0 2mm; font-size: 18pt; }
  .article h2 { margin: 1mm 0; font-size: 10.5pt; break-after: avoid; }
  .article section { margin: 0; break-inside: avoid; }
  .article section:has(.privacy-note) { display: none; }
  .handoff-form { gap: 1.5mm 2mm; margin-top: 0; }
  .handoff-form .field { gap: .5mm; }
  .handoff-form .field label { font-size: 7.5pt; line-height: 1.2; }
  .field input, .field textarea { padding: 1.2mm; border: 1px solid #999; color: #111; background: white; font-size: 8pt; }
  .field input { height: 7mm; }
  .field textarea { height: 10mm !important; min-height: 0; resize: none; line-height: 1.25; }
}

/* Hospital map entry and the three community introductions. */
.rehab-topics { margin: 1.5rem 0 2rem; }
.rehab-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.rehab-topic-card { display: flex; align-items: center; gap: 1rem; min-width: 0; padding: 1.2rem; border-radius: 1rem; background: #dbeaed; color: #5b3b2a; text-decoration: none; }
.rehab-topic-card:nth-child(2) { background: #f1ded8; }
.rehab-topic-card:nth-child(3) { background: #e2e7d8; }
.rehab-topic-card:nth-child(4) { background: #f3e9ce; }
.rehab-topic-card > i { flex-shrink: 0; font-size: 1.6rem; color: #477b78; }
.rehab-topic-card > span:nth-child(2) { flex: 1; min-width: 0; }
.rehab-topic-card h2 { margin: 0 0 .15rem; font-size: 1.15rem; line-height: 1.5; }
.rehab-topic-card p { margin: 0; font-size: 1rem; color: #675d53; }
.rehab-topic-count { display: inline-block; margin-top: .5rem; font-size: .9rem; font-weight: 600; color: #477b78; }
.rehab-topic-card > span:last-child { font-size: 1.6rem; color: #477b78; }
.rehab-topic-card:hover { box-shadow: inset 0 0 0 1px #477b78; }
.rehab-topic-card:focus-visible { outline: 3px solid #477b78; outline-offset: 3px; }
@media (max-width: 640px) { .rehab-topic-grid { grid-template-columns: 1fr; } .rehab-topic-card { padding: 1rem; } }
.hospital-map-entry { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; margin: 1.2rem 0; background: #dce9e5; border: 1px solid #c7d9d2; border-radius: .85rem; text-decoration: none; }
.hospital-map-entry > i { font-size: 1.8rem; color: #477b78; }
.hospital-map-entry > span:nth-child(2) { flex: 1; }
.hospital-map-entry strong, .hospital-map-entry small { display: block; }
.hospital-map-entry small { font-size: .875rem; color: #625d52; }
.community-heading { max-width: 48rem; margin: 2rem 0; }
.community-heading h1 { font-family: Georgia, 'Songti SC', serif; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.4; }
.community-status { color: #786b61; font-size: .9375rem; }
.community-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.community-grid a { padding: 1.5rem; border-radius: 1rem; background: #dbeaed; text-decoration: none; }
.community-grid a:nth-child(2) { background: #e8e8d8; }
.community-grid a:nth-child(3) { background: #f0dfd9; }
.community-grid i { font-size: 1.8rem; color: #477b78; }
.community-grid h2 { font-size: 1.25rem; }
.community-grid span { color: #477b78; }
.community-detail { max-width: 50rem; margin: 2rem auto; padding: 1.5rem 0; border-top: 1px solid #d9cfc4; scroll-margin-top: 11rem; }
.community-detail h2 { font-family: Georgia, 'Songti SC', serif; }
.community-detail h3 { font-size: 1.1rem; }
.community-detail a { color: #477b78; }
@media (max-width: 700px) { .community-grid { grid-template-columns: 1fr; } }

.hospital-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.hospital-card { padding: 1.4rem; background: #dbeaed; border-radius: .85rem; }
.hospital-card:nth-child(4n + 1) { background: #dbeaed; }
.hospital-card:nth-child(4n + 2) { background: #f0dfd9; }
.hospital-card:nth-child(4n + 3) { background: #f2e8cf; }
.hospital-card:nth-child(4n + 4) { background: #e1e7d9; }
.hospital-group .section-head h2 { display: inline-block; padding: .65rem 1.1rem; border-radius: .75rem; background: #477b78; color: #fffaf1; font-size: clamp(1.2rem, 2.3vw, 1.65rem); line-height: 1.5; }
.hospital-card h3 { font-size: 1.2rem; }
.hospital-links, .hospital-map-actions { display: flex; gap: .9rem; flex-wrap: wrap; }
.hospital-links a, .hospital-map-actions a, .hospital-group .section-head a { color: #365f5b; }
.hospital-map-actions .hospital-map-link { display: inline-flex; align-items: center; gap: 1rem; max-width: 100%; padding: .85rem 1.1rem; border: 1px solid #b6cdc6; border-radius: 1rem; background: #e7eee6; color: #365f5b; text-decoration: none; box-shadow: 0 3px 10px #365f5b08; transition: background .18s ease, border-color .18s ease; }
.hospital-map-icon { display: grid; place-items: center; flex: 0 0 2.8rem; height: 2.8rem; border-radius: .85rem; background: #477b78; color: #fffaf1; font-size: 1.5rem; }
.hospital-map-label { min-width: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.5; }
.hospital-map-label small { display: block; margin-top: .1rem; color: #536d64; font-size: .875rem; font-weight: 400; }
.hospital-map-arrow { margin-left: 1.25rem; font-size: 1.35rem; }
.hospital-map-actions .hospital-map-link:hover { background: #dce8dc; border-color: #73998c; }
.hospital-map-actions .hospital-map-link:focus-visible { outline: 2px solid #365f5b; outline-offset: 4px; }
@media (max-width: 420px) { .hospital-map-actions .hospital-map-link { gap: .7rem; padding: .75rem .85rem; } .hospital-map-arrow { margin-left: .35rem; } }
@media (prefers-reduced-motion: reduce) { .hospital-map-actions .hospital-map-link { transition: none; } }
.hospital-links { font-size: .875rem; }
@media(max-width:700px) { .hospital-cards { grid-template-columns: 1fr; } .hospital-group .section-head { align-items: start; flex-direction: column; } }

/* Bilingual site identity */
.brand-bilingual { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: .2rem 0; min-width: 0; }
.brand-bilingual > strong { white-space: nowrap; }
.brand-description { display: contents; }
.brand-description strong { font-size: 1rem; line-height: 1.5; }
.brand-description small { display: block; grid-column: 1 / -1; text-align: center; max-width: none; font-size: .65rem; line-height: 1.5; letter-spacing: .01em; margin-top: .15rem; }
.footer-translation { display: block; text-align: center; font-size: .7rem; line-height: 1.6; margin-top: .35rem; opacity: .8; }
@media (max-width: 600px) {
  .brand { flex-shrink: 1; min-width: 0; gap: .6rem; }
  .brand-mark { flex: 0 0 2.6rem; }
  .brand-bilingual { padding-left: .6rem; }
  .brand-description strong { font-size: .9rem; }
  .brand-description small { font-size: .6rem; max-width: none; }
}

.admission-feature { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.3rem; margin: 0 0 1rem; background: #477b78; color: #fffdf8; border-radius: .8rem; text-decoration: none; }
.admission-feature > i { font-size: 1.7rem; }
.admission-feature > span:nth-child(2) { flex: 1; }
.admission-feature strong, .admission-feature small { display: block; }
.admission-feature strong { font-size: 1.15rem; }
.admission-feature small { margin-top: .25rem; font-size: .85rem; }
.admission-feature:hover { background: #396663; }
.tool-group-links .calculator-feature { background: #f4e9cf; color: #5b3b2a; border-radius: .5rem; padding: .8rem; font-weight: 700; }

/* Distinct colors for the four tool categories */
.tool-directory-grid > .tool-group:nth-child(1) { background: #dcebef; border-color: #c7dce1; }
.tool-directory-grid > .tool-group:nth-child(2) { background: #f3ead3; border-color: #e5d9ba; }
.tool-directory-grid > .tool-group:nth-child(3) { background: #e0e9df; border-color: #ccd9ca; }
.tool-directory-grid > .tool-group:nth-child(4) { background: #efded8; border-color: #e0c9c0; }
.tool-directory-grid .tool-group-title, .tool-directory-grid .tool-group-links a { border-color: rgba(91,59,42,.14); }
.tool-directory-grid .tool-group-title > i { background: rgba(255,253,248,.65); }
.tool-directory-grid .calculator-feature { background: #fff9eb; border: 1px solid #d4bd82; }

/* Color-block main navigation */
.top-nav a { padding: .55rem .85rem; border-radius: .65rem; background: #e5e5d7; color: #5b3b2a; text-decoration: none; }
.top-nav a:nth-child(2) { background: #dcebef; }
.top-nav a:nth-child(3) { background: #f3ead3; }
.top-nav a:nth-child(4) { background: #e0e9df; }
.top-nav a:nth-child(5) { background: #efded8; }
.top-nav a:nth-child(6) { background: #dde9e5; }
.top-nav a:last-child { background: #e8e2d9; }
.top-nav a[aria-current="page"], .top-nav .nav-action[aria-current="page"] { background: #477b78; color: #fffdf8; text-decoration: none; box-shadow: inset 0 -3px 0 rgba(0,0,0,.16); }
.top-nav a:hover { box-shadow: inset 0 0 0 2px rgba(71,123,120,.45); }
.top-nav a:focus-visible { outline: 3px solid #477b78; outline-offset: 3px; }
.top-nav a small { margin-left: .25rem; }
@media (max-width: 600px) { .top-nav a { padding: .45rem .3rem; font-size: .8rem; } .top-nav a:last-child { grid-column: span 2; } }

.handoff-print-value { display: none; }
@media print {
  [data-handoff] { display: none !important; }
  .handoff-print-value { display: block; white-space: pre-wrap; overflow-wrap: anywhere; border-bottom: 1px solid #aaa; min-height: 7mm; padding: 1mm; font-size: 9pt; line-height: 1.4; }
  .article:has([data-handoff]) { display: block; }
  .article:has([data-handoff]) section { break-inside: auto; margin-bottom: 3mm; }
  .article:has([data-handoff]) .handoff-form { display: block; }
  .article:has([data-handoff]) .field { display: block; margin-bottom: 2mm; }
}

/* Green brand panel, with the translation centered below the full name. */
.brand .brand-bilingual { border: 0; padding: .7rem 1rem; border-radius: .85rem; background: #477b78; }
.brand .brand-bilingual strong { color: #fffaf1; }
.brand .brand-bilingual small { color: #e3eee8; }
@media (max-width: 600px) { .brand .brand-bilingual { padding: .55rem .65rem; border-radius: .65rem; } }