/* ComputeCloud brand stylesheet: tokens + components.
   Source: ComputeCloud design system v3 (Azure blue + clouds) and the approved website mockups.
   Fonts: self-host Manrope (SIL OFL) as a variable woff2 at the path below. */

@font-face { font-family: Manrope; src: url("/fonts/manrope-latin-wght.woff2") format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap; }

/* ---------- Tokens (light) ---------- */
:root {
  --azure: #0078D4;
  --azure-strong: #005A9E;
  --azure-soft: #3A96DD;
  --deep: #004578;
  --panel: #004578;
  --sky: #50E6FF;
  --sky-strong: #3DDCF7;
  --on-sky: #04263F;
  --cta: #0078D4;
  --cta-strong: #005A9E;
  --on-cta: #FFFFFF;
  --highlight: #C2F3FF;
  --on-panel: #FFFFFF;
  --on-panel-muted: #BFD7EE;
  --ink: #0B1F33;
  --slate: #44586E;
  --muted: #56677B;
  --emphasis: #0078D4;
  --link: #005A9E;
  --surface: #FFFFFF;
  --surface-alt: #EEF6FD;
  --mist: #C7E0F4;
  --line: #D3E2EF;
  --focus: #0078D4;
  --error: #B42318;
  --success: #107C41;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-18: 72px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 40px;
  --radius-pill: 999px;
  --page-max: 1200px;
  --measure: 70ch;
  --header-height: 72px;
  --shadow-cloud: 0 16px 40px #0045781F;
  --shadow-lift: 0 6px 16px #00457826;
  --font-display: Manrope, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
}

body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 27px; color: var(--ink); background: var(--surface); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cc-link { color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.cc-link:hover { text-decoration-thickness: 3px; }

/* Blue contexts: anything on deep, panel or the hero gradient. Re-points page tokens so components inside adapt. */
.cc-panel, .cc-hero, .cc-band { color: var(--on-panel); --ink: var(--on-panel); --slate: var(--on-panel-muted); --emphasis: var(--sky); --link: var(--sky); --focus: var(--sky); --cta: var(--sky); --cta-strong: var(--sky-strong); --on-cta: var(--on-sky); --line: #FFFFFF33; }
.cc-panel { background: var(--panel); }
.cc-hero { --slate: var(--on-panel); }

/* ---------- Icons (inline SVG, 24px grid) ---------- */
.cc-icon { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cc-icon-chip { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--surface-alt); color: var(--emphasis); }

/* ---------- Button ---------- */
.cc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box; min-height: 48px; padding: 0 var(--space-6); border: 2px solid transparent; border-radius: var(--radius-pill); font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.1; text-decoration: none; white-space: nowrap; cursor: pointer; }
.cc-btn--primary { background: var(--cta); border-color: var(--cta); color: var(--on-cta); }
.cc-btn--primary:hover { background: var(--cta-strong); border-color: var(--cta-strong); }
.cc-btn--secondary { background: transparent; border-color: var(--ink); color: var(--ink); }
.cc-btn--secondary:hover { background: var(--surface-alt); }
.cc-panel .cc-btn--secondary:hover, .cc-hero .cc-btn--secondary:hover { background: #FFFFFF1F; }
.cc-btn--small { min-height: 44px; padding: 0 var(--space-4); font-size: 15px; }
.cc-btn:disabled, .cc-btn[aria-disabled="true"] { background: var(--surface-alt); border-color: var(--line); color: var(--muted); cursor: not-allowed; }

/* ---------- Highlight and plate ---------- */
.cc-mark { padding: 0.05em 0.25em; border-radius: 4px; background: var(--highlight); color: var(--on-sky); font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cc-plate { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--cta); color: var(--on-cta); font-family: var(--font-display); font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cc-plate--outline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--emphasis); color: var(--ink); }

/* ---------- Cloud elements ---------- */
.cc-cloud-edge { display: block; height: 48px; background: var(--edge, var(--surface));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 48'%3E%3Ccircle cx='20' cy='36' r='20'/%3E%3Ccircle cx='56' cy='28' r='26'/%3E%3Ccircle cx='100' cy='33' r='22'/%3E%3Ccircle cx='142' cy='26' r='26'/%3E%3Ccircle cx='186' cy='33' r='22'/%3E%3Ccircle cx='222' cy='37' r='17'/%3E%3Crect y='36' width='240' height='12'/%3E%3C/svg%3E") repeat-x left bottom / 240px 48px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 48'%3E%3Ccircle cx='20' cy='36' r='20'/%3E%3Ccircle cx='56' cy='28' r='26'/%3E%3Ccircle cx='100' cy='33' r='22'/%3E%3Ccircle cx='142' cy='26' r='26'/%3E%3Ccircle cx='186' cy='33' r='22'/%3E%3Ccircle cx='222' cy='37' r='17'/%3E%3Crect y='36' width='240' height='12'/%3E%3C/svg%3E") repeat-x left bottom / 240px 48px; }
.cc-cloud { display: block; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .cc-cloud--drift { animation: cc-drift 14s ease-in-out infinite alternate; } }
@keyframes cc-drift { from { transform: translate3d(-8px, 0, 0); } to { transform: translate3d(8px, -6px, 0); } }

/* ---------- Hero ---------- */
.cc-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--deep) 0%, var(--azure) 62%, var(--azure-soft) 100%); }
.cc-hero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: var(--space-10); max-width: var(--page-max); margin: 0 auto; padding: var(--space-10) var(--space-6) calc(var(--space-18) + 48px); }
.cc-hero__title { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: 56px; font-weight: 700; line-height: 62px; letter-spacing: -0.025em; color: var(--on-panel); }
.cc-hero__lede { margin: 0 0 var(--space-8); max-width: 34em; font-size: 20px; line-height: 30px; color: var(--on-panel); }
.cc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cc-hero__note { margin: var(--space-6) 0 0; font-size: 14px; line-height: 21px; color: var(--on-panel); }
.cc-hero__art { position: relative; min-width: 0; }
.cc-hero__art > svg, .cc-hero__art > img { display: block; width: 100%; height: auto; }
.cc-hero .cc-cloud-edge { position: absolute; left: 0; right: 0; bottom: -1px; }
@media (max-width: 860px) { .cc-hero__inner { grid-template-columns: 1fr; padding-bottom: calc(var(--space-10) + 48px); } .cc-hero__title { font-size: 38px; line-height: 44px; } .cc-hero__art { max-width: 420px; } }

