/* ==========================================================================
   mcprush — for-publishers.css
   Page styles for for-publishers.html only. Everything is prefixed .fp- so it
   cannot reach into a page owned by somebody else, and every colour is a
   core.css token so the dark theme comes free.

   One local variable does real work: --fp-c is the surface accent, set from a
   data attribute so the calculator can change surface without a second copy of
   the rules. Both surfaces resolve to the scheme's accent — the two product
   lines are told apart by the words and the marks, not by a second hue.

   The page is six sections and four blocks that repeat: a section head, a card
   pair, a bordered table (.fp-modelwrap + .fp-rowtbl or .fp-models-tbl), and a
   key/value column (.fp-kvrow). Everything that used to have a layout of its
   own — the cost decomposition, the four hosting shapes, the capability grid,
   the step list, the publisher cards — went with the prose it illustrated.
   ========================================================================== */

:root { --fp-c: var(--accent); --fp-c-soft: var(--accent-soft); --fp-c-line: var(--accent-line); }

/* grid children must be allowed to shrink or a wide table inside one pushes
   the page sideways — the same trap core.css already guards for .grid */
.fp-two > *, .fp-calc > *, .fp-facts > *, .fp-controls > *, .fp-pay > * { min-width: 0; }

/* horizontal escape hatch for the wide tables; the page body never scrolls */
.fp-scroll { overflow-x: auto; }

/* ---------- section rhythm ----------------------------------------------- */
.fp-sec { padding-block: 72px; }
/* the alternating band is a surface change and a hairline, not a wash — cards
   inside it stay on --surface so they still read as raised.

   Half a step, not a whole one. --surface-2 is the token for a panel sitting on
   the page, and a whole section painted in it lands seventeen levels above the
   background on the dark schemes: the band stopped reading as a band and
   started reading as a different page stitched into this one. Mixing it back
   halfway keeps the rhythm — you can still see where a section starts — and
   costs the page nothing on the light schemes, where the two tones were close
   to begin with. */
.fp-sec-alt {
  background: color-mix(in srgb, var(--surface-2) 50%, var(--paper));
  border-block: 1px solid var(--line);
}

/* ---------- 1 · masthead -------------------------------------------------- */
.fp-mast { padding-block: 0 56px; }
.fp-mast h1 { margin: 16px 0 20px; max-width: 20ch; }
.fp-mast h1 em { font-style: normal; color: var(--accent); }
.fp-mast .lead { max-width: 74ch; }
.fp-mast-act { gap: 10px; margin-top: 28px; flex-wrap: wrap; }

.fp-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r3);
  margin-top: 40px; overflow: hidden;
}
.fp-fact { background: var(--paper); padding: 18px 20px; }
.fp-fact-v { font-size: 30px; font-weight: 600; letter-spacing: -.045em; line-height: 1; color: var(--accent); }
.fp-fact-k { font-size: 13.5px; font-weight: 550; margin-top: 10px; }
.fp-fact-d { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }

/* ---------- 2 · surfaces + models ---------------------------------------- */
.fp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.fp-surface .card-body { display: flex; flex-direction: column; gap: 14px; }
.fp-tile-skill { color: var(--skill); background: var(--skill-soft); border-color: var(--skill-line); }

