:root {
    --max-width: 1200px;
    --accent: #1f8a59; /* warmer green for contrast */
    --accent-2: #2b8a3e;
    --muted: #5b6b63;
    --bg: linear-gradient(180deg, #f6fbf7 0%, #f1f7f3 100%);
    --card: #ffffff;
    --glass: rgba(255,255,255,0.75);
    --shadow: 0 10px 30px rgba(20,30,20,0.06);
    --link-chip-bg: rgba(29,131,72,0.09); /* subtle green background */
    --link-chip-bg-hover: rgba(29,131,72,0.14);
    --link-chip-color: #1d8348; /* green text */
}

html, body { height: 100%; }

html { scroll-behavior: smooth }

body {
    font-family: 'Roboto', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    line-height: 1.65;
    color: #072218;
    background: var(--bg);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: var(--max-width);
    margin: 36px auto;
    padding: 28px;
}

header { display:flex; align-items:center; gap:20px; }

.logo { width:72px; height:72px; border-radius:14px; overflow:hidden; flex:0 0 72px; box-shadow: var(--shadow); }
.logo-img { width:100%; height:100%; object-fit:cover; display:block }

h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin:0; color: #083b22; font-weight:700; letter-spacing:-0.02em }

p.lead { font-size:1.05rem; color:var(--muted); margin:8px 0 18px }

.grid { display:grid; grid-template-columns: 1fr 340px; gap:26px }

@media (max-width: 900px) { .grid { grid-template-columns: 1fr } .toc { order:-1 } }

.card { background: linear-gradient(180deg, rgba(255,255,255,0.9), var(--card)); border-radius:14px; padding:20px; box-shadow: var(--shadow) }

.hero-img { width:100%; height:420px; object-fit:cover; border-radius:12px; display:block; transition: transform .35s ease, filter .35s ease; filter: saturate(1.02) contrast(1.02); }
.hero-img:hover { transform: scale(1.02); }

.meta { font-size:0.9rem; color:var(--muted); margin-bottom:10px }

.tags { display:flex; gap:10px; flex-wrap:wrap }

.tag { background: rgba(31,138,89,0.08); color:var(--accent); padding:6px 12px; border-radius:999px; font-weight:700; font-size:0.85rem }

nav.toc ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px }

nav.toc a { color:#083b22; text-decoration:none; font-weight:600; padding:6px 8px; border-radius:8px; display:inline-block }
nav.toc a.active { background: rgba(31,138,89,0.12); color: #0b4726; box-shadow: inset 0 0 0 1px rgba(31,138,89,0.04); }

.cta { display:flex; gap:12px; align-items:center; margin-top:14px }

.btn { background:var(--accent); color:#fff; padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:700; box-shadow: 0 6px 18px rgba(31,138,89,0.14); border: none; cursor:pointer; transition: transform .15s ease, box-shadow .15s ease }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(31,138,89,0.12) }

.secondary { background: transparent; border: 1px solid rgba(31,138,89,0.12); color:var(--accent-2); padding:10px 12px; border-radius:12px; cursor:pointer }

article h2 { color:#0b4b25 }

.steps { display:grid; gap:12px }

.step { display:flex; gap:12px; align-items:flex-start }

.step .num { background:var(--accent); color:#fff; width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800 }

footer { margin-top:34px; padding:18px; text-align:center; color:var(--muted); font-size:0.95rem }

.faq dt { font-weight:700; margin-top:12px }

table { width:100%; border-collapse:collapse }

table th, table td { padding:10px; border-bottom:1px solid rgba(22,66,38,0.06) }

a:focus, button:focus, input:focus { outline: 3px solid rgba(31,138,89,0.14); outline-offset:3px }

.util-inline-block { display:inline-block; padding:12px 18px }

.util-gap-16 { margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; align-items:center }

.util-mt-14 { margin-top:14px }

.util-mt-18 { margin-top:18px }

.signup-label { display:block; font-size:0.95rem }

.signup-input { width:100%; padding:10px; margin:8px 0; border-radius:10px; border:1px solid rgba(15,50,26,0.06); background:linear-gradient(180deg,#fff,#fbfff9) }

.small-muted { margin-top:8px; color:var(--muted); font-size:0.95rem }

.quick-list { padding-left:16px; margin:0; color:var(--muted) }

.content-img { width:100%; height:260px; object-fit:cover; border-radius:12px; margin-top:14px; box-shadow: 0 8px 22px rgba(6,20,12,0.06) }

.inline-figure { display:block; margin:14px 0 }

/* make the aside sticky on wide screens */
aside.toc { position: sticky; top: 28px; align-self: start }

/* Chip / tag style for inline links (matches the example badge appearance) */
/* Target article/content links by default so global navigation isn't unexpectedly restyled.
   If you prefer to style every anchor, change the selector `article a` to just `a`. */
article a,
.card a,
.content a {
  display: inline-block;
  background: var(--link-chip-bg);
  color: var(--link-chip-color);
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(16,80,55,0.06);
  font-weight: 600;
  line-height: 1;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
  margin: 0 0.2rem 0.2rem 0;
  font-size: 0.95em;
}

article a:hover,
.card a:hover,
.content a:hover,
article a:focus,
.card a:focus,
.content a:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(16,80,55,0.12);
  background: var(--link-chip-bg-hover);
  outline: none;
}

/* Keep keyboard focus visible for accessibility */
article a:focus-visible,
.card a:focus-visible,
.content a:focus-visible {
  box-shadow: 0 0 0 3px rgba(29,131,72,0.12), 0 10px 28px rgba(16,80,55,0.12);
}

/* Opt-out class: if you don't want a specific link to use the chip styling,
   add class="link-plain" to that anchor. */
a.link-plain {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: inherit !important;
  text-decoration: underline !important;
  margin: 0 !important;
}

/* Smaller chips (for tags area) */
a.tag, .chip {
  padding: 0.18rem 0.5rem;
  font-size: 0.9em;
}