/* Article-specific styles: time-returning-dx */
:root {
      --ink:#111111;
      --muted:#555555;
      --line:#e5e5e5;
      --soft:#f7f7f7;
      --paper:#ffffff;
      --accent:#b5121b;
      --accent-soft:#fff3f4;
      --warm:#b98a45;
      --warm-soft:#fff6e8;
      --shadow:0 16px 44px rgba(16,32,51,.08);
      --radius:22px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
      color:var(--ink);
      background:linear-gradient(180deg,#fafafa 0%,#ffffff 34%,#fafafa 100%);
      line-height:1.9;
      letter-spacing:.01em;
    }
    a{color:var(--accent);text-decoration:none}
    a:hover{text-decoration:underline}
    .page{max-width:1120px;margin:0 auto;padding:56px 22px 80px}
    .article{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);overflow:hidden}
    .hero{padding:56px 56px 32px;background:linear-gradient(135deg,#fafafa 0%,#f6f6f6 100%);border-bottom:1px solid var(--line)}
    .label{font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
    h1{font-size:clamp(2rem,4vw,3.6rem);line-height:1.22;margin:0 0 22px;font-weight:800;letter-spacing:-.04em}
    .subtitle{font-size:clamp(1.05rem,2vw,1.35rem);color:var(--muted);font-weight:700;margin-top:-10px;margin-bottom:26px}
    .lead{font-size:1.08rem;color:#333333;max-width:880px;border-left:4px solid var(--accent);padding-left:20px;margin:0 0 24px}
    .intro-extra p{margin:.8em 0;color:#444444}
    .toc{padding:26px 56px;border-bottom:1px solid var(--line);background:#fff}
    .toc-title{font-weight:800;margin-bottom:10px}
    .toc-links{display:flex;flex-direction:column;gap:4px;max-width:760px}
    .toc-links a{padding:5px 0;color:#444444;font-size:.95rem}
    .body{padding:28px 56px 60px}
    .civio-section,.civio-references{padding:30px 0;border-bottom:1px solid #e5e5e5}
    .civio-section:last-child,.civio-references{border-bottom:0}
    h2{font-size:clamp(1.35rem,2.3vw,2rem);line-height:1.35;margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid var(--line);letter-spacing:-.02em}
    h3{font-size:1.08rem;margin:0 0 12px}
    p{margin:0 0 1.05em}
    .civio-list{padding-left:1.2em;margin:1em 0}
    .civio-list li{margin:.35em 0}
    .civio-box,.civio-note{border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin:24px 0;background:var(--soft)}
    .civio-box{background:var(--accent-soft);border-color:#f0c4c8;font-weight:700}
    .interactive-panel{border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 10px 30px rgba(16,32,51,.05);padding:22px;margin:28px 0}
    .panel-title{font-weight:800;margin-bottom:16px;color:var(--accent)}
    .tabs,.case-selector{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
    button{font:inherit}
    .tab-button,.case-button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 14px;color:#444444;cursor:pointer;transition:.2s ease}
    .tab-button.active,.case-button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
    .tab-content{display:none;padding:18px;border-radius:18px;background:var(--soft);border:1px solid #e5e5e5}
    .tab-content.active{display:block}
    .matrix-display{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
    .matrix-head{background:var(--soft);padding:18px 20px;border-bottom:1px solid var(--line)}
    .matrix-head p{color:var(--muted);font-size:.94rem;margin:0}
    .matrix-rows{display:grid}
    .matrix-row{display:grid;grid-template-columns:180px 1fr;gap:16px;padding:15px 20px;border-bottom:1px solid #e5e5e5}
    .matrix-row:last-child{border-bottom:0}
    .matrix-row strong{color:var(--accent)}
    .dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:26px 0}
    .data-card{border:1px solid var(--line);border-radius:20px;padding:22px;background:#fff;box-shadow:0 8px 24px rgba(16,32,51,.05)}
    .data-source,.mini-note{font-size:.85rem;color:var(--muted)}
    .bar-list,.compare-list{display:flex;flex-direction:column;gap:12px;margin:18px 0}
    .bar-row,.compare-row{display:grid;grid-template-columns:120px 1fr 58px;gap:12px;align-items:center;font-size:.9rem}
    .bar-track{height:12px;border-radius:999px;background:#e7eff4;overflow:hidden}
    .bar-track i{display:block;height:100%;background:var(--accent);border-radius:999px}
    .bar-row.muted .bar-track i{background:#9fb0bd}
    .compare-row div{display:flex;flex-direction:column;gap:4px}
    .compare-row i{display:block;height:8px;border-radius:999px}
    .compare-row .before{background:#c7d2dc}
    .compare-row .after{background:var(--warm)}
    .case-selector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
    .case-button{border-radius:14px;text-align:left;line-height:1.5}
    .case-display{background:var(--soft);border:1px solid #e5e5e5;border-radius:18px;padding:20px}
    .case-tag{display:inline-block;color:var(--accent);background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:.85rem}
    .currency-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .currency-card{display:block;text-align:left;border:1px solid var(--line);background:#fff;border-radius:18px;padding:16px;cursor:pointer}
    .currency-card strong{display:block;margin-bottom:6px;color:var(--accent)}
    .currency-card span{font-size:.9rem;color:var(--muted)}
    .condition-list{display:grid;gap:12px;margin-top:18px}
    details{border:1px solid var(--line);border-radius:16px;background:#fff;padding:0;overflow:hidden}
    summary{cursor:pointer;font-weight:800;padding:16px 18px;color:var(--accent);background:var(--soft)}
    details p{padding:0 18px 18px;margin:0}
    .reference-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
    .civio-references ul{padding-left:1.1em}
    .civio-references li{margin:.8em 0;font-size:.92rem;word-break:break-word}
    @media (max-width:780px){
      .page{padding:22px 12px 48px}
      .hero,.toc,.body{padding-left:22px;padding-right:22px}
      .dashboard-grid,.reference-columns,.currency-grid{grid-template-columns:1fr}
      .matrix-row{grid-template-columns:1fr;gap:6px}
      .case-selector{grid-template-columns:1fr}
      .bar-row,.compare-row{grid-template-columns:1fr;gap:6px}
    }
  
/* CIVIO site integration for the time-returning DX article */
.time-returning-embedded-page { padding-top: 28px; }
.time-returning-embedded-page .article { margin-top: 0; }
.time-returning-hero-image { margin-top: 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(16,32,51,.10); }
.time-returning-hero-image img { aspect-ratio: auto !important; object-fit: contain !important; background: #fff; }
.time-returning-hero-image figcaption { color: var(--muted) !important; background: #fff; }
.site-header button.nav-toggle { border: 0; border-radius: 0; padding: 0; }
.site-header button.nav-toggle span { display:block; }


/* Strongly scope this standalone article so global CIVIO hero styles do not break the layout */
.time-returning-embedded-page {
  width: min(1120px, calc(100% - 32px)) !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 28px 0 80px !important;
}
.time-returning-embedded-page .article {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.time-returning-embedded-page .hero {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  align-items: initial !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 56px 56px 36px !important;
  background: linear-gradient(135deg,#fafafa 0%,#f6f6f6 100%) !important;
  border-bottom: 1px solid var(--line) !important;
}
.time-returning-embedded-page .hero::before,
.time-returning-embedded-page .hero::after {
  display: none !important;
  content: none !important;
}
.time-returning-embedded-page .hero > * {
  position: static !important;
  z-index: auto !important;
}
.time-returning-embedded-page .label {
  display: block !important;
  margin: 0 0 18px !important;
  color: var(--accent) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.time-returning-embedded-page .hero h1 {
  display: block !important;
  max-width: 920px !important;
  margin: 0 0 22px !important;
  color: var(--ink) !important;
  font-size: clamp(2rem, 4vw, 3.6rem) !important;
  line-height: 1.22 !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
}
.time-returning-embedded-page .subtitle {
  display: block !important;
  max-width: 920px !important;
  margin: -10px 0 26px !important;
  color: var(--muted) !important;
  font-size: clamp(1.05rem, 2vw, 1.35rem) !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
}
.time-returning-embedded-page .lead {
  display: block !important;
  max-width: 880px !important;
  margin: 0 0 24px !important;
  padding-left: 20px !important;
  border-left: 4px solid var(--accent) !important;
  color: #333333 !important;
  font-size: 1.08rem !important;
  line-height: 1.9 !important;
}
.time-returning-embedded-page .intro-extra {
  max-width: 900px !important;
}
.time-returning-embedded-page .intro-extra p {
  margin: .8em 0 !important;
  color: #444444 !important;
  font-size: 1rem !important;
  line-height: 1.9 !important;
}
.time-returning-embedded-page .time-returning-hero-image {
  display: block !important;
  max-width: 900px !important;
  margin: 30px 0 0 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 18px 40px rgba(16,32,51,.10) !important;
}
.time-returning-embedded-page .time-returning-hero-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background: #fff !important;
}
.time-returning-embedded-page .time-returning-hero-image figcaption {
  margin: 0 !important;
  padding: 12px 16px 14px !important;
  color: var(--muted) !important;
  background: #fff !important;
  font-size: .86rem !important;
  line-height: 1.75 !important;
}
@media (max-width: 780px) {
  .time-returning-embedded-page {
    width: calc(100% - 24px) !important;
    padding: 18px 0 56px !important;
  }
  .time-returning-embedded-page .hero,
  .time-returning-embedded-page .toc,
  .time-returning-embedded-page .body {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}


.time-returning-embedded-page .toc {
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}
.time-returning-embedded-page .body {
  padding-top: 18px !important;
  padding-bottom: 52px !important;
}
.time-returning-embedded-page .civio-section,
.time-returning-embedded-page .civio-references {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 24px 0 !important;
  border-bottom: 1px solid #e5e5e5 !important;
}
.time-returning-embedded-page .civio-section:first-child {
  padding-top: 18px !important;
}
.time-returning-embedded-page .civio-section:last-child,
.time-returning-embedded-page .civio-references {
  border-bottom: 0 !important;
}
.time-returning-embedded-page .civio-section h2,
.time-returning-embedded-page .civio-references h2 {
  margin: 0 0 16px !important;
  padding: 0 0 10px !important;
  border-left: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink) !important;
  line-height: 1.42 !important;
}
.time-returning-embedded-page .civio-section h2::before,
.time-returning-embedded-page .civio-references h2::before {
  content: none !important;
  display: none !important;
}
.time-returning-embedded-page .civio-section h3,
.time-returning-embedded-page .civio-references h3 {
  margin: 0 0 10px !important;
  padding: 0 !important;
  border-left: 0 !important;
  line-height: 1.5 !important;
}
.time-returning-embedded-page .civio-section p,
.time-returning-embedded-page .civio-references p,
.time-returning-embedded-page .civio-list,
.time-returning-embedded-page .civio-section ul:not(.civio-list) {
  margin-top: 0 !important;
  line-height: 1.9 !important;
}
.time-returning-embedded-page .civio-section p,
.time-returning-embedded-page .civio-references p {
  margin-bottom: .88em !important;
}
.time-returning-embedded-page .civio-list {
  margin: .8em 0 0 !important;
}
.time-returning-embedded-page .civio-list li + li,
.time-returning-embedded-page .civio-section ul:not(.civio-list) li + li {
  margin-top: 5px !important;
}
.time-returning-embedded-page .interactive-panel {
  margin: 20px 0 !important;
  padding: 20px !important;
}
.time-returning-embedded-page .panel-title {
  margin-bottom: 12px !important;
}
.time-returning-embedded-page .tabs,
.time-returning-embedded-page .case-selector {
  margin-bottom: 12px !important;
  gap: 8px !important;
}
.time-returning-embedded-page .tab-content {
  padding: 16px !important;
}
.time-returning-embedded-page .civio-box,
.time-returning-embedded-page .civio-note {
  margin: 18px 0 !important;
  padding: 18px 20px !important;
}
.time-returning-embedded-page .dashboard-grid {
  gap: 18px !important;
  margin: 20px 0 !important;
}
.time-returning-embedded-page .data-card {
  padding: 20px !important;
}
.time-returning-embedded-page .bar-list,
.time-returning-embedded-page .compare-list {
  gap: 10px !important;
  margin: 14px 0 !important;
}
.time-returning-embedded-page .matrix-head,
.time-returning-embedded-page .matrix-row,
.time-returning-embedded-page .case-display {
  padding: 16px 18px !important;
}
.time-returning-embedded-page .condition-list {
  gap: 10px !important;
  margin-top: 14px !important;
}
.time-returning-embedded-page summary {
  padding: 14px 16px !important;
}
.time-returning-embedded-page details p {
  padding: 0 16px 16px !important;
}
@media (max-width: 780px) {
  .time-returning-embedded-page .civio-section,
  .time-returning-embedded-page .civio-references {
    padding: 20px 0 !important;
  }
  .time-returning-embedded-page .interactive-panel {
    padding: 16px !important;
  }
}