/* RuleBrew shared site chrome — nav / footer / legal-doc typography.
   Tokens mirror home.html so pages read as one product. */
:root{
  --bg:#f4ece0; --bg2:#efe4d4; --card:#fbf6ee; --card2:#f5ede1; --edge:#e2d5c1; --edge2:#cebda3;
  --txt:#2a211a; --dim:#7a6b58; --faint:#a99a86;
  --accent:#8a5a3c; --accent-deep:#6e442c; --gold:#b8862f; --green:#2f9e5b;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,monospace;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:"Noto Sans TC",system-ui,sans-serif; color:var(--txt); line-height:1.6;
  background:
    radial-gradient(900px 460px at 80% -10%, #fff8ec 0%, rgba(255,248,236,0) 60%),
    radial-gradient(700px 380px at 5% 0%, #fff8ec 0%, rgba(255,248,236,0) 55%),
    var(--bg); }
.mono{ font-family:var(--mono); }
a{ color:inherit; }
.wrap{ max-width:1000px; margin:0 auto; padding:0 20px; }
.narrow{ max-width:760px; }

/* nav */
nav{ display:flex; align-items:center; gap:12px; padding:20px; max-width:1000px; margin:0 auto; }
nav a{ white-space:nowrap; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px; font-size:17px;
  text-decoration:none; color:var(--txt); }
.mark{ width:30px; height:30px; border-radius:8px; background:linear-gradient(160deg,#fff7ec,#efe1cd);
  border:1px solid var(--edge2); display:flex; align-items:flex-end; justify-content:center; gap:3px; padding:6px; }
.mark i{ width:4px; border-radius:2px; background:var(--accent); }
.mark i:nth-child(1){ height:12px; } .mark i:nth-child(2){ height:8px; background:var(--gold); }
.mark i:nth-child(3){ height:16px; background:var(--green); }
nav .sp{ margin-left:auto; }
nav a.link{ color:var(--dim); text-decoration:none; font-size:14px; padding:8px 10px; }
nav a.link:hover{ color:var(--txt); }
.btn{ display:inline-flex; align-items:center; gap:7px; text-decoration:none; font-weight:700; font-size:14px;
  padding:9px 16px; border-radius:10px; border:1px solid var(--edge2); background:var(--card2); color:var(--txt); cursor:pointer; }
.btn.primary{ background:linear-gradient(180deg,#a8714a,var(--accent)); color:#fff8e8; border:none;
  box-shadow:0 8px 20px -10px rgba(138,90,60,.4); }
.btn:hover{ border-color:var(--accent); }
.btn.primary:hover{ filter:brightness(1.04); }
.btn.ghost{ background:transparent; color:var(--dim); }
.btn[aria-disabled="true"]{ opacity:.55; cursor:default; pointer-events:none; }

/* page head */
.phead{ padding:34px 0 10px; }
.phead .eyebrow{ font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:2px; text-transform:uppercase; }
.phead h1{ font-size:clamp(28px,4.6vw,40px); line-height:1.1; font-weight:800; letter-spacing:-.4px; margin:12px 0 0; }
.phead .lede{ color:var(--dim); font-size:clamp(14px,2vw,16px); margin:12px 0 0; max-width:60ch; }
.phead .updated{ color:var(--faint); font-size:12px; margin-top:14px; font-family:var(--mono); }

/* legal doc body */
.doc{ padding:22px 0 10px; }
.doc section{ padding:22px 0; border-top:1px solid var(--edge); }
.doc h2{ font-size:19px; font-weight:800; margin:0 0 4px; display:flex; align-items:baseline; gap:10px; }
.doc h2 .no{ font-family:var(--mono); font-size:13px; color:var(--faint); font-weight:700; }
.doc h3{ font-size:15px; font-weight:700; margin:18px 0 6px; color:var(--txt); }
.doc p{ color:var(--dim); font-size:14px; margin:8px 0; max-width:74ch; }
.doc ul{ color:var(--dim); font-size:14px; margin:8px 0; padding-left:20px; line-height:1.9; max-width:74ch; }
.doc li{ margin:2px 0; }
.doc b, .doc strong{ color:var(--txt); }
.doc a{ color:var(--accent); text-decoration:none; } .doc a:hover{ text-decoration:underline; }
.doc code{ font-family:var(--mono); font-size:13px; background:var(--card2); border:1px solid var(--edge);
  border-radius:6px; padding:1px 6px; color:var(--txt); }

/* callout */
.callout{ border-left:2px solid var(--gold); background:var(--card); border-radius:0 12px 12px 0;
  padding:14px 16px; margin:16px 0; }
.callout b{ color:var(--gold); }
.callout p{ margin:6px 0 0; color:var(--dim); font-size:13px; }
.callout.accent{ border-color:var(--accent); } .callout.accent b{ color:var(--accent); }

/* pricing tiers */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:6px 0 0; }
@media(max-width:760px){ .tiers{ grid-template-columns:1fr; } }
.tier{ background:var(--card); border:1px solid var(--edge); border-radius:16px; padding:20px; display:flex; flex-direction:column; }
.tier.hi{ border-color:var(--accent); box-shadow:0 0 0 1px rgba(138,90,60,.25) inset; }
.tier .name{ font-size:13px; color:var(--dim); font-weight:700; letter-spacing:.5px; }
.tier .price{ font-family:var(--mono); font-size:30px; font-weight:800; margin-top:6px; letter-spacing:-.5px; }
.tier .price small{ font-size:13px; color:var(--dim); font-weight:500; letter-spacing:0; }
.tier .desc{ font-size:12.5px; color:var(--dim); margin-top:4px; }
.tier ul{ list-style:none; margin:16px 0 18px; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; }
.tier ul li{ font-size:13.5px; color:var(--dim); display:flex; gap:9px; align-items:flex-start; }
.tier ul li::before{ content:"✓"; color:var(--accent); font-weight:800; flex:0 0 auto; }
.tier ul li.off{ color:var(--faint); } .tier ul li.off::before{ content:"–"; color:var(--faint); }
.tier .cta{ margin-top:auto; }
.tier .cta .btn{ width:100%; justify-content:center; }

/* faq */
.faq details{ border-top:1px solid var(--edge); padding:14px 0; }
.faq details summary{ cursor:pointer; font-weight:700; font-size:15px; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq details summary::-webkit-details-marker{ display:none; }
.faq details summary::after{ content:"+"; color:var(--faint); font-family:var(--mono); }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ color:var(--dim); font-size:14px; margin:10px 0 0; max-width:74ch; }

/* contact cards */
.ccards{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:8px; }
@media(max-width:680px){ .ccards{ grid-template-columns:1fr; } }
.ccard{ background:var(--card); border:1px solid var(--edge); border-radius:14px; padding:20px; }
.ccard .k{ font-size:12px; color:var(--faint); letter-spacing:1px; text-transform:uppercase; font-family:var(--mono); }
.ccard .v{ font-size:17px; font-weight:700; margin-top:8px; }
.ccard .v a{ color:var(--accent); text-decoration:none; } .ccard .v a:hover{ text-decoration:underline; }
.ccard p{ color:var(--dim); font-size:13px; margin:8px 0 0; }

/* footer */
footer{ border-top:1px solid var(--edge); margin-top:20px; padding:26px 0 46px; }
footer .cols{ display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start; }
footer .links{ display:flex; gap:18px; flex-wrap:wrap; margin-left:auto; }
footer a{ color:var(--dim); text-decoration:none; font-size:13px; } footer a:hover{ color:var(--txt); }
footer .fine{ color:var(--faint); font-size:11.5px; margin-top:18px; line-height:1.7; max-width:74ch; }