:root {
  --paper: #fafaf7;
  --ink: #14213d;
  --accent: #1f7a4d;
  --accent-ink: #ffffff;
  --muted: #5a6577;
  --line: #d9dde3;
  --card: #ffffff;
  --warn: #9a4b00;
  --seo: #1f7a4d;
  --aeo: #2b6cb0;
  --geo: #8a4fbf;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { font-family: var(--font); color: var(--ink); background: var(--paper); font-size: 17px; line-height: 1.5; }
body { margin: 0; }
a { color: var(--accent); }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .5rem 1rem; }
.skip:focus { left: 0; z-index: 10; }
.site-header { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--card); }
.brand { font-weight: 700; text-decoration: none; color: var(--ink); font-size: 1.15rem; }
.site-header nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.site-header nav a { color: var(--ink); text-decoration: none; }
.site-header nav a:hover { text-decoration: underline; }
main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.site-footer { border-top: 1px solid var(--line); padding: 1.5rem 1.25rem; color: var(--muted); font-size: .9rem; }
.site-footer a { margin-right: 1rem; }
h1 { font-size: 1.9rem; line-height: 1.2; margin: .5rem 0 .75rem; }
h2 { font-size: 1.4rem; margin: 2rem 0 .75rem; }
h3 { font-size: 1.1rem; margin: 1.25rem 0 .5rem; }
.muted { color: var(--muted); }
button, .btn { font: inherit; border-radius: 6px; padding: .5rem .9rem; cursor: pointer; border: 1px solid var(--ink); background: var(--card); color: var(--ink); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
/* Links and summaries need naming too, or they fall back to the browser default
   ring, which is thinner and is off by default for links in Safari. */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Calculator page */
.lede { color: var(--muted); margin-top: 0; }
.intro-note { background: #eef6f1; border: 1px solid #cfe3d7; border-radius: 8px; padding: .75rem 1rem; margin: 1rem 0; }
.btn-link { background: none; border: none; color: var(--accent); text-decoration: underline; padding: 0; cursor: pointer; font: inherit; }
.sentence { position: relative; font-size: 1.35rem; line-height: 2.1; margin: 1.25rem 0; }
.blank { white-space: nowrap; }
.sentence input, .sentence select { font: inherit; font-weight: 700; color: var(--ink); background: var(--card); border: none; border-bottom: 2px solid var(--accent); border-radius: 4px 4px 0 0; padding: 0 .3rem; width: 6.5ch; text-align: right; }
.sentence input[data-kind="int"] { width: 8ch; }
.sentence select { width: auto; text-align: left; }
.unit { font-weight: 700; }
.tip { display: inline-block; width: 1.5rem; height: 1.5rem; line-height: 1.35rem; padding: 0; margin-left: .3rem; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted); background: var(--card); font-size: .8rem; vertical-align: middle; text-align: center; }
.tip[aria-expanded="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.tip-panel { display: block; position: absolute; left: 0; right: 0; width: min(22rem, 100%); z-index: 5; background: var(--ink); color: #fff; font-size: .9rem; font-weight: 400; line-height: 1.4; padding: .6rem .8rem; border-radius: 6px; margin-top: .35rem; white-space: normal; }
.preset-row { position: relative; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: .5rem 0 1.5rem; color: var(--muted); }
.preset-row .tip-panel { top: 100%; margin-top: 0; }
.preset-row select { font: inherit; padding: .25rem .4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; }
.card .label { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.card .value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.card.big .value { font-size: 2.4rem; color: var(--accent); }
.card .sub { color: var(--muted); font-size: .9rem; }
.headline, .channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin: 1rem 0; }
.headline .big { grid-column: span 2; }
.ch-seo { border-top: 4px solid var(--seo); }
.ch-aeo { border-top: 4px solid var(--aeo); }
.ch-geo { border-top: 4px solid var(--geo); }
.ch-inf { border-top: 4px dashed var(--muted); }
.switch { display: flex; gap: .4rem; align-items: center; font-size: .9rem; margin-top: .4rem; }
.paid { margin: 1rem 0; }
.paid p { margin: .25rem 0 0; }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin: 1rem 0; }
.chart { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .75rem; }
.chart figcaption { color: var(--muted); font-size: .85rem; margin-bottom: .5rem; }
.chart svg { width: 100%; height: auto; display: block; }
details { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: .5rem 1rem; margin: .75rem 0; }
summary { cursor: pointer; font-weight: 600; padding: .4rem 0; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0; }
.about { margin-top: 3rem; max-width: 70ch; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 14px; }
.chart .line { fill: none; stroke-width: 3; stroke-linejoin: round; }
.chart .line.value, .chart rect.value { stroke: var(--accent); fill: var(--accent); }
.chart .line.cost { stroke: var(--muted); stroke-dasharray: 6 4; }
.chart rect.cost { fill: var(--muted); }
.chart .payback line { stroke: var(--warn); stroke-width: 2; stroke-dasharray: 3 3; }
.chart .payback text { fill: var(--warn); }
.chart .bar.seo { fill: var(--seo); }
.chart .bar.aeo { fill: var(--aeo); }
.chart .bar.geo { fill: var(--geo); }

@media (max-width: 640px) {
  html { font-size: 16px; }
  .sentence { font-size: 1.15rem; line-height: 2; }
  .headline .big { grid-column: 1 / -1; }
  /* Charts scale down to about half width on a phone, so the labels need to be twice the size. */
  .chart .tick { font-size: 20px; }
}

.table-scroll { overflow-x: auto; }
table.months { border-collapse: collapse; width: 100%; font-size: .9rem; font-variant-numeric: tabular-nums; }
table.months th, table.months td { padding: .35rem .5rem; text-align: right; border-bottom: 1px solid var(--line); }
table.months th:first-child, table.months td:first-child { text-align: left; }
table.months tr.total td { font-weight: 700; }

/* Refine and assumptions panels */
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: .75rem 1rem; margin: .75rem 0; }
legend { font-weight: 600; padding: 0 .4rem; }
fieldset label { display: block; margin: .5rem 0; }
/* A field wraps one label, its tip button and its input, so the label can sit
   inline next to the button while the group still stacks. */
