/* services-2026.css — page-scoped additions for /services/ only.
   Loaded *alongside* redesign-2026.css, never instead of it: the header, footer, buttons,
   typography and colour tokens must stay byte-identical to / and /marketing-priority-ai/, so
   nothing here redefines a token or an rd-* rule. Everything is prefixed sv-.
   The reason for a second file rather than more rules in redesign-2026.css is the same one
   recorded at the top of that file: pages that can change independently should not be able to
   break each other. A services-only card style has no business loading on the product page. */

/* Service category card. rd-card supplies the shell; this only adds the internal rhythm and the
   price row that has to sit at the bottom regardless of how much copy the card carries. */
.sv-card { display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.sv-pkg > .sv-price { margin-top: auto; }
#what-we-do .rd-2col { align-items: start; }
/* rd-3col deliberately top-aligns its cards on the product page; for the three packages the
   comparison only reads if the price rows line up, so this one grid stretches instead. */
#packages .rd-3col { align-items: stretch; }
.sv-q { margin: 0; font-weight: 700; font-size: 17px; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); }
.sv-includes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sv-includes li { font-size: 13px; line-height: 1.35; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }

/* Price row. The "from" and the scope caveat travel together everywhere a number appears — a
   bare figure on a services page reads as a quote, which is exactly the expectation we do not
   want to set. */
.sv-price { border-top: 1px solid var(--line); padding-top: 16px; }
.sv-price b { display: block; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); font-feature-settings: "tnum" 1; }
.sv-price span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* Recurring packages. The middle card is marked as the common starting point with the same
   2px navy border the product page uses for "now", so the emphasis reads as one system. */
.sv-pkg { display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.sv-pkg-lead { background: var(--surface); border: 2px solid var(--fix-navy-deep); }
.sv-pkg-name { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; margin: 0; }
.sv-pkg-for { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.sv-tag { display: inline-flex; align-self: flex-start; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--priority-gold); color: var(--fix-navy-deep); }

/* Plain-language pricing summary. Rows, not a table: a table forces horizontal scroll on a
   phone, and this is the one block a small-business owner is most likely to read on a phone. */
/* The summary is split into paid-once and paid-monthly. Mixed together, a €295 setup and a
   €299/month retainer sit one line apart and read as the same kind of commitment. */
.sv-rows-head { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0 0 6px; }
.sv-rows + .sv-rows-head { margin-top: 32px; }
.sv-rows { display: flex; flex-direction: column; }
.sv-row { display: flex; flex-wrap: wrap; gap: 4px 24px; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding: 16px 0; }
.sv-row:last-child { border-bottom: 1px solid var(--line); }
.sv-row strong { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.sv-row span { font-size: 15px; font-weight: 700; color: var(--cyan-ink); font-feature-settings: "tnum" 1; }

/* FAQ. <details> keeps it keyboard- and no-JS-accessible; the marker is left in place rather
   than replaced with a custom chevron so assistive technology keeps the native semantics. */
.sv-faq { display: flex; flex-direction: column; }
.sv-faq details { border-top: 1px solid var(--line); }
.sv-faq details:last-child { border-bottom: 1px solid var(--line); }
.sv-faq summary { cursor: pointer; list-style-position: outside; padding: 20px 0 20px 4px; font-weight: 700; font-size: 17px; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); }
.sv-faq summary:hover { color: var(--cyan-ink); }
.sv-faq p { margin: -4px 0 20px; font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 68ch; }
/* Same 44px hit-target treatment the redesign applies to inline consent links: the clickable box
   is enlarged with padding and a compensating negative margin, so nothing moves on screen. */
.sv-faq p a { display: inline-block; padding: 10px 3px; margin: -10px -3px; }

/* "Not sure what you need" — a light band rather than another navy block, so the page keeps
   only two dark sections and the eye still knows which one is the close. */
.sv-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 32px; }
.sv-help h2 { font-weight: 800; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 8px; }
.sv-help p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); max-width: 56ch; }

/* The portrait is capped well below its grid column: at half of the 1180px wrap it would
   outweigh the copy beside it, and this section is meant to be quiet. */
.sv-portrait { max-width: 320px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.sv-portrait img { display: block; width: 100%; height: auto; }

.sv-note { margin: 24px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 70ch; }

@media (max-width: 720px) {
  .sv-card, .sv-pkg, .sv-help { padding: 22px; }
  .sv-help { display: block; }
  .sv-help .rd-actions { margin: 20px 0 0; }
}