/* ---------- Short answer ---------- */
.cc-answer { box-sizing: border-box; max-width: var(--measure); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-alt); }
.cc-answer--float { position: relative; z-index: 1; max-width: 880px; margin: calc(-1 * var(--space-18)) auto 0; padding: var(--space-8); background: var(--surface); box-shadow: var(--shadow-cloud); }
.cc-answer__title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 26px; color: var(--ink); }
.cc-answer__title .cc-icon { color: var(--emphasis); }
.cc-answer__list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.cc-answer__list li { position: relative; padding-left: 28px; font-size: 17px; line-height: 27px; color: var(--ink); }
.cc-answer__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 13px; background: var(--emphasis);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M4.5 12h7.5a3.5 3.5 0 0 0 .4-6.98A4.5 4.5 0 0 0 3.8 4.6 3.7 3.7 0 0 0 4.5 12z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M4.5 12h7.5a3.5 3.5 0 0 0 .4-6.98A4.5 4.5 0 0 0 3.8 4.6 3.7 3.7 0 0 0 4.5 12z'/%3E%3C/svg%3E") no-repeat center / contain; }

/* ---------- Key facts ---------- */
.cc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.cc-facts__item { margin: 0; padding: var(--space-4) var(--space-6); background: var(--surface); }
.cc-facts dt { margin: 0 0 var(--space-1); font-size: 14px; line-height: 21px; color: var(--muted); }
.cc-facts dd { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 28px; letter-spacing: -0.01em; color: var(--ink); }

/* ---------- FAQ ---------- */
.cc-faq { max-width: var(--measure); border-top: 1px solid var(--line); }
.cc-faq__item { border-bottom: 1px solid var(--line); }
.cc-faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 44px; padding: var(--space-4) 0; list-style: none; cursor: pointer; font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 26px; color: var(--ink); }
.cc-faq__q::-webkit-details-marker { display: none; }
.cc-faq__icon { flex: none; width: 20px; height: 20px; color: var(--emphasis); }
.cc-faq__item[open] .cc-faq__icon { transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) { .cc-faq__icon { transition: transform 0.15s ease; } }
.cc-faq__a { padding: 0 var(--space-10) var(--space-4) 0; font-size: 17px; line-height: 27px; color: var(--ink); }
.cc-faq__a p { margin: 0 0 var(--space-3); }
.cc-faq__a p:last-child { margin-bottom: 0; }

/* ---------- Card ---------- */
.cc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-6); }
.cc-card { display: flex; flex-direction: column; gap: var(--space-3); box-sizing: border-box; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); text-decoration: none; }
a.cc-card:hover { border-color: var(--emphasis); box-shadow: var(--shadow-lift); }
.cc-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cc-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-size: 14px; line-height: 21px; color: var(--muted); }
.cc-card__title { margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 28px; letter-spacing: -0.01em; color: var(--ink); }
.cc-card__body { margin: 0; font-size: 16px; line-height: 25px; color: var(--slate); }
.cc-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.cc-tag { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--surface-alt); font-size: 14px; line-height: 21px; color: var(--slate); }
.cc-card__more { margin-top: auto; padding-top: var(--space-2); font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* ---------- Table ---------- */
.cc-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.cc-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; color: var(--ink); }
.cc-table caption { padding: var(--space-4) var(--space-6) var(--space-3); text-align: left; caption-side: top; font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 24px; }
.cc-table th { padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--line); background: var(--surface-alt); text-align: left; white-space: nowrap; font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.cc-table td { padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--line); vertical-align: top; }
.cc-table tr:last-child td { border-bottom: 0; }
.cc-table .cc-num { text-align: right; font-variant-numeric: tabular-nums; }
.cc-table .cc-past { color: var(--muted); }

/* ---------- Countdown ---------- */
.cc-countdown { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-6); box-sizing: border-box; padding: var(--space-8); border-radius: var(--radius-lg); }
.cc-countdown__days { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 136px; padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); background: var(--sky); color: var(--on-sky); }
.cc-countdown__num { font-family: var(--font-display); font-size: 64px; font-weight: 800; line-height: 64px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cc-countdown__unit { font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 20px; }
.cc-countdown__text { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.015em; }
.cc-countdown__note { margin: var(--space-2) 0 0; font-size: 15px; line-height: 23px; color: var(--on-panel-muted); }
.cc-countdown__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 560px) { .cc-countdown { grid-template-columns: 1fr; padding: var(--space-6); } .cc-countdown__days { justify-self: start; } }

/* ---------- Form ---------- */
.cc-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-2); margin: 0 0 var(--space-2); padding: 0; list-style: none; }
.cc-steps li { height: 6px; border-radius: 3px; background: var(--line); }
.cc-steps li[data-state="done"], .cc-steps li[data-state="current"] { background: var(--emphasis); }
.cc-steps-label { margin: 0 0 var(--space-6); font-size: 14px; line-height: 21px; color: var(--muted); }
.cc-fieldset { margin: 0 0 var(--space-6); padding: 0; border: 0; min-width: 0; }
.cc-fieldset legend { margin: 0 0 var(--space-1); padding: 0; font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 26px; color: var(--ink); }
.cc-fieldset__hint { margin: 0 0 var(--space-3); font-size: 14px; line-height: 21px; color: var(--muted); }
.cc-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.cc-option { display: flex; align-items: center; gap: var(--space-3); box-sizing: border-box; min-height: 52px; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--slate); border-radius: var(--radius-sm); background: var(--surface); font-size: 16px; line-height: 22px; color: var(--ink); cursor: pointer; }
.cc-option input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--emphasis); }
.cc-option:has(input:checked) { border-color: var(--emphasis); box-shadow: inset 0 0 0 1px var(--emphasis); background: var(--surface-alt); }
.cc-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.cc-option input:focus-visible { outline: none; }
.cc-field { display: grid; gap: var(--space-2); max-width: 480px; margin: 0 0 var(--space-6); }
.cc-field__label { font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 20px; color: var(--ink); }
.cc-field__hint { font-size: 14px; line-height: 21px; color: var(--muted); }
.cc-input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 var(--space-3); border: 1.5px solid var(--slate); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: 17px; }
.cc-input[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.cc-field__error { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 14px; font-weight: 700; line-height: 21px; color: var(--error); }
.cc-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* ---------- Author box ---------- */
.cc-author { display: flex; align-items: flex-start; gap: var(--space-4); box-sizing: border-box; max-width: var(--measure); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.cc-author__photo { flex: none; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--surface-alt); object-fit: cover; font-size: 12px; color: var(--muted); }
.cc-author__name { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 24px; color: var(--ink); }
.cc-author__role { margin: 0 0 var(--space-2); font-size: 15px; line-height: 22px; color: var(--slate); }
.cc-author__bio { margin: 0 0 var(--space-2); font-size: 15px; line-height: 23px; color: var(--ink); }
.cc-author__meta { margin: 0; font-size: 14px; line-height: 21px; color: var(--muted); }

/* ---------- Footer ---------- */
.cc-footer { padding: var(--space-18) var(--space-6) var(--space-8); }
.cc-footer__inner { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-8); max-width: var(--page-max); margin: 0 auto; }
.cc-footer__logo { display: inline-flex; align-items: center; min-height: 44px; }
.cc-footer__logo img { display: block; width: 180px; height: 32px; }
.cc-footer__about { margin: var(--space-4) 0 0; max-width: 32ch; font-size: 15px; line-height: 23px; color: var(--on-panel-muted); }
.cc-footer h2 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 20px; color: var(--on-panel); }
.cc-footer ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.cc-footer a { color: var(--on-panel); font-size: 15px; line-height: 23px; text-decoration: none; }
.cc-footer a:hover { text-decoration: underline; text-decoration-color: var(--sky); text-underline-offset: 4px; }
.cc-footer__legal { max-width: var(--page-max); margin: var(--space-10) auto 0; padding-top: var(--space-6); border-top: 1px solid var(--line); font-size: 14px; line-height: 21px; color: var(--on-panel-muted); }
.cc-footer__legal p { margin: 0 0 var(--space-2); }

