﻿/* Baseline theme. Structure-only styling meant to be replaced by a site-specific design.
   All colors/typography are tokens on :root. Uses logical properties so RTL works. */
:root {
  --c-primary: #1f3a5f;
  --c-secondary: #3c7a89;
  --c-accent: #e0a458;
  --c-soft: #c9d6df;
  --c-bg: #f7f9fb;
  --c-surface: #ffffff;
  --c-text: #1b2733;
  --c-muted: #5b6b7a;
  --font-body: system-ui, -apple-system, "Segoe UI", "Noto Sans", "Noto Sans JP", "Noto Sans TC", "Noto Sans Arabic", sans-serif;
  --font-head: var(--font-body);
  --radius: 10px;
  --wrap: 1160px;
  --gap: clamp(16px, 3vw, 28px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-bg); color: var(--c-text); font: 17px/1.7 var(--font-body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-primary); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.25; color: var(--c-text); }
h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); margin: .2em 0 .4em; }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 2em 0 .6em; }
h3 { font-size: 1.15rem; margin: 1.4em 0 .4em; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 16px; }
.skip-link { position: absolute; inset-inline-start: -999px; top: 8px; background: var(--c-surface); padding: 8px 12px; z-index: 10; }
.skip-link:focus { inset-inline-start: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* header */
.site-header { background: var(--c-surface); border-bottom: 1px solid var(--c-soft); position: sticky; top: 0; z-index: 5; }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c-text); font-weight: 700; font-size: 1.1rem; }
.nav-toggle { margin-inline-start: auto; display: none; background: none; border: 1px solid var(--c-soft); border-radius: var(--radius); padding: 6px 12px; font: inherit; cursor: pointer; }
.site-nav { margin-inline-start: auto; }
.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; }
.site-nav a { text-decoration: none; color: var(--c-text); font-size: .95rem; padding: 6px 0; display: inline-block; }
.site-nav a[aria-current="page"] { color: var(--c-primary); box-shadow: inset 0 -2px 0 var(--c-accent); }
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; width: 100%; margin: 0; }
  .nav-open .site-nav { display: block; }
  .site-nav ul { flex-direction: column; padding-bottom: 12px; }
}

/* layout pieces */
main { padding-block: 24px 64px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 12px; font-size: .88rem; color: var(--c-muted); }
.breadcrumb li + li::before { content: "/"; margin-inline-end: 6px; color: var(--c-soft); }
.eyebrow { text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; color: var(--c-secondary); margin: 0; font-weight: 600; }
.lead { font-size: 1.15rem; color: var(--c-muted); max-width: 70ch; }
.meta { font-size: .88rem; color: var(--c-muted); }
.page-head { margin-bottom: 24px; }
.btn, .btn-secondary, button[type="submit"] { display: inline-block; padding: 10px 18px; border-radius: var(--radius); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; border: 2px solid var(--c-primary); }
.btn, button[type="submit"] { background: var(--c-primary); color: #fff; }
.btn-secondary { background: transparent; color: var(--c-primary); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }

.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--gap); align-items: center; padding-block: 16px 24px; }
.hero-points { padding-inline-start: 1.2em; }
.hero-media img { border-radius: var(--radius); }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } }

.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card { background: var(--c-surface); border: 1px solid var(--c-soft); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.card-body { padding: 16px 18px 18px; }
.card h3 { margin: .3em 0; }
.card h3 a { text-decoration: none; color: var(--c-text); }
.card p { margin: .4em 0; }

.intro-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap); align-items: start; }
@media (max-width: 860px) { .intro-split { grid-template-columns: 1fr; } }

