/* Bracket — shared styles
   Type: Fraunces (display) + IBM Plex Sans (body)
   Palette: ink navy, eucalyptus, muted gold, sage paper tint
*/

:root{
  --ink:#14212B;
  --ink-soft:#4A5A62;
  --paper:#FFFFFF;
  --paper-tint:#F1F4F1;
  --eucalyptus:#2F6E58;
  --eucalyptus-dark:#1E4A3B;
  --gold:#B9862E;
  --gold-soft:#F5EBD6;
  --line:#DCE2DD;
  --error:#A63D2F;
  --radius:6px;
  --shadow:0 1px 2px rgba(20,33,43,.06);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Fraunces", Georgia, serif;
  font-weight:600;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--ink);
}
h1{font-size:clamp(2.1rem,4vw,3rem); font-weight:560;}
h2{font-size:clamp(1.5rem,2.6vw,2rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1.1em; max-width:68ch;}
a{color:var(--eucalyptus-dark);}
a:hover{color:var(--eucalyptus);}
strong{color:var(--ink);}
.container{max-width:1120px; margin:0 auto; padding:0 24px;}
.tint{background:var(--paper-tint);}

/* Skip link */
.skip-link{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; z-index:200;}
.skip-link:focus{left:8px; top:8px;}

/* Header */
header.site{
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky; top:0; z-index:100;
}
.nav-row{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1120px; margin:0 auto;}
.wordmark{
  font-family:"Fraunces", serif;
  font-style:italic;
  font-weight:600;
  font-size:1.5rem;
  color:var(--ink);
  text-decoration:none;
  letter-spacing:.01em;
}
.wordmark:hover{color:var(--eucalyptus-dark);}
nav.primary{display:flex; gap:28px; align-items:center;}
nav.primary a{
  color:var(--ink-soft);
  text-decoration:none;
  font-size:.96rem;
  padding:6px 2px;
  border-bottom:2px solid transparent;
}
nav.primary a:hover, nav.primary a[aria-current="page"]{
  color:var(--ink);
  border-bottom-color:var(--gold);
}
.nav-toggle{display:none; background:none; border:1px solid var(--line); border-radius:var(--radius); padding:8px 10px; font-size:1.1rem;}
@media (max-width:760px){
  nav.primary{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0; padding:8px 24px 16px;
  }
  nav.primary.open{display:flex;}
  nav.primary a{padding:10px 0; width:100%; border-bottom:1px solid var(--line);}
  .nav-toggle{display:inline-block;}
}

/* Hero */
.hero{padding:64px 0 48px;}
.hero .eyebrow{color:var(--eucalyptus-dark); font-weight:600; font-size:.95rem; margin-bottom:14px;}
.hero p.lede{font-size:1.15rem; color:var(--ink-soft); max-width:56ch;}

/* Tool cards */
.tool-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:32px 0 56px;}
@media (max-width:760px){.tool-grid{grid-template-columns:1fr;}}
.tool-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  background:var(--paper);
  display:flex; flex-direction:column; gap:10px;
  transition:border-color .15s ease;
}
.tool-card:hover{border-color:var(--eucalyptus);}
.tool-card .tag{color:var(--gold); font-size:.85rem; font-weight:600;}
.tool-card h3{margin-bottom:2px;}
.tool-card .go{margin-top:auto; color:var(--eucalyptus-dark); font-weight:600; text-decoration:none;}

/* Section rhythm */
section{padding:48px 0;}
section.narrow p, section.narrow li{max-width:68ch;}
hr.rule{border:none; border-top:1px solid var(--line); margin:0;}

/* Calculator layout */
.calc-wrap{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; padding:40px 0;}
@media (max-width:860px){.calc-wrap{grid-template-columns:1fr;}}
.calc-form{border:1px solid var(--line); border-radius:var(--radius); padding:28px; background:var(--paper);}
.field{margin-bottom:18px;}
.field label{display:block; font-weight:600; font-size:.92rem; margin-bottom:6px; color:var(--ink);}
.field .hint{font-size:.82rem; color:var(--ink-soft); margin-top:4px;}
.field input[type="number"], .field input[type="text"], .field select{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius);
  font-size:1rem; font-family:inherit; color:var(--ink); background:#fff;
}
.field input:focus, .field select:focus{outline:2px solid var(--eucalyptus); outline-offset:1px;}
.radio-row{display:flex; gap:14px; flex-wrap:wrap;}
.radio-row label{display:flex; align-items:center; gap:6px; font-weight:500; font-size:.94rem; color:var(--ink);}
.check-row{display:flex; align-items:flex-start; gap:8px; margin-bottom:18px;}
.check-row input{margin-top:4px;}