.fp-modelwrap {
  margin-top: 22px; border: 1px solid var(--line); border-radius: var(--r3);
  background: var(--surface); overflow: hidden;
}
.fp-modelhead { padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.fp-models-tbl { min-width: 720px; }
.fp-models-tbl th:first-child, .fp-models-tbl td:first-child { padding-left: 18px; }
.fp-models-tbl th:last-child, .fp-models-tbl td:last-child { padding-right: 18px; }
.fp-models-tbl td { vertical-align: top; }
.fp-m-name b { font-size: 14px; }
.fp-m-charge { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; max-width: 40ch; }
.fp-m-suits { color: var(--ink-2); max-width: 60ch; }
.fp-m-use { white-space: nowrap; font-size: 12.5px; }
.fp-foot-note { padding: 13px 18px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 12.5px; color: var(--ink-3); }
.fp-foot-note a { color: var(--accent); }

/* ---------- the shared three-column table --------------------------------
   The hosting rate card and the listing flow are the same shape — a named
   thing, a figure, and a sentence — so they are the same table rather than two
   layouts that happen to look alike. */
.fp-rowtbl { min-width: 640px; }
.fp-rowtbl th:first-child, .fp-rowtbl td:first-child { padding-left: 18px; }
.fp-rowtbl th:last-child, .fp-rowtbl td:last-child { padding-right: 18px; }
.fp-rowtbl td { vertical-align: top; }
.fp-rt-n { font-size: 13.5px; font-weight: 550; }
.fp-rt-d { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.fp-rt-r { font: 600 15px/1.2 var(--mono); letter-spacing: -.02em; color: var(--accent); white-space: nowrap; }
.fp-rt-p { color: var(--ink-2); line-height: 1.6; max-width: 78ch; }

/* ---------- 3 · calculator ------------------------------------------------ */
/* the phone read-out; see the 1080px block at the foot of this file for why it
   exists and where it becomes visible */
.fp-calcbar { display: none; }

.fp-calc {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  border: 1px solid var(--line-2); border-radius: var(--r3);
  background: var(--surface); box-shadow: var(--sh1); overflow: hidden;
}
/* --skill is an alias of --accent, so this pair no longer repaints anything.
   It stays because the attribute is what the calculator switches on, and a
   scheme that ever wants the skill surface tinted again has one place to do
   it rather than sixteen. */
.fp-calc[data-surface="skill"],
.fp-calcwrap[data-surface="skill"] { --fp-c: var(--skill); --fp-c-soft: var(--skill-soft); --fp-c-line: var(--skill-line); }

.fp-controls { padding: 22px; border-right: 1px solid var(--line); display: grid; gap: 22px; align-content: start; }
.fp-ctrl[hidden] { display: none; }
.fp-ctrl-h { margin-bottom: 10px; }
.fp-note { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); margin-top: 9px; }
.fp-note b { color: var(--ink-2); }

.fp-seg { width: 100%; }
.fp-seg button { flex: 1 1 0; justify-content: center; }
.fp-seg button.on { color: var(--fp-c); }

.fp-models { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-model {
  height: 30px; padding: 0 10px; border-radius: var(--r1);
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: 13px; font-weight: 500; color: var(--ink-2); transition: .12s;
}
.fp-model:hover:not(:disabled) { border-color: var(--ink-3); color: var(--ink); }
.fp-model.on { border-color: var(--fp-c); background: var(--fp-c-soft); color: var(--fp-c); font-weight: 600; }
.fp-model.off { border-style: dashed; color: var(--ink-3); opacity: .55; cursor: not-allowed; }

.fp-money { padding-inline: 12px; }
.fp-money input { font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.fp-unit { font: 500 13px/1 var(--mono); color: var(--ink-3); flex: none; }
.fp-unit-r { color: var(--ink-2); }

.fp-slide { display: grid; grid-template-columns: minmax(0, 1fr) 108px; gap: 12px; align-items: center; }
/* the exact-entry box beside each slider. 34px was under the thumb minimum and
   under the 44px core.css now gives the range track it sits next to, so the
   pair read as two different kinds of control */
.fp-numin {
  height: 42px; padding: 0 10px; text-align: right;
  border: 1px solid var(--line-2); border-radius: var(--r1); background: var(--surface);
  font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; width: 100%;
}
.fp-numin:focus { outline: none; border-color: var(--fp-c); box-shadow: 0 0 0 3px var(--fp-c-soft); }
.fp-slide input[type="range"]::-webkit-slider-thumb { border-color: var(--fp-c); }

/* ---- ledger ---- */
.fp-ledger { padding: 22px; background: var(--surface-2); display: flex; flex-direction: column; }
.fp-ledger-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.fp-ledger-h .badge { border-color: var(--fp-c-line); background: var(--fp-c-soft); color: var(--fp-c); }

.fp-led-tbl { min-width: 420px; }
.fp-led-tbl td { border-bottom: 1px dashed var(--line); padding: 10px 0; }
.fp-led-tbl tr:last-child td { border-bottom: 0; }
.fp-led-k { font-size: 13.5px; font-weight: 550; white-space: nowrap; width: 1%; padding-right: 18px !important; }
.fp-led-x { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.fp-led-v { text-align: right; font-size: 14px; white-space: nowrap; width: 1%; padding-left: 18px !important; }
.fp-neg { color: var(--risk); }
/* three rows of arithmetic are shorter than five controls, so the spare height
   in this column goes between the rows and the total rather than under the
   whole panel: the answer sits on the floor of the card, level with the last
   control that changes it. Below 1080px the column has no spare height and the
   auto margin collapses to nothing. */
.fp-ledger .fp-scroll { margin-bottom: auto; }

.fp-total {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-2);
}
.fp-total-v {
  font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing: -.045em;
  line-height: 1.05; color: var(--fp-c); margin-top: 8px; overflow-wrap: anywhere;
}
.fp-total-yr { text-align: right; }
.fp-total-yr div { font-size: 17px; font-weight: 600; letter-spacing: -.03em; margin-top: 4px; overflow-wrap: anywhere; }

.fp-warn {
  margin-top: 18px; padding: 11px 13px; border-radius: var(--r1);
  border: 1px solid var(--warn-line); background: var(--warn-soft); color: var(--warn);
  font-size: 12.5px; line-height: 1.55;
}
.fp-warn[hidden] { display: none; }
/* the one line of caveat under the ledger sits on the dashed rule the list of
   assumptions used to own */
.fp-ledger .fp-note { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-2); }

/* ---------- 5 · requirements ---------------------------------------------- */
.fp-req { margin-top: 22px; }
.fp-check { display: grid; gap: 11px; }
.fp-check li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.fp-check li svg { width: 15px; height: 15px; color: var(--accent); flex: none; margin-top: 3px; }
.fp-check li em { font-style: italic; color: var(--ink); }

/* ---------- 6 · payouts --------------------------------------------------- */
.fp-pay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.fp-pay-col { display: grid; align-content: start; }
.fp-kvrow {
  display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.fp-kvrow .k {
  font: 500 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .1em;
  color: var(--accent); padding-top: 2px;
}
.fp-kvrow .v { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

/* ---------- responsive ---------------------------------------------------- */
@media (max-width: 1180px) {
  .fp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 1080px is where the ledger stops sitting beside the controls and drops below
   them. From here on a reader dragging the install slider cannot see the figure
   it changes — the answer is some way further down the page — so a single line
   of it follows them instead. It is sticky against the wrapper that holds only
   the calculator, which is what makes it appear on arrival and leave on the way
   out rather than parking over the page. 44px, once, is a sticky bar that has
   earned its space: it is the output of the control under the thumb. */
@media (max-width: 1080px) {
  .fp-calc { grid-template-columns: minmax(0, 1fr); }
  .fp-controls { border-right: 0; border-bottom: 1px solid var(--line); }
  .fp-led-tbl { min-width: 380px; }

  :root:has(.fp-calcbar) { --scroll-pad: calc(var(--nav-h) + 44px + 16px); }
  .fp-calcbar {
    position: sticky; top: var(--nav-h); z-index: 6;
    display: flex; align-items: baseline; gap: 10px;
    padding: 11px 16px; min-height: 44px;
    border: 1px solid var(--line-2); border-bottom-color: var(--line);
    border-radius: var(--r3) var(--r3) 0 0;
    background: var(--surface-2);
  }
  /* the hairline is there for the stuck state, where content slides under the
     bar and needs an edge to slide under; at rest it reads as the card's head */
  .fp-calcbar-k {
    font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em;
    color: var(--ink-3); flex: none;
  }
  .fp-calcbar-v {
    font-size: 18px; font-weight: 600; letter-spacing: -.03em;
    color: var(--fp-c); margin-left: auto; white-space: nowrap;
  }
  .fp-calcbar-p { font-size: 12px; color: var(--ink-3); flex: none; }
  /* three things do not fit one 44px line on a phone. The share is the one the
     ledger repeats in its badge below, so it is the one that goes. */
  @media (max-width: 560px) { .fp-calcbar-p { display: none; } }
  /* the bar is the card's top edge while it is there */
  .fp-calcwrap .fp-calc { border-radius: 0 0 var(--r3) var(--r3); }
}
@media (max-width: 920px) {
  .fp-sec { padding-block: 52px; }
  .fp-two, .fp-pay { grid-template-columns: minmax(0, 1fr); }
  .fp-pay-col + .fp-pay-col .fp-kvrow:first-child { border-top: 1px solid var(--line); }
}

/* Below 780px the two surface cards and the six-model table between the
   masthead and the calculator come to well over a screen of reading before a
   publisher reaches the one thing this page is for, which is what they would
   actually be paid. So the calculator moves ahead of them. It survives the
   move: its first control is the surface toggle the cards describe, and it
   names and explains each pricing model as you pick it.

   The alternating band swaps with the order, so the page still reads
   paper / tint / paper / tint from top to bottom. */
@media (max-width: 780px) {
  main { display: flex; flex-direction: column; }
  main > section { order: 5; }
  .fp-mast { order: 1; }
  #calculator { order: 2; background: none; border-block: 0; }
  /* the same half step as .fp-sec-alt, since on a phone this is that band */
  #list { order: 3; background: color-mix(in srgb, var(--surface-2) 50%, var(--paper));
          border-block: 1px solid var(--line); }
}

/* 780px is the pricing-model table's own 720px minimum plus the page gutter.
   Side-scrolling a rate sheet is the exact failure this page argues against, so
   from here down every bordered table becomes one block per row: the name, then
   the figure, then the sentence. */
@media (max-width: 780px) {
  .fp-modelwrap .fp-scroll { overflow-x: visible; }

  .fp-models-tbl, .fp-rowtbl { min-width: 0; }
  .fp-models-tbl thead, .fp-rowtbl thead { display: none; }
  .fp-models-tbl tbody, .fp-models-tbl tr, .fp-models-tbl td,
  .fp-rowtbl tbody, .fp-rowtbl tr, .fp-rowtbl td { display: block; }
  .fp-models-tbl tr, .fp-rowtbl tr { padding: 15px 16px; border-bottom: 1px solid var(--line); }
  .fp-models-tbl tbody tr:last-child, .fp-rowtbl tbody tr:last-child { border-bottom: 0; }
  .fp-models-tbl td, .fp-rowtbl td { border: 0; padding: 0 !important; width: auto !important; text-align: left; }

  .fp-m-name b { font-size: 15px; }
  .fp-m-charge { max-width: none; }
  .fp-m-suits { margin-top: 9px; font-size: 13.5px; line-height: 1.55; }
  .fp-m-use {
    display: flex !important; gap: 16px; margin-top: 10px;
    padding-top: 9px; border-top: 1px dashed var(--line); white-space: normal;
  }

  .fp-rt-r { margin-top: 8px; }
  .fp-rowtbl .fp-rt-p { margin-top: 8px; font-size: 13.5px; }
}
@media (max-width: 760px) {
  .fp-mast h1 { max-width: none; }
}
/* The ledger is the one table that must never be side-scrolled: the amount is
   the answer, and pushing it off-screen behind a scrollbar hides the point of
   the calculator. Below this width each line stacks — label and amount on one
   row, the expression that produced it underneath. */
@media (max-width: 640px) {
  .fp-led-tbl { min-width: 0; }
  .fp-led-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 10px 0; border-bottom: 1px dashed var(--line); }
  .fp-led-tbl tr:last-child { border-bottom: 0; }
  .fp-led-tbl td { border: 0 !important; padding: 0 !important; width: auto; }
  /* rows are named rather than left to auto-placement — the source order is
     label, expression, amount, which would otherwise drop the amount to a third line */
  .fp-led-k { grid-column: 1; grid-row: 1; white-space: normal; }
  .fp-led-v { grid-column: 2; grid-row: 1; }
  .fp-led-x { grid-column: 1 / -1; grid-row: 2; white-space: normal; margin-top: 3px; overflow-wrap: anywhere; }
}

@media (max-width: 560px) {
  /* the fact strip stays two-up: stacked it runs to 480px of column, and the
     longest value in it is three characters wide. Only the padding comes in.
     Below 380px there is no half-width cell worth having — see the last block. */
  .fp-fact { padding: 15px 14px; }
  .fp-fact-v { font-size: 26px; }
  .fp-controls, .fp-ledger { padding: 18px; }
  /* six chips wrapped over two rows are the calculator's main control and were
     30px tall with 6px between them — two mis-taps deep */
  .fp-models { gap: 8px; }
  .fp-model { height: 34px; padding: 0 11px; font-size: 13.5px; }
  .fp-kvrow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .fp-slide { grid-template-columns: minmax(0, 1fr) 92px; }
  .fp-total-yr { text-align: left; }
  .fp-mast { padding-block: 0 40px; }
}

/* the narrowest phone still worth supporting. A half-width fact cell is about
   145px here, which is three words a line, so the strip gives up the pair; and
   the slider's number box no longer leaves the track enough to drag. */
@media (max-width: 380px) {
  .fp-facts { grid-template-columns: minmax(0, 1fr); }
  .fp-slide { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fp-numin { text-align: left; }
  /* The sticky bar is a fixed 151px label and a nowrap figure that neither
     shrinks. At 320 that leaves the figure 93px, and the calculator reaches
     $1,458,545.92 — 133px — well before its sliders run out, which pushed the
     document to 338px behind body{overflow-x:hidden}. Tighter gutters keep the
     six-figure answers on one 44px line; past that the figure takes a line of
     its own rather than a width the page does not have. */
  .fp-calcbar { flex-wrap: wrap; gap: 8px; padding-inline: 12px; }
}

/* No dark-theme block: every rule above resolves through a core.css token
   pair, so the theme flips without a second copy of the stylesheet. */

/* ---------- against doing it yourself -------------------------------------
   Three columns and no ticks-and-crosses grid: every cell here is a sentence,
   because "hosting ✓ / ✗" is the format that made the reader stop believing
   comparison tables in the first place. The mark sits beside the sentence
   rather than instead of it, and the columns are equal width so the right one
   does not read as an afterthought — it is the option the reader arrived
   with. */
.fp-vs { width: 100%; table-layout: fixed; }
.fp-vs th { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.fp-vs th:first-child, .fp-vs td:first-child { width: 168px; }
.fp-vs td { vertical-align: top; padding-block: 13px; font-size: 13.5px; line-height: 1.55; }
.fp-vs-k b { font-size: 14px; font-weight: 600; color: var(--ink); }
.fp-vs-y, .fp-vs-n { display: table-cell; }
.fp-vs-y > span:last-child { color: var(--ink-2); }
.fp-vs-n > span:last-child { color: var(--ink-3); }
.fp-vs-m {
  float: left; width: 17px; height: 17px; margin: 2px 8px 0 0; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
}
.fp-vs-m svg { width: 11px; height: 11px; }
.fp-vs-y .fp-vs-m { background: var(--accent); color: var(--on-accent, #fff); }
.fp-vs-n .fp-vs-m { background: var(--surface-3); color: var(--ink-3); }

@media (max-width: 760px) {
  /* the stack: the label once, then the two answers under it, each keeping
     its own mark so the pair is readable without a column header */
  .fp-vs, .fp-vs tbody, .fp-vs tr, .fp-vs td { display: block; width: auto; }
  .fp-vs thead { display: none; }
  /* THE COLUMN WIDTH OUTLIVED THE COLUMNS. `td:first-child { width: 168px }`
     is more specific than the block rule above it, so on a phone the label
     kept a 168px box inside a stack that has no columns at all — and the
     sentences beside it were laid out against a width the card does not have,
     which is what pushed them under its right border. */
  .fp-vs th:first-child, .fp-vs td:first-child { width: auto; }
  /* AND THE ROW HAD NO SIDE GUTTER. Its two neighbours in this card
     (.fp-models-tbl, .fp-rowtbl) stack with `padding: 15px 16px`; this one
     stacked with `13px 0`, so on a phone the text started and ended on the
     card's own border. Same gutter as its neighbours, for the same reason. */
  .fp-vs tr { padding: 15px 16px; border-bottom: 1px solid var(--line); }
  .fp-vs tr:last-child { border-bottom: 0; }
  /* THE ROW OWNS THE GUTTER NOW, so the cells give theirs up — and the border
     with it: core.css puts a hairline under every `.tbl td`, which in a stacked
     row is three hairlines inside one row and none under the last one. The row
     draws the only line there is. */
  .fp-vs td { padding: 0; border-bottom: 0; }
  .fp-vs-k { margin-bottom: 7px; }
  /* AND THE TWO ANSWER CHIPS TAKE THEIRS BACK, by name. `.fp-vs td` is one
     class and one element — more specific than `.fp-vs-y` alone — so the rule
     above won and both chips were printed with their text on the edge of their
     own background. Qualified with the element, they win it back. */
  .fp-vs td.fp-vs-y, .fp-vs td.fp-vs-n { padding: 8px 10px; border-radius: var(--r1); background: var(--surface-2); }
  .fp-vs-n { margin-top: 6px; }
}