.field { margin: .5rem 0; }
.not-sure { display: block; font-size: .9rem; margin-top: .25rem; }
.field label { display: inline; margin: 0; }
fieldset input[type="text"], fieldset select { font: inherit; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); max-width: 12ch; }
fieldset select { max-width: none; }
fieldset label.inline { display: inline; }
.refine-ch.refine-seo { border-left: 4px solid var(--seo); }
.refine-ch.refine-aeo { border-left: 4px solid var(--aeo); }
.refine-ch.refine-geo { border-left: 4px solid var(--geo); }
.refine-ch, .refine-inv { position: relative; }
.assumption { border-top: 1px solid var(--line); padding: .75rem 0; position: relative; }
.assumption p { margin: .25rem 0; }
.assumption .source { font-size: .85rem; }
/* Print only: the inputs do not print, so the value prints as text instead. */
.a-print-value { display: none; }
.assumption.changed { background: #fff8e6; padding-left: .5rem; padding-right: .5rem; }
.assumption input[type="text"] { font: inherit; padding: .25rem .4rem; border: 1px solid var(--line); border-radius: 6px; width: 7ch; }
.curve { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .4rem; }
.curve label { font-size: .8rem; color: var(--muted); display: flex; flex-direction: column; }
.curve input[type="text"] { width: 100%; }

/* Detailed mode workbench */
.wb-tabs { display: flex; gap: .25rem; margin: .5rem 0; border-bottom: 1px solid var(--line); }
.wb-tab { border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; background: none; }
.wb-tab.on { border-color: var(--line); background: var(--paper); font-weight: 700; }
.wb-tab .count { background: var(--line); border-radius: 999px; padding: 0 .45rem; font-size: .8rem; }
.wb-panel textarea { width: 100%; font-family: var(--mono); font-size: .9rem; padding: .5rem; border: 1px solid var(--line); border-radius: 6px; }
.wb-actions { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: .5rem 0; }
.wb-panel { padding-left: .75rem; }
.wb-seo { border-left: 4px solid var(--seo); }
.wb-aeo { border-left: 4px solid var(--aeo); }
.wb-geo { border-left: 4px solid var(--geo); }
table.rows td:first-child { text-align: left; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
label.btn { display: inline-block; }
label.btn:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
.small { font-size: .85rem; width: 100%; margin: 0; }
/* Detailed mode on a wide screen: inputs and panels stack in the left column,
   every result sits in the right column. Named areas rather than per-child
   grid-column, so the panels cannot drift below the whole results column. */
@media (min-width: 960px) {
  body.mode-detailed .calc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "head head"
      "inputs results"
      "panels results";
    /* The results span both body rows. Without a flexible third row the grid
       splits that height evenly and drops the panels halfway down the page. */
    grid-template-rows: auto auto 1fr;
    gap: 0 1.5rem;
    align-items: start;
  }
  body.mode-detailed .calc-head { grid-area: head; }
  body.mode-detailed .calc-inputs { grid-area: inputs; }
  body.mode-detailed .calc-results { grid-area: results; }
  body.mode-detailed .calc-panels { grid-area: panels; }
  body.mode-detailed .calc-results .headline { position: sticky; top: .5rem; z-index: 2; }
  body.mode-detailed .charts { grid-template-columns: 1fr; }
}
.page { max-width: 72ch; }
.page table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .95rem; }
.page th, .page td { border-bottom: 1px solid var(--line); padding: .4rem .5rem; text-align: left; vertical-align: top; }
.page code { font-family: var(--mono); background: #eef0f3; padding: 0 .25rem; border-radius: 3px; font-size: .9em; }
.page pre { background: #eef0f3; padding: .75rem 1rem; border-radius: 8px; overflow-x: auto; }
.page blockquote { border-left: 4px solid var(--line); margin: 1rem 0; padding: .25rem 1rem; color: var(--muted); }
.contact label { display: block; margin: .75rem 0 .25rem; }
.contact input[type="text"], .contact input[type="email"], .contact textarea { font: inherit; width: 100%; max-width: 40rem; padding: .5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); display: block; }
.contact button { margin-top: 1rem; }
.hp { position: absolute; left: -9999px; }