/* ---------- Article (prose) ---------- */
.cc-prose { max-width: var(--measure); color: var(--ink); }
.cc-prose h1 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: 36px; font-weight: 700; line-height: 44px; letter-spacing: -0.025em; }
.cc-prose .cc-updated { margin: 0 0 var(--space-4); font-size: 14px; line-height: 21px; color: var(--muted); }
.cc-prose .cc-lede { margin: 0 0 var(--space-6); font-size: 20px; line-height: 30px; color: var(--slate); }
.cc-prose h2 { margin: var(--space-10) 0 var(--space-3); font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.015em; }
.cc-prose h3 { margin: var(--space-6) 0 var(--space-2); font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 26px; }
.cc-prose p, .cc-prose ul, .cc-prose ol { margin: 0 0 var(--space-4); }
.cc-prose ul, .cc-prose ol { padding-left: var(--space-6); }
.cc-prose li { margin-bottom: var(--space-2); }
.cc-prose li::marker { color: var(--emphasis); }
.cc-prose a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.cc-prose a:hover { text-decoration-thickness: 3px; }
@media (max-width: 560px) { .cc-prose h1 { font-size: 30px; line-height: 38px; } }

/* =========================================================
   New in the website redesign (navigation, page heads, blog, posts)
   ========================================================= */

/* White surfaces inside blue sections (nav bars, dropdowns, mobile menu) reset the page tokens.
   Hex values mirror the light tokens because .cc-hero and .cc-panel re-point them. */
.cc-on-white, .cc-nav__bar, .cc-dd__panel, .cc-menu__panel {
  --ink: #0B1F33; --slate: #44586E; --link: #005A9E; --emphasis: #0078D4; --focus: #0078D4;
  --cta: #0078D4; --cta-strong: #005A9E; --on-cta: #FFFFFF; --line: #D3E2EF;
  color: var(--ink);
}
html.cc-menu-open { overflow: hidden; }

