html,body{height:100%;margin:0}
#dc-root,#dc-root>.page{height:100%}
.is-hidden{display:none!important}
[data-guide-row] .g-open{display:none}
[data-guide-row].is-open .g-open{display:block}
[data-guide-row].is-open .g-closed{display:none}
@media (max-width:1099.98px){.hero-wide{display:none}}
@media (min-width:1100px){.hero-narrow{display:none}}

/* ---------- narrow screens: header and footer fit the screen below 600px; the page-content rules below also apply under 600px ---------- */
@media (max-width:599.98px){
  .page img,.page svg{max-width:100%}

  /* header: logo + Contact on the first row, menu on the second */
  .page header{flex-wrap:wrap!important;justify-content:space-between!important;gap:6px 12px!important;border-radius:26px!important;width:100%!important;box-sizing:border-box;margin:0!important;padding:8px 8px 8px 12px!important}
  .page div:has(>header){padding-left:12px!important;padding-right:12px!important}
  .page header>div,.page header>a:first-child{order:1}
  .page header>a[href="/contact/"]{order:2}
  .page header>nav{order:3;flex:1 0 100%;justify-content:center;gap:20px!important;padding-top:2px}
  .page [data-menu]{left:50%!important;top:124px!important;box-sizing:border-box!important;width:min(300px,calc(100% - 24px))!important}

  /* footer: brand on top, three link columns below in two columns */
  .page footer>div:first-child,.page [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"]{grid-template-columns:1fr 1fr!important;margin-left:12px!important;margin-right:12px!important}
  .page [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"]>div:first-child{grid-column:1/-1;padding:32px 20px!important;border-right:0!important;border-bottom:1px solid rgba(34,34,34,.1)}
  .page [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"]>div:not(:first-child){padding:28px 20px!important}
  .page [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"]+div{padding:20px!important;flex-wrap:wrap;gap:8px}
}

/* homepage */
@media (max-width:599.98px){
  body[data-reveal-mode="home"] .hero-narrow>div{padding:56px 20px 56px!important;gap:22px!important}
  body[data-reveal-mode="home"] h1{font-size:clamp(34px,11.6vw,44px)!important}
  body[data-reveal-mode="home"] h2{font-size:clamp(30px,10vw,38px)!important;max-width:100%!important}
  body[data-reveal-mode="home"] .hero-narrow p{font-size:17px!important}
  body[data-reveal-mode="home"] .hero-narrow [style*="gap: 20px"]{flex-wrap:wrap;justify-content:center;gap:14px 20px!important}

  body[data-reveal-mode="home"] .page>div>div[style*="grid-template-columns: 1fr 1fr"],
  body[data-reveal-mode="home"] .page>div>div[style*="grid-template-columns: 1fr 1fr"] {grid-template-columns:minmax(0,1fr)!important;gap:32px!important;margin-left:20px!important;margin-right:20px!important;padding-top:72px!important;padding-bottom:72px!important}
  body[data-reveal-mode="home"] [style*="grid-template-columns: 64px 1fr"]{grid-template-columns:36px minmax(0,1fr)!important;padding:28px 0!important}

  body[data-reveal-mode="home"] .page>div>div[style*="padding: 180px"]{padding:72px 20px!important}
  body[data-reveal-mode="home"] [style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 440px)"],
  body[data-reveal-mode="home"] [style*="grid-template-columns: 1fr auto"]{grid-template-columns:minmax(0,1fr)!important;gap:20px!important;align-items:start!important;margin-bottom:32px!important}
  body[data-reveal-mode="home"] [style*="grid-template-columns: minmax(140px, 0.9fr)"]{grid-template-columns:minmax(0,1fr)!important;gap:10px!important;padding:20px 18px!important}
  body[data-reveal-mode="home"] [style*="grid-template-columns: minmax(140px, 0.9fr)"][style*="font-family"]{display:none!important}
  body[data-reveal-mode="home"] [style*="grid-template-columns: minmax(140px, 0.9fr)"] span[style*="padding-right"]{padding-right:0!important}
  body[data-reveal-mode="home"] [style*="padding: 18px 32px 12px"]{padding:18px 18px 12px!important}

  body[data-reveal-mode="home"] [data-guide-row] [style*="grid-template-columns: 64px minmax(0px, 1fr) minmax(0px, 0.8fr)"]{grid-template-columns:minmax(0,1fr)!important;gap:16px!important;padding:28px 0!important}
  body[data-reveal-mode="home"] [data-guide-row] [style*="grid-template-columns: 64px minmax(0px, 1fr) 48px"]{grid-template-columns:32px minmax(0,1fr) 40px!important;gap:12px!important;padding:24px 0!important}
  body[data-reveal-mode="home"] [data-guide-row] [style*="align-items: baseline"]{flex-direction:column;align-items:flex-start!important;gap:6px!important}
  body[data-reveal-mode="home"] [data-guide-row] [style*="font-size: 44px"]{font-size:clamp(22px,8vw,30px)!important}
  body[data-reveal-mode="home"] [data-guide-row] [style*="height: 240px"]{height:180px!important}
  body[data-reveal-mode="home"] [data-guide-row] [style*="width: 170px"]{width:min(170px,40%)!important}
  body[data-reveal-mode="home"] [data-guide-row] [style*="border-radius: 50%"][style*="width: 48px"]{width:40px!important;height:40px!important}
}

/* comparison page */
@media (max-width:599.98px){
  body:not([data-reveal-mode]) .page section{padding-left:20px!important;padding-right:20px!important}
  body:not([data-reveal-mode]) .page section:first-of-type{padding-top:40px!important;padding-bottom:40px!important}
  body:not([data-reveal-mode]) [style*="min-width: 280px"]{min-width:0!important;flex-basis:100%!important}
  body:not([data-reveal-mode]) h1{font-size:clamp(34px,11vw,44px)!important}
  body:not([data-reveal-mode]) h2{font-size:clamp(26px,8.6vw,32px)!important}
  body:not([data-reveal-mode]) [style*="position: sticky"]{margin-left:-20px!important;margin-right:-20px!important;padding-left:20px!important;padding-right:20px!important;overflow-x:auto;max-width:100vw;box-sizing:border-box}
  body:not([data-reveal-mode]) [style*="border-radius: 20px"][style*="padding: 32px"]{padding:18px!important}
  body:not([data-reveal-mode]) summary[style*="grid-template-columns: minmax(220px, 1fr) auto 32px"]{grid-template-columns:minmax(0,1fr) 32px!important;gap:12px 10px!important;padding:18px 0!important}
  body:not([data-reveal-mode]) summary[style*="grid-template-columns: minmax(220px, 1fr) auto 32px"]>span:nth-child(1){grid-column:1;grid-row:1;font-size:19px!important}
  body:not([data-reveal-mode]) summary[style*="grid-template-columns: minmax(220px, 1fr) auto 32px"]>span:nth-child(2){grid-column:1/-1;grid-row:2;justify-content:flex-start!important}
  body:not([data-reveal-mode]) summary[style*="grid-template-columns: minmax(220px, 1fr) auto 32px"]>span:nth-child(3){grid-column:2;grid-row:1}
  body:not([data-reveal-mode]) details[style*="padding: 0px 24px"]{padding:0 16px!important}
  body:not([data-reveal-mode]) details>summary{font-size:17px!important}
  body:not([data-reveal-mode]) [style*="padding: 28px 32px"]{padding:20px!important}
  body:not([data-reveal-mode]) details:not(#source-register) table,body:not([data-reveal-mode]) details:not(#source-register) tbody,body:not([data-reveal-mode]) details:not(#source-register) tr,body:not([data-reveal-mode]) details:not(#source-register) td{display:block;width:auto!important}
  body:not([data-reveal-mode]) details:not(#source-register) thead{display:none}
  body:not([data-reveal-mode]) details:not(#source-register) tr{border-top:1px solid rgba(34,34,34,.12);padding:16px 0}
  body:not([data-reveal-mode]) details:not(#source-register) td{border:0!important;padding:3px 0!important}
  body:not([data-reveal-mode]) [style*="overflow: auto hidden"] table,body:not([data-reveal-mode]) [style*="overflow: auto hidden"] tbody,body:not([data-reveal-mode]) [style*="overflow: auto hidden"] tr,body:not([data-reveal-mode]) [style*="overflow: auto hidden"] td{display:block;width:auto!important}
  body:not([data-reveal-mode]) [style*="overflow: auto hidden"] thead{display:none}
  body:not([data-reveal-mode]) [style*="overflow: auto hidden"] tr{border-top:1px solid rgba(34,34,34,.12);padding:16px 0}
  body:not([data-reveal-mode]) [style*="overflow: auto hidden"] td{border:0!important;padding:3px 0!important}
}


/* all pages: content that is wider than a phone screen (multi-column grids, fixed-width columns) */
@media (max-width:599.98px){
  .page section{padding-left:20px!important;padding-right:20px!important}
  .page [style*="backdrop-filter"]{margin-left:-20px!important;margin-right:-20px!important;padding-left:20px!important;padding-right:20px!important;max-width:100vw;box-sizing:border-box;overflow-x:auto}
  .page [style*="grid-template-columns: repeat("],
  .page [style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.1fr)"],
  .page [style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.25fr)"],
  .page [style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.6fr)"],
  .page [style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 2fr)"],
  .page [style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 400px)"],
  .page [style*="grid-template-columns: minmax(0px, 1fr) auto;"],
  .page [style*="grid-template-columns: 70px minmax(0px, 1fr) minmax(0px, 1.2fr) 90px"]{grid-template-columns:minmax(0,1fr)!important;gap:20px!important}
  .page [style*="grid-template-columns: 70px minmax(0px, 1fr) minmax(0px, 1.2fr) 90px"]{gap:6px!important}
  .page [style*="grid-template-columns: 120px minmax(0px, 1fr)"]{grid-template-columns:56px minmax(0,1fr)!important;gap:16px!important}
  .page [style*="font-size: 64px"][style*="font-weight: 300"]{font-size:44px!important}
  .page [style*="grid-template-columns: 200px minmax(0px, 1fr) 48px"]{grid-template-columns:minmax(88px,38%) minmax(0,1fr) 32px!important;gap:12px!important}
  .page [style*="grid-template-columns: 200px minmax(0px, 1fr);"]{grid-template-columns:110px minmax(0,1fr)!important;gap:16px!important}
  .page [style*="grid-template-columns: 4fr 2fr 2fr 2fr"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .page [style*="grid-template-columns: 4fr 2fr 2fr 2fr"]>span{padding:0 8px!important}
  .page [style*="grid-template-columns: 6fr 4fr"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .page form[data-sent-form]{padding:24px!important}
  .page :is(h1,h2,h3,h4,p,li,summary,dd,dt,span,a):not(table *){overflow-wrap:anywhere}
}
@media (max-width:329.98px){
  .page header>nav{gap:12px!important}
  .page header>div span,.page header>a:first-child span{font-size:13px!important}
  .page header>a[href="/contact/"]{padding:8px 12px!important;font-size:13px!important}
}






/* sticky contents bar on the RPO/RTO and NIS2 guides: anchors land below the bar; no smooth scroll if the visitor prefers reduced motion */

/* external links (source addresses, provider sites): always underlined; clear hover and keyboard focus. Link #D70466 on white = 5.1:1, hover #B0034F = 7.1:1, focus ring #222 = 15.9:1 */
.ext-link{text-decoration-line:underline!important;text-decoration-color:currentColor!important;text-decoration-thickness:1px!important;text-underline-offset:3px!important}
.ext-link:hover{color:#B0034F!important;text-decoration-thickness:2px!important}
.ext-link:focus-visible{outline:2px solid #222;outline-offset:3px;border-radius:2px;color:#B0034F!important;text-decoration-thickness:2px!important}

/* hover: homepage comparison table. Hovering a provider row fills it with a light neutral grey from the left and outlines it in the text colour (the row already nudges 4px right),
   so it is clear at once which row the mouse is on (no click needed). Fill is a transform on a pseudo-element (no layout work); #F5F5F5 keeps the grey text at 5.0:1; the bar track is darkened a step so it stays visible.
   Only for real hover pointers; with reduced motion the fill fades instead of sliding. */
body[data-reveal-mode="home"] [data-stagger]>[style*="minmax(140px, 0.9fr)"]{position:relative;isolation:isolate;transition:transform 220ms cubic-bezier(.2,.7,.2,1),border-color 200ms cubic-bezier(.23,1,.32,1)!important}
body[data-reveal-mode="home"] [data-stagger]>[style*="minmax(140px, 0.9fr)"] [style*="height: 8px"]{transition:background-color 200ms ease}
body[data-reveal-mode="home"] [data-stagger]>[style*="minmax(140px, 0.9fr)"]::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#F5F5F5;transform:scaleX(0);transform-origin:left center;transition:transform 220ms cubic-bezier(.23,1,.32,1);pointer-events:none}
@media (hover:hover) and (pointer:fine){
  body[data-reveal-mode="home"] [data-stagger]>[style*="minmax(140px, 0.9fr)"]:hover{border-color:#222!important}
  body[data-reveal-mode="home"] [data-stagger]>[style*="minmax(140px, 0.9fr)"]:hover::before{transform:scaleX(1)}
  body[data-reveal-mode="home"] [data-stagger]>[style*="minmax(140px, 0.9fr)"]:hover [style*="height: 8px"]{background:#E2E2E2!important}
}
@media (prefers-reduced-motion:reduce){
  body[data-reveal-mode="home"] [data-stagger]>[style*="minmax(140px, 0.9fr)"]::before{transform:none;opacity:0;transition:opacity 150ms ease}
  body[data-reveal-mode="home"] [data-stagger]>[style*="minmax(140px, 0.9fr)"]:hover::before{opacity:1}
}

/* hover: table rows on the comparison and methodology pages. The old highlight (2% grey) was almost invisible; use the same light grey instead. */
@media (hover:hover) and (pointer:fine){
  .page tbody tr{transition:background-color 150ms ease}
  .page tbody tr:hover{background-color:#F5F5F5!important}
}

/* provider logos: homepage table and review pages. One display height per logo (optical balance: wide wordmarks sit lower than compact badges);
   max-width keeps them inside narrow columns. The typed name stays in the page as hidden text (.sr-only). */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.prov-logo{--logo-h:36px;--logo-scale:1;display:block;height:calc(var(--logo-h) * var(--logo-scale));width:auto;max-width:100%;object-fit:contain;object-position:left center}
.prov-logo[data-logo="acronis"]{--logo-h:30px}
.prov-logo[data-logo="backblaze"]{--logo-h:36px}
.prov-logo[data-logo="mindtime"]{--logo-h:36px}
.prov-logo[data-logo="synology-c2"]{--logo-h:28px}
.prov-logo[data-logo="veeam"]{--logo-h:32px}
.prov-logo--hero{--logo-scale:1.3}
.prov-logo--sm{--logo-scale:.8;max-width:calc(100% - 10px)}
a:hover>.prov-logo,a:focus-visible>.prov-logo{opacity:.8}
.prov-logo{transition:opacity 160ms ease}

/* clickable provider rows (homepage table, "At a glance" matrix on the comparison page): the provider link stretches over the whole row (::after), no JavaScript.
   One link per row = one tab stop and one screen-reader item ("Mindtime review"). The row shows the hover state on keyboard focus too (:has(.row-link:focus-visible), so a mouse click or going back to the page does not leave the row grey),
   and a 2px inner outline marks the focused row. */
.row-link{display:block;color:inherit;text-decoration:none;-webkit-user-drag:none}
.row-link:focus-visible{outline:none}
body[data-reveal-mode="home"] [data-stagger]>[style*="minmax(140px, 0.9fr)"] .row-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:6px;cursor:pointer}
body[data-reveal-mode="home"] [data-stagger]>[style*="minmax(140px, 0.9fr)"] .row-link:focus-visible::after{outline:2px solid #222;outline-offset:-4px}
body[data-reveal-mode="home"] [data-stagger]>[style*="minmax(140px, 0.9fr)"]:has(.row-link:focus-visible){border-color:#222!important}
body[data-reveal-mode="home"] [data-stagger]>[style*="minmax(140px, 0.9fr)"]:has(.row-link:focus-visible)::before{transform:scaleX(1)}
body[data-reveal-mode="home"] [data-stagger]>[style*="minmax(140px, 0.9fr)"]:has(.row-link:focus-visible) [style*="height: 8px"]{background:#E2E2E2!important}
@media (prefers-reduced-motion:reduce){
  body[data-reveal-mode="home"] [data-stagger]>[style*="minmax(140px, 0.9fr)"]:has(.row-link:focus-visible)::before{opacity:1}
}
/* matrix: each row sits in a wrapper that shares the grid's columns (subgrid), so the layout stays as it was; browsers without subgrid keep the plain grid and just the name link */
.prov-row{display:contents}
@supports (grid-template-columns:subgrid){
  .prov-row{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-self:stretch;align-items:center;position:relative;transition:opacity 160ms ease}
  .prov-row .row-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:10px;cursor:pointer}
  .prov-row .row-link:focus-visible::after{outline:2px solid #222;outline-offset:-3px}
  [style*="min-width: 720px"]:has(.row-link:focus-visible) .prov-row:not(:has(.row-link:focus-visible)){opacity:.5}
}
@media (hover:hover) and (pointer:fine){
  @supports (grid-template-columns:subgrid){
    [style*="min-width: 720px"]:has(.prov-row:hover) .prov-row:not(:hover){opacity:.5}
  }
}

/* review pages: "<Provider> official website" button next to the "Last checked" chip. Outlined pill like the header's Contact button, fills dark on hover and focus.
   44px high touch target; #222 on white 15:1, white on #222 15:1. */
.prov-visit{display:inline-flex;align-items:center;gap:8px;min-height:44px;box-sizing:border-box;padding:0 18px;border:1px solid #222;border-radius:999px;background:transparent;color:#222;font-size:14px;font-weight:500;line-height:1.2;text-decoration:none;transition:background-color 160ms ease,color 160ms ease}
.prov-visit svg{flex:0 0 auto;transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.prov-visit:focus-visible{outline:2px solid #222;outline-offset:3px;background:#222;color:#fff}
@media (hover:hover) and (pointer:fine){
  .prov-visit:hover{background:#222;color:#fff}
  .prov-visit:hover svg{transform:translate(2px,-2px)}
}
@media (prefers-reduced-motion:reduce){.prov-visit svg{transition:none}.prov-visit:hover svg{transform:none}}

/* header that stays in view (see site.js): once the page scrolls, the row with logo, menu and Contact is pinned 12px from the top on a solid white band
   across the full width (bottom hairline), so page content disappears under the band and never shows beside or behind the pill. The pill itself looks as before.
   Sticky contents bars and anchor links start below the band (--site-header-h); the dropdown panels fade and drop in. */
:root{--site-header-h:76px}
.page div:has(>header){pointer-events:none}
.page div:has(>header)>*{pointer-events:auto}
.page div:has(>header){z-index:50!important}   /* above page content and the hero, so open panels are never covered */
.page div:has(>header).is-stuck{position:fixed!important;top:-12px;left:0;right:0;z-index:60!important}
.page div:has(>header)::before{content:"";position:absolute;inset:0 0 -12px 0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 200ms ease;background:#fff;border-bottom:1px solid rgba(34,34,34,.08)}
.page div:has(>header).is-stuck::before{opacity:1}
@keyframes menu-in{from{opacity:0;transform:translateX(-50%) translateY(-6px) scale(.97)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.page [data-menu]:not(.is-hidden){transform-origin:top center;animation:menu-in 180ms cubic-bezier(.23,1,.32,1) both}
.page [style*="position: sticky"]{top:var(--site-header-h)!important}
html{scroll-padding-top:calc(var(--site-header-h) + 8px)}
@media (prefers-reduced-motion:reduce){
  @keyframes menu-in{from{opacity:0}to{opacity:1}}
  .page [data-menu]:not(.is-hidden){animation-duration:120ms}
}

/* header menu: fully usable with mouse, touch and keyboard. A 14px invisible bridge keeps the panel open while the mouse crosses the gap below
   the pill; triggers and panel links show a clear focus state. */
.page [data-menu]::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.page header [data-nav]:focus-visible{outline:2px solid #222;outline-offset:6px;border-radius:6px}
.page [data-menu] a:focus-visible{outline:2px solid #222;outline-offset:-2px;background:#F7F7F7;color:#D70466}

/* homepage: the logo block is clickable (back to the top), like the logo link on the other pages */
.page header>.logo-top{cursor:pointer}
.page header>.logo-top:focus-visible{outline:2px solid #222;outline-offset:4px;border-radius:999px}

/* glossary links in the guides: first mention of a term links to its entry in /glossary/ (same pink as other text links, solid underline);
   the glossary entry you land on is highlighted. The fixed header is accounted for by scroll-padding-top. */
.gloss-link{text-decoration-line:underline!important;text-decoration-color:currentColor!important;text-decoration-thickness:1px!important;text-underline-offset:3px!important}
.gloss-link:hover{color:#B0034F!important;text-decoration-thickness:2px!important}
.gloss-link:focus-visible{outline:2px solid #222;outline-offset:3px;border-radius:2px;color:#B0034F!important;text-decoration-thickness:2px!important}
[data-term]{position:relative;isolation:isolate;scroll-margin-top:80px}   /* lands below the fixed header and the sticky letter bar */
/* the term you came for lights up light grey, holds for a moment and fades back to the page's white: a one-off cue, not a permanent state (site.js adds .is-picked) */
[data-term]::before{content:"";position:absolute;inset:0 -16px;z-index:-1;background:#F5F5F5;opacity:0;pointer-events:none}
[data-term].is-picked::before{animation:term-flash 2600ms both 150ms}
@keyframes term-flash{0%{opacity:0;animation-timing-function:cubic-bezier(.23,1,.32,1)}11%{opacity:1}50%{opacity:1;animation-timing-function:ease}100%{opacity:0}}

/* page-to-page navigation: a short crossfade (180ms) instead of a hard cut (cross-document view transitions, same-origin navigations only).
   The pinned header row has its own transition name, so it stays put and does not fade with the page. Same-page anchors, smooth scrolling and
   scroll restoration are not navigations and are unaffected. Off with reduced motion. Browsers without support just navigate as before. */
@view-transition{navigation:auto}
.page div:has(>header){view-transition-name:site-header}
::view-transition-group(root),::view-transition-group(site-header){animation-duration:180ms;animation-timing-function:ease}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.001s!important}
}