.calc-results{
  position:sticky; top:90px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper-tint); padding:28px;
}
.result-hero{border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:20px;}
.result-hero .label{font-size:.88rem; color:var(--ink-soft); font-weight:600;}
.result-hero .big{
  font-family:"Fraunces", serif; font-weight:600;
  font-size:clamp(2.2rem,4.5vw,3rem); color:var(--eucalyptus-dark); margin:4px 0;
}
.result-hero .sub{color:var(--ink-soft); font-size:.92rem;}
table.breakdown{width:100%; border-collapse:collapse; font-size:.95rem;}
table.breakdown td{padding:9px 0; border-bottom:1px solid var(--line);}
table.breakdown td:last-child{text-align:right; font-weight:600; font-variant-numeric:tabular-nums;}
table.breakdown tr.total td{border-bottom:none; padding-top:14px; font-weight:700; color:var(--ink);}
.period-tabs{display:flex; gap:6px; margin:18px 0 4px; flex-wrap:wrap;}
.period-tabs button{
  border:1px solid var(--line); background:#fff; padding:7px 14px; border-radius:999px;
  font-size:.85rem; cursor:pointer; color:var(--ink-soft);
}
.period-tabs button[aria-pressed="true"]{background:var(--eucalyptus-dark); color:#fff; border-color:var(--eucalyptus-dark);}
.disclaimer-note{font-size:.82rem; color:var(--ink-soft); margin-top:18px; padding-top:14px; border-top:1px dashed var(--line);}

/* Data tables in content */
table.rate-table{width:100%; border-collapse:collapse; margin:18px 0 28px; font-size:.94rem;}
table.rate-table th, table.rate-table td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);}
table.rate-table th{background:var(--paper-tint); font-family:"Fraunces",serif; font-weight:600;}
table.rate-table td:last-child, table.rate-table th:last-child{text-align:right;}
.table-scroll{overflow-x:auto;}

/* FAQ */
.faq details{border-bottom:1px solid var(--line); padding:16px 0;}
.faq summary{font-weight:600; cursor:pointer; font-size:1.05rem; color:var(--ink); list-style:none; display:flex; justify-content:space-between; gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; color:var(--gold); font-size:1.3rem; line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq p{margin-top:10px; color:var(--ink-soft);}

/* Callout boxes */
.callout{border-left:3px solid var(--gold); background:var(--gold-soft); padding:16px 20px; border-radius:0 var(--radius) var(--radius) 0; margin:24px 0;}
.callout p{margin:0; max-width:none;}
.callout.eucalyptus{border-left-color:var(--eucalyptus); background:#EAF2EE;}

/* Breadcrumb */
.crumb{font-size:.85rem; color:var(--ink-soft); padding:18px 0 0;}
.crumb a{color:var(--ink-soft);}

/* Cards list (about/legal) */
ul.plain{padding-left:1.2em;}
ul.plain li{margin-bottom:.5em; max-width:68ch;}

/* Footer */
footer.site{border-top:1px solid var(--line); background:var(--paper-tint); margin-top:64px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; padding:48px 0 28px;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr; gap:28px;}}
.footer-grid h4{font-size:.85rem; text-transform:none; color:var(--ink); margin-bottom:10px;}
.footer-grid ul{list-style:none; padding:0; margin:0;}
.footer-grid li{margin-bottom:8px;}
.footer-grid a{color:var(--ink-soft); text-decoration:none; font-size:.92rem;}
.footer-grid a:hover{color:var(--eucalyptus-dark);}
.footer-bottom{border-top:1px solid var(--line); padding:18px 0 32px; font-size:.82rem; color:var(--ink-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* Buttons */
.btn{display:inline-block; background:var(--eucalyptus-dark); color:#fff; padding:12px 22px; border-radius:var(--radius); text-decoration:none; font-weight:600; border:none; font-size:1rem; cursor:pointer;}
.btn:hover{background:var(--eucalyptus);}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line);}

/* Ad slot placeholders (replace with real <ins class="adsbygoogle"> once approved) */
.ad-slot{
  border:1px dashed var(--line); border-radius:var(--radius);
  padding:14px; text-align:center; color:var(--ink-soft); font-size:.78rem;
  background:#fafbfa; margin:32px 0;
}