:root{
  --cp-navy:#062D4D; --cp-navy-900:#041F36;
  --cp-blue:#35B7F4; --cp-electric:#2E65F3;
  --cp-green:#B9FF1D; --cp-green-deep:#A6E60D; --cp-crimson:#CE1B4E;
  --cp-pale:#F2F9FC; --cp-white:#fff; --cp-charcoal:#2B2B2B;
  --cp-g100:#EEF1F3; --cp-g200:#D2D6D8; --cp-g400:#8A9298; --cp-g600:#5A6168;

  /* canonical radii — live site */
  --cp-r-sm:8px; --cp-r-md:12px; --cp-r-lg:16px; --cp-r-xl:24px; --cp-r-pill:999px;

  --cp-font:"Proxima Nova","Figtree",-apple-system,"Segoe UI",Arial,sans-serif;
  --cp-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  /* ring shadows — signed off */
  --cp-sh-light:0.12; --cp-sh-dark:0.20; --cp-sh-b:34px; --cp-sh-y:11px;

  --cp-wrap:1160px; --cp-gut:clamp(20px,4vw,44px); --cp-sec:clamp(52px,5.8vw,92px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
#top .cp-page{margin:0;font-family:var(--cp-font);font-size:17.5px;line-height:1.62;color:var(--cp-charcoal);
  background:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased}
#top .cp-page img{max-width:100%;display:block}
#top .cp-page a{color:var(--cp-electric);text-decoration:none}
#top .cp-page :focus-visible{outline:3px solid var(--cp-electric);outline-offset:3px;border-radius:4px}
#top .cp-page h1, #top .cp-page h2, #top .cp-page h3, #top .cp-page h4{margin:0;color:var(--cp-navy);font-weight:700;letter-spacing:-.025em;line-height:1.08}
#top .cp-page h1{font-size:clamp(38px,5vw,60px)}
#top .cp-page h2{font-size:clamp(29px,3.5vw,44px);line-height:1.1}
#top .cp-page h3{font-size:clamp(21px,2.2vw,28px);line-height:1.18;letter-spacing:-.02em}
#top .cp-page h4{font-size:18.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
#top .cp-page p{margin:0}
#top .cp-page .cp-wrap{max-width:var(--cp-wrap);margin:0 auto;padding:0 var(--cp-gut)}
#top .cp-page .cp-section{padding:var(--cp-sec) 0;position:relative;overflow:hidden}
#top .cp-page .cp-section > .cp-wrap{position:relative;z-index:2}
#top .cp-page .cp-lede{font-size:clamp(18px,1.8vw,20.5px);line-height:1.55;color:var(--cp-g600);max-width:56ch}
#top .cp-page .cp-eyebrow{font-family:var(--cp-mono);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cp-electric);display:block;margin-bottom:16px}

/* ---------- grounds ---------- */
#top .cp-page .cp-g-white{background:#fff} #top .cp-page .cp-g-pale{background:var(--cp-pale)}
#top .cp-page .cp-g-navy{background:var(--cp-navy);color:rgba(255,255,255,.76)}
#top .cp-page .cp-g-deep{background:var(--cp-navy-900);color:rgba(255,255,255,.76)}
#top .cp-page .cp-g-navy h2, #top .cp-page .cp-g-navy h3, #top .cp-page .cp-g-navy h4, #top .cp-page .cp-g-deep h2, #top .cp-page .cp-g-deep h3, #top .cp-page .cp-g-deep h4{color:#fff}
#top .cp-page .cp-g-navy .cp-lede, #top .cp-page .cp-g-deep .cp-lede{color:rgba(255,255,255,.72)}
#top .cp-page .cp-g-navy .cp-eyebrow, #top .cp-page .cp-g-deep .cp-eyebrow{color:var(--cp-green)}

/* ---------- stacked disc rings ---------- */
#top .cp-page .cp-rings{position:absolute;width:var(--cp-w,1500px);aspect-ratio:1;left:var(--cp-x,50%);top:var(--cp-y,50%);
  transform:translate(-50%,-50%);pointer-events:none;user-select:none;z-index:0}
#top .cp-page .cp-ring{position:absolute;left:50%;top:50%;border-radius:50%;width:calc(var(--cp-d)*1%);aspect-ratio:1;
  transform:translate(-50%,-50%);background:var(--cp-disc);
  box-shadow:0 var(--cp-sh-y) var(--cp-sh-b) rgba(var(--cp-sh-rgb),var(--cp-sh-a))}
#top .cp-page .cp-on-white{--cp-disc:#fff;--cp-sh-rgb:6,45,77;--cp-sh-a:var(--cp-sh-light)}
#top .cp-page .cp-on-pale{--cp-disc:#F2F9FC;--cp-sh-rgb:6,45,77;--cp-sh-a:var(--cp-sh-light)}
#top .cp-page .cp-on-navy{--cp-disc:#062D4D;--cp-sh-rgb:0,0,0;--cp-sh-a:var(--cp-sh-dark)}
#top .cp-page .cp-on-deep{--cp-disc:#041F36;--cp-sh-rgb:0,0,0;--cp-sh-a:var(--cp-sh-dark)}

