:root {
  --bg:#f5f4ef;
  --paper:#fffefa;
  --ink:#202c2a;
  --muted:#66746c;
  --line:#e1e4db;
  --accent:#d85c36;
  --green:#326654;
  --soft:#ecf1e9;
  --radius:16px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
[hidden] {
  display:none !important
}
body {
  margin:0
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  touch-action:manipulation
}
button {
  cursor:pointer;
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:8px;
  padding:10px 15px;
  color:var(--ink);
  font-size:13px;
  font-weight:650;
  white-space:nowrap
}
button:hover {
  border-color:var(--green)
}
button.primary {
  background:var(--ink);
  color:white;
  border-color:var(--ink)
}
button.quiet {
  background:none;
  color:#d5e0d6;
  border-color:#4b5a53
}
.topbar {
  background:var(--ink);
  height:88px;
  display:flex;
  align-items:center;
  padding:0 max(28px,calc((100vw - 1320px)/2));
  gap:24px;
  color:#fff;
  position:relative
}
.wordmark {
  font-size:23px;
  letter-spacing:-1px;
  font-weight:900;
  line-height:1
}
.wordmark span {
  display:block;
  font-size:10px;
  letter-spacing:4px;
  font-weight:500;
  margin-top:9px;
  color:#aabbad
}
.topbar form {
  margin-left:auto
}
.internal {
  font-size:10px;
  letter-spacing:2px;
  border:1px solid #53625b;
  border-radius:4px;
  padding:5px 7px;
  color:#bacabd
}
main {
  max-width:1320px;
  margin:0 auto;
  padding:44px 28px 52px
}
.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:26px
}
h1 {
  font-size:clamp(32px,3.5vw,46px);
  font-weight:740;
  letter-spacing:-1.8px;
  line-height:1.12;
  margin:7px 0 14px
}
h2 {
  font-size:23px;
  letter-spacing:-.6px;
  margin:0 0 14px
}
h3 {
  font-size:15px;
  line-height:1.4;
  margin:8px 0
}
p {
  font-size:14px;
  line-height:1.6;
  margin:8px 0 16px
}
.eyebrow {
  font-size:10px;
  font-weight:750;
  letter-spacing:2px;
  color:var(--green);
  margin:0 0 8px
}
.muted,.meta,.footnote,small {
  color:var(--muted)
}
.meta {
  font-size:11px
}
.footnote {
  font-size:12px;
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-top:22px;
  line-height:1.6
}
small {
  font-size:11px;
  display:block;
  line-height:1.6
}
.filters,.inline-form {
  display:flex;
  gap:10px;
  align-items:end
}
.filters {
  flex-wrap:wrap;
  justify-content:flex-end
}
.filters .filter-toggle {
  display:flex;
  align-items:center;
  gap:6px;
  min-height:40px
}
.filter-toggle input[type=checkbox] {
  display:inline-block;
  min-height:0;
  margin:0;
  padding:0;
  accent-color:var(--green)
}
label {
  display:block;
  font-size:11px;
  font-weight:650;
  line-height:1.6
}
input,select,textarea {
  display:block;
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:8px;
  padding:10px 12px;
  color:var(--ink);
  margin-top:5px;
  min-height:40px;
  max-width:100%
}
select {
  font-size:13px
}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible {
  outline:2px solid var(--green);
  outline-offset:3px
}
.notice {
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff1dc;
  color:#77542b;
  padding:13px 17px;
  font-size:12px;
  border-radius:10px;
  margin-bottom:24px
}
.badge {
  display:inline-block;
  font-size:10px;
  background:var(--soft);
  color:var(--green);
  padding:4px 7px;
  border-radius:5px;
  font-weight:650;
  letter-spacing:.2px;
  white-space:nowrap
}
.badge.mock {
  background:#e8c38a;
  color:#5a3f1f
}
.badge.ok {
  background:#dceadb
}
.stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:24px
}
.stat {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:23px
}
.stat p {
  font-size:12px;
  color:var(--muted);
  margin:0 0 10px
}
.stat strong {
  font-size:40px;
  font-weight:700;
  letter-spacing:-1.5px;
  display:block;
  margin-bottom:10px;
  font-variant-numeric:tabular-nums
}
.panel {
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:var(--radius);
  padding:27px;
  margin-bottom:24px;
  min-width:0
}
.section-heading {
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:16px
}
.text-link {
  color:var(--green);
  font-size:12px;
  font-weight:650
}
.text-link:hover,.post-title:hover {
  text-decoration:underline
}
.chart {
  width:100%;
  height:auto;
  display:block;
  margin-top:24px;
  overflow:visible
}
.gridline {
  stroke:var(--line);
  stroke-dasharray:3 5
}
.tick {
  fill:var(--muted);
  font-size:11px
}
.bar {
  fill:var(--green);
  opacity:.88
}
.bar:hover {
  fill:var(--accent);
  opacity:1
}
.bar.negative {
  fill:var(--accent)
}
.marker {
  fill:var(--accent)
}
.chart-caption {
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:10px;
  color:var(--muted);
  margin-top:5px
}
.legend-dot {
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--accent);
  border-radius:50%;
  margin-right:5px
}
.two-column {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:24px;
  align-items:start
}
.timeline {
  max-height:380px;
  overflow:auto;
  margin-top:10px
}
.timeline-item {
  display:flex;
  gap:16px;
  padding:6px 0 20px;
  position:relative
}
.timeline-item:not(:last-child):before {
  content:"";
  position:absolute;
  left:4px;
  top:24px;
  bottom:0;
  border-left:1px solid var(--line)
}
.timeline-dot {
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--accent);
  margin-top:12px;
  flex-shrink:0
}
.timeline-item .meta {
  margin-bottom:6px
}
.timeline-item h3 {
  margin:0 0 6px
}
.comparison {
  min-height:300px
}
.comparison-values {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:25px 0
}
.comparison-values span {
  font-size:11px;
  color:var(--muted);
  display:block
}
.comparison-values strong {
  font-size:34px;
  display:block;
  font-weight:650;
  margin-top:6px
}
.inline-form {
  margin-top:18px
}
.table-scroll {
  overflow:auto
}
table {
  border-collapse:collapse;
  width:100%;
  font-size:13px;
  text-align:left
}
th {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:650;
  color:var(--muted);
  padding:14px 12px;
  border-bottom:1px solid var(--line)
}
td {
  padding:17px 12px;
  border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums
}
th:first-child,td:first-child {
  padding-left:0
}
tr:last-child td {
  border-bottom:0
}
.post-title {
  font-weight:650;
  display:block;
  margin-bottom:6px
}
.content-group {
  border-top:1px solid var(--line);
  padding-top:22px;
  margin-top:22px
}
.content-group .section-heading h3 {
  font-size:17px;
  margin-top:0
}
.publication-table td {
  vertical-align:top
}
.publication-table td:nth-child(2) {
  min-width:210px
}
.publication-table td:first-child {
  min-width:115px
}
.visibility-private,.visibility-unlisted,.visibility-unknown {
  background:#fff1dc;
  color:#77542b
}
.audience {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px
}
.audience .panel {
  padding:20px
}
.audience-number {
  display:block;
  font-size:30px;
  letter-spacing:-1px;
  margin:10px 0
}
.audience p {
  font-size:11px;
  margin-bottom:0
}
.source-row {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:16px 0;
  border-bottom:1px solid var(--line)
}
.source-row h3 {
  margin-top:0
}
.source-row p {
  margin-bottom:0
}
.error {
  color:#a93225;
  font-size:12px
}
.event-form {
  display:grid;
  gap:13px
}
.event-form input,.event-form textarea {
  width:100%
}
.event-form button {
  justify-self:start
}
.form-row {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:12px
}
.empty {
  padding:40px 12px;
  color:var(--muted);
  font-size:13px;
  line-height:1.7
}
.login {
  max-width:500px;
  margin:60px auto;
  padding:38px
}
.login input {
  width:100%
}
.login form {
  display:grid;
  gap:20px;
  margin-top:28px
}
.login h1 {
  font-size:37px
}
footer {
  max-width:1320px;
  padding:0 28px 28px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:11px
}
@media(max-width:1000px) {
  .stats {
    grid-template-columns:repeat(2,1fr)
  }
  .audience {
    grid-template-columns:repeat(2,1fr)
  }
  .page-heading {
    align-items:start;
    flex-direction:column
  }
  .two-column {
    grid-template-columns:1fr
  }
  .timeline {
    max-height:300px
  }
}
@media(max-width:600px) {
  main {
    padding:28px 16px
  }
  .topbar {
    padding:0 16px;
    height:76px;
    gap:16px
  }
  .wordmark {
    font-size:19px
  }
  .internal {
    display:none
  }
  .stat {
    padding:16px
  }
  .stat strong {
    font-size:33px
  }
  .panel {
    padding:20px
  }
  .filters {
    flex-wrap:wrap
  }
  .chart-caption span:nth-child(2) {
    display:none
  }
  .notice {
    align-items:start
  }
  .form-row {
    grid-template-columns:1fr
  }
  .audience {
    grid-template-columns:1fr 1fr
  }
  .audience .panel {
    padding:15px
  }
  .section-heading {
    flex-wrap:wrap
  }
  footer {
    gap:16px;
    line-height:1.6
  }
  .login {
    margin-top:20px
  }
  .login h1 {
    font-size:32px
  }
}
.main-nav {
  display:flex;
  gap:18px;
  font-size:12px;
  flex-wrap:wrap
}
.main-nav a:hover {
  text-decoration:underline
}
.planning-editor {
  max-width:780px
}
.planning-cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:20px
}
.planning-cards article {
  padding:16px;
  border:1px solid var(--line);
  border-radius:10px;
  min-width:0;
  overflow-wrap:anywhere
}
.goal-amount {
  margin:22px 0
}
.goal-amount strong {
  font-size:30px
}
fieldset {
  border:1px solid var(--line);
  border-radius:8px;
  padding:16px;
  min-width:0
}
legend {
  font-size:12px;
  color:var(--muted)
}
label.choice {
  display:flex;
  gap:10px;
  align-items:center;
  padding:4px 0
}
.choice input[type=checkbox] {
  min-height:0;
  margin:0;
  width:auto
}
.planning-details {
  border-top:1px solid var(--line);
  padding:16px 0;
  overflow-wrap:anywhere
}
.planning-details summary {
  cursor:pointer;
  font-size:14px;
  font-weight:650
}
.planning-details form {
  margin-top:16px
}
button:disabled {
  opacity:.5;
  cursor:default
}
@media(max-width:600px) {
  .main-nav {
    gap:5px;
    flex-direction:column;
    font-size:10px
  }
  .topbar {
    gap:10px
  }
  .planning-editor button {
    white-space:normal
  }
}
.two-column > * {
  min-width:0
}
.event-form select {
  width:100%;
  min-width:0
}
.event-form button {
  max-width:100%;
  white-space:normal
}
.planning-editor input[readonly],.planning-editor select:disabled {
  color:var(--muted)
}
.tracking-code {
  overflow:auto;
  white-space:pre;
  padding:16px;
  background:var(--bg);
  font-size:12px
}
.tracking-code code {
  white-space:pre
}

