/* Portfolio site: static, no scripts, no web fonts, no third-party requests (see site/_headers CSP).
   Large type and high contrast on purpose: part of the audience is older and not technical. */
:root { --navy: #0f2a47; --green: #14532d; --mint: #a7f3d0; --gold: #fde68a; --ink: #111827; --muted: #4b5563;
        --paper: #ffffff; --wash: #f3f4f6; --bubble-ai: #16a34a; --radius: 18px; }
* { box-sizing: border-box; }
html { font-size: 19px; }
body { margin: 0; font-family: Helvetica, Arial, sans-serif; color: var(--ink); background: var(--paper); line-height: 1.55; }
a { color: #0b5394; }
a:focus, a:hover { text-decoration-thickness: 3px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
header.site { background: linear-gradient(135deg, var(--navy), var(--green)); color: #fff; padding: 28px 0 40px; }
header.site nav { display: flex; gap: 22px; flex-wrap: wrap; font-size: .95rem; }
header.site nav a { color: var(--mint); }
header.site h1 { font-size: 2.6rem; line-height: 1.15; margin: 28px 0 10px; }
header.site p.lead { font-size: 1.25rem; color: #e5e7eb; max-width: 760px; }
.label { display: inline-block; background: var(--gold); color: var(--ink); font-weight: bold; border-radius: 999px; padding: 4px 14px; font-size: .85rem; }
main section { padding: 40px 0; }
main section + section { border-top: 1px solid #e5e7eb; }
h2 { font-size: 1.8rem; margin: 0 0 16px; }
h3 { font-size: 1.25rem; margin: 0 0 8px; }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--wash); border-radius: var(--radius); padding: 22px; }
.card a.more { font-weight: bold; }
ul.checks { list-style: none; padding: 0; }
ul.checks li { padding-left: 1.6em; position: relative; margin: 6px 0; }
ul.checks li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: bold; }
.secure { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 28px; }
.secure h2 { color: var(--gold); }
.secure p { color: #e5e7eb; }
.notice { background: #fff7ed; border-left: 6px solid #f59e0b; padding: 14px 18px; border-radius: 8px; }
/* Demo conversations */
.chat { background: #e5e7eb; border-radius: var(--radius); padding: 22px; max-width: 760px; }
.chat .who { font-size: .8rem; color: var(--muted); margin: 10px 4px 2px; }
.chat .msg { max-width: 82%; padding: 12px 16px; border-radius: 16px; margin: 4px 0; }
.chat .them { background: #fff; }
.chat .ai { background: var(--bubble-ai); color: #fff; margin-left: auto; }
.chat .who.ai-who { text-align: right; }
.chat .event { text-align: center; font-size: .85rem; color: var(--muted); margin: 12px 0; }
/* Before/after diagrams */
.flows { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }
.flow { border-radius: var(--radius); padding: 20px; }
.flow.before { background: #fef2f2; }
.flow.after { background: #ecfdf5; }
.flow ol { list-style: none; padding: 0; margin: 0; }
.flow li { background: #fff; border-radius: 12px; padding: 10px 14px; margin: 0 0 30px; position: relative; box-shadow: 0 2px 0 rgba(0,0,0,.08); }
.flow li:not(:last-child)::after { content: "↓"; position: absolute; left: 50%; bottom: -28px; font-weight: bold; color: var(--muted); }
.flow.before li.bad { border-left: 6px solid #dc2626; }
.flow.after li.good { border-left: 6px solid #16a34a; }
table.costs { border-collapse: collapse; width: 100%; }
table.costs th, table.costs td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
footer.site { background: var(--wash); padding: 30px 0; font-size: .9rem; color: var(--muted); }
@media (max-width: 720px) { html { font-size: 18px; } header.site h1 { font-size: 2rem; } .flows { grid-template-columns: 1fr; } }
/* Print = PDF case studies (tools/build_site.mjs). Fiverr gallery PDFs must not carry links or contact
   details, so everything marked .no-print (nav, platform links, footer) is dropped. */
@media print {
  html { font-size: 12pt; } .no-print { display: none !important; } header.site { padding: 12px 0 18px; }
  html { font-size: 11pt; } header.site h1 { font-size: 20pt; margin-top: 8px; } main section { padding: 10px 0; }
  .chat, .flow, table.costs tr, .card { break-inside: avoid; } h2 { break-after: avoid; font-size: 15pt; margin-bottom: 8px; }
  header.site p.lead { font-size: 12pt; } .flows { grid-template-columns: 1fr 1fr !important; gap: 14px; }
  .flow { padding: 12px; } .flow li { margin-bottom: 20px; padding: 6px 10px; } .flow li:not(:last-child)::after { bottom: -19px; }
  .chat { padding: 12px 16px; } .chat .msg { padding: 6px 12px; margin-top: 2px; margin-bottom: 2px; } .chat .who { margin: 4px 4px 1px; }
  main section + section { border-top: 0; }
  a { color: inherit; text-decoration: none; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* Gallery mode: the build script adds class "gallery-<id>" to <html> to render one section at 1280x769.
   Inert on the live site (no script there sets it). */
html[class^="gallery-"] body { width: 1280px; height: 769px; overflow: hidden; background: linear-gradient(135deg, var(--navy), var(--green)); }
html[class^="gallery-"] header.site, html[class^="gallery-"] footer.site, html[class^="gallery-"] main section { display: none; }
html.gallery-demo main section#demo, html.gallery-flow main section#flow { display: block; background: #fff; border-radius: 28px; margin: 40px; padding: 36px 44px; height: 689px; border-top: 0; }
html.gallery-demo main .wrap, html.gallery-flow main .wrap { max-width: none; padding: 0; }
html.gallery-demo .chat { max-width: none; padding: 16px 22px; }
html.gallery-demo { font-size: 15px; } html.gallery-demo h2 { margin-bottom: 8px; } html.gallery-demo .chat .msg { padding: 7px 14px; margin-top: 2px; margin-bottom: 2px; max-width: 74%; } html.gallery-demo .chat .who { margin-top: 4px; } html.gallery-demo main section#demo { padding-top: 26px; }
html.gallery-flow { font-size: 22px; }
html.gallery-demo main section#demo, html.gallery-flow main section#flow { position: relative; }
html.gallery-demo main section#demo::after, html.gallery-flow main section#flow::after { content: "Fictional sample business  •  scripted demo  •  30 years in IT & security";
  position: absolute; right: 44px; bottom: 18px; font-size: 14px; font-weight: bold; color: #6b7280; }