/* ---------- buttons: ONE primary, ONE secondary ---------- */
#top .cp-page .cp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;
  font-size:16px;font-weight:700;letter-spacing:-.01em;padding:16px 32px;border-radius:var(--cp-r-pill);
  border:2px solid transparent;cursor:pointer;transition:transform .16s,background .16s,border-color .16s}
#top .cp-page .cp-btn:hover{transform:translateY(-2px)}
#top .cp-page .cp-btn-primary{background:var(--cp-green);color:var(--cp-navy-900)}
#top .cp-page .cp-btn-primary:hover{background:var(--cp-green-deep)}
#top .cp-page .cp-btn-secondary{background:transparent;color:var(--cp-navy);border-color:var(--cp-g200)}
#top .cp-page .cp-btn-secondary:hover{border-color:var(--cp-navy)}
#top .cp-page .cp-g-navy .cp-btn-secondary, #top .cp-page .cp-g-deep .cp-btn-secondary{color:#fff;border-color:rgba(255,255,255,.4)}
#top .cp-page .cp-g-navy .cp-btn-secondary:hover, #top .cp-page .cp-g-deep .cp-btn-secondary:hover{border-color:#fff;background:rgba(255,255,255,.08)}
#top .cp-page .cp-btn-row{display:flex;flex-wrap:wrap;gap:14px}
#top .cp-page .cp-arrow{font-weight:700;display:inline-flex;align-items:center;gap:8px}
#top .cp-page .cp-arrow svg{transition:transform .16s}#top .cp-page .cp-arrow:hover svg{transform:translateX(4px)}

/* ---------- ONE media treatment, everywhere ---------- */
#top .cp-page .cp-media{border-radius:var(--cp-r-lg);overflow:hidden;border:1px solid var(--cp-g200);background:#fff}
#top .cp-page .cp-g-navy .cp-media, #top .cp-page .cp-g-deep .cp-media{border-color:rgba(255,255,255,.18)}
#top .cp-page .cp-mediacap{font-family:var(--cp-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cp-g400);margin-top:12px}

/* ---------- ONE card system ---------- */
#top .cp-page .cp-icard{background:#fff;border:1px solid var(--cp-g200);border-radius:var(--cp-r-lg);padding:28px;
  display:block;color:inherit;transition:border-color .18s,transform .18s}
#top .cp-page a.cp-icard:hover{border-color:var(--cp-navy);transform:translateY(-3px)}
#top .cp-page .cp-g-navy .cp-icard, #top .cp-page .cp-g-deep .cp-icard{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
#top .cp-page .cp-g-navy .cp-icard:hover, 
#top .cp-page .cp-icard h4{margin:16px 0 8px}
#top .cp-page .cp-icard p{font-size:15px;color:var(--cp-g600);line-height:1.5}
#top .cp-page .cp-g-navy .cp-icard p, #top .cp-page .cp-g-deep .cp-icard p{color:rgba(255,255,255,.64)}
#top .cp-page .cp-chip{flex:0 0 42px;width:42px;height:42px;min-width:42px;border-radius:var(--cp-r-md);background:rgba(46,101,243,.10);display:grid;place-items:center;color:var(--cp-electric)}
#top .cp-page .cp-g-navy .cp-chip, #top .cp-page .cp-g-deep .cp-chip{background:rgba(185,255,29,.13);color:var(--cp-green)}
#top .cp-page .cp-chip svg{flex:0 0 22px;width:22px;height:22px}
#top .cp-page .cp-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
#top .cp-page .cp-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* gradient word treatment — shared by the hero and the final CTA */
#top .cp-page .cp-grad{background:linear-gradient(96deg,var(--cp-blue) 0%,var(--cp-green) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}


/* ---------- 1 hero — image-free, bullets between headline and body ---------- */
#top .cp-page .cp-hero{padding:clamp(48px,5vw,76px) 0 clamp(50px,5.2vw,80px)}
#top .cp-page .cp-hero h1{color:#fff;font-size:clamp(38px,5.2vw,72px);line-height:1.04;margin-bottom:0}
#top .cp-page .cp-hero h1 .cp-grad{display:block}          /* keeps "backup & recovery" together on its own line */
#top .cp-page .cp-hero-copy{max-width:940px}
#top .cp-page .cp-hero-sub{font-size:clamp(18px,1.9vw,21px);line-height:1.5;color:rgba(255,255,255,.82);
  max-width:48ch;margin:0 0 30px}
/* stacked — shares a left edge with the headline, body and buttons */
#top .cp-page .cp-checks{list-style:none;margin:28px 0 26px;padding:0;display:flex;flex-direction:column;gap:11px}
#top .cp-page .cp-checks li{display:flex;align-items:center;gap:10px;font-weight:400;font-size:clamp(18px,1.9vw,21px);color:rgba(255,255,255,.82)}
#top .cp-page .cp-tick{width:20px;height:20px;flex:0 0 20px;border-radius:50%;background:var(--cp-green);display:grid;place-items:center}
#top .cp-page .cp-tick svg{width:11px;height:11px}

