:root{
  --bg:#ffffff; --panel:#f8f6f0; --border:#e6dfcc;
  --text:#0b1a33; --muted:#8b6d2e;
  --gold:#e9c46a; --goldenrod:#daa520; --gold-deep:#b8860b;
  --ring: rgba(218,165,32,.35);
}
*{box-sizing:border-box}
body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--text); background:linear-gradient(180deg,#fff,#fff 40%,#fbfaf5);}
.wrap{max-width:1000px;margin:28px auto;padding:0 16px 40px}
.hero{background:linear-gradient(180deg,#fff7e3,#fff);border:1px solid var(--border);border-radius:18px;padding:22px;
  box-shadow:0 10px 24px rgba(184,134,11,.06)}
.hero h1{margin:0 0 6px 0;font-size:1.6rem;color:var(--gold-deep)}
.card{margin-top:18px;background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:0 10px 26px rgba(11,26,51,.05)}
a.btn{display:inline-block;margin-top:10px;padding:12px 14px;border-radius:12px;border:1px solid var(--goldenrod);
  background:linear-gradient(180deg,#ffe9b2,#ffd980);font-weight:700;color:#3b2a00;text-decoration:none;box-shadow:0 6px 16px rgba(218,165,32,.22)}
a.btn:active{transform:translateY(1px)}

/* === Forms & layout (shared) === */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:800px){ .grid{grid-template-columns:1fr} }

.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:700px){ .row{grid-template-columns:1fr} }

label{font-size:.9rem;color:#374151;display:block;margin-bottom:6px}
input[type="number"]{
  width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);
  background:#fff;font-size:1rem;outline:none
}
input:focus{border-color:var(--goldenrod);box-shadow:0 0 0 4px var(--ring)}

.hint{font-size:.85rem;color:#6b7280}

.switch{display:flex;align-items:center;gap:10px;margin-top:6px}
.switch input{width:18px;height:18px}

/* === Segmented buttons === */
.seg{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.seg button{
  border:1px solid var(--border);background:#fff;padding:10px 14px;border-radius:999px;
  cursor:pointer;font-weight:600
}
.seg button.active{background:#fff7e3;border-color:#f1deaf;color:var(--gold-deep)}

/* === Result block === */
.result{margin-top:14px;padding:14px;border-radius:14px;background:#fff;border:1px dashed #e8d8a6}
.big{font-size:1.6rem;font-weight:800;color:var(--gold-deep)}
.muted{color:#6b7280;font-size:.95rem}

/* === Countdown tiles (responsive grid) === */
.countdown{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr)); /* Months, Days, Hours, Minutes, Seconds */
  gap:16px;
}
@media (max-width: 700px){
  .countdown{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px){
  .countdown{ grid-template-columns: repeat(2, 1fr); }
}

.tile{
  background:#fff;border:1px solid var(--border);border-radius:14px;
  padding:14px 18px;text-align:center;box-shadow:0 6px 16px rgba(11,26,51,.05)
}
.tile .num{font-size:2rem;font-weight:800;color:var(--gold-deep);line-height:1}
.tile .lbl{font-size:.85rem;color:#6b7280;margin-top:6px}

/* === Footer === */
.footer{margin-top:18px;font-size:.9rem;color:#6b7280}
.footer a{color:var(--gold-deep);text-decoration:none}
/* === Typography consistency === */
body, input, button, label, .big, .muted, .tile .num, .tile .lbl {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color: var(--text);
}

/* Headings */
.hero h1, .card h1, h2, h3 {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  font-weight: 700;
  color: var(--gold-deep);
  margin: 0 0 6px 0;
}

/* Labels and hints */
label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--gold-deep);
}
.hint {
  font-size: .85rem;
  color: #6b7280;
}

/* Inputs */
input[type="number"] {
  font-size: 1rem;
  font-weight: 500;
}

/* Countdown numbers */
.tile .num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--gold-deep);
}
.tile .lbl {
  font-size: .85rem;
  font-weight: 500;
  color: #6b7280;
}
/* === Turnover Calculator (page-specific styles) === */
.subtitle {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: .95rem;
}

.section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin: 12px 0;
}
.section h2 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--goldenrod);
}

.field { margin: 10px 0; }

.label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--gold-deep);
  margin-bottom: 6px;
}

.control {
  --control-h: 44px;
  height: var(--control-h);
  display: flex;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 10px;
  gap: 8px;
  outline: none;
}
.control:focus-within {
  border-color: var(--goldenrod);
  box-shadow: 0 0 0 3px var(--ring);
}

.prefix { color: var(--muted); font-size: .95rem; }