/* Benchmark website traffic */
.traffic-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:14px;margin:18px 0}
.traffic-card{padding:22px;display:flex;flex-direction:column;gap:8px}
.traffic-card small{font-size:12px;color:var(--muted)}
.traffic-card strong{font-size:30px;line-height:1.1;font-variant-numeric:tabular-nums}
.traffic-card span{font-size:12px;color:var(--muted);line-height:1.4}
.traffic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:18px 0}
.traffic-grid .panel{min-width:0}
.traffic-plot{height:225px;position:relative;margin:16px 0}
.traffic-plot svg{width:100%;height:100%;display:block;outline-offset:3px}
.traffic-plot svg:focus-visible{outline:2px solid var(--green);border-radius:4px}
.traffic-plot line{stroke:var(--line);stroke-width:1}
.traffic-plot polyline{fill:none;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}
.traffic-views{stroke:var(--green)}
.traffic-visits{stroke:#6386ad}
.traffic-plot .traffic-crosshair{stroke:var(--ink);stroke-width:1;stroke-dasharray:4 5;opacity:.55}
.traffic-point{stroke:var(--paper);stroke-width:2}
.traffic-views-point{fill:var(--green)}
.traffic-visits-point{fill:#6386ad}
.traffic-tooltip{position:absolute;top:4px;left:50%;transform:translateX(-50%);z-index:1;
  pointer-events:none;min-width:150px;padding:9px 12px;background:var(--ink);color:#fff;
  box-shadow:0 2px 10px #202c2a29;border-radius:8px;font-size:12px;white-space:nowrap}
.traffic-tooltip strong,.traffic-tooltip span{display:block}
.traffic-tooltip span{margin-top:4px}
.traffic-chart-help{font-size:12px;margin:-7px 0 12px}
.traffic-legend{display:flex;gap:24px;font-size:12px;color:var(--muted);margin-bottom:18px}
.traffic-legend span:first-child{color:var(--green)}
.traffic-legend span:nth-child(2){color:#6386ad}
@media(max-width:850px){.traffic-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.traffic-grid{grid-template-columns:1fr}}
@media(max-width:540px){.traffic-cards{grid-template-columns:1fr}}