/* ---------- 2 trust bar (v1 treatment, used across all three concepts) ---------- */
#top .cp-page .cp-proofbar{background:var(--cp-navy-900);color:#fff;padding:22px 0;border-top:1px solid rgba(255,255,255,.08)}
#top .cp-page .cp-proofbar-grid{display:grid;grid-template-columns:1.5fr auto 1fr;gap:28px;align-items:center}
#top .cp-page .cp-proofbar-label{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.62)}
#top .cp-page .cp-stat{display:flex;align-items:baseline;gap:10px}
#top .cp-page .cp-stat b{font-size:clamp(22px,2.4vw,30px);font-weight:800;color:var(--cp-green);letter-spacing:-.02em;line-height:1}
#top .cp-page .cp-stat span{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.78);line-height:1.25}
#top .cp-page .cp-stars{display:flex;gap:3px;align-items:center}

/* ---------- 3 jump nav ---------- */
#top .cp-page .cp-jumpnav{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--cp-g100)}
#top .cp-page .cp-jumpnav .cp-wrap{display:flex;align-items:center;gap:4px;overflow-x:auto;height:60px;scrollbar-width:none}
#top .cp-page .cp-jumpnav .cp-wrap::-webkit-scrollbar{display:none}
#top .cp-page .cp-jumpnav a{flex:0 0 auto;font-size:15px;font-weight:600;color:var(--cp-g600);padding:9px 15px;
  border-radius:var(--cp-r-pill);white-space:nowrap}
#top .cp-page .cp-jumpnav a:hover{color:var(--cp-navy);background:var(--cp-g100)}
#top .cp-page .cp-jumpnav a.cp-active{color:var(--cp-navy);background:var(--cp-pale);box-shadow:inset 0 -2px 0 var(--cp-green)}
#top .cp-page .cp-progress{position:absolute;left:0;bottom:-1px;height:2px;background:var(--cp-green);width:0}
#top .cp-page .cp-jumpnav .cp-wrap{position:relative}
#top .cp-page .cp-navpill{position:absolute;top:50%;transform:translateY(-50%);height:38px;border-radius:var(--cp-r-pill);
  background:var(--cp-pale);z-index:0;pointer-events:none;opacity:0;
  transition:left .32s cubic-bezier(.4,0,.2,1),width .32s cubic-bezier(.4,0,.2,1),
  background-color .32s ease,opacity .2s ease}
#top .cp-page .cp-jumpnav a{position:relative;z-index:1}
#top .cp-page .cp-jumpnav a.cp-active{background:transparent}

/* ---------- 4 SIGNATURE: recovery journey (full-bleed) ---------- */
#top .cp-page .cp-journey-head{max-width:760px;margin-bottom:52px}
#top .cp-page .cp-journey{width:100vw;margin-left:calc(50% - 50vw);padding:0 var(--cp-gut);position:relative;z-index:2}
#top .cp-page .cp-jrow{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:170px 1fr;gap:28px;align-items:center}
#top .cp-page .cp-jrow + .cp-jrow{margin-top:18px}
#top .cp-page .cp-jlabel{font-family:var(--cp-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;text-align:right;line-height:1.4}
#top .cp-page .cp-jrow--typical .cp-jlabel{color:var(--cp-g400)}
#top .cp-page .cp-jrow--cp .cp-jlabel{color:var(--cp-navy)}
#top .cp-page .cp-jtrack{display:flex;align-items:stretch;gap:0}
#top .cp-page .cp-jstep{flex:1;padding:22px 20px;font-size:15.5px;font-weight:600;line-height:1.4;position:relative;
  display:flex;align-items:center;min-height:96px}
#top .cp-page .cp-jrow--typical .cp-jstep{background:#fff;border:1px solid var(--cp-g200);color:var(--cp-g600)}
#top .cp-page .cp-jrow--typical .cp-jstep + .cp-jstep{border-left:0}
#top .cp-page .cp-jrow--typical .cp-jstep:first-child{border-radius:var(--cp-r-md) 0 0 var(--cp-r-md)}
#top .cp-page .cp-jrow--typical .cp-jstep:last-child{border-radius:0 var(--cp-r-md) var(--cp-r-md) 0}
#top .cp-page .cp-jrow--cp .cp-jstep{background:var(--cp-navy);color:#fff;border:1px solid var(--cp-navy)}
#top .cp-page .cp-jrow--cp .cp-jstep + .cp-jstep{border-left:1px solid rgba(255,255,255,.16)}
#top .cp-page .cp-jrow--cp .cp-jstep:first-child{border-radius:var(--cp-r-md) 0 0 var(--cp-r-md)}
#top .cp-page .cp-jrow--cp .cp-jstep:last-child{border-radius:0 var(--cp-r-md) var(--cp-r-md) 0;background:var(--cp-green);color:var(--cp-navy-900);border-color:var(--cp-green)}
#top .cp-page .cp-jstep small{display:block;font-family:var(--cp-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.55;margin-bottom:7px;font-weight:600}
#top .cp-page .cp-jnote{max-width:1320px;margin:24px auto 0;font-size:14.5px;color:var(--cp-g400);text-align:center}

/* ---------- 5 comparison table ---------- */
#top .cp-page .cp-cmp{border:1px solid var(--cp-g200);border-radius:var(--cp-r-lg);overflow:hidden;background:#fff;
  box-shadow:0 24px 50px -30px rgba(6,45,77,.28)}
#top .cp-page .cp-cmp-row{display:grid;grid-template-columns:1fr 1.25fr 1.25fr}
#top .cp-page .cp-cmp-row + .cp-cmp-row{border-top:1px solid var(--cp-g100)}
#top .cp-page .cp-cmp-cell{padding:22px 24px;font-size:16px;line-height:1.5;color:var(--cp-g600)}
#top .cp-page .cp-cmp-head .cp-cmp-cell{font-weight:800;color:var(--cp-navy);font-size:17px;letter-spacing:-.01em;
  background:var(--cp-pale);padding-top:20px;padding-bottom:20px}
