/* Offer pages only (templates/offer.html links this after site.css). */

/* An offer's price and its one button (sitec's {{buy}}), the same block on every offer, under the summary and again
   after the body. The button takes the accent, like the follow button, so every action on the site looks alike. */
.buy { margin: 1.8rem 0 2.2rem; padding: 1.4rem 1.5rem 1.5rem; background: var(--code); border-radius: 8px; display: grid; gap: 0.35rem; max-width: 62ch; }
.buy-lead { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.45rem, 3vw, 1.9rem); line-height: 1.1; letter-spacing: -0.01em; }
.buy-price { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.3; }
.buy-lead + .buy-price { font-weight: 500; color: var(--ink); }
.buy-act { display: grid; gap: 0.7rem; margin-top: 1rem; }
.buy-button { --buy-fill: var(--accent); display: block; text-align: center; padding: 1.1rem 1.5rem; background: var(--buy-fill); color: var(--bg, #000); border-radius: 6px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.8vw, 1.65rem); line-height: 1.15; text-decoration: none; transition: filter 140ms ease-out, transform 140ms ease-out; }
.buy-button:hover, .buy-button:focus-visible { filter: brightness(1.08); text-decoration: none; }
.buy-button:active { transform: translateY(1px); }
.buy-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.buy-note { margin: 0; color: var(--ink); font-size: 0.95rem; line-height: 1.45; text-align: center; }
main > .buy:last-child { margin-top: 2.6rem; }

/* Table headers on an offer read as words, not labels. */
.page th { text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--ink); }

/* How it works, printed as a slip: the steps on one paper-toned card with a torn bottom edge. */
#how-it-works + ol { list-style: none; counter-reset: step; margin: 1.5rem 0 2rem; padding: 1.4rem 1.5rem 2.4rem; max-width: 34rem; background: var(--ink); color: var(--bg); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 96% 100%, 92% calc(100% - 12px), 88% 100%, 84% calc(100% - 12px), 80% 100%, 76% calc(100% - 12px), 72% 100%, 68% calc(100% - 12px), 64% 100%, 60% calc(100% - 12px), 56% 100%, 52% calc(100% - 12px), 48% 100%, 44% calc(100% - 12px), 40% 100%, 36% calc(100% - 12px), 32% 100%, 28% calc(100% - 12px), 24% 100%, 20% calc(100% - 12px), 16% 100%, 12% calc(100% - 12px), 8% 100%, 4% calc(100% - 12px), 0 100%); }
#how-it-works + ol li { margin: 0; padding: 0.9rem 0; }
#how-it-works + ol li + li { margin-top: 0.6rem; }
#how-it-works + ol strong { color: var(--bg); }

/* The guarantee is one sentence, set as a statement. */
#our-guarantee + p { font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.3; font-weight: 500; max-width: 32ch; }

/* Questions as an index with one answer (offer.js builds it; without script every answer shows under its question). */
.qa { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2rem; margin: 1.5rem 0 2rem; }
.qa-list { list-style: none; margin: 0; padding: 0; }
.qa-list li { margin: 0; }
.qa-q { display: flex; gap: 0.7rem; align-items: baseline; width: 100%; padding: 0.55rem 0; background: none; border: 0; color: var(--mute); font: inherit; font-size: 1.05rem; line-height: 1.4; text-align: left; cursor: pointer; transition: color 180ms ease; }
.qa-q::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mute); transform: translateY(-1px); }
.qa-q:hover, .qa-q[aria-selected="true"] { color: var(--ink); }
.qa-q[aria-selected="true"]::before { background: var(--accent); }
.qa-q:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.qa-pane { position: sticky; top: 6rem; align-self: start; font-size: 1.3rem; line-height: 1.4; }
.qa-pane p { margin: 0 0 0.8rem; }
@media (max-width: 40rem) {
  .qa { grid-template-columns: 1fr; gap: 0; }
  .qa-pane { display: none; }
  .qa-a { margin: 0.2rem 0 0.8rem 1.2rem; font-size: 1.05rem; }
}
@media (min-width: 40.01rem) { .qa-a { display: none; } }

/* "Who's fixing your site" on an offer: short bold run-ins, then the client's own words set large as a pull quote, close
   under the line that names them so it reads as theirs. */
#whos-fixing-your-site ~ blockquote { margin: -0.4rem 0 2.4rem; padding: 0 0 0 1.1rem; border: 0; box-shadow: inset 3px 0 0 var(--line); font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 2.8vw, 1.85rem); line-height: 1.25; color: var(--ink); max-width: 30ch; }
#whos-fixing-your-site ~ blockquote p { margin: 0 0 0.5rem; }
#whos-fixing-your-site ~ blockquote p:last-child { font-family: var(--font-body); font-size: 0.95rem; font-weight: 400; color: var(--mute); }

/* "What you pay" on an offer: the price set large, its two halves as two short lines, the seals, then the small print and
   the optional extra, quieter. Source order: price paragraph, two-item list, seals embed, limits paragraph, care paragraph. */
#what-you-pay + p { margin: 0.9rem 0 0.6rem; font-size: 1.3rem; line-height: 1.1; }
#what-you-pay + p strong { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 6vw, 3.6rem); letter-spacing: -0.02em; }
#what-you-pay + p + ol { list-style: none; margin: 0 0 0.4rem; padding: 0; display: grid; gap: 0.3rem; font-size: 1.15rem; }
#what-you-pay + p + ol li { margin: 0; padding-left: 1.2rem; position: relative; }
#what-you-pay + p + ol li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: oklch(0.83 0.15 86); }
#what-you-pay + p + ol + .embed + p { margin: 0 0 1.2rem; font-size: 0.98rem; color: var(--mute); }
#what-you-pay + p + ol + .embed + p + p { margin: 0 0 2rem; font-size: 0.98rem; color: var(--mute); }
#what-you-pay + p + ol + .embed + p + p strong { color: var(--ink); }

/* "Who's fixing your site": the portrait small and round beside the name, the client's own logo small beside their
   line (unaltered, as their site serves it). Each picture is its own paragraph in the source, before its line. */
#whos-fixing-your-site ~ p:has(> img[src$="/mackenzie.webp"]), #whos-fixing-your-site ~ p:has(> img[src$="/buildcanada-logo-square.svg"]) { float: left; clear: both; margin: 0.2rem 1rem 0.6rem 0; }
#whos-fixing-your-site ~ p > img[src$="/mackenzie.webp"] { display: block; width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; }
#whos-fixing-your-site ~ p > img[src$="/buildcanada-logo-square.svg"] { display: block; width: 4.5rem; height: 4.5rem; border-radius: 8px; }
#whos-fixing-your-site ~ p:has(> img[src$="/mackenzie.webp"]) + p, #whos-fixing-your-site ~ p:has(> img[src$="/buildcanada-logo-square.svg"]) + p { min-height: 4.8rem; }
#whos-fixing-your-site ~ blockquote { clear: both; }