/* ---------- Site header: floating bars ---------- */
.cc-site-header { position: relative; z-index: 20; max-width: var(--page-max); margin: 0 auto; padding: var(--space-4) var(--space-6); }
.cc-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.cc-nav__bar { display: flex; align-items: center; gap: var(--space-1); padding: 6px; border-radius: 16px; background: #FFFFFF; box-shadow: var(--shadow-lift); }
.cc-nav__bar--main { gap: var(--space-2); padding-left: 14px; }
.cc-nav__logo { display: inline-flex; align-items: center; min-height: 44px; margin-right: var(--space-2); }
.cc-nav__logo .cc-logo-full { display: block; width: 158px; height: 28px; }
.cc-nav__logo .cc-logo-mark { display: none; width: 44px; height: 44px; }
.cc-nav__desktop { display: flex; align-items: center; gap: 2px; }
.cc-nav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; color: var(--ink); font-family: var(--font-display); font-size: 15px; font-weight: 700; text-decoration: none; }
.cc-nav__link:hover, .cc-nav__link[aria-current="page"] { background: #EEF6FD; }

/* Dropdowns are <details>, so they work without JavaScript; nav.js adds closing behaviour. */
.cc-dd { position: static; }
.cc-dd > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 10px; list-style: none; cursor: pointer; color: var(--ink); font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.cc-dd > summary::-webkit-details-marker { display: none; }
.cc-dd > summary:hover, .cc-dd[open] > summary, .cc-dd--current > summary { background: #EEF6FD; }
.cc-dd > summary svg { flex: none; }
.cc-dd[open] > summary svg { transform: rotate(180deg); }
.cc-dd__panel { position: absolute; top: calc(100% - 4px); left: var(--space-6); display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-2); width: min(800px, calc(100% - 2 * var(--space-6))); box-sizing: border-box; padding: var(--space-2); border-radius: var(--radius-lg); background: #FFFFFF; box-shadow: var(--shadow-cloud); }
.cc-dd__list { display: grid; align-content: start; gap: 2px; margin: 0; padding: var(--space-2); list-style: none; }
.cc-dd__link { display: flex; align-items: flex-start; gap: 14px; padding: var(--space-3); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; }
.cc-dd__link:hover { background: #EEF6FD; }
.cc-dd__link .cc-icon-chip { width: 40px; height: 40px; border-radius: 10px; }
.cc-dd__title { display: block; font-family: var(--font-display); font-size: 16px; line-height: 22px; font-weight: 700; }
.cc-dd__desc { display: block; font-size: 14px; line-height: 20px; color: var(--slate); }
.cc-dd__featured { display: flex; flex-direction: column; padding: var(--space-6); border-radius: 14px; background: var(--deep); color: #FFFFFF; }
.cc-dd__featured-label { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: 14px; line-height: 20px; color: var(--on-panel-muted); }
.cc-dd__featured-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sky); }
.cc-dd__featured a { display: flex; align-items: center; min-height: 44px; color: #FFFFFF; font-family: var(--font-display); font-size: 17px; line-height: 24px; font-weight: 600; text-decoration: none; }
.cc-dd__featured a:hover { text-decoration: underline; text-decoration-color: var(--sky); text-underline-offset: 4px; }
.cc-dd__featured a:focus-visible { outline-color: var(--sky); }
.cc-dd__foot { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); border-top: 1px solid #FFFFFF33; font-size: 14px; line-height: 20px; color: var(--on-panel-muted); }
.cc-dd__foot .cc-plate { background: var(--sky); color: var(--on-sky); }

/* Mobile menu: also a <details>, hidden on desktop */
.cc-menu { display: none; }
.cc-menu > summary { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #EEF6FD; color: #0B1F33; list-style: none; cursor: pointer; }
.cc-menu > summary::-webkit-details-marker { display: none; }
.cc-menu .cc-icon-close, .cc-menu[open] .cc-icon-menu { display: none; }
.cc-menu[open] .cc-icon-close { display: block; }
.cc-menu__panel { position: fixed; top: 84px; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: flex; flex-direction: column; overflow-y: auto; box-sizing: border-box; padding: var(--space-3) 20px 20px; border-radius: var(--radius-lg); background: #FFFFFF; box-shadow: var(--shadow-cloud); }
.cc-menu__section > summary, .cc-menu__link { display: flex; align-items: center; justify-content: space-between; min-height: 60px; color: var(--ink); font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; list-style: none; cursor: pointer; }
.cc-menu__section > summary::-webkit-details-marker { display: none; }
.cc-menu__section > summary svg { color: var(--emphasis); }
.cc-menu__section[open] > summary svg { transform: rotate(90deg); }
.cc-menu__section ul { display: grid; margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.cc-menu__section li a { display: flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 17px; text-decoration: none; }
.cc-menu__secondary { display: flex; gap: var(--space-6); margin: var(--space-3) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--line); list-style: none; }
.cc-menu__secondary a { display: inline-flex; align-items: center; min-height: 44px; color: var(--slate); font-family: var(--font-display); font-size: 17px; font-weight: 600; text-decoration: none; }
.cc-menu__deadline { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; padding: var(--space-4); border-radius: 16px; background: var(--deep); color: #FFFFFF; font-size: 14px; line-height: 20px; }
.cc-menu__deadline .cc-plate { flex: none; background: var(--sky); color: var(--on-sky); }
.cc-menu__cta { margin-top: var(--space-3); width: 100%; min-height: 52px; }
.cc-menu__note { margin: var(--space-3) 0 0; font-size: 13px; line-height: 19px; color: var(--muted); text-align: center; }

@media (max-width: 960px) {
  .cc-site-header { padding: 12px; }
  .cc-nav { padding: 6px 6px 6px 8px; border-radius: 16px; background: #FFFFFF; box-shadow: var(--shadow-lift); }
  .cc-nav__bar { padding: 0; background: none; box-shadow: none; }
  .cc-nav__bar--main { padding-left: 0; }
  .cc-nav__desktop { display: none; }
  .cc-nav__logo { margin-right: 0; }
  .cc-nav__logo .cc-logo-full { display: none; }
  .cc-nav__logo .cc-logo-mark { display: block; }
  .cc-menu { display: block; }
  .cc-nav .cc-btn--small { padding: 0 16px; font-size: 14px; }
}

/* ---------- Page heads (tinted panel with cloud edge) ---------- */
.cc-page-head { position: relative; margin: var(--space-4) var(--space-4) 0; padding-bottom: 104px; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-alt); }
.cc-page-head .cc-cloud-edge { position: absolute; left: 0; right: 0; bottom: -1px; }
.cc-page-head__inner { position: relative; max-width: var(--page-max); margin: 0 auto; padding: var(--space-10) var(--space-6) 0; }
.cc-page-head--center .cc-page-head__inner { max-width: 760px; text-align: center; }
.cc-page-head__cloud { position: absolute; width: 140px; height: auto; pointer-events: none; }
.cc-breadcrumb { margin: 0 0 var(--space-4); font-size: 14px; line-height: 21px; color: var(--muted); }
.cc-breadcrumb a { color: var(--link); }
.cc-breadcrumb [aria-hidden="true"] { margin: 0 6px; }
.cc-page-title { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: clamp(32px, 4vw, 56px); line-height: 1.12; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); }
.cc-page-lede { margin: 0; font-size: 20px; line-height: 30px; color: var(--slate); }
@media (max-width: 640px) {
  .cc-page-head { margin: var(--space-2) var(--space-2) 0; padding-bottom: 72px; border-radius: 28px; }
  .cc-page-head__inner { padding: var(--space-6) 20px 0; }
  .cc-page-head__cloud { display: none; }
  .cc-page-lede { font-size: 17px; line-height: 27px; }
}

/* ---------- Sections ---------- */
.cc-section { max-width: var(--page-max); margin: 96px auto 0; padding: 0 var(--space-6); }
.cc-section__title { margin: 0 0 var(--space-8); font-family: var(--font-display); font-size: clamp(28px, 3vw, 36px); line-height: 1.22; font-weight: 700; letter-spacing: -0.02em; }
@media (max-width: 640px) { .cc-section { margin-top: 48px; padding: 0 var(--space-4); } }

/* ---------- Blog tools: topic chips and search ---------- */
.cc-blog-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); max-width: var(--page-max); margin: var(--space-8) auto 0; padding: 0 var(--space-6); }
.cc-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cc-chip { min-height: 44px; padding: 0 18px; border: 1.5px solid #C2D3E3; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-family: var(--font-display); font-size: 15px; font-weight: 700; cursor: pointer; }
.cc-chip:hover { border-color: var(--deep); }
.cc-chip[aria-pressed="true"] { border-color: var(--deep); background: var(--deep); color: #FFFFFF; }
.cc-search { position: relative; flex: 0 1 320px; }
.cc-search svg { position: absolute; left: 16px; top: 12px; pointer-events: none; }
.cc-search input { display: block; width: 100%; min-height: 44px; box-sizing: border-box; padding: 0 16px 0 46px; border: 1.5px solid var(--slate); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
.cc-blog-empty { margin: var(--space-8) 0 0; color: var(--slate); }
@media (max-width: 640px) {
  .cc-blog-tools { flex-direction: column; align-items: stretch; padding: 0 var(--space-4); }
  .cc-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4) 4px; }
  .cc-chip { flex: none; }
  .cc-search { flex: none; }
}

/* ---------- Post covers (drawn in CSS from front matter; double as OG image designs) ---------- */
.cc-cover { position: relative; aspect-ratio: 16 / 10; container-type: inline-size; border-radius: 24px; overflow: hidden; background: linear-gradient(135deg, var(--deep) 0%, var(--azure) 62%, var(--azure-soft) 100%); color: #FFFFFF; font-family: var(--font-display); }
.cc-cover--deep { background: var(--deep); }
.cc-cover--tint { background: var(--surface-alt); color: var(--deep); }
.cc-cover__cloud { position: absolute; top: 7%; right: 5%; width: 25%; height: auto; }
.cc-cover__status { position: absolute; top: 7%; left: 6%; display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1.5px currentColor; font-size: clamp(12px, 2.6cqw, 15px); font-weight: 700; }
.cc-cover--tint .cc-cover__status { box-shadow: inset 0 0 0 1.5px var(--azure); color: #0B1F33; }
.cc-cover__status--upcoming { background: var(--sky); color: var(--on-sky); box-shadow: none; }
.cc-cover__text { position: absolute; left: 6%; bottom: 7%; }
.cc-cover__label { display: flex; align-items: center; gap: 10px; font-size: clamp(13px, 3.8cqw, 24px); font-weight: 700; color: var(--on-panel-muted); }
.cc-cover--tint .cc-cover__label { color: var(--link); }
.cc-cover__label svg { width: 1.15em; height: 1.15em; }
.cc-cover__big { display: block; font-size: clamp(48px, 22cqw, 132px); line-height: 1; font-weight: 800; letter-spacing: -0.045em; }
.cc-cover__big--long { font-size: clamp(36px, 12.5cqw, 76px); letter-spacing: -0.035em; }

/* ---------- Featured post and post cards ---------- */
.cc-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: center; gap: var(--space-6) 56px; max-width: var(--page-max); margin: var(--space-10) auto 0; padding: 0 var(--space-6); }
.cc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); font-size: 14px; line-height: 20px; color: var(--muted); }
.cc-meta__topic { font-family: var(--font-display); font-weight: 700; color: var(--link); }
.cc-meta .cc-plate { min-height: 26px; }
.cc-featured__title { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: clamp(26px, 3vw, 40px); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.cc-featured__excerpt { margin: 0 0 var(--space-6); font-size: 18px; line-height: 28px; color: var(--slate); }
.cc-featured__title a, .cc-post-card__title a { color: var(--ink); text-decoration: none; }
.cc-featured__title a:hover, .cc-post-card__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cc-post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 56px 40px; }
.cc-post-grid--three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-8); }
.cc-post-card { display: flex; flex-direction: column; gap: 14px; }
.cc-post-card[hidden] { display: none; }
.cc-post-card .cc-meta { margin: 6px 0 0; }
.cc-post-card__title { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 700; }
.cc-post-grid--three .cc-post-card__title { font-size: 20px; line-height: 28px; }
.cc-post-card__excerpt { margin: 0; font-size: 16px; line-height: 25px; color: var(--slate); }
@media (max-width: 640px) {
  .cc-featured { padding: 0 var(--space-4); }
  .cc-featured .cc-btn { width: 100%; }
  .cc-post-grid { gap: 40px; }
  .cc-post-card__title { font-size: 21px; line-height: 28px; }
}

/* ---------- Assessment band (blog index and posts) ---------- */
.cc-band { position: relative; overflow: hidden; margin: 96px var(--space-4) 0; padding: 72px var(--space-6); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--deep) 0%, var(--azure) 62%, var(--azure-soft) 100%); }
.cc-band__cloud { position: absolute; height: auto; pointer-events: none; }
.cc-band__cloud--a { top: 36px; left: 5%; width: 120px; }
.cc-band__cloud--b { bottom: 28px; right: 6%; width: 170px; }
.cc-band__inner { position: relative; max-width: 820px; margin: 0 auto; text-align: center; }
.cc-band__title { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); line-height: 1.22; font-weight: 700; letter-spacing: -0.02em; }
.cc-band__text { margin: 0 auto var(--space-8); max-width: 36em; font-size: 18px; line-height: 28px; }
.cc-band__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); align-items: end; text-align: left; }
.cc-band__field { display: grid; gap: var(--space-2); }
.cc-band__field label { font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 700; }
.cc-band__field input { min-height: 52px; box-sizing: border-box; padding: 0 16px; border: 0; border-radius: var(--radius-md); background: #FFFFFF; color: #0B1F33; font: inherit; font-size: 17px; }
.cc-band__form .cc-btn { min-height: 52px; }
.cc-band__note { margin: var(--space-4) 0 0; font-size: 14px; line-height: 21px; }
@media (max-width: 640px) {
  .cc-band { margin: 48px var(--space-2) 0; padding: 40px 20px; border-radius: 28px; }
  .cc-band__inner { text-align: left; }
  .cc-band__cloud { display: none; }
}

/* ---------- "Next Monday" strip ---------- */
.cc-next-up { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); max-width: calc(var(--page-max) - 48px); margin: 72px auto 0; padding: var(--space-6) 28px; border-radius: var(--radius-lg); background: var(--surface-alt); }
.cc-next-up p { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; }
@media (max-width: 1248px) { .cc-next-up { margin-left: var(--space-6); margin-right: var(--space-6); } }
@media (max-width: 640px) { .cc-next-up { margin: 48px var(--space-4) 0; } }