#top .cp-page .cp-cmp-row .cp-cmp-cell:first-child{font-weight:700;color:var(--cp-navy);background:var(--cp-pale)}
#top .cp-page .cp-cmp-label{display:none}
/* CrashPlan column: lime-tinted with a full-height lime rule, header included */
#top .cp-page .cp-cmp-row .cp-cmp-cell:last-child{background:rgba(185,255,29,.055);border-left:3px solid var(--cp-green);
  color:var(--cp-charcoal);font-weight:600}
#top .cp-page .cp-cmp-head .cp-cmp-cell:last-child{color:var(--cp-navy);font-weight:800}
#top .cp-page .cp-cmp-tick{display:inline-flex;align-items:flex-start;gap:10px}
#top .cp-page .cp-cmp-tick svg{flex:0 0 19px;margin-top:3px}
#top .cp-page .cp-guide-link{display:flex;align-items:center;gap:14px;margin-top:26px;padding:18px 22px;
  background:var(--cp-pale);border-radius:var(--cp-r-md);border:1px solid var(--cp-g100);font-size:16px}
#top .cp-page .cp-guide-link svg.cp-book{flex:0 0 22px}

/* ---------- 6 workflow panels ---------- */
#top .cp-page .cp-spine{position:relative}
#top .cp-page .cp-panel{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,4.4vw,68px);align-items:center;
  position:relative;z-index:2}
#top .cp-page .cp-panel + .cp-panel{margin-top:clamp(56px,6.5vw,96px);padding-top:clamp(56px,6.5vw,96px);border-top:1px solid var(--cp-g100)}
#top .cp-page .cp-panel.cp-flip .cp-panel-media{order:-1}
#top .cp-page .cp-pnum{display:flex;align-items:center;gap:12px;margin-bottom:18px}
#top .cp-page .cp-pnum em{font-family:var(--cp-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cp-electric);font-style:normal;font-weight:600}
#top .cp-page .cp-pnum i{flex:1;height:1px;background:var(--cp-g200);font-style:normal;max-width:64px}
#top .cp-page .cp-pnum em{font-family:var(--cp-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cp-navy);font-style:normal;font-weight:600}
#top .cp-page .cp-flist{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
#top .cp-page .cp-flist li{display:flex;gap:13px;align-items:flex-start}
#top .cp-page .cp-fdot{width:9px;height:26px;flex:0 0 9px;display:flex;align-items:center;justify-content:center}
#top .cp-page .cp-fdot span{width:9px;height:9px;border-radius:50%;background:var(--cp-green);display:block}
#top .cp-page .cp-flist strong{display:block;color:var(--cp-navy);font-size:17px;font-weight:700;margin-bottom:3px}
#top .cp-page .cp-flist p{color:var(--cp-g600);font-size:16px;line-height:1.55}
#top .cp-page .cp-subgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
#top .cp-page .cp-subcard{background:var(--cp-pale);border:1px solid var(--cp-g100);border-radius:var(--cp-r-md);padding:20px}
#top .cp-page .cp-subcard h4{margin-bottom:6px;font-size:16.5px}
#top .cp-page .cp-subcard p{font-size:15px;color:var(--cp-g600);line-height:1.5}

/* ---------- 7 security matrix (not cards) ---------- */
#top .cp-page .cp-matrix{border:1px solid rgba(255,255,255,.16);border-radius:var(--cp-r-lg);overflow:hidden}
#top .cp-page .cp-mrow{display:grid;grid-template-columns:repeat(2,1fr)}
#top .cp-page .cp-mcell{padding:28px 30px;display:flex;gap:16px;align-items:flex-start;
  border-bottom:1px solid rgba(255,255,255,.1)}
#top .cp-page .cp-mcell:nth-child(odd){border-right:1px solid rgba(255,255,255,.1)}
#top .cp-page .cp-matrix .cp-mrow:last-child .cp-mcell{border-bottom:0}
#top .cp-page .cp-mcell h4{margin-bottom:6px}
#top .cp-page .cp-mcell p{font-size:15px;color:rgba(255,255,255,.62);line-height:1.5}

/* demo video — lightbox with custom thumbnail */
#top .cp-page .cp-videothumb{display:block;width:min(760px,100%);margin:0 auto;aspect-ratio:16/9;border-radius:var(--cp-r-lg);
  border:1px solid rgba(255,255,255,.22);cursor:pointer;position:relative;overflow:hidden;padding:0;
  background:var(--cp-navy-900);transition:border-color .18s ease}
#top .cp-page .cp-videothumb img{width:100%;height:100%;object-fit:cover;display:block}
/* scrim keeps the play button legible over the artwork */
#top .cp-page .cp-videothumb::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(4,31,54,.55) 0%, rgba(4,31,54,.18) 46%, rgba(4,31,54,.34) 100%)}
#top .cp-page .cp-videothumb .cp-playbtn{z-index:2}
#top .cp-page .cp-videothumb:hover{border-color:rgba(185,255,29,.5)}
#top .cp-page .cp-playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;
  border-radius:50%;background:var(--cp-green);display:grid;place-items:center;transition:transform .2s ease}