input[type="text"], input[type="number"] {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
}
input::placeholder { color: #b7b1a1; }

/* Calculations */
.calc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  margin-top: 6px;
}
.calc .value { font-weight: 700; color: var(--gold-deep); }
.calc.highlight { background: var(--panel); border: 1px solid var(--border); }
.calc.big .value { font-size: 1.4rem; }

/* Actions */
.actions { display: flex; gap: 10px; margin-top: 10px; }
.actions button {
  flex: 1;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  background: var(--gold);
  color: var(--text);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.actions button.secondary { background: #fff; color: var(--gold-deep); }
.actions button:active { transform: translateY(1px); }

/* === Countdown Page Customization === */
body.countdown-page h1,
body.countdown-page label,
body.countdown-page .big,
body.countdown-page .tile .lbl {
  color: darkgoldenrod;
}


/* Help */
.help { margin-top: 10px; font-size: .85rem; color: var(--muted); }

/* Mobile */
@media (max-width: 420px){
  .card { padding: 14px; }
  .section { padding: 10px; }
}

/* === Index page / Daily Compounding styles === */
.wrap { max-width: 1000px; margin: 28px auto; padding: 0 16px 40px; } /* keep site-wide wrap */
.lead { color: var(--muted); margin: 0 0 14px; }

/* Layout cards & grid */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 18px; box-shadow: 0 10px 26px rgba(11,26,51,.05); }
.inputs { grid-column: span 12; }
.results { grid-column: span 12; }
@media (min-width: 960px){ .inputs{grid-column: span 5;} .results{grid-column: span 7;} }

/* Form controls */
label { display:block; font-weight:800; margin:0 0 6px; }
.help { font-size: .9rem; color: var(--muted); }
.row { margin-bottom: 12px; }
.inline { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.three  { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.input, select {
  width:100%; height:44px; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:#fff; color:var(--text); font: inherit; outline:none;
}
.input:focus, select:focus { border-color: var(--goldenrod); box-shadow: 0 0 0 4px var(--ring); }
.input-group { display:flex; align-items:center; gap:8px; }
.symbol {
  min-width:38px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--border); border-radius:10px; font-weight:800; color:var(--gold-deep);
}

/* Pills & tabs */
.pill, .tab { border:1px solid var(--border); background:#fff; border-radius:999px; padding:8px 12px; cursor:pointer; color:var(--text); }
.pill.active { background:#f9f2d7; border-color:#dec682; color:#7a5a05; }
.tabs { display:flex; gap:8px; }
.tab.active { background:#f5e3b6; border-color:#e6c86e; color:#7a5a05; font-weight:800; }

/* Weekday pills */
.weekday { border:1px solid #cfb97a; background:#fff; border-radius:9px; padding:7px 11px; cursor:pointer; min-width:34px; text-align:center; user-select:none; color:var(--text); }
.weekday[aria-pressed="true"]{ background: var(--green); border-color: var(--green); color:#fff; }

/* Buttons */
.btn { display:inline-block; border:0; cursor:pointer; font-weight:900; border-radius:10px; padding:12px 16px; }
.btn.calc { color:#fff; background: linear-gradient(180deg,#ffe08c 0%, var(--goldenrod) 85%); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.btn.reset { background:transparent; color:var(--gold-deep); border:2px solid var(--gold-deep); }
.btn.csv   { background:#1f8a4d; color:#fff; }
.btn.share { background: var(--goldenrod); color:#fff; }
.btn.start { background: var(--navy); color:#fff; }

.badge { display:inline-block; font-size:.8rem; background:#fff3cf; color:#7a5a05; padding:3px 8px; border-radius:999px; margin-left:6px; border:1px solid #ffe299; }

/* Results header */
.hdr { display:grid; grid-template-columns: repeat(12,1fr); gap:12px; }
.box { grid-column: span 12; background:#fff; border:1px dashed #e8d8a4; border-radius:10px; padding:12px; }
@media (min-width: 620px){ .box{ grid-column: span 6; } }
.kv .k { color: var(--muted); font-size:.95rem; }
.kv .v { font-size:1.35rem; font-weight:900; }
.v.gold { background: linear-gradient(180deg,#ffe9a6 0%, #d9a424 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.v.green { color: var(--green-ink); }
.v.goldenrod { color: var(--goldenrod); }

/* Chart */
.chart-wrap { background: linear-gradient(180deg,#0f5e32 0%, #208c4c 100%); border-radius:14px; padding:14px; border:1px solid #1e2b40; margin-top:12px; }
.chart-title { color:#f8f6e3; font-weight:900; margin:0 0 4px; }
.chart-sub   { color:#eef0da; margin:0 0 10px; font-size:.95rem; }
canvas { width:100%; height:300px; display:block; }

/* Breakdown table */
table { width:100%; border-collapse: collapse; background:#fff; margin-top:12px; border-radius:10px; overflow:hidden; }
th, td { padding:10px 12px; text-align:right; border-bottom:1px solid #efe7cd; color:var(--text); }
th:first-child, td:first-child, th:nth-child(2), td:nth-child(2){ text-align:left; }
.thead th { background:#fff7dc; }
tfoot td { font-weight:800; background:#fff7dc; }

.seg-tabs { display:flex; gap:6px; margin-top:8px; }
.seg { border:1px solid #d2c298; background:#fff; border-radius:8px; padding:6px 10px; cursor:pointer; color:var(--text); }
.seg.on { background:#e9d182; color:#573e03; font-weight:800; border-color:#d4b356; }

.toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

/* Closing bar */
.closing { opacity:0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease;
  background: var(--goldenrod); color: var(--navy); border-radius:12px; padding:12px 14px; margin:16px 0 2px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.closing.show { opacity:1; transform:none; }
.copyBtn { background: var(--navy); color:#fff; border:0; border-radius:8px; padding:8px 12px; cursor:pointer; font-weight:800; }
.tooltip { position: relative; }
.tooltip-bubble {
  position:absolute; right:0; top:-34px; background:#0b1a33; color:#fff; padding:6px 8px; border-radius:8px; font-size:.85rem;
  opacity:0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; white-space:nowrap;
}
.tooltip-bubble::after { content:""; position:absolute; top:100%; right:12px; border:6px solid transparent; border-top-color:#0b1a33; }
.tooltip-bubble.on { opacity:1; transform:none; }

/* Disclaimer */
.disclaimer { margin-top:16px; text-align:center; line-height:1.45; font-size:.9rem; color:#444; }
.disclaimer a { color: var(--navy); text-decoration: underline; font-weight: 800; }
.disclaimer a:hover { color: var(--goldenrod); }

/* === Disclaimer & Terms page === */
.disc-header { border-bottom: 1px solid var(--border); background: var(--panel); }
.breadcrumbs { font-size:.875rem; color: var(--muted); }
#page-title { font-size: clamp(1.6rem, 2.5vw, 2.1rem); line-height:1.2; margin: .75rem 0 0; color: var(--gold-deep); }
.updated { color: var(--muted); font-size: .9rem; }

/* TOC */
.toc {
  background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:1rem; margin:1.25rem 0;
}
.toc h2 { margin:0 0 .5rem; font-size:1.05rem; color: var(--goldenrod); }
.toc ul { margin:.25rem 0 0 1rem; padding:0; }
.toc li { margin:.25rem 0; }

/* Content sections */
main.wrap section { padding:1.25rem 0; border-top:1px solid var(--border); }
main.wrap section:first-of-type { border-top:0; }
main.wrap h2 { font-size:1.25rem; margin:0 0 .25rem; color: var(--gold-deep); }

/* Generic card + callout */
.card { background:#fff; border:1px solid var(--border); border-radius:12px; padding:1rem; }
.callout { border-left:4px solid var(--goldenrod); padding-left:.75rem; }

/* Links in content */
main a { color: var(--gold-deep); text-decoration: underline; }
main a:hover { color: var(--goldenrod); }

/* Footer for this page */
.disc-footer { border-top:1px solid var(--border); background: var(--panel); }

/* Skip link + Back-to-top */
.skip {
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus {
  left:12px; top:12px; width:auto; height:auto; padding:.5rem .75rem;
  background:#0b1a33; color:#fff; border-radius:8px; outline:3px solid var(--ring);
}
.top-link {
  position:fixed; right:1rem; bottom:1rem; background: var(--goldenrod); color:#fff;
  padding:.6rem .8rem; border-radius:.6rem; box-shadow:0 8px 24px rgba(2,6,23,.15);
}
.top-link:focus { outline:3px solid var(--ring); outline-offset:2px; }

.toc {
  margin-top: 32px;         /* Push it down from what’s above */
  padding: 30px;            /* Add breathing room inside */
  background: var(--panel); /* Match your card style */
  border: 1px solid var(--border);
  border-radius: 14px;
}

.toc h2 {
  margin-top: 0;            /* Avoid extra gap above heading */
  margin-bottom: 12px;      /* Space below "Quick Navigation" */
  color: var(--gold-deep);  /* Matches your gold theme */
}