/* ---------- Blog post page ---------- */
.cc-post-head__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: center; gap: var(--space-6) 56px; }
.cc-post-head .cc-page-title { font-size: clamp(30px, 3.4vw, 48px); }
.cc-author-line { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); font-size: 15px; line-height: 21px; }
.cc-author-line img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.cc-author-line strong { display: block; font-family: var(--font-display); }
.cc-post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 72px; max-width: var(--page-max); margin: var(--space-10) auto 0; padding: 0 var(--space-6); }
.cc-post-layout__main { min-width: 0; max-width: 720px; }
.cc-post-layout__aside { position: sticky; top: var(--space-6); display: grid; gap: 20px; }
.cc-post-layout__main .cc-answer { max-width: none; }
.cc-post-layout__main .cc-facts { margin-top: var(--space-6); }
.cc-post-layout__main .cc-prose { max-width: none; }
.cc-post-layout__main .cc-prose h2 { font-size: 26px; line-height: 34px; }
.cc-toc { border: 1px solid var(--line); border-radius: var(--radius-lg); }
.cc-toc > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 var(--space-4); list-style: none; cursor: pointer; font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.cc-toc > summary::-webkit-details-marker { display: none; }
.cc-toc[open] > summary svg { transform: rotate(180deg); }
.cc-toc ul { display: grid; gap: 2px; margin: 0; padding: 0 var(--space-3) var(--space-3); list-style: none; }
.cc-toc a { display: flex; align-items: center; min-height: 40px; padding: 0 var(--space-3); border-radius: 10px; color: var(--ink); font-size: 15px; line-height: 21px; text-decoration: none; }
.cc-toc a:hover { background: var(--surface-alt); }
.cc-toc a[aria-current="true"] { background: var(--surface-alt); color: var(--link); font-weight: 600; }
.cc-aside-cta { padding: var(--space-6); border-radius: var(--radius-lg); }
.cc-aside-cta__title { margin: 14px 0 6px; font-family: var(--font-display); font-size: 21px; line-height: 28px; font-weight: 700; }
.cc-aside-cta__text { margin: 0 0 18px; font-size: 15px; line-height: 23px; color: var(--on-panel-muted); }
.cc-aside-cta .cc-btn { width: 100%; }
.cc-inline-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin: var(--space-8) 0; padding: 28px; border-radius: var(--radius-lg); }
.cc-inline-cta__title { margin: 0 0 6px; font-family: var(--font-display); font-size: 21px; line-height: 28px; font-weight: 700; }
.cc-inline-cta__text { margin: 0; font-size: 15px; line-height: 23px; color: var(--on-panel-muted); }
.cc-post-layout__main .cc-author { margin-top: var(--space-10); }
.cc-sources { margin: 20px 0 0; font-size: 14px; line-height: 21px; color: var(--muted); }
@media (max-width: 1024px) {
  .cc-post-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .cc-post-layout__aside { position: static; order: -1; }
  .cc-aside-cta { display: none; }
}
@media (max-width: 640px) {
  .cc-post-layout { padding: 0 var(--space-4); margin-top: var(--space-4); }
  .cc-post-layout__main .cc-prose h2 { font-size: 23px; line-height: 30px; }
  .cc-inline-cta .cc-btn { width: 100%; }
}