#top .cp-page .cp-videothumb:hover .cp-playbtn{transform:translate(-50%,-50%) scale(1.07)}
#top .cp-page .cp-playbtn svg{width:26px;height:26px;margin-left:4px}
#top .cp-page .cp-lightbox{position:fixed;inset:0;z-index:300;background:rgba(2,12,20,.88);display:none;
  align-items:center;justify-content:center;padding:var(--cp-gut)}
#top .cp-page .cp-lightbox.cp-is-open{display:flex}
#top .cp-page .cp-lightbox-inner{width:min(1100px,100%);aspect-ratio:16/9;border-radius:var(--cp-r-lg);overflow:hidden;
  background:#000;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;
  color:rgba(255,255,255,.55);font-family:var(--cp-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
#top .cp-page .cp-lightbox-close{position:absolute;top:26px;right:30px;background:none;border:0;color:#fff;
  font-size:34px;line-height:1;cursor:pointer}

/* ---------- 9 proof: editorial, not cards ---------- */
#top .cp-page .cp-proofrow{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,56px);align-items:center}
#top .cp-page .cp-bigquote{font-size:clamp(20px,2.3vw,27px);line-height:1.42;color:var(--cp-navy);font-weight:700;
  letter-spacing:-.02em;margin:0}
#top .cp-page .cp-byline{display:flex;align-items:center;gap:13px;margin-top:24px}
#top .cp-page .cp-byline b{display:block;font-size:15px;color:var(--cp-navy)}
#top .cp-page .cp-byline span{font-size:14px;color:var(--cp-g400)}
#top .cp-page .cp-bigstat b{display:block;font-size:clamp(46px,5.6vw,74px);font-weight:800;letter-spacing:-.04em;
  line-height:.95;color:var(--cp-navy)}
#top .cp-page .cp-bigstat span{display:block;margin-top:12px;font-size:16px;color:var(--cp-g600);max-width:24ch}
#top .cp-page .cp-bigstat + .cp-bigstat{margin-top:34px;padding-top:34px;border-top:1px solid var(--cp-g200)}
#top .cp-page .cp-badges{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:52px;
  padding-top:44px;border-top:1px solid var(--cp-g200)}
#top .cp-page .cp-badges img{height:104px;width:auto}
#top .cp-page .cp-badgecap{text-align:center;font-family:var(--cp-mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cp-g400);margin-top:22px}

/* ---------- 11 specs ---------- */
#top .cp-page .cp-spectable{border:1px solid rgba(255,255,255,.15);border-radius:var(--cp-r-md);overflow:hidden;margin-top:34px}
#top .cp-page .cp-specrow{display:grid;grid-template-columns:.6fr 1.4fr}
#top .cp-page .cp-specrow + .cp-specrow{border-top:1px solid rgba(255,255,255,.09)}
#top .cp-page .cp-specrow:nth-child(odd){background:rgba(255,255,255,.025)}
#top .cp-page .cp-specrow dt{padding:16px 24px;font-weight:700;font-size:14.5px;color:#fff;border-right:1px solid rgba(255,255,255,.09)}
#top .cp-page .cp-specrow dd{margin:0;padding:16px 24px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.72)}

/* ---------- 12 FAQ — fully expanded, no accordion ---------- */
/* FAQ — fully expanded, no expanders (client: everything visible on the page) */
#top .cp-page .cp-faqgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,4vw,60px)}
#top .cp-page .cp-faqitem{padding:24px 0;border-top:1px solid var(--cp-g200);break-inside:avoid}
#top .cp-page .cp-faqitem h4{margin-bottom:8px;font-size:17.5px}
#top .cp-page .cp-faqitem p{font-size:16px;line-height:1.6;color:var(--cp-g600)}
#top .cp-page .cp-faqitem p b{color:var(--cp-navy);font-weight:700}

/* ---------- 13 final CTA ---------- */
#top .cp-page .cp-finalcta{text-align:center;padding:clamp(72px,9vw,132px) 0}
#top .cp-page .cp-finalcta h2{max-width:15ch;margin:0 auto 20px;color:#fff}
#top .cp-page .cp-finalcta p{color:rgba(255,255,255,.78);max-width:56ch;margin:0 auto 34px;font-size:19px}
#top .cp-page .cp-finalcta .cp-btn-row{justify-content:center}

/* ---------- module map ---------- */
#top .cp-page .cp-annot{position:fixed;right:18px;bottom:18px;z-index:200;background:var(--cp-navy);color:#fff;
  border:0;border-radius:var(--cp-r-pill);padding:12px 20px;font-family:var(--cp-mono);font-size:11.5px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.45)}
#top body.cp-annotate [data-mod]{outline:1px dashed rgba(46,101,243,.5);outline-offset:-1px}
#top body.cp-annotate [data-mod]::before{content:attr(data-mod);position:absolute;top:0;left:0;z-index:50;
  font-family:var(--cp-mono);font-size:10px;font-weight:600;letter-spacing:.05em;background:var(--cp-electric);
  color:#fff;padding:5px 10px;border-radius:0 0 6px 0;pointer-events:none;text-transform:uppercase}
#top body.cp-annotate [data-state="new"]::before{background:var(--cp-crimson)}
#top body.cp-annotate [data-state="copy"]::before{background:#B8860B}

