/* comic-e (owner 10-29): the ligne claire E world, site-wide. Linked only while features.json has "comic-e": true.
   Assembled from the approved board files (board/imagery/comic/comic.css, skinned/skin.css, skinned/E/fix-E.css,
   buildout/E/buildout-E.css, buildout/E/art-E.css) with paths pointed at /cimg and /fonts, then the site-wide layer at the end.
   Fonts: Host Grotesk + Azeret Mono, SIL OFL 1.1 (src/fonts/OFL-*.txt). */

/* ======== comic.css ======== */
/* Comic lane: ligne claire editorial comic. Clean even ink lines, flat daylight colours,
   yellow #FFD400 as the hero colour. Loaded after styles.css + features.css; overrides imagery
   and the light/dark treatment only. */
:root { --sky: #dcebf5; --sky2: #eef5fa; --line-ink: 2px solid var(--ink); }
body { background: #fff; }

/* Announcement bar: pale sky with an ink rule */
body.f-style-2 .announce { background: var(--sky); color: var(--text); border-bottom: var(--line-ink); }
body.f-style-2 .announce b { color: var(--head); }
body.f-style-2 .announce a { color: var(--head); text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }
body.f-style-2 .announce .x { color: var(--mut); }
.top .bar { box-shadow: none; border: var(--line-ink); }

/* Buttons: flat, outlined like a drawn panel */
body .btn.primary { border: var(--line-ink); box-shadow: 3px 3px 0 var(--ink); }
body .btn.primary:hover { box-shadow: 1px 1px 0 var(--ink); transform: translate(2px, 2px); }
body .btn.glass { background: #fff; color: var(--ink); border: var(--line-ink); }
body .btn.glass:hover { background: var(--sky2); }

/* Home hero: full-bleed comic scene, sky left, scene right */
body.f-photos-heroes .hero.photo { background: var(--sky); color: var(--text); text-align: left; min-height: 90vh; border-bottom: var(--line-ink); }
body.f-photos-heroes .hero.photo .ph { background: var(--sky); }
body.f-photos-heroes .hero.photo .ph img { object-position: 70% 50%; animation: none; }
body.f-photos-heroes .hero.photo .ph::after { background: linear-gradient(90deg, rgb(220 235 245 / .55) 0%, rgb(220 235 245 / .25) 36%, rgb(220 235 245 / 0) 52%); }
body.f-photos-heroes .hero.photo .onphoto { max-width: 1180px; }
body.f-photos-heroes .hero.photo .onphoto > * { max-width: 560px; margin-left: 0; margin-right: 0; }
body .hero.photo .eyebrow { color: var(--ink); justify-content: flex-start; }
body .hero.photo .eyebrow::after { display: none; }
body .hero.photo .eyebrow::before { background: var(--yellow); }
body.f-photos-heroes .hero.photo h1 { color: var(--ink); text-shadow: none; font-size: 60px; }
/* the span gets the same yellow marker loop that circles the lines on the bill */
body .hero.photo h1 span { color: var(--ink); display: inline; padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M30 58C28 22 150 10 250 13s148 18 140 44c-8 26-120 36-210 34S10 82 22 52C30 30 90 18 140 16' fill='none' stroke='%23FFD400' stroke-width='9' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
body .hero.photo .lede { color: var(--text); margin-left: 0; background: rgb(255 255 255 / .82); border: var(--line-ink); padding: 14px 18px; border-radius: 4px; }
body .hero.photo .ctas { justify-content: flex-start; }
body.f-photos-heroes .hero .meta { justify-content: flex-start; color: var(--ink); }
body.f-photos-heroes .scrollcue { border-color: var(--ink); left: 40px; margin-left: 0; }

/* Trust strip */
body .strip { background: #fff; color: var(--text); border-top: 0; border-bottom: var(--line-ink); }
body .strip b { color: var(--head); }

/* "What we usually find" tabs: the comic spot illustration instead of dark photos */
body.f-blocks-1 .pv-photo { background-color: #fff; background-size: contain; background-repeat: no-repeat; border-bottom: var(--line-ink); }
body.f-blocks-1 .sw-panels [role=tabpanel] { border: var(--line-ink); }
body.f-blocks-1 [role=tab][aria-selected=true] .tn { color: var(--ink); background: var(--yellow); }

/* Dark bands become pale sky panels with ink rules */
body section.k.dark { background: var(--sky2); color: var(--text); border-top: var(--line-ink); border-bottom: var(--line-ink); }
body section.k.dark h2, body section.k.dark h3 { color: var(--head); }
body section.k.dark .eyebrow { color: var(--mut); }
body section.k.dark .lede { color: var(--text); }
body .dark .card, body .card { border: var(--line-ink); box-shadow: none; }
body .dark .card { background: #fff; color: var(--text); }
body .dark .card h3 { color: var(--head); }
body .dark .textlink { color: var(--head); }
body .dark .trustrow, body .dark .trustrow li { border-color: rgb(22 23 28 / .25); }

/* Service hero (/backups): same world */
body.f-photos-heroes .phero.photo { background: var(--sky); color: var(--text); border-bottom: var(--line-ink); }
body.f-photos-heroes .phero.photo .ph { background: var(--sky); }
body.f-photos-heroes .phero.photo .ph img { object-position: 70% 50%; animation: none; }
body.f-photos-heroes .phero.photo .ph::after { background: linear-gradient(90deg, rgb(220 235 245 / .6) 0%, rgb(220 235 245 / .3) 40%, rgb(220 235 245 / 0) 56%); }
body.f-photos-heroes .phero.photo .onphoto > div { max-width: 600px; }
body .phero h1 { color: var(--ink); }
body .phero .eyebrow { color: var(--ink); }
body .phero .lede { color: var(--text); background: rgb(255 255 255 / .82); border: var(--line-ink); padding: 14px 18px; border-radius: 4px; }
body .phero .textlink { color: var(--head); }
body .crumbs ol { color: var(--mut); }
body .crumbs li + li::before { color: rgb(22 23 28 / .35); }
body .crumbs a { color: var(--text); }
body .crumbs a:hover { color: var(--ink); }
body.f-photos-heroes .factrow { border-top: var(--line-ink); }
body.f-photos-heroes .factrow span { color: var(--text); }
body.f-photos-heroes .factrow b { color: var(--head); }
body .upsell { border-bottom: var(--line-ink); }

/* Closing band: flat yellow into sky, no ink fade */
body.f-style-7 .endmesh { background: linear-gradient(180deg, #ffd400 0%, #ffd400 62%, var(--sky) 100%); border-top: var(--line-ink); }
body.f-style-7 .endmesh .mesh, body.f-style-7 .endmesh .grain { display: none; }
body.f-style-7 .endmesh::after { background: none; }

@media (max-width: 640px) {
  body.f-photos-heroes .hero.photo { min-height: 0; padding-top: 250px; }
  body.f-photos-heroes .hero.photo .ph { bottom: auto; height: 300px; border-bottom: var(--line-ink); }
  body.f-photos-heroes .hero.photo .ph img { object-position: 78% 50%; }
  body.f-photos-heroes .hero.photo .ph::after { background: none; }
  body.f-photos-heroes .hero.photo { padding-top: 330px; background: #fff; }
  body.f-photos-heroes .hero.photo h1 { font-size: 38px; }
  body .hero.photo .lede, body .phero .lede { background: none; border: 0; padding: 0; }
  body.f-photos-heroes .phero.photo { padding-top: 320px; background: #fff; }
  body.f-photos-heroes .phero.photo .ph { bottom: auto; height: 290px; border-bottom: var(--line-ink); }
  body.f-photos-heroes .phero.photo .ph img { object-position: 78% 50%; }
  body.f-photos-heroes .phero.photo .ph::after { background: none; }
  body.f-photos-heroes .phero.photo .crumbs { display: none; }
}

/* the logo marquee overflows at 390 in the file:// mock; clip it */
body .worksbar { overflow: hidden; }
body .wb-viewport { position: relative; max-width: 100%; }

/* tuning after the first screenshots */
@media (min-width: 641px) {
  body.f-photos-heroes .hero.photo .ph img, body.f-photos-heroes .phero.photo .ph img { object-position: 100% 50%; }
  body.f-photos-heroes .hero.photo { min-height: 82vh; }
  body.f-photos-heroes .phero.photo .onphoto > div { max-width: 540px; }
  body.f-photos-heroes .phero .factrow { max-width: 540px; row-gap: 6px; }
}
body.f-blocks-1 .sw-tabs .tn { justify-self: start; padding: 1px 6px; border-radius: 3px; }
body.f-blocks-1 [role=tab][aria-selected=true] .tn { color: var(--ink); background: var(--yellow); }
body.f-blocks-1 .pv-photo { height: 260px; background-position: center 55%; }
@media (max-width: 640px) { body.f-blocks-1 .pv-photo { height: 190px; } }
/* desktop: never crop the scene sideways; fit to width, sit on the bottom, extend the sky above */
@media (min-width: 641px) {
  body.f-photos-heroes .hero.photo .ph, body.f-photos-heroes .phero.photo .ph { background: #c4e7fc; }
  body.f-photos-heroes .hero.photo .ph img, body.f-photos-heroes .phero.photo .ph img { object-fit: contain; object-position: 100% 100%; }
}

/* ======== skin.css ======== */
/* KeelOps "serious skin" (owner 10-29: keep the layout, change the styling). Loaded LAST. Font URLs resolve relative to this file: fonts/. */
@font-face { font-family: "KS Head"; font-weight: 400 800; font-display: swap; src: url(/fonts/HostGrotesk.woff2) format("woff2"); }
@font-face { font-family: "KS Mono"; font-weight: 400 600; font-display: swap; src: url(/fonts/AzeretMono.woff2) format("woff2"); }
:root { --ks-ink: #16171c; --ks-mut: #5f5a53; --ks-line: #e2ded8; --ks-paper: #faf8f5; --ks-yellow: #FFD400; }
body, p, li, input, select, textarea, button, a, td, th, label, summary, .lede, .prose { font-family: "KS Head", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif !important; }
body { color: var(--ks-ink); font-size: 17.5px; line-height: 1.55; }
h1, h2, h3, h4, .h1, .h2 { font-family: "KS Head", Helvetica, Arial, sans-serif !important; font-weight: 700 !important; letter-spacing: -0.02em !important; text-transform: none !important; font-style: normal !important; color: var(--ks-ink); }
h1 { line-height: 1.04 !important; }
.eyebrow, .kicker, .label, .tag, .mh, .ch, .wb-label, [class*="eyebrow"] { font-family: "KS Mono", ui-monospace, Menlo, monospace !important; font-weight: 500 !important; font-size: 12px !important; letter-spacing: .08em !important; text-transform: uppercase !important; }
code, .mono, .num, [class*="mono"] { font-family: "KS Mono", ui-monospace, Menlo, monospace !important; }
/* header + announcement */
.top .bar { background: #fff !important; border: 1px solid var(--ks-line) !important; border-radius: 14px !important; box-shadow: 0 8px 24px rgba(0,0,0,.06) !important; outline: none !important; filter: none !important; }
.announce { background: var(--ks-ink) !important; color: rgba(255,255,255,.88) !important; border: 0 !important; }
.announce b { color: #fff !important; } .announce a { color: var(--ks-yellow) !important; }
.announce .tag { background: var(--ks-yellow) !important; color: var(--ks-ink) !important; border: 0 !important; border-radius: 4px !important; }
/* buttons */
.btn, a.btn, button.btn { border-radius: 10px !important; box-shadow: none !important; filter: none !important; transform: none !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; }
.btn.primary, .btn-primary { background: var(--ks-yellow) !important; color: var(--ks-ink) !important; border: 1px solid var(--ks-yellow) !important; }
.btn.dark { background: var(--ks-ink) !important; color: #fff !important; border: 1px solid var(--ks-ink) !important; }
.btn.ghost, .btn.secondary, .btn.line, .btn.outline { background: #fff !important; color: var(--ks-ink) !important; border: 1px solid rgba(22,23,28,.18) !important; }
.btn::before, .btn::after { display: none !important; }
/* the single yellow mark: a clean straight band on the headline phrase */
h1 mark, h1 .hl, h1 .marker, h1 em, h1 .yl, h1 .y { background: linear-gradient(transparent 58%, var(--ks-yellow) 58%, var(--ks-yellow) 90%, transparent 90%) !important; color: inherit !important; padding: 0 .06em !important; border: 0 !important; box-shadow: none !important; font-style: normal !important; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
h1 mark::before, h1 mark::after, h1 .hl::before, h1 .hl::after, h1 .marker::before, h1 .marker::after { display: none !important; }
/* decode animation off: always show final text */
[data-decode], .decode { animation: none !important; }

/* ======== fix-E.css ======== */
/* ---- shared fixes ---- */
/* body copy at 17px (brief range 17-18) with a hair of tracking so Host Grotesk sets the same line breaks as the old face */
html body { font-size: 17px; line-height: 1.62; }
body p, body li, body .lede, body td, body summary, body dd { letter-spacing: -0.012em; }
@media (max-width: 640px) { html body { line-height: 1.6; } body p, body li, body .lede, body td, body summary, body dd { letter-spacing: -0.015em; } }
/* logo wordmarks in the "works with" bar keep their narrow face (they are logos, not copy) */
html body .wb-track li { font-family: 'Archivo Narrow', 'KS Head', sans-serif !important; letter-spacing: .01em; }
/* links: plain ink underline, no yellow marker underline */
body .textlink, body .announce a { text-decoration-color: rgb(22 23 28 / .35) !important; text-decoration-thickness: 1px !important; text-decoration-style: solid !important; }
body .announce a { text-decoration-color: rgb(255 212 0 / .6) !important; }
body .dark .textlink { color: var(--ks-ink); }

/* ---- E (comic): drawn ink frames become quiet 1px lines; same boxes ---- */
/* the one yellow mark: straight band on "that nobody uses?" instead of the loop */
body .hero.photo h1 span { background: linear-gradient(transparent 58%, var(--ks-yellow) 58%, var(--ks-yellow) 90%, transparent 90%) !important; padding: 0 .12em; }
body .hero.photo .lede, body .phero .lede { background: rgb(255 255 255 / .9); border: 1px solid var(--ks-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); padding: 15px 19px; }
html body .btn.glass { background: #fff !important; color: var(--ks-ink) !important; border: 1px solid rgba(22,23,28,.18) !important; }
html body .btn.primary { border-width: 2px !important; }
html body .btn.glass { border-width: 2px !important; border-color: rgba(22,23,28,.14) !important; }
body.f-style-2 .announce { border-bottom: 0; }
body .strip { border-bottom: 1px solid var(--ks-line); }
body.f-photos-heroes .hero.photo, body.f-photos-heroes .phero.photo { border-bottom: 1px solid var(--ks-line); }
body.f-photos-heroes .hero .meta span, body.f-photos-heroes .hero .meta { color: var(--ks-ink); }
body.f-blocks-1 .pv-photo { border-bottom: 1px solid var(--ks-line); }
body.f-blocks-1 .sw-panels [role=tabpanel] { border: 1px solid var(--ks-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); overflow: hidden; }
body section.k.dark { border-top: 1px solid var(--ks-line); border-bottom: 1px solid var(--ks-line); }
body .dark .card, body .card { border: 1px solid var(--ks-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
body.f-photos-heroes .factrow { border-top: 1px solid var(--ks-line); }
body .upsell { border-bottom: 1px solid var(--ks-line); }
/* closing band: calm paper into sky, yellow stays on the button only */
body.f-style-7 .endmesh { background: linear-gradient(180deg, var(--ks-paper) 0%, var(--ks-paper) 55%, #eef5fa 100%); border-top: 1px solid var(--ks-line); }
body.f-style-7 .endmesh h2, body.f-style-7 .endmesh p { color: var(--ks-ink); }
@media (max-width: 640px) {
  body.f-photos-heroes .hero.photo .ph, body.f-photos-heroes .phero.photo .ph { border-bottom: 1px solid var(--ks-line); }
  body .hero.photo .lede, body .phero .lede { background: none; border: 0; box-shadow: none; padding: 0; }
}
/* footer: link columns keep the original wraps */
html body footer li, html body footer p { letter-spacing: .004em; }
/* /backups headline: hold its original four lines at 1440 */
html body .phero h1 { letter-spacing: -0.012em !important; }
/* finding line: Azeret Mono runs wider than the old mono; keep it on one line */
body .mono-line { font-size: 14px !important; letter-spacing: -0.01em; }
/* short list lines in the narrow "what we read" columns keep their single line */
body .sa-g ul li { letter-spacing: -0.02em; }
@media (max-width: 640px) { body .scope-l ul.ticks li { letter-spacing: -0.03em; } }
@media (max-width: 640px) { body .diy ul.ticks li { letter-spacing: -0.03em; } }
/* plan table column heads: mono label instead of the old narrow face, sized so the columns keep their widths */
html body .tbl thead th { font-family: "KS Mono", ui-monospace, monospace !important; font-weight: 500; font-size: 12px; letter-spacing: .04em; }
@media (max-width: 640px) { html body .tbl thead th { font-size: 11.5px; letter-spacing: 0; } }
/* readability: the proof line sits on the cobbles/bill art; a soft white chip behind each item (box-shadow, no layout change) */
@media (min-width: 641px) {
  body.f-photos-heroes .hero .meta span, body.f-photos-heroes .phero .factrow span { background: rgb(255 255 255 / .86); box-shadow: 0 0 0 5px rgb(255 255 255 / .86); border-radius: 4px; }
  body .hero.photo .eyebrow { text-shadow: 0 0 8px rgb(255 255 255 / .9); }
}
/* service upsell strip: paper instead of pale yellow (yellow stays an accent) */
body.f-streamline .upsell { background: var(--ks-paper); border-color: var(--ks-line); }

/* ======== buildout-E.css ======== */
/* Build-out E (10-29): credentials as a calm trust panel next to the form, Ask AI under the form.
   Loaded after comic.css + skin.css + fix-E.css. */

/* ---- review frame ---- */
body #review .frame.split { align-items: stretch; }
body #review .formcol { display: flex; flex-direction: column; gap: 0; min-width: 0; }

/* ---- trust panel (credentials) ---- */
body .trustpanel { background: var(--ks-paper); border: 1px solid var(--ks-line); border-radius: 14px; padding: 22px 22px 6px; margin-top: 34px; }
body .trustpanel .tp-in { display: block; padding: 0; max-width: none; }
body .trustpanel .grp { margin: 0 0 18px; }
body .trustpanel .grp + .grp { border-top: 1px solid var(--ks-line); padding-top: 16px; }
body .trustpanel .grp > p { font-family: "KS Mono", ui-monospace, Menlo, monospace !important; font-weight: 500; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ks-mut); margin: 0 0 12px; }
body .trustpanel .credgrid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 0; padding: 0; list-style: none; }
/* one height for every mark, width follows the image: one shared baseline, no tile sizes */
body .trustpanel .credgrid li, body .trustpanel .credgrid li.partner-gcp, body .trustpanel .credgrid li.partner-ms, body .trustpanel .credgrid li.finops-prem { width: auto; max-width: none; }
body .trustpanel .credgrid .badge { width: auto; }
body .trustpanel .credgrid .badge img { width: auto; height: 46px; filter: grayscale(1) contrast(.92); opacity: .78; transition: filter .2s ease, opacity .2s ease; }
body .trustpanel .credgrid .badge.partner img, body .trustpanel .credgrid .badge.audit img { height: 38px; }
body .trustpanel .credgrid li.partner-ms .badge img { height: 26px; }
body .trustpanel .credgrid li.finops-prem .badge img { height: 32px; }
body .trustpanel .credgrid li:hover .badge img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { body .trustpanel .credgrid .badge img { transition: none; } }

/* ---- Ask AI row under the form ---- */
body .askrow { background: none; color: var(--ks-ink); padding: 0; margin-top: 26px; border-top: 1px solid var(--ks-line); padding-top: 22px; }
body .askrow .ar-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
body .askrow p { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ks-ink); }
body .askrow .ar-in > div > span { display: block; margin-top: 4px; max-width: 34ch; font-size: 13.5px; line-height: 1.45; color: var(--ks-mut); }
body .askrow ul { flex: none; display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
body .askrow a { width: 40px; height: 40px; border: 1px solid var(--ks-line); border-radius: 10px; background: #fff; color: var(--ks-ink); }
body .askrow a svg { width: 18px; height: 18px; }
body .askrow a:hover, body .askrow a:focus-visible { border-color: var(--ks-ink); color: var(--ks-ink); background: var(--ks-yellow); }

@media (max-width: 960px) {
  body .askrow .ar-in { flex-direction: column; align-items: flex-start; gap: 14px; }
}
/* mobile: pitch, form, Ask AI, then the credentials (the doubting reader scrolls past the form) */
@media (max-width: 900px) {
  body #review .frame.split { display: flex; flex-direction: column; gap: 0; }
  body #review .frame.split > div:first-child { display: contents; }
  body #review .formcol { order: 1; margin-top: 32px; }
  body .trustpanel { order: 2; margin-top: 32px; }
}
@media (max-width: 640px) {
  body .trustpanel { padding: 18px 16px 4px; }
  body .trustpanel .credgrid { gap: 12px 14px; }
  body .trustpanel .credgrid .badge img { height: 40px; }
  body .trustpanel .credgrid .badge.partner img, body .trustpanel .credgrid .badge.audit img { height: 34px; }
  body .trustpanel .credgrid li.partner-ms .badge img { height: 24px; }
  body .trustpanel .credgrid li.finops-prem .badge img { height: 30px; }
  body .askrow ul { gap: 8px; }
  body .askrow a { width: 44px; height: 44px; }
}

/* ---- tuning after the first screenshots ---- */
/* partners: AWS marks on row one, Google / Microsoft / FinOps on row two (a zero-height flex break) */
body .trustpanel .grp:nth-child(2) .credgrid { row-gap: 6px; }
body .trustpanel .grp:nth-child(2) .credgrid li { order: 1; }
body .trustpanel .grp:nth-child(2) .credgrid::after { content: ""; flex-basis: 100%; height: 0; order: 2; }
body .trustpanel .grp:nth-child(2) .credgrid li.partner-gcp, body .trustpanel .grp:nth-child(2) .credgrid li.partner-ms,
body .trustpanel .grp:nth-child(2) .credgrid li.finops-plat, body .trustpanel .grp:nth-child(2) .credgrid li.finops-prem { order: 3; }
body .trustpanel .credgrid .badge img { opacity: .82; }
/* desktop: Ask AI sits on the panel's bottom line, both columns end together */
@media (min-width: 901px) { body .askrow { margin-top: auto; } body #review .formcol .leadform { margin-bottom: 34px; } }
@media (max-width: 640px) {
  body .trustpanel .grp:nth-child(1) .credgrid { gap: 10px; }
  body .trustpanel .grp:nth-child(1) .credgrid .badge img { height: 36px; }
}

/* ======== art-E.css ======== */
/* Build-out E round 2 (10-29): ligne claire art through the page. Loaded last.
   Art is decorative (alt="", aria-hidden). No text ever sits on it. */
body .art { display: block; height: auto; max-width: 100%; user-select: none; pointer-events: none; }


/* ---- how it works: the strip sits over the four columns, one vignette per column ---- */
body .steps-art { width: 100%; margin: 28px auto -6px; mix-blend-mode: multiply; }
body #how-the-check-works .stp-m { display: none; }
@media (max-width: 860px) {
  body .steps-art { display: none; }
  body #how-the-check-works .stp-m { display: block; width: 100%; max-width: 260px; margin: -6px 0 8px; mix-blend-mode: multiply; }
}

/* ---- fee: coins split three to one, under the buttons ---- */
body .fee-art { width: 100%; max-width: 420px; margin: 34px 0 0; mix-blend-mode: multiply; }

/* ---- scope: read through the window, touch nothing ---- */
body .scope-art { width: 100%; max-width: 400px; margin: 30px 0 0; mix-blend-mode: multiply; }

/* ---- FAQ side ---- */
body .faq-art { width: 100%; max-width: 300px; margin: 30px 0 0; mix-blend-mode: multiply; }


/* ---- the world carries down: sky / paper bands, an ink horizon line between them ---- */
:root { --e-sky: #eef5fa; --e-paper: #faf8f5; --e-horizon: 1.5px solid #16171c; }
body section.k { border-top: var(--e-horizon); }
body section.k#what-we-usually-find-on-an-aws-bill { background: var(--e-sky); }
body section.k#how-the-check-works { background: var(--e-paper); }
body section.k#fee { background: var(--e-sky); }
body section.k#scope { background: var(--e-paper); }
body section.k#questions-about-the-bill-check { background: var(--e-sky); }
body section.k#review { border-top: var(--e-horizon); }
body footer.big { border-top: var(--e-horizon); }
/* flat UI keeps white surfaces on the bands */
body .sw-panels [role=tabpanel], body .fee-card, body .sa-list .sa, body .nfaq details { background: #fff; }

/* steps: the drawn vignettes are the markers, the UI node icons and track go */
body #how-the-check-works .pp-node, body #how-the-check-works .pp-track { display: none; }
body .steps-art { mix-blend-mode: normal; margin: 24px auto 18px; }
body #how-the-check-works .pipe { margin-top: 0; }
@media (max-width: 860px) {
  body #how-the-check-works .pipe li { grid-template-columns: 1fr; gap: 0; }
  body #how-the-check-works .stp-m { mix-blend-mode: normal; max-width: 170px; margin: 0 0 4px; }
}
body .fee-art, body .scope-art, body .faq-art { mix-blend-mode: normal; }

/* ======== site-wide layer (port to the real site, 10-29) ======== */
/* bands on every page: sky by default, paper on .paper, the ink horizon line between them */
body section.k { background: var(--e-sky); }
body section.k.paper { background: var(--e-paper); }
body section.k#review, body .cx-trust { background: #d1e8f3; }
body.f-style-7 .endmesh { background: linear-gradient(180deg, var(--e-paper) 0%, var(--e-paper) 55%, #d1e8f3 100%); border-top: var(--e-horizon); }
body .cx-art { display: block; height: auto; max-width: 100%; user-select: none; pointer-events: none; }

/* every page ends on the quay; its sea runs into the footer */
body .cx-quay { background: #d1e8f3; line-height: 0; }
body .cx-quay img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { body .cx-quay img { height: 190px; object-fit: cover; object-position: 78% 50%; } }
body footer.big { border-top: var(--e-horizon); }

/* trust strip (pages without the form): badges panel + Ask AI side by side */
body .cx-trust { border-top: var(--e-horizon); padding: 56px 0 48px; }
body .cx-trust .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }
body .cx-trust .trustpanel { margin-top: 0; background: #fff; }
body .cx-trust .askrow { margin-top: 0; border-top: 0; padding-top: 6px; }
body .cx-trust .askrow .ar-in { flex-direction: column; align-items: flex-start; gap: 16px; }
@media (max-width: 900px) { body .cx-trust .wrap { grid-template-columns: 1fr; gap: 28px; } body .cx-trust { padding: 40px 0 32px; } }

/* heroes: spot drawings sit on the sky to the right of the headline (desktop), in a sky band on top (mobile) */
body.f-photos-heroes .phero.photo .ph.cx-spot, body.f-photos-heroes .hero.photo .ph.cx-spot { background: var(--e-sky); }
body.f-photos-heroes .phero.photo .ph.cx-spot::after, body.f-photos-heroes .hero.photo .ph.cx-spot::after { background: none; }
@media (min-width: 641px) {
  body.f-photos-heroes .phero.photo .ph.cx-spot img, body.f-photos-heroes .hero.photo .ph.cx-spot img {
    object-fit: contain; object-position: 50% 62%; box-sizing: border-box; padding: 120px 5vw 30px 52vw; }
  body.f-photos-heroes .phero.photo .ph.cx-steps-strip img { padding: 140px 3vw 40px 50vw; }
}
@media (max-width: 640px) {
  body.f-photos-heroes .phero.photo .ph.cx-spot img, body.f-photos-heroes .hero.photo .ph.cx-spot img {
    object-fit: contain; object-position: 50% 60%; box-sizing: border-box; padding: 76px 16px 12px; }
}
/* the review page (ad landing): form card over the harbour */
body .phero.lp.photo .formcard { position: relative; z-index: 1; }
/* scene heroes: the sky above a contained scene continues in the scene's own top colour */
@media (min-width: 641px) {
  body.f-photos-heroes .ph.cx-band-quay { background: #d1e7f5; }
  body.f-photos-heroes .ph.cx-H-launch { background: #b2dffb; }
  body.f-photos-heroes .ph.cx-H-monitor { background: #bfe4fb; }
  body.f-photos-heroes .ph.cx-H-move { background: #c6e6fa; }
  body.f-photos-heroes .ph.cx-H-security { background: #bfe4fc; }
  body.f-photos-heroes .ph.cx-H-slipway { background: #b3dff9; }
  body.f-photos-heroes .ph.cx-H-tide { background: #c2e6f9; }
}

/* plain heroes without art (privacy, 404): sky, ink text (the live ones are ink-dark) */
body .phero:not(.photo) { background: var(--e-sky); color: var(--ks-ink); border-bottom: var(--e-horizon); }
body .phero:not(.photo) h1, body .phero:not(.photo) .eyebrow { color: var(--ks-ink); }
body .phero:not(.photo) .lede, body .phero:not(.photo) p { color: #3d3a36; }
body .phero:not(.photo) .crumbs ol, body .phero:not(.photo) .crumbs a { color: var(--ks-mut); }

/* the review landing page: harbour hero, the form card on the sky (no dark wash) */
body.f-photos-heroes .phero.photo.lp { background: var(--sky); color: var(--ks-ink); }
body.f-photos-heroes .phero.photo.lp .ph::after { background: linear-gradient(90deg, rgb(220 235 245 / .55) 0%, rgb(220 235 245 / .25) 36%, rgb(220 235 245 / 0) 52%); }
body .phero.lp h1, body .phero.lp .eyebrow, body .phero.lp .qual { color: var(--ks-ink); }
body .phero.lp .ticks { color: var(--ks-ink); }
body .phero.lp .ticks li { background: rgb(255 255 255 / .88); box-shadow: 0 0 0 5px rgb(255 255 255 / .88); border-radius: 4px; width: fit-content; }
body .phero.lp .lede { color: var(--ks-ink); background: rgb(255 255 255 / .9); border: 1px solid var(--ks-line); border-radius: 14px; padding: 15px 19px; }
body .phero.lp .formcard { box-shadow: 0 12px 40px rgb(22 23 28 / .1); }
@media (max-width: 640px) {
  body.f-photos-heroes .phero.photo.lp { padding-top: 320px; background: #fff; }
  body.f-photos-heroes .phero.photo.lp .ph { bottom: auto; height: 290px; }
  body.f-photos-heroes .phero.photo.lp .ph::after { background: none; }
  body .phero.lp .lede { background: none; border: 0; padding: 0; }
  body .phero.lp .ticks li { background: none; box-shadow: none; }
}

/* page scenes (not the approved home harbour): the scene sits right, its left edge dissolves into its own sky,
   so the headline column stays on calm sky on every scene */
@media (min-width: 900px) {
  body.f-photos-heroes .phero.photo .ph.cx-scene:not(.cx-hero-harbour):not(.cx-band-quay) img {
    display: block; margin-left: auto; width: 64%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
}

/* owner 10-29: no box, panel or pill behind any hero text. Lede, proof line, ticks sit straight on the calm sky. */
html body .hero.photo .lede, html body .phero .lede, html body .phero.lp .lede {
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
html body.f-photos-heroes .hero .meta span, html body.f-photos-heroes .phero .factrow span, html body .phero.lp .ticks li {
  background: none !important; box-shadow: none !important; border-radius: 0 !important; }
html body .hero.photo .eyebrow { text-shadow: none !important; }
html body .hero.photo .lede, html body .phero .lede { color: var(--ks-ink) !important; font-weight: 500; }
/* so the text always has calm sky under it: every scene (home harbour and quay too) sits right and dissolves into its sky */
@media (min-width: 900px) {
  body.f-photos-heroes .hero.photo .ph.cx-scene img, body.f-photos-heroes .phero.photo .ph.cx-scene img {
    display: block; margin-left: auto; width: 64%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
  body.f-photos-heroes .hero.photo .ph::after, body.f-photos-heroes .phero.photo .ph::after { background: none !important; }
}
/* guide heroes: the reading-time line next to "Print this guide" (live: white on the dark photo) */
html body .phero .guidetools span, html body .phero .guidetools { color: var(--ks-mut) !important; }

/* steps: one set of drawings per width. The site-wide .cx-art display rule above must not bring the strip back on phones. */
@media (max-width: 860px) { body #how-the-check-works .steps-art { display: none; } }

/* ---- certificates in the footer (owner 10-29): one calm row above the legal line, Guides column gone ---- */
body footer .cols { grid-template-columns: 2fr 1.2fr 1.2fr; }
body footer .fcreds { background: none; display: grid; grid-template-columns: auto auto auto; justify-content: space-between; gap: 24px 40px;
  border-top: 1px solid rgba(255,255,255,.14); padding: 32px 0 8px; }
body footer .fcreds .tp-in { display: contents; }
body footer .fcreds .grp { margin: 0; }
body footer .fcreds .grp > p { font-family: "KS Mono", ui-monospace, Menlo, monospace !important; font-weight: 500; font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.62); margin: 0 0 14px; }
body footer .fcreds .credgrid { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; padding: 0; list-style: none; }
body footer .fcreds .credgrid li { width: auto; margin: 0; padding: 0; }
body footer .fcreds .credgrid .badge { width: auto; }
body footer .fcreds .credgrid .badge img { display: block; width: auto; height: 40px; filter: grayscale(1); opacity: .72; transition: filter .2s, opacity .2s; }
body footer .fcreds .credgrid .badge.partner img, body footer .fcreds .credgrid .badge.audit img { height: 34px; }
body footer .fcreds .credgrid li.partner-ms .badge img { height: 22px; }
body footer .fcreds .credgrid li.finops-prem .badge img { height: 28px; }
body footer .fcreds .credgrid li:hover .badge img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { body footer .fcreds .credgrid .badge img { transition: none; } }
@media (max-width: 1100px) { body footer .fcreds { grid-template-columns: 1fr; } }
@media (max-width: 900px) { body footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { body footer .cols { grid-template-columns: 1fr; } body footer .fcreds .credgrid .badge img { height: 34px; } }

/* ---- Ask AI: its own section above the footer on every page (owner 10-29) ---- */
body .cx-trust .wrap { display: block; }
body .cx-trust .askrow { padding-top: 0; }
body .cx-trust .askrow .ar-in { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
body .cx-trust .askrow p { font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; letter-spacing: -0.02em; }
body .cx-trust .askrow .ar-in > div > span { margin-top: 8px; max-width: 46ch; font-size: 16px; line-height: 1.5; }
body .cx-trust .askrow ul { gap: 10px; }
body .cx-trust .askrow a { width: 56px; height: 56px; border-radius: 14px; }
body .cx-trust .askrow a svg { width: 24px; height: 24px; }
@media (max-width: 760px) {
  body .cx-trust .askrow .ar-in { flex-direction: column; align-items: flex-start; gap: 20px; }
  body .cx-trust .askrow ul { gap: 8px; }
  body .cx-trust .askrow a { width: 52px; height: 52px; }
}

/* footer: the name, explained (owner 10-29) */
body footer .cols > div:first-child p.keel { color: #fff; font-size: 17px; line-height: 1.5; margin-bottom: 10px; }

/* Ask AI at the top of the footer, in place of the checklist block (owner 10-29) */
body footer .fask { margin: 0; padding: 40px 0 36px; border-top: 0; border-bottom: 1px solid rgba(255,255,255,.14); background: none; }
body footer .fask .ar-in { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
body footer .fask p { color: #fff; font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
body footer .fask .ar-in > div > span { display: block; margin-top: 8px; max-width: 46ch; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.66); }
body footer .fask ul { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; flex: none; }
body footer .fask a { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: #fff; border: 1px solid #fff; color: var(--ks-ink); }
body footer .fask a svg { width: 24px; height: 24px; }
body footer .fask a:hover, body footer .fask a:focus-visible { background: var(--ks-yellow); border-color: var(--ks-yellow); }
@media (max-width: 760px) { body footer .fask .ar-in { flex-direction: column; align-items: flex-start; gap: 20px; } body footer .fask ul { gap: 8px; } body footer .fask a { width: 52px; height: 52px; } }

/* home hero: cap the height so tall screens don't stretch the scene (owner 10-29) */
@media (min-width: 901px) {
  body.f-photos-heroes .hero.photo { min-height: min(90vh, 760px); max-height: 860px; }
}