/* service.css | Mobile-first, responsive styles (larger font sizes) */
:root{
  --fg:#222;
  --bg:#fff;
  --muted:#666;
  --bd:#e5e7eb;
  --link:#0a66c2;
  --container: 92vw;
  --container-max: 960px;
}

@media (prefers-color-scheme: dark){
  :root{
    --fg:#eee;
    --bg:#0b0b0b;
    --muted:#aaa;
    --bd:#2a2a2a;
    --link:#66a6ff;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--fg);
  background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.85;
  font-size:clamp(16px, 4.2vw, 18px);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

.container{
  width:var(--container);
  max-width:var(--container-max);
  margin-inline:auto;
  padding:22px 0;
}

h1{
  margin:.3em 0 .5em;
  font-weight:700;
  line-height:1.3;
  font-size:clamp(24px, 6vw, 34px);
}

.lead{
  color:var(--muted);
  margin:0 0 1rem;
  font-size:clamp(16px, 4vw, 18px);
}

h2{
  margin:2rem 0 .6rem;
  border-left:4px solid var(--fg);
  padding-left:.6rem;
  font-size:clamp(20px, 5vw, 24px);
}

h3{
  margin:1.3rem 0 .5rem;
  font-size:clamp(18px, 4.5vw, 21px);
}

p{margin:.8rem 0}
ul,ol{padding-left:1.6rem}
li{margin:.4rem 0}
a{color:var(--link); text-decoration:underline}
.note{color:var(--muted); font-size:.98em}

.divider{
  height:1px;
  border:0;
  background:var(--bd);
  margin:28px 0;
}

/* Table of contents */
.toc{
  border:1px solid var(--bd);
  padding:14px;
  border-radius:12px;
  background:#fafafa;
  font-size:clamp(15px, 3.8vw, 17px);
}
@media (prefers-color-scheme: dark){
  .toc{background:#121212}
}
.toc ol{margin:.4rem 0; padding-left:1.2rem}
.toc a{display:inline-block; padding:.25rem 0}

/* Definition list that wraps nicely on mobile */
.deflist{
  display:grid;
  grid-template-columns: 1fr;
  gap:.2rem .8rem;
  font-size:clamp(16px, 4vw, 18px);
}
.deflist > div{
  display:grid;
  grid-template-columns: 8em 1fr;
  align-items:baseline;
}
.deflist dt{
  font-weight:600;
}
.deflist dd{
  margin:0 0 .5rem 0;
}

/* Larger screens */
@media (min-width: 768px){
  :root{ --container: 88vw; --container-max: 1040px; }
  .toc{ position:sticky; top:14px; }
  .deflist{ grid-template-columns: 1fr; }
}

/* Print */
@media print{
  :root{ --fg:#000; --bg:#fff; --link:#000; }
  body{font-size:13pt}
  a{ text-decoration:none }
  .toc{ border:0; background:transparent }
  .divider{ background:#000 }
}

.section p {
  line-height: 1.8;
  margin-top: 0.5em;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
}