@media (max-width:1000px){
  #top .cp-page .cp-panel, #top .cp-page .cp-proofrow, #top .cp-page .cp-faqgrid{grid-template-columns:1fr}
  #top .cp-page .cp-panel.cp-flip .cp-panel-media{order:0}
  #top .cp-page .cp-grid-4{grid-template-columns:1fr 1fr}
  #top .cp-page .cp-jrow{grid-template-columns:1fr;gap:12px}
  #top .cp-page .cp-jlabel{text-align:left}
  #top .cp-page .cp-mrow{grid-template-columns:1fr}
  #top .cp-page .cp-mcell:nth-child(odd){border-right:0}
  }
/* comparison and journey are unreadable well before phone width */
@media (max-width:900px){
  #top .cp-page .cp-cmp-row{grid-template-columns:1fr}
  #top .cp-page .cp-cmp-head{display:none}
  #top .cp-page .cp-cmp-label{display:block;font-family:var(--cp-mono);font-size:10.5px;letter-spacing:.09em;
    text-transform:uppercase;color:var(--cp-g400);margin-bottom:6px}
  #top .cp-page .cp-cmp-row .cp-cmp-cell:last-child .cp-cmp-label{color:var(--cp-navy)}
  #top .cp-page .cp-cmp-row .cp-cmp-cell:first-child{font-size:15px;text-transform:uppercase;letter-spacing:.07em}
  #top .cp-page .cp-jtrack{flex-direction:column}
  #top .cp-page .cp-jrow--typical .cp-jstep, #top .cp-page .cp-jrow--cp .cp-jstep{border-radius:var(--cp-r-md)!important;min-height:0}
  #top .cp-page .cp-jrow--typical .cp-jstep + .cp-jstep, #top .cp-page .cp-jrow--cp .cp-jstep + .cp-jstep{border-left:1px solid var(--cp-g200);margin-top:8px}
  #top .cp-page .cp-jrow--cp .cp-jstep + .cp-jstep{border-left:1px solid var(--cp-navy)}
}
@media (max-width:640px){
  #top .cp-page{font-size:16.5px}
  #top .cp-page .cp-grid-4, #top .cp-page .cp-grid-3, #top .cp-page .cp-subgrid{grid-template-columns:1fr}
  #top .cp-page .cp-specrow{grid-template-columns:1fr}
  #top .cp-page .cp-badges img{height:76px}
  #top .cp-page .cp-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  #top .cp-page *{transition:none!important;animation:none!important}}


/* ==========================================================================
   PRODUCTION ADDITIONS — not in the design file
   ========================================================================== */

/* --- Enfold list reset. Its selector is (0,2,2); cooperate with its own
       variables rather than out-specifying it. --- */
#top .cp-page{--listGap:0;--listInnerGap:0}
#top .cp-page ul li::before{content:none;display:none}
#top .cp-page ul li{margin:0;padding:0}

/* --- Sticky enablement. position:sticky dies if any ancestor has overflow
       other than visible. `clip` suppresses horizontal overflow without
       creating a scroll container. --- */
#wrap_all,#main,.container_wrap,.container_wrap_first,
#top .cp-page,#top .cp-page > *{overflow:visible}
#top .cp-page .cp-section{overflow:hidden}   /* rings must still clip */
html,body{overflow-x:clip;overflow-y:visible}

/* --- Header clearance + sticky park point, both measured live in JS. --- */
#top .cp-page .cp-hero{padding:calc(clamp(64px,6.5vw,80px) + var(--cp-header-h,0px)) 0 clamp(50px,5.2vw,80px)}
#top .cp-page .cp-jumpnav{top:var(--cp-sticky-top,0px)}
#top .cp-page .cp-section{scroll-margin-top:calc(var(--cp-sticky-top,0px) + 60px)}

/* --- Sticky nav floating highlight --- */
#top .cp-page .cp-jumpnav .cp-wrap{position:relative}
#top .cp-page .cp-navpill{position:absolute;top:50%;transform:translateY(-50%);height:38px;
  border-radius:var(--cp-r-pill);background:var(--cp-pale);z-index:0;pointer-events:none;opacity:0;
  transition:left .32s cubic-bezier(.4,0,.2,1),width .32s cubic-bezier(.4,0,.2,1),
  background-color .32s ease,opacity .2s ease}
#top .cp-page .cp-jumpnav a{position:relative;z-index:1}
#top .cp-page .cp-jumpnav a.cp-active{background:transparent}

/* --- Lime tick. flex:0 0 stops it shrinking when a bullet wraps. --- */
#top .cp-page .cp-tickc{flex:0 0 19px;width:19px;height:19px;margin-top:3px}
#top .cp-page .cp-platlist{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
#top .cp-page .cp-platlist li{display:flex;gap:11px;align-items:flex-start;font-weight:600;
  color:var(--cp-navy);font-size:16.5px;line-height:1.45;margin:0;padding:0}

/* --- Demo video: thumbnail + lightbox --- */
#top .cp-page .cp-videothumb{display:block;width:min(760px,100%);margin:0 auto;aspect-ratio:16/9;
  border-radius:var(--cp-r-lg);border:1px solid rgba(255,255,255,.22);cursor:pointer;
  position:relative;overflow:hidden;padding:0;background:var(--cp-navy-900);
  transition:border-color .18s ease}