/* article */
.prose { max-width: 75ch; }
.prose table { font-size: .95rem; }
.cover img { border-radius: var(--radius); margin-bottom: 24px; }
.figure { margin: 28px 0; }
.figure img { width: 100%; max-height: 560px; object-fit: contain; border: 1px solid var(--c-soft); border-radius: var(--radius); background: #fff; }
.figure figcaption { margin-top: 8px; font-size: .9rem; color: var(--c-muted); }
.article-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
.toc { position: sticky; top: 84px; font-size: .9rem; border-inline-start: 3px solid var(--c-soft); padding-inline-start: 14px; }
.toc h2 { font-size: .95rem; margin: 0 0 8px; }
.toc ol { padding-inline-start: 1.1em; margin: 0; }
@media (max-width: 960px) { .article-layout { grid-template-columns: 1fr; } .toc { position: static; } }
.callout { background: var(--c-surface); border-inline-start: 4px solid var(--c-accent); padding: 4px 18px; margin: 1.4em 0; border-radius: 0 var(--radius) var(--radius) 0; }
.related-tool { background: var(--c-surface); border: 1px solid var(--c-soft); border-radius: var(--radius); padding: 8px 22px 22px; margin-top: 40px; }

.table-wrap { overflow-x: auto; margin: 1.2em 0; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; background: var(--c-surface); }
th, td { border: 1px solid var(--c-soft); padding: 9px 12px; text-align: start; vertical-align: top; }
th { background: var(--c-bg); font-weight: 600; }
th .sort { all: unset; cursor: pointer; font-weight: 600; }
th[aria-sort="ascending"] .sort::after { content: " ▲"; }
th[aria-sort="descending"] .sort::after { content: " ▼"; }
.table-tools { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.hint { font-size: .85rem; color: var(--c-muted); margin: 0; }

/* tools */
.tool-panel { background: var(--c-surface); border: 1px solid var(--c-soft); border-radius: var(--radius); padding: clamp(16px, 3vw, 28px); margin-bottom: 32px; }
.fields { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 4px; }
.input-unit { display: flex; align-items: center; border: 1px solid var(--c-soft); border-radius: var(--radius); background: #fff; }
.input-unit input { border: 0; flex: 1; min-width: 0; padding: 10px 12px; font: inherit; background: transparent; }
.unit { padding-inline: 10px; color: var(--c-muted); font-size: .9rem; }
select, input[type="search"], .quote-input input { width: 100%; padding: 10px 12px; font: inherit; border: 1px solid var(--c-soft); border-radius: var(--radius); background: #fff; }
.actions { margin-block: 18px; }
.results dl { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 0; }
.result-row { background: var(--c-bg); border-radius: var(--radius); padding: 12px 14px; }
.result-row dt { font-size: .85rem; color: var(--c-muted); }
.result-row dd { margin: 0; font-size: 1.35rem; font-weight: 700; }
.note { font-size: .85rem; color: var(--c-muted); }
.checklist { list-style: none; padding: 0; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--c-soft); }
.checklist input { width: 20px; height: 20px; margin-top: 4px; flex: none; }
.progress { font-weight: 600; }

.faq details { background: var(--c-surface); border: 1px solid var(--c-soft); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 600; }
.link-list { list-style: none; padding: 0; }
.link-list li { padding: 10px 0; border-bottom: 1px solid var(--c-soft); }
.link-list p { margin: 4px 0 0; color: var(--c-muted); font-size: .95rem; }
.search-results { list-style: none; padding: 0; }
.search-results li { padding: 12px 0; border-bottom: 1px solid var(--c-soft); }
.disclosure { margin-top: 48px; font-size: .95rem; color: var(--c-muted); }

/* footer */
.site-footer { background: var(--c-surface); border-top: 1px solid var(--c-soft); padding-block: 32px; font-size: .92rem; }
.site-footer .wrap { display: grid; gap: 20px; grid-template-columns: 1.2fr 1fr 1fr; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 6px; }
.footer-note, .copyright { grid-column: 1 / -1; color: var(--c-muted); margin: 0; }
@media (max-width: 760px) { .site-footer .wrap { grid-template-columns: 1fr; } }

/* Benefit Ledger: paper, ink, and a practical coverage workbook. */
:root { --wrap:1240px; --font-head:Georgia,"Times New Roman",serif; --radius:3px; --c-primary:#153d3a; --c-secondary:#276760; --c-accent:#9a4c20; --c-soft:#dce7df; --c-bg:#f7f5ee; --c-text:#172f32; --c-muted:#506262; }
.site-header { position:relative; background:#f7f5ee; border-block-start:5px solid var(--c-primary); }
.header-inner { min-height:92px; }
.brand { font-family:Georgia,serif; font-size:1.5rem; letter-spacing:-.04em; }
.site-nav a { font-size:.81rem; font-weight:650; }
main { padding-block-start:36px; }
h1 { font-weight:400; letter-spacing:-.045em; font-size:clamp(2.3rem,5.4vw,4.8rem); line-height:1.04; }
h2 { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:400; letter-spacing:-.025em; }
h3 { font-weight:400; font-size:1.35rem; }
.home main > section { margin-block-end:64px; }
.hero { grid-template-columns:1fr 1.12fr; padding-block:15px 45px; gap:55px; }
.hero h1 { max-width:10ch; }
.hero .lead { max-width:43ch; font-size:1.1rem; }
.hero-media { margin:0; position:relative; padding-block-end:20px; }
.hero-media::after { content:""; position:absolute; inset-block:24px 0; inset-inline:24px -16px; border:1px solid #9daea0; z-index:-1; }
.hero-media img { width:100%; aspect-ratio:1.05; object-fit:cover; }
figcaption { font:.72rem/1.5 var(--font-body); color:var(--c-muted); padding-block-start:8px; }
.hero-points { list-style:none; padding:0; font-size:.92rem; margin-block:24px; }
.hero-points li { border-block-start:1px solid #d1d9cf; padding-block:7px; }
.hero-points li::before { content:"\2713"; color:var(--c-secondary); margin-inline-end:10px; }
.btn,.btn-secondary,button[type="submit"] { font-size:.91rem; border-radius:2px; padding:12px 18px; }
.decision-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-block:1px solid #aab9ac; padding-block:28px; gap:30px; }
.decision-strip > div + div { border-inline-start:1px solid #c5cfc5; padding-inline-start:30px; }
.decision-strip span { font-size:.7rem; letter-spacing:.1em; font-weight:700; color:var(--c-secondary); }
.decision-strip h2 { font-size:1.5rem; margin-block:10px; }
.decision-strip p { font-size:.92rem; margin:0; }
.cats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.cat-card { border:0; background:transparent; }
.cat-card .card-body { padding-inline:0; border-block-end:2px solid var(--c-primary); padding-block-end:22px; }
.card-media img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.guides { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 36px; }
.guide-card { display:grid; grid-template-columns:150px minmax(0,1fr); border:0; border-block-end:1px solid #cbd5cc; background:transparent; padding-block-end:20px; border-radius:0; }
.guide-card .card-media img { height:150px; aspect-ratio:1; }
.guide-card .card-body { padding-block:0; }
.guide-card .eyebrow { font-size:.65rem; }
.guide-card p { font-size:.9rem; }
.guide-card h3 { font-size:1.3rem; }
.tools { grid-template-columns:repeat(3,minmax(0,1fr)); }
.tool-card { border-color:#b9cabe; background:#eef2e9; }
.tool-card h3 { font-size:1.5rem; }
.tool-card .card-media img { aspect-ratio:2; }
.page-head { max-width:960px; margin-block-end:40px; }
.page-head h1 { font-size:clamp(2.2rem,4.5vw,3.6rem); }
.prose { max-width:72ch; line-height:1.85; }
.prose h2 { border-block-start:1px solid #d3dbd1; padding-block-start:24px; }
.prose li { margin-block-end:9px; }
.cover { margin-inline:0; max-width:980px; }
.cover img { width:100%; max-height:450px; object-fit:cover; }
.toc { border-color:var(--c-secondary); }
.tool-panel { border-block-start:5px solid var(--c-primary); box-shadow:0 8px 28px #173d3a09; }
.result-row { border-inline-start:3px solid var(--c-secondary); }
.result-row dd { font-variant-numeric:tabular-nums; }
.form-error { color:#8a2419; font-weight:600; }
:focus-visible { outline:3px solid #9a4c20; outline-offset:4px; }
.site-footer { background:#e9eee4; border-block-start:4px solid var(--c-primary); }
th { background:#e7ede3; }
.table-wrap { max-width:100%; }
.grid > *, .intro-split > *, .article-layout > *, .fields > * { min-width:0; }
@media(max-width:960px) { .hero { gap:28px; } .site-nav a { font-size:.9rem; } }
@media(max-width:860px) {
 .header-inner { min-height:76px; } .hero { grid-template-columns:1fr; }
 .hero h1 { max-width:15ch; } .hero-media img { aspect-ratio:4/3; }
 .hero-media::after { inset-inline-end:0; } .cats,.tools { grid-template-columns:1fr; }
 .cat-card { display:grid; grid-template-columns:34% 1fr; gap:20px; }
 .cat-card .card-media img { height:100%; aspect-ratio:1; }
 .cat-card .card-body { padding-block-start:0; } .guides { grid-template-columns:1fr; }
 .decision-strip { gap:18px; } .decision-strip > div + div { padding-inline-start:18px; }
 .decision-strip h2 { font-size:1.22rem; }
}
@media(max-width:480px) {
 .wrap { padding-inline:20px; } .hero { padding-block-start:0; } .hero .cta { flex-direction:column; align-items:stretch; text-align:center; }
 .hero h1 { font-size:3.15rem; } .decision-strip { grid-template-columns:1fr; }
 .decision-strip > div + div { border-inline-start:0; padding-inline-start:0; border-block-start:1px solid #c5cfc5; padding-block-start:16px; }
 .guide-card { grid-template-columns:90px minmax(0,1fr); gap:14px; } .guide-card .card-body { padding-inline:0; }
 .guide-card .card-media img { height:110px; } .guide-card h3 { font-size:1.15rem; }
 .fields,.results dl { grid-template-columns:minmax(0,1fr); } .home main > section { margin-block-end:40px; }
 .cat-card { grid-template-columns:1fr; gap:14px; } .cat-card .card-media img { aspect-ratio:2; width:100%; }
 .table-wrap table { min-width:620px; } .brand { font-size:1.35rem; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }

/* Keep long insurer names, official URLs and keyboard focus usable on narrow screens. */
.prose, .card-body, .result-row dd { overflow-wrap:anywhere; }
.table-wrap { overflow-x:auto; overscroll-behavior-inline:contain; }
.table-wrap:focus-visible { outline:3px solid #9a4c20; outline-offset:4px; }
input, select, textarea { max-inline-size:100%; }
@media(max-width:480px) {
 .site-nav a, .site-footer a { min-block-size:44px; display:inline-flex; align-items:center; }
 input, select, textarea { font-size:1rem; min-block-size:44px; }
}

/* Homepage photographic coverage workbook — 2026-11-02 */
.home .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:46px;align-items:start}
.home .hero-text{padding-block-start:15px}
.home .hero h1{font-size:clamp(2.8rem,4.6vw,4.2rem);line-height:1.05;max-inline-size:13ch}
.benefit-gallery{min-inline-size:0}
.home .benefit-gallery .hero-media{padding-block-end:0;margin:0}
.home .benefit-gallery .hero-media::after{display:none}
.home .benefit-gallery .hero-media img{aspect-ratio:16/11;block-size:auto;object-position:center}
.benefit-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin-block-start:18px}
.benefit-detail{min-inline-size:0;text-decoration:none;border-block-end:1px solid #9daea0}
.benefit-detail img{inline-size:100%;aspect-ratio:16/10;object-fit:cover}
.benefit-detail>span{display:flex;justify-content:space-between;gap:12px;padding-block:11px;font-size:11px;font-weight:600;line-height:1.5}
.benefit-detail>span>span{color:var(--c-accent);flex:none}
.benefit-detail:hover>span{text-decoration:underline;text-underline-offset:4px}
.home .cat-card .card-media img{aspect-ratio:4/3;inline-size:100%;object-fit:cover}
.home .grid.guides{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.home .guide-card{display:flex;gap:0;padding-block-end:24px}
.home .guide-card .card-media img{inline-size:100%;block-size:auto;aspect-ratio:16/11}
.home .guide-card .card-body{padding-block-start:19px}
.home .guide-card h3{font-size:1.5rem;line-height:1.2}
.home .tools .card-media img{aspect-ratio:4/3;object-fit:cover}
@media(max-width:1080px){.home .hero{gap:28px}.home .grid.guides{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.home .hero{grid-template-columns:minmax(0,1fr);gap:28px}.home .hero-text{padding:0}.home .hero h1{max-inline-size:18ch}.home .benefit-gallery .hero-media img{aspect-ratio:16/10}}
@media(max-width:600px){.home .hero h1{font-size:clamp(2.75rem,10vw,3.6rem);max-inline-size:13ch}.benefit-detail>span{font-size:10px}.home .cats .cat-card{display:flex;gap:0}.home .cats .card-media img{block-size:auto;aspect-ratio:16/10}.home .cats .card-body{padding-block-start:18px}.home .cats .card h3{font-size:1.65rem}.home .grid.guides{grid-template-columns:minmax(0,1fr);gap:28px}.home .guide-card h3{font-size:1.6rem}.home .guide-card p{font-size:.9rem}.home .tools .tool-card{display:flex;gap:0;padding:0}.home .tools .card-media img{block-size:auto;aspect-ratio:16/10}.home .tools .card-body{padding:22px}.home .tools .card h3{font-size:1.5rem}.home .tools .card p{font-size:.9rem}}
