/* J Plan — shared styles
   Brand color: PANTONE 14-4005 TCX "Nantucket Breeze" #AFC7E0 */

:root{
  /* Brand ramp derived from Nantucket Breeze */
  --brand:#afc7e0;          /* PANTONE 14-4005 TCX */
  --brand-tint:#eaf1f8;
  --brand-mid:#6e97c0;
  --brand-deep:#2e5f8e;     /* accessible text/link tone */
  --brand-ink:#16324d;      /* text on brand fills */

  --bg:#fbfcfe;
  --fg:#1b2733;
  --muted:#5e7186;
  --line:#dce6f0;
  --card:#f2f6fb;
  --accent:var(--brand-deep);
  --badge-bg:var(--brand-tint);
  --badge-fg:var(--brand-deep);
  --btn-fg:var(--brand-ink);
  --band:linear-gradient(180deg,rgba(175,199,224,.55) 0%,rgba(175,199,224,0) 100%);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1219;
    --fg:#e8eef5;
    --muted:#93a6b9;
    --line:#1f2d3b;
    --card:#131e29;
    --accent:var(--brand);
    --badge-bg:rgba(175,199,224,.14);
    --badge-fg:var(--brand);
    --btn-fg:var(--brand-ink);
    --band:linear-gradient(180deg,rgba(175,199,224,.16) 0%,rgba(175,199,224,0) 100%);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
}

/* Brand color band across the top of every page */
body::before{
  content:"";
  position:fixed;
  inset:0 0 auto 0;
  height:280px;
  background:var(--band);
  pointer-events:none;
  z-index:-1;
}

.wrap{max-width:760px;margin:0 auto;padding:36px 20px 72px;position:relative}

/* ---- header ---- */
header{border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:8px}

.badge{
  display:inline-block;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--badge-fg);
  background:var(--badge-bg);
  border:1px solid rgba(175,199,224,.55);
  padding:4px 11px;
  border-radius:999px;
}

h1{font-size:clamp(26px,5vw,34px);line-height:1.25;margin:14px 0 6px;letter-spacing:-.02em}
.sub{color:var(--muted);font-size:15px;margin:0}

/* ---- language toggle ---- */
.langbar{display:flex;gap:8px;margin:20px 0 0}

.langbar button{
  font:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  padding:7px 16px;
  border-radius:9px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  transition:background .15s,color .15s,border-color .15s;
}
.langbar button:hover{color:var(--fg);border-color:var(--brand-mid)}
.langbar button[aria-pressed="true"]{
  background:var(--brand);
  border-color:var(--brand);
  color:var(--btn-fg);
}

/* ---- content ---- */
h2{font-size:19px;margin:38px 0 10px;letter-spacing:-.01em}
h2 .n{color:var(--brand-mid);font-variant-numeric:tabular-nums;margin-right:8px;font-weight:700}

p{margin:10px 0}
ul{margin:10px 0;padding-left:22px}
li{margin:6px 0}
li::marker{color:var(--brand-mid)}

a{color:var(--accent);text-decoration-color:rgba(175,199,224,.8);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}

/* FAQ entries: brand-colored diamond marker hanging in the left gutter.
   Generated in CSS so it is not copied with the text; the "/ \"\"" alt
   keeps it out of the accessibility tree. */
.faq{padding-left:1.5em}
.faq strong::before{
  content:"\25C6" / "";
  display:inline-block;
  width:1.5em;
  margin-left:-1.5em;
  color:var(--brand-mid);
  font-size:.78em;
  font-weight:400;
  vertical-align:.08em;
}

.callout{
  background:var(--card);
  border:1px solid var(--line);
  border-left:3px solid var(--brand);
  border-radius:10px;
  padding:16px 18px;
  margin:22px 0;
}
.callout p{margin:0}
.callout strong{font-weight:650}

/* contact / FAQ cards */
.contact{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
}
.contact li{margin:0}
.contact a{
  display:inline-block;
  padding:9px 15px;
  border-radius:10px;
  background:var(--card);
  border:1px solid var(--line);
  text-decoration:none;
  font-weight:600;
  font-size:15px;
}
.contact a:hover{border-color:var(--brand-mid);background:var(--badge-bg)}

/* ---- footer ---- */
footer{
  margin-top:52px;
  padding-top:22px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:14px;
}
footer p{margin:6px 0}
footer a{font-weight:600}

/* ---- bilingual visibility, driven by <html data-lang> ---- */
[data-i18n]{display:none}
html[data-lang="zh"] [data-i18n="zh"],
html[data-lang="en"] [data-i18n="en"]{display:revert}