#top .cp-page .cp-videothumb:hover{border-color:rgba(185,255,29,.5)}
#top .cp-page .cp-videothumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
#top .cp-page .cp-videothumb::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(4,31,54,.55) 0%, rgba(4,31,54,.18) 46%, rgba(4,31,54,.34) 100%)}
#top .cp-page .cp-playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;background:var(--cp-green);display:grid;
  place-items:center;transition:transform .2s ease;z-index:2}
#top .cp-page .cp-videothumb:hover .cp-playbtn{transform:translate(-50%,-50%) scale(1.07)}
#top .cp-page .cp-playbtn svg{width:26px;height:26px;margin-left:4px}
#top .cp-page .cp-lightbox{position:fixed;inset:0;z-index:100000;background:rgba(2,12,20,.88);
  display:none;align-items:center;justify-content:center;padding:var(--cp-gut)}
#top .cp-page .cp-lightbox.cp-is-open{display:flex}
#top .cp-page .cp-lightbox-inner{position:relative;width:min(1100px,100%);aspect-ratio:16/9;
  border-radius:var(--cp-r-lg);overflow:hidden;background:#000;
  border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;
  color:rgba(255,255,255,.55);font-family:var(--cp-mono);font-size:13px;
  letter-spacing:.08em;text-transform:uppercase}
#top .cp-page .cp-lightbox-inner iframe,#top .cp-page .cp-lightbox-inner video,
#top .cp-page .cp-lightbox-inner embed,#top .cp-page .cp-lightbox-inner object{position:absolute;inset:0;
  width:100%;height:100%;max-width:none;border:0;display:block}
#top .cp-page .cp-lightbox-close{position:absolute;top:26px;right:30px;z-index:1;background:none;
  border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer}


/* --- Heading weights. The grouped h1–h4 rule sets 800; h4 is 700 in the
       design and must be restated after it. --- */
#top .cp-page h4{font-size:18.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
#top .cp-page h3{font-weight:800}
#top .cp-page .cp-mcell h4,#top .cp-page .cp-icard h4,#top .cp-page .cp-subcard h4,#top .cp-page .cp-faqitem h4{font-weight:700}

/* --- Icon chips: rounded outline as well as the tint --- */
#top .cp-page .cp-chip{border:1px solid rgba(46,101,243,.22)}
#top .cp-page .cp-g-navy .cp-chip,#top .cp-page .cp-g-deep .cp-chip{border-color:rgba(185,255,29,.28)}

/* --- FAQ accordion (replaces the expanded grid in the design file) --- */
#top .cp-page .cp-faq{border-top:1px solid var(--cp-g200)}
#top .cp-page .cp-faqitem{border-bottom:1px solid var(--cp-g200);padding:0}
#top .cp-page .cp-faqitem h4{margin:0;font-size:18px}
#top .cp-page .cp-faq-q{display:block;width:100%;text-align:left;background:none;border:0;
  cursor:pointer;font-family:inherit;font-size:18px;font-weight:700;letter-spacing:-.015em;
  color:var(--cp-navy);padding:22px 48px 22px 0;position:relative}
#top .cp-page .cp-faq-q:hover{color:var(--cp-electric)}
#top .cp-page .cp-faq-q::after{content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--cp-electric);border-bottom:2px solid var(--cp-electric);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
#top .cp-page .cp-faq-q[aria-expanded="true"]::after{transform:translateY(-30%) rotate(-135deg)}
#top .cp-page .cp-faq-a{padding:0 60px 24px 0}
#top .cp-page .cp-faq-a p{color:var(--cp-g600);font-size:16.5px;line-height:1.62}
#top .cp-page .cp-faq-a p b{color:var(--cp-navy);font-weight:700}

/* --- Sticky nav, belt and braces ---------------------------------------
   Sticky needs: a scrollable viewport (not an overflow container), a z-index
   above the sections it passes over, and no ancestor clipping it. Mobile was
   failing because the theme's mobile menu sets overflow on html/body. --- */
#top .cp-page .cp-jumpnav{position:-webkit-sticky;position:sticky;
  top:var(--cp-sticky-top,0px);z-index:5}
html.av-burger-overlay-active,
html.av-burger-overlay-active body{overflow-x:clip}
@media (max-width:767px){
  #top .cp-page .cp-jumpnav{position:-webkit-sticky;position:sticky;top:var(--cp-sticky-top,0px)}
  #top .cp-page .cp-jumpnav .cp-wrap{height:54px}
  #top .cp-page .cp-jumpnav a{font-size:14px;padding:8px 12px}
}

/* --- Theme anchor-offset hack ------------------------------------------
   Enfold inserts a hidden block the height of the header before whichever
   element is :target, to stop jump links hiding a heading behind the header:
     [id]:target:before{content:'';display:block;height:calc(var(--headerNav));visibility:hidden}
   We already handle that with scroll-margin-top, so the theme's version is
   redundant and adds a stray gap to whichever section was last linked to.
   Its specificity is (0,2,1); ours is (1,2,1). --- */
#top .cp-page [id]:target::before,
#top .cp-page [name]:target::before{content:none;display:none;height:0}


