/* The five service pages (websites, apps, reporting-dashboards, enquiry-follow-up,
   microsoft-365-workflows), generated by scripts/build-marketing-pages.mjs. The page layout itself
   is in editorial.css; this file holds only the blocks the 8 October 2026 ideas review added, and
   only these five pages load it. It is kept out of editorial.css on purpose: the home page embeds
   editorial.css whole, and the home page has a byte budget. Colours are the shell's tokens only. */

.service-page .svc-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:15px}

/* Ticked lines: the promises under the first button, "what you get", price drivers */
.svc-promises{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;padding:0;margin:18px 0 0}
.svc-promises li{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--line);border-radius:999px;font-size:.88rem;font-weight:600;color:var(--ink-mid)}
.svc-promises .ico,.svc-ticks .ico,.svc-callout .ico{width:1.15em;height:1.15em;color:var(--accent)}
.svc-ticks{list-style:none;padding:0;margin:14px 0 20px}
.svc-ticks li{display:flex;gap:10px;align-items:flex-start;margin:0 0 9px;color:var(--ink-mid)}
.svc-ticks .ico{margin-top:.25em}

/* Three labelled points under the opening line (enquiry follow-up) */
.svc-points{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;padding:0;margin:-6px 0 20px}
.svc-points li{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
.svc-points .ico{width:1.25em;height:1.25em;color:var(--accent)}

/* Quiet one-line links and notes */
.service-page .svc-from,.service-page .svc-small{font-size:.92rem;color:var(--muted)}
.service-page .svc-from a,.service-page .svc-small a,.service-page .svc-note a{font-weight:700}
.service-page .svc-small{margin:14px 0 0}

/* Tags: what the work lives in now (struck through), and what it becomes */
.svc-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 18px}
.svc-tags li{padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:.85rem;font-weight:500;color:var(--ink-mid)}
.svc-tags.is-gone li{text-decoration:line-through;text-decoration-thickness:1px}
.service-explanation>div:last-child .svc-tags li{border-color:var(--accent);color:var(--ink)}
.service-page .svc-chips-lead{margin:0 0 8px;font-size:.92rem}

/* "How it works after" reads as the answer: an accent line and heading on the pages that compare */
.svc-before-after>div:last-child{border-left:3px solid var(--accent);padding-left:28px}
.svc-before-after>div:last-child h2{color:var(--accent)}

.service-page .svc-callout{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 16px;border-left:3px solid var(--accent);border-radius:0 12px 12px 0;background:var(--wash);color:var(--ink);font-weight:600;font-size:.95rem}
.svc-callout .ico{margin-top:.15em}

/* The "after" drawn as numbered steps (enquiry follow-up) */
.svc-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;padding:0;margin:0 0 10px;counter-reset:flow}
.svc-flow li{padding:14px 16px;border:1px solid var(--line);font-weight:600;font-size:.9rem;color:var(--ink)}
.svc-flow li+li{border-left:0}
.svc-flow li:first-child{border-radius:12px 0 0 12px}
.svc-flow li:last-child{border-radius:0 12px 12px 0}
.svc-flow li:before{counter-increment:flow;content:counter(flow);display:block;font-size:.74rem;font-weight:700;color:var(--accent);margin-bottom:4px}
.service-explanation+.svc-flow{margin-top:28px}

/* The picture beside the example: a label on it, and a caption under it */
.svc-shot{margin:0;min-width:0}
.svc-shot>a{position:relative;display:block}
.svc-shot img{display:block;width:100%;height:auto}
.svc-cue,.svc-badge{position:absolute;left:12px;bottom:12px;padding:7px 13px;border-radius:999px;background:var(--panel);color:var(--ink);border:1px solid var(--line);font-size:.8rem;font-weight:700;box-shadow:var(--shadow-lift)}
.svc-badge{left:auto;right:12px;top:12px;bottom:auto}
.svc-shot>a:hover .svc-cue,.svc-shot>a:focus-visible .svc-cue{border-color:var(--accent)}
.svc-shot figcaption{margin-top:10px;font-size:.85rem;color:var(--muted)}
.service-page .svc-also{margin:14px 0 0}
.svc-also span{display:block;font-size:.82rem;color:var(--muted);margin-top:2px}
.svc-review{max-width:760px;margin:-30px 0 75px}

/* The four steps: a real number on each (the glass card look uses ::before for its glow, which hid
   the old counter), without duplicate counters or a connecting line */
.service-page .delivery li:before{content:none}
.svc-n{flex:none;width:26px;height:26px;margin-top:1px;border-radius:50%;background:var(--accent);color:var(--panel);display:grid;place-items:center;font:700 .82rem/1 var(--body)}
.svc-step{display:block;color:var(--ink);font-family:var(--display);font-weight:500;letter-spacing:-.01em;margin-bottom:2px}
@media(min-width:1000px){
  .svc-timeline ol{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px;position:relative}
  .svc-timeline li{flex-direction:column;gap:12px}
}
.service-page .svc-note{margin:0 0 18px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;color:var(--ink-mid);font-size:.95rem}
.svc-note b{color:var(--ink)}
.service-page .delivery p a{font-weight:600;color:var(--ink)}
.service-page .svc-more{margin:0}

/* A small box of onward links */
.svc-aside{max-width:750px;margin:36px 0 0;padding:18px 20px;border:1px solid var(--line);border-radius:14px}
.service-page .svc-aside p{margin:0 0 6px}
.svc-aside-links{display:flex;flex-wrap:wrap;gap:6px 22px}
.svc-aside-links a{font-weight:700}
.service-proof+.svc-aside{margin:-40px 0 60px}

/* The closing band: what to bring, then the button, then the phone number */
.service-page .svc-bring{margin:0 0 18px;color:var(--ink-mid);font-weight:600}
.editorial-close .svc-tags{margin-bottom:20px}
.service-page .svc-label{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}

@media(max-width:999px){
  .svc-flow{grid-template-columns:1fr}
  .svc-flow li+li{border-left:1px solid var(--line);border-top:0}
  .svc-flow li:first-child{border-radius:12px 12px 0 0}
  .svc-flow li:last-child{border-radius:0 0 12px 12px}
}
@media(max-width:540px){
  .svc-before-after>div:last-child{padding-left:18px}
  .svc-review{margin:-10px 0 50px}
  .service-proof+.svc-aside{margin:-20px 0 40px}
  .service-page .svc-actions .btn{flex:1 1 100%}
}

/* Two or more questions stack as separate glass cards, so they need a gap between them */
.service-question+.service-question{margin-top:20px}

/* Tap targets on phones and touch tablets (8 October 2026): the side links and the standalone text links get a 44px tall tap area. */
@media (max-width:640px), (pointer:coarse) and (max-width:1024px){
  .svc-aside-links{gap:0 22px}
  .svc-aside-links a,.service-page .svc-more .text-link,.service-proof .text-link{display:inline-flex;align-items:center;min-height:44px}
  /* 9 October 2026: the "Call 0416 591 313" line under the closing button */
  .service-page .svc-small a{display:inline-flex;align-items:center;min-height:44px}
}