/* =========================================================
   Site integration (computecloud.co.uk build)
   Base resets, the header overlay, home sections, inner pages,
   prose extras, the assessment form and the consent banner.
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 3px; }
[id] { scroll-margin-top: 24px; }
.cc-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 12px 16px; border-radius: 12px; background: #FFFFFF; color: #0B1F33; font-family: var(--font-display); font-weight: 700; }
.cc-skip:focus { left: 8px; }

/* Header floats over the top of the hero or page head. --cc-hdr is the space it takes. */
:root { --cc-top: 16px; --cc-hdr: 88px; }
@media (max-width: 960px) { :root { --cc-hdr: 80px; } }
@media (max-width: 640px) { :root { --cc-top: 8px; } }
.cc-site-header { position: absolute; top: var(--cc-top); left: 0; right: 0; }
.cc-dd__link[aria-current="page"] { background: #EEF6FD; }
.cc-dd__foot a { min-height: 44px; font-size: 14px; color: #FFFFFF; }

/* Page heads */
.cc-page-head__inner { padding-top: calc(var(--cc-hdr) + 40px); }
.cc-page-head:not(.cc-page-head--center):not(.cc-post-head) .cc-page-head__inner > * { max-width: 820px; }
.cc-page-head--center .cc-page-lede { max-width: 40em; margin: 0 auto; }
.cc-page-head__cloud--right { top: calc(var(--cc-hdr) + 28px); right: 5%; }
.cc-page-head__cloud--left { top: calc(var(--cc-hdr) + 4px); left: 6%; width: 120px; }
.cc-page-head__cloud--small { top: calc(var(--cc-hdr) + 96px); width: 84px; }
@media (max-width: 1100px) { .cc-page-head:not(.cc-page-head--center) .cc-page-head__cloud { display: none; } }
@media (max-width: 960px) { .cc-page-head__cloud { display: none; } }
@media (max-width: 640px) { .cc-page-head__inner { padding-top: calc(var(--cc-hdr) + 20px); } }
.cc-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.cc-page-head--center .cc-breadcrumb ol { justify-content: center; }
.cc-kicker { display: inline-flex; align-items: center; min-height: 28px; margin: 0 0 var(--space-4); padding: 0 var(--space-3); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1.5px var(--emphasis); font-family: var(--font-display); font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.cc-head-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: 28px; }
.cc-updated { margin: var(--space-4) 0 0; font-size: 14px; line-height: 21px; color: var(--muted); }
.cc-page-lede strong { color: var(--ink); }
.cc-post-head__meta { margin: 0 0 var(--space-4); }
.cc-post-head .cc-cover { box-shadow: var(--shadow-cloud); }
.cc-author-line p { margin: 0; }
@media (max-width: 640px) { .cc-head-actions .cc-btn { width: 100%; } }

/* Home hero */
.cc-hero--home { margin: var(--cc-top) var(--space-4) 0; border-radius: var(--radius-xl); }
.cc-hero--home .cc-hero__inner { padding-top: calc(var(--cc-hdr) + 32px); padding-bottom: 136px; }
.cc-hero__art img { display: block; width: 100%; max-width: 540px; margin: 0 auto; }
.cc-hero__cloud { position: absolute; height: auto; pointer-events: none; }
.cc-hero__cloud--a { top: calc(var(--cc-hdr) - 4px); right: 3%; width: 110px; }
.cc-hero__cloud--b { left: 3%; bottom: 52px; width: 88px; }
@media (max-width: 860px) { .cc-hero--home .cc-hero__inner { padding-bottom: 120px; } .cc-hero__cloud--a { display: none; } }
@media (max-width: 640px) {
  .cc-hero--home { margin: 8px 8px 0; border-radius: 28px; }
  .cc-hero--home .cc-hero__inner { padding: calc(var(--cc-hdr) + 20px) 20px 112px; gap: var(--space-6); }
  .cc-hero__lede { font-size: 18px; line-height: 28px; }
  .cc-hero__actions .cc-btn { width: 100%; }
  .cc-hero__art { max-width: 320px; margin: 0 auto; }
  .cc-hero__cloud--b { display: none; }
}
.cc-float-wrap { position: relative; z-index: 2; padding: 0 var(--space-4); }
@media (max-width: 640px) { .cc-answer--float { padding: var(--space-6); margin-top: -64px; } }

/* Sections */
.cc-section--tight { margin-top: 72px; }
.cc-section--narrow { max-width: 880px; }
.cc-section--first { margin-top: var(--space-10); }
.cc-section__title--with-sub { margin-bottom: var(--space-2); }
.cc-section__sub { margin: 0 0 var(--space-8); max-width: 40em; font-size: 20px; line-height: 30px; color: var(--slate); }
@media (max-width: 640px) { .cc-section__sub { font-size: 17px; line-height: 27px; } .cc-section--tight { margin-top: 48px; } .cc-section--first { margin-top: var(--space-6); } }

/* Countdown: actions sit on the right on wide screens */
.cc-countdown { grid-template-columns: auto minmax(0, 1fr) auto; }
.cc-countdown__actions { grid-column: auto; }
@media (max-width: 1100px) { .cc-countdown { grid-template-columns: auto minmax(0, 1fr); } .cc-countdown__actions { grid-column: 1 / -1; } }
@media (max-width: 560px) { .cc-countdown { grid-template-columns: 1fr; } .cc-countdown__actions .cc-btn { width: 100%; } }

/* Service cards */
.cc-card .cc-icon-chip { color: var(--azure); }
.cc-card__top .cc-plate { flex: none; }

/* How a migration works */
.cc-steps-band { position: relative; overflow: hidden; margin-top: 96px; padding: 72px var(--space-6); background: var(--surface-alt); }
.cc-steps-band__cloud { position: absolute; top: 28px; right: 4%; width: 150px; height: auto; pointer-events: none; }
.cc-steps-band__inner { position: relative; max-width: var(--page-max); margin: 0 auto; }
.cc-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.cc-how__step { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface); }
.cc-how__top { display: flex; align-items: center; gap: var(--space-3); color: var(--azure); }
.cc-how__num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--azure); color: #FFFFFF; font-family: var(--font-display); font-size: 16px; font-weight: 800; }
.cc-how__title { margin: 0; font-family: var(--font-display); font-size: 21px; line-height: 28px; font-weight: 700; }
.cc-how__text { margin: 0; font-size: 16px; line-height: 25px; color: var(--slate); }
@media (max-width: 640px) { .cc-steps-band { margin-top: 48px; padding: 48px var(--space-4); } .cc-steps-band__cloud { display: none; } }