/* ==========================================================================
   MOBILE COMPARISON TABLE � stacked cards
   Append only. Same borders, radii, grounds and type as desktop; each row
   becomes its own card instead of a band inside one long container.
   ========================================================================== */
@media (max-width:900px){

  /* the outer frame steps aside � each row carries the styling now */
  #top .cp-page .cp-cmp{
    border:0;
    border-radius:0;
    overflow:visible;
    background:transparent;
    box-shadow:none;
  }

  /* each row becomes a card, reusing the frame's border + radius */
  #top .cp-page .cp-cmp-row{
    display:block;
    background:#fff;
    border:1px solid var(--cp-g200);
    border-radius:var(--cp-r-lg);
    overflow:hidden;
    box-shadow:0 18px 40px -32px rgba(6,45,77,.28);
  }
  #top .cp-page .cp-cmp-row + .cp-cmp-row{
    border-top:1px solid var(--cp-g200);   /* replaces the hairline join */
    margin-top:16px;
  }

  /* criterion becomes the card header, keeping the pale ground */
  #top .cp-page .cp-cmp-row .cp-cmp-cell:first-child{
    background:var(--cp-pale);
    border-bottom:1px solid var(--cp-g100);
    padding:16px 22px;
    font-size:13px;
    letter-spacing:.09em;
    text-transform:uppercase;
    font-family:var(--cp-mono);
    font-weight:600;
  }

  /* the two answers */
  #top .cp-page .cp-cmp-cell{padding:20px 22px}
  #top .cp-page .cp-cmp-row .cp-cmp-cell:nth-child(2){padding-bottom:22px}

  /* CrashPlan cell keeps its lime tint and rule, flush to the card */
  #top .cp-page .cp-cmp-row .cp-cmp-cell:last-child{
    border-left:3px solid var(--cp-green);
    border-top:1px solid var(--cp-g100);
  }

  /* Head row stays hidden. .cp-cmp-row{display:block} above matches
     .cp-cmp-head too and has equal specificity, so this needs one extra
     class to win rather than relying on source order. */
  #top .cp-page .cp-cmp .cp-cmp-head{display:none}

  /* labels sit above each answer */
  #top .cp-page .cp-cmp-label{
    display:block;
    font-family:var(--cp-mono);
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--cp-g400);
    margin-bottom:7px;
  }
  #top .cp-page .cp-cmp-row .cp-cmp-cell:last-child .cp-cmp-label{color:var(--cp-navy)}

/* ==========================================================================
   MOBILE � CTA BUTTONS + G2 TRUST BAR
   Append only. Nothing above is modified.
   ========================================================================== */

/* --- Trust bar: the three columns never collapsed, so at phone width the
       label, stars and G2 line were crushed together. Stack and centre. --- */
@media (max-width:900px){
  #top .cp-page .cp-proofbar{padding:20px 0}
  #top .cp-page .cp-proofbar-grid{
    grid-template-columns:1fr;
    gap:12px;
    justify-items:center;
    text-align:center;
  }
  #top .cp-page .cp-proofbar-label{font-size:13.5px}
  #top .cp-page .cp-stat{justify-content:center;flex-wrap:wrap;gap:8px}
  #top .cp-page .cp-stat b{font-size:24px}
  #top .cp-page .cp-stat span{font-size:13.5px}
}

/* --- CTAs: width:100% (line 317) made each button a full-bleed pill. Size
       them to their labels instead; both fit on one row at 360px+. --- */
@media (max-width:640px){
  #top .cp-page .cp-btn{
    width:auto;
    padding:14px 24px;
    font-size:15.5px;
  }
  #top .cp-page .cp-btn-row{gap:10px}
}


}


/* ==========================================================================
   SEPT 2026 FEEDBACK
   Append only. Nothing above is modified.
   ========================================================================== */

/* --- Tighter gap between the intro ("Flexible endpoint backup…") and the
       first spine panel ("Choose the storage target…"). Two stacked
       .cp-section blocks each carried full --cp-sec padding, so the gap was
       up to 184px. Halve both sides of the join only; every other section
       keeps its rhythm. Keyed off .cp-spine so Server/M365 get it too. --- */
#top .cp-page .cp-section:has(+ .cp-section .cp-spine){padding-bottom:clamp(20px,2.6vw,40px)}
#top .cp-page .cp-section:has(.cp-spine){padding-top:clamp(20px,2.6vw,40px)}

/* --- Jump nav scroll cue. JS adds .cp-jn-more while links overflow to the
       right; the arrow fades the last visible link and nudges the row. --- */
#top .cp-page .cp-jumpnav .cp-jn-arrow{display:none}
#top .cp-page .cp-jumpnav.cp-jn-more .cp-jn-arrow{
  display:flex;align-items:center;justify-content:flex-end;
  position:absolute;top:0;right:0;bottom:0;z-index:3;
  width:64px;margin:0;padding:0 10px 0 0;border:0;border-radius:0;box-shadow:none;
  background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.96) 45%);
  color:var(--cp-navy);cursor:pointer;-webkit-tap-highlight-color:transparent}
#top .cp-page .cp-jumpnav .cp-jn-arrow svg{
  width:28px;height:28px;padding:5px;border-radius:50%;
  background:var(--cp-pale);border:1px solid var(--cp-g200);display:block}
#top .cp-page .cp-jumpnav .cp-jn-arrow:hover svg{border-color:var(--cp-navy)}