/* Region cards */
.cc-regions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.cc-region { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); text-decoration: none; }
.cc-region:hover { border-color: var(--emphasis); box-shadow: var(--shadow-lift); }
.cc-region .cc-icon { color: var(--azure); }
.cc-region__city { font-family: var(--font-display); font-size: 19px; line-height: 26px; font-weight: 700; }
.cc-region .cc-plate { align-self: flex-start; }
@media (max-width: 640px) { .cc-regions { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); } }

/* FAQ sections */
.cc-faq-section .cc-faq { max-width: none; }
.cc-faq-section .cc-section__title { margin-bottom: var(--space-6); }
.cc-faq__a a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; }
.cc-prose + .cc-faq-section, .cc-answer + .cc-faq-section { margin-top: 56px; }
.cc-post-layout__main .cc-faq-section { margin-top: 56px; }
.cc-post-layout__main .cc-faq-section .cc-section__title { font-size: 26px; line-height: 34px; margin-bottom: var(--space-4); }

/* Closing gradient panel */
.cc-closing { margin: 96px var(--space-4) 0; padding: 72px var(--space-6) 136px; border-radius: var(--radius-xl); }
.cc-closing__cloud { position: absolute; height: auto; pointer-events: none; }
.cc-closing__cloud--a { top: 40px; right: 6%; width: 190px; }
.cc-closing__cloud--b { bottom: 24px; right: 24%; width: 110px; }
.cc-closing__inner { position: relative; max-width: var(--page-max); margin: 0 auto; }
.cc-closing__title { margin: 0 0 var(--space-3); max-width: 16em; font-family: var(--font-display); font-size: clamp(28px, 3vw, 36px); line-height: 1.22; font-weight: 700; letter-spacing: -0.02em; color: var(--on-panel); }
.cc-closing__text { margin: 0 0 28px; max-width: 32em; font-size: 20px; line-height: 30px; }
@media (max-width: 640px) {
  .cc-closing { margin: 48px var(--space-2) 0; padding: 40px 20px 112px; border-radius: 28px; }
  .cc-closing__cloud--a { top: auto; bottom: 20px; right: 8%; width: 110px; }
  .cc-closing__cloud--b { display: none; }
  .cc-closing__text { font-size: 17px; line-height: 27px; }
  .cc-closing .cc-btn { width: 100%; }
}
.cc-footer { margin-top: 72px; }
.cc-footer__contact { margin: var(--space-3) 0 0; }
.cc-footer__about a { text-decoration: underline; text-decoration-color: var(--sky); }
.cc-footer__legal a { margin-left: var(--space-2); text-decoration: underline; }

/* Prose extras: tables (wrapped by build.py), quotes, code */
.cc-prose .cc-table-wrap { margin: var(--space-2) 0 var(--space-6); }
.cc-prose .cc-table th { white-space: normal; }
.cc-prose blockquote { margin: var(--space-6) 0; padding: var(--space-4) 20px; border-left: 4px solid var(--azure); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--surface-alt); }
.cc-prose blockquote p:last-child { margin: 0; }
.cc-prose code { padding: 0.1em 0.35em; border-radius: 4px; background: var(--surface-alt); font-size: 0.92em; }
.cc-prose hr { margin: var(--space-8) 0; border: 0; border-top: 1px solid var(--line); }
.cc-prose > :first-child { margin-top: 0; }
.cc-prose dt { font-weight: 700; }
.cc-prose dd { margin: 0 0 var(--space-3); }
.cc-prose .cc-inline-cta p { margin: 0; }
.cc-prose .cc-inline-cta .cc-inline-cta__title { margin-bottom: 6px; }
.cc-prose .cc-btn { color: var(--on-cta); text-decoration: none; }
.cc-post-layout__main .cc-facts + .cc-prose, .cc-post-layout__main .cc-answer + .cc-prose { margin-top: var(--space-10); }
.cc-section--narrow .cc-answer { max-width: none; margin-bottom: var(--space-8); }
.cc-next-up strong { font-family: var(--font-display); }

/* Assessment form (classes used by static/js/assessment.js) */
.cc-assess { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; gap: var(--space-10); max-width: var(--page-max); margin: var(--space-10) auto 0; padding: 0 var(--space-6); }
.cc-assess__card { padding: var(--space-8); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-cloud); }
.cc-assess__next { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-alt); }
.cc-assess__next h2 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: 19px; line-height: 26px; }
.cc-assess__next ol { margin: 0; padding-left: 20px; }
.cc-assess__next li { margin: 0 0 var(--space-2); font-size: 16px; line-height: 25px; }
.cc-assess__next li::marker { color: var(--azure); font-weight: 700; }
.cc-assess__privacy { margin: var(--space-4) 0 0; font-size: 14px; line-height: 21px; color: var(--muted); }
@media (max-width: 960px) { .cc-assess { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cc-assess { margin-top: var(--space-6); padding: 0 var(--space-4); } .cc-assess__card { padding: 22px 18px; } }
.assess-form fieldset { min-width: 0; margin: 0 0 28px; padding: 0; border: 0; }
.assess-form legend { margin: 0 0 6px; padding: 0; font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 700; color: var(--ink); }
.assess-form .hint { margin: 0 0 var(--space-3); font-size: 14px; line-height: 21px; color: var(--muted); }
.assess-form .q-label { margin: var(--space-6) 0 10px; font-family: var(--font-display); font-size: 16px; line-height: 22px; font-weight: 700; }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.choices-row { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span { display: flex; align-items: center; gap: 10px; height: 100%; min-height: 52px; padding: var(--space-3) 14px; border: 1.5px solid var(--slate); border-radius: var(--radius-sm); background: var(--surface); font-size: 16px; line-height: 22px; color: var(--ink); }
.choice span::before { content: ""; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--slate); border-radius: 4px; background: var(--surface) no-repeat center / 12px; }
.choice input[type="radio"] + span::before { border-radius: 50%; }
.choice:hover span { border-color: var(--azure); }
.choice input:checked + span { border-color: var(--azure); box-shadow: inset 0 0 0 1px var(--azure); background: var(--surface-alt); font-weight: 600; }
.choice input[type="checkbox"]:checked + span::before { border-color: var(--azure); background-color: var(--azure); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.choice input[type="radio"]:checked + span::before { border-color: var(--azure); background: var(--azure); box-shadow: inset 0 0 0 3.5px var(--surface); }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.field { display: block; margin: 0 0 var(--space-4); }
.field > span { display: block; margin-bottom: 6px; font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 700; color: var(--ink); }
.field em { font-weight: 500; font-style: normal; color: var(--muted); }
.field input, .field select, .field textarea { display: block; width: 100%; min-height: 48px; padding: 10px var(--space-3); border: 1.5px solid var(--slate); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 17px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.check { display: flex; align-items: flex-start; gap: 10px; margin: var(--space-3) 0; font-size: 15px; line-height: 23px; color: var(--ink); }
.check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--azure); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.progress { display: none; height: 6px; margin: 0 0 var(--space-2); border-radius: 3px; background: var(--line); overflow: hidden; }
.progress-bar { width: 25%; height: 100%; border-radius: 3px; background: var(--azure); }
.step-count { display: none; margin: 0 0 18px; font-size: 14px; line-height: 21px; color: var(--muted); }
.form-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); }
.form-nav [data-prev], .form-nav [data-next] { display: none; }
.form-error { margin: 0 0 var(--space-4); padding: 10px 14px; border: 1px solid #F5C2BE; border-radius: var(--radius-sm); background: #FEF3F2; color: var(--error); font-size: 15px; font-weight: 600; }
.form-error[hidden] { display: none; }
.assess-form.js .progress, .assess-form.js .step-count { display: block; }
.assess-form.js .step { display: none; }
.assess-form.js .step.active { display: block; }
.assess-form.js [data-next] { display: inline-flex; margin-left: auto; }
.assess-form.js [data-submit] { display: none; margin-left: auto; }
.assess-form.js.last [data-next] { display: none; }
.assess-form.js.last [data-submit] { display: inline-flex; }
.assess-form.js.not-first [data-prev] { display: inline-flex; }
.assess-form.sending [data-submit] { opacity: 0.7; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .progress-bar { transition: width 0.3s; }
  .assess-form.js .step.active { animation: cc-fade 0.25s ease; }
}
@keyframes cc-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Analytics consent banner (only rendered when cfg.ga4_id is set) */
.cc-consent { position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; max-width: 560px; margin: 0 auto; padding: var(--space-4) 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-cloud); font-size: 15px; line-height: 23px; }
.cc-consent[hidden] { display: none; }
.cc-consent p { flex: 1 1 260px; margin: 0; }
.cc-consent div { display: flex; gap: var(--space-2); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print {
  .cc-site-header, .cc-footer, .cc-closing, .cc-band, .cc-inline-cta, .cc-aside-cta, .cc-consent, .cc-cloud-edge { display: none !important; }
  .cc-page-head, .cc-hero { margin: 0; padding-bottom: 0; background: none; color: #000; }
}
/* Closed <details> content must not take part in layout (some engines still measure it). */
.cc-dd:not([open]) > .cc-dd__panel, .cc-menu:not([open]) > .cc-menu__panel, .cc-menu__section:not([open]) > ul, .cc-toc:not([open]) > nav { display: none; }
@media (max-width: 960px) { .cc-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cc-footer__inner > :first-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .cc-footer { padding: 48px 20px 32px; } .cc-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
@media (max-width: 640px) { .cc-blog-tools { flex-wrap: nowrap; } .cc-chips, .cc-search { min-width: 0; } }
.cc-band__field { min-width: 0; }
.cc-band__field input { width: 100%; min-width: 0; }
.cc-toc a { padding-top: 8px; padding-bottom: 8px; }
/* Key facts: separators drawn per item so an odd count never leaves a grey gap cell. */
.cc-facts { gap: 0; background: var(--surface); }
.cc-facts__item { box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.cc-facts--text dd { font-size: 17px; line-height: 25px; letter-spacing: 0; }
[hidden] { display: none !important; }
@media (max-width: 1000px) { .cc-band__cloud--a { display: none; } .cc-band__cloud--b { width: 120px; bottom: 16px; } }